siyu_app/pages/user/tongue/photoPreview.vue

<template>
	<view class="container">
		
		<cover-image class="uni-nav-back" src="@/static/image/ai_right_icon.png" mode="aspectFill" @click="back"></cover-image>
		
		<view class="photo-box" :style="{height: height + 'px'}" >
			<image class="tongue" v-if="url!=null" :src="url"></image>
		</view>
		
		<view class="font-cont">
			<view class="chose-patient">
				<view class="title-box" @click="addPatient()" v-if="patient==null">
					<text class="title">选择就诊人</text>
					<view class="right" >
						<text class="value">请点击添加</text>
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
				<view class="patient" @click="addPatient()" v-if="patient!=null">
					<view  class="left">
						<view class="name">{{patient.patientName}}</view>
						<view class="info">
							<text class="text" v-if="patient.sex==1">男</text>
							<text class="text" v-if="patient.sex==2">女</text>
							<text class="text">{{$getAge(patient.birthday)}}岁</text>
							<text class="text">{{$parseIdCard(patient.idCard)}}</text>
						</view>
					</view>
					<view class="right" >
						<image src="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="footer-btn" id="photo-footer-btn">
				<view class="footer-btn-left" @click="back">重新拍照</view>
				<button class="footer-btn-right" @click="submit()">开始检测</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import {getCount,add} from '@/api/healthTongue.js'
	export default {
		data() {
			return {
				patient:null,
				height: 0,
				url:null,
				flag:true,
				errMsg:"",
				cropperWidth: 806, // 裁剪区域宽度
			    ropperHeight: 1240, // 裁剪区域高度
				croppedImagePath:""
			}
		},
		onLoad(options) {
			this.url=options.url;
			let that=this;
			setTimeout(e => {
				uni.createSelectorQuery().select("#photo-footer-btn").boundingClientRect(rect => {
					 console.log("qxj checkTextLines height:"+JSON.stringify(rect));
					 that.height = uni.getSystemInfoSync().screenHeight - rect.height-uni.upx2px(100);
				}).exec();
			}, 50);
			uni.$on('refreshOrderPatient', (res) => {
				that.patient=res;
			});
		},
		methods: {
			addPatient(){
				uni.navigateTo({
					url: '/pages/user/patient'
				});
			},
			back() {
				uni.navigateBack();
				uni.$emit("navigateBack",{});
			},
			submit(){
				if(!this.flag){
					if(!this.$isEmpty(this.errMsg)){
						uni.showToast({icon:'none',title: this.errMsg});
					}
					return;
				}
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: "请选择就诊人",
					});
					return;
				}
				this.flag=false;
				uni.showLoading({
					title:"处理中..."
				})
				uni.uploadFile({
					url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
					filePath: this.url,
					name: 'file',
					formData: {
						'user': 'test'  // 上传附带参数
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).url)
						var data={
							patientId:this.patient.patientId,
							sex:this.patient.sex,
							name:this.patient.name,
							age:this.$getAge(this.patient.birthday),
							tongueUrl:JSON.parse(uploadFileRes.data).url,
						}
						add(data).then(res => {
								if(res.code==200){
									uni.setStorageSync("tongueResult",JSON.stringify(res.data))
									uni.redirectTo({
										url:"/pages/user/tongue/report?id="+res.data.id
									});
								}else{
									this.errMsg= res.msg;
									uni.showToast({
										icon:'none',
										title: res.msg,
									});
								}
							},
							rej => {}
						);
					}
				});
			},
			next(){
				uni.redirectTo({
					url:"/pages/user/tongue/report"
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	
	.container {
		height: 100vh;
		background-color: rgba(66, 66, 66, 1);
		position: relative;
		.uni-nav-back {
			height: 32rpx;
			width: 32rpx;
			position: absolute;
			top:var(--status-bar-height);
			margin-top:10rpx;
			left: 20rpx;;
		}
		
		.photo-box {
			width: 100%;
			padding-top:20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border:0px solid red;
			.tongue{
				width: 80%;
				height:60%;
				index:1;
				border-radius: 10rpx;
			}
		}
		
		.font-cont{
			width: 100%;
			position: fixed;
			left: 0;
			bottom: calc(var(--window-bottom) + 50rpx);
			.chose-patient{
				position: relative;
				margin: 30rpx 60rpx;
				padding: 30rpx;
				box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
				background-color: #fff;
				border-radius: 15rpx;
				.title-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.right{
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.value{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999;
							margin-right: 10rpx;
						}
						image{
							width: 15upx;
							height: 30upx;
						}
						 
					}
				}
				.patient{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 110upx;
					.left{
						.name{
							font-size: 30upx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
						}
						.info{
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								line-height: 1;
								font-weight: 500;
								color: #999;
								margin-right: 19upx;
							}
							 
						}
					}
					.right{
						display: flex;
						align-items: center;
						image{
							width: 15upx;
							height: 30upx;
						}
					}
				}
			}
			.footer-btn {
				width: 100%;
				padding-top: 30rpx;
				z-index: 99;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: SourceHanSansCN-Normal;
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;
			
				&-left {
					width: 278rpx;
					height: 97rpx;
					box-sizing: border-box;
					border-radius: 48rpx;
					border: 2px solid #FFFFFF;
					line-height: 93rpx;
					text-align: center;
				}
			
				&-right {
					margin: 0;
					font-family: SourceHanSansCN-Normal;
					font-weight: 400;
					font-size: 34rpx;
					color: #FFFFFF;
					width: 276rpx;
					height: 95rpx;
					background: #F54D04;
					border-radius: 48rpx;
					line-height: 95rpx;
					margin-left: 61rpx;
			
					&::after {
						border: none;
					}
				}
			}
		}

		
	}
	
</style>