zd2.0/components/CustomCamera/WeChat/Layout.vue

<!-- 公共布局组件 -->
<template>
	<view class="custom-camera">
		<view class="camera-wrap" :style="{height:cameraHeight+'px'}">
			<slot></slot>
		</view>
		<view class="camera-options flex" >
			<view class="camera-options-left camera-item" >
				<image src="/static/images/back.png" mode="scaleToFill" @click="handleClikFn('back')"></image>
			</view>
			<view class="camera-options-center camera-item">
				<image src="/static/images/shutter.png" mode="" @click="handleClikFn('shutter')" ></image>
			</view>
			<!-- <view class="camera-options-ritht camera-item" @click="handleClikFn('reversal')">
				<image src="/static/images/reversal.png" mode="scaleToFill"></image>
			</view> -->
			<view class="camera-options-ritht camera-item">
				<image src="/static/images/album.png" mode="" @click="handleClikFn('album')" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	// 提供一个相机的插槽位置
	// 底部可以自定义最右侧按钮（相册/反转）
	export default {
		data() {
			return {
				cameraHeight: '', //相机画面宽度
				optionsHeight: '', //操作区域
			}
		},
		methods: {
			handleClikFn(instruct) {
				this.$emit('instruct', instruct)
			}
		},
		mounted() {
			this.cameraHeight = uni.getSystemInfoSync().screenHeight * 0.8
			this.optionsHeight = uni.getSystemInfoSync().screenHeight * 0.2
			console.log(this.optionsHeight)
		},
	}
</script>

<style lang="scss">
	.custom-camera {
		height: 100vh;
		background-color: #000;

		.camera-wrap {
			// background-color: #f90;
		}

		.camera-options {
			position: fixed;
			height: 200rpx;
			width: 750rpx;
			bottom: 0;
			background-color: #000;
			justify-content: space-evenly;
			align-items: center;
			.camera-item {
				flex-direction: row;
				justify-content: center;
				align-items: center;
				// flex: 1;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.camera-options-center {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}
</style>