hongze_yb_xcx/pages-report/reportList.vue

<template>
  <view class="report-list-page">
    <view class="top-filter-box">
      <view class="flex search-wrap">
        <view style="flex: 1">
        <searchBox 
          placeholder="请输入报告标题或摘要或关键字" 
          :hasRightBtn="false" 
          :disabled="false"
          :clear="!searchVal"
          @change="onChange"
          @search="onSearch"
        ></searchBox>
        </view>
        <!-- <view class="filter-box" @click="showFilter=true" v-if="classifyList.length>0">
          <image src="./static/filter-icon.png" mode="aspectFill"></image>
          <text>筛选</text>
        </view> -->
      </view>
      <view class="tabs-box" v-if="classifyMenuList.length>0">
        <text 
          :class="['sub-nav-item',0===selectClassifyMenu?'active':'']" 
          @click="handleSelectMenu({menu_id:0,menu_name:'全部'})"
        >全部</text>
        <text 
          :class="['sub-nav-item',item.menu_id===selectClassifyMenu?'active':'']" 
          v-for="item in classifyMenuList" 
          :key="item.menu_id"
          @click="handleSelectMenu(item)"
        >{{item.menu_name}}</text>
      </view>
    </view>
    <view class="report-empty-box" v-if="finished&&list.length==0">
      <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
      <view>{{searchVal?'找不到对应报告，试试别的搜索词吧':'暂无报告'}}</view>
    </view>
    <view class="report-list-wrap" :style="{paddingBottom:showAudioPop&&'150px'}" v-else>
      <view class="flex item" v-for="item in list" :key="item.report_id" @click="goReportDetail(item)">
        <image class="img" :src="item.report_img_url" mode="aspectFill" lazy-load />
        <view class="con">
          <view class="title" :style="!item.abstract.length?'min-height: 70rpx;':''" v-html="item.title"></view>
          <view class="abstract" v-html="item.abstract"></view>
          <view class="info">
            <view v-html="item.classify_name_third?item.classify_name_third:item.classify_name_second" style="display:inline-block"></view>
            <text v-if="item.classify_name_third||item.classify_name_second" style="display:inline-block;margin:0 10rpx">&nbsp;·&nbsp;</text>
            <text v-if="item.rai_report_id>0">{{item.publish_time|formatReportTime}}</text>
            <text v-else>{{item.stage}}期 | {{item.publish_time|formatReportTime}}</text>
          </view>
          <!-- 权益研报没有音频播放 -->
          <view class="audio-box" v-if="item.auth_ok&&item.rai_report_id===0" @click.stop="handleClickAudio(item)">
            <image :src="curAudioReportId==item.report_id&&!curAudioPaused?'./static/a-play.png':'./static/a-pause.png'" mode="aspectFill"/>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选 -->
    <van-popup :show="showFilter" position="bottom" :safe-area-inset-bottom="false" round @close="showFilter=false">
        <view class="filter-wrap" @touchmove.stop>
            <view class="flex top">
                <text style="color:#000">筛选</text>
                <text style="color:#E3B377" @click="showFilter=false">取消</text>
            </view>
            <view class="list-box">
                <van-row gutter="10">
                    <van-col span="8" v-for="item in classifyList" :key="item.classify_id_second">
                        <view 
                          :class="['item',item.classify_id_second==selectSecClassifyId&&'active']" 
                          @click="handleSelectSecClassifyId(item)"
                        >{{item.classify_second_simple}}</view>
                    </van-col>
                </van-row>
            </view>
        </view>
    </van-popup>

    <!-- 音频弹窗 -->
    <audioBox v-if="showAudioPop"></audioBox>

    <!-- 分享海报 -->
    <sharePoster 
      :style="{bottom:'190rpx'}" 
      :shareData="{
        type:'report_list',
        code_page:'pages-report/reportList',
        code_scene:code_scene,
        data:shareParams
      }"></sharePoster>
  </view>
</template>

