interview.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. "use strict";
  2. const common_vendor = require("../../common/vendor.js");
  3. const common_config = require("../../common/config.js");
  4. const _sfc_main = {
  5. data() {
  6. return {
  7. currentStep: 0,
  8. photos: [null, null, null, null, null, null],
  9. // 存储6张照片:左手正面、左手反面、左手握拳、右手正面、右手反面、右手握拳
  10. instructions: [
  11. "请将左手掌正面朝上,保持手指自然伸展,确保整个手掌清晰可见",
  12. "请将左手掌反面朝上,保持手指自然伸展,确保整个手背清晰可见",
  13. "请握紧左手拳头,使拳面朝向相机,确保整个拳头清晰可见",
  14. "请将右手掌正面朝上,保持手指自然伸展,确保整个手掌清晰可见",
  15. "请将右手掌反面朝上,保持手指自然伸展,确保整个手背清晰可见",
  16. "请握紧右手拳头,使拳面朝向相机,确保整个拳头清晰可见"
  17. ],
  18. previewTexts: [
  19. "左手掌正面照片预览区",
  20. "左手掌反面照片预览区",
  21. "左手握拳照片预览区",
  22. "右手掌正面照片预览区",
  23. "右手掌反面照片预览区",
  24. "右手握拳照片预览区"
  25. ],
  26. photoTypes: ["left_palm", "left_back", "left_fist", "right_palm", "right_back", "right_fist"],
  27. // 照片类型标识
  28. isH5: false,
  29. showCamera: false,
  30. mediaStream: null,
  31. cameraContext: null,
  32. cameraMode: "normal",
  33. // 添加相机模式
  34. cameraInitRetries: 0,
  35. // 添加重试计数器
  36. gestureOverlays: [
  37. "http://data.qicai321.com/minlong/18590378-6792-4a26-be18-ad9f2bcc4159.png",
  38. "http://data.qicai321.com/minlong/e08cff2b-3b1d-478f-a62b-766b38445a16.png",
  39. "http://data.qicai321.com/minlong/d30ccab7-9cfe-4386-bf0e-ac1f0045bd76.png",
  40. "http://data.qicai321.com/minlong/8068a698-ac40-4a5d-a737-54dba47a668d.png",
  41. "http://data.qicai321.com/minlong/f04a1f7e-4f79-49c7-9a02-bbad296672ea.png",
  42. "http://data.qicai321.com/minlong/1d9bbc36-2fb8-4489-bff6-c36e7a31bd37.png"
  43. /* '/static/images/palm_overlay.png', // 手掌正面引导图
  44. '/static/images/back_overlay.png', // 手掌反面引导图
  45. '/static/images/fist_overlay.png' // 握拳引导图 */
  46. ],
  47. gestureHints: [
  48. "请将左手掌对准轮廓线",
  49. "请将左手背对准轮廓线",
  50. "请将左手拳头对准轮廓线",
  51. "请将右手掌对准轮廓线",
  52. "请将右手背对准轮廓线",
  53. "请将右手拳头对准轮廓线"
  54. ],
  55. photoLinks: [null, null, null, null, null, null],
  56. // 存储上传后的图片链接
  57. cameraPosition: "front",
  58. // 修改默认为前置摄像头
  59. guideIcon: [
  60. "http://data.qicai321.com/minlong/fd080e3b-67be-4ce7-87a3-58d047cfbbb1.mp4",
  61. "http://data.qicai321.com/minlong/394a858c-672a-44bd-8206-450913863900.mp4",
  62. "http://data.qicai321.com/minlong/37153e68-a8f0-4a93-b677-5e5678379243.mp4",
  63. "http://data.qicai321.com/minlong/ebf6e43f-ffdf-49bb-8b00-adeff9ce1b56.mp4",
  64. "http://data.qicai321.com/minlong/e0ca45e2-af3e-42a0-9dd1-4de545e9c720.mp4",
  65. "http://data.qicai321.com/minlong/77028dd6-22bb-41b4-8879-19699e8b1dbb.mp4"
  66. ]
  67. };
  68. },
  69. computed: {
  70. canGoNext() {
  71. if (this.currentStep === 5) {
  72. return this.photos.every((photo) => photo !== null);
  73. }
  74. return this.photos[this.currentStep] !== null;
  75. }
  76. },
  77. onLoad() {
  78. common_vendor.index.authorize({
  79. scope: "scope.camera",
  80. success: () => {
  81. console.log("相机权限已授权");
  82. },
  83. fail: () => {
  84. common_vendor.index.showModal({
  85. title: "提示",
  86. content: "请授权相机权限以完成手部照片采集",
  87. success: (res) => {
  88. if (res.confirm) {
  89. common_vendor.index.openSetting();
  90. }
  91. }
  92. });
  93. }
  94. });
  95. },
  96. beforeDestroy() {
  97. this.stopMediaStream();
  98. },
  99. methods: {
  100. takePhoto() {
  101. this.$set(this.photos, this.currentStep, null);
  102. this.$set(this.photoLinks, this.currentStep, null);
  103. if (this.isH5) {
  104. this.startCamera();
  105. } else {
  106. this.showCamera = true;
  107. this.cameraInitRetries = 0;
  108. this.$nextTick(() => {
  109. try {
  110. this.cameraContext = common_vendor.index.createCameraContext();
  111. console.log("相机上下文创建成功");
  112. } catch (err) {
  113. console.error("创建相机上下文失败:", err);
  114. this.handleCameraInitError();
  115. }
  116. });
  117. }
  118. },
  119. uploadPhoto(filePathOrData, type) {
  120. console.log(`准备上传${type}类型的手部照片`);
  121. common_vendor.index.showLoading({
  122. title: "上传中..."
  123. });
  124. const userInfo = common_vendor.index.getStorageSync("userInfo");
  125. userInfo ? JSON.parse(userInfo).openid || "" : "";
  126. const tenant_id = common_vendor.index.getStorageSync("tenant_id") || "1";
  127. if (!tenant_id) {
  128. common_vendor.index.hideLoading();
  129. common_vendor.index.showToast({
  130. title: "用户信息不完整,请重新登录",
  131. icon: "none"
  132. });
  133. return;
  134. }
  135. const photoDescriptions = {
  136. "left_palm": "展示完整的左手手掌",
  137. "left_back": "展示完整的左手手背",
  138. "left_fist": "展示完整的左手握拳",
  139. "right_palm": "展示完整的右手手掌",
  140. "right_back": "展示完整的右手手背",
  141. "right_fist": "展示完整的右手握拳"
  142. };
  143. const description = photoDescriptions[type] || `手部照片-${type}`;
  144. if (this.isH5 && filePathOrData.startsWith("data:image")) {
  145. const base64Data = filePathOrData.split(",")[1];
  146. const blob = this.base64ToBlob(base64Data, "image/jpeg");
  147. const formData = new FormData();
  148. formData.append("photo", blob, `${type}.jpg`);
  149. formData.append("application_id", common_vendor.index.getStorageSync("appId"));
  150. formData.append("tenant_id", tenant_id);
  151. formData.append("description", description);
  152. console.log("H5上传参数:", {
  153. application_id: common_vendor.index.getStorageSync("appId"),
  154. tenant_id,
  155. description
  156. });
  157. fetch(`${common_config.apiBaseUrl}/job/upload_posture_photo`, {
  158. method: "POST",
  159. body: formData
  160. }).then((response) => response.json()).then((result) => {
  161. console.log("照片上传成功:", result);
  162. const index = this.photoTypes.indexOf(type);
  163. if (index !== -1 && result.data && result.data.url) {
  164. this.$set(this.photoLinks, index, result.data.url);
  165. console.log(`已保存${type}类型照片链接:`, result.data.url);
  166. }
  167. common_vendor.index.hideLoading();
  168. common_vendor.index.showToast({
  169. title: "照片上传成功",
  170. icon: "success",
  171. duration: 1500,
  172. success: () => {
  173. setTimeout(() => {
  174. this.autoNextStep();
  175. }, 1500);
  176. }
  177. });
  178. }).catch((error) => {
  179. console.error("照片上传失败:", error);
  180. common_vendor.index.hideLoading();
  181. common_vendor.index.showToast({
  182. title: "照片上传失败,请重试",
  183. icon: "none"
  184. });
  185. });
  186. } else {
  187. console.log(`小程序环境上传文件路径:`, filePathOrData);
  188. console.log("小程序上传参数:", {
  189. application_id: common_vendor.index.getStorageSync("appId"),
  190. tenant_id,
  191. description
  192. });
  193. common_vendor.index.uploadFile({
  194. url: `${common_config.apiBaseUrl}/job/upload_posture_photo`,
  195. filePath: filePathOrData,
  196. name: "photo",
  197. // 确保文件参数名称正确
  198. formData: {
  199. // 使用formData替代data以确保参数正确传递
  200. "application_id": common_vendor.index.getStorageSync("appId"),
  201. "tenant_id": tenant_id,
  202. "description": description
  203. },
  204. success: (uploadRes) => {
  205. console.log("照片上传成功:", uploadRes);
  206. let result;
  207. try {
  208. if (typeof uploadRes.data === "string") {
  209. result = JSON.parse(uploadRes.data);
  210. } else {
  211. result = uploadRes.data;
  212. }
  213. console.log("解析后的上传结果:", result);
  214. const index = this.photoTypes.indexOf(type);
  215. if (index !== -1 && result.data && result.data.url) {
  216. this.$set(this.photoLinks, index, result.data.url);
  217. console.log(`已保存${type}类型照片链接:`, result.data.url);
  218. }
  219. } catch (e) {
  220. console.error("解析上传结果失败:", e);
  221. }
  222. common_vendor.index.hideLoading();
  223. common_vendor.index.showToast({
  224. title: "照片上传成功",
  225. icon: "success",
  226. duration: 1500,
  227. success: () => {
  228. setTimeout(() => {
  229. this.autoNextStep();
  230. }, 1500);
  231. }
  232. });
  233. },
  234. fail: (err) => {
  235. console.error("照片上传失败:", err);
  236. common_vendor.index.hideLoading();
  237. common_vendor.index.showToast({
  238. title: "照片上传失败,请重试",
  239. icon: "none"
  240. });
  241. },
  242. complete: () => {
  243. common_vendor.index.hideLoading();
  244. }
  245. });
  246. }
  247. },
  248. prevStep() {
  249. if (this.currentStep > 0) {
  250. this.currentStep--;
  251. }
  252. },
  253. nextStep() {
  254. if (this.currentStep < 5) {
  255. return;
  256. } else if (this.currentStep === 5 && this.photos[5]) {
  257. this.submitAllPhotos();
  258. }
  259. },
  260. previewPhoto(index) {
  261. if (this.photos[index]) {
  262. common_vendor.index.previewImage({
  263. urls: [this.photos[index]],
  264. current: this.photos[index]
  265. });
  266. }
  267. },
  268. submitAllPhotos() {
  269. if (this.photos.every((photo) => photo !== null)) {
  270. common_vendor.index.showLoading({
  271. title: "处理中..."
  272. });
  273. const application_id = common_vendor.index.getStorageSync("appId");
  274. const tenant_id = common_vendor.index.getStorageSync("tenant_id") || "1";
  275. common_vendor.index.request({
  276. url: `${common_config.apiBaseUrl}/api/system/job/trigger_visual_analysis?application_id=${application_id}&tenant_id=${tenant_id}`,
  277. method: "POST",
  278. success: (res) => {
  279. console.log("视觉分析触发成功:", res);
  280. common_vendor.index.hideLoading();
  281. common_vendor.index.showToast({
  282. title: "手部照片采集完成",
  283. icon: "success",
  284. duration: 2e3,
  285. success: () => {
  286. setTimeout(() => {
  287. common_vendor.index.redirectTo({
  288. url: "/pages/interview_success/interview_success"
  289. });
  290. }, 100);
  291. }
  292. });
  293. },
  294. fail: (err) => {
  295. console.error("视觉分析触发失败:", err);
  296. common_vendor.index.hideLoading();
  297. common_vendor.index.showToast({
  298. title: "处理失败,请重试",
  299. icon: "none"
  300. });
  301. }
  302. });
  303. } else {
  304. common_vendor.index.showToast({
  305. title: "请完成所有照片拍摄",
  306. icon: "none"
  307. });
  308. }
  309. },
  310. // H5环境下启动摄像头
  311. startCamera() {
  312. this.showCamera = true;
  313. if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  314. const facingMode = this.cameraPosition === "front" ? "user" : "environment";
  315. navigator.mediaDevices.getUserMedia({
  316. video: { facingMode }
  317. }).then((stream) => {
  318. this.mediaStream = stream;
  319. this.$nextTick(() => {
  320. const videoElement = this.$refs.videoElement;
  321. if (videoElement) {
  322. videoElement.srcObject = stream;
  323. }
  324. });
  325. }).catch((error) => {
  326. console.error("获取摄像头失败:", error);
  327. common_vendor.index.showToast({
  328. title: "无法访问摄像头,请检查权限设置",
  329. icon: "none"
  330. });
  331. this.showCamera = false;
  332. });
  333. } else {
  334. common_vendor.index.showToast({
  335. title: "您的浏览器不支持摄像头功能",
  336. icon: "none"
  337. });
  338. this.showCamera = false;
  339. }
  340. },
  341. // H5环境下拍照
  342. capturePhoto() {
  343. console.log("执行H5拍照方法");
  344. const videoElement = this.$refs.videoElement;
  345. const canvasElement = this.$refs.canvasElement;
  346. if (videoElement && canvasElement) {
  347. try {
  348. const context = canvasElement.getContext("2d");
  349. canvasElement.width = videoElement.videoWidth;
  350. canvasElement.height = videoElement.videoHeight;
  351. context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
  352. const photoData = canvasElement.toDataURL("image/jpeg");
  353. this.$set(this.photos, this.currentStep, photoData);
  354. this.uploadPhoto(photoData, this.photoTypes[this.currentStep]);
  355. this.stopMediaStream();
  356. this.showCamera = false;
  357. } catch (err) {
  358. console.error("H5拍照失败:", err);
  359. common_vendor.index.showToast({
  360. title: "拍照失败,请重试",
  361. icon: "none"
  362. });
  363. }
  364. }
  365. },
  366. // 小程序环境下拍照
  367. capturePhotoMP() {
  368. console.log("执行小程序拍照方法");
  369. if (!this.cameraContext) {
  370. console.error("相机上下文不存在");
  371. this.handleCameraInitError();
  372. return;
  373. }
  374. try {
  375. common_vendor.index.showLoading({
  376. title: "拍照中...",
  377. mask: true
  378. });
  379. this.cameraContext.takePhoto({
  380. quality: "high",
  381. success: (res) => {
  382. console.log("拍照成功:", res);
  383. common_vendor.index.hideLoading();
  384. this.$set(this.photos, this.currentStep, null);
  385. this.$set(this.photoLinks, this.currentStep, null);
  386. this.$set(this.photos, this.currentStep, res.tempImagePath);
  387. this.uploadPhoto(res.tempImagePath, this.photoTypes[this.currentStep]);
  388. this.showCamera = false;
  389. },
  390. fail: (err) => {
  391. common_vendor.index.hideLoading();
  392. console.error("拍照失败:", err);
  393. common_vendor.index.showToast({
  394. title: "拍照失败,请重试",
  395. icon: "none"
  396. });
  397. this.fallbackToChooseImage();
  398. }
  399. });
  400. } catch (err) {
  401. common_vendor.index.hideLoading();
  402. console.error("takePhoto方法执行失败:", err);
  403. this.fallbackToChooseImage();
  404. }
  405. },
  406. // 添加相机初始化错误处理
  407. handleCameraInitError() {
  408. if (this.cameraInitRetries < 3) {
  409. this.cameraInitRetries++;
  410. common_vendor.index.showToast({
  411. title: `相机初始化失败,正在重试(${this.cameraInitRetries}/3)`,
  412. icon: "none"
  413. });
  414. setTimeout(() => {
  415. this.showCamera = false;
  416. setTimeout(() => {
  417. this.takePhoto();
  418. }, 500);
  419. }, 1e3);
  420. } else {
  421. common_vendor.index.showToast({
  422. title: "相机初始化失败,将使用系统相机",
  423. icon: "none"
  424. });
  425. this.fallbackToChooseImage();
  426. }
  427. },
  428. // 添加备用的系统相机方法
  429. fallbackToChooseImage() {
  430. this.showCamera = false;
  431. common_vendor.index.chooseImage({
  432. count: 1,
  433. sourceType: ["camera"],
  434. success: (res) => {
  435. this.$set(this.photos, this.currentStep, res.tempFilePaths[0]);
  436. this.uploadPhoto(res.tempFilePaths[0], this.photoTypes[this.currentStep]);
  437. },
  438. fail: (err) => {
  439. console.error("选择图片失败:", err);
  440. common_vendor.index.showToast({
  441. title: "拍照失败,请重试",
  442. icon: "none"
  443. });
  444. }
  445. });
  446. },
  447. // 修改相机错误处理方法
  448. handleCameraError(e) {
  449. console.error("相机错误:", e.detail);
  450. const errorInfo = JSON.stringify(e.detail);
  451. console.log("详细错误信息:", errorInfo);
  452. common_vendor.index.showToast({
  453. title: "相机启动失败,将使用系统相机",
  454. icon: "none"
  455. });
  456. this.fallbackToChooseImage();
  457. },
  458. // 取消拍照 - 更新为同时支持H5和小程序
  459. cancelCamera() {
  460. if (this.isH5) {
  461. this.stopMediaStream();
  462. }
  463. this.showCamera = false;
  464. this.$set(this.photos, this.currentStep, null);
  465. this.$set(this.photoLinks, this.currentStep, null);
  466. },
  467. // 停止摄像头流
  468. stopMediaStream() {
  469. if (this.mediaStream) {
  470. this.mediaStream.getTracks().forEach((track) => {
  471. track.stop();
  472. });
  473. this.mediaStream = null;
  474. }
  475. },
  476. // base64转blob工具方法
  477. base64ToBlob(base64, mimeType) {
  478. const byteCharacters = atob(base64);
  479. const byteArrays = [];
  480. for (let offset = 0; offset < byteCharacters.length; offset += 512) {
  481. const slice = byteCharacters.slice(offset, offset + 512);
  482. const byteNumbers = new Array(slice.length);
  483. for (let i = 0; i < slice.length; i++) {
  484. byteNumbers[i] = slice.charCodeAt(i);
  485. }
  486. const byteArray = new Uint8Array(byteNumbers);
  487. byteArrays.push(byteArray);
  488. }
  489. return new Blob(byteArrays, { type: mimeType });
  490. },
  491. retryCamera() {
  492. this.showCamera = false;
  493. setTimeout(() => {
  494. this.takePhoto();
  495. }, 500);
  496. },
  497. // 可以添加一个方法来切换蒙层显示
  498. toggleGestureOverlay() {
  499. },
  500. // 切换摄像头
  501. switchCamera() {
  502. this.cameraPosition = this.cameraPosition === "front" ? "back" : "front";
  503. if (this.isH5 && this.showCamera) {
  504. this.stopMediaStream();
  505. this.startCamera();
  506. }
  507. },
  508. // 添加自动进入下一步的方法
  509. autoNextStep() {
  510. if (this.currentStep < 5) {
  511. this.currentStep++;
  512. if (this.currentStep < 6) {
  513. this.takePhoto();
  514. }
  515. } else if (this.currentStep === 5 && this.photos[5]) {
  516. this.submitAllPhotos();
  517. }
  518. }
  519. }
  520. };
  521. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  522. return common_vendor.e({
  523. a: common_vendor.t($data.instructions[$data.currentStep]),
  524. b: $data.photos[$data.currentStep]
  525. }, $data.photos[$data.currentStep] ? {
  526. c: $data.photos[$data.currentStep]
  527. } : {
  528. d: common_vendor.t($data.previewTexts[$data.currentStep])
  529. }, {
  530. e: common_vendor.f($data.photos, (photo, index, i0) => {
  531. return common_vendor.e({
  532. a: photo
  533. }, photo ? {
  534. b: photo,
  535. c: common_vendor.o(($event) => $options.previewPhoto(index), index)
  536. } : {
  537. d: common_vendor.t(index + 1)
  538. }, {
  539. e: index,
  540. f: $data.currentStep === index ? 1 : "",
  541. g: photo ? 1 : ""
  542. });
  543. }),
  544. f: common_vendor.t($data.photos[$data.currentStep] ? "重新拍摄" : "拍摄照片"),
  545. g: common_vendor.o((...args) => $options.takePhoto && $options.takePhoto(...args)),
  546. h: $data.currentStep === 0,
  547. i: common_vendor.o((...args) => $options.prevStep && $options.prevStep(...args)),
  548. j: common_vendor.t($data.currentStep === 5 && $data.photos[5] ? "完成" : "下一步"),
  549. k: !$options.canGoNext,
  550. l: common_vendor.o((...args) => $options.nextStep && $options.nextStep(...args)),
  551. m: !$data.isH5 && $data.showCamera
  552. }, !$data.isH5 && $data.showCamera ? {
  553. n: common_vendor.t($data.gestureHints[$data.currentStep]),
  554. o: $data.cameraPosition,
  555. p: common_vendor.o((...args) => $options.handleCameraError && $options.handleCameraError(...args)),
  556. q: $data.cameraMode,
  557. r: $data.guideIcon[$data.currentStep],
  558. s: common_vendor.s($data.currentStep >= 3 ? "left:30rpx" : "right:30rpx"),
  559. t: $data.gestureOverlays[$data.currentStep],
  560. v: common_vendor.o((...args) => $options.capturePhotoMP && $options.capturePhotoMP(...args)),
  561. w: common_vendor.o((...args) => $options.cancelCamera && $options.cancelCamera(...args))
  562. } : {}, {
  563. x: $data.isH5
  564. }, $data.isH5 ? {
  565. y: $data.guideIcon[$data.currentStep],
  566. z: common_vendor.s($data.currentStep >= 3 ? "left:30rpx" : "right:30rpx"),
  567. A: $data.gestureOverlays[$data.currentStep],
  568. B: common_vendor.t($data.gestureHints[$data.currentStep]),
  569. C: common_vendor.o((...args) => $options.capturePhoto && $options.capturePhoto(...args)),
  570. D: common_vendor.o((...args) => $options.switchCamera && $options.switchCamera(...args)),
  571. E: common_vendor.o((...args) => $options.cancelCamera && $options.cancelCamera(...args)),
  572. F: $data.showCamera
  573. } : {});
  574. }
  575. const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
  576. wx.createPage(MiniProgramPage);