<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: 8rpx; } .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>