<template>
	<view class="content">
		<view class="d1"></view>
		<view class="d2"></view>
		<camera class="camera" device-position="front" flash="off" @error="error"></camera>
		<view class="surface" v-show="show">
			<view>请正对镜头</view>
			<text>{{text}}</text>
		</view>
		<image class="photo" v-show="src" :src="src"></image>
		<view class="hint">
			<u-icon name="error-circle"></u-icon>
			 没有检测到人脸,请正对拍摄框拍摄哦~
		</view>
		<view class="hint1">
			<view class="item">
				<view class="">
					<image src="../../../static/img/vlog/icon/sun.png"></image>
				</view>
				<view>光线充足</view>
			</view>
			<view class="item">
				<view class="">
					
				<image src="../../../static/img/vlog/icon/inface.png"></image>
				</view>
				<view>正对镜头</view>
			</view>
			<view class="item">
				<view class="">
					<image src="../../../static/img/vlog/icon/keepout.png"></image>
				</view>
				<view>不遮挡面部</view>
			</view>
		</view>
		<u-button type="success" size="medium" @click="scanFace" >重新拍摄</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src:"",//照片
				text:3,//倒计时
				show:true
			}
		},
		onLoad(){//代替 vue 里面的 created
		},
		onReady() {//代替 vue 里面的 mounted
			this.takePhoto()
		},
		methods: {
			takePhoto(){//扫脸
				var test=setInterval(()=>{
					this.text=this.text-1;
					if(this.text===-1){
						clearTimeout(test)
						this.show=false
						const ctx = uni.createCameraContext();
						ctx.takePhoto({
						    quality: 'high',
						    success: (res) => {
						        this.src = res.tempImagePath
						    }
						});
					}
				},1000)
			},
			error(e) {
				console.log(e.detail);
			},
			scanFace(){//重新扫脸
				this.src="";
				this.text=3;
				this.show=true;
				this.takePhoto()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{padding: 0 20rpx;height: 100%;width: 100%;text-align: center;
		.d1{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #CEE5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-40%)}
		.d2{width: 500rpx;height: 500rpx;border-radius: 50%;background-color: #ECF5FF;position: absolute;top: 150rpx;left: 50%;transform: translate(-60%)}
		.camera{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)}
		.surface{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%);text-align: center;font-size: 40rpx;color: #fff;
		view{margin: 100rpx 0;}
		text{font-size: 70rpx;}
		}
		.photo{width: 500rpx;height: 500rpx;border-radius: 50%;position: absolute;top: 150rpx;left: 50%;transform: translate(-50%)}
		.hint{color: red;padding-top: 680rpx;}
		.hint1{height: 300rpx;display: flex;justify-content: space-between;padding-top: 50rpx;
			.item{width: 30%;text-align: center;}
			image{height: 60rpx;width: 60rpx;}
		}
	}
</style>
