hongze_yb_xcx/pages-report/reportListSearch.vue

<template>
    <view class="report-list-page">
        <van-sticky style="background: #fff">
            <view style="padding:30rpx 34rpx;background: #fff">
                <searchBox
                    :focus="focus" 
                    placeholder="请输入报告标题或关键字"
                    @change="onChange" 
                    @search="onSearch"
                ></searchBox>
            </view>
        </van-sticky>
        <view class="report-empty-box" v-if="finished&&list.length==0">
            <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
            <view>找不到对应报告，试试别的搜索词吧</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" lazy-load />
                <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>

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

<script>
import searchBox from "./components/searchBox.vue";
import audioBox from './components/audioBox.vue'
import {apiReportList} 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 {
            classify_id_first:0,
            classifyName:'',

            searchVal: "",
            focus:true,
            list:[],
            finished:false,
            page:1,
            pageSize:20
        };
    },
    onLoad(options) {
        this.classify_id_first=options.classify_id_first
        this.classifyName=decodeURIComponent(options.classifyName)
        // 设置title
        uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    methods: {
        //获取研报列表
        async getList(){
            const res=await apiReportList({
                classify_id_first:Number(this.classify_id_first),
                classify_id_second:0,
                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
                }
            }
        },

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

        onSearch() {
            console.log("搜索", this.searchVal);
            this.page=1
            this.finished=false
            this.list=[]
            if(!this.searchVal) return
            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()
                    this.$store.commit('showPopAudio')
                }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>
.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%);
      }
    }
  }
}
</style>