103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template>
|
|
<view>
|
|
<camera device-position="front" flash="off" @error="error" style="" class="camera" v-if="!src"></camera>
|
|
<image mode="widthFix" :src="src" class="camera" v-else></image>
|
|
|
|
<div class="btn-box">
|
|
<div v-if="src" @click="src=null" class="reset-btn">重拍</div>
|
|
<div class="btn" @click="takePhoto">
|
|
{{src ? '确认打卡':'拍照'}}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import {mapMutations} from 'vuex';
|
|
export default {
|
|
data() {
|
|
return {
|
|
src:''
|
|
}
|
|
},
|
|
methods: {
|
|
// ...mapMutations(['setPhoto']),
|
|
error (error){
|
|
console.log(error)
|
|
},
|
|
takePhoto(){
|
|
let _this= this
|
|
if(this.src){
|
|
this.backPage()
|
|
return
|
|
}
|
|
const ctx = uni.createCameraContext();
|
|
ctx.takePhoto({
|
|
quality: 'low',
|
|
success: (res) => {
|
|
this.src = res.tempImagePath
|
|
uni.$emit('addUserPhoto',res.tempImagePath)
|
|
uni.navigateBack({
|
|
delta:1,
|
|
|
|
})
|
|
}
|
|
});
|
|
},
|
|
// backPage(){
|
|
// let _this= this
|
|
// uni.getFileSystemManager().readFile({
|
|
// filePath: this.src, //选择图片返回的相对路径
|
|
// encoding: 'base64', //编码格式
|
|
// success: res => { //
|
|
// let base64 = res.data.replace(/\+/ig,'%2B') //不加上这串字符，在页面无法显示的哦
|
|
|
|
// _this.setPhoto(base64)
|
|
|
|
// uni.navigateBack({
|
|
// delta:1,
|
|
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.camera {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: 750rpx;
|
|
}
|
|
.btn-box {
|
|
position: relative;
|
|
}
|
|
.reset-btn {
|
|
position: absolute;
|
|
left: 0rpx;
|
|
top: 16rpx;
|
|
width: 120rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
}
|
|
.btn {
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 200rpx;
|
|
/* padding-top: 60rpx; */
|
|
background: linear-gradient(#65bef9 0%, #50a0e8 100%);
|
|
box-sizing: border-box;
|
|
margin-top: 40rpx;
|
|
}
|
|
</style>
|