yijianbao_user_uniapp/pages_user/tongue/report.vue

<template>
	<view class="ai-container">
		<view class="uni-nav-head">
			<cover-view class="uni-nav-barbox" :style="{backgroundColor:headerBG,backgroundImage: baseUrl+'/images/ai_top_bg.png'}">
				<cover-view class="uni-nav-back" @click="back()">返回</cover-view>
				<cover-view class="uni-nav-title">AI舌诊体质辨识报告</cover-view>
				<cover-view style="min-width: 104rpx;"></cover-view>
			</cover-view>
		</view>
		<image class="jkda_top_bg" :src="baseUrl+'/images/ai_top_bg.png'" mode="widthFix"></image>
		<image class="ai_bottom_bg" :src="baseUrl+'/images/ai_bottom_bg.png'" mode="widthFix"></image>
		<view class="ai-container-body" v-if="item!=null">
			<view class="report-avatar">
				<image :src="item.avatar" mode="aspectFill" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="report-user">
				<text>{{item.name}}</text>
				<text style="padding: 0 18rpx 0 10rpx;">{{item.sex==1?"男":"女"}}</text>
				<text>{{item.age}}岁</text>
			</view>
			<view class="report-infobox">
				<image class="ai_sz_img" :src="baseUrl+'/images/ai_sz_img.png'" mode="widthFix"></image>
				<view class="report-info-border">
					<view class="report-info">
						<view class="report-time">检测时间 {{item.createTime}}</view>
						<view class="report-info-restit">您属于{{item.typeName}}</view>
						<view class="report-info-res">{{item.typeName}}</view>
						<!-- 视频 -->
						<view class="videobox" v-if="videoUrl">
							<video class="myVideo" :src="videoUrl" :poster="imageUrl" :autoplay='true'></video>
						</view>
						<!-- 舌苔特征 -->
						<view class="report-title bold">舌苔特征</view>
						<view class="report-info-item">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.taiseName}}：</text>
								<text>{{item.taiseDesc}}</text>
							</view>
						</view>
						<view class="report-info-item">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.shemianName}}：</text>
								<text>{{item.shemianDesc}}</text>
							</view>
						</view>
						<view class="report-info-item">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.botai==1?"有剥苔":"未见剥苔"}}：</text>
								<text>{{item.botaiDesc}}</text>
							</view>
						</view>
						<view class="report-info-item">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.liewen==1?"有裂纹":"未见裂纹"}}：</text>
								<text>{{item.liewenDesc}}</text>
							</view>
						</view>
						<view class="report-info-item">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.chihen==1?"有齿痕":"未见齿痕"}}：</text>
								<text>{{item.chihenDesc}}</text>
							</view>
						</view>
						<!-- 体质解析 -->
						<view class="report-title bold" >体质解析</view>
						<view class="report-info-item" v-for="(item) in typeList">
							<view class="item-round"></view>
							<view>
								<text class="item-title">{{item.name}}：</text>
								<text>{{item.value}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 解锁 -->
			<view class="lockbox">
				<image class="mask x-c" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/other/bg_bar.png"></image>
				<view class="lockbox-con y-f">
					<view class="lockbox-con-tip">联系伴学助手，查看全部内容</view>
					<image  :src="baseUrl+'/images/bxzs.jpg'"   mode="widthFix"></image>
					<view>注：报告内容参考王琦教授《九种体质使用手册》</view>
				</view>
			</view>
			<!-- 分享弹窗 -->
			<u-popup :show="showShare" @close="showShare = false" >
				<share-box :shareItem="shareItem" :showCopy="false" @closeShare='showShare = false' ></share-box>
			</u-popup>
			<view class="footer-btnbox">
				<!-- <view class="border-btn">
					<button class="footer-btn footer-btn-left">保存本图</button>
				</view> -->
				<view class="border-btn">
					<!-- #ifdef APP-PLUS -->
					<view class="footer-btn" v-if="isShare==null" @click="doShare()">分享好友</view>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<view class="footer-btn" v-if="isShare==null">
						分享好友
						<button class="contact-btn"   data-name="shareBtn" open-type="share">分享</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="footer-btn" v-if="isShare!=null&&isShare==1" @click="doTongue()">
						开始检测
					</view>
					<!-- #endif -->
				</view>
			</view>
			<!-- <view class="banner-box">
				<image src="@https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/banner.png" mode="widthFix"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {getHealthTongueById} from '@/api/healthTongue.js'
	
	export default {
		data() {
			return {
				type:null,
				id:null,
				isShare:null,
				avatar:null,
				item:null,
				typeList:[],
				baseUrl:uni.getStorageSync('requestPath'),
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				defaultHeadimg: "https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/my_heads_icon.png",
				showShare:false,
				shareItem:{ imageUrl:"",title:"",path:"",isMini:true },
				isLock: true,
				videoUrl: '',
				imageUrl: '',
				headerBG:"transparent"
			}
		},
		onLoad(options) {
			this.type=options.type;
			this.isShare=options.isShare;
			this.id=options.id;
			// var json=uni.getStorageSync("tongueResult")
			// this.item=JSON.parse(json);
			// this.typeList=JSON.parse(this.item.typeJson)
			this.getHealthTongueById()
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: "舌苔检测报告",
				path:"/pages_user/tongue/report?isShare=1&id="+this.id
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: "舌苔检测报告",
				path:"/pages_user/tongue/report?isShare=1&id="+this.id
			}
			
		},
		onPageScroll(e) {
			if(e.scrollTop > 44) {
				this.headerBG = '#FF8A00'
			} else {
				this.headerBG = "transparent"
			}
		},
		methods: {
			doTongue(){
				uni.redirectTo({
					url:"/pages/user/tongue/index"
				})
			},
			getHealthTongueById(){
				getHealthTongueById(this.id).then(
					res => {
						if(res.code==200){
							this.isLock = res.isAddQw == 1 ? true : false
							this.videoUrl = res.url || ''
							this.imageUrl = res.imageUrl || ''
							this.item=res.data;
							const jsoninfo = JSON.parse(this.item.typeJson)
							let index = jsoninfo.findIndex(item => item.name === '用药调治');
							if(index > -1) {
								this.typeList=jsoninfo.splice(0,index)
							} else {
								this.typeList=jsoninfo
							}
						}else{
							 
						}
					},
					rej => {}
				);
			},
			back() {
				if(this.type!=null&&this.type=="back"){
					uni.navigateBack()
				}
				else{
					uni.switchTab({
						url:"/pages/index/index"
					})
				}
				
			},
			doShare(){
				if(this.isH5){
					return;
				}
				this.shareItem.title= "舌苔检测报告";
				this.shareItem.imageUrl="";
				this.shareItem.isMini=true;
				this.shareItem.path="/pages/user/tongue/report?isShare=1&id="+this.id
				let cdn=uni.getStorageSync('h5Path');
				this.shareItem.url=cdn+this.shareItem.path;
				this.showShare=true;
			}
		}
	}
