horzi_rai_wxa/reportPages/reportSecretDetail/reportSecretDetail.vue

<template>
    <view class="container content-secret forbid-copy">
        <block v-if="hasPermission==1 ||!hasPermission">
        <view class="container-top" v-if="detali">
            <view class="content-title">
                {{detali.Title}}
            </view>
            <view class="content-time">
                <text>{{detali.Department}}</text>
                <text>{{detali.PublishDate}}</text>
            </view>
            <view class="content-statement">
                <text>注：请务必阅读</text>
                <text class="statement" @click="isShowStatement=true">免责声明 </text>
            </view>
            <view class="content-audio">
                <view class="audio-img">
                <image v-if="isPlay" @click="audiouspend" :src="require('../image/suspend_icon.png')"></image>
                <image v-else  @click="audioPlay" :src="require('../image/play_icon.png')" mode=""></image>
                </view>
                <view class="audio-title">
                    <text>{{detali.VideoName}}</text>
                    <text>{{detali.VideoPlaySeconds}}</text>
                </view>
            </view>
            <view v-if="detali.Abstract" class="content-abstract">
                <text>摘要：</text>
                <text>
                    {{detali.Abstract}}
                </text>
            </view>
            <view v-if="detali.ProductDescription&&isType==1" class="content-abstract">
                <text>产品说明：</text>
                <text>
                    {{detali.ProductDescription}}
                </text>
            </view>
            <view v-if="detali.UpdateDescription&&isType==1" class="content-abstract">
                <text>变更说明：</text>
                <text>
                    {{detali.UpdateDescription}}
                </text>
            </view>
            <view v-if="detali.FocusOn&&isType==1" class="content-focuson">
                <text class="focuson">近期重点关注方向：</text>
                <rich-text :nodes="detali.FocusOn"></rich-text>
            </view>
        </view>
        <view class="container-text">
            <researchSummary v-if="isType==1 ||isType==3" :dataList="dataList" />
            <reportChoiceness v-if="isType==2" :dataListResearch="dataListResearch"/>
        </view>
        <statement :show="isShowStatement"/>
        </block>
        <view class="noauth-cont" v-else-if="hasPermission==3 || hasPermission==4">
            <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
            <block>
            	<view class="tip">您暂无权限查看此文章内容，若想查看可以申请开通哦</view>
            	<view class="btn-cont"  @click="applyAuth">
                立即申请
            	</view>	
            </block>
          <view class="btn-cont back-btn" @click="backIndex"> 返回首页	</view>
        </view>
    </view>
</template>

