hongze_yb_xcx/pages-report/reportForVariety/list.vue

<template>
    <view class="varietyauth-report-list">

            <view class="top-variety-box">
                <view class="first-nav">
                    <text 
                        :class="['first-nav-item',item.id===firstVarietyId?'active':'']" 
                        v-for="item in varietyList" 
                        :key="item.id"
                        @click="handleSelectFirstVariety(item)"
                    >{{item.classify_name}}</text>
                </view>
                <view class="sub-nav">
                    <text 
                    :class="['sub-nav-item',item.chart_permission_id===secVarietyId?'active':'']" 
                    v-for="item in secVarietyList" 
                    :key="item.chart_permission_id"
                    @click="handleSelectSecVariety(item)"
                >{{item.chart_permission_name}}</text>
                </view>
            </view>
        <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" 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="van-multi-ellipsis--l2 title">{{item.title}}</view>
                    <view class="info">{{item.classify_name_second}} · {{item.stage}}期 | {{item.publish_time|formatReportTime}}</view>
                </view>
                <view class="audio-box">
                    <image src="../static/a-pause.png" mode="aspectFill"/>
                </view>
            </view>
        </view>


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

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

<script>
import {apiGetSceneToParams} from '@/api/common'
import {apiGoodsPermissionList,apiReportListForVariety} from '@/api/report'
import audioBox from '../components/audioBox.vue'
const moment=require('@/utils/moment-with-locales.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].stage}期 | ${moment(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].stage}期 | ${moment(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: {
        audioBox
    },
    data() {
        return {
            classifyId:0,
            classifyName:'',
            varietyList:[],
            firstVarietyId:0,//选择的一级品种id
            secVarietyList:[],//二级品种
            secVarietyId:0,//选择的二级品种id

            list:[],
            finished:false,
            page:1,
            pageSize:20
        }
    },
    onLoad(opt){
        this.init(opt)
    },
    onPullDownRefresh() {
        this.page=1
        this.list=[]
        this.finished=false
        this.getPermissionList()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 1500);
    },
    onReachBottom() {
        if(this.finished) return
        this.page++
        this.getList()
    },
    onShareAppMessage() {
        return {
            title:`FICC【${this.classifyName}】`
        }
    },
    methods: {
        async init(opt){
            let classifyId=opt.classifyId||0
            let classifyName=opt.classifyName
            if(opt.scene){
                const res=await apiGetSceneToParams({scene_key:opt.scene})
                if(res.code===200){
                    const obj=JSON.parse(res.data)
                    classifyId=obj.classifyId
                    classifyName=obj.classifyName
                }
            }
            this.classifyId=classifyId
            this.classifyName=decodeURIComponent(classifyName)
            uni.setNavigationBarTitle({ title: this.classifyName })
            this.getPermissionList()
        },

        //获取用户已绑定品种
        async getPermissionList(){
            const res=await apiGoodsPermissionList()
            if(res.code===200){
                this.varietyList=res.data.permission_list
                this.handleSelectFirstVariety(this.varietyList[0])
            }
        },

        //选择一级品种
        handleSelectFirstVariety(item){
            this.firstVarietyId=item.id
            this.secVarietyList=item.list
            this.handleSelectSecVariety(item.list[0])
        },
        //选择二级品种
        handleSelectSecVariety(item){
            this.secVarietyId=item.chart_permission_id
            this.page=1
            this.finished=false
            this.list=[]
            this.getList()
        },

        async getList(){
            const res=await apiReportListForVariety({
                chart_permission_id:Number(this.secVarietyId),
                current_index:this.page,
                page_size:this.pageSize
            })
            if(res.code===200){
                this.list=[...this.list,...res.data.list]
                this.finished=res.data.paging.is_end
            }
        },

        // 跳转报告详情
        goReportDetail(item){
            if(['晨报','周报'].includes(item.classify_name_first)){
                uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${item.report_chapter_id}`})
            }else{
                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: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
</style>

<style lang="scss" scoped>
.top-variety-box{
    padding: 40rpx 34rpx 0 34rpx;
    box-shadow: 0px 4rpx 4rpx rgba(198, 198, 198, 0.25);
    background-color: #fff;
    position: sticky;
    left: 0;
    right: 0;
    top: 0;
    .first-nav-item{
        display: inline-block;
        min-width: 140rpx;
        line-height: 70rpx;
        margin-right: 30rpx;
        font-size: 32rpx;
        color: #666;
        text-align: center;
        background: #F5F5F5;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 0 20rpx;
        margin-bottom: 16rpx;
        &.active{
            color: #E3B377;
            background: #FDF8F2;
        }
    }
    .sub-nav{
        overflow-x: auto;
        white-space: nowrap;
        padding: 16rpx 0;
        &::-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%);
                }
            }
        }
    }
}
.report-list-wrap{
    padding: 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;
        }
        .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;
            }
        }

    }
}
</style>