face-photo.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  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. // 上传成功后跳转到下一页
  289. setTimeout(() => {
  290. uni.navigateTo({
  291. url: '/pages/identity-verify/identity-verify',
  292. fail: (err) => {
  293. console.error('页面跳转失败:', err);
  294. uni.showToast({
  295. title: '页面跳转失败',
  296. icon: 'none'
  297. });
  298. }
  299. });
  300. }, 1500);
  301. } catch (e) {
  302. console.error('解析上传结果失败:', e);
  303. uni.showToast({
  304. title: '处理响应失败',
  305. icon: 'none'
  306. });
  307. }
  308. },
  309. fail: (err) => {
  310. console.error('照片上传失败:', err);
  311. uni.showToast({
  312. title: '照片上传失败,请重试',
  313. icon: 'none'
  314. });
  315. },
  316. complete: () => {
  317. uni.hideLoading();
  318. }
  319. });
  320. },
  321. updateLocalUserInfo() {
  322. getUserInfo()
  323. .then(res => {
  324. if (res.code === 200 && res.data) {
  325. let userInfo = {};
  326. try {
  327. userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  328. } catch (e) {
  329. console.error('解析本地存储用户信息失败:', e);
  330. userInfo = {};
  331. }
  332. const updatedUserInfo = {
  333. ...userInfo,
  334. ...res.data
  335. };
  336. uni.setStorageSync('userInfo', JSON.stringify(updatedUserInfo));
  337. }
  338. })
  339. .catch(err => {
  340. console.error('更新本地用户信息失败:', err);
  341. });
  342. }
  343. }
  344. }
  345. </script>
  346. <style>
  347. .photo-container {
  348. display: flex;
  349. flex-direction: column;
  350. min-height: 100vh;
  351. background-color: #f5f7fa;
  352. padding: 30rpx;
  353. opacity: 0; /* 初始设置为不可见 */
  354. transition: opacity 0.3s ease; /* 添加过渡效果 */
  355. }
  356. .photo-container.loaded {
  357. opacity: 1; /* 加载完成后显示 */
  358. }
  359. .photo-header {
  360. display: flex;
  361. flex-direction: column;
  362. align-items: center;
  363. margin-bottom: 80rpx;
  364. }
  365. .photo-title {
  366. font-size: 36rpx;
  367. font-weight: bold;
  368. color: #333;
  369. margin-bottom: 10rpx;
  370. }
  371. .photo-subtitle {
  372. font-size: 28rpx;
  373. color: #666;
  374. }
  375. /* 模式选择器样式 */
  376. .mode-selector {
  377. display: flex;
  378. justify-content: center;
  379. margin-bottom: 30rpx;
  380. background-color: #eaeaea;
  381. border-radius: 40rpx;
  382. padding: 6rpx;
  383. width: 80%;
  384. align-self: center;
  385. }
  386. .mode-option {
  387. flex: 1;
  388. text-align: center;
  389. padding: 16rpx 0;
  390. font-size: 28rpx;
  391. color: #666;
  392. border-radius: 36rpx;
  393. transition: all 0.3s;
  394. }
  395. .mode-option.active {
  396. background-color: #0039b3;
  397. color: #fff;
  398. }
  399. .photo-preview {
  400. position: relative;
  401. width: 100%;
  402. height: 900rpx;
  403. background-color: #000;
  404. border-radius: 20rpx;
  405. overflow: hidden;
  406. margin-bottom: 40rpx;
  407. display: flex;
  408. justify-content: center;
  409. align-items: center;
  410. }
  411. .preview-image, .preview-video {
  412. width: 100%;
  413. height: 100%;
  414. object-fit: cover;
  415. }
  416. .face-outline {
  417. position: absolute;
  418. top: 50%;
  419. left: 50%;
  420. transform: translate(-50%, -50%);
  421. width: 500rpx;
  422. height: 600rpx;
  423. border: 4rpx dashed #fff;
  424. border-radius: 200rpx;
  425. pointer-events: none;
  426. }
  427. .camera {
  428. width: 100%;
  429. height: 100%;
  430. }
  431. /* 录制指示器 */
  432. .recording-indicator {
  433. position: absolute;
  434. top: 30rpx;
  435. right: 30rpx;
  436. display: flex;
  437. align-items: center;
  438. background-color: rgba(0, 0, 0, 0.5);
  439. padding: 10rpx 20rpx;
  440. border-radius: 30rpx;
  441. }
  442. .recording-dot {
  443. width: 20rpx;
  444. height: 20rpx;
  445. background-color: #ff0000;
  446. border-radius: 50%;
  447. margin-right: 10rpx;
  448. animation: blink 1s infinite;
  449. }
  450. .recording-time {
  451. color: #fff;
  452. font-size: 28rpx;
  453. }
  454. @keyframes blink {
  455. 0% { opacity: 1; }
  456. 50% { opacity: 0.3; }
  457. 100% { opacity: 1; }
  458. }
  459. .capture-btn-container {
  460. width: 100%;
  461. display: flex;
  462. justify-content: center;
  463. margin-top: 60rpx;
  464. }
  465. .capture-btn {
  466. width: 100%;
  467. height: 90rpx;
  468. line-height: 90rpx;
  469. background-color: #0039b3;
  470. color: #fff;
  471. border-radius: 45rpx;
  472. font-size: 32rpx;
  473. }
  474. .stop-btn {
  475. width: 100%;
  476. height: 90rpx;
  477. line-height: 90rpx;
  478. background-color: #e74c3c;
  479. color: #fff;
  480. border-radius: 45rpx;
  481. font-size: 32rpx;
  482. }
  483. .btn-group {
  484. display: flex;
  485. justify-content: space-between;
  486. width: 100%;
  487. margin-top: 60rpx;
  488. }
  489. .retry-btn {
  490. width: 45%;
  491. height: 90rpx;
  492. line-height: 90rpx;
  493. background-color: #fff;
  494. color: #0039b3;
  495. border: 1px solid #0039b3;
  496. border-radius: 45rpx;
  497. font-size: 32rpx;
  498. }
  499. .start-btn {
  500. width: 45%;
  501. height: 90rpx;
  502. line-height: 90rpx;
  503. background-color: #0039b3;
  504. color: #fff;
  505. border-radius: 45rpx;
  506. font-size: 32rpx;
  507. }
  508. /* 添加手部轮廓样式 */
  509. .face-outline.hand-outline {
  510. width: 500rpx;
  511. height: 300rpx;
  512. border-radius: 30rpx;
  513. }
  514. </style>