</script>

<style scoped lang="scss">
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.pb50 {
		padding-bottom: calc(var(--window-bottom) + 50rpx);
	}
	.lockbox {
		margin-top: -200rpx;
		position: relative;
		z-index: 9;
		.mask{
			width: 100%;
			height:160rpx;
			margin-bottom: -2px;
		}
		&-con-tip {
			padding: 16rpx 24rpx 30rpx 24rpx;
			box-sizing: border-box;
			color: #FF4E00;
			font-size: 32rpx;
			font-weight: bold;
		}
		&-con {
			padding: 0 24rpx 40rpx 24rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			background-color: #fff;
			image {
				width: 702rpx;
				height: auto;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 40rpx;
			}
		}
	}
	.footer-btnbox {
		width: 100%;
		padding-bottom: 44rpx;
		@include u-flex(row, center, center);
		background-color: #fff;
		.border-btn {
			width: 400rpx;
			height: 78rpx;
			padding: 4rpx;
			box-sizing: border-box;
			background: linear-gradient(0deg, #FF7200, #FF9E06);
			box-shadow: 0rpx 9rpx 17rpx 0rpx rgba(240,134,33,0.6);
			border-radius: 78rpx;
			
			
		}
		.footer-btn {
			width: 100%;
			height: 100%;
			background: #FF7200;
			border-radius: 78rpx;
			font-family: SourceHanSansCN-Bold;
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 69rpx;
			border-radius: 33rpx;
			border: 3rpx solid #FFEEC5;
			text-align: center;
			&::after {
				border: none;
			}
			position: relative;
			.contact-btn{
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 9999;
			}
			
		}
	}
	.uni-nav-bar_bg {
		width: 100%;
		height: 782rpx;
	}
	.uni-nav-head {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		height: calc(var(--status-bar-height) + 88rpx);
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 32rpx;
	}
	.uni-nav-barbox {
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		padding-top: var(--status-bar-height);
		padding-left: 20rpx;
		box-sizing: border-box;
		@include u-flex(row, center, space-between);
		background-repeat: no-repeat;
		background-size: 100% auto;
		.uni-nav-back {
			width: 110rpx;
			box-sizing: border-box;
			@include u-flex(row, center, center);
			text-align: center;
		}
	}
	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(var(--status-bar-height) + 88rpx);
		z-index: 994;
		overflow: hidden;
	}
	.videobox {
		width: 568rpx;
		height: 320rpx;
		margin-top: 40rpx;
		position: relative;
		.myVideo {
			width: 568rpx;
			height: 320rpx;
		}
	}
	.ai-container {
		min-height: 100vh;
		position: relative;
		background: #FF8A00;
		.jkda_top_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;		
		}
		.ai_bottom_bg {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;		
		}
		&-body {
			position: relative;
			padding-top: calc(var(--status-bar-height) + 132rpx);
		}
	}

	.bold {
		height: 42rpx;
		font-size: 44rpx !important;
		color: #FF7C00 !important;
		border-left: 10rpx solid #FF7C00;
		line-height: 42rpx;
		margin: 54rpx 0 40rpx 0;
	}

	.ai_sz_img {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 16rpx;
		z-index: 1;
	}

	.item-round {
		flex-shrink: 0;
		width: 23rpx;
		height: 23rpx;
		margin-right: 12rpx;
		background: #FF7C00;
		border-radius: 50%;
	}

	.report {
		&-avatar {
			width: 171rpx;
			height: 171rpx;
			padding: 3rpx;
			margin: 0 auto;
			border-radius: 50%;
			overflow: hidden;
			box-sizing: border-box;
			background: linear-gradient(0deg, #FF8400, #FED920);
		}

		&-user {
			font-family: SourceHanSansCN;
			font-weight: bold;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 91rpx;
			text-shadow: 2rpx 2rpx 3rpx rgba(255, 84, 0, 0.76);
			text-align: center;
		}

		&-infobox {
			padding: 36rpx 47rpx 0 47rpx;
			padding-top: 184rpx;
			position: relative;
		}

		&-info-border {
			padding: 4rpx;
			border-radius: 45rpx;
			box-sizing: border-box;
			background: linear-gradient(0deg, #FF4E00, #FF9E06);
			box-shadow: 8rpx 11rpx 14rpx 0rpx rgba(255, 84, 0, 0.88);
			position: relative;
			z-index: 2;
		}

		&-info {
			padding: 34rpx 40rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 45rpx;
			font-family: SourceHanSansCN-Regular;
			font-weight: 400;
			color: #4D4D4D;
			

			&-restit {
				margin: 27rpx 0 33rpx 0;
				font-family: SourceHanSansCN-Bold;
				font-weight: bold;
				font-size: 33rpx;
				color: #4D4D4D;
				text-align: center;
			}

			&-res {
				font-weight: 800;
				font-size: 54rpx;
				color: #FF7C00;
				text-align: center;
			}

			&-item {
				margin-bottom: 30rpx;
				display: flex;
				align-items: baseline;
				font-family: SourceHanSansCN-Regular;
				font-size: 27rpx;
				color: #414141;
				line-height: 36rpx;
				word-break: break-all;

				.item-title {
					font-family: SourceHanSansCN-Bold;
					font-weight: bold;
					font-size: 27rpx;
					color: #414141;
				}
			}
		}

		&-time {
			font-size: 24rpx;
			text-align: center;
		}

		&-title {
			padding-left: 10rpx;
			font-family: SourceHanSansCN-Bold;
			font-weight: bold;
			color: #414141;
		}
	}
	.banner-box {
		padding: 48rpx 34rpx 0 34rpx;
		image {
			width: 100%;
			height: auto;
		}
	}
</style>