You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="logo">
|
|
<image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
|
|
</view>
|
|
<view class="container">
|
|
<view style="color:#626262;font-size:40rpx">人脸识别</view>
|
|
<camera
|
|
device-position="front"
|
|
flash="off"
|
|
binderror="error"
|
|
mode="normal"
|
|
style="width: 600rpx; height: 600rpx"
|
|
ref="camera"
|
|
>
|
|
<cover-image src="@/static/image/camera.png" style="width: 600rpx; height: 600rpx"></cover-image>
|
|
</camera>
|
|
|
|
<view class="time">
|
|
<view class="dot"></view>
|
|
<u-count-down :time="5 * 1000" format="ss" ref="countDown" v-if="isAnimate"></u-count-down>
|
|
</view>
|
|
<view style="width:400rpx;">
|
|
<u-button
|
|
:text="tips"
|
|
shape="circle"
|
|
color="#76C458"
|
|
@click="startRecord"
|
|
:disabled="isAnimate"
|
|
></u-button>
|
|
<view style="margin-top: 20rpx;">
|
|
<u-button
|
|
text="确认"
|
|
shape="circle"
|
|
color="#76C458"
|
|
@click="back"
|
|
:disabled="isEnd||tips !== '⚪录制完成'"
|
|
></u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
isAnimate: false,
|
|
tempVideoPath: "",
|
|
tips: "⚪录制",
|
|
isEnd: true
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.ctx = uni.createCameraContext();
|
|
this.tips = "⚪录制";
|
|
},
|
|
methods: {
|
|
startRecord() {
|
|
this.ctx.startRecord({
|
|
success: res => {
|
|
this.isAnimate = true;
|
|
this.tips = "⚪录制中";
|
|
setTimeout(() => {
|
|
this.ctx.stopRecord({
|
|
success: res => {
|
|
console.log("自动停止录像", res);
|
|
this.isAnimate = false;
|
|
this.$common.msgToast("录制完成");
|
|
this.tempVideoPath = res.tempVideoPath;
|
|
this.tips = "⚪录制完成";
|
|
this.isEnd = false;
|
|
uni.setStorageSync("tempVideoPath", res.tempVideoPath);
|
|
}
|
|
});
|
|
}, 5000);
|
|
}
|
|
});
|
|
},
|
|
// stopRecord() {
|
|
// // 手动停止录制
|
|
// this.ctx.stopRecord({
|
|
// success: res => {
|
|
// console.log("手动停止录像", res);
|
|
// this.tempVideoPath = res.tempVideoPath;
|
|
// this.isAnimate = false;
|
|
// },
|
|
// fail: function(error) {
|
|
// console.log(error);
|
|
// this.isAnimate = false;
|
|
// uni.showModal({
|
|
// content: "停止录像失败",
|
|
// showCancel: false
|
|
// });
|
|
// }
|
|
// });
|
|
// },
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 2
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
|
|
.logo {
|
|
height: 200rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 124rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: calc(100vh - 200upx);
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
|
padding: 62rpx 32rpx;
|
|
|
|
.time {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.dot {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
background: red;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |