interview_retake.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567
  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: 'https://data.qicai321.com/minlong/18590378-6792-4a26-be18-ad9f2bcc4159.png',
  71. left_back: 'https://data.qicai321.com/minlong/e08cff2b-3b1d-478f-a62b-766b38445a16.png',
  72. left_fist: 'https://data.qicai321.com/minlong/d30ccab7-9cfe-4386-bf0e-ac1f0045bd76.png',
  73. right_palm: 'https://data.qicai321.com/minlong/8068a698-ac40-4a5d-a737-54dba47a668d.png',
  74. right_back: 'https://data.qicai321.com/minlong/f04a1f7e-4f79-49c7-9a02-bbad296672ea.png',
  75. right_fist: 'https://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/interview-question/interview-question'//'/pages/success/success?type=retake&message=手部照片补拍完成,请等待系统审核'
  208. }); */
  209. this.navigateToNextPage();
  210. }, 1500);
  211. }
  212. });
  213. },
  214. // 根据配置决定跳转到下一个页面
  215. navigateToNextPage() {
  216. // 获取本地存储的配置数据
  217. let configData = {};
  218. try {
  219. const configStr = uni.getStorageSync('configData');
  220. if (configStr && configStr.trim()) {
  221. configData = JSON.parse(configStr);
  222. }
  223. } catch (error) {
  224. console.error('解析configData失败:', error);
  225. configData = {};
  226. }
  227. console.log('interview_success页面获取到的配置数据:', configData);
  228. // 获取问题形式开关配置
  229. const questionFormSwitches = configData?.question_form_switches || {};
  230. // 检查是否启用了选择题相关功能
  231. const hasChoiceQuestions = questionFormSwitches.enable_fill_blank ||
  232. questionFormSwitches.enable_image_choice ||
  233. questionFormSwitches.enable_multiple_choice ||
  234. questionFormSwitches.enable_single_choice;
  235. // 肢体检测配置
  236. const hasPostureDetection = configData?.enable_posture_check;
  237. // 候选人提问配置
  238. const hasCandidateQuestions = questionFormSwitches.enable_candidate_questions;
  239. let targetUrl = '/pages/success/success'; // 默认跳转到成功页面
  240. let pageName = 'success页面';
  241. console.log('interview_success页面配置检查:', {
  242. hasChoiceQuestions,
  243. hasPostureDetection,
  244. hasCandidateQuestions,
  245. questionFormSwitches
  246. });
  247. if (hasCandidateQuestions) {
  248. // 如果启用了候选人提问,跳转到interview-question页面
  249. targetUrl = '/pages/interview-question/interview-question';
  250. pageName = 'interview-question页面';
  251. }else{
  252. targetUrl = '/pages/success/success';
  253. pageName = 'success页面';
  254. }
  255. console.log('interview_success页面根据配置跳转到:', targetUrl);
  256. // 执行页面跳转
  257. uni.reLaunch({
  258. url: targetUrl,
  259. success: () => {
  260. console.log(`成功跳转到${pageName}`);
  261. },
  262. fail: (err) => {
  263. console.error(`跳转到${pageName}失败:`, err);
  264. // 如果跳转失败,尝试使用navigateTo
  265. uni.navigateTo({
  266. url: targetUrl,
  267. fail: (navigateErr) => {
  268. console.error(`导航到${pageName}也失败:`, navigateErr);
  269. // 最后尝试使用redirectTo
  270. uni.redirectTo({
  271. url: targetUrl,
  272. fail: (redirectErr) => {
  273. console.error('所有跳转方式都失败:', redirectErr);
  274. // 如果所有跳转方式都失败,跳转到默认成功页面
  275. uni.reLaunch({
  276. url: '/pages/success/success'
  277. });
  278. }
  279. });
  280. }
  281. });
  282. }
  283. });
  284. },
  285. handleError(e) {
  286. console.error('相机错误:', e.detail);
  287. uni.showToast({
  288. title: '相机启动失败,将使用系统相机',
  289. icon: 'none'
  290. });
  291. this.fallbackToChooseImage();
  292. },
  293. fallbackToChooseImage() {
  294. this.showCamera = false;
  295. uni.chooseImage({
  296. count: 1,
  297. sourceType: ['camera'],
  298. success: async (res) => {
  299. try {
  300. const uploadResult = await this.uploadImage(res.tempFilePaths[0]);
  301. this.uploadedImages[this.currentStep.type] = uploadResult.data.url;
  302. this.handlePhotoSuccess();
  303. } catch (err) {
  304. this.handlePhotoError();
  305. }
  306. },
  307. fail: () => this.handlePhotoError()
  308. });
  309. },
  310. handlePhotoSuccess() {
  311. if (this.currentIndex < this.failedItems.length - 1) {
  312. this.currentIndex++;
  313. this.showCamera = true;
  314. this.tempImagePath = '';
  315. } else {
  316. this.completeRetake();
  317. }
  318. },
  319. handlePhotoError() {
  320. uni.showToast({
  321. title: '拍照失败,请重试',
  322. icon: 'none'
  323. });
  324. },
  325. handleVideoError(e) {
  326. console.error('视频加载错误:', e);
  327. this.videoError = true;
  328. this.videoErrorMsg = '视频加载失败,请检查网络';
  329. this.isVideoLoading = false;
  330. // 尝试重新加载视频
  331. if (this.videoContext) {
  332. setTimeout(() => {
  333. this.videoContext.play();
  334. }, 1000);
  335. }
  336. },
  337. handleVideoLoaded() {
  338. this.isVideoLoading = false;
  339. this.videoError = false;
  340. this.videoErrorMsg = '';
  341. },
  342. initVideoContext() {
  343. // 初始化视频上下文
  344. if (!this.videoContext) {
  345. this.videoContext = uni.createVideoContext('mpVideo', this);
  346. }
  347. },
  348. onShow() {
  349. this.initVideoContext();
  350. }
  351. }
  352. }
  353. </script>
  354. <style>
  355. .interview-container {
  356. height: 100vh;
  357. display: flex;
  358. flex-direction: column;
  359. }
  360. .header {
  361. padding: 40rpx;
  362. text-align: center;
  363. }
  364. .title {
  365. font-size: 36rpx;
  366. font-weight: bold;
  367. }
  368. .subtitle {
  369. font-size: 28rpx;
  370. color: #666;
  371. margin-top: 20rpx;
  372. }
  373. .camera-container {
  374. position: fixed;
  375. top: 0;
  376. left: 0;
  377. width: 100%;
  378. height: 100%;
  379. background-color: #000;
  380. z-index: 999;
  381. }
  382. .camera {
  383. width: 100%;
  384. height: 100%;
  385. }
  386. .gesture-overlay {
  387. position: absolute;
  388. top: 0;
  389. left: 0;
  390. width: 100%;
  391. height: 100%;
  392. display: flex;
  393. flex-direction: column;
  394. justify-content: center;
  395. align-items: center;
  396. pointer-events: none;
  397. z-index: 10;
  398. }
  399. .gesture-image {
  400. position: absolute;
  401. top: 0;
  402. left: 0;
  403. width: 100%;
  404. height: 90%;
  405. opacity: 0.5;
  406. /* 设置图片混合模式,使绿色更突出 */
  407. mix-blend-mode: screen;
  408. }
  409. .camera-tip {
  410. position: absolute;
  411. top: 20rpx;
  412. display: flex;
  413. flex-direction: column;
  414. align-items: center;
  415. z-index: 11;
  416. }
  417. .guide-icon {
  418. width:160rpx;
  419. height: 200rpx;
  420. background-color: rgba(0, 0, 0, 0.3);
  421. border-radius: 20rpx;
  422. overflow: hidden;
  423. }
  424. .mp-video-player {
  425. width: 100%;
  426. height: 100%;
  427. object-fit: cover;
  428. }
  429. .tip-text {
  430. position: absolute;
  431. top:20rpx;
  432. left: 30%;
  433. color: #fff;
  434. font-size: 28rpx;
  435. margin-top: 16rpx;
  436. background-color: rgba(0, 0, 0, 0.3);
  437. padding: 8rpx 20rpx;
  438. border-radius: 30rpx;
  439. }
  440. .capture-btn {
  441. position: absolute;
  442. bottom: 100rpx;
  443. left: 50%;
  444. transform: translateX(-50%);
  445. width: 140rpx;
  446. height: 140rpx;
  447. border-radius: 50%;
  448. background: #fff;
  449. border: 10rpx solid #0039b3;
  450. z-index: 999;
  451. }
  452. .preview-container {
  453. flex: 1;
  454. display: flex;
  455. flex-direction: column;
  456. }
  457. .preview-container image {
  458. flex: 1;
  459. width: 100%;
  460. }
  461. .preview-buttons {
  462. display: flex;
  463. padding: 20rpx;
  464. justify-content: space-around;
  465. }
  466. .btn-retake, .btn-confirm {
  467. width: 45%;
  468. height: 80rpx;
  469. line-height: 80rpx;
  470. text-align: center;
  471. border-radius: 8rpx;
  472. }
  473. .btn-retake {
  474. background: #f5f5f5;
  475. color: #333;
  476. }
  477. .btn-confirm {
  478. background: #003399;
  479. color: #fff;
  480. }
  481. .progress-bar {
  482. display: flex;
  483. padding: 20rpx;
  484. background: #fff;
  485. }
  486. .step-item {
  487. flex: 1;
  488. text-align: center;
  489. font-size: 24rpx;
  490. color: #999;
  491. position: relative;
  492. padding: 20rpx 0;
  493. }
  494. .step-item.active {
  495. color: #003399;
  496. font-weight: bold;
  497. }
  498. .step-item.completed {
  499. color: #67c23a;
  500. }
  501. .video-loading, .video-error {
  502. position: absolute;
  503. top: 0;
  504. left: 0;
  505. width: 100%;
  506. height: 100%;
  507. display: flex;
  508. justify-content: center;
  509. align-items: center;
  510. background: rgba(0, 0, 0, 0.5);
  511. }
  512. .video-loading text, .video-error text {
  513. color: #fff;
  514. font-size: 24rpx;
  515. }
  516. .video-error text {
  517. color: #ff4d4f;
  518. }
  519. </style>