|
@@ -39,6 +39,9 @@
|
|
|
|
|
|
<!-- 为小程序环境添加camera组件 -->
|
|
<!-- 为小程序环境添加camera组件 -->
|
|
<view v-if="!isH5 && showCamera" class="camera-container">
|
|
<view v-if="!isH5 && showCamera" class="camera-container">
|
|
|
|
+ <cover-view class="gesture-hint">
|
|
|
|
+ <cover-view class="gesture-hint-text">{{ gestureHints[currentStep] }}</cover-view>
|
|
|
|
+ </cover-view>
|
|
<camera
|
|
<camera
|
|
:device-position="cameraPosition"
|
|
:device-position="cameraPosition"
|
|
flash="auto"
|
|
flash="auto"
|
|
@@ -51,7 +54,7 @@
|
|
<!-- 添加手势引导蒙层 -->
|
|
<!-- 添加手势引导蒙层 -->
|
|
<cover-view class="gesture-overlay">
|
|
<cover-view class="gesture-overlay">
|
|
<!-- 添加右上角引导图标 -->
|
|
<!-- 添加右上角引导图标 -->
|
|
- <cover-view class="guide-icon">
|
|
|
|
|
|
+ <cover-view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
|
|
<cover-image :src="guideIcon[currentStep]" class="guide-image"></cover-image>
|
|
<cover-image :src="guideIcon[currentStep]" class="guide-image"></cover-image>
|
|
<!-- <text class="guide-text">引导</text> -->
|
|
<!-- <text class="guide-text">引导</text> -->
|
|
</cover-view>
|
|
</cover-view>
|
|
@@ -60,9 +63,6 @@
|
|
:src="gestureOverlays[currentStep]"
|
|
:src="gestureOverlays[currentStep]"
|
|
class="gesture-image"
|
|
class="gesture-image"
|
|
></cover-image>
|
|
></cover-image>
|
|
- <cover-view class="gesture-hint">
|
|
|
|
- <cover-view class="gesture-hint-text">{{ gestureHints[currentStep] }}</cover-view>
|
|
|
|
- </cover-view>
|
|
|
|
</cover-view>
|
|
</cover-view>
|
|
|
|
|
|
<cover-view class="camera-controls">
|
|
<cover-view class="camera-controls">
|
|
@@ -76,13 +76,13 @@
|
|
|
|
|
|
<!-- 为浏览器环境添加视频元素 -->
|
|
<!-- 为浏览器环境添加视频元素 -->
|
|
<view v-if="isH5" class="camera-container" v-show="showCamera">
|
|
<view v-if="isH5" class="camera-container" v-show="showCamera">
|
|
- <video ref="videoElement" class="camera-video" autoplay></video>
|
|
|
|
|
|
+ <!-- <video ref="videoElement" class="camera-video" autoplay></video> -->
|
|
<canvas ref="canvasElement" class="camera-canvas" style="display: none;"></canvas>
|
|
<canvas ref="canvasElement" class="camera-canvas" style="display: none;"></canvas>
|
|
|
|
|
|
<!-- 添加H5环境的手势引导蒙层 -->
|
|
<!-- 添加H5环境的手势引导蒙层 -->
|
|
<view class="gesture-overlay">
|
|
<view class="gesture-overlay">
|
|
<!-- 添加右上角引导图标 -->
|
|
<!-- 添加右上角引导图标 -->
|
|
- <view class="guide-icon">
|
|
|
|
|
|
+ <view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
|
|
<image :src="guideIcon[currentStep]" class="guide-image"></image>
|
|
<image :src="guideIcon[currentStep]" class="guide-image"></image>
|
|
<!-- <text class="guide-text">引导</text> -->
|
|
<!-- <text class="guide-text">引导</text> -->
|
|
</view>
|
|
</view>
|
|
@@ -136,6 +136,12 @@ import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a c
|
|
cameraMode: 'normal', // 添加相机模式
|
|
cameraMode: 'normal', // 添加相机模式
|
|
cameraInitRetries: 0, // 添加重试计数器
|
|
cameraInitRetries: 0, // 添加重试计数器
|
|
gestureOverlays: [
|
|
gestureOverlays: [
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E6%8E%8C.png',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E8%83%8C.png',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%8F%A1%E6%8B%B3.png',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E6%8E%8C.png',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E8%83%8C.png',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%8F%A1%E6%8B%B3.png'
|
|
/* '/static/images/palm_overlay.png', // 手掌正面引导图
|
|
/* '/static/images/palm_overlay.png', // 手掌正面引导图
|
|
'/static/images/back_overlay.png', // 手掌反面引导图
|
|
'/static/images/back_overlay.png', // 手掌反面引导图
|
|
'/static/images/fist_overlay.png' // 握拳引导图 */
|
|
'/static/images/fist_overlay.png' // 握拳引导图 */
|
|
@@ -151,12 +157,12 @@ import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a c
|
|
photoLinks: [null, null, null, null, null, null], // 存储上传后的图片链接
|
|
photoLinks: [null, null, null, null, null, null], // 存储上传后的图片链接
|
|
cameraPosition: 'front', // 修改默认为前置摄像头
|
|
cameraPosition: 'front', // 修改默认为前置摄像头
|
|
guideIcon: [
|
|
guideIcon: [
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/d9082487afc4499c97407aa3cebd1923.jpeg',
|
|
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/27022cfcc05644aabb415b93cac126b1.jpeg',
|
|
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/fcfa3bf149cd4edd962d9b8844bed0b0.jpeg',
|
|
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/d9082487afc4499c97407aa3cebd1923.jpeg',
|
|
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/27022cfcc05644aabb415b93cac126b1.jpeg',
|
|
|
|
- 'http://121.36.251.245:9000/minlong/tenant_1/general_uploads/fcfa3bf149cd4edd962d9b8844bed0b0.jpeg',
|
|
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E6%8E%8C.jpg',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E8%83%8C.jpg',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E5%8D%A7%E6%8B%B3.jpg',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E6%8E%8C.jpg',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E8%83%8C.jpg',
|
|
|
|
+ 'http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E5%8D%A7%E6%8B%B3.jpg',
|
|
]
|
|
]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -850,7 +856,7 @@ import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a c
|
|
/* 小程序相机组件样式 */
|
|
/* 小程序相机组件样式 */
|
|
.camera-component {
|
|
.camera-component {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 80%;
|
|
|
|
|
|
+ height: 100%;
|
|
display: block;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -880,16 +886,19 @@ import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a c
|
|
}
|
|
}
|
|
|
|
|
|
.gesture-image {
|
|
.gesture-image {
|
|
- width: 70%;
|
|
|
|
- height: 70%;
|
|
|
|
- opacity: 0.6;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+/* opacity: 0.6; */
|
|
}
|
|
}
|
|
|
|
|
|
.gesture-hint {
|
|
.gesture-hint {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 1px;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
padding: 10rpx 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
|
+ z-index: 999;
|
|
}
|
|
}
|
|
|
|
|
|
.gesture-hint-text {
|
|
.gesture-hint-text {
|