siyu_app/components/CustomCamera/WeChat/Layout.vue

<!-- 公共布局组件 -->
<template>
	<view class="custom-camera">
		<view class="camera-wrap" :style="{height:cameraHeight+'px'}">
			<slot></slot>
		</view>
		<view class="camera-footer" id="camera-footer">
			<view class="usenum">当前可免费试用<text style="color: #F54D04;margin: 0 6rpx;">{{usenum || 0}}</text>次</view>
			<view class="camera-options">
				<view class="camera-options-left camera-item">
					<image src="@/static/images/album_icon.png" mode="scaleToFill" style="width: 65rpx;height:60rpx;" @click="handleClikFn('album')"></image>
					<text>相册上传</text>
				</view>
				<view class="camera-options-center camera-item" @click="handleClikFn('shutter')">
					<view class="photograph-btn"></view>
				</view>
				<view class="camera-options-ritht camera-item">
					<image src="/static/images/tongue_diagnosis_record_icon.png" mode="scaleToFill" style="width: 67rpx;height:60rpx;" @click="handleClikFn('reportlist')"></image>
					<text>舌诊记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 提供一个相机的插槽位置
	// 底部可以自定义最右侧按钮（相册/反转）
	export default {
		data() {
			return {
				cameraHeight: '', //相机画面宽度
				optionsHeight: '', //操作区域
				usenum: 2
			}
		},
		methods: {
			handleClikFn(instruct) {
				this.$emit('instruct', instruct)
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
			  .select("#camera-footer")
			  .boundingClientRect((data) => {
				this.cameraHeight = uni.getSystemInfoSync().screenHeight - data.height
			  })
			  .exec();
		},
	}
</script>

<style lang="scss" scoped>
	.custom-camera {
		height: 100vh;
		background-color: #000;
		
		.usenum {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 19rpx;
			color: #FFFFFF;
			padding: 14rpx;
			text-align: center;
		}
		.camera-options {
			width: 100%;
			padding-top: 13rpx;
			padding-bottom: 60rpx;
			box-sizing: border-box;
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 27rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			.camera-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					margin-bottom: 21rpx;
				}
			}
			.camera-options-center {
				width: 131rpx;
				height: 131rpx;
				border-radius: 50%;
				border: 3px solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.photograph-btn {
				width: 109rpx;
				height: 109rpx;
				background: #F54D04;
				border-radius: 50%;
			}
		}
	}
</style>