hongze_yb_xcx/pages-report/reportDetail.vue

<template>
    <view class="report-detail-page" v-if="info">
        <!-- 晨报、周报章节 -->
        <view class="chapter-list-wrap" v-if="['晨报','周报'].includes(info.report_info.classify_name_first)">
            <view class="top-box" :style="'background-image:url(' + info.report_info.banner_url + ')'">
                <view class="title">{{info.report_info.classify_name_first}}</view>
                <view class="sub-title">{{info.report_info.title}}</view>
                <view class="flex top-bot">
                    <view class="flex time-box">
                        <view class="day">{{formatChapterTime(info.report_info.publish_time,'day')}}</view>
                        <view>
                            <view>{{formatChapterTime(info.report_info.publish_time,'week')}}</view>
                            <view>{{formatChapterTime(info.report_info.publish_time,'year-month')}}</view>
                        </view>
                    </view>
                    <view class="num">第{{info.report_info.stage}}期</view>
                </view>
            </view>
            <view class="list-box">
                <view class="flex item" v-for="item in chapterList" :key="item.report_chapter_id" @click="goChapterDetail(item)">
                    <image class="img" :src="item.banner_url" mode="aspectFill" />
                    <view class="con">
                        <view class="title">
                            {{item.report_chapter_type_name}} 
                            <text class="tag" v-for="tag in item.trend.split(',')" :key="tag">{{tag}}</text>
                        </view>
                        <view class="van-multi-ellipsis--l2 sub-title">{{item.title}}</view>
                        <view class="update-time">更新至：{{formatChapterTime(item.publish_time,'year-month-day')}}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 报告详情 -->
        <view class="main-box" v-else>
            <view class="title">【第{{info.report_info.stage}}期｜{{info.report_info.classify_name_second}}】{{info.report_info.title}}</view>
            <view class="flex time">
                <text>{{info.report_info.author}}</text>
                <text>{{formatTime(info.report_info.publish_time)}}</text>
            </view>
            <view class="flex audio-wrap">
                <image src="" mode="aspectFill"/>
                <view>
                    <view>{{info.report_info.video_name}}</view>
                    <view style="color:#999999">{{info.report_info.video_play_seconds|formatVoiceTime}}</view>
                </view>
            </view>
            <view class="tips">
                <text>注：请务必阅读</text>
                <text style="color:#E3B377;margin-left:20rpx" @click="showDisclaimers=true">免责声明</text>
            </view>

            <view class="rich-content">
                <mp-html :content="info.report_info.content"/>
            </view>

            <!-- 返回顶部 -->
            <image v-if="" @click="handleBackTop" class="back-top-img" src="./static/back-top.png" mode="aspectFill"/>
        </view> 

        <!-- 免责声明 -->
        <van-popup :show="showDisclaimers" @close="showDisclaimers=false" round closeable>
            <view class="disclaimers-box">
                <view style="text-align:center;font-size:16px;font-weight:bold;margin-bottom:20rpx">免责声明</view>
                <view style="margin-bottom:10rpx">1、本报告仅供弘则弥道（上海）投资咨询有限公司正式签约的机构客户使用，不会仅因接收人/接受机构收到本报告而将其视为客户。</view>
                <view style="margin-bottom:10rpx">2、本报告根据国际和行业通行的准则，以合法渠道获得这些信息，尽可能保证可靠、准确和完整，但并不保证报告所述信息的准确性和完整性，也不保证本报告所包含的信息或建议在本报告发出后不会发生任何变更。本报告中所提供的信息仅供参考。</view>
                <view style="margin-bottom:10rpx">3、报告中的内容不对投资者做出的最终操作建议做任何的担保，也没有任何形式的分享投资收益或者分担投资损失的书面或口头承诺。不作为客户在投资、法律、会计或税务等方面的最终操作建议，也不作为道义的、责任的和法律的依据或者凭证，无论是否已经明示或者暗示。</view>
                <view style="margin-bottom:10rpx">4、在任何情况下，本公司不对客户/接受人/接受机构因使用报告中内容所引致的一切损失负责任，客户/接受人/接受机构需自行承担全部风险。</view>
            </view>
        </van-popup>
    </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
