interview.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
  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://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E6%8E%8C.png",
  38. "http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%89%8B%E8%83%8C.png",
  39. "http://121.36.251.245:9000/minlong/%E5%B7%A6%E6%89%8B%E6%8F%A1%E6%8B%B3.png",
  40. "http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E6%8E%8C.png",
  41. "http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%89%8B%E8%83%8C.png",
  42. "http://121.36.251.245:9000/minlong/%E5%8F%B3%E6%89%8B%E6%8F%A1%E6%8B%B3.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://121.36.251.245:9000/minlong/01%E5%B7%A6%E6%89%8B%E6%89%8B%E6%8E%8C.mp4",
  61. "http://121.36.251.245:9000/minlong/02%E5%B7%A6%E6%89%8B%E6%89%8B%E8%83%8C.mp4",
  62. "http://121.36.251.245:9000/minlong/03%E5%B7%A6%E6%89%8B%E6%8F%A1%E6%8B%B3.mp4",
  63. "http://121.36.251.245:9000/minlong/04%E5%8F%B3%E6%89%8B%E6%89%8B%E6%8E%8C.mp4",
  64. "http://121.36.251.245:9000/minlong/05%E5%8F%B3%E6%89%8B%E6%89%8B%E8%83%8C.mp4",
  65. "http://121.36.251.245:9000/minlong/06%E5%8F%B3%E6%89%8B%E6%8F%A1%E6%8B%B3.mp4"
  66. ]
  67. };
  68. },
  69. computed: {
  70. canGoNext() {
  71. return this.photos[this.currentStep] !== null;
  72. }
  73. },
  74. onLoad() {
  75. common_vendor.index.authorize({
  76. scope: "scope.camera",
  77. success: () => {
  78. console.log("相机权限已授权");
  79. },
  80. fail: () => {
  81. common_vendor.index.showModal({
  82. title: "提示",
  83. content: "请授权相机权限以完成手部照片采集",
  84. success: (res) => {
  85. if (res.confirm) {
  86. common_vendor.index.openSetting();
  87. }
  88. }
  89. });
  90. }
  91. });
  92. },
  93. beforeDestroy() {
  94. this.stopMediaStream();
  95. },
  96. methods: {
  97. takePhoto() {
  98. if (this.isH5) {
  99. this.startCamera();
  100. } else {
  101. this.showCamera = true;
  102. this.cameraInitRetries = 0;
  103. this.$nextTick(() => {
  104. try {
  105. this.cameraContext = common_vendor.index.createCameraContext();
  106. console.log("相机上下文创建成功");
  107. } catch (err) {
  108. console.error("创建相机上下文失败:", err);
  109. this.handleCameraInitError();
  110. }
  111. });
  112. }
  113. },
  114. uploadPhoto(filePathOrData, type) {
  115. console.log(`准备上传${type}类型的手部照片`);
  116. common_vendor.index.showLoading({
  117. title: "上传中..."
  118. });
  119. const userInfo = common_vendor.index.getStorageSync("userInfo");
  120. userInfo ? JSON.parse(userInfo).openid || "" : "";
  121. const tenant_id = common_vendor.index.getStorageSync("tenant_id") || "1";
  122. if (!tenant_id) {
  123. common_vendor.index.hideLoading();
  124. common_vendor.index.showToast({
  125. title: "用户信息不完整,请重新登录",
  126. icon: "none"
  127. });
  128. return;
  129. }
  130. if (this.isH5 && filePathOrData.startsWith("data:image")) {
  131. const base64Data = filePathOrData.split(",")[1];
  132. const blob = this.base64ToBlob(base64Data, "image/jpeg");
  133. const formData = new FormData();
  134. formData.append("photo", blob, `${type}.jpg`);
  135. formData.append("application_id", common_vendor.index.getStorageSync("appId"));
  136. formData.append("tenant_id", tenant_id);
  137. formData.append("description", `手部照片-${type}`);
  138. console.log("H5上传参数:", {
  139. application_id: common_vendor.index.getStorageSync("appId"),
  140. tenant_id,
  141. description: `手部照片-${type}`
  142. });
  143. fetch(`${common_config.apiBaseUrl}/job/upload_posture_photo`, {
  144. method: "POST",
  145. body: formData
  146. }).then((response) => response.json()).then((result) => {
  147. console.log("照片上传成功:", result);
  148. const index = this.photoTypes.indexOf(type);
  149. if (index !== -1 && result.data && result.data.url) {
  150. this.$set(this.photoLinks, index, result.data.url);
  151. console.log(`已保存${type}类型照片链接:`, result.data.url);
  152. }
  153. common_vendor.index.hideLoading();
  154. common_vendor.index.showToast({
  155. title: "照片上传成功",
  156. icon: "success"
  157. });
  158. }).catch((error) => {
  159. console.error("照片上传失败:", error);
  160. common_vendor.index.hideLoading();
  161. common_vendor.index.showToast({
  162. title: "照片上传失败,请重试",
  163. icon: "none"
  164. });
  165. });
  166. } else {
  167. console.log(`小程序环境上传文件路径:`, filePathOrData);
  168. console.log("小程序上传参数:", {
  169. application_id: common_vendor.index.getStorageSync("appId"),
  170. tenant_id,
  171. description: `手部照片-${type}`
  172. });
  173. common_vendor.index.uploadFile({
  174. url: `${common_config.apiBaseUrl}/job/upload_posture_photo`,
  175. filePath: filePathOrData,
  176. name: "photo",
  177. // 确保文件参数名称正确
  178. formData: {
  179. // 使用formData替代data以确保参数正确传递
  180. "application_id": common_vendor.index.getStorageSync("appId"),
  181. "tenant_id": tenant_id,
  182. "description": `手部照片-${type}`
  183. },
  184. success: (uploadRes) => {
  185. console.log("照片上传成功:", uploadRes);
  186. let result;
  187. try {
  188. if (typeof uploadRes.data === "string") {
  189. result = JSON.parse(uploadRes.data);
  190. } else {
  191. result = uploadRes.data;
  192. }
  193. console.log("解析后的上传结果:", result);
  194. const index = this.photoTypes.indexOf(type);
  195. if (index !== -1 && result.data && result.data.url) {
  196. this.$set(this.photoLinks, index, result.data.url);
  197. console.log(`已保存${type}类型照片链接:`, result.data.url);
  198. }
  199. } catch (e) {
  200. console.error("解析上传结果失败:", e);
  201. }
  202. common_vendor.index.hideLoading();
  203. common_vendor.index.showToast({
  204. title: "照片上传成功",
  205. icon: "success"
  206. });
  207. },
  208. fail: (err) => {
  209. console.error("照片上传失败:", err);
  210. common_vendor.index.hideLoading();
  211. common_vendor.index.showToast({
  212. title: "照片上传失败,请重试",
  213. icon: "none"
  214. });
  215. },
  216. complete: () => {
  217. common_vendor.index.hideLoading();
  218. }
  219. });
  220. }
  221. },
  222. prevStep() {
  223. if (this.currentStep > 0) {
  224. this.currentStep--;
  225. }
  226. },
  227. nextStep() {
  228. if (this.currentStep < 5) {
  229. this.currentStep++;
  230. } else if (this.currentStep === 5 && this.photos[5]) {
  231. this.submitAllPhotos();
  232. }
  233. },
  234. previewPhoto(index) {
  235. if (this.photos[index]) {
  236. common_vendor.index.previewImage({
  237. urls: [this.photos[index]],
  238. current: this.photos[index]
  239. });
  240. }
  241. },
  242. submitAllPhotos() {
  243. if (this.photos.every((photo) => photo !== null)) {
  244. common_vendor.index.showLoading({
  245. title: "处理中..."
  246. });
  247. setTimeout(() => {
  248. common_vendor.index.hideLoading();
  249. common_vendor.index.showToast({
  250. title: "手部照片采集完成",
  251. icon: "success",
  252. duration: 2e3,
  253. success: () => {
  254. setTimeout(() => {
  255. common_vendor.index.navigateTo({
  256. url: "/pages/interview_success/interview_success"
  257. });
  258. }, 2e3);
  259. }
  260. });
  261. }, 500);
  262. } else {
  263. common_vendor.index.showToast({
  264. title: "请完成所有照片拍摄",
  265. icon: "none"
  266. });
  267. }
  268. },
  269. // H5环境下启动摄像头
  270. startCamera() {
  271. this.showCamera = true;
  272. if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  273. const facingMode = this.cameraPosition === "front" ? "user" : "environment";
  274. navigator.mediaDevices.getUserMedia({
  275. video: { facingMode }
  276. }).then((stream) => {
  277. this.mediaStream = stream;
  278. this.$nextTick(() => {
  279. const videoElement = this.$refs.videoElement;
  280. if (videoElement) {
  281. videoElement.srcObject = stream;
  282. }
  283. });
  284. }).catch((error) => {
  285. console.error("获取摄像头失败:", error);
  286. common_vendor.index.showToast({
  287. title: "无法访问摄像头,请检查权限设置",
  288. icon: "none"
  289. });
  290. this.showCamera = false;
  291. });
  292. } else {
  293. common_vendor.index.showToast({
  294. title: "您的浏览器不支持摄像头功能",
  295. icon: "none"
  296. });
  297. this.showCamera = false;
  298. }
  299. },
  300. // H5环境下拍照
  301. capturePhoto() {
  302. console.log("执行H5拍照方法");
  303. const videoElement = this.$refs.videoElement;
  304. const canvasElement = this.$refs.canvasElement;
  305. if (videoElement && canvasElement) {
  306. try {
  307. const context = canvasElement.getContext("2d");
  308. canvasElement.width = videoElement.videoWidth;
  309. canvasElement.height = videoElement.videoHeight;
  310. context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
  311. const photoData = canvasElement.toDataURL("image/jpeg");
  312. this.$set(this.photos, this.currentStep, photoData);
  313. this.uploadPhoto(photoData, this.photoTypes[this.currentStep]);
  314. this.stopMediaStream();
  315. this.showCamera = false;
  316. } catch (err) {
  317. console.error("H5拍照失败:", err);
  318. common_vendor.index.showToast({
  319. title: "拍照失败,请重试",
  320. icon: "none"
  321. });
  322. }
  323. }
  324. },
  325. // 小程序环境下拍照
  326. capturePhotoMP() {
  327. console.log("执行小程序拍照方法");
  328. if (!this.cameraContext) {
  329. console.error("相机上下文不存在");
  330. this.handleCameraInitError();
  331. return;
  332. }
  333. try {
  334. common_vendor.index.showLoading({
  335. title: "拍照中...",
  336. mask: true
  337. });
  338. this.cameraContext.takePhoto({
  339. quality: "high",
  340. success: (res) => {
  341. console.log("拍照成功:", res);
  342. common_vendor.index.hideLoading();
  343. this.$set(this.photos, this.currentStep, res.tempImagePath);
  344. this.uploadPhoto(res.tempImagePath, this.photoTypes[this.currentStep]);
  345. this.showCamera = false;
  346. },
  347. fail: (err) => {
  348. common_vendor.index.hideLoading();
  349. console.error("拍照失败:", err);
  350. common_vendor.index.showToast({
  351. title: "拍照失败,请重试",
  352. icon: "none"
  353. });
  354. this.fallbackToChooseImage();
  355. }
  356. });
  357. } catch (err) {
  358. common_vendor.index.hideLoading();
  359. console.error("takePhoto方法执行失败:", err);
  360. this.fallbackToChooseImage();
  361. }
  362. },
  363. // 添加相机初始化错误处理
  364. handleCameraInitError() {
  365. if (this.cameraInitRetries < 3) {
  366. this.cameraInitRetries++;
  367. common_vendor.index.showToast({
  368. title: `相机初始化失败,正在重试(${this.cameraInitRetries}/3)`,
  369. icon: "none"
  370. });
  371. setTimeout(() => {
  372. this.showCamera = false;
  373. setTimeout(() => {
  374. this.takePhoto();
  375. }, 500);
  376. }, 1e3);
  377. } else {
  378. common_vendor.index.showToast({
  379. title: "相机初始化失败,将使用系统相机",
  380. icon: "none"
  381. });
  382. this.fallbackToChooseImage();
  383. }
  384. },
  385. // 添加备用的系统相机方法
  386. fallbackToChooseImage() {
  387. this.showCamera = false;
  388. common_vendor.index.chooseImage({
  389. count: 1,
  390. sourceType: ["camera"],
  391. success: (res) => {
  392. this.$set(this.photos, this.currentStep, res.tempFilePaths[0]);
  393. this.uploadPhoto(res.tempFilePaths[0], this.photoTypes[this.currentStep]);
  394. },
  395. fail: (err) => {
  396. console.error("选择图片失败:", err);
  397. common_vendor.index.showToast({
  398. title: "拍照失败,请重试",
  399. icon: "none"
  400. });
  401. }
  402. });
  403. },
  404. // 修改相机错误处理方法
  405. handleCameraError(e) {
  406. console.error("相机错误:", e.detail);
  407. const errorInfo = JSON.stringify(e.detail);
  408. console.log("详细错误信息:", errorInfo);
  409. common_vendor.index.showToast({
  410. title: "相机启动失败,将使用系统相机",
  411. icon: "none"
  412. });
  413. this.fallbackToChooseImage();
  414. },
  415. // 取消拍照 - 更新为同时支持H5和小程序
  416. cancelCamera() {
  417. if (this.isH5) {
  418. this.stopMediaStream();
  419. }
  420. this.showCamera = false;
  421. },
  422. // 停止摄像头流
  423. stopMediaStream() {
  424. if (this.mediaStream) {
  425. this.mediaStream.getTracks().forEach((track) => {
  426. track.stop();
  427. });
  428. this.mediaStream = null;
  429. }
  430. },
  431. // base64转blob工具方法
  432. base64ToBlob(base64, mimeType) {
  433. const byteCharacters = atob(base64);
  434. const byteArrays = [];
  435. for (let offset = 0; offset < byteCharacters.length; offset += 512) {
  436. const slice = byteCharacters.slice(offset, offset + 512);
  437. const byteNumbers = new Array(slice.length);
  438. for (let i = 0; i < slice.length; i++) {
  439. byteNumbers[i] = slice.charCodeAt(i);
  440. }
  441. const byteArray = new Uint8Array(byteNumbers);
  442. byteArrays.push(byteArray);
  443. }
  444. return new Blob(byteArrays, { type: mimeType });
  445. },
  446. retryCamera() {
  447. this.showCamera = false;
  448. setTimeout(() => {
  449. this.takePhoto();
  450. }, 500);
  451. },
  452. // 可以添加一个方法来切换蒙层显示
  453. toggleGestureOverlay() {
  454. },
  455. // 切换摄像头
  456. switchCamera() {
  457. this.cameraPosition = this.cameraPosition === "front" ? "back" : "front";
  458. if (this.isH5 && this.showCamera) {
  459. this.stopMediaStream();
  460. this.startCamera();
  461. }
  462. }
  463. }
  464. };
  465. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  466. return common_vendor.e({
  467. a: common_vendor.t($data.instructions[$data.currentStep]),
  468. b: $data.photos[$data.currentStep]
  469. }, $data.photos[$data.currentStep] ? {
  470. c: $data.photos[$data.currentStep]
  471. } : {
  472. d: common_vendor.t($data.previewTexts[$data.currentStep])
  473. }, {
  474. e: common_vendor.f($data.photos, (photo, index, i0) => {
  475. return common_vendor.e({
  476. a: photo
  477. }, photo ? {
  478. b: photo,
  479. c: common_vendor.o(($event) => $options.previewPhoto(index), index)
  480. } : {
  481. d: common_vendor.t(index + 1)
  482. }, {
  483. e: index,
  484. f: $data.currentStep === index ? 1 : "",
  485. g: photo ? 1 : ""
  486. });
  487. }),
  488. f: common_vendor.t($data.photos[$data.currentStep] ? "重新拍摄" : "拍摄照片"),
  489. g: common_vendor.o((...args) => $options.takePhoto && $options.takePhoto(...args)),
  490. h: $data.currentStep === 0,
  491. i: common_vendor.o((...args) => $options.prevStep && $options.prevStep(...args)),
  492. j: common_vendor.t($data.currentStep === 5 && $data.photos[5] ? "完成" : "下一步"),
  493. k: !$options.canGoNext,
  494. l: common_vendor.o((...args) => $options.nextStep && $options.nextStep(...args)),
  495. m: !$data.isH5 && $data.showCamera
  496. }, !$data.isH5 && $data.showCamera ? {
  497. n: common_vendor.t($data.gestureHints[$data.currentStep]),
  498. o: $data.cameraPosition,
  499. p: common_vendor.o((...args) => $options.handleCameraError && $options.handleCameraError(...args)),
  500. q: $data.cameraMode,
  501. r: $data.guideIcon[$data.currentStep],
  502. s: common_vendor.s($data.currentStep >= 3 ? "left:30rpx" : "right:30rpx"),
  503. t: $data.gestureOverlays[$data.currentStep],
  504. v: common_vendor.o((...args) => $options.capturePhotoMP && $options.capturePhotoMP(...args)),
  505. w: common_vendor.o((...args) => $options.cancelCamera && $options.cancelCamera(...args))
  506. } : {}, {
  507. x: $data.isH5
  508. }, $data.isH5 ? {
  509. y: $data.guideIcon[$data.currentStep],
  510. z: common_vendor.s($data.currentStep >= 3 ? "left:30rpx" : "right:30rpx"),
  511. A: $data.gestureOverlays[$data.currentStep],
  512. B: common_vendor.t($data.gestureHints[$data.currentStep]),
  513. C: common_vendor.o((...args) => $options.capturePhoto && $options.capturePhoto(...args)),
  514. D: common_vendor.o((...args) => $options.switchCamera && $options.switchCamera(...args)),
  515. E: common_vendor.o((...args) => $options.cancelCamera && $options.cancelCamera(...args)),
  516. F: $data.showCamera
  517. } : {});
  518. }
  519. const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
  520. wx.createPage(MiniProgramPage);