hongze_yb_pc/src/views/report/specialColumn/Detail.vue

<script setup>
import {onActivated, reactive, ref} from 'vue'
import moment from 'moment';
import SelfList from '@/components/SelfList.vue'
import {apiSpecialColumnDetail,apiSpecialColumnReportList,apiSpecialColumnComment} from '@/api/report'
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

const route=useRoute()
const router=useRouter()
const store=useStore()

let nav=ref('专栏介绍')

let classify_id_second=ref(route.query.columnId||0)

// 向小程序发送数据
const handleDataToXcx=(classifyName)=>{
  const postData={
    path:'/pages-report/specialColumn/detail',
    params:{
        columnId:classify_id_second.value
    },
    title:`FICC【${classifyName}】`,
    shareImg:''
  }
  wx.miniProgram.postMessage({ data: postData })
}

let info=ref(null)//专栏详情
const getSpecialColumnDetail=async ()=>{
    const res=await apiSpecialColumnDetail({classify_id_second:Number(classify_id_second.value)})
    if(res.code===200){
        info.value=res.data
        document.title=res.data.classify_name_second
        store.commit('modifyBreadCrumb',res.data.classify_name_second)
        handleDataToXcx(res.data.classify_name_second)
    }
}
getSpecialColumnDetail()

// 客户评价
let commentList=ref([])
const getComment=async ()=>{
    const res=await apiSpecialColumnComment({classify_id_second:Number(classify_id_second.value)})
    if(res.code===200){
        commentList.value=res.data
    }
}
getComment()


// 获取报告列表
let listState=reactive({
    list:[],
    page:1,
    pageSize:20,
    finished:false,
    loading:false
})
const getReportList=async ()=>{
    listState.loading=true
    const res=await apiSpecialColumnReportList({
        classify_id_second:Number(classify_id_second.value),
        current_index:listState.page,
        page_size:listState.pageSize
    })
    listState.loading=false
    if(res.code===200){
        let arr=res.data.list||[]
        listState.list=[...listState.list,...arr]
        if(res.data.paging.is_end){
            listState.finished=true
        }
    }
}
getReportList()

// 加载更多
const onLoad=()=>{
    listState.page++
    getReportList()
}

//跳转报告详情
const goReportDetail=(item)=>{
    router.push({
        path:'/report/detail',
        query:{
            reportId:item.report_id
        }
    })
}


//播放音频
const handlePlayAudio=(item)=>{
    if(store.state.audioData.reportId==item.report_id){
        if(store.state.audioData.paused){
            store.state.audioData.INS.play()
        }else{
            store.state.audioData.INS.pause()
        }
        return
    }
    store.commit('addAudio',{
        list:[{name:item.video_name,url:item.video_url,time:item.video_play_seconds}],
        reportId:item.report_id,
        index:0
    })
}

// 组件激活时
onActivated(()=>{
    const temClassify_id_second=route.query.columnId
    if(temClassify_id_second!=classify_id_second.value){
        nav.value='专栏介绍'
        classify_id_second.value=temClassify_id_second
        listState.list=[]
        listState.page=1
        listState.finished=false
        getSpecialColumnDetail()
        getReportList()
    }else{
        if(info.value){
            handleDataToXcx(info.value.classify_name_second)
        }
    }
})


</script>

