CommunityApp/pages/my-camera/my-camera.vue

<template>
	<view class="warp">
		<view class="center">
			<image class="content" v-if="src!=null" :src="src" ></image>
			<camera class="content" v-else :device-position="position" flash="auto" @error="error" >
				<cover-image :class="type==1?'coverImg-type1':'coverImg-type0'"  :src="type==1?'../../static/camera/card.png':'https://szsq.nxzhsq.cn/community/miniofile/xlyq/face2.png'"></cover-image>
			</camera>
		</view>
		<view class="bottom">
			<!-- 取消拍摄 -->
			<image class="cancel"  @click="cancel" src="../../static/camera/back.png" ></image>
			<!-- 确认选择照片 -->
			<image class="confirm" @click="confirm" v-if="src!=null"  src="../../static/camera/confirm1.png" ></image>
			<!-- 确认拍摄 -->
			<image class="confirm" v-else @click="takePhoto" src="../../static/camera/takephoto.png" ></image>
			<!-- 切换摄像头 -->
			<image class="change" v-if="src==null"   @click="change" src="../../static/camera/change.png"  ></image>
			<!-- 重新拍摄 -->
			<image class="change" v-else  @click="rephoto" src="../../static/camera/rephoto.png"  ></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//0 人脸 1 证件
				type:0,
				
				flash:'off',
				position:'front',
				src: null
			}
		},
		onLoad(options) {
			this.type=options.type || 0
		},
		methods: {
			//确认
			confirm(){
				console.log(this.src)
				/* 返回调用页面并把图片URL传递过去 */
				let that=this
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; 
				prevPage.setData({
					"image":that.src
				})
				uni.navigateBack();
			},
			//闪光灯切换
			tapLight(){
				if (this.src==null) {
					this.flash=this.flash=='on'?'off':'on'
				}
			},
			//切换镜头
			change(){
				if (this.src==null) {
					this.position=this.position=='back'?'front':'back'
				}
			},
			//重新拍摄
			rephoto(){
				let that=this
				uni.showModal({
					title:"提示",
					content:"确定重新拍摄?",
					success: (res) => {
						if (res.confirm) {
							that.src=null
						}
					}
				})
			},
			//取消拍照
			cancel(){
				uni.showModal({
					title:"提示",
					content:"确定取消拍摄?",
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack()
						}
					}
				})
			},
			//拍照
			takePhoto() {
				let that=this
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						that.src = res.tempImagePath
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			//打印错误日志
			error(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="scss">
	.warp{
		height: 100vh;
		background-color: #fff;
	}
	.top{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		image{
			width: 50rpx;
		}
		//闪光灯
		.light{
			margin-left: 50rpx;
			padding: 10rpx 0;
		}
		.rephoto{
			margin-right: 30rpx;
			padding: 6rpx 0;
		}
	}
	
	.center{
		.content{
			height: 80vh;
			width: 100vw;
			.coverImg-type0{
				height: 75vh;
				margin-top: -20rpx;
				margin-bottom: 20rpx;
				opacity: 0.3;
			}
			.coverImg-type1{
				height: 80vh;
				opacity: 0.6;
			}
		}
	}
	

	
	
	// 底部功能按钮
	.bottom{
		height: 19vh;
		display: flex;
		justify-content:space-around;
		align-items: center;
		//切换镜头
		.change{
			height: 88rpx;
			width: 88rpx;
			margin-left: 40rpx;
			opacity: 0.7;
		}
		//确认拍摄
		.confirm{
			height: 150rpx;
			width: 150rpx
		}
		
		//取消上传
		.cancel{
			height: 88rpx;
			width: 88rpx;
			margin-right: 40rpx;
			opacity: .7;
		}
	}
	
	//重新拍摄按钮
	.button {
		font-size: 20rpx;
	    background-color: #59a5f0; /* Green */
	    border: none;
	    color: white;
	    padding: 2rpx 32rpx;
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    cursor: pointer;
	}
</style>