interview.vue 28 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070
  1. <template>
  2. <view class="container">
  3. <!-- <view class="header">
  4. <text class="title">手部照片采集</text>
  5. </view> -->
  6. <view class="photo-container">
  7. <view class="instruction">
  8. <text>{{ instructions[currentStep] }}</text>
  9. </view>
  10. <view class="preview-container">
  11. <image v-if="photos[currentStep]" :src="photos[currentStep]" mode="aspectFit" class="preview-image"></image>
  12. <view v-else class="empty-preview">
  13. <text>{{ previewTexts[currentStep] }}</text>
  14. </view>
  15. </view>
  16. <view class="thumbnails">
  17. <view v-for="(photo, index) in photos" :key="index"
  18. class="thumbnail-item"
  19. :class="{ active: currentStep === index, completed: photo }">
  20. <image v-if="photo" :src="photo" mode="aspectFill" class="thumbnail-image" @click="previewPhoto(index)"></image>
  21. <view v-else class="thumbnail-placeholder">{{ index + 1 }}</view>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="controls">
  26. <button class="camera-btn" @click="takePhoto">{{ photos[currentStep] ? '重新拍摄' : '拍摄照片' }}</button>
  27. <view class="navigation-btns">
  28. <button class="nav-btn prev" :disabled="currentStep === 0" @click="prevStep">上一步</button>
  29. <button class="nav-btn next" :disabled="!canGoNext" @click="nextStep">
  30. {{ currentStep === 5 && photos[5] ? '完成' : '下一步' }}
  31. </button>
  32. </view>
  33. </view>
  34. <!-- 为小程序环境添加camera组件 -->
  35. <view v-if="!isH5 && showCamera" class="camera-container">
  36. <cover-view class="gesture-hint">
  37. <cover-view class="gesture-hint-text">{{ gestureHints[currentStep] }}</cover-view>
  38. </cover-view>
  39. <camera
  40. :device-position="cameraPosition"
  41. flash="auto"
  42. @error="handleCameraError"
  43. class="camera-component"
  44. :mode="cameraMode"
  45. frame-size="medium"
  46. ></camera>
  47. <!-- 添加手势引导蒙层 -->
  48. <view class="gesture-overlay">
  49. <!-- 添加右上角引导图标 -->
  50. <view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
  51. <!-- <image :src="guideIcon[currentStep]" class="guide-image"></image> -->
  52. <video
  53. :src="guideIcon[currentStep]"
  54. id="mpVideo"
  55. autoplay
  56. class="mp-video-player"
  57. :controls="false"
  58. loop
  59. muted
  60. object-fit="contain"
  61. ></video>
  62. <!-- <text class="guide-text">引导</text> -->
  63. </view>
  64. <image
  65. :src="gestureOverlays[currentStep]"
  66. class="gesture-image"
  67. ></image>
  68. </view>
  69. <cover-view class="camera-controls">
  70. <cover-view class="capture-btn" @tap="capturePhotoMP"></cover-view>
  71. <cover-view class="camera-buttons">
  72. <!-- <cover-view class="switch-camera-btn" @tap="switchCamera">切换摄像头</cover-view> -->
  73. <cover-view class="cancel-btn" @tap="cancelCamera">取消</cover-view>
  74. </cover-view>
  75. </cover-view>
  76. </view>
  77. <!-- 为浏览器环境添加视频元素 -->
  78. <view v-if="isH5" class="camera-container" v-show="showCamera">
  79. <!-- <video ref="videoElement" class="camera-video" autoplay></video> -->
  80. <canvas ref="canvasElement" class="camera-canvas" style="display: none;"></canvas>
  81. <!-- 添加H5环境的手势引导蒙层 -->
  82. <view class="gesture-overlay">
  83. <!-- 添加右上角引导图标 -->
  84. <view class="guide-icon" :style="currentStep>=3?'left:30rpx':'right:30rpx'">
  85. <image :src="guideIcon[currentStep]" class="guide-image"></image>
  86. <!-- <text class="guide-text">引导</text> -->
  87. </view>
  88. <image
  89. :src="gestureOverlays[currentStep]"
  90. class="gesture-image"
  91. ></image>
  92. <view class="gesture-hint">
  93. <text class="gesture-hint-text">{{ gestureHints[currentStep] }}</text>
  94. </view>
  95. </view>
  96. <view class="camera-buttons">
  97. <button class="capture-btn" @click="capturePhoto">拍照</button>
  98. <button class="switch-camera-btn" @click="switchCamera">切换摄像头</button>
  99. <button class="cancel-btn" @click="cancelCamera">取消</button>
  100. </view>
  101. </view>
  102. </view>
  103. </template>
  104. <script>
  105. import { apiBaseUrl } from '@/common/config.js'; // Import the base URL from a config file
  106. export default {
  107. data() {
  108. return {
  109. currentStep: 0,
  110. photos: [null, null, null, null, null, null], // 存储6张照片:左手正面、左手反面、左手握拳、右手正面、右手反面、右手握拳
  111. instructions: [
  112. '请将左手掌正面朝上,保持手指自然伸展,确保整个手掌清晰可见',
  113. '请将左手掌反面朝上,保持手指自然伸展,确保整个手背清晰可见',
  114. '请握紧左手拳头,使拳面朝向相机,确保整个拳头清晰可见',
  115. '请将右手掌正面朝上,保持手指自然伸展,确保整个手掌清晰可见',
  116. '请将右手掌反面朝上,保持手指自然伸展,确保整个手背清晰可见',
  117. '请握紧右手拳头,使拳面朝向相机,确保整个拳头清晰可见'
  118. ],
  119. previewTexts: [
  120. '左手掌正面照片预览区',
  121. '左手掌反面照片预览区',
  122. '左手握拳照片预览区',
  123. '右手掌正面照片预览区',
  124. '右手掌反面照片预览区',
  125. '右手握拳照片预览区'
  126. ],
  127. photoTypes: ['left_palm', 'left_back', 'left_fist', 'right_palm', 'right_back', 'right_fist'], // 照片类型标识
  128. isH5: false,
  129. showCamera: false,
  130. mediaStream: null,
  131. cameraContext: null,
  132. cameraMode: 'normal', // 添加相机模式
  133. cameraInitRetries: 0, // 添加重试计数器
  134. gestureOverlays: [
  135. 'http://data.qicai321.com/minlong/18590378-6792-4a26-be18-ad9f2bcc4159.png',
  136. 'http://data.qicai321.com/minlong/e08cff2b-3b1d-478f-a62b-766b38445a16.png',
  137. 'http://data.qicai321.com/minlong/d30ccab7-9cfe-4386-bf0e-ac1f0045bd76.png',
  138. 'http://data.qicai321.com/minlong/8068a698-ac40-4a5d-a737-54dba47a668d.png',
  139. 'http://data.qicai321.com/minlong/f04a1f7e-4f79-49c7-9a02-bbad296672ea.png',
  140. 'http://data.qicai321.com/minlong/1d9bbc36-2fb8-4489-bff6-c36e7a31bd37.png'
  141. /* '/static/images/palm_overlay.png', // 手掌正面引导图
  142. '/static/images/back_overlay.png', // 手掌反面引导图
  143. '/static/images/fist_overlay.png' // 握拳引导图 */
  144. ],
  145. gestureHints: [
  146. '请将左手掌对准轮廓线',
  147. '请将左手背对准轮廓线',
  148. '请将左手拳头对准轮廓线',
  149. '请将右手掌对准轮廓线',
  150. '请将右手背对准轮廓线',
  151. '请将右手拳头对准轮廓线'
  152. ],
  153. photoLinks: [null, null, null, null, null, null], // 存储上传后的图片链接
  154. cameraPosition: 'front', // 修改默认为前置摄像头
  155. guideIcon: [
  156. 'http://data.qicai321.com/minlong/fd080e3b-67be-4ce7-87a3-58d047cfbbb1.mp4',
  157. 'http://data.qicai321.com/minlong/394a858c-672a-44bd-8206-450913863900.mp4',
  158. 'http://data.qicai321.com/minlong/37153e68-a8f0-4a93-b677-5e5678379243.mp4',
  159. 'http://data.qicai321.com/minlong/ebf6e43f-ffdf-49bb-8b00-adeff9ce1b56.mp4',
  160. 'http://data.qicai321.com/minlong/e0ca45e2-af3e-42a0-9dd1-4de545e9c720.mp4',
  161. 'http://data.qicai321.com/minlong/77028dd6-22bb-41b4-8879-19699e8b1dbb.mp4',
  162. ]
  163. }
  164. },
  165. computed: {
  166. canGoNext() {
  167. // 如果是最后一步,检查所有照片是否都已完成
  168. if (this.currentStep === 5) {
  169. return this.photos.every(photo => photo !== null);
  170. }
  171. // 其他步骤只检查当前步骤的照片
  172. return this.photos[this.currentStep] !== null;
  173. }
  174. },
  175. onLoad() {
  176. // 判断当前平台
  177. // #ifdef H5
  178. this.isH5 = true;
  179. // #endif
  180. // 检查相机权限
  181. // #ifdef MP-WEIXIN
  182. uni.authorize({
  183. scope: 'scope.camera',
  184. success: () => {
  185. console.log('相机权限已授权');
  186. },
  187. fail: () => {
  188. uni.showModal({
  189. title: '提示',
  190. content: '请授权相机权限以完成手部照片采集',
  191. success: (res) => {
  192. if (res.confirm) {
  193. uni.openSetting();
  194. }
  195. }
  196. });
  197. }
  198. });
  199. // #endif
  200. },
  201. beforeDestroy() {
  202. // 在组件销毁前停止摄像头流
  203. this.stopMediaStream();
  204. },
  205. methods: {
  206. takePhoto() {
  207. // 先重置当前步骤的状态
  208. this.$set(this.photos, this.currentStep, null);
  209. this.$set(this.photoLinks, this.currentStep, null);
  210. // 根据平台选择不同的拍照方法
  211. if (this.isH5) {
  212. this.startCamera();
  213. } else {
  214. // 小程序环境使用camera组件
  215. this.showCamera = true;
  216. this.cameraInitRetries = 0; // 重置重试计数器
  217. this.$nextTick(() => {
  218. // 创建相机上下文
  219. // #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO
  220. try {
  221. this.cameraContext = uni.createCameraContext();
  222. console.log('相机上下文创建成功');
  223. } catch (err) {
  224. console.error('创建相机上下文失败:', err);
  225. this.handleCameraInitError();
  226. }
  227. // #endif
  228. });
  229. }
  230. },
  231. uploadPhoto(filePathOrData, type) {
  232. console.log(`准备上传${type}类型的手部照片`);
  233. uni.showLoading({
  234. title: '上传中...'
  235. });
  236. // 获取用户openid
  237. const userInfo = uni.getStorageSync('userInfo');
  238. const openid = userInfo ? JSON.parse(userInfo).openid || '' : '';
  239. const tenant_id = uni.getStorageSync('tenant_id') || '1';
  240. // 检查用户信息是否完整
  241. if (!tenant_id) {
  242. uni.hideLoading();
  243. uni.showToast({
  244. title: '用户信息不完整,请重新登录',
  245. icon: 'none'
  246. });
  247. return;
  248. }
  249. // 定义更详细的照片描述
  250. const photoDescriptions = {
  251. 'left_palm': '展示完整的左手手掌',
  252. 'left_back': '展示完整的左手手背',
  253. 'left_fist': '展示完整的左手握拳',
  254. 'right_palm': '展示完整的右手手掌',
  255. 'right_back': '展示完整的右手手背',
  256. 'right_fist': '展示完整的右手握拳'
  257. };
  258. // 获取当前照片类型的详细描述
  259. const description = photoDescriptions[type] || `手部照片-${type}`;
  260. // 如果是H5环境且是base64数据
  261. if (this.isH5 && filePathOrData.startsWith('data:image')) {
  262. // 将base64转为blob对象
  263. const base64Data = filePathOrData.split(',')[1];
  264. const blob = this.base64ToBlob(base64Data, 'image/jpeg');
  265. const formData = new FormData();
  266. // 确保文件参数名称正确
  267. formData.append('photo', blob, `${type}.jpg`);
  268. formData.append('application_id', uni.getStorageSync('appId'));
  269. formData.append('tenant_id', tenant_id);
  270. formData.append('description', description);
  271. console.log('H5上传参数:', {
  272. application_id: uni.getStorageSync('appId'),
  273. tenant_id: tenant_id,
  274. description: description
  275. });
  276. // 使用fetch直接上传到 job/upload_posture_photo 接口
  277. fetch(`${apiBaseUrl}/job/upload_posture_photo`, {
  278. method: 'POST',
  279. body: formData
  280. })
  281. .then(response => response.json())
  282. .then(result => {
  283. console.log('照片上传成功:', result);
  284. // 保存图片链接到对应类型的索引位置
  285. const index = this.photoTypes.indexOf(type);
  286. if (index !== -1 && result.data && result.data.url) {
  287. this.$set(this.photoLinks, index, result.data.url);
  288. console.log(`已保存${type}类型照片链接:`, result.data.url);
  289. }
  290. uni.hideLoading();
  291. uni.showToast({
  292. title: '照片上传成功',
  293. icon: 'success',
  294. duration: 1500,
  295. success: () => {
  296. // 上传成功后自动进入下一步
  297. setTimeout(() => {
  298. this.autoNextStep();
  299. }, 1500);
  300. }
  301. });
  302. })
  303. .catch(error => {
  304. console.error('照片上传失败:', error);
  305. uni.hideLoading();
  306. uni.showToast({
  307. title: '照片上传失败,请重试',
  308. icon: 'none'
  309. });
  310. });
  311. } else {
  312. // 小程序环境的上传逻辑
  313. console.log(`小程序环境上传文件路径:`, filePathOrData);
  314. console.log('小程序上传参数:', {
  315. application_id: uni.getStorageSync('appId'),
  316. tenant_id: tenant_id,
  317. description: description
  318. });
  319. uni.uploadFile({
  320. url: `${apiBaseUrl}/job/upload_posture_photo`,
  321. filePath: filePathOrData,
  322. name: 'photo', // 确保文件参数名称正确
  323. formData: { // 使用formData替代data以确保参数正确传递
  324. 'application_id': uni.getStorageSync('appId'),
  325. 'tenant_id': tenant_id,
  326. 'description': description
  327. },
  328. success: (uploadRes) => {
  329. console.log('照片上传成功:', uploadRes);
  330. // 解析返回的JSON字符串
  331. let result;
  332. try {
  333. if (typeof uploadRes.data === 'string') {
  334. result = JSON.parse(uploadRes.data);
  335. } else {
  336. result = uploadRes.data;
  337. }
  338. console.log('解析后的上传结果:', result);
  339. // 保存图片链接到对应类型的索引位置
  340. const index = this.photoTypes.indexOf(type);
  341. if (index !== -1 && result.data && result.data.url) {
  342. this.$set(this.photoLinks, index, result.data.url);
  343. console.log(`已保存${type}类型照片链接:`, result.data.url);
  344. }
  345. } catch (e) {
  346. console.error('解析上传结果失败:', e);
  347. }
  348. uni.hideLoading();
  349. uni.showToast({
  350. title: '照片上传成功',
  351. icon: 'success',
  352. duration: 1500,
  353. success: () => {
  354. // 上传成功后自动进入下一步
  355. setTimeout(() => {
  356. this.autoNextStep();
  357. }, 1500);
  358. }
  359. });
  360. },
  361. fail: (err) => {
  362. console.error('照片上传失败:', err);
  363. uni.hideLoading();
  364. uni.showToast({
  365. title: '照片上传失败,请重试',
  366. icon: 'none'
  367. });
  368. },
  369. complete: () => {
  370. uni.hideLoading();
  371. }
  372. });
  373. }
  374. },
  375. prevStep() {
  376. if (this.currentStep > 0) {
  377. this.currentStep--;
  378. }
  379. },
  380. nextStep() {
  381. if (this.currentStep < 5) {
  382. return
  383. this.currentStep++;
  384. } else if (this.currentStep === 5 && this.photos[5]) {
  385. // 所有照片都已拍摄完成,可以进行提交或跳转
  386. this.submitAllPhotos();
  387. }
  388. },
  389. previewPhoto(index) {
  390. // 如果照片存在,则预览
  391. if (this.photos[index]) {
  392. uni.previewImage({
  393. urls: [this.photos[index]],
  394. current: this.photos[index]
  395. });
  396. }
  397. },
  398. submitAllPhotos() {
  399. // 检查是否所有照片都已拍摄
  400. if (this.photos.every(photo => photo !== null)) {
  401. uni.showLoading({
  402. title: '处理中...'
  403. });
  404. // 获取必要参数
  405. const application_id = uni.getStorageSync('appId');
  406. const tenant_id = uni.getStorageSync('tenant_id') || '1';
  407. // 调用视觉分析接口
  408. uni.request({
  409. url: `${apiBaseUrl}/api/system/job/trigger_visual_analysis?application_id=${application_id}&tenant_id=${tenant_id}`,
  410. method: 'POST',
  411. success: (res) => {
  412. console.log('视觉分析触发成功:', res);
  413. // 继续处理跳转逻辑
  414. uni.hideLoading();
  415. uni.showToast({
  416. title: '手部照片采集完成',
  417. icon: 'success',
  418. duration: 2000,
  419. success: () => {
  420. // 延迟跳转,让用户看到成功提示
  421. setTimeout(() => {
  422. // 使用redirectTo替代navigateTo,避免页面栈溢出
  423. uni.redirectTo({
  424. url: '/pages/interview_success/interview_success'
  425. });
  426. }, 100);
  427. }
  428. });
  429. },
  430. fail: (err) => {
  431. console.error('视觉分析触发失败:', err);
  432. uni.hideLoading();
  433. uni.showToast({
  434. title: '处理失败,请重试',
  435. icon: 'none'
  436. });
  437. }
  438. });
  439. } else {
  440. uni.showToast({
  441. title: '请完成所有照片拍摄',
  442. icon: 'none'
  443. });
  444. }
  445. },
  446. // H5环境下启动摄像头
  447. startCamera() {
  448. this.showCamera = true;
  449. // 确保浏览器支持getUserMedia
  450. if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  451. // 根据当前摄像头位置设置facingMode
  452. const facingMode = this.cameraPosition === 'front' ? 'user' : 'environment';
  453. navigator.mediaDevices.getUserMedia({
  454. video: { facingMode: facingMode }
  455. })
  456. .then(stream => {
  457. this.mediaStream = stream;
  458. // 等待DOM更新后再设置视频源
  459. this.$nextTick(() => {
  460. const videoElement = this.$refs.videoElement;
  461. if (videoElement) {
  462. videoElement.srcObject = stream;
  463. }
  464. });
  465. })
  466. .catch(error => {
  467. console.error('获取摄像头失败:', error);
  468. uni.showToast({
  469. title: '无法访问摄像头,请检查权限设置',
  470. icon: 'none'
  471. });
  472. this.showCamera = false;
  473. });
  474. } else {
  475. uni.showToast({
  476. title: '您的浏览器不支持摄像头功能',
  477. icon: 'none'
  478. });
  479. this.showCamera = false;
  480. }
  481. },
  482. // H5环境下拍照
  483. capturePhoto() {
  484. console.log('执行H5拍照方法');
  485. const videoElement = this.$refs.videoElement;
  486. const canvasElement = this.$refs.canvasElement;
  487. if (videoElement && canvasElement) {
  488. try {
  489. const context = canvasElement.getContext('2d');
  490. // 设置canvas尺寸与视频一致
  491. canvasElement.width = videoElement.videoWidth;
  492. canvasElement.height = videoElement.videoHeight;
  493. // 在canvas上绘制当前视频帧
  494. context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
  495. // 将canvas内容转为base64图片
  496. const photoData = canvasElement.toDataURL('image/jpeg');
  497. // 更新照片数据
  498. this.$set(this.photos, this.currentStep, photoData);
  499. // 上传照片
  500. this.uploadPhoto(photoData, this.photoTypes[this.currentStep]);
  501. // 关闭摄像头
  502. this.stopMediaStream();
  503. this.showCamera = false;
  504. } catch (err) {
  505. console.error('H5拍照失败:', err);
  506. uni.showToast({
  507. title: '拍照失败,请重试',
  508. icon: 'none'
  509. });
  510. }
  511. }
  512. },
  513. // 小程序环境下拍照
  514. capturePhotoMP() {
  515. console.log('执行小程序拍照方法');
  516. if (!this.cameraContext) {
  517. console.error('相机上下文不存在');
  518. this.handleCameraInitError();
  519. return;
  520. }
  521. try {
  522. uni.showLoading({
  523. title: '拍照中...',
  524. mask: true
  525. });
  526. this.cameraContext.takePhoto({
  527. quality: 'high',
  528. success: (res) => {
  529. console.log('拍照成功:', res);
  530. uni.hideLoading();
  531. // 先清空当前照片,确保状态一致
  532. this.$set(this.photos, this.currentStep, null);
  533. this.$set(this.photoLinks, this.currentStep, null);
  534. // 然后设置新照片
  535. this.$set(this.photos, this.currentStep, res.tempImagePath);
  536. // 上传照片
  537. this.uploadPhoto(res.tempImagePath, this.photoTypes[this.currentStep]);
  538. // 关闭相机
  539. this.showCamera = false;
  540. },
  541. fail: (err) => {
  542. uni.hideLoading();
  543. console.error('拍照失败:', err);
  544. uni.showToast({
  545. title: '拍照失败,请重试',
  546. icon: 'none'
  547. });
  548. // 尝试使用替代方法
  549. this.fallbackToChooseImage();
  550. }
  551. });
  552. } catch (err) {
  553. uni.hideLoading();
  554. console.error('takePhoto方法执行失败:', err);
  555. this.fallbackToChooseImage();
  556. }
  557. },
  558. // 添加相机初始化错误处理
  559. handleCameraInitError() {
  560. if (this.cameraInitRetries < 3) {
  561. this.cameraInitRetries++;
  562. uni.showToast({
  563. title: `相机初始化失败,正在重试(${this.cameraInitRetries}/3)`,
  564. icon: 'none'
  565. });
  566. setTimeout(() => {
  567. this.showCamera = false;
  568. setTimeout(() => {
  569. this.takePhoto();
  570. }, 500);
  571. }, 1000);
  572. } else {
  573. uni.showToast({
  574. title: '相机初始化失败,将使用系统相机',
  575. icon: 'none'
  576. });
  577. this.fallbackToChooseImage();
  578. }
  579. },
  580. // 添加备用的系统相机方法
  581. fallbackToChooseImage() {
  582. this.showCamera = false;
  583. // 使用系统相机作为备选方案
  584. uni.chooseImage({
  585. count: 1,
  586. sourceType: ['camera'],
  587. success: (res) => {
  588. // 更新当前步骤的照片
  589. this.$set(this.photos, this.currentStep, res.tempFilePaths[0]);
  590. // 上传照片
  591. this.uploadPhoto(res.tempFilePaths[0], this.photoTypes[this.currentStep]);
  592. },
  593. fail: (err) => {
  594. console.error('选择图片失败:', err);
  595. uni.showToast({
  596. title: '拍照失败,请重试',
  597. icon: 'none'
  598. });
  599. }
  600. });
  601. },
  602. // 修改相机错误处理方法
  603. handleCameraError(e) {
  604. console.error('相机错误:', e.detail);
  605. // 记录更详细的错误信息
  606. const errorInfo = JSON.stringify(e.detail);
  607. console.log('详细错误信息:', errorInfo);
  608. uni.showToast({
  609. title: '相机启动失败,将使用系统相机',
  610. icon: 'none'
  611. });
  612. // 使用备用方法
  613. this.fallbackToChooseImage();
  614. },
  615. // 取消拍照 - 更新为同时支持H5和小程序
  616. cancelCamera() {
  617. if (this.isH5) {
  618. this.stopMediaStream();
  619. }
  620. this.showCamera = false;
  621. // 重置当前步骤的照片状态,确保需要重新拍照
  622. this.$set(this.photos, this.currentStep, null);
  623. // 重置当前步骤的照片链接
  624. this.$set(this.photoLinks, this.currentStep, null);
  625. },
  626. // 停止摄像头流
  627. stopMediaStream() {
  628. if (this.mediaStream) {
  629. this.mediaStream.getTracks().forEach(track => {
  630. track.stop();
  631. });
  632. this.mediaStream = null;
  633. }
  634. },
  635. // base64转blob工具方法
  636. base64ToBlob(base64, mimeType) {
  637. const byteCharacters = atob(base64);
  638. const byteArrays = [];
  639. for (let offset = 0; offset < byteCharacters.length; offset += 512) {
  640. const slice = byteCharacters.slice(offset, offset + 512);
  641. const byteNumbers = new Array(slice.length);
  642. for (let i = 0; i < slice.length; i++) {
  643. byteNumbers[i] = slice.charCodeAt(i);
  644. }
  645. const byteArray = new Uint8Array(byteNumbers);
  646. byteArrays.push(byteArray);
  647. }
  648. return new Blob(byteArrays, { type: mimeType });
  649. },
  650. retryCamera() {
  651. this.showCamera = false;
  652. setTimeout(() => {
  653. this.takePhoto();
  654. }, 500);
  655. },
  656. // 可以添加一个方法来切换蒙层显示
  657. toggleGestureOverlay() {
  658. // 实现蒙层显示/隐藏的逻辑
  659. // 如果需要的话
  660. },
  661. // 切换摄像头
  662. switchCamera() {
  663. // 切换摄像头位置
  664. this.cameraPosition = this.cameraPosition === 'front' ? 'back' : 'front';
  665. // 如果是H5环境,需要重新启动摄像头
  666. if (this.isH5 && this.showCamera) {
  667. this.stopMediaStream();
  668. this.startCamera();
  669. }
  670. },
  671. // 添加自动进入下一步的方法
  672. autoNextStep() {
  673. if (this.currentStep < 5) {
  674. this.currentStep++;
  675. // 如果不是最后一步,自动开始拍摄下一张照片
  676. if (this.currentStep < 6) {
  677. this.takePhoto();
  678. }
  679. } else if (this.currentStep === 5 && this.photos[5]) {
  680. // 所有照片都已拍摄完成,进行提交
  681. this.submitAllPhotos();
  682. }
  683. }
  684. }
  685. }
  686. </script>
  687. <style>
  688. .container {
  689. display: flex;
  690. flex-direction: column;
  691. height: 94vh;
  692. background-color: #f5f5f5;
  693. }
  694. .header {
  695. padding: 20rpx;
  696. background-color: #007AFF;
  697. text-align: center;
  698. }
  699. .title {
  700. color: #ffffff;
  701. font-size: 36rpx;
  702. font-weight: bold;
  703. }
  704. .photo-container {
  705. flex: 1;
  706. padding: 20rpx;
  707. display: flex;
  708. flex-direction: column;
  709. }
  710. .instruction {
  711. padding: 20rpx;
  712. background-color: #E5E5EA;
  713. border-radius: 10rpx;
  714. margin-bottom: 20rpx;
  715. }
  716. .preview-container {
  717. flex: 1;
  718. display: flex;
  719. justify-content: center;
  720. align-items: center;
  721. background-color: #E5E5EA;
  722. border-radius: 10rpx;
  723. margin-bottom: 20rpx;
  724. overflow: hidden;
  725. }
  726. .preview-image {
  727. width: 100%;
  728. height: 100%;
  729. }
  730. .empty-preview {
  731. display: flex;
  732. justify-content: center;
  733. align-items: center;
  734. width: 100%;
  735. height: 100%;
  736. color: #999;
  737. }
  738. .thumbnails {
  739. display: flex;
  740. justify-content: space-around;
  741. margin-bottom: 20rpx;
  742. }
  743. .thumbnail-item {
  744. width: 150rpx;
  745. height: 150rpx;
  746. border-radius: 10rpx;
  747. overflow: hidden;
  748. background-color: #E5E5EA;
  749. display: flex;
  750. justify-content: center;
  751. align-items: center;
  752. border: 4rpx solid transparent;
  753. }
  754. .thumbnail-item.active {
  755. border-color: #007AFF;
  756. }
  757. .thumbnail-item.completed {
  758. background-color: #ffffff;
  759. }
  760. .thumbnail-image {
  761. width: 100%;
  762. height: 100%;
  763. }
  764. .thumbnail-placeholder {
  765. font-size: 40rpx;
  766. color: #999;
  767. }
  768. .controls {
  769. padding: 20rpx;
  770. background-color: #ffffff;
  771. border-top: 1px solid #0039b3;
  772. }
  773. .camera-btn {
  774. width: 100%;
  775. height: 80rpx;
  776. line-height: 80rpx;
  777. text-align: center;
  778. background-color: #0039b3;
  779. color: white;
  780. border-radius: 40rpx;
  781. margin-bottom: 20rpx;
  782. }
  783. .navigation-btns {
  784. display: flex;
  785. justify-content: space-between;
  786. }
  787. .nav-btn {
  788. width: 48%;
  789. height: 80rpx;
  790. line-height: 80rpx;
  791. text-align: center;
  792. border-radius: 40rpx;
  793. }
  794. .nav-btn.prev {
  795. background-color: #E5E5EA;
  796. color: #333;
  797. }
  798. .nav-btn.next {
  799. background-color: #34C759;
  800. color: white;
  801. }
  802. .nav-btn[disabled] {
  803. opacity: 0.5;
  804. }
  805. /* 浏览器摄像头相关样式 */
  806. .camera-container {
  807. position: fixed;
  808. top: 0;
  809. left: 0;
  810. width: 100%;
  811. height: 100%;
  812. background-color: #000;
  813. z-index: 999;
  814. display: flex;
  815. flex-direction: column;
  816. justify-content: center;
  817. align-items: center;
  818. }
  819. .camera-video {
  820. width: 100%;
  821. height: 70%;
  822. object-fit: cover;
  823. }
  824. .camera-canvas {
  825. display: none;
  826. }
  827. .capture-btn {
  828. width: 200rpx;
  829. height: 200rpx;
  830. border-radius: 50%;
  831. background-color: #ffffff;
  832. border: 10rpx solid #0039b3;
  833. margin: 30rpx 0;
  834. }
  835. .cancel-btn {
  836. width: 200rpx;
  837. height: 80rpx;
  838. line-height: 80rpx;
  839. background-color: rgba(255, 255, 255, 0.3);
  840. color: #ffffff;
  841. text-align: center;
  842. border-radius: 40rpx;
  843. }
  844. /* 小程序相机组件样式 */
  845. .camera-component {
  846. width: 100%;
  847. height: 100%;
  848. display: block;
  849. }
  850. .camera-controls {
  851. width: 100%;
  852. display: flex;
  853. flex-direction: column;
  854. align-items: center;
  855. position: absolute;
  856. bottom: 50rpx;
  857. z-index: 9999;
  858. }
  859. /* 添加手势引导蒙层样式 */
  860. .gesture-overlay {
  861. position: absolute;
  862. top: 0;
  863. left: 0;
  864. width: 100%;
  865. height: 80%;
  866. display: flex;
  867. flex-direction: column;
  868. justify-content: center;
  869. align-items: center;
  870. pointer-events: none; /* 允许点击穿透 */
  871. z-index: 10;
  872. }
  873. .gesture-image {
  874. width: 100%;
  875. height: 100%;
  876. /* opacity: 0.6; */
  877. }
  878. .gesture-hint {
  879. position: fixed;
  880. top: 1px;
  881. background-color: rgba(0, 0, 0, 0.5);
  882. padding: 10rpx 20rpx;
  883. border-radius: 10rpx;
  884. margin-top: 20rpx;
  885. z-index: 999;
  886. }
  887. .gesture-hint-text {
  888. color: white;
  889. font-size: 28rpx;
  890. text-align: center;
  891. }
  892. /* 添加切换摄像头按钮样式 */
  893. .switch-camera-btn {
  894. width: 200rpx;
  895. height: 80rpx;
  896. line-height: 80rpx;
  897. background-color: rgba(255, 255, 255, 0.3);
  898. color: #ffffff;
  899. text-align: center;
  900. border-radius: 40rpx;
  901. margin: 20rpx 0;
  902. }
  903. .camera-buttons {
  904. display: flex;
  905. flex-direction: row;
  906. justify-content: center;
  907. width: 100%;
  908. margin-top: 20rpx;
  909. }
  910. .capture-btn {
  911. width: 200rpx;
  912. height: 200rpx;
  913. border-radius: 50%;
  914. background-color: #ffffff;
  915. border: 10rpx solid #0039b3;
  916. margin: 30rpx 0;
  917. }
  918. .switch-camera-btn, .cancel-btn {
  919. width: 200rpx;
  920. height: 80rpx;
  921. line-height: 80rpx;
  922. background-color: rgba(255, 255, 255, 0.3);
  923. color: #ffffff;
  924. text-align: center;
  925. border-radius: 40rpx;
  926. margin: 0 20rpx;
  927. }
  928. /* 添加右上角引导图标样式 */
  929. .guide-icon {
  930. position: absolute;
  931. top: 30rpx;
  932. right: 30rpx;
  933. width: 160rpx;
  934. height: 200rpx;
  935. display: flex;
  936. flex-direction: column;
  937. align-items: center;
  938. justify-content: center;
  939. background-color: rgba(0, 0, 0, 0.5);
  940. border-radius: 10rpx;
  941. z-index: 11;
  942. }
  943. .mp-video-player{
  944. width: 100%;
  945. height: 100%;
  946. border-radius: 10rpx;
  947. }
  948. .guide-image {
  949. width: 160rpx;
  950. height: 200rpx;
  951. }
  952. .guide-text {
  953. color: white;
  954. font-size: 24rpx;
  955. margin-top: 5rpx;
  956. }
  957. </style>