face-photo.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  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.uploadMedia((url) => {
  193. // 保存照片URL
  194. this.photoUrl = url;
  195. // 直接提交照片URL到指定接口
  196. this.submitPhotoUrl();
  197. });
  198. },
  199. // 上传媒体文件方法
  200. uploadMedia(callback) {
  201. // 获取openid和tenant_id,可以从缓存或全局状态获取
  202. const openid = JSON.parse(uni.getStorageSync('userInfo')).openid || '';
  203. const tenant_id = 1 || '';
  204. if (!openid || !tenant_id) {
  205. uni.hideLoading();
  206. uni.showToast({
  207. title: '用户信息不完整,请重新登录',
  208. icon: 'none'
  209. });
  210. return;
  211. }
  212. // 使用uni.uploadFile方式上传图片
  213. uni.uploadFile({
  214. url: `${apiBaseUrl}/api/system/upload/`,
  215. filePath: this.mediaSource,
  216. name: 'file',
  217. formData: {
  218. openid: openid,
  219. tenant_id: tenant_id
  220. },
  221. success: (uploadRes) => {
  222. // 解析返回的JSON字符串
  223. const res = JSON.parse(uploadRes.data);
  224. if (res.code === 2000) { // 根据实际API响应调整
  225. // 获取返回的图片URL
  226. const photoUrl = res.data.url || res.data.photoUrl || '';
  227. if (callback && typeof callback === 'function') {
  228. callback(photoUrl);
  229. }
  230. } else {
  231. uni.hideLoading();
  232. uni.showToast({
  233. title: res.msg || '照片上传失败',
  234. icon: 'none'
  235. });
  236. }
  237. },
  238. fail: (err) => {
  239. uni.hideLoading();
  240. console.error('上传失败:', err);
  241. uni.showToast({
  242. title: '网络错误,请重试',
  243. icon: 'none'
  244. });
  245. }
  246. });
  247. },
  248. // 提交照片URL到指定接口
  249. submitPhotoUrl() {
  250. const openid = JSON.parse(uni.getStorageSync('userInfo')).openid || '';
  251. const tenant_id = 1 || '';
  252. if (!this.photoUrl) {
  253. uni.hideLoading();
  254. uni.showToast({
  255. title: '照片信息不完整,请重试',
  256. icon: 'none'
  257. });
  258. return;
  259. }
  260. // 使用fillUserInfo方法进行上传
  261. fillUserInfo({
  262. application_id: uni.getStorageSync('appId'),
  263. openid: openid,
  264. tenant_id: tenant_id,
  265. avatar: this.photoUrl,
  266. }).then(res => {
  267. uni.hideLoading();
  268. console.log(res);
  269. // this.updateLocalUserInfo();
  270. uni.showToast({
  271. title: '照片上传成功',
  272. icon: 'success'
  273. });
  274. // 上传成功后跳转到下一页
  275. setTimeout(() => {
  276. uni.navigateTo({
  277. url: '/pages/identity-verify/identity-verify',
  278. fail: (err) => {
  279. console.error('页面跳转失败:', err);
  280. uni.showToast({
  281. title: '页面跳转失败',
  282. icon: 'none'
  283. });
  284. }
  285. });
  286. }, 1500);
  287. }).catch(err => {
  288. uni.hideLoading();
  289. console.error('提交失败:', err);
  290. uni.showToast({
  291. title: '网络错误,请重试',
  292. icon: 'none'
  293. });
  294. });
  295. },
  296. updateLocalUserInfo() {
  297. getUserInfo()
  298. .then(res => {
  299. if (res.code === 200 && res.data) {
  300. let userInfo = {};
  301. try {
  302. userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  303. } catch (e) {
  304. console.error('解析本地存储用户信息失败:', e);
  305. userInfo = {};
  306. }
  307. const updatedUserInfo = {
  308. ...userInfo,
  309. ...res.data
  310. };
  311. uni.setStorageSync('userInfo', JSON.stringify(updatedUserInfo));
  312. }
  313. })
  314. .catch(err => {
  315. console.error('更新本地用户信息失败:', err);
  316. });
  317. }
  318. }
  319. }
  320. </script>
  321. <style>
  322. .photo-container {
  323. display: flex;
  324. flex-direction: column;
  325. min-height: 100vh;
  326. background-color: #f5f7fa;
  327. padding: 30rpx;
  328. opacity: 0; /* 初始设置为不可见 */
  329. transition: opacity 0.3s ease; /* 添加过渡效果 */
  330. }
  331. .photo-container.loaded {
  332. opacity: 1; /* 加载完成后显示 */
  333. }
  334. .photo-header {
  335. display: flex;
  336. flex-direction: column;
  337. align-items: center;
  338. margin-bottom: 20rpx;
  339. }
  340. .photo-title {
  341. font-size: 36rpx;
  342. font-weight: bold;
  343. color: #333;
  344. margin-bottom: 10rpx;
  345. }
  346. .photo-subtitle {
  347. font-size: 28rpx;
  348. color: #666;
  349. }
  350. /* 模式选择器样式 */
  351. .mode-selector {
  352. display: flex;
  353. justify-content: center;
  354. margin-bottom: 30rpx;
  355. background-color: #eaeaea;
  356. border-radius: 40rpx;
  357. padding: 6rpx;
  358. width: 80%;
  359. align-self: center;
  360. }
  361. .mode-option {
  362. flex: 1;
  363. text-align: center;
  364. padding: 16rpx 0;
  365. font-size: 28rpx;
  366. color: #666;
  367. border-radius: 36rpx;
  368. transition: all 0.3s;
  369. }
  370. .mode-option.active {
  371. background-color: #6c5ce7;
  372. color: #fff;
  373. }
  374. .photo-preview {
  375. position: relative;
  376. width: 100%;
  377. height: 800rpx;
  378. background-color: #000;
  379. border-radius: 20rpx;
  380. overflow: hidden;
  381. margin-bottom: 40rpx;
  382. display: flex;
  383. justify-content: center;
  384. align-items: center;
  385. }
  386. .preview-image, .preview-video {
  387. width: 100%;
  388. height: 100%;
  389. object-fit: cover;
  390. }
  391. .face-outline {
  392. position: absolute;
  393. top: 50%;
  394. left: 50%;
  395. transform: translate(-50%, -50%);
  396. width: 400rpx;
  397. height: 500rpx;
  398. border: 4rpx dashed #fff;
  399. border-radius: 200rpx;
  400. pointer-events: none;
  401. }
  402. .camera {
  403. width: 100%;
  404. height: 100%;
  405. }
  406. /* 录制指示器 */
  407. .recording-indicator {
  408. position: absolute;
  409. top: 30rpx;
  410. right: 30rpx;
  411. display: flex;
  412. align-items: center;
  413. background-color: rgba(0, 0, 0, 0.5);
  414. padding: 10rpx 20rpx;
  415. border-radius: 30rpx;
  416. }
  417. .recording-dot {
  418. width: 20rpx;
  419. height: 20rpx;
  420. background-color: #ff0000;
  421. border-radius: 50%;
  422. margin-right: 10rpx;
  423. animation: blink 1s infinite;
  424. }
  425. .recording-time {
  426. color: #fff;
  427. font-size: 28rpx;
  428. }
  429. @keyframes blink {
  430. 0% { opacity: 1; }
  431. 50% { opacity: 0.3; }
  432. 100% { opacity: 1; }
  433. }
  434. .capture-btn-container {
  435. width: 100%;
  436. display: flex;
  437. justify-content: center;
  438. margin-top: 60rpx;
  439. }
  440. .capture-btn {
  441. width: 100%;
  442. height: 90rpx;
  443. line-height: 90rpx;
  444. background-color: #6c5ce7;
  445. color: #fff;
  446. border-radius: 45rpx;
  447. font-size: 32rpx;
  448. }
  449. .stop-btn {
  450. width: 100%;
  451. height: 90rpx;
  452. line-height: 90rpx;
  453. background-color: #e74c3c;
  454. color: #fff;
  455. border-radius: 45rpx;
  456. font-size: 32rpx;
  457. }
  458. .btn-group {
  459. display: flex;
  460. justify-content: space-between;
  461. width: 100%;
  462. margin-top: 60rpx;
  463. }
  464. .retry-btn {
  465. width: 45%;
  466. height: 90rpx;
  467. line-height: 90rpx;
  468. background-color: #fff;
  469. color: #6c5ce7;
  470. border: 1px solid #6c5ce7;
  471. border-radius: 45rpx;
  472. font-size: 32rpx;
  473. }
  474. .start-btn {
  475. width: 45%;
  476. height: 90rpx;
  477. line-height: 90rpx;
  478. background-color: #6c5ce7;
  479. color: #fff;
  480. border-radius: 45rpx;
  481. font-size: 32rpx;
  482. }
  483. /* 添加手部轮廓样式 */
  484. .face-outline.hand-outline {
  485. width: 500rpx;
  486. height: 300rpx;
  487. border-radius: 30rpx;
  488. }
  489. </style>