interview.vue 27 KB

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