rtdeviceApp/pages/device/tongue/test.nvue

<template>
    <view class="content">
		
        <view class="show-view">
             <Ba-CameraView ref="cameraView" class="camera-view" :load="loadData"></Ba-CameraView>
        </view>
		
		<view class="es x-bc es-mt-4 es-mb-4 btnBox">
			<button class="btn1"  @click="takePhoto" :sizeLimit="100">拍照</button>
			<button class="btn1" @click="changeCamera" v-if="!isTablet">切换摄像头</button>
			<button class="btn1" @click="setFrontCamera" v-if="!isTablet">前置摄像头</button>
			<button class="btn1" @click="setRearCamera">后置摄像头</button>
		</view>
        
		<!-- <view class="es x-bc es-mt-20">
			<view class="title">自动变焦</view>ca
			<switch :checked="loadData.autoZoomEnabled" color="#FF5C03" @change="toggleAutoZoom"  style="transform:scale(0.7)"/>
		</view> -->
		
		<!-- 控制按钮 -->
		<view class="controls">
			<button class="btn" @click="toggleAutoZoom">
				{{ loadData.autoZoomEnabled ? '关闭自动变焦' : '开启自动变焦' }}
			</button>
			<button class="btn" @click="switchZoomMode">
				切换模式: {{ currentZoomMode }}
			</button>
			<button class="btn" @click="manualZoom">手动变焦</button>
		</view>
		
		<view class="es x-bc" style="display:flex;flex:1;">
			<view class="label">选择清晰度</view>
			<view class="right x-end"  style="height: 40px; margin-right: 10px;">
				<picker style="width: 100%;text-align: right;" @change="pickerQuality" :value="currentQuality" :range="qualityPicker">
					<view class="picker">
						{{loadData.captureQuality}}
					</view>
				</picker>
			</view>
		</view>
		
		<!-- 状态显示 -->
		<div class="status">
			<text class="status-text">设备类型: {{ isTablet ? '平板设备(Shimeta)' : '普通设备' }}</text>
			<text class="status-text">当前摄像头: {{ loadData.isFacingFront ? '前置摄像头' : '后置摄像头' }}</text>
			<text class="status-text">分辨率质量: {{ loadData.captureQuality }} (动态适配)</text>
			<text class="status-text">自动变焦: {{ loadData.autoZoomEnabled ? '开启' : '关闭' }}</text>
			<text class="status-text">变焦模式: {{ currentZoomMode }}</text>
			<text class="status-text">状态信息: {{ statusMessage }}</text>
		</div>
		
		<!-- 配置检查按钮 -->
		<view class="btn-container">
			<button class="btn" @click="forceApplyConfig">检查并应用配置</button>
		</view>
	
    </view>
</template>

<script>

