identity-verify.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <view class="verify-container">
  3. <!-- 顶部提示 -->
  4. <view class="verify-tip">
  5. 身份证号码仅用于验证您的身份信息,以确保面试的真实性和安全性
  6. </view>
  7. <!-- 表单 -->
  8. <view class="form-container">
  9. <!-- 姓名 -->
  10. <view class="form-item">
  11. <text class="form-label">姓名<text class="required">*</text></text>
  12. <input type="text" v-model="formData.name" placeholder="请输入姓名" class="form-input" />
  13. </view>
  14. <!-- 身份证号 -->
  15. <view class="form-item">
  16. <text class="form-label">身份证号<text class="required">*</text></text>
  17. <input type="text" v-model="formData.idCard" placeholder="请输入有效身份证号" class="form-input" maxlength="18" />
  18. </view>
  19. <!-- 协议同意 -->
  20. <view class="agreement">
  21. <checkbox :checked="isAgreed" @tap="toggleAgreement" color="#6c5ce7" />
  22. <text class="agreement-text">
  23. 我已阅读并同意
  24. <text class="agreement-link">《身份验证服务协议》</text>
  25. <text class="agreement-link">《隐私保护政策》</text>
  26. <text class="agreement-link">《网络安全协议》</text>
  27. </text>
  28. </view>
  29. </view>
  30. <!-- 提交按钮 -->
  31. <button class="submit-btn" :disabled="!canSubmit" @click="submitForm">提交</button>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. formData: {
  39. name: '',
  40. idCard: ''
  41. },
  42. isAgreed: false
  43. }
  44. },
  45. computed: {
  46. canSubmit() {
  47. return this.formData.name.trim() &&
  48. this.formData.idCard.trim() &&
  49. this.isAgreed;
  50. }
  51. },
  52. methods: {
  53. toggleAgreement() {
  54. this.isAgreed = !this.isAgreed;
  55. },
  56. submitForm() {
  57. if (!this.canSubmit) {
  58. let message = '';
  59. if (!this.formData.name.trim()) {
  60. message = '请输入姓名';
  61. } else if (!this.formData.idCard.trim()) {
  62. message = '请输入身份证号';
  63. } else if (!this.isAgreed) {
  64. message = '请阅读并同意相关协议';
  65. }
  66. uni.showToast({
  67. title: message,
  68. icon: 'none'
  69. });
  70. return;
  71. }
  72. // 验证身份证号格式
  73. const idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  74. if (!idCardReg.test(this.formData.idCard)) {
  75. uni.showToast({
  76. title: '请输入正确的身份证号',
  77. icon: 'none'
  78. });
  79. return;
  80. }
  81. // 提交表单
  82. uni.showLoading({
  83. title: '验证中...'
  84. });
  85. setTimeout(() => {
  86. uni.hideLoading();
  87. uni.navigateTo({
  88. url: '/pages/face-photo/face-photo',
  89. fail: (err) => {
  90. console.error('页面跳转失败:', err);
  91. uni.showToast({
  92. title: '页面跳转失败',
  93. icon: 'none'
  94. });
  95. }
  96. });
  97. }, 1500);
  98. }
  99. }
  100. }
  101. </script>
  102. <style>
  103. .verify-container {
  104. display: flex;
  105. flex-direction: column;
  106. min-height: 100vh;
  107. background-color: #f5f7fa;
  108. padding: 30rpx;
  109. }
  110. .verify-tip {
  111. font-size: 26rpx;
  112. color: #666;
  113. line-height: 1.5;
  114. margin-bottom: 40rpx;
  115. }
  116. .form-container {
  117. background-color: #fff;
  118. border-radius: 12rpx;
  119. padding: 20rpx;
  120. margin-bottom: 40rpx;
  121. }
  122. .form-item {
  123. margin-bottom: 30rpx;
  124. }
  125. .form-label {
  126. display: block;
  127. font-size: 28rpx;
  128. color: #333;
  129. margin-bottom: 15rpx;
  130. }
  131. .required {
  132. color: #e74c3c;
  133. margin-left: 5rpx;
  134. }
  135. .form-input {
  136. width: 100%;
  137. height: 80rpx;
  138. border-bottom: 1px solid #eee;
  139. font-size: 28rpx;
  140. box-sizing: border-box;
  141. }
  142. .agreement {
  143. display: flex;
  144. align-items: flex-start;
  145. margin-top: 20rpx;
  146. }
  147. .agreement-text {
  148. font-size: 24rpx;
  149. color: #666;
  150. line-height: 1.5;
  151. margin-left: 10rpx;
  152. }
  153. .agreement-link {
  154. color: #6c5ce7;
  155. }
  156. .submit-btn {
  157. width: 100%;
  158. height: 90rpx;
  159. line-height: 90rpx;
  160. background-color: #6c5ce7;
  161. color: #fff;
  162. border-radius: 45rpx;
  163. font-size: 32rpx;
  164. margin-top: 60rpx;
  165. }
  166. .submit-btn[disabled] {
  167. background-color: #b2b2b2;
  168. color: #fff;
  169. }
  170. </style>