face-photo.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585
  1. <template>
  2. <view class="photo-container" :class="{'loaded': isPageLoaded}">
  3. <!-- 标题 -->
  4. <view class="photo-header">
  5. <text class="photo-title">拍摄面部照片</text>
  6. <text class="photo-subtitle">我们将用于身份核验,请正对摄像头</text>
  7. </view>
  8. <!-- 模式选择 -->
  9. <!-- <view class="mode-selector">
  10. <view class="mode-option" :class="{'active': mode === 'photo'}" @click="switchMode('photo')">拍照</view>
  11. <view class="mode-option" :class="{'active': mode === 'video'}" @click="switchMode('video')">录制视频</view>
  12. </view> -->
  13. <!-- 照片/视频预览区域 -->
  14. <view class="photo-preview">
  15. <!-- 使用camera组件替代静态图片 -->
  16. <camera v-if="!mediaSource" device-position="front" flash="auto" class="camera"
  17. :mode="mode" @error="handleCameraError"></camera>
  18. <image v-else-if="mode === 'photo'" class="preview-image" :src="mediaSource" mode="aspectFit"></image>
  19. <video v-else-if="mode === 'video'" class="preview-video" :src="mediaSource"
  20. controls autoplay></video>
  21. <view class="face-outline"></view>
  22. <!-- 视频录制时间显示 -->
  23. <view v-if="mode === 'video' && isRecording" class="recording-indicator">
  24. <view class="recording-dot"></view>
  25. <text class="recording-time">{{formatTime(recordingTime)}}</text>
  26. </view>
  27. </view>
  28. <!-- 操作按钮 -->
  29. <view v-if="!mediaSource" class="capture-btn-container">
  30. <button v-if="mode === 'photo'" class="capture-btn" @click="takePhoto">拍照</button>
  31. <button v-else-if="mode === 'video' && !isRecording" class="capture-btn" @click="startRecording">开始录制</button>
  32. <button v-else-if="mode === 'video' && isRecording" class="stop-btn" @click="stopRecording">停止录制</button>
  33. </view>
  34. <view v-else class="btn-group">
  35. <button class="retry-btn" @click="retakeMedia">重新{{mode === 'photo' ? '拍照' : '录制'}}</button>
  36. <button class="start-btn" @click="continueProcess">完成</button>
  37. </view>
  38. </view>
  39. </template>
  40. <script>
  41. import { uploadPhoto,fillUserInfo,getUserInfo } from '@/api/user';
  42. import { apiBaseUrl } from '@/common/config.js';
  43. export default {
  44. data() {
  45. return {
  46. mediaSource: '', // 拍摄的照片或视频路径
  47. isCameraReady: false,
  48. cameraContext: null,
  49. isPageLoaded: false, // 添加页面加载状态标记
  50. mode: 'photo', // 默认为拍照模式,可选值:photo, video
  51. isRecording: false, // 是否正在录制视频
  52. recordingTime: 0, // 录制时间(秒)
  53. recordingTimer: null, // 录制计时器
  54. photoUrl: '', // 存储上传后返回的图片URL
  55. }
  56. },
  57. onReady() {
  58. // 相机组件初始化完成后创建相机上下文
  59. this.cameraContext = uni.createCameraContext();
  60. // 设置页面已加载完成
  61. setTimeout(() => {
  62. this.isPageLoaded = true;
  63. }, 100);
  64. },
  65. methods: {
  66. // 切换拍照/录制模式
  67. switchMode(newMode) {
  68. if (this.mediaSource) {
  69. // 如果已经有拍摄内容,需要先清除
  70. this.retakeMedia();
  71. }
  72. this.mode = newMode;
  73. },
  74. // 处理相机错误
  75. handleCameraError(e) {
  76. console.error('相机错误:', e);
  77. uni.showToast({
  78. title: '相机初始化失败,请检查权限设置',
  79. icon: 'none'
  80. });
  81. },
  82. // 拍照方法
  83. takePhoto() {
  84. if (!this.cameraContext) {
  85. uni.showToast({
  86. title: '相机未就绪',
  87. icon: 'none'
  88. });
  89. return;
  90. }
  91. uni.showLoading({
  92. title: '拍照中...'
  93. });
  94. this.cameraContext.takePhoto({
  95. quality: 'high',
  96. success: (res) => {
  97. this.mediaSource = res.tempImagePath;
  98. uni.hideLoading();
  99. },
  100. fail: (err) => {
  101. console.error('拍照失败:', err);
  102. uni.hideLoading();
  103. uni.showToast({
  104. title: '拍照失败,请重试',
  105. icon: 'none'
  106. });
  107. }
  108. });
  109. },
  110. // 开始录制视频
  111. startRecording() {
  112. if (!this.cameraContext) {
  113. uni.showToast({
  114. title: '相机未就绪',
  115. icon: 'none'
  116. });
  117. return;
  118. }
  119. this.isRecording = true;
  120. this.recordingTime = 0;
  121. // 开始计时
  122. this.recordingTimer = setInterval(() => {
  123. this.recordingTime++;
  124. // 限制最长录制时间为60秒
  125. if (this.recordingTime >= 60) {
  126. this.stopRecording();
  127. }
  128. }, 1000);
  129. this.cameraContext.startRecord({
  130. success: () => {
  131. console.log('开始录制视频');
  132. },
  133. fail: (err) => {
  134. console.error('开始录制失败:', err);
  135. this.isRecording = false;
  136. clearInterval(this.recordingTimer);
  137. uni.showToast({
  138. title: '录制失败,请重试',
  139. icon: 'none'
  140. });
  141. }
  142. });
  143. },
  144. // 停止录制视频
  145. stopRecording() {
  146. if (!this.isRecording) return;
  147. clearInterval(this.recordingTimer);
  148. this.isRecording = false;
  149. uni.showLoading({
  150. title: '处理中...'
  151. });
  152. this.cameraContext.stopRecord({
  153. success: (res) => {
  154. this.mediaSource = res.tempVideoPath;
  155. console.log(res);
  156. uni.hideLoading();
  157. },
  158. fail: (err) => {
  159. console.error('停止录制失败:', err);
  160. uni.hideLoading();
  161. uni.showToast({
  162. title: '视频保存失败,请重试',
  163. icon: 'none'
  164. });
  165. }
  166. });
  167. },
  168. // 格式化时间显示 (秒 -> MM:SS)
  169. formatTime(seconds) {
  170. const minutes = Math.floor(seconds / 60);
  171. const remainingSeconds = seconds % 60;
  172. return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
  173. },
  174. // 重新拍照或录制
  175. retakeMedia() {
  176. this.mediaSource = '';
  177. this.recordingTime = 0;
  178. },
  179. // 继续流程
  180. continueProcess() {
  181. if (!this.mediaSource) {
  182. uni.showToast({
  183. title: '请先完成拍照',
  184. icon: 'none'
  185. });
  186. return;
  187. }
  188. uni.showLoading({
  189. title: '上传中...'
  190. });
  191. // 直接上传照片
  192. this.submitPhotoUrl();
  193. },
  194. // 上传媒体文件方法 - 不再使用
  195. uploadMedia(callback) {
  196. // 获取openid和tenant_id,可以从缓存或全局状态获取
  197. const openid = JSON.parse(uni.getStorageSync('userInfo')).openid || '';
  198. const tenant_id =JSON.parse(uni.getStorageSync('userInfo')).tenant_id || 1;
  199. if (!openid || !tenant_id) {
  200. uni.hideLoading();
  201. uni.showToast({
  202. title: '用户信息不完整,请重新登录',
  203. icon: 'none'
  204. });
  205. return;
  206. }
  207. // 使用uni.uploadFile方式上传图片
  208. uni.uploadFile({
  209. url: `${apiBaseUrl}/api/upload/`,
  210. filePath: this.mediaSource,
  211. name: 'file',
  212. formData: {
  213. openid: openid,
  214. tenant_id: tenant_id
  215. },
  216. success: (uploadRes) => {
  217. // 解析返回的JSON字符串
  218. const res = JSON.parse(uploadRes.data);
  219. if (res.code === 2000) { // 根据实际API响应调整
  220. // 获取返回的图片URL
  221. const photoUrl = res.data.url || res.data.photoUrl || '';
  222. if (callback && typeof callback === 'function') {
  223. callback(photoUrl);
  224. }
  225. } else {
  226. uni.hideLoading();
  227. uni.showToast({
  228. title: res.msg || '照片上传失败',
  229. icon: 'none'
  230. });
  231. }
  232. },
  233. fail: (err) => {
  234. uni.hideLoading();
  235. console.error('上传失败:', err);
  236. uni.showToast({
  237. title: '网络错误,请重试',
  238. icon: 'none'
  239. });
  240. }
  241. });
  242. },
  243. // 提交照片URL到指定接口 - 修改为直接上传文件
  244. submitPhotoUrl() {
  245. const openid = JSON.parse(uni.getStorageSync('userInfo')).openid || '';
  246. const tenant_id =JSON.parse(uni.getStorageSync('userInfo')).tenant_id || 1;
  247. if (!this.mediaSource) {
  248. uni.hideLoading();
  249. uni.showToast({
  250. title: '照片信息不完整,请重试',
  251. icon: 'none'
  252. });
  253. return;
  254. }
  255. console.log(this.mediaSource);
  256. // 使用uni.uploadFile直接上传文件,类似interview页面的实现
  257. uni.uploadFile({
  258. url: `${apiBaseUrl}/job/upload_posture_photo`,
  259. filePath: this.mediaSource,
  260. name: 'photo', // 确保文件参数名称正确
  261. formData: { // 使用formData传递参数
  262. 'application_id': uni.getStorageSync('appId'),
  263. 'tenant_id': tenant_id,
  264. 'openid': openid,
  265. 'description': '面部照片'
  266. },
  267. success: (uploadRes) => {
  268. console.log('照片上传成功:', uploadRes);
  269. // 解析返回的JSON字符串
  270. let result;
  271. try {
  272. if (typeof uploadRes.data === 'string') {
  273. result = JSON.parse(uploadRes.data);
  274. } else {
  275. result = uploadRes.data;
  276. }
  277. console.log('解析后的上传结果:', result);
  278. // 保存返回的URL
  279. if (result.data && result.data.url) {
  280. this.photoUrl = result.data.url;
  281. }
  282. // 更新本地用户信息
  283. // this.updateLocalUserInfo();
  284. uni.showToast({
  285. title: '照片上传成功',
  286. icon: 'success'
  287. });
  288. // 获取本地存储的configData
  289. let configData = {};
  290. try {
  291. configData = JSON.parse(uni.getStorageSync('configData') || '{}');
  292. } catch (e) {
  293. console.error('解析configData失败:', e);
  294. configData = {};
  295. }
  296. // 根据enable_open_questions的值决定跳转路径
  297. const targetUrl = configData?.question_form_switches?.enable_open_questions
  298. ? '/pages/identity-verify/identity-verify'
  299. : '/pages/camera/camera';
  300. setTimeout(() => {
  301. uni.navigateTo({
  302. url: targetUrl,
  303. fail: (err) => {
  304. console.error('页面跳转失败:', err);
  305. uni.showToast({
  306. title: '页面跳转失败',
  307. icon: 'none'
  308. });
  309. }
  310. });
  311. }, 1500);
  312. } catch (e) {
  313. console.error('解析上传结果失败:', e);
  314. uni.showToast({
  315. title: '处理响应失败',
  316. icon: 'none'
  317. });
  318. }
  319. },
  320. fail: (err) => {
  321. console.error('照片上传失败:', err);
  322. uni.showToast({
  323. title: '照片上传失败,请重试',
  324. icon: 'none'
  325. });
  326. },
  327. complete: () => {
  328. uni.hideLoading();
  329. }
  330. });
  331. },
  332. updateLocalUserInfo() {
  333. getUserInfo()
  334. .then(res => {
  335. if (res.code === 200 && res.data) {
  336. let userInfo = {};
  337. try {
  338. userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  339. } catch (e) {
  340. console.error('解析本地存储用户信息失败:', e);
  341. userInfo = {};
  342. }
  343. const updatedUserInfo = {
  344. ...userInfo,
  345. ...res.data
  346. };
  347. uni.setStorageSync('userInfo', JSON.stringify(updatedUserInfo));
  348. }
  349. })
  350. .catch(err => {
  351. console.error('更新本地用户信息失败:', err);
  352. });
  353. }
  354. }
  355. }
  356. </script>
  357. <style>
  358. .photo-container {
  359. display: flex;
  360. flex-direction: column;
  361. min-height: 100vh;
  362. background-color: #f5f7fa;
  363. padding: 30rpx;
  364. opacity: 0; /* 初始设置为不可见 */
  365. transition: opacity 0.3s ease; /* 添加过渡效果 */
  366. }
  367. .photo-container.loaded {
  368. opacity: 1; /* 加载完成后显示 */
  369. }
  370. .photo-header {
  371. display: flex;
  372. flex-direction: column;
  373. align-items: center;
  374. margin-bottom: 80rpx;
  375. }
  376. .photo-title {
  377. font-size: 36rpx;
  378. font-weight: bold;
  379. color: #333;
  380. margin-bottom: 10rpx;
  381. }
  382. .photo-subtitle {
  383. font-size: 28rpx;
  384. color: #666;
  385. }
  386. /* 模式选择器样式 */
  387. .mode-selector {
  388. display: flex;
  389. justify-content: center;
  390. margin-bottom: 30rpx;
  391. background-color: #eaeaea;
  392. border-radius: 40rpx;
  393. padding: 6rpx;
  394. width: 80%;
  395. align-self: center;
  396. }
  397. .mode-option {
  398. flex: 1;
  399. text-align: center;
  400. padding: 16rpx 0;
  401. font-size: 28rpx;
  402. color: #666;
  403. border-radius: 36rpx;
  404. transition: all 0.3s;
  405. }
  406. .mode-option.active {
  407. background-color: #0039b3;
  408. color: #fff;
  409. }
  410. .photo-preview {
  411. position: relative;
  412. width: 100%;
  413. height: 900rpx;
  414. background-color: #000;
  415. border-radius: 20rpx;
  416. overflow: hidden;
  417. margin-bottom: 40rpx;
  418. display: flex;
  419. justify-content: center;
  420. align-items: center;
  421. }
  422. .preview-image, .preview-video {
  423. width: 100%;
  424. height: 100%;
  425. object-fit: cover;
  426. }
  427. .face-outline {
  428. position: absolute;
  429. top: 50%;
  430. left: 50%;
  431. transform: translate(-50%, -50%);
  432. width: 500rpx;
  433. height: 600rpx;
  434. border: 4rpx dashed #fff;
  435. border-radius: 200rpx;
  436. pointer-events: none;
  437. }
  438. .camera {
  439. width: 100%;
  440. height: 100%;
  441. }
  442. /* 录制指示器 */
  443. .recording-indicator {
  444. position: absolute;
  445. top: 30rpx;
  446. right: 30rpx;
  447. display: flex;
  448. align-items: center;
  449. background-color: rgba(0, 0, 0, 0.5);
  450. padding: 10rpx 20rpx;
  451. border-radius: 30rpx;
  452. }
  453. .recording-dot {
  454. width: 20rpx;
  455. height: 20rpx;
  456. background-color: #ff0000;
  457. border-radius: 50%;
  458. margin-right: 10rpx;
  459. animation: blink 1s infinite;
  460. }
  461. .recording-time {
  462. color: #fff;
  463. font-size: 28rpx;
  464. }
  465. @keyframes blink {
  466. 0% { opacity: 1; }
  467. 50% { opacity: 0.3; }
  468. 100% { opacity: 1; }
  469. }
  470. .capture-btn-container {
  471. width: 100%;
  472. display: flex;
  473. justify-content: center;
  474. margin-top: 60rpx;
  475. }
  476. .capture-btn {
  477. width: 100%;
  478. height: 90rpx;
  479. line-height: 90rpx;
  480. background-color: #0039b3;
  481. color: #fff;
  482. border-radius: 45rpx;
  483. font-size: 32rpx;
  484. }
  485. .stop-btn {
  486. width: 100%;
  487. height: 90rpx;
  488. line-height: 90rpx;
  489. background-color: #e74c3c;
  490. color: #fff;
  491. border-radius: 45rpx;
  492. font-size: 32rpx;
  493. }
  494. .btn-group {
  495. display: flex;
  496. justify-content: space-between;
  497. width: 100%;
  498. margin-top: 60rpx;
  499. }
  500. .retry-btn {
  501. width: 45%;
  502. height: 90rpx;
  503. line-height: 90rpx;
  504. background-color: #fff;
  505. color: #0039b3;
  506. border: 1px solid #0039b3;
  507. border-radius: 45rpx;
  508. font-size: 32rpx;
  509. }
  510. .start-btn {
  511. width: 45%;
  512. height: 90rpx;
  513. line-height: 90rpx;
  514. background-color: #0039b3;
  515. color: #fff;
  516. border-radius: 45rpx;
  517. font-size: 32rpx;
  518. }
  519. /* 添加手部轮廓样式 */
  520. .face-outline.hand-outline {
  521. width: 500rpx;
  522. height: 300rpx;
  523. border-radius: 30rpx;
  524. }
  525. </style>