rongzidanbao-ui/work/pages/prove/face.vue

<template>
	<view class="rzbox">
		<view class="facea">
			<image :src="faceimg" class="faceimg"></image>
			<view class="faceb">
				<view class="factip">请保持不动</view>
			</view>
			
		</view>
		<view class="facetip">面容认证仅能由<text>林涵宇</text>本人完成</view>
		<view class="flexcc">
			<view class="flexccc facetips">
				<image :src="ftipa"></image>
				<view>避免遮挡</view>
			</view>
			<view class="flexccc facetips">
				<image :src="ftipb"></image>
				<view>光线充足</view>
			</view>
			<view class="flexccc facetips">
				<image :src="ftipc"></image>
				<view>正对手机</view>
			</view>
		</view>
		<view class="phobox">
			<view>请把脸移入框内并保持不动</view>
			<image :src="phoimg"></image>
		</view>
		<view class="rzbtn" @click="onScanFace">提交</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl
	import {uploadmore} from '@/utils/common.js'
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {requestAndroidPermission} from '@/utils/permission.js'
	
	// #ifdef APP-PLUS
	const lyBDFaceAuth = uni.requireNativePlugin('longyoung-BDFaceAuth'); //android
	// #endif
	export default{
		components:{},
		data(){
			return{
				faceimg:require('@/work/static/images/prove/faceimg.png'),
				phoimg:require('@/work/static/images/prove/phoimg.png'),
				ftipa:require('@/work/static/images/prove/ftipa.png'),
				ftipb:require('@/work/static/images/prove/ftipb.png'),
				ftipc:require('@/work/static/images/prove/ftipc.png'),
				user:{
					
				},
				licenseIDStr: 'rongzidanbao-face-android',
				items: [{
						value: 'Eye',
						name: '眨眨眼',
						checked: 'true'
					},
					{
						value: 'Mouth',
						name: '张张嘴',
						checked: 'true'
					},
					{
						value: 'HeadLeft',
						name: '向左转头',
						checked: 'true'
					},
					{
						value: 'HeadRight',
						name: '向右转头',
						checked: 'true'
					},
					{
						value: 'HeadLeftOrRight',
						name: '左右摇头'
					},
					{
						value: 'HeadUp',
						name: '缓慢抬头'
					},
					{
						value: 'HeadDown',
						name: '缓慢低头'
					}
				],
				isLivenessRandom: 0,
				isSound: 1,
				txtColor:'#3987FD',
				bgColor:'#2F2F33',
				roundColor:'#3987FD',
				
				resultStr: "",
				imgBase64Str: ""
			}
		},
		onLoad() {
			//权限
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == "ios") {
				// this.judgeIosPermission('camera');//相机
				this.licenseIDStr = "longyoung-face-ios";
			} else if (uni.getSystemInfoSync().platform == "android") {
				this.requestAndroidPermission('android.permission.CAMERA'); //相机
				// this.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE');//外部存储(含相册)读取权限
				// this.requestAndroidPermission('android.permission.WRITE_EXTERNAL_STORAGE');//外部存储(含相册)写入权限
				// this.licenseIDStr = "longyoung-face-android";
				this.licenseIDStr = "rongzidanbao-face-android";
			}
			// #endif
		},
		methods:{
			checkPermi, checkRole,
			getSumit(){
				// this.$tab.navigateTo("/work/pages/prove/addqy")
			},
			//刷脸
			onScanFace() {
				console.error("tagg.onScanFace");
			
				self = this;
			
				var ary = [];
				for (var i = 0; i < this.items.length; i++) {
					var item = this.items[i];
					if (item.checked) {
						ary[i] = item.value;
					}
				}
			
				if (uni.getSystemInfoSync().platform == "android") {//安卓
				console.log(lyBDFaceAuth,1)
					lyBDFaceAuth.scanFace({
						licenseID: this.licenseIDStr,
						actionAry: ["Eye", "Mouth",], //不传无动作
						isLivenessRandom: this.isLivenessRandom, //不传默认有序，0有序，1随机
						isSound: this.isSound, //不传默认有声音，0无声，1有声
						txtColor:this.txtColor,//文字颜色
						bgColor:this.bgColor,//背景颜色
						roundColor:this.roundColor//圆的颜色
					}, result => {
						console.log('file://' + result.imgPath);
			
						self.resultStr = "返回结果：\n" + JSON.stringify(result);
			
						//图片上传服务器
						uni.uploadFile({
							url: 'http://api.longyoung.com/api/open/common/uploadImgTemp', //图片上传地址
							filePath: 'file://' + result.imgPath, //图片本地路径，上传服务器需要加这个头'file://'
							method: 'post',
							name: 'imgFile', //上传图片参数名
							success: (res) => {
								var data = res.data;
							}
						});
			
						//***有些同学，后台强烈要求传base64，下面是图片转base64的方法，没此需求的可以无视。
						var bitmapT = new plus.nativeObj.Bitmap("test"); //test标识随便取
						// 从本地加载Bitmap图片
						bitmapT.load(result.imgPath, function() {
							console.log('加载图片成功');
							var base4 = bitmapT.toBase64Data();
							console.log('lygg.base64=' + base4);
							self.resultStr = self.resultStr + "\n======base64字符串（太长，截取前100字符）：\n" + base4.substring(0, 100);
							self.imgBase64Str = base4.replace(/[\r\n]/g, ""); //显示图片
						}, function(e) {
							console.log('加载图片失败：' + JSON.stringify(e));
						});
						//***有些同学，后台强烈要求传base64，下面是图片转base64的方法，没此需求的可以无视。
			
					});
				} else if (uni.getSystemInfoSync().platform == "ios") {//苹果
					lyBDFaceAuthIOS.scanFace({
						licenseID: this.licenseIDStr,
						actionAry: ary, //不传无动作
						isLivenessRandom: this.isLivenessRandom, //不传默认有序，0有序，1随机
						isSound: this.isSound, //不传默认有声音，0无声，1有声
					}, result => {
						console.log('result=' + result);
						self.resultStr = "返回结果（太长，截取前100字符）：\n" + JSON.stringify(result).substring(0, 100);
						self.resultStr = self.resultStr + "\n======base64字符串（太长，截取前100字符）：\n" + result.bestImgBase64.substring(0, 100);
						self.imgBase64Str = "data:image/png;base64," + result.bestImgBase64.replace(/[\r\n]/g, ""); //显示图片
					});
				}
			
			},
			//权限
			async requestAndroidPermission(permisionID) {
				var result = await requestAndroidPermission(permisionID);
				var strStatus;
				console.log(result)
				if (result == 1) {
					strStatus = "已获得授权";
				} else if (result == 0) {
					strStatus = "未获得授权";
					uni.showToast({
						title: "请打开权限，否则无法使用",
						icon: 'none'
					});
				} else {
					strStatus = "被永久拒绝权限";
					permijs.gotoAppPermissionSetting();
					uni.showToast({
						title: '请打开权限，否则无法使用',
						icon: 'none'
					});
				}
				console.log("lygg.strStatus=" + strStatus + ",result=" + result);
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background:#ffffff;
}
.rzbox{padding: 78rpx 34rpx 76rpx;}
// 面容
.facea{width: 100%;margin:0 auto 16rpx;position: relative;width: 450rpx;height: 450rpx;
	image{width: 450rpx;height: 450rpx;display:block;margin: 0 auto;}
	.faceb{
		width: 376rpx;height: 376rpx;border-radius: 50%;position: absolute;top: 36rpx;left: 36rpx;border-radius: 50%;background-color: red;
		overflow: hidden;
		.factip{font-weight: bold;text-align: center;position: absolute;left: 0;top: 0;right: 0;height: 72rpx;line-height: 72rpx;
		font-size: 24rpx;color: #FFFFFF;background-color: rgba(0, 0, 0, 0.5);}
	}
	
}
.facetip{text-align: center;font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 78rpx;
	text{color: $com-cd3;font-weight: 500;padding: 0 4rpx;}
}
.facetips{width: 214rpx;
	image{width: 100rpx;height: 100rpx;margin-bottom: 14rpx;}
	view{font-weight: 500;font-size: 24rpx;color: #B0B0B0;}
}
.phobox{display: flex;flex-direction: column;align-items: center;margin-top: 200rpx;margin-bottom: 92rpx;
	view{font-weight: 500;font-size: 26rpx;color: #00A9F0;margin-bottom: 34rpx;}
	image{width: 72rpx;height: 116rpx;}
}
</style>