yijianbao_user_uniapp/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" :style="{visibility: isLogin? 'visible':'hidden'}">当前可免费试用<text style="color: #F54D04;margin: 0 6rpx;">{{counts || 0}}</text>次</view>
			<view class="camera-options">
				<view class="camera-options-left camera-item">
					<image :src="baseUrl+'/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="takePhoto()">
					<view class="photograph-btn"></view>
				</view>
				<view class="camera-options-ritht camera-item"  @click="switchCamera()">
					<image :src="baseUrl+'/images/tongue_info.png'" mode="scaleToFill" style="width: 67rpx;height:60rpx;" @click="handleClikFn('reportlist')"></image>
					<text>切换摄像头</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCount} from '@/api/healthTongue.js'
	// 提供一个相机的插槽位置
	// 底部可以自定义最右侧按钮（相册/反转）
	export default {
		data() {
			return {
				baseUrl:uni.getStorageSync('requestPath'),
				cameraHeight: '', //相机画面宽度
				optionsHeight: '', //操作区域
				counts: 0,
				url:null,
				isLogin: false
			}
		},
		methods: {
			initShow() {
				this.$isLogin().then(
					res => {
						if(res){
							this.isLogin = true
							this.getCount()
						} else{
							this.isLogin = false
						}
					}
				);
			},
			switchCamera(){
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/auth/login'
					})
					return
				}
				this.$emit('switchCamera')
			},
			getCount(){
				getCount().then(
					res => {
						if(res.code==200){
							this.counts=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			takePhoto() {
				if(!this.isLogin){
					uni.navigateTo({
						url:'/pages/auth/login'
					})
					return
				}
				let that= this
				const ctx = wx.createCameraContext()
				console.log("ctx", ctx);
				ctx.takePhoto({
				  quality: 'high',
				  success: (res) => {
					  uni.setStorageSync("tongueUrl",res.tempImagePath)
					  console.log("res", res.tempImagePath);
					  this.$emit('takePhoto')
				  }
				})
			},
			handleClikFn(instruct) {
				if(this.isLogin){
					this.$emit('instruct', instruct)
				} else{
					uni.navigateTo({
						url:'/pages/auth/login'
					})
				}
			}
		},
		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: 24rpx;
			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>