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>
					<mp-html :content="detali.FocusOn"/>
				</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) && app.globalData.bgAudioManager
							.paused === false) {
							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) && app.globalData.bgAudioManager
							.paused === false) {
							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 = false
			})
			app.globalData.bgAudioManager.onPause(res => {
				this.isPlay = false
			})
			app.globalData.bgAudioManager.onPlay(res => {
				
				this.isPlay = true
			})
			app.globalData.bgAudioManager.onStop(res=>{
				this.isPlay = false
			})
		},
		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>