<script>
    import statement from '@/components/statement.vue'
    import researchSummary from './components/researchSummary.vue'
    import reportChoiceness from './components/reportChoiceness.vue'
    import {Reports} from '@/config/api.js'
    let app = getApp()
    export default {
        data() {
            return {
                isShowStatement:false,
                isPlay:false,
                audioContext:'', //音频
                isType:'',//类型
                id:'',//
                detali:'',//详情
                dataList:[],//精选，上周 数组
                dataListResearch:[],//本周数组
                hasPermission:'',//权限判断
                videoUrl:''
                //bgAudioManager:''
            }
        },
        methods: {
            audioPlay(){
                this.isPlay=true
                app.globalData.bgAudioManager.title = this.detali.VideoName
                app.globalData.bgAudioManager.src = this.videoUrl
            },
            audiouspend(){
                this.isPlay=false
                app.globalData.bgAudioManager.pause()
            },
          async  getDetilaiList(){
                if(this.isType==1||this.isType==3){
                    const res =  this.isType==1 ? await Reports.reportSelectionDetail({ArticleId:this.id})
                                                : await Reports.minutesSummaryDetail({ ArticleId:this.id})
                    if(res.Ret===200){
                        this.detali = res.Data.Detail
                        this.hasPermission=res.Data.HasPermission
                        this.videoUrl=res.Data.Detail.VideoUrl
                        this.dataList=res.Data.List
                        if( app.globalData.bgAudioManager.src === this.videoUrl) {
                            this.isPlay = true
                        }
                    }
                }else {               
                  const res =   await Reports.researchSummaryDetail({ArticleId:this.id})
                     if(res.Ret===200){
                         
                         this.detali = res.Data.Detail
                        this.hasPermission=res.Data.HasPermission
                         this.dataListResearch=res.Data.List
                         this.videoUrl=res.Data.Detail.VideoUrl
                          if( app.globalData.bgAudioManager.src === this.videoUrl) {
                              this.isPlay = true
                          }
                     }
                }
            },
            /* 无权限申请开通权限 */
            applyAuth() {
            this.hasPermission === 4
            	?  uni.navigateTo({
            			url:"/pages/applyTrial/applyTrial"
            		})
            	: 	uni.showModal({
            			title: '',
            			content: '您已经提交过申请了，请耐心等待',
            			showCancel:false,
            			confirmColor:'#365595',
            			success: function (res) {
                             uni.navigateBack({
                             	fail(){
                             		uni.switchTab({
                             			url:'/pages/index/index'
                             		})
                             	}
                             })
            			}
            		});
            },
            // 返回首頁
            backIndex() {
            	uni.switchTab({
            		url:'/pages/index/index'
            	})
            },
        },
        components:{
            statement,
            researchSummary,
            reportChoiceness
        },
        onLoad(option) {
            this.isType=option.type
            this.id=Number(option.id) ||''
            uni.setNavigationBarTitle({
                title:this.isType==1 ? '报告精选' : this.isType==2 ? '本周研究汇总' : '上周纪要汇总'
            })
            
                app.globalData.bgAudioManager.onEnded(res=>{
                this.isPlay=true
            })
          },
    onShow() {
              this.$store.dispatch('checkHandle').then(res => {
                  	app.globalData.isAuth = res.IsAuth;
                  	app.globalData.isBind = res.IsBind;
                  	if((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定            
                  		 this.getDetilaiList()
                           
                  	}else if(res.IsAuth) { //未授权
                  		uni.navigateTo({
                  			url:'/pages/authGuide/authGuide'
                  		})
                  	}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
                  		uni.navigateTo({
                  			url:'/pages/login/login'
                  		})
                  	}
                  })	
              
          },
          onUnload(){
          },
        /**
        * 用户点击分享
        */
        onShareAppMessage: function (res) {
        	return {
        		title: this.detali.Title,
        		path: '/reportPages/reportSecretDetail/reportSecretDetail?type=' + this.isType + '&id='+this.id,
        		success: (res)=> {
        		},
        		fail: (err)=> {
        		}
        	}
        },
    }
</script>

<style lang="scss" scoped>
.content-secret {
    @import '../jurisdiction.scss';
    padding:10rpx 34rpx  34rpx;
    .container-top {
          font-size: 28rpx;
        .content-title {
            color: #4A4A4A;
            font-size: 34rpx;
            font-weight: bold;
        }
        .content-time {
            margin:24rpx 0  34rpx 0;
            display: flex;
            justify-content: space-between;
            color: #333333;
        }
        .content-statement {
            display: flex;
            color: #707070;      
            .statement {
                margin-left: 10rpx;
                color: #3385FF;
            }
        }
        .content-audio {
            margin: 60rpx 0;
            width: 682rpx;
            align-items: center;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 12rpx rgba(33, 74, 135, 0.16);
            opacity: 1;
            border-radius: 16rpx;
            display: flex;
            padding: 24rpx 21rpx 18rpx;
           .audio-img{
               width: 154rpx;
               height: 154rpx;
               margin-right: 20rpx;
               image {
                   width: 154rpx;
                    height: 154rpx;
                }
           }   
           .audio-title {
                font-size: 28rpx;
                color:#333;
                :first-child{
                    width: 450rpx;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    margin-bottom:30rpx ;
                    font-size: 32rpx
                }
            }
        }
        .content-abstract {
            margin-bottom: 30rpx;
            font-size: 32rpx;
            color: #4A4A4A;
            :first-child{
                float:left;
                font-weight: 700;
            }
        }
        .content-focuson {
            font-size: 32rpx !important;
            margin-bottom: 30rpx;
            color: #4A4A4A;
            .focuson {
                 font-weight: 700;
            }
        }
    }
}
</style>