face.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="out-box">
  3. <view v-if="photo">
  4. <view style="text-align: center; padding: 20px;">
  5. <image :src="photo" style="width: 60vw; height: 60vh;"></image>
  6. </view>
  7. <view>
  8. <button type="primary" @tap="checkAndNext">识别并登录</button>
  9. </view>
  10. <view>
  11. <button type="warn" @tap="clearPhoto">重新拍照</button>
  12. </view>
  13. </view>
  14. <view v-else>
  15. <yf-photo-take v-model="photo" :base64.sync="base64"></yf-photo-take>
  16. <button type="warn" @tap="backLogin">返回登录页面</button>
  17. </view>
  18. </view>
  19. </template>
  20. <script>
  21. import { faceLogin } from '@/api/sys/user/user.js'
  22. export default {
  23. data() {
  24. return {
  25. photo: '',
  26. base64: ''
  27. }
  28. },
  29. methods: {
  30. clearPhoto(){
  31. this.photo = ''
  32. this.base64 = ''
  33. },
  34. // 对比获取token
  35. checkAndNext(){
  36. let that = this
  37. uni.showLoading({
  38. title: '正在比对人脸...'
  39. });
  40. faceLogin({ base64: this.base64 }).then(res => {
  41. console.log('识别结果', res)
  42. // 保存本地token
  43. uni.setStorageSync('token', res.token);
  44. //打印请求返回的数据
  45. uni.switchTab({
  46. url: '/pages/index/index'
  47. });
  48. uni.hideLoading()
  49. })
  50. },
  51. // 返回登录页面
  52. backLogin(){
  53. uni.redirectTo({
  54. url: '/pages/login/login'
  55. });
  56. }
  57. }
  58. }
  59. </script>
  60. <style scoped>
  61. .out-box {
  62. padding: 25px;
  63. font-size: 14px;
  64. flex-direction: column;
  65. height: 100vh;
  66. }
  67. button {
  68. margin-top: 20px;
  69. }
  70. </style>