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