MiniScm/subpkg_checkin/addGuest/addGuest.vue

<template>
	<view class="container">
		<view>
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar :title="pageTitle" control="back" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar :title="pageTitle" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>

		<view class="step-zero" v-if="step==='fillForm'">
			<view class="tips">
				<u-text align="center" color="#333333" text="根据《治安管理处罚法》要求所有入住宾客和访客必须一人一证实名登记"></u-text>
			</view>
			<u-form labelPosition="left" labelWidth="180rpx">
				<u-form-item label="姓名" prop="name">
					<u-input v-model="name" border="none" clearable fontSize="36rpx" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u-input v-model="phone" border="none" clearable fontSize="36rpx" type="number"
						maxlength="11" placeholder="请输入手机号码"></u-input>
				</u-form-item>
				<u-form-item label="身份证" prop="idNumber">
					<u-input v-model="idNumber" border="none" clearable fontSize="36rpx" placeholder="请输入身份证号码"></u-input>
				</u-form-item>
			</u-form>
			<view class="btn-container">
				<u-button text="立即认证" color="#9e97c3" @click="finishInput"></u-button>
			</view>
		</view>

		<!-- #ifdef MP-ALIPAY -->
		<!-- 支付宝在上传完身份证照片后会跳转到人脸检测页面 -->
		<view class="step-one" v-else-if="step==='uploadCard' && !shootCard">
			<view class="tips" v-if="!name">
				<u-text align="center" color="#333333" text="根据《治安管理处罚法》要求所有入住宾客和访客必须一人一证实名登记"></u-text>
			</view>
			<view class="upload-container">
				<image :src="idCardFrontPicPath" mode="aspectFit" @click="handleUploadFront" :style="imageStyle">
				</image>
			</view>
			<view class="upload-container">
				<image :src="idCardBackPicPath" mode="aspectFit" @click="handleUploadBack"></image>
			</view>
			<view class="btn-container">
				<u-button :disabled="!getAllInfo" text="完成上传" color="#9e97c3" @click="finishIdCardUpload"></u-button>
			</view>

			<ant-action-sheet :visible="actionSheetVisible" :actions="actions" @action="handleAction"
				@close="handleSheetClose" />
		</view>
		<view class="shoot-id-card" v-if="shootCard">
			<camera id="card-camera" flash="off" device-position="back" @ready="cameraContext"
				:style="[cardCameraStyle]" />
			<cover-image
				:src="frontSelect ? '/static/mp-alipay/identity_info.png' : '/static/mp-alipay/national_emblem.png'"
				:style="[cardCameraStyle]"></cover-image>
			<view class="camera-btn">
				<image v-if="shot" src="/static/mp-alipay/camera.svg" style="width: 140rpx; height: 140rpx;"></image>
				<image v-else src="/static/mp-alipay/camera.svg" style="width: 140rpx; height: 140rpx;"
					@click="takePhotoAndGetInfo"></image>
			</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="step-one" v-else-if="step==='uploadCard'">
			<view class="tips" v-if="!name">
				<u-text align="center" color="#333333" text="根据《治安管理处罚法》要求所有入住宾客和访客必须一人一证实名登记"></u-text>
			</view>
			<view class="upload-container">
				<u-upload @afterRead="afterIdCardRead" name="Front" :maxCount="1" :maxSize="1024*1024*1.5"
					@oversize="oversize">
					<image :src="idCardFrontPicPath" mode="aspectFit"></image>
				</u-upload>
			</view>
			<view class="upload-container">
				<u-upload @afterRead="afterIdCardRead" name="Back" :maxCount="1" :maxSize="1024*1024*1.5"
					@oversize="oversize">
					<image :src="idCardBackPicPath" mode="aspectFit"></image>
				</u-upload>
			</view>
			<view class="btn-container">
				<u-button :disabled="!getAllInfo" text="完成上传" color="#9e97c3" @click="finishIdCardUpload"></u-button>
			</view>
		</view>
		<!-- #endif -->

		<view class="step-two" v-else-if="step==='checkIdentity'">
			<view class="face-area">
				<view class="face-area--tips">
					<view class="face-area--tips--title">
						<u-text text="身份核验" color="#333333" bold size="34rpx"></u-text>
					</view>
					<view class="face-area--tips--context">
						<u-text text="请根据页面提示进行操作" color="#CBCBCB" size="28rpx"></u-text>
					</view>
				</view>
				<view class="face-area--line"></view>
				<view class="camera-container">
					<!-- #ifdef MP-WEIXIN -->
					<camera v-if="showcamera" class="camera" device-position="front" flash="off" resolution="low">
					</camera>
					<!-- #endif -->

					<!-- #ifdef MP-ALIPAY -->
					<camera id="faceCheck-camera" flash="off" device-position="front" @ready="faceCheckCamera"
						:style="[faceCheckCameraStyle]" />
					<cover-image src="/static/mp-alipay/cover.png" :style="[faceCheckCoverImageStyle]"></cover-image>
					<!-- #endif -->
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="info">
					<u-text v-if="showcamera" :text="tipsText" align="center"></u-text>
				</view>
				<!-- #endif -->

				<!-- #ifdef MP-ALIPAY -->
				<view v-if="!showTips" class="check-pic-result">
					{{ checkPicTips }}
				</view>
				<!-- #endif -->
			</view>

			<view class="precautions">
				<view class="precautions--tips">
					<view class="precautions--tips--title">
						<u-text text="注意事项" color="#333333" bold size="34rpx"></u-text>
					</view>
					<view class="precautions--tips--context">
						<u-text text="请遵守需注意事项" color="#CBCBCB" size="28rpx"></u-text>
					</view>
				</view>
				<view class="precautions--line"></view>
				<view class="precautions--context">
					<u-text :text="'确认'+name+'本人操作；保持正脸在取景框中根据屏幕指示完成'" color="#666666" size="24rpx"></u-text>
				</view>
				<view class="img-list">
					<view class="img-list--item" v-for="img in imgList" :key="img.src">
						<view class="img">
							<u-image :src="img.src" :height="img.height" :width="img.width"></u-image>
						</view>
						<view class="tips">
							<u-text :text="img.tips" color="#666666" size="20rpx"></u-text>
						</view>
					</view>
				</view>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="btn-container">
				<u-button text="同意并开始验证" @click="start" color="#9e97c3"></u-button>
			</view>
			<!-- #endif -->

			<!-- #ifdef MP-ALIPAY -->
			<view class="btn">
				<u-button text="同意并开始验证" @click="checkFacePic" :disabled="isCheckingFace" color="#9e97c3"></u-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		IMG_BASE_URL,
		BASE_URL,
	} from '../../config.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from '../../components/navigateBar/navigate-bar.vue';
	// #ifdef MP-ALIPAY
	// 最大图片大小为2.0M
	const maxPhotoSize = 2 * 1024 * 1024
	// OCR类型，人像面为"0",国徽面为"1"
	const ocrType = {
		face: "0",
		emblem: "1"
	}
	// #endif
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				isMainCustomer: false,
				//0展示输入姓名、身份证号、手机号页面
				//1展示上传身份证照片页面
				//2展示身份核验页面
				step: "fillForm",
				//步骤 0 需要填入的信息
				name: '',
				idNumber: '',
				phone: '',
				//步骤 1 需要从身份证获取的信息
				idCardInfoInPage: {
					name: '',
					sex: '',
					nation: '',
					birth: '',
					address: '',
					idNumber: '',
					issuingAuthority: '',
					issuingDate: '',
					expiryDate: ''
				},
				idCardFrontPicPath: '../../static/idcard_upload_front.png',
				idCardBackPicPath: '../../static/idcard_upload_back.png',
				infoList: ['address', 'nation', 'sex', 'birth', 'issuingAuthority', 'issuingDate', 'expiryDate'],
				userInfoId: 0,

				// #ifdef MP-WEIXIN
				idCardDirection: '',
				// img: null,
				// imgData: null,
				idCardVKSession: null,
				idCardFrontUploadInfo: {
					imgUrl: '',
					imgWidth: 0,
					imgHeight: 0,
					imgOriginWidth: 0,
					imgOriginHeight: 0,
				},
				idCardFrontDetectInfo: {
					detected: false, //检测是否完成
					detectSuccess: false, //检测是否成功
					isComplete: false, //身份证是否完整
					label: '', //身份证方向，0 人像面，1 国徽面
					orientation: 0, //身份证朝向 （0 朝上 1 朝下 2 朝下 3 朝左）
					box: [], //身份证坐标框点数组 （0 左上点 1 右上点 2 右下点 3 左下点）
				},
				idCardBackUploadInfo: {
					imgUrl: '',
					imgWidth: 0,
					imgHeight: 0,
					imgOriginWidth: 0,
					imgOriginHeight: 0,
				},
				idCardBackDetectInfo: {
					detected: false,
					detectSuccess: false,
					isComplete: false,
					label: '',
					orientation: 0,
					box: [],
				},
				// showAddGuest: true,
				cameraEngine: null,
				VKSession: null,
				showcamera: false,
				tipsText: '开始身份核验',
				duringCameraAuth: false,
				isVKSupport: false,
				imgList: [{
						src: '/static/check-face-phone.png',
						width: '48rpx',
						height: '70rpx',
						tips: '正对手机'
					},
					{
						src: '/static/check-face-light.png',
						width: '78rpx',
						height: '70rpx',
						tips: '光线充足'
					},
					{
						src: '/static/check-face-face.png',
						width: '80rpx',
						height: '80rpx',
						tips: '脸部无遮挡'
					}
				],
				pageTitle: '身份信息录入',
				// #endif

				// #ifdef MP-ALIPAY
				actionSheetVisible: false,
				actions: [{
						text: "拍照",
						key: "shoot"
					},
					{
						text: "从相册选择",
						key: "choose"
					}
				],
				shootCard: false,
				shot: false,
				frontSelect: false,
				cardCam: null,
				faceCheckCam: null,
				fileSystem: null,
				cardCamWidth: 0,
				cardCamHigh: 0,
				cardCamTopGap: 0,
				imageStyle: {
					width: "500rpx",
					height: "350rpx",
					margin: "0 auto"
				},
				frontPassed: false,
				idCardFrontBase64: null,
				idCardBackBase64: null,
				backPassed: false,
				checkPicTips: "身份核验中....",
				screenWidth: 0,
				faceCheckCamTopGap: 0,
				showTips: true,
				isCheckingFace: false,
				faceCheckSucceed: false,
				// #endif
			};
		},
		computed: {
			...mapState('m_user', ['userInfo']),
			...mapState('m_business', ['checkinInfo', 'currentHotel', 'idCardInfo', 'order']),
			getAllInfo() {
				for (const info of this.infoList) {
					if (!this.idCardInfoInPage[info]) {
						return false
					}
				}
				return true
			},
			// #ifdef MP-ALIPAY
			cardCameraStyle() {
				let style = {}
				// 设置相机显示区域左右边框距屏幕左右边框为40px
				style.width = this.cardCamWidth + 'px'
				style.height = this.cardCamHigh + 'px'
				style.left = "40px"
				style.top = this.cardCamTopGap + "px"
				return style
			},
			faceCheckCameraStyle() {
				let style = {}
				// 设置相机显示区域左右边框距屏幕左右边框为20px
				let camWidth = this.screenWidth === 0 ? 0 : this.screenWidth - 20 * 2
				style.width = camWidth + 'px'
				style.height = camWidth + 'px'
				return style
			},
			faceCheckCoverImageStyle() {
				let style = {}
				// 设置相机遮罩图片的左右边框距屏幕左右边框为16px
				let imgWidth = this.screenWidth === 0 ? 0 : this.screenWidth - 16 * 2
				style.width = imgWidth + 'px'
				style.height = imgWidth + 'px'
				style.left = "16px"
				style.top = this.faceCheckCamTopGap + "px"
				return style
			}
			// #endif
		},
		methods: {
			...mapMutations('m_business', ['updateCheckinInfo', 'updateIdCardInfo', 'updateOrder']),
			...mapMutations('m_user', ['updateUserInfo']),
			async finishInput() {
				//检查格式是否正确
				let nameReg = /\d/;
				if (this.name === '' || nameReg.test(this.name)) {
					uni.$showMsg('姓名格式错误！')
					return
				}
				let idNumberReg =
					/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if (!idNumberReg.test(this.idNumber)) {
					uni.$showMsg('身份证号格式错误！')
					return
				}
				let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!phoneReg.test(this.phone)) {
					uni.$showMsg('手机号格式错误！')
					return
				}
				//判断此顾客信息是否已添加
				if (JSON.stringify(this.checkinInfo) !== '{}' && this.checkinInfo.length > 0) {
					for (let info of this.checkinInfo) {
						if (info.idNumber === this.idNumber) {
							uni.$showMsg('已添加此顾客，请检查填写信息')
							return
						}
					}
				}
				//检查该顾客是否在当前酒店入住
				let res = await uni.$http.post('/user/isCheckin', {
					idNumber: this.idNumber,
					hotelId: this.currentHotel.hotelId
				})
				if (res.data.code === 200 && res.data.data === true) {
					uni.$showMsg('该顾客已入住！')
					return
				}

				//判断本地缓存是否有顾客身份证信息，有则checkIdentity
				for (const info of this.idCardInfo) {
					if (info.idNumber === this.idNumber && info.name === this.name) {
						this.idCardInfoInPage = info
						this.step = 'checkIdentity'
						return
					}
				}

				//本地缓存没有顾客身份信息，到后台查询
				let idCardInfoQueryRes = await uni.$http.post('/user/idCardInfo', {
					idNumber: this.idNumber,
					name: this.name
				})

				//查询到，写入local storage，跳转checkIdentity
				if (idCardInfoQueryRes.data.code === 200 && idCardInfoQueryRes.data.data) {
					let info = idCardInfoQueryRes.data.data
					info.birth = info.birthday
					let keys = Object.keys(this.idCardInfoInPage)
					for (const key of keys) {
						//有数据为空则需重新上传
						if (!info[key]) {
							this.step = "uploadCard"
							return
						}
						this.idCardInfoInPage[key] = info[key]
					}
					let idCardInfoToUpdate = this.idCardInfo
					idCardInfoToUpdate.push(this.idCardInfoInPage)
					this.updateIdCardInfo(idCardInfoToUpdate)
					this.step = 'checkIdentity'
					return
				}

				//没查询到，跳转uploadCard，上传身份证
				this.step = "uploadCard"
			},
			// #ifdef MP-WEIXIN
			initIdCardVKSession() {
				this.idCardVKSession = wx.createVKSession({
					track: {
						IDCard: {
							mode: 2 // 照片模式
						}
					},
					version: 'v1',
					gl: this.gl
				})
				// VKSession start
				this.idCardVKSession.start(err => {

					this.idCardVKSession.on('updateAnchors', anchors => {
						// console.log('updateAnchors')

						// 处理返回的身份证信息
						if (anchors && anchors[0]) {
							// 存在数组，证明存在身份证信息
							const anchor = anchors[0];

							// console.log(anchor.isComplete, anchor.label, anchor.orientation, anchor.box);

							let info = {
								detected: true,
								detectSuccess: true,
								isComplete: anchor.isComplete,
								label: anchor.label,
								orientation: anchor.orientation,
								box: anchor.box,
							}
							this['idCard' + this.idCardDirection + 'DetectInfo'] = info

							// 裁剪信息
							const affineImgWidth = anchor.affineImgWidth;
							const affineImgHeight = anchor.affineImgHeight;
							const affineMat = anchor.affineMat;

							// 存在裁剪信息，进行身份证裁剪处理
							if (affineImgWidth && affineImgHeight && affineMat) {

								// console.log(affineImgWidth, affineImgHeight, affineMat);

								const cropIDcardImg = this.getCropIDcard(affineImgWidth, affineImgHeight,
									affineMat);
								// console.log(cropIDcardImg)
							}
						}

					})
					this.idCardVKSession.on('removeAnchors', anchors => {
						// console.log("anchor remove")

						// 图片没有识别到身份证
						this['idCard' + this.idCardDirection + 'DetectInfo'].detected = true
						this['idCard' + this.idCardDirection + 'DetectInfo'].detectSuccess = false
					})

				});
			},
			async setImageUploadInfo(url) {
				const fixWidth = 300
				let imageInfo = await uni.getImageInfo({
					src: url
					// ,
					// success: (image) => {
					// 	console.log(image)
					// 	let height = image.height
					// 	let width = image.width
					// 	let info = {
					// 		imgUrl: url,
					// 		imgWidth: fixWidth,
					// 		imgHeight: (fixWidth / width) * height,
					// 		imgOriginWidth: width,
					// 		imgOriginHeight: height
					// 	}
					// 	this['idCard' + this.idCardDirection + 'UploadInfo'] = info
					// }
				})
				let height = imageInfo[1].height
				let width = imageInfo[1].width
				let uploadInfo = {
					imgUrl: url,
					imgWidth: fixWidth,
					imgHeight: (fixWidth / width) * height,
					imgOriginWidth: width,
					imgOriginHeight: height
				}
				this['idCard' + this.idCardDirection + 'UploadInfo'] = uploadInfo
			},
			getCropIDcard(affineImgWidth, affineImgHeight, affineMat) {
				// console.log('start getCropIDcard')
				let infoName = 'idCard' + this.idCardDirection + 'UploadInfo'
				const canvas = wx.createOffscreenCanvas({
					type: '2d',
					width: affineImgWidth,
					height: affineImgHeight,
				})
				const context = canvas.getContext('2d')

				context.clearRect(0, 0, affineImgWidth, affineImgHeight);
				/*
				 * affineMat 3x3仿射变换矩阵，行主序
				 *  [0 1 2
				 *   3 4 5
				 *   6 7 8]
				 */
				/*
				 * canvas 2d setTransform
				 * setTransform(a, b, c, d, e, f)
				 *  [a c e
				 *   b d f
				 *   0 0 1]
				 */
				context.setTransform(
					Number(affineMat[0]), Number(affineMat[3]), Number(affineMat[1]),
					Number(affineMat[4]), Number(affineMat[2]), Number(affineMat[5])
				);
				// console.log(this.img, this[infoName].imgOriginWidth, this[infoName].imgOriginHeight)
				context.drawImage(this.img, 0, 0, this[infoName].imgOriginWidth, this[infoName].imgOriginHeight)
				const imgUrl = canvas.toDataURL()
				this[infoName].imgUrl = imgUrl
				this['idCard' + this.idCardDirection + 'PicPath'] = imgUrl
				return imgUrl;
			},
			async detectIdCard() {
				let infoName = 'idCard' + this.idCardDirection + 'UploadInfo'
				if (this[infoName].imgUrl) {
					const canvas = wx.createOffscreenCanvas({
						type: '2d',
						width: this[infoName].imgOriginWidth,
						height: this[infoName].imgOriginHeight,
					})
					const context = canvas.getContext('2d')
					const img = canvas.createImage()
					// 使用中的 图片对象
					this.img = img;
					await new Promise(resolve => {
						img.onload = resolve
						img.src = this[infoName].imgUrl
					})

					context.clearRect(0, 0, this[infoName].imgOriginWidth, this[infoName].imgOriginHeight)
					context.drawImage(img, 0, 0, this[infoName].imgOriginWidth, this[infoName].imgOriginHeight)

					// 使用中的 image ArrayBuffer
					this.imgData = context.getImageData(0, 0, this[infoName].imgOriginWidth, this[infoName]
						.imgOriginHeight)

					// console.log('[frameBuffer] --> ', this.imgData.data.buffer)
					// console.log('this.session.detectIDCard', this.idCardVKSession.detectIDCard)
					// console.log('width', this[infoName].imgOriginWidth)
					// console.log('height', this[infoName].imgOriginHeight)
					this.idCardVKSession.detectIDCard({
						// 识别身份证图片的信息
						frameBuffer: this.imgData.data.buffer,
						width: this[infoName].imgOriginWidth,
						height: this[infoName].imgOriginHeight,
						// 是否获取裁剪图片信息
						getAffineImg: true,
					})
				}
			},
			async afterIdCardRead(event) {
				console.log('afterIdCardRead', event)
				//正面还是反面
				this.idCardDirection = event.name
				await this.setImageUploadInfo(event.file.url)
				await this.detectIdCard()
				let detectInfo = this['idCard' + this.idCardDirection + 'DetectInfo']
				//图片中不包含身份证
				if (!detectInfo.detectSuccess) {
					uni.showModal({
						title: '图片中不包含身份证，请重新上传',
						showCancel: false
					})
					return
				}
				if (!detectInfo.isComplete) {
					uni.showModal({
						title: '身份证照片不完整，请重新上传',
						showCancel: false
					})
					return
				}
				if ((this.idCardDirection === 'Front' && detectInfo.label !== 0) ||
					(this.idCardDirection === 'Back' && detectInfo.label !== 1)) {
					uni.showModal({
						title: '身份证面错误，请重新上传',
						showCancel: false
					})
					return
				}
				uni.showLoading({
					title: '上传中',
					mask: true
				})

				try {
					let filePath = this['idCard' + this.idCardDirection + 'PicPath']

					let res = await uni.$http.post('/user/idCardOcr', {
						image: filePath.split(',')[1],
						ocrType: detectInfo.label,
						imageType: 'BASE64'
					})
					if (res.data.data.imageStatus !== 'normal') {
						uni.showModal({
							content: '获取信息失败，请检查图片并重新上传',
							showCancel: false,
						})
						return
					}
					if (!this.name) {
						this.name = res.data.data.name
					}
					if (!this.idNumber) {
						this.idNumber = res.data.data.cardNum
					}
					if (event.name === 'Front') {
						if (res.data.data.cardNum != this.idNumber || res.data.data.name != this.name) {
							uni.showModal({
								content: '填写信息与身份证不一致',
								showCancel: false,
								complete: () => {
									this.step = "fillForm"
									this.idCardFrontPicPath =
										'../../static/upload_front.png'
								},
							})
							return
						}
						this.idCardFrontBase64 = filePath.split(',')[1]
						this.idCardInfoInPage.name = res.data.data.name
						this.idCardInfoInPage.sex = res.data.data.sex
						this.idCardInfoInPage.nation = res.data.data.nation
						this.idCardInfoInPage.birth = res.data.data.birth
						this.idCardInfoInPage.address = res.data.data.address
						this.idCardInfoInPage.idNumber = res.data.data.cardNum
					} else {
						this.idCardBackBase64 = filePath.split(',')[1]
						this.idCardInfoInPage.issuingAuthority = res.data.data.issuingAuthority
						this.idCardInfoInPage.issuingDate = res.data.data.issuingDate
						this.idCardInfoInPage.expiryDate = res.data.data.expiryDate
					}
				} catch (err) {
					uni.showModal({
						title: err.message
					})
				} finally {
					uni.hideLoading()
				}
			},
			oversize() {
				uni.$showMsg('图片超出允许大小（1.5M）')
			},
			// #endif
			async gotoCheckFace() {
				//静态检测
				if (this.userInfo.staticFaceCheck === true) {
					uni.navigateTo({
						url: `/subpkg_checkin/staticFaceCheck/staticFaceCheck?idNumber=${this.idNumber}&name=${this.name}&phone=${this.phone}`
					})
				} else {
					// #ifdef MP-WEIXIN
					// const accountInfo = wx.getAccountInfoSync();
					// const env = accountInfo.miniProgram.envVersion
					// if (env !== "release") {
					// 	let faceRes = await uni.request({
					// 		url: IMG_BASE_URL + '/test_face_base64.txt',
					// 		method: 'GET'
					// 	})
					// 	let faceBase64 = faceRes[1].data
					// 	this.checkinInfo[this.checkinInfo.length] = {
					// 		name: this.name,
					// 		idNumber: this.idNumber,
					// 		phone: this.phone,
					// 		faceData: faceBase64
					// 	}
					// 	this.updateCheckinInfo(this.checkinInfo)
					// 	uni.navigateTo({
					// 		url: '/subpkg_checkin/confirmOrder/confirmOrder'
					// 	})
					// } 
					// #endif

					// #ifdef MP-ALIPAY
					this.step = 'checkIdentity'
					// #endif
				}
			},
			async finishIdCardUpload() {
				if (this.getAllInfo) {
					//判断此顾客信息是否已添加
					if (JSON.stringify(this.checkinInfo) !== '{}' && this.checkinInfo.length > 0) {
						for (let info of this.checkinInfo) {
							if (info.idNumber === this.idNumber) {
								uni.$showMsg('已添加此顾客，请检查填写信息')
								return
							}
						}
					}
					//检查该顾客是否在当前酒店入住
					let res = await uni.$http.post('/user/isCheckin', {
						idNumber: this.idNumber,
						hotelId: this.currentHotel.hotelId
					})
					if (res.data.code === 200 && res.data.data === true) {
						uni.$showMsg('该顾客已入住！')
						return
					}
					this.step = 'checkIdentity'
				} else {
					uni.$showMsg('请检查身份证照片')
				}
			},
			// #ifdef MP-ALIPAY
			async handleAction(item, e) {
				if (item.key === 'shoot') {
					this.shootCard = true
				} else if (item.key === 'choose') {
					await this.handleChooseImageAndGetInfo()
				}
			},
			handleSheetClose(e) {
				// console.log("handleSheetClose", e)
				this.actionSheetVisible = false
			},
			handleUploadFront() {
				if (this.frontPassed) {
					uni.$showMsg('身份证正面已核验通过')
					return
				}
				this.frontSelect = true
				this.actionSheetVisible = true
			},
			handleUploadBack() {
				if (this.backPassed) {
					uni.$showMsg('身份证背面已核验通过')
					return
				}
				this.frontSelect = false
				this.actionSheetVisible = true
			},
			async cameraContext() {
				this.cardCam = await my.createCameraContext('card-camera');
			},
			async faceCheckCamera() {
				this.faceCheckCam = await my.createCameraContext('faceCheck-camera');
			},
			async takePhotoAndGetInfo() {
				this.shot = true
				const photo = await this.cardCam.takePhoto({
					quality: 'normal',
				})
				console.log("photo", photo);
				const {
					picWidth,
					picHeight,
					size
				} = photo
				console.log("picWidth", picWidth, "picHeight", picHeight, "size", size);
				let picPath = photo.tempImagePath
				if (size > maxPhotoSize) {
					uni.showModal({
						content: '图片大小超过2MB，请重新拍照或选择照片上传。',
						showCancel: false
					})
					return
				}

				// picWidth < picHeight 需要旋转图片
				if (picWidth < picHeight) {
					const offCanvas = my.createOffscreenCanvas()
					const offCtx = offCanvas.getContext('2d')
					// console.log("offCtx", offCtx);
					// 用 离屏canvas 创建 Image
					const image = offCanvas.createImage()
					await new Promise((resolve, reject) => {
						image.src = photo.tempImagePath
						image.onload = function() {
							offCanvas.width = image.height
							offCanvas.height = image.width
							offCtx.rotate(270 * Math.PI / 180);
							offCtx.translate(-offCanvas.height, 0);
							// 将 Image 画到 离屏canvas 上
							offCtx.drawImage(image, 0, 0, image.width, image.height)
							resolve()
						}
					})
					// console.log("offCanvas", offCanvas);
					picPath = offCanvas.toDataURL("image/jpeg")
					// console.log("canDataUrl", picPath);
				}

				let _ocrType
				if (this.frontSelect) {
					this.idCardFrontPicPath = picPath
					_ocrType = ocrType.face
				} else {
					this.idCardBackPicPath = picPath
					_ocrType = ocrType.emblem
				}
				this.shootCard = false

				// 完成照片获取工作，开始和后端沟通获取照片上的信息
				this.shot = false

				// 打开loading模态框，处理图片
				const {
					data: photoBase64
				} = await this.fileSystem.readFile({
					filePath: photo.tempImagePath,
					encoding: "base64"
				})
				// console.log("photoBase64", photoBase64);
				await this.idCardOCR(photoBase64, _ocrType)
			},
			async handleChooseImageAndGetInfo() {
				const img = await my.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['album'],
				})
				// console.log("ChooseImage", img);
				const imgSize = img.tempFiles[0].size
				if (imgSize > maxPhotoSize) {
					uni.showModal({
						content: '图片大小超过2MB，请重新选择照片或拍照上传。',
						showCancel: false
					})
					return
				}

				let _ocrType
				if (this.frontSelect) {
					this.idCardFrontPicPath = img.tempFilePaths[0]
					_ocrType = ocrType.face
				} else {
					this.idCardBackPicPath = img.tempFilePaths[0]
					_ocrType = ocrType.emblem
				}
				const {
					data: photoBase64
				} = await this.fileSystem.readFile({
					filePath: img.tempFilePaths[0],
					encoding: "base64"
				})
				// console.log("photoBase64", photoBase64);

				await this.idCardOCR(photoBase64, _ocrType)
			},
			async idCardOCR(imgBase64, _ocrType) {
				// 在进行身份证识别时，弹loading框，不让进行任何操作
				my.showLoading({
					content: "身份证信息识别中...",
					mask: true
				})
				const ocrBaseUrl = BASE_URL.slice(0, -11)
				const ocrData = {
					image: imgBase64,
					imageType: "BASE64",
					ocrType: _ocrType
				}
				const {
					data: ocrRes
				} = await my.request({
					url: ocrBaseUrl + "/verification/idCardOcr",
					method: "POST",
					data: ocrData
				})
				// console.log("ocrRes", ocrRes);
				if (!ocrRes.success) {
					uni.showModal({
						content: '身份证信息识别失败，请重新选择照片或拍照上传。',
						showCancel: false
					})
					my.hideLoading()
					return
				}

				const {
					data
				} = ocrRes
				// console.log(data);
				if (_ocrType === ocrType.face) {

					if (!this.name) {
						this.name = data.name
					}
					if (!this.idNumber) {
						this.idNumber = data.cardNum
					}

					if (this.idNumber !== data.cardNum || this.name !== data.name) {
						uni.showModal({
							content: '身份信息不一致，请核实后重新操作',
							showCancel: false,
							complete: () => {
								this.step = "fillForm"
								this.idCardFrontPicPath = '/static/idcard_upload_front.png'
								this.backPassed = false
								my.hideLoading()
							}
						})
						return
					}
					this.idCardInfoInPage.name = data.name
					this.idCardInfoInPage.sex = data.sex
					this.idCardInfoInPage.nation = data.nation
					this.idCardInfoInPage.birth = data.birth
					this.idCardInfoInPage.address = data.address
					this.idCardInfoInPage.idNumber = data.cardNum
					this.idCardFrontBase64 = imgBase64
					this.frontPassed = true
				} else if (_ocrType === ocrType.emblem) {
					this.idCardInfoInPage.issuingAuthority = data.issuingAuthority
					this.idCardInfoInPage.issuingDate = data.issuingDate
					this.idCardInfoInPage.expiryDate = data.expiryDate
					this.idCardBackBase64 = imgBase64
					this.backPassed = true
				}
				my.hideLoading()
			},
			async checkFacePic() {
				const userSetting = await uni.getSetting()
				// console.log("userSetting", userSetting);
				let camAuth = userSetting[1].authSetting['camera'] ? userSetting[1].authSetting['camera'] : false
				while (!camAuth) {
					await new Promise(async (resolve, reject) => {
						await uni.showModal({
							title: "温馨提示",
							content: "身份核验功能需要使用您的相机，请授权后重新点击核验。",
							success: async (res) => {
								if (res.confirm) {
									await uni.openSetting().then(res => {
										console.log("openSetting", res);
										camAuth = res[1].authSetting['camera'] ? res[1]
											.authSetting['camera'] : false
										resolve()
									})
								}
							}
						})
					})
					setTimeout(() => {}, 200)
				}
				// console.log("进行了相机授权操作");
				this.checkPicTips = "身份核验中...."
				this.showTips = false
				this.isCheckingFace = true

				let succeedImgBase64
				while (!this.faceCheckSucceed) {
					// console.log("开始takePhoto进行人脸检测", this.faceCheckCam);

					const photo = await this.faceCheckCam.takePhoto({
						quality: 'normal',
					})
					// console.log("完成takePhoto", photo.tempImagePath);
					const {
						data: photoBase64
					} = await this.fileSystem.readFile({
						filePath: photo.tempImagePath,
						encoding: "base64"
					})
					// console.log("photoBase64", photoBase64);

					let checkPicRes = await uni.$http.post("/faceVerification/checkPic", {
						hotelId: this.currentHotel.hotelId,
						faceData: photoBase64,
					})
					// console.log("checkPicRes", checkPicRes);
					if (!checkPicRes.data.success) {
						// console.log("checkPicRes.data", checkPicRes.data.msg.split("原因：")[1]);
						this.checkPicTips = checkPicRes.data.msg.split("原因：")[1] + "请将面部完整放入拍摄区域。"
					} else {
						succeedImgBase64 = photoBase64
						this.faceCheckSucceed = checkPicRes.data.success
					}
					setTimeout(() => {}, 100)
				}
				// 进行云极人证比对
				await this.afterSuccessCheckPicAlipay(succeedImgBase64)
			},
			async afterSuccessCheckPicAlipay(photoBase64) {
				if (this.userInfo.skipIdMatching === true) {
					this.checkPicTips = "身份核验成功，将跳转确认订单页面"
					let infoFromIdCard = {}
					this.infoList.forEach(info => {
						infoFromIdCard[info] = that[info]
					})
					let currentCheckinInfo = {
						name: this.name,
						idNumber: this.idNumber,
						phone: this.phone,
						faceData: photoBase64
					}
					currentCheckinInfo = {
						...currentCheckinInfo,
						...infoFromIdCard
					}
					this.checkinInfo.push(currentCheckinInfo)
					this.updateCheckinInfo(this.checkinInfo)

					let currentGuestInfo = {
						name: this.name,
						idNumber: this.idNumber,
					}

					let i
					for (i = 0; i < this.guestInfo.length; i++) {
						if (this.guestInfo[i].idNumber === this.idNumber) {
							this.guestInfo[i] = {
								...currentGuestInfo,
								...infoFromIdCard
							}
							this.updateGuestInfo(this.guestInfo)
						}
					}
					if (i === this.guestInfo.length) {
						this.guestInfo.push({
							...currentGuestInfo,
							...infoFromIdCard
						})
						this.updateGuestInfo(this.guestInfo)
					}

					setTimeout(() => uni.reLaunch({
						url: '/subpkg_checkin/confirmOrder/confirmOrder'
					}), 1000);
				} else {
					uni.showLoading({
						title: '正在身份核验，请稍后',
					});
					let yunjiFaceCheckInfo = {
						idNo: this.idNumber,
						name: this.name,
						image: photoBase64,
					};
					let checkRes = await uni.$http.post(
						'/faceVerification/yunjiVerification',
						yunjiFaceCheckInfo
					);

					if (checkRes.data.success) {
						let infoFromIdCard = {}
						this.infoList.forEach(info => {
							infoFromIdCard[info] = this.idCardInfoInPage[info]
						})
						let currentCheckinInfo = {
							name: this.name,
							idNumber: this.idNumber,
							faceData: photoBase64,
							phone: this.phone,
							...infoFromIdCard
						}
						//更新local storage 中的入住信息
						let checkinInfoToUpdate = this.checkinInfo
						checkinInfoToUpdate.push(currentCheckinInfo)
						this.updateCheckinInfo(checkinInfoToUpdate)
						//更新local storage 中的身份证信息
						let idCardInfoToUpdate = this.idCardInfo
						idCardInfoToUpdate.push(this.idCardInfoInPage)
						this.updateIdCardInfo(idCardInfoToUpdate)
						//如果上传过照片则更新服务器中的身份证信息
						if (this.frontPassed && this.backPassed) {
							uni.$http.post('/idCardInfo', {
								...this.idCardInfoInPage,
								birthday: this.idCardInfoInPage.birth,
								idCardFrontBase64: this.idCardFrontBase64,
								idCardBackBase64: this.idCardBackBase64
							})
						}
						if (this.isMainCustomer) {
							//如果是主入住人，且当前账号姓名和身份证号为空，则更新账号信息为主入住人信息
							if (!this.userInfo.name || !this.userInfo.idNumber) {
								this.userInfo.name = this.name
								this.userInfo.idNumber = this.idNumber
								this.updateUserInfo(this.userInfo)
								uni.$http.put(`/userInfo/${this.userInfo.id}`, this.userInfo)
							}
							//更新订单预定人信息为主入住人信息
							let orderToUpdate = this.order
							orderToUpdate.name = this.name
							orderToUpdate.phone = this.phone
							this.updateOrder(orderToUpdate)
						}
						uni.hideLoading();
						uni.$showMsg('身份核验通过！')
						setTimeout(() => uni.reLaunch({
							url: '/subpkg_checkin/confirmOrder/confirmOrder'
						}), 1000)
					} else {
						uni.hideLoading()
						this.isCheckingFace = false
						this.checkPicTips = "身份核验失败，请重新进行"
					}
				}
			},
			// #endif

			// #ifdef MP-WEIXIN
			start() {
				console.log('调用start');
				this.idCardVKSession.destroy()
				if (!this.duringCameraAuth && this.isVKSupport) {
					this.getCameraAuth()
				}
			},
			getCameraAuth() {
				console.log('getCameraAuth')
				this.duringCameraAuth = true
				let that = this
				wx.getSetting({
					success: (res) => {
						console.log('getSetting, res : ')
						console.log(res)

						if (!res.authSetting['scope.camera']) {
							wx.authorize({
								scope: 'scope.camera',
								success(res) {
									console.log('authorize success, res : ')
									console.log(res)
									that.showcamera = true
								},
								fail: (res) => {
									console.log('authorize fail, res : ')
									console.log(res)
									wx.showModal({
										title: '提示',
										content: '尚未进行授权，功能将无法使用',
										cancelText: '取消',
										confirmText: '授权',
										success(res) {
											console.log(res);
											if (res.confirm) {
												wx.openSetting({
													//这里的方法是调到一个添加权限的页面，这里可以测试在拒绝授权的情况下设置中是否存在相机选项
													success: (res) => {
														if (!res.authSetting[
																'scope.camera'
															]) {
															this.getCameraAuth()
														} else {
															that.showcamera =
																true
														}
													},
													fail: function() {
														console.log(
															'相机授权设置失败');
													},
												});
											} else if (res.cancel) {
												console.log('用户点击取消');
												wx.showToast({
													title: '您已取消授权',
													icon: 'error',
													duration: 1000,
												});
												setTimeout(function() {
													wx.navigateBack();
												}, 1000);
											}
										}
									})
								}
							})
						} else {
							that.showcamera = true
						}
						that.initData()
					}
				})
				this.duringCameraAuth = false
			},
			//visionkit人脸必须函数
			async detectFace(frame) {
				console.log('frame', frame.data);
				this.faceVKSession.detectFace({
					frameBuffer: frame.data,
					width: frame.width,
					height: frame.height,
					scoreThreshold: 0.8,
					sourceType: 0,
					modelMode: 1,
				});
			},
			//初始化相机引擎
			initData() {
				let that = this;
				console.log('before createCameraContext')
				//使用visionkit
				that.cameraEngine = wx.createCameraContext();
				console.log('before createCameraContext')
				let count = 0;
				//初始化相机
				const listener = that.cameraEngine.onCameraFrame((frame) => {
					count++;
					//每十帧分析一次
					if (count === 10) {
						this.detectFace(frame);
						count = 0;
					}
				});
				//开始监听数据帧
				listener.start();
				//创建VK对象
				that.faceVKSession = wx.createVKSession({
					version: 'v1',
					track: {
						plane: {
							mode: 1,
						},
						face: {
							mode: 2,
						},
					},
				});
				//启动VK对象
				that.faceVKSession.start((errno) => {
					console.log('faceVKSession.start errno', errno);
					if (errno) {
						wx.showModal({
							title: '提示',
							content: '网络错误,请退出后重试',
							showCancel: false,
							confirmText: '确定',
							success(res) {
								console.log(res);
								if (res.confirm) {
									wx.navigateBack();
								}
							},
						});
						return
					}

					console.log('faceVKSession start')
					that.faceVKSession.on('updateAnchors', (anchors) => {
						console.log('anchors', anchors);
						console.log('anchors.length', anchors.length);
						anchors.forEach((anchor) => {
							console.log('anchor.points', anchor.points);
							console.log('anchor.origin', anchor.origin);
							console.log('anchor.size', anchor.size);
							console.log('anchor.angle', anchor.angle);
							console.log('anchor', anchor.confidence);
							if (anchors.length > 1) {
								that.tipsText = '请保证只有一个人';
							} else {
								const {
									pitch,
									roll,
									yaw
								} = anchor.angle;
								const standard = 0.3;

								if (
									Math.abs(pitch) >= standard ||
									Math.abs(roll) >= standard ||
									Math.abs(yaw) >= standard
								) {
									that.tipsText = '请平视摄像头';
								} else if (
									anchor.origin.x < 0.15 ||
									anchor.origin.x > 0.3 ||
									anchor.origin.y < 0.2 ||
									anchor.origin.y > 0.45
								) {
									this.tipsText = '请将人脸对准中心位置';
								} else if (
									anchor.confidence[0] <= 0.8 ||
									anchor.confidence[1] <= 0.8 ||
									anchor.confidence[2] <= 0.8 ||
									anchor.confidence[3] <= 0.8 ||
									anchor.confidence[4] <= 0.8
								) {
									that.tipsText = '请勿遮挡五官';
								} else {
									listener.stop();
									that.tipsText = '即将拍照，请保持！';
									setTimeout(function() {
										that.handleTakePhotoClick();
									}, 1000);
									return;
								}
							}
						});
					});

				});
			},
			// 拍照
			handleTakePhotoClick() {
				this.tipsText = '';
				uni.showLoading({
					title: '正在身份核验，请稍后',
				});
				this.cameraEngine.takePhoto({
					quality: 'normal',
					success: ({
						tempImagePath
					}) => {
						let mybase64 = wx
							.getFileSystemManager()
							.readFileSync(tempImagePath, 'base64');
						this.afterRead(mybase64);
						this.showcamera = false
					},
				});
			},
			//上传
			async afterRead(mybase64) {
				let that = this;
				let res = await uni.$http.post('/user/faceCheckAll', {
					hotelId: this.currentHotel.hotelId,
					imageBase64: mybase64,
					name: this.name,
					idNumber: this.idNumber
				})
				if (res.data.code === 200 && res.data.success === true) {
					let infoFromIdCard = {}
					this.infoList.forEach(info => {
						infoFromIdCard[info] = this.idCardInfoInPage[info]
					})
					let currentCheckinInfo = {
						name: this.name,
						idNumber: this.idNumber,
						faceData: mybase64,
						phone: this.phone,
						...infoFromIdCard
					}
					//更新local storage 中的入住信息
					let checkinInfoToUpdate = this.checkinInfo
					checkinInfoToUpdate.push(currentCheckinInfo)
					this.updateCheckinInfo(checkinInfoToUpdate)
					//更新local storage 中的身份证信息
					let idCardInfoToUpdate = this.idCardInfo
					idCardInfoToUpdate.push(this.idCardInfoInPage)
					this.updateIdCardInfo(idCardInfoToUpdate)
					//如果上传过照片则更新服务器中的身份证信息
					if (this.idCardFrontDetectInfo.detected && this.idCardBackDetectInfo
						.detected) {
						uni.$http.post('/user/idCardInfo/add', {
							...this.idCardInfoInPage,
							birthday: this.idCardInfoInPage.birth,
							idCardFrontBase64: this.idCardFrontPicPath.split(',')[1],
							idCardBackBase64: this.idCardBackPicPath.split(',')[1]
						})
					}
					if (this.isMainCustomer) {
						//如果是主入住人，且当前账号姓名和身份证号为空，则更新账号信息为主入住人信息
						if (!this.userInfo.name || !this.userInfo.idNumber) {
							this.userInfo.name = this.name
							this.userInfo.idNumber = this.idNumber
							this.updateUserInfo(this.userInfo)
							uni.$http.put(`/user`, {
								name: this.name,
								idNumber: this.idNumber
							})
						}
						//更新订单预定人信息为主入住人信息
						let orderToUpdate = this.order
						orderToUpdate.name = this.name
						orderToUpdate.phone = this.phone
						this.updateOrder(orderToUpdate)
					}
					uni.hideLoading();
					uni.$showMsg('身份核验通过！')
					setTimeout(() => uni.reLaunch({
						url: '/subpkg_checkin/confirmOrder/confirmOrder'
					}), 1000)
				} else {
					uni.hideLoading()
					uni.showModal({
						content: `身份核验失败,${res.data.msg},请重试`,
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.initData();
							}
						},
					});
				}
			},
			// #endif
		},
		async onLoad() {
			let pages = getCurrentPages()
			let beforePage = pages[pages.length - 2]
			//不是从确定订单页面点击添加顾客跳转过来，设置信息为当前账户的信息，清空入住信息
			if (beforePage.route !== 'subpkg_checkin/confirmOrder/confirmOrder') {
				this.name = this.userInfo.name
				this.idNumber = this.userInfo.idNumber
				this.phone = this.userInfo.phone
				this.updateCheckinInfo([])
				this.isMainCustomer = true
			} else {
				this.isMainCustomer = false
			}
			//是主入住人且姓名和身份证号为空，判断为新用户，直接跳转至上传身份证照片页面
			if (this.isMainCustomer && (!this.userInfo.name || !this.userInfo.idNumber)) {
				this.step = 'uploadCard'
			}
			// #ifdef MP-WEIXIN
			this.isVKSupport = wx.isVKSupport('v1')
			if (!this.isVKSupport) {
				uni.showModal({
					content: '微信版本过低，请升级至最新版本',
					showCancel: false,
				})
			}
			// #endif

			// #ifdef MP-ALIPAY
			let alipaySystemInfo = await uni.getSystemInfo()
			this.screenWidth = alipaySystemInfo[1].screen.width
			// 设置身份证拍照相机显示区域距边界40px
			this.cardCamWidth = alipaySystemInfo[1].screen.width - 40 * 2
			this.cardCamHigh = Number(865 / 548 * this.cardCamWidth).toFixed(0)
			const menuButton = await uni.getMenuButtonBoundingClientRect()
			// 身份证拍照相机top距navBar底部10px
			this.cardCamTopGap = menuButton.top + menuButton.height + 8 + 10

			const factor = this.screenWidth / 750
			const tipsHight = 106 * factor
			this.faceCheckCamTopGap = menuButton.top + menuButton.height + 8 + tipsHight

			this.fileSystem = my.getFileSystemManager();
			// #endif
		},
		// #ifdef MP-WEIXIN
		onShow() {
			this.showAddGuest = true
			this.pageTitle = '身份信息录入'
		},
		onReady() {
			this.initIdCardVKSession()
		},
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/quickLogin/quickLogin',
				imageUrl: '/static/logo.png'
			}
		},
		// #endif
	}
