authentication.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="">
  3. <view class="margin-top padding margin" style="background: #FFFFFF; border-radius: 20upx;">
  4. <view class="title">基本信息</view>
  5. <view style="margin-top: 20rpx;">
  6. 姓名
  7. </view>
  8. <view class="flex"
  9. style="margin: 20rpx 0; padding: 20rpx;border-radius: 11rpx; border: 1px #ccc solid;">
  10. <input class="uni-input" style="width: 90%;" placeholder="请输入真是姓名" />
  11. <image v-if="globalImages" :src="globalImages + 'images/cuo.png'" style="width: 44rpx;height: 44rpx;margin-left: 15rpx;"
  12. mode=""></image>
  13. </view>
  14. <view style="margin-top: 20rpx;">
  15. 身份证号码
  16. </view>
  17. <view class="flex"
  18. style="margin: 20rpx 0; padding: 20rpx;border-radius: 11rpx; border: 1px #ccc solid;">
  19. <input class="uni-input" type="number" style="width: 90%;" placeholder="请输入身份证号码" />
  20. <image v-if="globalImages" :src="globalImages + 'images/cuo.png'" style="width: 44rpx;height: 44rpx;margin-left: 15rpx;"
  21. mode=""></image>
  22. </view>
  23. <view style="color: #ccc;font-size: 24rpx;">
  24. 请确保信息准确有效
  25. </view>
  26. <view class="title" style="margin-top: 30rpx;">人脸识别</view>
  27. <view style="text-align: center;">
  28. <view class="parent-container">
  29. <view style="width: 300rpx; height: 300rpx; border-radius: 150rpx; background: #b2b2b0; margin-top: 30rpx;"></view>
  30. </view>
  31. <button type="primary" style="background: #fe6b01; margin-top: 50rpx;" size="mini" class="feedback-submit">开始验证</button>
  32. <view style="margin-top: 15rpx;">
  33. 请正对摄像头,确保光线充足
  34. </view>
  35. </view>
  36. </view>
  37. <view class=" margin-top footer text-xxl flex align-center" style="font-size: 24rpx; padding: 0 30rpx;">
  38. <text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'">同意并接受</text>
  39. <!-- 协议地址 -->
  40. <navigator url="/my/setting/sijixieyi" style="color: #fe6b01;" open-type="navigate">《司机代驾服务用户协议 》</navigator>
  41. </view>
  42. <view class="login_btn">立即兑换</view>
  43. </view>
  44. </template>
  45. <script>
  46. import { waitForGlobalImages } from '@/utils/globalImageLoader'
  47. export default {
  48. data() {
  49. return {
  50. selectedModule: 'douyin',
  51. globalImages: ''
  52. }
  53. },
  54. onLoad() {
  55. waitForGlobalImages().then((path) => {
  56. console.log('✅ 全局图片路径:', path)
  57. this.globalImages = path
  58. })
  59. },
  60. methods: {
  61. selectModule(module) {
  62. this.selectedModule = module;
  63. }
  64. },
  65. mounted() {
  66. }
  67. }
  68. </script>
  69. <style scoped>
  70. .title {
  71. font-size: 33rpx;
  72. font-family: PingFang SC;
  73. color: #333333;
  74. }
  75. .login_btn {
  76. width: calc(100% - 60rpx);
  77. margin: 30rpx auto;
  78. text-align: center;
  79. background: #fe6b01;
  80. height: 80rpx;
  81. border-radius: 16rpx;
  82. color: #ffffff;
  83. line-height: 80rpx;
  84. }
  85. .parent-container {
  86. display: flex;
  87. justify-content: center;
  88. align-items: center;
  89. position: relative;
  90. }
  91. </style>