hongze_yb_xcx/pages-report/specialColumn/detail.vue

<template>
    <view class="special-column-info-page">
        <image class="top-bg" src="../static/bg-1.png" mode="aspectFill"/>
        <view class="user-wrap" v-if="info">
            <image :src="info.avatar_img_url" mode="aspectFill" class="avatar"/>
            <view class="user-name">
                <text>{{info.report_author}}</text>
                <text class="tag" v-if="info.vip_title">{{info.vip_title}}</text>
            </view>
            <view class="user-intro">{{info.author_descript}}</view>
        </view>
        <van-sticky>
        <view class="flex tab-box">
            <view :class="['item',tabActive=='专栏介绍'&&'tab-acitve']" @click="tabChange('专栏介绍')">专栏介绍</view>
            <view :class="['item',tabActive=='报告目录'&&'tab-acitve']" @click="tabChange('报告目录')">报告目录</view>
        </view>
        </van-sticky>
        <view class="section column-intro-wrap" v-if="tabActive=='专栏介绍'">
            <view v-html="info.abstract"></view>
        </view>
        <view class="section report-list-wrap" v-if="tabActive=='报告目录'">
            <view class="report-empty-box" v-if="finished&&list.length==0">
                <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
                <view>暂无报告</view>
            </view>
            <block v-else>
            <view class="flex item" v-for="item in list" :key="item" @click="goDetail(item)">
                <image class="img" :src="item.report_img_url" mode="aspectFill" lazy-load/>
                <view class="con">
                    <view class="title">【第{{item.stage}}期】{{item.classify_name_second}}</view>
                    <view class="time">{{item.publish_time|formatReportTime}}</view>
                    <view v-if="info.auth_ok" :class="['audio-box',!info.auth_ok&&'grey-audio-box']" @click.stop="handleClickAudio(item)">
                        <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>
            </block>
            
        </view>
        <view class="contact-box" v-if="info&&!info.auth_ok&&!info.permission_check.mobile" @click="handleContact">联系我们</view>

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

<script>
import {apiSpecialColumnDetail,apiSpecialColumnReportList} from '@/api/report'
import audioBox from '../components/audioBox.vue'
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: {
        audioBox
    },
    data () {
        return {
            tabActive:'专栏介绍',
            columnId:0,
            info:null,

            list:[],
            page:1,
            pageSize:20,
            finished:false
        }
    },
    onLoad(options) {
        this.columnId=options.columnId
        this.getDetail()
        this.getList()
    },
    onPullDownRefresh() {
        this.getDetail()
        this.list=[]
        this.page=1
        this.finished=false
        this.getList()
        setTimeout(()=>{
            uni.stopPullDownRefresh()
        },1500)
    },
    onReachBottom() {
        if(!this.finished&&this.tabActive=='报告目录'){
            this.page++
            this.getList()
        }
    },
    onShareAppMessage() {
        return {
            title:`FICC【${this.info.classify_name_second}】`
        }
    },
    methods: {
        async getDetail(){
            const res=await apiSpecialColumnDetail({classify_id_second:Number(this.columnId)})
            if(res.code===200){
                this.info=res.data
                uni.setNavigationBarTitle({ title: res.data.classify_name_second })
            }
        },

        async getList(){
            const res=await apiSpecialColumnReportList({
                classify_id_second:Number(this.columnId),
                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
                }
            }
        },

        tabChange(e){
            this.tabActive=e
        },

        goDetail(item){
            uni.navigateTo({ url: '/pages-report/reportDetail?reportId='+item.report_id })
        },

        handleContact(){
            uni.makePhoneCall({
                phoneNumber: this.info.permission_check.hz_phone
            })
        },

        handleClickAudio(item){
            if(!this.info.auth_ok) return
            if(!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:[{
                        video_url:item.video_url,
                        video_name:item.video_name,
                        video_play_seconds:item.video_play_seconds,
                        video_img:item.report_img_url
                    }],
                    reportId:item.report_id
                })
            }
            
        }
    }
}
</script>

<style lang="scss">
page{
    padding-bottom: 0;
}

</style>

<style lang="scss" scoped>
.special-column-info-page{
    .top-bg{
        display: block;
        width: 100%;
        height: 188rpx;
    }
    .user-wrap{
        padding: 0 34rpx;
        margin-bottom: 34rpx;
        .avatar{
            width: 140rpx;
            height: 140rpx;
            background-color: #f5f5f5;
            display: block;
            box-sizing: border-box;
            border: 4rpx solid #fff;
            border-radius: 50%;
            margin-top: -70rpx;
        }
        .user-name{
            margin-top: 20rpx;
            text:first-child{
                font-size: 32rpx;
                font-weight: bold;
            }
            .tag{
                background-color: #FAF7EE;
                margin-left: 20rpx;
                padding: 6rpx 16rpx;
                border-radius: 30rpx;
                font-size: 24rpx;
                display: inline-block;
                &::before{
                    content: '';
                    display: inline-block;
                    width: 30rpx;
                    height: 30rpx;
                    background-image: url('../static/tag.png');
                    background-size: cover;
                    position: relative;
                    top: 4rpx;
                }
            }
        }
        .user-title{
            color: #666666;
            margin: 20rpx 0;
        }
        .user-intro{
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #666666;
            line-height: 1.7;
        }
    }
    .tab-box{
        align-items: center;
        height: 78rpx;
        background: #FFFFFF;
        position: relative;
        box-shadow: 0px 4rpx 4rpx 1px rgba(198, 198, 198, 0.16);
        .item{
            flex: 1;
            text-align: center;
            font-size: 32rpx;
        }
        &::after{
            content: '';
            position: absolute;
            display: inline-block;
            width: 1rpx;
            height: 78rpx;
            top: 0;
            left: 50%;
            background-color: #F6F6F6;
        }
        .tab-acitve{
            color: #E3B377;
        }
    }
    .section{
        padding: 34rpx;
        padding-top: 60rpx;
        line-height: 1.7;
        color: #666666;
        padding-bottom: 90rpx;
    }

    .report-list-wrap{
        .item{
            margin-bottom: 40rpx;
            .img{
                width: 118rpx;
                height: 118rpx;
                border-radius: 50%;
                background-color: #f5f5f5;
                flex-shrink: 0;
                margin-right: 12rpx;
            }
            .con{
                flex: 1;
                position: relative;
                overflow: hidden;
                line-height: 1;
                .title{
                    font-size: 32rpx;
                    font-weight: bold;
                    margin-bottom: 8rpx;
                    padding-top: 10rpx;
                    color: #333;
                }
                
                .time{
                    position: absolute;
                    bottom: 0;
                    left: 14rpx;
                    line-height: 1.7;
                    color: #666666;
                }
                .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%);
                }
            }
        }
    }

    .contact-box{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80rpx;
        background: #E6B77D;
        line-height: 80rpx;
        text-align: center;
        color: #FFFFFF;
        font-size: 32rpx;
        z-index: 10;
    }
}
</style>