</script>

<style lang="scss">
	.btn-container {
		position: fixed;
		bottom: 90rpx;
		left: 30rpx;
		right: 30rpx;

		.u-button__text {
			font-size: 30rpx !important;
		}
	}

	page {
		background: #EFEFF4;

		.container {
			.step-zero {
				.tips {
					margin: 30rpx;
				}

				.u-form {
					margin-top: 10rpx;
					background-color: #FFFFFF;

					.u-form-item {
						line-height: 50rpx;

						.u-form-item__body {
							margin-left: 32rpx;
							border-bottom: 2rpx solid #E5E5E5;

							.u-form-item__body__right__content__slot {
								display: flex;
								flex-direction: row;
								justify-content: space-between;
								margin-right: 20rpx;
								align-items: center;
							}
						}

						.u-form-item__body__left__content__label {
							font-size: 30rpx;
						}
					}
				}
			}

			.step-one {
				.tips {
					margin: 30rpx;
				}

				.upload-container {
					width: 500rpx;
					margin: 30rpx auto;

					/* #ifdef MP-WEIXIN */
					.u-upload {
						image {
							width: 500rpx;
							height: 350rpx;
							margin: 0 auto;
						}
					}

					/* #endif */

					/* #ifdef MP-ALIPAY */
					image {
						width: 500rpx;
						height: 350rpx;
						margin: 0 auto;
					}

					/* #endif */
				}
			}

			.step-two {
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;

				.face-area {
					display: flex;
					flex-direction: column;
					background-color: #FFFFFF;
					border-radius: 50rpx;
					overflow: hidden;

					.face-area--tips {
						display: flex;
						padding: 10rpx 20rpx;
						height: 60rpx;
						align-items: flex-end;

						.face-area--tips--title {
							margin: 10rpx;
						}

						.face-area--tips--context {
							margin: 10rpx;
						}
					}

					.face-area--line {
						margin-left: 40rpx;
						margin-bottom: 20rpx;
						width: 30rpx;
						border-bottom: solid 6rpx #9e97c3;
					}

					/* #ifdef MP-WEIXIN */
					.camera-container {
						width: 80%;
						height: 80vw;
						margin: 0 auto;
						margin-bottom: 30rpx;

						.camera {
							width: 100%;
							height: 80vw;
							margin: 0 auto;
							margin-bottom: 30rpx;
							border: 2rpx solid black;
							border-radius: 50%;
							// box-sizing: border-box;
						}
					}

					/* #endif */

					/* #ifdef MP-ALIPAY */
					.camera-container {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 30rpx;

						cover-image {
							margin: 0;
							padding: 0;
							position: absolute;
						}
					}

					.check-pic-result {
						width: 100%;
						padding: 10rpx 20rpx;
						display: flex;
						justify-content: center;
						box-sizing: border-box;
						color: red;
					}

					/* #endif */
				}

				.precautions {
					overflow: hidden;

					.precautions--tips {
						display: flex;
						padding: 10rpx 20rpx;
						align-items: flex-end;

						.precautions--tips--title {
							margin: 10rpx;
						}

						.precautions--tips--context {
							margin: 10rpx;
						}
					}

					.precautions--line {
						margin-left: 40rpx;
						margin-bottom: 20rpx;
						width: 30rpx;
						border-bottom: solid 6rpx #9e97c3;
					}

					.precautions--context {
						margin: 0 20rpx;
						margin-bottom: 20rpx;
					}

					.img-list {
						display: flex;
						justify-content: space-around;

						.img-list--item {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 20%;

							.img {
								display: flex;
								flex-direction: row;
								border-radius: 20rpx;
								background-color: #dcdce9;
								width: 100%;
								height: 140rpx;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}

				/* #ifdef MP-ALIPAY */
				.btn {
					margin: 20rpx;
				}

				/* #endif */
			}

			/* #ifdef MP-ALIPAY */
			.shoot-id-card {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				cover-image,
				camera {
					margin: 0;
					padding: 0;
					position: absolute;
				}

				.camera-btn {
					width: 100%;
					height: 200rpx;
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					bottom: 50rpx;
				}
			}

			/* #endif */
		}
	}
</style>