<template>
    <div class="specialColumn-detail-page" v-if="info">
        <div class="top-user-box" >
            <div class="title">{{info.classify_name_second}}</div>
            <div class="flex-col-center">
                <img class="avatar" :src="info.avatar_img_url" alt="">
                <div>
                    <div>
                        <span class="name">{{info.report_author}}</span>
                        <span class="vip" v-if="info.vip_title">{{info.vip_title}}</span>
                    </div>
                    <p>{{info.author_descript}}</p>
                </div>

            </div>
        </div>
        <div class="main-box">
            <div class="nav-box">
                <span :class="nav==='专栏介绍'&&'active'" @click="nav='专栏介绍'">专栏介绍</span>
                <span :class="nav==='专栏目录'&&'active'"  @click="nav='专栏目录'">专栏目录</span>
                <span :class="nav==='客户评价'&&'active'"  @click="nav='客户评价'">客户评价</span>
            </div>
            <!-- 专栏介绍模块 -->
            <div class="introduce-wrap" v-if="nav==='专栏介绍'">
                <p>{{info.abstract}}</p>
            </div>
            <!-- 专栏报告模块 -->
            <template v-if="nav==='专栏目录'">
                <SelfList 
                    :finished="listState.finished" 
                    :isEmpty="listState.list.length === 0 && listState.finished" 
                    :loading="listState.loading"
                    @listOnload="onLoad"
                >
                    <div class="report-list">
                        <div 
                            class="flex item" 
                            v-for="item in listState.list" 
                            :key="item.report_id"
                            @click="goReportDetail(item)"
                        >
                            <div class="user-box">
                                <img class="avatar" :src="item.report_img_url" alt="">
                                <div>
                                    <span>{{item.author}}</span>
                                    <img src="@/assets/tag.png" alt="">
                                </div>
                            </div>
                            <div class="con">
                                <span class="title">【第{{item.stage}}期|FICC】{{item.classify_name_second}}</span>
                                <div class="des" v-html="item.abstract"></div>
                                <div class="time">{{moment(item.publish_time).format('YYYY.MM.DD HH:mm')}}</div>
                            </div>
                            <div 
                                class="global-plain-btn audio-btn" 
                                @click.stop="handlePlayAudio(item)"
                            >{{$store.state.audioData.reportId==item.report_id?$store.state.audioData.paused?'已暂停':'播放中':'立即播放'}}</div>
                        </div>
                    </div>
                </SelfList>
            </template>
            <!-- 客户评价模块 -->
            <template v-if="nav==='客户评价'">
                <div class="comment-list-wrap">
                    <div class="comment-item" v-for="item in commentList" :key="item.Id">
                        <div class="flex top">
                            <img class="avatar" :src="item.HeadImgUrl" alt="">
                            <span>{{item.CompanyName}}</span>
                        </div>
                        <p class="des" v-html="item.Comment"></p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.specialColumn-detail-page{
    .top-user-box{
        height: 230px;
        background-image: url('@/assets/bg-1.png');
        background-size: cover;
        background-repeat: no-repeat;
        padding-top: 40px;
        padding-left: 75px;
        .title{
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 18px;
        }
        .avatar{
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 13px;
            flex-shrink: 0;
        }
        .name{
            font-size: 20px;
            font-weight: bold;
            margin-right: 10px;
        }
        .vip{
            background-color: #FAF7EE;
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            padding: 0 10px;
            border-radius: 23px;
            &::before{
                content: '';
                display: inline-block;
                width: 15px;
                height: 15px;
                background-image: url('@/assets/tag.png');
                background-size: cover;
                position: relative;
                top: 2px;
                margin-right: 3px;
            }
        }
    }

    .main-box{
        .nav-box{
            padding-top: 60px;
            padding-bottom: 10px;
            background-color: #fff;
            span{
                font-size: 18px;
                position: relative;
                margin-right: 60px;
                &:hover{
                    color: #F3A52F;
                }
            }
            .active{
                color: #F3A52F;
                &::after{
                    content: '';
                    display: block;
                    width: 40px;
                    height: 4px;
                    background: #F3A52F;
                    border-radius: 2px;
                    position: absolute;
                    top: 105%;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        .introduce-wrap{
            font-size: 18px;
            color: #666;
            line-height: 34px;
        }

        .report-list{
            .item{
                padding-top: 20px;
                padding-bottom: 30px;
                padding-left: 16px;
                padding-right: 16px;
                border-bottom: 1px solid #F2F2F2;
                position: relative;
                .user-box{
                    flex-shrink: 0;
                    .avatar{
                        width: 64px;
                        height: 64px;
                        border-radius: 50%;
                        object-fit: cover;
                        display: block;
                        margin: 0 auto;
                    }
                    div{
                        margin-top: 7px;
                        margin-left: auto;
                        margin-right: auto;
                        width: 96px;
                        height: 28px;
                        line-height: 28px;
                        background: #FFFBF5;
                        border-radius: 4px;
                        text-align: center;
                        font-size: 14px;
                        color: #F3A52F;
                        img{
                            width: 16px;
                            height: 16px;
                            position: relative;
                            top: 2px;
                        }
                    }
                }
                .con{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    margin-left: 40px;
                    flex: 1;
                    color: #000;
                    .title{
                        font-size: 20px;
                        margin-left: -8px;
                    }
                }
                .audio-btn{
                    position: absolute;
                    bottom: 30px;
                    right: 16px;
                    width: 100px;
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                    padding-top: 0;
                    padding-bottom: 0;
                }
            }
        }

        .comment-list-wrap{
            display: flex;
            flex-wrap: wrap;
            .comment-item{
                width: 50%;
                padding-top: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #F2F2F2;
                &:nth-child(odd){
                    border-right: 1px solid #F2F2F2;
                    padding-right: 20px;
                }
                &:nth-child(even){
                    padding-left: 20px;
                }
                .top{
                    align-items: center;
                    .avatar{
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        object-fit: cover;
                        margin-right: 7px;
                    }
                    span{
                        font-size: 16px;
                        color: #F3A52F;
                    }
                }
                .des{
                    margin-top: 8px;
                    font-size: 14px;
                    line-height: 26px;
                }
            }
        }
    }
}
</style>