face-photo.vue 5.3 KB

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