horzi_rai_wxa/pages/reportDetail/reportDetail.vue

<template>
	<view class="container reportDetail-container">
		<block v-if="haveAuth===1">
			<!-- 链接地址 -->
			<web-view :src="linkurl+'?id='+ id +'&fromType=mpwechat&token='+access_token"></web-view>
		</block>
		<view class="noauth-cont" v-else-if="haveAuth===2||haveAuth===3||haveAuth===4||haveAuth===5">
			<image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
			<block v-if="haveAuth!==3">
				<view class="tip">您暂无权限查看{{industry}}内容，若想查看可以申请开通哦</view>
				<view class="btn-cont"  @click="applyAuth">
                立即申请
				</view>	
			</block>
			<view class="tip" v-if="haveAuth===3">
				您暂无权限查看{{industry}}内容
				<view class="contract">
					若想查看可以联系对口销售
					<text @click="callPhone(sale_number)">{{sale_name}}：<text style="color:#D4BF86;">{{sale_number}}</text></text>
				</view>
				<view>开通该行业的试用权限</view>
			</view>
	
			<view class="btn-cont back-btn" @click="backIndex">
        返回			
			</view>
		</view>
	</view>
</template>

<script>
	import { Report,User ,Reports} from '@/config/api.js'
	let app = getApp();
	export default {
		data() {
			return {
				haveAuth:false,
				// haveFree:false,//是否付费
				access_token:'',//用户标识
				isIphoneX:false,//判断机型
				reportInfo:'',
				//linkurl:'https://details.hzinsights.com/raiReportDtl',//线上链接地址
				linkurl:'http://192.168.2.66:2000/raiReportDtl',//链接地址 
				showNav:false,
				id:'',
				isShowTip:false,
				sale_name:'',//可联系销售名称
				sale_number:'',//可联系销售电话
				industry:'',//行业
				readTiem:0,
				setIntervalTiem:null
			};
		},
		computed:{
		},
		methods: {
			/* 获取详情 */
			getDetail() {
				Report.reportDtl({
					ArticleId: Number(this.id) 
				}).then(res => {
					if(res.Ret === 200) {
                       uni.setNavigationBarTitle({
                           title:res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情"
                       })
						this.haveAuth = res.Data.HasPermission;
						this.industry = res.Data.Detail.CategoryName;
						this.sale_name = res.Data.Detail.SellerName;
						this.sale_number = res.Data.Detail.SellerMobile;
						if(res.Data.HasPermission === 1) { //有访问权限
							this.reportInfo = res.Data.Detail;
							this.access_token = this.access_token || this.$db.get('access_token');
							this.$store.dispatch("statistics",{PageType:'ReportParticulars',DetailId:this.id})
						}
					}
				})
			},
			/* 无权限申请开通权限 */
			applyAuth() {
				/* 区分是否是潜在用户 */
				this.haveAuth === 2
				?  User.applyTry({
						ApplyMethod:3
					}).then(res => {
						if(res.Ret === 200) {								
							uni.navigateTo({
								url:"/pages/applyResult/applyResult"
							})
						}
					})
				:	this.haveAuth === 4
				?  uni.navigateTo({
						url:"/pages/applyTrial/applyTrial"
					})
				: 	uni.showModal({
						title: '',
						content: '您已经提交过申请了，请耐心等待',
						showCancel:false,
						confirmColor:'#365595',
						success: function (res) {
						}
					});
			},
			// 返回首頁
			backIndex() {
				uni.navigateBack({
					fail(){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				})
			},
			callPhone(num) {
				uni.makePhoneCall({
					phoneNumber: num
				})
			},
			/* 申请访谈 */
			applyHandle() {
				 // 申请访谈 
				!this.reportInfo.IsInterviewApply && this.$util.modal('','专家访谈申请会提交给您的对口销售，销售会线下与您取得联系，确定申请吗？',()=> {
					this.interviewApi()
				}) 
				 // 取消申请访谈 区分状态 '待邀请','待访谈','已完成','已取消'
				if( this.reportInfo.IsInterviewApply) {
					// this.reportInfo.InterviewApplyStatus
					this.$util.modal('',
					this.reportInfo.InterviewApplyStatus=='待访谈'
					?'当前无法取消访谈，若有疑问，请联系对口销售'
					:this.reportInfo.InterviewApplyStatus=='待邀请'
					?'您要取消此次访谈申请吗？'
					:'该访谈已完成',
					()=> {
						this.reportInfo.InterviewApplyStatus=='待邀请' 
						? this.interviewApi()
						:this.reportInfo.InterviewApplyStatus=='待访谈'
						? uni.makePhoneCall({
							phoneNumber: '18767183922',
						})
						:''
					})
				}
			},
			/* 访谈接口 */
			interviewApi() {
				Report.applyRpt({
					ArticleId: Number(this.id)
				}).then(res => {
					this.reportInfo.IsInterviewApply = !this.reportInfo.IsInterviewApply;
				})
			},
			/* 收藏 */
			collectHandle() {
				Report.collectRpt({
					ArticleId: Number(this.id)
				}).then(res => {
					this.reportInfo.IsCollect = !this.reportInfo.IsCollect;
					this.$util.toast(res.Msg)
				})
			}
		},
		onShow() {
		this.readTiem=0
		this.setIntervalTiem=setInterval(() => {
			      this.readTiem++
			    },1000)
			let page = getCurrentPages();//查看路径
			if(page.length === 1) { //分享入口
				this.$store.dispatch('checkHandle').then(res => {
					app.globalData.isAuth = res.IsAuth;
					app.globalData.isBind = res.IsBind;
					if((!res.IsAuth) && (!res.IsBind)) { //已授权已绑定
						this.getDetail();
					}else if(res.IsAuth) { //未授权
						uni.navigateTo({
							url:'/pages/authGuide/authGuide'
						})
					}else if(res.IsBind && !res.IsAuth){ //已授权未绑定
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				})				
			}else { // 跳转入口
				this.getDetail();
				
			}
		},
		onLoad(option) {
			// console.log(option)
			/* 兼容iphonex底部 */
			// uni.getSystemInfo({
			// 	success: res => {
			// 	   let ua = res.model;
			// 	   if (ua.search('iPhone X') != -1 || ua.search('iPhone 11') != -1 || ua.search('iPhone 11 Pro Max') != -1) {
			// 			this.isIphoneX = true;
			// 	   }
			// 	}
			// })
			this.id = option.id || '';
			
		},
		 /**
		    * 用户点击分享
		  */
		onShareAppMessage: function (res) {
            if(this.id) {
				return {
					title: this.reportInfo.Title,
					path: '/pages/reportDetail/reportDetail?id='+this.id,
					success: (res)=> {
					},
					fail: (err)=> {
					}
				}
			}
			
		},
		onHide(){
			clearInterval(this.setIntervalTiem)
			Reports.addStopTime({
				ArticleId:Number(this.id) ,
				StopTime:this.readTiem
			}).then(res=>{
				
			})
		},
		onUnload(){
			clearInterval(this.setIntervalTiem)
			Reports.addStopTime({
				ArticleId:Number(this.id),
				StopTime:this.readTiem
			}).then(res=>{
				
			})
		}
	}
</script>

<style lang="scss" scoped>
.reportDetail-container {
	background-color: #fff;
	padding: 20rpx 34rpx 134rpx;
	.report-top {
		color: #999999;
		.report-title {
			color: #4A4A4A;
			font-size: 34rpx;
		}
		.report_desc {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0;
		}
		.tip {
			color: #586EB5;
			display: inline;
		}
	}
	.detail-report {
		padding: 40rpx 0;
	}
	.statement {
		max-width: 670rpx;
		max-height: 900rpx;
		line-height: 42rpx;
		overflow-y: auto;
		padding: 40rpx;
	}
	.fixed_cont {
		width: 100%;
		// height: 114rpx;
		padding: 10rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99999;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		background-color: #fff;
		box-shadow: 0 	-3rpx 6rpx rgba($color: #6A6A6A, $alpha: 0.16);
		.handle-item {
			font-size: 24rpx;
			color: #D0CFD5;
			text-align: center;
			margin-right: 130rpx;
			&:last-child {
				margin-right: 0;
			}
			.img_ico {
				width: 56rpx;
				height: 54rpx;
				margin: 0 auto;
			}
		}
		.button-item {
			background-color: transparent;
			line-height: normal;
		}
	}
	.noauth-cont {
		padding-top: 150rpx;
		text-align: center;
		font-size: 28rpx;
		.noauth-ico {
			width: 365rpx;
			height: 229rpx;
			margin-bottom: 70rpx;
		}
		.tip {
			width: 532rpx;
			margin: 0 auto 100rpx;
			.contract {
				padding: 40rpx 90rpx 0;
				line-height: 44rpx;
				text {
					display: inline-block;
				}
			}
		}
		.btn-cont {
			width: 368rpx;
			height: 80rpx;
			// position: relative;
			background:linear-gradient(268deg, #2DDBFF 0%, #1599FF 49%, #005EFF 100%);
			color: #fff;
			font-size: 34rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			&.back-btn {
				background:linear-gradient(268deg, #2DDBFF 0%, #1599FF 49%, #005EFF 100%)!important;
				// border: 2rpx solid #3385FF;
				color:  #fff;
				margin-top: 30rpx;
			}
			.btn_bg {
				width: 100%;
				height: 80rpx;
				position: absolute;
				left: 0;
				top: 0;
			}
			.btn-txt {
				width: 100%;
				position: absolute;
				z-index: 1;
			}
		}
	}
}
</style>