interview_retake.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. <template>
  2. <view class="interview-container">
  3. <view class="header">
  4. <view class="title">补拍检测</view>
  5. <view class="subtitle">请按提示重新拍摄失败项</view>
  6. </view>
  7. <view class="camera-container" v-if="showCamera">
  8. <camera class="camera" device-position="front" flash="off" @error="handleError">
  9. <view class="gesture-overlay">
  10. <image class="gesture-image" :src="currentStep.tipImage"></image>
  11. <cover-view class="tip-text">{{currentStep.tipText}}</cover-view>
  12. </view>
  13. <view class="camera-tip" :style="currentStep.type.includes('right_')?'left:30rpx':'right:30rpx'">
  14. <view class="guide-icon">
  15. <video
  16. :src="currentStep.guideVideo"
  17. id="mpVideo"
  18. autoplay
  19. class="mp-video-player"
  20. :controls="false"
  21. loop
  22. muted
  23. object-fit="contain"
  24. @error="handleVideoError"
  25. @loadedmetadata="handleVideoLoaded"
  26. ></video>
  27. <view class="video-loading" v-if="isVideoLoading">
  28. <text>加载中...</text>
  29. </view>
  30. <view class="video-error" v-if="videoError">
  31. <text>{{videoErrorMsg}}</text>
  32. </view>
  33. </view>
  34. </view>
  35. </camera>
  36. <view class="capture-btn" @tap="takePhoto"></view>
  37. </view>
  38. <view class="preview-container" v-else>
  39. <image :src="tempImagePath" mode="aspectFit"></image>
  40. <view class="preview-buttons">
  41. <button class="btn-retake" @tap="retakePhoto">重拍</button>
  42. <button class="btn-confirm" @tap="confirmPhoto">确认</button>
  43. </view>
  44. </view>
  45. <view class="progress-bar">
  46. <view class="step-item" v-for="(item, index) in failedItems" :key="index"
  47. :class="{'active': currentIndex === index, 'completed': index < currentIndex}">
  48. {{item.name}}
  49. </view>
  50. </view>
  51. </view>
  52. </template>
  53. <script>
  54. import { apiBaseUrl } from '@/common/config.js'; // 导入基础URL配置
  55. export default {
  56. data() {
  57. return {
  58. failedItems: [],
  59. currentIndex: 0,
  60. showCamera: true,
  61. tempImagePath: '',
  62. uploadedImages: {},
  63. isH5: false,
  64. cameraPosition: 'front',
  65. cameraMode: 'normal',
  66. cameraContext: null,
  67. cameraInitRetries: 0,
  68. // 添加手势引导图片
  69. gestureOverlays: {
  70. left_palm: 'http://data.qicai321.com/minlong/18590378-6792-4a26-be18-ad9f2bcc4159.png',
  71. left_back: 'http://data.qicai321.com/minlong/e08cff2b-3b1d-478f-a62b-766b38445a16.png',
  72. left_fist: 'http://data.qicai321.com/minlong/d30ccab7-9cfe-4386-bf0e-ac1f0045bd76.png',
  73. right_palm: 'http://data.qicai321.com/minlong/8068a698-ac40-4a5d-a737-54dba47a668d.png',
  74. right_back: 'http://data.qicai321.com/minlong/f04a1f7e-4f79-49c7-9a02-bbad296672ea.png',
  75. right_fist: 'http://data.qicai321.com/minlong/1d9bbc36-2fb8-4489-bff6-c36e7a31bd37.png'
  76. },
  77. // 添加引导视频
  78. guideVideos: {
  79. left_palm: 'http://data.qicai321.com/minlong/fd080e3b-67be-4ce7-87a3-58d047cfbbb1.mp4',
  80. left_back: 'http://data.qicai321.com/minlong/394a858c-672a-44bd-8206-450913863900.mp4',
  81. left_fist: 'http://data.qicai321.com/minlong/37153e68-a8f0-4a93-b677-5e5678379243.mp4',
  82. right_palm: 'http://data.qicai321.com/minlong/ebf6e43f-ffdf-49bb-8b00-adeff9ce1b56.mp4',
  83. right_back: 'http://data.qicai321.com/minlong/e0ca45e2-af3e-42a0-9dd1-4de545e9c720.mp4',
  84. right_fist: 'http://data.qicai321.com/minlong/77028dd6-22bb-41b4-8879-19699e8b1dbb.mp4'
  85. },
  86. isVideoLoading: true,
  87. videoError: false,
  88. videoErrorMsg: '',
  89. videoContext: null
  90. }
  91. },
  92. computed: {
  93. currentStep() {
  94. if (!this.failedItems.length) return null
  95. const current = this.failedItems[this.currentIndex]
  96. return {
  97. ...current,
  98. tipText: `${current.name}`,
  99. tipImage: this.gestureOverlays[current.type],
  100. guideVideo: this.guideVideos[current.type]
  101. }
  102. }
  103. },
  104. onLoad(options) {
  105. if (options.failedItems) {
  106. const items = JSON.parse(options.failedItems)
  107. this.failedItems = items.map(item => ({
  108. name: this.getNameByType(item.type),
  109. type: item.type
  110. }))
  111. }
  112. },
  113. methods: {
  114. getNameByType(type) {
  115. const nameMap = {
  116. left_palm: '展示完整的左手手掌',
  117. left_back: '展示完整的左手手背',
  118. left_fist: '展示完整的左手握拳',
  119. right_palm: '展示完整的右手手掌',
  120. right_back: '展示完整的右手手背',
  121. right_fist: '展示完整的右手握拳'
  122. }
  123. return nameMap[type] || ''
  124. },
  125. takePhoto() {
  126. const camera = uni.createCameraContext()
  127. camera.takePhoto({
  128. quality: 'high',
  129. success: (res) => {
  130. this.tempImagePath = res.tempImagePath
  131. this.showCamera = false
  132. },
  133. fail: (err) => {
  134. uni.showToast({
  135. title: '拍照失败',
  136. icon: 'none'
  137. })
  138. }
  139. })
  140. },
  141. retakePhoto() {
  142. this.showCamera = true
  143. this.tempImagePath = ''
  144. },
  145. async confirmPhoto() {
  146. try {
  147. const uploadResult = await this.uploadImage(this.tempImagePath)
  148. this.uploadedImages[this.currentStep.type] = uploadResult.url
  149. if (this.currentIndex < this.failedItems.length - 1) {
  150. this.currentIndex++
  151. this.showCamera = true
  152. this.tempImagePath = ''
  153. } else {
  154. // 所有补拍完成,返回结果
  155. this.completeRetake()
  156. }
  157. } catch (err) {
  158. uni.showToast({
  159. title: '上传失败,请重试',
  160. icon: 'none'
  161. })
  162. }
  163. },
  164. async uploadImage(tempFilePath) {
  165. const tenant_id = uni.getStorageSync('tenant_id') || '1';
  166. const description = `补拍-${this.currentStep.name}`;
  167. return new Promise((resolve, reject) => {
  168. uni.uploadFile({
  169. url: `${apiBaseUrl}/job/upload_posture_photo`,
  170. filePath: tempFilePath,
  171. name: 'photo',
  172. formData: {
  173. 'application_id': uni.getStorageSync('appId'),
  174. 'tenant_id': tenant_id,
  175. 'description': description
  176. },
  177. success: (uploadRes) => {
  178. try {
  179. const result = typeof uploadRes.data === 'string' ?
  180. JSON.parse(uploadRes.data) : uploadRes.data;
  181. resolve(result);
  182. } catch (e) {
  183. reject(new Error('解析上传结果失败'));
  184. }
  185. },
  186. fail: reject
  187. });
  188. });
  189. },
  190. completeRetake() {
  191. // 返回检测结果页面并传递补拍结果
  192. const pages = getCurrentPages()
  193. const prevPage = pages[pages.length - 2]
  194. // 更新上一页的检测结果
  195. if (prevPage && prevPage.$vm) {
  196. prevPage.$vm.updateCheckResults(this.uploadedImages)
  197. }
  198. // 显示成功提示
  199. uni.showToast({
  200. title: '补拍完成',
  201. icon: 'success',
  202. duration: 1500,
  203. success: () => {
  204. // 延迟跳转到成功页面
  205. setTimeout(() => {
  206. uni.redirectTo({
  207. url: '/pages/success/success?type=retake&message=手部照片补拍完成,请等待系统审核'
  208. });
  209. }, 1500);
  210. }
  211. });
  212. },
  213. handleError(e) {
  214. console.error('相机错误:', e.detail);
  215. uni.showToast({
  216. title: '相机启动失败,将使用系统相机',
  217. icon: 'none'
  218. });
  219. this.fallbackToChooseImage();
  220. },
  221. fallbackToChooseImage() {
  222. this.showCamera = false;
  223. uni.chooseImage({
  224. count: 1,
  225. sourceType: ['camera'],
  226. success: async (res) => {
  227. try {
  228. const uploadResult = await this.uploadImage(res.tempFilePaths[0]);
  229. this.uploadedImages[this.currentStep.type] = uploadResult.data.url;
  230. this.handlePhotoSuccess();
  231. } catch (err) {
  232. this.handlePhotoError();
  233. }
  234. },
  235. fail: () => this.handlePhotoError()
  236. });
  237. },
  238. handlePhotoSuccess() {
  239. if (this.currentIndex < this.failedItems.length - 1) {
  240. this.currentIndex++;
  241. this.showCamera = true;
  242. this.tempImagePath = '';
  243. } else {
  244. this.completeRetake();
  245. }
  246. },
  247. handlePhotoError() {
  248. uni.showToast({
  249. title: '拍照失败,请重试',
  250. icon: 'none'
  251. });
  252. },
  253. handleVideoError(e) {
  254. console.error('视频加载错误:', e);
  255. this.videoError = true;
  256. this.videoErrorMsg = '视频加载失败,请检查网络';
  257. this.isVideoLoading = false;
  258. // 尝试重新加载视频
  259. if (this.videoContext) {
  260. setTimeout(() => {
  261. this.videoContext.play();
  262. }, 1000);
  263. }
  264. },
  265. handleVideoLoaded() {
  266. this.isVideoLoading = false;
  267. this.videoError = false;
  268. this.videoErrorMsg = '';
  269. },
  270. initVideoContext() {
  271. // 初始化视频上下文
  272. if (!this.videoContext) {
  273. this.videoContext = uni.createVideoContext('mpVideo', this);
  274. }
  275. },
  276. onShow() {
  277. this.initVideoContext();
  278. }
  279. }
  280. }
  281. </script>
  282. <style>
  283. .interview-container {
  284. height: 100vh;
  285. display: flex;
  286. flex-direction: column;
  287. }
  288. .header {
  289. padding: 40rpx;
  290. text-align: center;
  291. }
  292. .title {
  293. font-size: 36rpx;
  294. font-weight: bold;
  295. }
  296. .subtitle {
  297. font-size: 28rpx;
  298. color: #666;
  299. margin-top: 20rpx;
  300. }
  301. .camera-container {
  302. position: fixed;
  303. top: 0;
  304. left: 0;
  305. width: 100%;
  306. height: 100%;
  307. background-color: #000;
  308. z-index: 999;
  309. }
  310. .camera {
  311. width: 100%;
  312. height: 100%;
  313. }
  314. .gesture-overlay {
  315. position: absolute;
  316. top: 0;
  317. left: 0;
  318. width: 100%;
  319. height: 100%;
  320. display: flex;
  321. flex-direction: column;
  322. justify-content: center;
  323. align-items: center;
  324. pointer-events: none;
  325. z-index: 10;
  326. }
  327. .gesture-image {
  328. position: absolute;
  329. top: 0;
  330. left: 0;
  331. width: 100%;
  332. height: 90%;
  333. opacity: 0.5;
  334. /* 设置图片混合模式,使绿色更突出 */
  335. mix-blend-mode: screen;
  336. }
  337. .camera-tip {
  338. position: absolute;
  339. top: 20rpx;
  340. display: flex;
  341. flex-direction: column;
  342. align-items: center;
  343. z-index: 11;
  344. }
  345. .guide-icon {
  346. width:160rpx;
  347. height: 200rpx;
  348. background-color: rgba(0, 0, 0, 0.3);
  349. border-radius: 20rpx;
  350. overflow: hidden;
  351. }
  352. .mp-video-player {
  353. width: 100%;
  354. height: 100%;
  355. object-fit: cover;
  356. }
  357. .tip-text {
  358. position: absolute;
  359. top:20rpx;
  360. left: 30%;
  361. color: #fff;
  362. font-size: 28rpx;
  363. margin-top: 16rpx;
  364. background-color: rgba(0, 0, 0, 0.3);
  365. padding: 8rpx 20rpx;
  366. border-radius: 30rpx;
  367. }
  368. .capture-btn {
  369. position: absolute;
  370. bottom: 100rpx;
  371. left: 50%;
  372. transform: translateX(-50%);
  373. width: 140rpx;
  374. height: 140rpx;
  375. border-radius: 50%;
  376. background: #fff;
  377. border: 10rpx solid #0039b3;
  378. z-index: 999;
  379. }
  380. .preview-container {
  381. flex: 1;
  382. display: flex;
  383. flex-direction: column;
  384. }
  385. .preview-container image {
  386. flex: 1;
  387. width: 100%;
  388. }
  389. .preview-buttons {
  390. display: flex;
  391. padding: 20rpx;
  392. justify-content: space-around;
  393. }
  394. .btn-retake, .btn-confirm {
  395. width: 45%;
  396. height: 80rpx;
  397. line-height: 80rpx;
  398. text-align: center;
  399. border-radius: 8rpx;
  400. }
  401. .btn-retake {
  402. background: #f5f5f5;
  403. color: #333;
  404. }
  405. .btn-confirm {
  406. background: #003399;
  407. color: #fff;
  408. }
  409. .progress-bar {
  410. display: flex;
  411. padding: 20rpx;
  412. background: #fff;
  413. }
  414. .step-item {
  415. flex: 1;
  416. text-align: center;
  417. font-size: 24rpx;
  418. color: #999;
  419. position: relative;
  420. padding: 20rpx 0;
  421. }
  422. .step-item.active {
  423. color: #003399;
  424. font-weight: bold;
  425. }
  426. .step-item.completed {
  427. color: #67c23a;
  428. }
  429. .video-loading, .video-error {
  430. position: absolute;
  431. top: 0;
  432. left: 0;
  433. width: 100%;
  434. height: 100%;
  435. display: flex;
  436. justify-content: center;
  437. align-items: center;
  438. background: rgba(0, 0, 0, 0.5);
  439. }
  440. .video-loading text, .video-error text {
  441. color: #fff;
  442. font-size: 24rpx;
  443. }
  444. .video-error text {
  445. color: #ff4d4f;
  446. }
  447. </style>