Dining_Hall/pages/mine/me/faceUpload.vue

<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="container">
		<!-- 顶部导航栏 -->
		<!--    <view class="header">-->
		<!--      <view class="back-icon" @click="goBack">-->
		<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
		<!--      </view>-->
		<!--      <text class="title">人脸上传</text>-->
		<!--    </view>-->

		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 上传区域 -->
			<view class="upload-area" @click="handleChooseImage">
				<view class="upload-box" :class="{ 'has-image': facePhotoUrl }">
					<image v-if="facePhotoUrl" :src="facePhotoUrl" mode="aspectFill" class="preview-image" />
					<view v-else class="upload-placeholder">
						<image class="camera-icon" :src="require('@/static/images/my/camera.png')" mode="aspectFill"></image>
						<text class="upload-text">点击上传照片</text>
					</view>
				</view>
			</view>

			<!-- 提示信息 -->
			<view class="tips">
				<text class="tip-item">·五官端正，面部无遮挡（请使用人脸照片）</text>
				<text class="tip-item">·不要带饰品（如墨镜等）</text>
				<text class="tip-item">·请在光线明亮的纯色背景下拍照（建议背景颜色为白色）</text>
				<text class="tip-item">·上传照片后需保存，保存失败照片将被清除</text>
			</view>

			<!-- 隐私协议 -->
			<!--      <view class="privacy-agreement">-->
			<!--        <checkbox-->
			<!--          :checked="agreed"-->
			<!--          @click="agreed = !agreed"-->
			<!--          color="#FF8126"-->
			<!--        />-->
			<!--        <text class="agreement-text">我已阅读并同意</text>-->
			<!--        <text class="agreement-link" @click="showAgreement">《东华管理生物特征采集私隐声明》</text>-->
			<!--      </view>-->

			<!-- 按钮组 -->
			<view class="button-group">
				<button class="submit-btn" :disabled="!agreed || !imageUrl" @click="handleUpload">确定上传</button>
				<button class="cancel-btn" @click="goBack">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { queryFacePhotoApi,uploadPhotoGenCodeForAppApi } from '@/api/mine/index'
	import { uploadBase64 } from "@/api/upload" 
	import { pathToBase64, base64ToPath } from 'image-tools';
	import Compressor from 'compressorjs';
	import ImageCompressor from 'image-compressor.js';
	import config from '@/config' 
	import { showConfirm } from '@/utils/common'
	export default {
		data() {
			return {
				fontValue:uni.getStorageSync('fontSize') || 8,
				facePhotoUrl:"",
				imageUrl: '',
				agreed: true,
				userInfo: {},
				faceData:{}
			}
		},
		onLoad() {
			this.getFacePhoto()
		},
		methods: { 
			getFacePhoto(){
				queryFacePhotoApi({"custId":uni.getStorageSync('custId')}).then(res => {
					console.log(res)
					this.facePhotoUrl = res.facePhotoUrl
				})
			},
			goBack() {
				uni.navigateBack()
			},
			imgToBase64(data) {
			  return new Promise((resolve, reject) => {
				pathToBase64(data)
				  .then(base64 => {
					resolve(base64)
				  })
				  .catch(error => {
					console.error(error)
					reject(error)
				  })
			  })
			},
			uploadFaceImg(){
				let param = {
					"MERCHANT-ID":"378915229716713472",
					"uploadKey":'face',
					"base64File":this.base64
				}
				uploadBase64(param).then(res => {
					console.log(res)
					if(res.code==200){
						this.faceData = res.data
					}else{
						this.faceData = {}
					}
				}) 
			},
			handleChooseImage() {
				uni.chooseImage({
					count: 1, 
					sizeType:["compressed"],
					success: resImage => {
						console.log(resImage)
						this.facePhotoUrl = resImage.tempFilePaths[0]
						this.imageUrl = resImage.tempFilePaths[0]
						const tempFile = resImage.tempFiles[0];
						console.log(tempFile)
						this.compressFile(tempFile).then(res => {
							console.log(res)
							const url = URL.createObjectURL(res) 
							this.imgToBase64(url).then(base64 => {
								console.log(base64)
								this.base64=base64; 
								this.uploadFaceImg()
							}) 
						}) 
					}
				});
			},
		
			handleUpload() {
				console.log(this.imageUrl)
				if (!this.agreed || !this.imageUrl) return 
				uni.showLoading({
					title: '上传中...'
				})
				let param = {
					"custId": uni.getStorageSync('custId'),
					"openid": uni.getStorageSync('openId'),
					"sourceType": "7",
					"photoUrl": this.faceData.fileNameUrl
				}
				uploadPhotoGenCodeForAppApi(param).then(res => {
					console.log(res)
					if(res.code==200){
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'success'
						});
					}
					// if(res)
				})  
			},
			compressFile(file) {
			  return new Promise((resolve, reject) => {
			    const options = {
			      success(result) {
			        // 将压缩后的 Blob 转换为 File 对象（如果组件支持Blob则不用这一步）
			        const compressedFile = new File([result], file.name, {
			          type: file.type,
			          lastModified: Date.now(),
			        });
			        return resolve(compressedFile);
			      },
			      error(e) {
			        return reject(e);
			      },
			    };
			    // 1-3MB
			    if (file.size > 0.5 * 1024 * 1024 && file.size <= 3 * 1024 * 1024) {
			      options.quality = 0.3; // 压缩质量
			      options.convertSize = false;//不进行图像尺寸的调整
			      options.checkOrientation = false; // 图片翻转，默认为false
			    }
			    // 3-4MB
			    if (file.size > 3 * 1024 * 1024 && file.size <= 4 * 1024 * 1024) {
			      options.quality = 0.25; // 压缩质量
			      options.convertSize = false;//不进行图像尺寸的调整
			      options.checkOrientation = false; // 图片翻转，默认为false
			    }
			    // 5-6MB
			    if (file.size > 5 * 1024 * 1024 && file.size <= 6 * 1024 * 1024) {
			      options.quality = 0.2; // 压缩质量
			      options.convertSize = false;//不进行图像尺寸的调整
			      options.checkOrientation = false; // 图片翻转，默认为false
			    }
			    // 6-7MB
			    if (file.size > 6 * 1024 * 1024 && file.size <= 7 * 1024 * 1024) {
			      options.quality = 0.15; // 压缩质量
			      options.convertSize = false;//不进行图像尺寸的调整
			      options.checkOrientation = false; // 图片翻转，默认为false
			    }
			    // 7-9MB
			    if (file.size > 7 * 1024 * 1024 && file.size <= 9 * 1024 * 1024) {
			      options.quality = 0.1; // 压缩质量
			      options.convertSize = false;//不进行图像尺寸的调整
			      options.checkOrientation = false; // 图片翻转，默认为false
			    }
			    new ImageCompressor(file, options);
			  });
			},
			showAgreement() {
				uni.navigateTo({
					url: '/pages/privacy-agreement/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #fff;
	}

	.header {
		padding: 44px 32rpx 0;
		height: 88rpx;
		display: flex;
		align-items: center;

		.back-icon {
			padding: 20rpx;
			margin-left: -20rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #333;
			margin-right: 60rpx;
		}
	}

	.content {
		padding: 32rpx;
	}

	.upload-area {
		margin-bottom: 48rpx;

		.upload-box {
			width: 75%;
			height: 400rpx;
			border: 2rpx dashed #CCCCCC;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			margin: 0 auto;
		}

		&.has-image {
			border-style: solid;
		}

		.preview-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.upload-placeholder {
			display: flex;
			flex-direction: column;
			align-items: center;

			.camera-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 16rpx;
			}

			.upload-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}


	.tips {
		margin-bottom: 48rpx;
		width: 75%;
		margin-left: auto;
		margin-right: auto;

		.tip-item {
			display: block;
			font-size: 24rpx;
			color: #999;
			line-height: 1.6;
			text-align: left;
		}
	}

	.privacy-agreement {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 48rpx;

		/deep/ .uni-checkbox-input {
			border-radius: 50% !important;
		}
	}

	.button-group {
		margin-top: 32rpx;

		.submit-btn {
			width: 100%;
			height: 88rpx;
			background: #FF8126;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			margin-bottom: 24rpx;

			&:disabled {
				opacity: 0.5;
			}

			&:active {
				opacity: 0.9;
			}
		}

		.cancel-btn {
			width: 100%;
			height: 88rpx;
			background: #fff;
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #CCCCCC;

			&:active {
				background: #f5f5f5;
			}
		}
	}
</style>