hongze_yb_xcx/pages-report/reportList.vue

<template>
  <view class="report-list-page">
    <van-sticky style="background: #fff">
      <view class="flex search-wrap">
        <searchBox style="flex: 1" :focus="focus" placeholder="请输入报告标题或关键字" :hasRightBtn="false" @change="onChange" @search="onSearch"></searchBox>
        <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>
    </van-sticky>
    <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&&'90px'}" 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" />
        <view class="con">
          <view class="title" v-html="item.title"></view>
          <view class="info" v-html="item.classify_name_second"></view>
          <view class="time">{{item.stage}}期 | {{item.publish_time|formatReportTime}}</view>
          <view :class="['audio-box',!item.auth_ok&&'grey-audio-box']" @click.stop="handleClickAudio(item)" v-if="item.auth_ok">
            <image :src="curAudioReportId==item.report_id&&!curAudioPaused?'./static/audio-s.png':'./static/audio.png'" mode="aspectFill"/>
            <text>{{curAudioReportId==item.report_id&&!curAudioPaused?'暂停':'播放'}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 筛选 -->
    <van-popup :show="showFilter" position="bottom" :safe-area-inset-bottom="false" round @close="showFilter=false">
        <view class="filter-wrap">
            <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>
  </view>
</template>

<script>
import searchBox from "./components/searchBox.vue";
import audioBox from './components/audioBox.vue'
import {apiReportList,apiSubClassifyList} from '@/api/report'
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
    }
  },
  components: {
    searchBox,
    audioBox
  },
  data() {
    return {
      classifyId:0,
      classifyName:'',

      classifyList:[],
      selectSecClassifyId:0,

      searchVal: "",
      showFilter:false,

      list:[],
      finished:false,
      page:1,
      pageSize:20
    };
  },
  onLoad(options) {
    this.classifyId=options.classifyId
    this.classifyName=decodeURIComponent(options.classifyName)
    // 设置title
    uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
    this.getList()
    this.getClassifyList()
  },
  onPullDownRefresh() {
    this.page=1
    this.list=[]
    this.finished=false
    this.getList()
    this.getClassifyList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  onReachBottom() {
    if(this.finished) return
    this.page++
    this.getList()
  },
  onShareAppMessage() {
    return {
      title:`FICC【${this.classifyName}】`
    }
  },
  methods: {
    //获取研报列表
    async getList(){
      const res=await apiReportList({
        classify_id_first:Number(this.classifyId),
        classify_id_second:Number(this.selectSecClassifyId),
        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 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){
      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){
        uni.showToast({
          title: '暂无音频',
          icon: 'none'
        })
        return
      }
      // 判断是否为同一个音频
      if(this.$store.state.report.audioData.reportId==item.report_id){
        if(this.globalBgMusic.paused){
          this.globalBgMusic.play()
        }else{
          this.globalBgMusic.pause()
        }
      }else{
        this.$store.commit('addAudio', {list:item.video_list,reportId:item.report_id})
      }
    }

  },
};
</script>

<style>
page{
  padding-bottom: 0;
}
</style>
<style lang="scss" scoped>
.search-wrap {
  background-color: #fff;
  padding: 30rpx 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: 0 34rpx;
  .item {
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #EDEDED;
    .img {
      width: 120rpx;
      height: 160rpx;
      background-color: #f5f5f5;
      flex-shrink: 0;
      margin-right: 20rpx;
      border-radius: 16rpx;
    }
    .con {
      flex: 1;
      position: relative;
      overflow: hidden;
      .title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      
      .time {
        position: absolute;
        color: #666666;
        bottom: 0;
        left: 0;
        font-size: 28rpx;
      }
      .audio-box {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 99rpx;
        height: 39rpx;
        background: #E3B377;
        border-radius: 20rpx;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        image{
          width: 30rpx;
          height: 30rpx;
          margin-right: 4rpx;
        }
      }
      .grey-audio-box {
        background: linear-gradient(114deg, #b0b0b0 0%, #e5e2e2 100%);
      }
    }
  }
}
.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>