<template> <view class="content" v-if="showBody"> <view class="bg"> <image src="../static/vlog/icon/camera.png"></image> </view> <camera class="camera" device-position="front" flash="off" @error="error"></camera> <!-- <camera class="camera" device-position="front" flash="off" @error="error" @initdone="initdone"></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"> </view> <view class="hint1"> <view class="item"> <view class=""> <image src="../static/vlog/icon/icon_lightisenough.png"></image> </view> <view>光线充足</view> </view> <view class="item"> <view class=""> <image src="../static/vlog/icon/icon_isthelens.png"></image> </view> <view>正对镜头</view> </view> <view class="item"> <view class=""> <image src="../static/vlog/icon/icon_openface.png"></image> </view> <view>不遮挡面部</view> </view> </view> <!-- <u-button type="success" size="medium" @click="takePhoto">开始识别</u-button> --> </view> <view v-else style="padding: 100rpx;text-align: center;font-size: 36rpx;"> 升级中... </view> </template> <script> export default { data() { return { src: '', //照片 text: 3, //倒计时 show: false, //摄像头倒计时文本 base64: '', //照片base64 showBody:false } }, // onLoad() { //代替 vue 里面的 created // this.initdone() // }, onReady() { //代替 vue 里面的 mounted this.loadIcon() }, methods: { //---加载图标 loadIcon(){ let data={ merchantType:0,//商户类型,其他 } this.$request('scenic/merchantExtendProject/loadList',data).then((res)=>{ if(res.code=='00'){ let iconList=res.data||[] let list=[] iconList.forEach(item=>{ if(item.projectStatus==0){ list.push(item) } }) if(list.length>6){ this.showBody=true this.initdone() } } }) }, query() { //人脸查询 uni.showLoading({ title: '人脸识别中' }) let data = { caseId: 'a124Jj6IYiSzCjVV', //景区id userId: uni.getStorageSync('openid'), //用户id faceImgData: this.base64, //人脸图片base64编码 optimalFramesNum: 3, //最优帧数量(默认填3就行) enableImgBeauty: true //默认填true } this.$request('distribution/vlog/createVlog',data).then(res => {//创建任务 var that=this if (res.code === '00') { uni.showModal({ title: '提示', content: '视频合成中,请在1~2分钟后在我的VLOG视频集中查看', showCancel:false, success() { uni.navigateTo({ url:'../vlogIndex/vlogIndex' }) } }) }else{ uni.showModal({ title: '提示', content: '请先在打卡点录制素材', showCancel:false, success() { uni.navigateTo({ url:'../vlogIndex/vlogIndex' }) } }) } }) }, takePhoto() { //扫脸 this.buttonShow = false this.src = '' this.text = 3 this.show = true 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 uni.getFileSystemManager().readFile({ //图片转base64 filePath: res.tempImagePath, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 this.base64 = 'data:image/jpeg;base64,' + res.data this.query() } }) } }) } }, 1000) }, initdone(){//相机初始化完成自动开始拍照 this.takePhoto() }, error(e) { //相机报错 uni.showModal({ title: '提示', content: e.detail, showCancel:false }) }, } } </script> <style lang="scss" scoped> .content { padding: 0 20rpx; background-color: #ffffff; height: 100%; width: 100%; text-align: center; .bg{ width: 650rpx; height: 650rpx; position: absolute; top: 80rpx; left: 50%; transform: translate(-50%); z-index: 5; image{ width: 100%; height: 100%; } } .camera { width: 550rpx; height: 550rpx; border-radius: 50%; position: absolute; top: 140rpx; 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; z-index: 3; view { margin: 100rpx 0; } text { font-size: 70rpx; } } .photo { width: 550rpx; height: 550rpx; border-radius: 50%; position: absolute; top: 140rpx; left: 50%; transform: translate(-50%); } .hint { color: red; padding-top: 680rpx; } .hint1 { height: 300rpx; display: flex; justify-content: space-between; padding-top: 50rpx; padding-left: 80rpx; padding-right: 80rpx; .item { width: 30%; text-align: center; } image { height: 60rpx; width: 60rpx; } } } </style>