zhdt-miniapp/pages/quick-task/camera.vue

<template>
	<view>
		<cu-custom class="home-custom" bgColor=".bg-sancolor"
		           bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/6525f808df760.png" :isBack="true">
		    <block slot="content">快速检测</block>
		</cu-custom>
		<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 89.5vh;">
			<cover-view class="float-content">
				<cover-view class="out-border">
					<cover-view class="title">二维码</cover-view>
					<cover-view class="inside-border">
						<cover-view class="thick-line">
							<cover-view class="flag">C</cover-view>
						</cover-view>
						<cover-view class="thin-line"></cover-view>
						<cover-view class="thick-line">
							<cover-view class="flag">T</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="desc">请将显色区域放入框内</cover-view>
			</cover-view>
			<cover-view class="control">
				<cover-view class="take-photo" @click="takePhoto">
					<cover-view class="white-circle"></cover-view>
				</cover-view>
			</cover-view>
		</camera>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						uni.redirectTo({
							url: '/pages/quick-task/result?pic=' + res.tempImagePath
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
.control{
	position: absolute;
	bottom: 0;
	height: 15vh;
	width: 100%;
	background: rgba(0, 0, 0, 0.42);
	display: flex;
	justify-content: center;
	align-items: center;
}
.take-photo{
	width: 10vh;
	height: 10vh;
	border-radius: 50%;
	background: #b4b4b4;
	display: flex;
	justify-content: center;
	align-items: center;
}
.white-circle{
	width: 8vh;
	height: 8vh;
	border-radius: 50%;
	background: #fff;
}
.float-content{
	width: 100%;
	height: 75vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.out-border{
	width: 40%;
	height: 55vh;
	border: 2px solid #FFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.out-border .title{
	margin-top: -40%;
	color: red;
	font-size: 26px;
	margin-bottom: 5vh;
	font-weight: bold;
}
.desc{
	color: red;
	font-size: 16px;
	margin-top: 3vh;
	font-weight: bold;
}

.inside-border{
	border: 2px solid red;
	width: 40%;
	height: 10vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.thick-line{
	width: 80%;
	height: 2px;
	background: red;
	position: relative;
}

.thick-line .flag{
	font-size: 20px;
	position: absolute;
	right: -25px;
	top: -12px;
	margin-top: 0;
	font-weight: bold;
}
.thin-line{
	width: 80%;
	height: 1px;
	background: red;
	margin: 2.5vh 0;
}
</style>