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.report_chapter_type_thumb" 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 class="no-auth-box" v-if="!info.auth_ok">
                <image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image>
                <view class="apply-box" v-if="info.permission_check.type=='apply'">
                    <view>您暂无权限查看报告，若想查看请申请开通</view>
                    <view class="btn" @click="handleGoApply">立即申请</view>
                </view>
                <view class="apply-box" v-else>
                    <view>您暂无权限查看报告 </view>
                    <view>若想查看请联系对口销售：{{info.permission_check.name}}</view>
                    <view class="btn" @click="handleContact">立即联系</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 style="opacity:0.3" src="./static/audio-pause.png" mode="aspectFill" v-if="!info.auth_ok"/>
                <image src="./static/audio-pause.png" mode="aspectFill" v-else/>
                <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" v-if="info.auth_ok" />
                <mp-html :content="info.report_info.content_sub" v-else />
            </view>

            <!-- 无权限 -->
            <view class="no-auth-wrap" v-if="!info.auth_ok">
                <view class="apply-box" v-if="info.permission_check.type=='apply'">
                    <view>您暂无权限查看报告，若想查看请申请开通</view>
                    <view class="btn" @click="handleGoApply">立即申请</view>
                </view>
                <view class="apply-box" v-else>
                    <view>您暂无权限查看报告 </view>
                    <view>若想查看请联系对口销售：{{info.permission_check.name}}</view>
                    <view class="btn" @click="handleContact">立即联系</view>
                </view>
            </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>

        <!-- 申请提示弹窗 -->
        <van-popup :show="pupData.show" @close="pupData.show=false" :close-on-click-overlay="false">
            <view class="global-pup">
                <view class="content">
                    <rich-text :nodes="pupData.content"></rich-text>
                </view>
                <view class="flex bot">
                    <view @click="pupData.show=false">知道了</view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
import {apiReportDetail} from '@/api/report'
import {apiApplyPermission} from '@/api/user'
export default {
    data () {
        return {
            showDisclaimers:false,//显示免责声明
            reportId:0,
            info:null,
            chapterList:[],
            pupData:{
				show:false,
				content:'',//弹窗html字符串
			}
        }
    },
    onLoad(options) {
        this.reportId=options.reportId
        this.getDetail()
    },
    onPullDownRefresh() {
        this.getDetail()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 1500);
    },
    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 })
                if(!res.data.auth_ok){
                    // 获取详情如果为联系销售根据判断条件是否主动申请一次
                    if(this.info.permission_check.type=='contact'&&!this.info.permission_check.customer_info.has_apply){
                        if(this.info.permission_check.customer_info.status=='冻结'||(this.info.permission_check.customer_info.status=='试用'&&this.info.permission_check.customer_info.is_suspend==1)){
                            apiApplyPermission({
                                company_name:this.info.permission_check.customer_info.company_name,
                                real_name:this.info.permission_check.customer_info.name,
                                source:4,
                                from_page:'报告详情'
                            }).then(res=>{
                                if(res.code===200){
                                    console.log('主动申请成功');
                                }
                            }) 
                        }
                    }
                }
            }
        },
        
        //返回顶部
        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')
            }
        },

        // 联系销售
        handleContact(){
            uni.makePhoneCall({
                phoneNumber: this.info.permission_check.mobile
            });
        },

        //点击申请
        async handleGoApply(){
            if(this.info.permission_check.type=='apply'){
                if(this.info.permission_check.customer_info.has_apply){// 已经申请过
                    this.pupData.show=true
					this.pupData.content=`<p>您已提交过申请，请耐心等待</p>`
                }else{
                    if(!this.info.permission_check.customer_info.status||this.info.permission_check.customer_info.status!='流失'){
                        uni.redirectTo({
                            url:"/pages-applyPermission/applyPermission?source=4&from_page=报告详情"
                        })
                    }else{//主动调一次申请权限接口 
                        const res=await apiApplyPermission({
                            company_name:this.info.permission_check.customer_info.company_name,
                            real_name:this.info.permission_check.customer_info.name,
                            source:4,
                            from_page:'报告详情'
                        })
                        if(res.code===200){
                            this.pupData.show=true
					        this.pupData.content=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
                        }
                    }
                }
                
            }
        },

    }
}
</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;
            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;
    }

    .no-auth-wrap{
      min-height: 200rpx;
      background: linear-gradient(360deg, #FFFFFF 60%, rgba(255, 255, 255, 0) 88%);
      position: relative;
      top: -150rpx;
      text-align: center;
      font-size: 32rpx;
      color: #E3B377;
      .apply-box{
        padding-top: 250rpx;
      }
      .btn{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        line-height: 80rpx;
        background-color: #E6B77D;
        border-radius: 4rpx;
        color: #fff;
        margin-top: 100rpx;
      }
    }

    .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: 100rpx;
            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;
                    }
                }
            }
        }
        .no-auth-box{
            text-align: center;
            font-size: 32rpx;
            color: #E3B377;
            img{
                width: 100%;
                margin-bottom: 50rpx;
            }
            .btn{
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                line-height: 80rpx;
                background-color: #E6B77D;
                border-radius: 4rpx;
                color: #fff;
                margin-top: 100rpx;
            }
        }
    }
}
</style>