face-photo.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  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="photo-preview">
  10. <!-- 使用camera组件替代静态图片 -->
  11. <camera v-if="!photoSrc" device-position="front" flash="auto" class="camera" @error="handleCameraError"></camera>
  12. <image v-else class="preview-image" :src="photoSrc" mode="aspectFit"></image>
  13. <view class="face-outline"></view>
  14. </view>
  15. <!-- 拍照按钮 -->
  16. <button v-if="!photoSrc" class="capture-btn" @click="takePhoto">拍照</button>
  17. <view v-else class="btn-group">
  18. <button class="retry-btn" @click="retakePhoto">重新拍照</button>
  19. <button class="start-btn" @click="startInterview">开始面试</button>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. photoSrc: '', // 拍摄的照片路径
  28. isCameraReady: false,
  29. cameraContext: null,
  30. isPageLoaded: false // 添加页面加载状态标记
  31. }
  32. },
  33. onReady() {
  34. // 相机组件初始化完成后创建相机上下文
  35. this.cameraContext = uni.createCameraContext();
  36. // 设置页面已加载完成
  37. setTimeout(() => {
  38. this.isPageLoaded = true;
  39. }, 100);
  40. },
  41. methods: {
  42. // 处理相机错误
  43. handleCameraError(e) {
  44. console.error('相机错误:', e);
  45. uni.showToast({
  46. title: '相机初始化失败,请检查权限设置',
  47. icon: 'none'
  48. });
  49. },
  50. // 拍照方法
  51. takePhoto() {
  52. if (!this.cameraContext) {
  53. uni.showToast({
  54. title: '相机未就绪',
  55. icon: 'none'
  56. });
  57. return;
  58. }
  59. uni.showLoading({
  60. title: '拍照中...'
  61. });
  62. this.cameraContext.takePhoto({
  63. quality: 'high',
  64. success: (res) => {
  65. this.photoSrc = res.tempImagePath;
  66. uni.hideLoading();
  67. },
  68. fail: (err) => {
  69. console.error('拍照失败:', err);
  70. uni.hideLoading();
  71. uni.showToast({
  72. title: '拍照失败,请重试',
  73. icon: 'none'
  74. });
  75. }
  76. });
  77. },
  78. // 重新拍照
  79. retakePhoto() {
  80. this.photoSrc = '';
  81. },
  82. startInterview() {
  83. if (!this.photoSrc) {
  84. uni.showToast({
  85. title: '请先完成拍照',
  86. icon: 'none'
  87. });
  88. return;
  89. }
  90. uni.showLoading({
  91. title: '验证中...'
  92. });
  93. // 这里可以添加将照片上传到服务器进行身份验证的代码
  94. // 例如:this.uploadPhoto();
  95. setTimeout(() => {
  96. uni.hideLoading();
  97. uni.navigateTo({
  98. url: '/pages/camera/camera',
  99. fail: (err) => {
  100. console.error('页面跳转失败:', err);
  101. uni.showToast({
  102. title: '页面跳转失败',
  103. icon: 'none'
  104. });
  105. }
  106. });
  107. }, 1500);
  108. }
  109. // 上传照片方法(示例)
  110. /*
  111. uploadPhoto() {
  112. uni.uploadFile({
  113. url: 'https://your-api-endpoint.com/upload',
  114. filePath: this.photoSrc,
  115. name: 'photo',
  116. success: (res) => {
  117. const data = JSON.parse(res.data);
  118. if (data.success) {
  119. // 验证成功,继续流程
  120. } else {
  121. // 验证失败,提示用户
  122. uni.showToast({
  123. title: data.message || '验证失败,请重试',
  124. icon: 'none'
  125. });
  126. }
  127. },
  128. fail: (err) => {
  129. console.error('上传失败:', err);
  130. uni.showToast({
  131. title: '网络错误,请重试',
  132. icon: 'none'
  133. });
  134. }
  135. });
  136. }
  137. */
  138. }
  139. }
  140. </script>
  141. <style>
  142. .photo-container {
  143. display: flex;
  144. flex-direction: column;
  145. min-height: 100vh;
  146. background-color: #f5f7fa;
  147. padding: 30rpx;
  148. opacity: 0; /* 初始设置为不可见 */
  149. transition: opacity 0.3s ease; /* 添加过渡效果 */
  150. }
  151. .photo-container.loaded {
  152. opacity: 1; /* 加载完成后显示 */
  153. }
  154. .photo-header {
  155. display: flex;
  156. flex-direction: column;
  157. align-items: center;
  158. margin-bottom: 40rpx;
  159. }
  160. .photo-title {
  161. font-size: 36rpx;
  162. font-weight: bold;
  163. color: #333;
  164. margin-bottom: 10rpx;
  165. }
  166. .photo-subtitle {
  167. font-size: 28rpx;
  168. color: #666;
  169. }
  170. .photo-preview {
  171. position: relative;
  172. width: 100%;
  173. height: 800rpx;
  174. background-color: #000;
  175. border-radius: 20rpx;
  176. overflow: hidden;
  177. margin-bottom: 40rpx;
  178. display: flex;
  179. justify-content: center;
  180. align-items: center;
  181. }
  182. .preview-image {
  183. width: 100%;
  184. height: 100%;
  185. object-fit: cover;
  186. }
  187. .face-outline {
  188. position: absolute;
  189. top: 50%;
  190. left: 50%;
  191. transform: translate(-50%, -50%);
  192. width: 400rpx;
  193. height: 500rpx;
  194. border: 4rpx dashed #fff;
  195. border-radius: 200rpx;
  196. pointer-events: none;
  197. }
  198. .camera {
  199. width: 100%;
  200. height: 100%;
  201. }
  202. .capture-btn {
  203. width: 100%;
  204. height: 90rpx;
  205. line-height: 90rpx;
  206. background-color: #6c5ce7;
  207. color: #fff;
  208. border-radius: 45rpx;
  209. font-size: 32rpx;
  210. margin-top: 60rpx;
  211. }
  212. .btn-group {
  213. display: flex;
  214. justify-content: space-between;
  215. width: 100%;
  216. margin-top: 60rpx;
  217. }
  218. .retry-btn {
  219. width: 45%;
  220. height: 90rpx;
  221. line-height: 90rpx;
  222. background-color: #fff;
  223. color: #6c5ce7;
  224. border: 1px solid #6c5ce7;
  225. border-radius: 45rpx;
  226. font-size: 32rpx;
  227. }
  228. .start-btn {
  229. width: 45%;
  230. height: 90rpx;
  231. line-height: 90rpx;
  232. background-color: #6c5ce7;
  233. color: #fff;
  234. border-radius: 45rpx;
  235. font-size: 32rpx;
  236. }
  237. </style>