import {apiReportDetail} from '@/api/report'
export default {
    data () {
        return {
            showDisclaimers:false,//显示免责声明
            html:'<h1>Hello World!</h1>',
            reportId:0,
            info:null,
            chapterList:[]
        }
    },
    onLoad(options) {
        this.reportId=options.reportId
        this.getDetail()
    },
    methods: {
        async getDetail(){
            const res=await apiReportDetail({report_id:Number(this.reportId)})
            if(res.code===200){
                this.info=res.data
                this.chapterList=res.data.report_chapter_list
                uni.setNavigationBarTitle({ title: res.data.report_info.classify_name_first })
            }
        },

        handleBackTop(){
            uni.pageScrollTo({ scrollTop: 0 })
        },

        goChapterDetail(item){
            uni.navigateTo({ url: '/pages-report/chapterDetail?chapterId='+item.report_chapter_id })
        },

        formatTime(time){
            return moment(time).format('YYYY-MM-DD HH:mm:ss')
        },

        formatChapterTime(time,type){
            if(type==='day'){
                return moment(time).format('DD')
            }
            if(type==='week'){
                return moment(time).format('dddd')
            }
            if(type==='year-month'){
                return moment(time).format('YYYY-MM')
            }
            if(type==='year-month-day'){
                return moment(time).format('YYYY-MM-DD')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.report-detail-page{
    .main-box{
        padding: 34rpx;
    }
    .title{
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
    }
    .time{
        justify-content: space-between;
        font-size: 28rpx;
    }
    .audio-wrap{
        height: 160rpx;
        background: #FAF7EE;
        border-radius: 16rpx;
        margin-top: 20rpx;
        padding: 10rpx 31rpx;
        margin-bottom: 31rpx;
        align-items: center;
        image{
            width: 110rpx;
            height: 110rpx;
            display: block;
            background-color: rgb(233, 230, 230);
            margin-right: 16rpx;
        }
    }

    .tips{
        font-size: 34rpx;
        margin-bottom: 51rpx;
        &::before{
            content: '';
            width: 10rpx;
            height: 50rpx;
            display: inline-block;
            background-color: #E3B377;
            margin-right: 20rpx;
            position: relative;
            top: 10rpx;
        }
    }

    .disclaimers-box{
        width: 94vw;
        padding: 32rpx;
    }

    .rich-content{
        line-height: 1.7;
        font-size: 32rpx;
    }

    .back-top-img{
        position: fixed;
        z-index: 99;
        width: 76rpx;
        height: 76rpx;
        right: 34rpx;
        bottom: 100rpx;
    }

    .chapter-list-wrap{
        .top-box{
            height: 418rpx;
            background-color: rgba($color: #000000, $alpha: 0.7);
            background-size: cover;
            color: #fff;
            position: relative;
            .title{
                text-align: center;
                font-size: 34rpx;
                font-weight: 600;
                padding-top: 78rpx;
            }
            .sub-title{
                font-size: 32rpx;
                text-align: center;
                width: 70%;
                margin-left: auto;
                margin-right: auto;
            }
            .top-bot{
                position: absolute;
                bottom: 70rpx;
                left: 34rpx;
                right: 34rpx;
                justify-content: space-between;
                align-items: flex-end;
                .time-box{
                    align-items: center;
                    font-size: 24rpx;
                    .day{
                        font-size: 32rpx;
                        border-right: 1px solid #fff;
                        padding-right: 15rpx;
                        margin-right: 15rpx;
                    }
                }
                
            }
        }
        .list-box{
            margin-top: -50rpx;
            border-top-left-radius: 40rpx;
            border-top-right-radius: 40rpx;
            min-height: 200rpx;
            background-color: #fff;
            position: relative;
            z-index: 2;
            .item{
                padding: 50rpx 34rpx;
                border-bottom: 1px solid #E5E5E5;
                .img{
                    width: 112rpx;
                    height: 112rpx;
                    // background-color: #f5f5f5;
                    flex-shrink: 0;
                    margin-right: 20rpx;
                }
                .con{
                    flex: 1;
                    .title{
                        font-size: 32rpx;
                        color: #57768D;
                        font-weight: bold;
                        margin-bottom: 10rpx;
                        .tag{
                            font-size: 20rpx;
                            color: #fff;
                            font-weight: normal;
                            display: inline-block;
                            background-color: #1E88E5;
                            line-height: 37rpx;
                            padding: 0 6rpx;
                            border-radius: 4rpx;
                            margin-left: 10rpx;
                        }
                    }
                    .sub-title{
                        color: #999;
                    }
                    .update-time{
                        float: right;
                        color: #D4D4D4;
                        font-size: 20rpx;
                    }
                }
            }
        }
    }
}
</style>