horzi_rai_wxa/reportPages/roadEssence/roadEssence.vue

<template>
    <view class="container content-road forbid-copy">
        <block v-if='haveAuth===1'>
        <view class="container-top">
            <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  class="content-abstract">
                <text>摘要：</text>
                <text>
                    {{detali.Abstract}}
                </text>
            </view>
           <view class="content-boby">
                <!-- <rich-text :nodes="detali.Body"></rich-text> -->
                  <mp-html :content="detali.Body"/>
           </view>
        </view>
        <view class="content-link" v-if="detali.ReportLink" @click="goDetali">
            查看深度报告
        </view>
        <statement :show="isShowStatement"/>
        </block>
        <view class="noauth-cont" v-else-if="haveAuth===3||haveAuth===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 { Reports,User} from '@/config/api.js'
    import statement from '@/components/statement.vue'
    let app = getApp()
    export default {
        data() {
            return {
                 id: '',//
                 detali:'',//详情
                 audioContext:'', //音频
                 isPlay:false, //mp3 播放的图片
                 isShowStatement:false ,//免责声明隐现
                 haveAuth:'',//权限判断
                 videoUrl:''
            }
        },
        methods: {
            async getDetail() {
                const res = await Reports.roadshowEssence({
                    ArticleId: this.id
                })
                if(res.Ret===200){
                    this.detali=res.Data.Detail
                    this.haveAuth=res.Data.HasPermission
                    this.videoUrl= res.Data.Detail.VideoUrl
                    if( app.globalData.bgAudioManager.src === this.videoUrl) {
                        this.isPlay = true
                    }
                }
            },
            goDetali(){
                uni.navigateTo({
                    url:'/pages/reportDetail/reportDetail?id='+this.detali.ReportLink
                })
            },
            /* 无权限申请开通权限 */
            applyAuth() {
                this.haveAuth === 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'
            	})
            },
            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()
            },
            
        },
        components:{
            statement
        },
        onLoad(option) {
            this.id = Number(option.id) ||''
            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.getDetail()
                        this.audioContext = uni.createInnerAudioContext()
                        //音频播放错误事件
                         this.audioContext.onError((res) => {
                          console.log(res.errMsg);
                          console.log(res.errCode);
                        });
                         //音频自然播放结束事件
                        this.audioContext.onEnded(res=>{
                            this.isPlay=true
                        })
                	}else if(res.IsAuth) { //未授权
                		uni.navigateTo({
                			url:'/pages/authGuide/authGuide'
                		})
                	}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
                		uni.navigateTo({
                			url:'/pages/login/login'
                		})
                	}
                })		        
            
        },
        /**
        * 用户点击分享
        */
        onShareAppMessage: function (res) {
        	return {
        		title: this.detali.Title,
        		url:'reportPages/roadEssence/roadEssence?id='+this.id,
        		success: (res)=> {
        		},
        		fail: (err)=> {
        		}
        	}
        },
    }
</script>

<style lang="scss" scoped> 
.content-road {
    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-boby {
            font-size: 32rpx;
            image,img {
                width: 100%;
            }
            
        }
    }
    .content-link {
        width: 368rpx;
        height: 80rpx;
        border: 2rpx solid #2C83FF;
        opacity: 1;
        border-radius: 4rpx;
        line-height:76rpx;
        text-align: center;
        color: #2C83FF;
        font-size: 32rpx;
        box-sizing: border-box;
        margin: 100rpx auto;
    }
@import '../jurisdiction.scss';
}

</style>