<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
						
						
						
					}
				});
			},
			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>