<script>
import searchBox from "./components/searchBox.vue";
import audioBox from './components/audioBox.vue'
import sharePoster from '@/components/sharePoster/sharePoster.vue'
import {apiReportList,apiSubClassifyList,apiReportClassifyMenuList} from '@/api/report'
import {apiGetSceneToParams} from '@/api/common'
const dayjs=require('@/utils/dayjs.min')
export default {
  computed: {
    showAudioPop(){//是否显示音频弹窗
      return this.$store.state.report.audioData.show 
    },
    curAudioReportId(){//当前播放的音频所属报告
      return this.$store.state.report.audioData.reportId
    },
    curAudioPaused(){//当前音频是否暂停状态
      return this.$store.state.report.audioData.paused
    },
    shareParams(){
      let obj={
        list_title:this.classifyName,
        img_1:'',
        title_1:'',
        abstract_1:'',
        abstract_1_style:'',
        time_1:'',
        img_2:'',
        title_2:'',
        abstract_2:'',
        abstract_2_style:'',
        time_2:'',
      }
      if(this.list[0]){
        obj.img_1=this.list[0].report_img_url
        obj.title_1=this.list[0].title 
        obj.abstract_1=this.list[0].classify_name_second
        obj.time_1=this.list[0].rai_report_id===0? `${this.list[0].stage}期 | ${dayjs(this.list[0].publish_time).format('YYYY.MM.DD')}`:`${dayjs(this.list[0].publish_time).format('YYYY.MM.DD')}`
        obj.abstract_1_style=this.list[0].classify_name_second?'':'display:none'
      }
      if(this.list[1]){
        obj.img_2=this.list[1].report_img_url
        obj.title_2=this.list[1].title 
        obj.abstract_2=this.list[1].classify_name_second
        obj.time_2=this.list[1].rai_report_id===0?`${this.list[1].stage}期 | ${dayjs(this.list[1].publish_time).format('YYYY.MM.DD')}`:`${dayjs(this.list[1].publish_time).format('YYYY.MM.DD')}`
        obj.abstract_2_style=this.list[1].classify_name_second?'':'display:none'
      }
      return obj
    },
    code_scene(){
      return JSON.stringify({classifyId:this.classifyId,classifyName:this.classifyName})
    }
  },
  components: {
    searchBox,
    audioBox
  },
  data() {
    return {
      classifyId:0,
      classifyName:'',

      classifyList:[],
      selectSecClassifyId:0,

      searchVal: "",
      showFilter:false,

      list:[],
      finished:false,
      page:1,
      pageSize:20,

      classifyMenuList:[],
      selectClassifyMenu:0,
    };
  },
  onLoad(options) {
    if(options.scene){
      this.init(options.scene)
    }else{
      this.classifyId=options.classifyId
      this.classifyName=decodeURIComponent(options.classifyName)
      // 设置title
      uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
      this.getList()
      // this.getClassifyList()
      this.getClassifyMenuList()
    }
    
  },
  onPullDownRefresh() {
    this.page=1
    this.list=[]
    this.finished=false
    this.getList()
    // this.getClassifyList()
    this.getClassifyMenuList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  onReachBottom() {
    if(this.finished) return
    this.page++
    this.getList()
  },
  onShareAppMessage() {
    return {
      title:`FICC【${this.classifyName}】`
    }
  },
  methods: {
    async init(e){
      const res=await apiGetSceneToParams({scene_key:e})
      if(res.code==200){
        const obj=JSON.parse(res.data)
        this.classifyId=obj.classifyId
        this.classifyName=decodeURIComponent(obj.classifyName)
        uni.setNavigationBarTitle({ title: decodeURIComponent(obj.classifyName) })
        this.getList()
        // this.getClassifyList()
        this.getClassifyMenuList()
      }
    },

    //获取研报列表
    async getList(){
      const res=await apiReportList({
        classify_id_first:Number(this.classifyId),
        classify_id_second:Number(this.selectSecClassifyId),
        classify_menu_id:Number(this.selectClassifyMenu),
        key_word:this.searchVal,
        current_index:this.page,
        page_size:this.pageSize
      })
      if(res.code===200){
        let arr=res.data.list||[]
        this.list=[...this.list,...arr]
        if(res.data.paging.is_end){
          this.finished=true
        }
      }
    },

    // 获取子目录
    async getClassifyMenuList(){
      const res=await apiReportClassifyMenuList({classify_id:Number(this.classifyId)})
      if(res.code===200){
        this.classifyMenuList=res.data||[]
      }
    },
    handleSelectMenu(item){
	  if(item.menu_id==this.selectClassifyMenu) return
      this.selectClassifyMenu=item.menu_id
      this.searchVal=''
      this.page=1
      this.finished=false
      this.list=[]
      this.getList()
    },

    //分类数据(需求修改 不要这种筛选了 换成后台配置的子目录去筛选)
    async getClassifyList(){
      const res=await apiSubClassifyList({classify_id_first:Number(this.classifyId)})
      if(res.code===200){
        this.classifyList=res.data
      }
    },

    handleSelectSecClassifyId(item){
      if(this.selectSecClassifyId==item.classify_id_second){
        this.selectSecClassifyId=''
      }else{
        this.selectSecClassifyId=item.classify_id_second
      }
      this.showFilter=false
      this.page=1
      this.finished=false
      this.list=[]
      this.getList()
    },

    onChange(e) {
      this.searchVal = e;
    },

    onSearch() {
      console.log("搜索", this.searchVal);
      this.page=1
      this.finished=false
      this.list=[]
      this.getList()
    },

    goReportDetail(item){
      // 权益研报
      if(item.rai_report_id>0){
        uni.navigateTo({ url: '/pages-report/raiReportDetail?reportId='+item.report_id })
        return
      }
      // if(['晨报','周报'].includes(item.classify_name_first)){
      if(item.has_chapter&&item.report_detail_show_type===2){
        uni.navigateTo({ url: '/pages-report/chapterList?reportId='+item.report_id })
        return 
      }
      uni.navigateTo({ url: '/pages-report/reportDetail?reportId='+item.report_id })
    },

    handleClickAudio(item){
      if(!item.auth_ok) return
      if((!item.video_list||item.video_list.length==0)&&!item.video_url){
        uni.showToast({
          title: '暂无音频',
          icon: 'none'
        })
        return
      }
      // 判断是否为同一个音频
      if(this.$store.state.report.audioData.reportId==item.report_id){
        if(this.globalBgMusic.paused){
          this.globalBgMusic.play()
          this.$store.commit('showPopAudio')
        }else{
          this.globalBgMusic.pause()
        }
      }else{
        this.$store.commit('addAudio', {
				list: item.video_url
					? [{ video_name: item.video_name,video_url: item.video_url,video_play_seconds: item.video_play_seconds }]
					: item.video_list,
				reportId:item.report_id
			})
      }
    },

    // 跳转搜索
    goSearch(){
      uni.navigateTo({
        url:`/pages-report/reportListSearch?classify_id_first=${this.classifyId}&classifyName=${this.classifyName}`
      })
    }

  },
};
</script>

<style>
page{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
<style lang="scss" scoped>
.top-filter-box{
  background-color: white;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 99;
  .tabs-box{
        box-shadow: 0px 4rpx 4rpx 0px rgba(198,198,198,0.2500);
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 34rpx 16rpx 34rpx;
        &::-webkit-scrollbar{
            width: 0;
            height: 0;
            display: none;
        }
        .sub-nav-item{
            display: inline-block;
            position: relative;
            margin-right: 50rpx;
            font-size: 28rpx;
            color: #666;
            position: relative;
            &.active{
                color: #E3B377;
                &::after{
                    content: '';
                    display: block;
                    width: 54rpx;
                    height: 4rpx;
                    background-color: #E3B377;
                    position: absolute;
                    bottom: -16rpx;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}
.search-wrap {
  background-color: #fff;
  padding: 30rpx 34rpx 16rpx 34rpx;
  align-items: center;
  .filter-box {
    margin-left: 20rpx;
    image {
      width: 52rpx;
      height: 52rpx;
      vertical-align: middle;
    }
    text {
      vertical-align: middle;
      color: #e3b377;
      font-size: 32rpx;
    }
  }
}
.report-list-wrap {
  padding: 34rpx 34rpx 0 34rpx;
  .item{
    margin-bottom: 30rpx;
    position: relative;
    .img{
      width: 90rpx;
      height: 120rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 19rpx;
      flex-shrink: 0;
    }
    .con{
      padding-right: 100rpx;
      flex: 1;
    }
    .title{
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
     // min-height: 70rpx;
    }
    .abstract{
        /* width:100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; */
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        color: #9C9791;
        div{
            color: #9C9791;
        }
    }
    .info{
      font-size: 24rpx;
      color: #9C9791;
    }
    .audio-box{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 20px;
      background: linear-gradient(180deg, #F3A52F 0%, #E3B377 100%);
      border-radius: 6px;
      right: 20rpx;
      text-align: center;
      image{
        width: 12px;
        height: 12px;
        position: relative;
        top: 1px;
      }
    }

  }
}
.filter-wrap{
    background-color: #fff;
    padding-top: 53rpx;
    .top{
        font-size: 32rpx;
        justify-content: space-between;
        margin-bottom: 40rpx;
        padding: 0 34rpx;
    }
    .list-box{
        min-height: 30vh;
        max-height: 60vh;
        overflow-y: auto;
        padding: 0 34rpx;
        .item{
            background-color: #F6F6F6;
            color: #000000;
            // text-align: center;
            height: 76rpx;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            // line-height: 76rpx;
            margin-bottom: 20rpx;
        }
        .active{
            background-color: #FAEEDE;
        }
    }
}
</style>