interview_retake.vue 9.4 KB

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