siyu_app/components/CustomCamera/WeChat/index.vue

<template>
	<Layout @instruct="handleInstruct">
		<camera class="camera" mode="normal" :device-position="device" @error="error"
			style="width: 100%; height: 100%;">
			<cover-view class="cover-view">
				<cover-view class="uni-nav-bar">
					<cover-view :style="{height: statusBarHeight,width: '100%'}"></cover-view>
					<cover-view class="uni-nav-barbox" :style="{width: menuLeft}">
						<cover-view class="uni-nav-back">
							<cover-image src="@/static/images/ai_right_icon.png" mode="aspectFill"></cover-image>
						</cover-view>
						<cover-view class="uni-nav-title">
							<cover-view>使用教程</cover-view>
							<cover-image class="ques" src="@/static/images/ques.png" mode="aspectFill"></cover-image>
						</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="title">请拍摄舌面</cover-view>
				<cover-view class="tips">舌尖放松，舌面平展，舌尖略向下，口张大不要太用力</cover-view>
				<cover-view class="imagebox">
					<!-- <cover-image class="tongue" src="@/static/images/tongue.png"  mode="aspectFill"></cover-image> -->
				</cover-view>
			</cover-view>
			<!-- <cover-image v-if="coverImage" :src="coverImage" style="width: 100%;height: 100%;"></cover-image> -->
		</camera>
	</Layout>
</template>
<script>
	import Layout from './Layout.vue'

	export default {
		components: {
			Layout
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				// 前置或后置摄像头，值为front, back
				device: 'back',
				cameraContext: null,
				shutterShow: false,
				coverImage: null,
				menuLeft: '100%'
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (result) => {
					// 获取右侧胶囊的信息 单位px
					//#ifndef H5 || APP-PLUS
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					//left:   胶囊左侧距离屏幕左侧的距离
					this.menuLeft = menuButtonInfo.left + 'px'
					//#endif
				},
				fail: (error) => {
					console.log(error)
				}
			})
			this.cameraContext = uni.createCameraContext();
			// this.coverImage = '/static/images/portrait.jpg'
		},
		methods: {
			error(err) {
				console.log(err)
			},
			handleInstruct(instruct) {
				switch (instruct) {
					// 返回
					case 'back':
						this.$emit('back')
						break;
						// 快门
					case 'shutter':
						this.cameraContext.takePhoto({
							quality: 'high',
							success: (res) => {
								// console.log(res)
								this.$emit('getImage', res.tempImagePath)
							}
						})
						break;
						// 反转
					case 'reversal':
						this.device = this.device === 'back' ? 'front' : 'back'
						break;
						// 相册
					case 'album':
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: (res) => {
								this.$emit('getImage', res.tempFilePaths[0])
							}
						})
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.imagebox {
		width: 100%;
		margin-top: 30rpx;
		@include u-flex(column, center, center);
	}
	.tongue {
		width: 531rpx;
		height: 592rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	.cover-view {
		width: 100%;
		position: absolute;
		z-index: 99;
		top: 0;
		left: 0;
	}
	.title {
		margin-top: calc(var(--status-bar-height) + 130rpx);;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		font-size: 43rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tips {
		margin-top: 38rpx;
		font-family: SourceHanSansSC-Regular;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.uni-nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		overflow: hidden;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		.uni-nav-barbox {
			width: 100%;
			height: 88rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			@include u-flex(row, center, space-between);
			position: relative;
			font-size: 24rpx;
		}
		.uni-nav-title {
			flex-shrink: 0;
			font-family: SourceHanSansSC;
			font-weight: 400;
			// font-size: 32rpx;
			color: #FFFFFF;
			/* #ifdef APP-PLUS */
			font-size: 32rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14px;
			/* #endif */
			@include u-flex(row, center, flex-start);
			.ques {
				flex-shrink: 0;
				width: 33rpx;
				height: 33rpx;
				margin-left: 9rpx;
			}
		}
		.uni-nav-back {
			height: 32rpx;
			width: 32rpx;
		}
	}

	.camera {
		position: relative;
	}
</style>