export default {
    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 {
            obj: {
                src: null,
                text: null,
                vSrc: null
            },
			// 设备类型检测
			isTablet: isTablet,
			isShimeta: isTablet,
			loadData: { //配置
			    isToast: true,
				isShowVibrate:false,
				isFacingFront: defaultCameraFacing, // 根据设备类型设置默认摄像头
				captureQuality:"HIGH", //摄像头清晰度 **HIGH**: 动态适配高清  **MEDIUM**: 动态适配中等 **LOW**: 动态适配低清
				autoZoomEnabled: true,     // 启用舌诊自动变焦
				autoZoomMode: "TONGUE",       // 变焦模式：FACE(面部) 或 TONGUE(舌诊)
				isTablet: isTablet // 设备类型配置
			},
			qualityPicker: ['HIGH', 'MEDIUM','LOW'],
			currentQuality:0,
			currentZoomMode:"TONGUE", // 默认使用舌诊模式
			statusMessage: isTablet ? "检测到平板设备，默认使用后置摄像头" : "检测到手机设备，默认使用前置摄像头"
        }
    },
    onLoad() {
        this.setListener(); //设置监听
		console.log('onLoad - 当前配置:', {
			isTablet: this.isTablet,
			isFacingFront: this.loadData.isFacingFront,
			statusMessage: this.statusMessage
		});
    },
	mounted() {
		// 强制应用配置，确保平板设备使用后置摄像头
		// this.$nextTick(() => {
		// 	this.forceApplyConfig();
		// });
	},
    methods: {
		takePhoto() {
            this.$refs.cameraView.takePicture((res) => {
               this.showToast(res.msg)
            });
        },
        //切换摄像头
        changeCamera() {
			// 检查是否为平板设备
			if (this.isTablet) {
				this.statusMessage = '平板设备只有后置摄像头，无法切换';
				uni.showToast({
					title: "平板设备只有后置摄像头",
					icon: 'none'
				});
				return;
			}
            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;
                    console.error('操作失败', result.msg);
                }
            });
        },
		
		// 设置为前置摄像头
		setFrontCamera() {
			if (this.isTablet) {
				this.statusMessage = '平板设备只有后置摄像头，无法使用前置摄像头';
				uni.showToast({
					title: "平板设备只有后置摄像头",
					icon: 'none'
				});
				return;
			}
			
			this.$refs.cameraView.setCameraFacing((result) => {
				if (result.ok) {
					this.loadData.isFacingFront = true;
					this.statusMessage = '已设置为前置摄像头';
					uni.showToast({
						title: "已设置为前置摄像头",
						icon: 'none'
					});
				} else {
					this.statusMessage = '设置前置摄像头失败: ' + result.msg;
					console.error('设置前置摄像头失败', result.msg);
				}
			}, {
				useFrontCamera: true
			});
		},
		
		// 设置为后置摄像头
		setRearCamera() {
			this.$refs.cameraView.setCameraFacing((result) => {
				if (result.ok) {
					this.loadData.isFacingFront = false;
					this.statusMessage = '已设置为后置摄像头';
					uni.showToast({
						title: "已设置为后置摄像头",
						icon: 'none'
					});
				} else {
					this.statusMessage = '设置后置摄像头失败: ' + result.msg;
					uni.showToast({
						title: "设置失败: " + result.msg,
						icon: 'none'
					});
				}
			}, {
				useFrontCamera: false
			}); 
		},
		
		// 强制应用当前配置（确保平板设备配置生效）
		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
			});
		},
		setListener() {
			this.$refs.cameraView.setListener((res) => {
				if (res.action == "error") {
					this.showToast(res.msg)
				}
			});
		 },
		showToast(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			});
		},
		toggleAutoZoom(){
			this.loadData.autoZoomEnabled = !this.loadData.autoZoomEnabled;
			// 更新loadData中的配置
			this.loadData.autoZoomMode = this.currentZoomMode;
			
			this.$refs.cameraView.setAutoZoom((result) => {
				if (result.ok) {
					this.statusMessage = this.loadData.autoZoomEnabled ? 
						`自动变焦已开启 (${this.currentZoomMode}模式)` : '自动变焦已关闭';
					this.showToast(this.statusMessage);
					console.log('变焦切换:', {
						enabled: this.loadData.autoZoomEnabled,
						mode: this.currentZoomMode
					});
				} else {
					this.statusMessage = '设置自动变焦失败: ' + result.msg;
					console.error('Failed to toggle auto zoom:', result.msg);
					this.showToast(this.statusMessage);
				}
			}, {
				enabled: this.loadData.autoZoomEnabled,
				mode: this.currentZoomMode
			});
		},
		switchZoomMode() {
			// 在 FACE、TONGUE、DEFAULT 之间切换
			const modes = ['FACE', 'TONGUE', 'DEFAULT'];
			const currentIndex = modes.indexOf(this.currentZoomMode);
			this.currentZoomMode = modes[(currentIndex + 1) % modes.length];
			
			// 更新loadData中的配置
			this.loadData.autoZoomMode = this.currentZoomMode;
			
			// 显示切换状态
			const zoomLevels = {
				'FACE': this.isTablet ? '2.0倍' : '1.8倍',
				'TONGUE': this.isTablet ? '3.0倍' : '2.8倍', 
				'DEFAULT': this.isTablet ? '1.8倍' : '1.5倍'
			};
			
			if (this.loadData.autoZoomEnabled) {
				// 如果自动变焦已开启，重新设置以应用新模式
				this.$refs.cameraView.setAutoZoom((result) => {
					if (result.ok) {
						this.statusMessage = `变焦模式已切换到: ${this.currentZoomMode} (${zoomLevels[this.currentZoomMode]})`;
						console.log('Zoom mode switched to:', this.currentZoomMode, 'with zoom level:', zoomLevels[this.currentZoomMode]);
						this.showToast(this.statusMessage);
						
						// 减少延时并立即执行变焦以显示效果
						setTimeout(() => {
							this.manualZoom();
							// 为了确保变焦效果明显，再次执行
							setTimeout(() => {
								this.manualZoom();
							}, 100);
						}, 200);
					} else {
						this.statusMessage = '切换变焦模式失败: ' + result.msg;
						console.error('Failed to switch zoom mode:', result.msg);
						this.showToast(this.statusMessage);
					}
				}, {
					enabled: this.loadData.autoZoomEnabled,
					mode: this.currentZoomMode
				});
			} else {
				this.statusMessage = `变焦模式已设置为: ${this.currentZoomMode} (${zoomLevels[this.currentZoomMode]}) - 需开启自动变焦`;
				this.showToast(this.statusMessage);
			}
		},
		
		manualZoom() {
			this.$refs.cameraView.performAutoZoom((result) => {
				if (result.ok) {
					this.statusMessage = '手动变焦执行成功';
					console.log('Manual zoom performed successfully');
				} else {
					this.statusMessage = '手动变焦失败: ' + result.msg;
					console.error('Manual zoom failed:', result.msg);
				}
				//this.showToast(this.statusMessage);
			});
		},
		pickerQuality(e){
			console.log("qxj detailValue",e);
			this.currentQuality=e.detail.value;
			const newQuality = this.qualityPicker[this.currentQuality];
			
			// 显示加载状态
			this.statusMessage = `正在切换到${newQuality}分辨率...`;
			uni.showLoading({
				title: '切换分辨率中...'
			});
			
			this.loadData.captureQuality = newQuality;
			this.$refs.cameraView.setCaptureQuality((result) => {
				uni.hideLoading();
				if (result.ok) {
					this.statusMessage = `分辨率已切换到: ${newQuality}`;
					uni.showToast({
						title: `已切换到${newQuality}分辨率`,
						icon: 'success'
					});
					
					// 分辨率切换后，如果自动变焦开启，重新应用设置
					if (this.loadData.autoZoomEnabled) {
						setTimeout(() => {
							this.$refs.cameraView.setAutoZoom((autoZoomResult) => {
								if (autoZoomResult.ok) {
									console.log('分辨率切换后自动变焦重新应用成功');
								}
							}, {
								enabled: this.loadData.autoZoomEnabled,
								mode: this.currentZoomMode
							});
						}, 1000); // 等待摄像头重新初始化完成
					}
				} else {
					this.statusMessage = `分辨率切换失败: ${result.msg}`;
					console.error('分辨率切换失败', result.msg);
					uni.showToast({
						title: `切换失败: ${result.msg}`,
						icon: 'error'
					});
					// 恢复之前的设置
					this.currentQuality = this.qualityPicker.indexOf(this.loadData.captureQuality);
				}
			}, {
				quality: newQuality
			});
		}
    }
}
</script>

<style>
    .show-view {
        flex-direction: row;
    }
    .camera-view {
		display: flex;
        flex: 1;
        height: 800rpx;
        background-color: #333333;
    }
	
	.controls {
		flex-direction: column;
		align-items: center;
	}
	
	.btnBox{
		display: flex;
		flex: 1;
		margin-left: 10rpx;
	}
	
	.btn1{
		display: flex;
		flex: 1;
		margin-right: 10rpx;
	}

	.btn {
		width: 750rpx;
		height: 50px;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		margin-bottom: 10rpx;
		font-size: 16px;
		text-align: center;
		line-height: 50px;
	}
	
    .r-flex {
        margin-top: 40rpx;
        margin-bottom: 40rpx;
        flex-wrap: wrap;
        flex-direction: row;
    }

	
	.status {
		flex-direction: column;
		align-items: center;
		padding: 15px;
		background-color: #fff;
		border-radius: 10px;
		border: 1px solid #ddd;
	}
	
	.status-text {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
		text-align: center;
	}
	
</style>