AiSkinMeasurementMp/pages/skin-assessment/photoProcess.vue

<template>
	<view class="photo-process">
		<!-- <u-navbar is-back="true" class="nav-bar" :border-bottom	="false" title-color="#333" title="图片识别" :custom-back="onNavBack">
		</u-navbar> -->
		<image class="photo-process-img"  :src="detectFaceImg" mode="widthFix" :show-menu-by-longpress="true"></image>
		<!-- <view class="canvas-con">
			<canvas canvas-id="myCanvas" id="myCanvas"></canvas>
		</view> -->
		<cover-view class="action">
			<cover-view shape="circle" hover-class="none" class="btn" @click="onPhotoReSet">重拍</cover-view>
			<cover-view shape="circle" hover-class="none" class="btn full" @click="onSubmit">确认</cover-view>
		</cover-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				paddTopHeight: '',
				imgSize: null,
				props: {}
			}
		},
		computed: {
			detectFaceImg() {
				return this.$store.state
					.detectFaceImg || 'https://telpo-healthy.oss-cn-hangzhou.aliyuncs.com/healthy/knowledge/202410/d09e1e9b99cf496aab3422d9f1e766d5.png'
			}
		},
		methods: {
			onNavBack() {
				if(this.props && this.props.nuring) {
					let params = '';
					params = `?imei=${this.props.imei}&isDetectFace=true&nuring=${this.props.nuring}&logId=${this.props.logId || 0}&mode=${this.props.mode}`;
					uni.redirectTo({
						url: `/pages/subPack/detect-face/index${params}`,
					})
				} else {
					uni.redirectTo({
						url: `/pages/subPack/detect-face/index`,
					})
				}
			},
			onSubmit() {
				uni.redirectTo({
					url: `/pages/skin-assessment/croppedImage`,
				})
				return
				let that = this;
				
				if(this.imgSize && this.imgSize > 8) {
					return uni.showModal({
						content: '上传或者拍照的图像大小不能超过8MB',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								console.log("确认");
							} else {
								console.log("取消");
							}
						}
					})
				}
				that.skinanalyze();
			},
			onPhotoReSet() {
				// 重拍，返回拍照页面
				this.onNavBack();
			},
			async skinanalyze() {
				let that = this;
				uni.showLoading({
					title: '图片上传中',
					mask: true,
				})
				console.log("识别参数", "Mode", this.props.mode || 0, "TaskId", this.props.logId || 0);
				let re = await this.$api.skinanalyze(
					this.$util.tempUrlToUpload(
					that.detectFaceImg,
					`${this.$util.formateDate('yyyy-mm-dd-HH:MM:SS')}_sign.png`,
					{
						Mode: this.props.mode || 0,
						TaskId: this.props.logId || 0
					}
				));
				console.log("图片上传结果", re);
				if(re) {
					if(re.succeed) {
						if(re.data) {
							// 跳转详情页面
							setTimeout(() => {
								this.$u.toast('上传成功');
								let params = `?id=${re.data}&type=0&active=0&imei=${this.props.imei}&isDetectFace=true&logId=${this.props.logId}&nuring=${this.props.nuring}&mode=${this.props.mode}`;
								uni.redirectTo({
									url: `/pages/subPack/detect-face/archivesDetails${params}`,
								})
								/* this.$u.route({
									url: '/pages/subPack/detect-face/archivesDetails',
									params: {
										id: re.data,
										type: 0,
										active: 0
									},
								}) */
								/* this.$u.route({
									url: '/pages/subPack/detect-face/detect-face-details',
									params: {
										id: re.data,
									},
								}) */
							}, 1500)
						} else {
							uni.hideLoading();
							uni.showModal({
								title: '',
								content: `${re.message}`,
								showCancel: false,
								confirmText: '确认',
							})
						}
					} else {
						uni.hideLoading();
						uni.showModal({
							title: '',
							content: `${re.message}`,
							showCancel: false,
							confirmText: '确认',
						})
					}
				} else {
					this.$u.toast('上传失败,请重试')
				}
			},
			getImgSize() {
				let that = this;
				if(that.detectFaceImg) {
					const fileSystemManager = uni.getFileSystemManager();
					// 获取文件状态
					fileSystemManager.stat({
						path: that.detectFaceImg,
						success: function (statRes) {
							console.log('文件大小：', statRes.stats.size);
							const fileSizeInMB = (statRes.stats.size / (1024 * 1024)).toFixed(2); // 转换为MB
							that.imgSize = fileSizeInMB;
							console.log('文件大小：', fileSizeInMB, 'MB'); // 输出文件大小，单位是MB// 文件大小，单位是字节
						},
						fail: function (err) {
							console.error('获取文件状态失败：', err);
						}
					});
				}
				
			}
			

		},
		onLoad(props) {
			// this.paddTopHeight = this.$util.getPaddTopheight();
			this.getImgSize();
			if(props) {
				this.props = {...props};
				console.log("其他页面传递过来的参数", this.props);
			}
		}
	}
</script>

<style lang="scss">
	.photo-process {
		height: 100vh;
		width: 100vw;
		overflow: hidden;

		.action {
			height: 120rpx;
			width: 100vw;
			position: fixed;
			bottom: 60rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background: none;
			z-index: 9999;

			.btn {
				height: 89rpx;
				line-height: 89rpx;
				width: 266rpx;
				border: 4rpx solid #7F66E8;
				text-align: center;
				border-radius: 60rpx;
				font-family: OPPOSans;
				font-weight: bold;
				font-size: 36rpx;
				color: #7F66E8;

				&.full {
					background-color: #7F66E8;
					color: #FFFFFF;
					margin-left: 30rpx;
					font-weight: bold;
				}
			}


		}

		.nav-bar {	
		}
		.photo-process-img {
			position: relative;
			height: 100vh;
			width: 100vw;
		}

		.canvas-con {
			position: relative;
			z-index: 999;

			#myCanvas {
				height: 100vh;
				width: 100vw;
				z-index: 999;
			}
		}



	}
</style>