rtdeviceApp/pages/device/tongue/facePhoto.nvue

<template>
	<view class="live-pusher-box" :style="{width: width + 'px',height: height + 'px'}"> 
		
		<Ba-CameraView ref="cameraView" :load="loadData" :style="{flex: 1,width: width + 'px', height: cameraHeight + 'px',display:'none'}" ></Ba-CameraView>
		
		<cover-view class="cover-view" :style="{width: width + 'px',height: height + 'px'}">
			<cover-view class="uni-nav-bar" :style="{width: width + 'px'}">
				<cover-view :style="{height: statusBarHeight,width: width + 'px'}"></cover-view>
					<cover-view class="uni-nav-barbox">
						<cover-view class="flex-center boder-box" @click="back">
							<cover-image class="uni-nav-back" src="@/static/image/device/back_icon33.png" mode="aspectFill"></cover-image>
							<text class="uni-nav-title-t">返回</text>
						</cover-view>
					</cover-view>
			</cover-view>
			<cover-view class="title-box" :style="{width: width + 'px'}">
				<cover-view :style="{height: statusBarHeight,width: width + 'px'}"></cover-view>
				<text class="title">请拍摄面部</text>
				<text class="tips">面部保持在中间，无遮挡，平视摄像头</text>
			</cover-view>
			<!-- <cover-view class="box" :style="{width:width + 'px',height: height + 'px'}">
					<cover-view class="imagebox" :style="{width:width + 'px'}">
						<cover-image class="face" :style="{width:width + 'px'}" src="@/static/image/device/facial_photography_mask_bg.png" mode="aspectFill"></cover-image>
					</cover-view>
			</cover-view> -->
		</cover-view>
	
		<view class="camera-footer" id="camera-footer" :style="{width: width + 'px'}">
			<view class="camera-options" :style="{width: width + 'px'}">
				<view class="camera-options-left camera-item" @click="handleAlbum">
					<image src="@/static/image/device/album_icon24.png" mode="scaleToFill" style="width: 34rpx;height:34rpx;margin-bottom: 5rpx;"></image>
					<text class="camera-item-t">相册上传</text>
				</view>
				<view class="camera-options-center camera-item" @click="handleShutter">
					<view class="photograph-btn"></view>
				</view>
				<view class="camera-options-ritht camera-item" @click="handleReversal">
					<image src="@/static/image/device/switch_camera_icon24.png" mode="scaleToFill" style="width: 34rpx;height:34rpx;margin-bottom: 5rpx;"></image>
					<text class="camera-item-t">切换摄像头</text>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import { isAgreePrivacy } from '@/utils/common.js'
	import shareBox from "@/components/share-box/share-boxN.vue"
	import {getCount} from '@/api/healthTongue.js'
	import { premissionCheck } from "@/js_sdk/wa-permission/permission.js"
	// 这个组件仅限APP使用！！！
	export default {
		components: {
			shareBox
		},
		data() {
			// 在data初始化时就进行设备检测
			const systemInfo = uni.getSystemInfoSync();
			console.log('设备信息:', systemInfo);
			// // 判断是否为平板设备
			// const isTabletBySize = systemInfo.screenWidth > 800 && systemInfo.screenHeight > 1200;
			const isTabletByModel = systemInfo.brand && (
				//systemInfo.model.toLowerCase().includes('tablet') ||
				//systemInfo.model.toLowerCase().includes('pad') ||
				systemInfo.brand.toLowerCase().includes('shimeta')
			);
			
			const isTablet = isTabletByModel;
			const defaultCameraFacing = isTablet ? false : true; // 平板默认后置，手机默认前置
			console.log('设备检测结果:', {
				isTablet,
				defaultCameraFacing: defaultCameraFacing ? '前置' : '后置',
				screenSize: `${systemInfo.screenWidth}x${systemInfo.screenHeight}`,
				model: systemInfo.model
			});
			
			return {
				baseUrl:uni.getStorageSync('requestPath'),
				height: uni.getSystemInfoSync().screenHeight,
				width: uni.getSystemInfoSync().screenWidth,
				cameraHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - 100,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
				livePusher: null,
				ready: true,
				cameraHeight: '', //相机画面宽度
				coverImage: null,
				counts: 0,
				marginTop: uni.getSystemInfoSync().statusBarHeight + uni.upx2px(130),
				device: 'back',
				cameraContext: null,
				shutterShow: false,
				menuLeft: '100%',
				// 设备类型检测
				isTablet: isTablet,
				isShimeta: isTablet,
				loadData: { //配置
				    isToast: false,
					isShowVibrate:false,
					isFacingFront: defaultCameraFacing, // 根据设备类型设置默认摄像头
					captureQuality:"HIGH", //摄像头清晰度 **HIGH**: 1920x1080 (高清)  **MEDIUM**: 1280x720 (中等) **LOW**: 640x480 (低清)
					autoZoomEnabled: true,     // 启用自动变焦
					autoZoomMode: "FACE",       // 变焦模式：FACE(面部) 或 TONGUE(舌诊)
					isTablet: isTablet // 设备类型配置
				},
				currentQuality:0,
				currentZoomMode:"FACE", // 默认使用舌诊模式
				statusMessage:"",
				windowResizeCallback:null
			}
		},
		created(){
			let that=this;
			uni.$on('navigateBack', function(data) {
				that.handleReversal();
			});
		},
		onLoad() {
			//this.getCount();
			this.setListener();
		},
		mounted() {
			// 强制应用配置，确保平板设备使用后置摄像头
			this.$nextTick(() => {
				this.forceApplyConfig();
			});
		},
		onShow() {
			this.windowResizeCallback = (res) => {
				// 重新获取屏幕尺寸
				this.getScreenSize(res.size);
			}
			uni.onWindowResize(this.windowResizeCallback);
		},
		onReady() {
			setTimeout(()=>{
				this.switchZoomMode(this.loadData.autoZoomMode);
			},200);
		},
		onUnload() {
			 if (this.windowResizeCallback) {
			      uni.offWindowResize(this.windowResizeCallback);
			      this.windowResizeCallback = null;
			    }
			uni.$off('navigateBack');
		},
		
		methods: {
			getScreenSize(res) {
				this.width = res.windowWidth
			    this.height = res.windowHeight
				if (this.$refs.cameraView) { 
				      this.switchZoomMode(this.loadData.autoZoomMode);
				    } else {
				        
				    }
			},
			switchZoomMode(currentMode) {
				//启动舌诊模式自动变焦
				this.$refs.cameraView.setAutoZoom((result) => {
					if (result.ok) {
						console.log('自动变焦设置成功:', this.loadData.autoZoomMode);
					} else {
						console.error('自动变焦模式:', result.msg);
					}
				}, {
					enabled: this.loadData.autoZoomEnabled,
					mode: currentMode
				});
			},
			
			getCount(){
				getCount().then(
					res => {
						if(res.code==200){
							this.counts=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
		
			// 快门
			handleShutter() {
				if (this.ready) {
					this.ready = false;
					let options={scaleW:403,scaleH:620,isCrop:false};
					this.$refs.cameraView.takePicture((res) => {
						  this.ready = true;
						  const filePath=res.data.path;
						  console.log("qxj takePicture",res);
						  plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
								 let url= entry.toLocalURL();
								 uni.redirectTo({
								 	url:"/pages/device/tongue/index?rightUrl="+url
								 })
						   }, (error) => {
								console.error('Failed to resolve file system URL:', error);
						   });
					  },options);
					
				}
			},
			// 相册
			async handleAlbum() {
				// #ifdef APP-PLUS
				 uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							uni.setStorageSync("tongueUrl",res.tempFilePaths[0])
							let url= res.tempFilePaths[0]
							uni.redirectTo({
								url:"/pages/device/tongue/index?rightUrl="+url
							})
						}
				 });
				// #endif
			},
			// 反转摄像头
			handleReversal() {
				if(this.isShimeta){
					uni.showToast({
						title:"该设备不支持切换摄像头",
						icon:"none"
					});
					return;
				}
				this.switchZoomMode(this.loadData.autoZoomMode)
				this.$refs.cameraView.switchCamera((result) => {
				    if (result.ok) {
						this.loadData.isFacingFront = !this.loadData.isFacingFront;
						this.statusMessage = `已切换到${this.loadData.isFacingFront ? '前置' : '后置'}摄像头`;
				        uni.showToast({
				            title: "切换成功",
				            icon: 'none'
				        });
				    } else {
						this.statusMessage = '切换摄像头失败: ' + result.msg;
				    }
				});
			},
			// 强制应用当前配置（确保平板设备配置生效）
			forceApplyConfig() {
				console.log('强制应用配置:', this.loadData);
				// 如果是平板设备，确保使用后置摄像头
				if (this.isTablet && this.loadData.isFacingFront) {
					console.log('检测到平板设备使用前置摄像头，强制切换到后置');
					this.loadData.isFacingFront = false;
					this.statusMessage = '平板设备强制使用后置摄像头';
					// 调用底层API确保配置生效
					this.setRearCamera();
					
					// 平板设备切换摄像头后，重新应用自动变焦设置
					if (this.loadData.autoZoomEnabled) {
						setTimeout(() => {
							this.reapplyAutoZoom();
						}, 1000); // 等待摄像头切换完成
					}
				}
				// 更新状态显示
				this.statusMessage = this.isTablet ? 
					'平板设备 - 后置摄像头' : 
					(this.loadData.isFacingFront ? '手机设备 - 前置摄像头' : '手机设备 - 后置摄像头');
			},
			
			// 重新应用自动变焦设置
			reapplyAutoZoom() {
				console.log('重新应用自动变焦设置:', {
					enabled: this.loadData.autoZoomEnabled,
					mode: this.currentZoomMode
				});
				this.$refs.cameraView.setAutoZoom((result) => {
					if (result.ok) {
						this.statusMessage = `平板设备 - 自动变焦已重新应用 (${this.currentZoomMode}模式)`;
						console.log('平板设备自动变焦重新应用成功');
					} else {
						this.statusMessage = '重新应用自动变焦失败: ' + result.msg;
						console.error('Failed to reapply auto zoom:', result.msg);
					}
				}, {
					enabled: this.loadData.autoZoomEnabled,
					mode: this.currentZoomMode
				});
			},
			// 舌诊记录
			handleReportlist() {
				uni.navigateTo({
					url: "/pages/user/tongue/tongueList"
				})
			},
			setListener() {
				this.$refs.cameraView.setListener((res) => {
					console.log("qxj setListener",res);
					if (res.action == "error") {
						this.showToast(res.msg)
					}
				});
			},
			showToast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},
			navTo() {
				uni.navigateTo({
					url: "/pages/device/tongue/ques"
				})
			},
			// 返回
			back(){
				uni.navigateBack();
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.flex-center {
		@include u-flex(row, center, center);
	}
	.live-pusher-box {
		@include u-flex(column, center, center);
	}
	.imagebox {
		top:0;
		left: 0;
		right: 0; // 新增：让容器铺满屏幕宽度，确保文本居中生效
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.face {
	 width: 100%;
	}
	.cover-view {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		@include u-flex(column, center, center);
	}
	.box {
		
	}
	.title-box{
		 position: fixed;
		  top: 0;
		  left: 0;
		  right: 0; // 新增：让容器铺满屏幕宽度，确保文本居中生效
		  z-index: 998; // 低于导航栏 z-index:999，避免遮挡导航栏
		  width: 100%;
	}
	.title {
		// margin-top: calc(var(--status-bar-height) + 130rpx);
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		font-size: 18rpx;
		color: #fff;
		text-align: center;
	}
	.tips {
		margin-top: 10rpx;
		// margin-bottom: 60rpx;
		font-family: SourceHanSansSC-Regular;
		font-weight: 400;
		font-size: 14rpx;
		color: #fff;
		text-align: center;
	}
	.boder-box{
		width: 66rpx;
		height: 32rpx;
		background: rgba(255,255,255,0.2);
		border-radius: 8rpx;
		border: 1px solid #FFFFFF;
	}
	.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: #fff;
		// background-color: #000;
		.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-t {
			font-family: SourceHanSansSC;
			font-weight: 400;
			margin-left: 5rpx;
			color: #fff;
			/* #ifdef APP-PLUS */
			font-size: 14rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14rpx;
			/* #endif */
		}
		.uni-nav-title {
			// flex-shrink: 0;
			font-family: SourceHanSansSC;
			font-weight: 400;
			color: #fff;
			/* #ifdef APP-PLUS */
			font-size: 14rpx;
			/* #endif */
			/* #ifndef APP-PLUS */
			font-size: 14rpx;
			/* #endif */
			@include u-flex(row, center, flex-start);
			.ques {
				// flex-shrink: 0;
				width: 33rpx;
				height: 33rpx;
				margin-left: 9rpx;
			}
		}
		.uni-nav-back {
			width: 16rpx;
			height: 16rpx;
		}
	}
	.camera-footer {
		background-color: #000;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.usenum {
		text-align: center;
		@include u-flex(row, center, center);
		.usenum-t {
			font-family: SourceHanSansCN;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			padding: 14rpx;
		}
	}
	.camera-options {
		width: 100%;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
		// box-sizing: border-box;
		@include u-flex(row, center, space-around);
	}
	.camera-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.camera-item-t {
		font-family: SourceHanSansCN;
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
	}
	.camera-options-center {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		border-radius: 50%;
		border: 3px solid #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.photograph-btn {
		width: 45rpx;
		height: 45rpx;
		background: #8F6726;
		border-radius: 50%;
	}
</style>