yijianbao_user_uniapp/pages_user/tongue/photoPreview.vue

<template>
	<view class="container">
		<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="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/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="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/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,
			}
		},
		onLoad(options) {
			console.log(options)
			this.url=options.url;
			const query = uni.createSelectorQuery().in(this);
			query
			  .select("#photo-footer-btn")
			  .boundingClientRect((data) => {
				  console.log(data.height)
				this.height = uni.getSystemInfoSync().screenHeight - data.height
			  })
			  .exec();
			var that=this;
			uni.$on('refreshOrderPatient', (res) => {
				console.log(res)
				that.patient=res
			})
		},
		methods: {
			addPatient(){
				uni.navigateTo({
					url: '/pages_user/patient'
				})
			},
			back() {
				uni.navigateBack()
			},
			submit(){
				if(!this.flag){
					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)
						
						if(this.patient!=null){
							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,
								
							}
						}
						else{
							var data={
								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{
									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);
		.photo-box {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.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>