登录时要求填写身份证

package.json

@@ -24,6 +24,7 @@
     "element-ui": "2.13.2",
     "id-validator": "^1.3.0",
     "js-cookie": "2.2.0",
+    "jsencrypt": "^3.5.4",
     "moment": "^2.30.1",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/views/regulatoryPlatForm/index.vue

@@ -72,12 +72,37 @@
         <div id="pieChart" class="chart-box" />
       </div>
     </div>
+
+    <el-dialog
+      title="提示"
+      :visible.sync="userInfoDialogVisible"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      width="520px"
+    >
+      <div class="user-info-dialog-tip">应局里的要求，系统需要采集用户的身份证号码与手机号码，请填写以下信息：</div>
+      <div class="user-info-dialog-field">
+        <span class="label">身份证号：</span>
+        <el-input v-model.trim="userInfoForm.idCard" placeholder="请输入身份证号" />
+      </div>
+      <div class="user-info-dialog-field">
+        <span class="label">手机号：</span>
+        <el-input v-model.trim="userInfoForm.mobile" maxlength="11" placeholder="请输入手机号" />
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" :loading="userInfoSubmitting" @click="submitUserInfo">提 交</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import IDValidator from 'id-validator'
+import { JSEncrypt } from 'jsencrypt'
 import { taskUnionPageStatistic, indexPageStatistic } from '@/api/regulatoryPlatForm'
+import { aiccsApiUsersappCheck, aiccsApiUsersappGetPublicKey, aiccsApiUsersappSetUserInfo } from '@/api/auto-basisapi'
 
 export default {
   name: 'BusinessAbnormalDashboard',
@@ -96,7 +121,14 @@ export default {
         normal: 0,
         overdue: 0,
         soonOverdue: 0
-      }
+      },
+      userInfoDialogVisible: false,
+      userInfoSubmitting: false,
+      userInfoForm: {
+        idCard: '',
+        mobile: ''
+      },
+      userInfoPublicKey: ''
     }
   },
   mounted() {
@@ -104,6 +136,7 @@ export default {
     this.initPieChart()
     this.getCardData()
     this.getStatusData()
+    this.checkAndCollectUserInfo()
     // 监听窗口大小变化，自适应图表
     window.addEventListener('resize', () => {
       this.barChart.resize()
@@ -313,6 +346,128 @@ export default {
         }]
       })
     },
+    hasUserInfoRecord(res) {
+      const data = res && res.data
+      if (typeof data === 'boolean') {
+        return data
+      }
+
+      if (data && typeof data === 'object') {
+        if (Object.prototype.hasOwnProperty.call(data, 'hasRecord')) {
+          return Boolean(data.hasRecord)
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'recorded')) {
+          return Boolean(data.recorded)
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'needCollect')) {
+          return !data.needCollect
+        }
+        if (Object.prototype.hasOwnProperty.call(data, 'identityNo') || Object.prototype.hasOwnProperty.call(data, 'mobile')) {
+          return Boolean(data.identityNo) && Boolean(data.mobile)
+        }
+      }
+
+      return false
+    },
+    async checkAndCollectUserInfo() {
+      try {
+        const [checkRes, publicKeyRes] = await Promise.all([
+          aiccsApiUsersappCheck(),
+          aiccsApiUsersappGetPublicKey()
+        ])
+        if (!checkRes || checkRes.code !== 0) {
+          this.userInfoDialogVisible = true
+          return
+        }
+        this.userInfoPublicKey = (publicKeyRes && (publicKeyRes.data || publicKeyRes.msg || publicKeyRes.publicKey)) || ''
+        this.userInfoDialogVisible = !this.hasUserInfoRecord(checkRes)
+      } catch (error) {
+        console.error('检查用户身份证和手机号失败:', error)
+        this.userInfoDialogVisible = true
+      }
+    },
+    validateUserInfoForm() {
+      if (!this.userInfoForm.idCard) {
+        this.$message.warning('请填写身份证号')
+        return false
+      }
+      if (!this.userInfoForm.mobile) {
+        this.$message.warning('请填写手机号')
+        return false
+      }
+
+      const validator = new IDValidator()
+      if (!validator.isValid(this.userInfoForm.idCard, 18)) {
+        this.$message.warning('请输入合法的身份证号')
+        return false
+      }
+
+      if (!/^1\d{10}$/.test(this.userInfoForm.mobile)) {
+        this.$message.warning('请输入合法的手机号')
+        return false
+      }
+
+      return true
+    },
+    async ensureUserInfoPublicKey() {
+      if (this.userInfoPublicKey) {
+        return true
+      }
+
+      try {
+        const res = await aiccsApiUsersappGetPublicKey()
+        this.userInfoPublicKey = (res && (res.data || res.msg || res.publicKey)) || ''
+      } catch (error) {
+        console.error('获取用户信息公钥失败:', error)
+      }
+
+      return Boolean(this.userInfoPublicKey)
+    },
+    async encryptWithPublicKey(value) {
+      if (!this.userInfoPublicKey) {
+        throw new Error('用户信息加密公钥为空')
+      }
+
+      const jse = new JSEncrypt()
+      jse.setPublicKey(this.userInfoPublicKey)
+      return jse.encrypt(String(value))
+    },
+    async submitUserInfo() {
+      if (!this.validateUserInfoForm()) {
+        return
+      }
+
+      this.userInfoSubmitting = true
+      try {
+        const hasPublicKey = await this.ensureUserInfoPublicKey()
+        if (!hasPublicKey) {
+          this.$message.warning('获取加密公钥失败，请稍后重试')
+          return
+        }
+
+        const [identityNoEncrypted, mobileEncrypted] = await Promise.all([
+          this.encryptWithPublicKey(this.userInfoForm.idCard),
+          this.encryptWithPublicKey(this.userInfoForm.mobile)
+        ])
+
+        const res = await aiccsApiUsersappSetUserInfo({
+          identityNoEncrypted,
+          mobileEncrypted
+        })
+
+        if (res && res.code === 0) {
+          this.$message.success('信息提交成功')
+          this.userInfoDialogVisible = false
+        } else {
+          this.$message.warning((res && res.msg) || '信息提交失败')
+        }
+      } catch (error) {
+        console.error('提交用户身份证和手机号失败:', error)
+        this.$message.warning('信息提交失败')
+      } finally {
+        this.userInfoSubmitting = false
+      }
+    },
     // 跳转到我的待办对应 tab
     goToTodoList(activeName) {
       this.$router.push({
@@ -477,5 +632,23 @@ export default {
       }
     }
   }
+
+  .user-info-dialog-tip {
+    margin-bottom: 18px;
+    line-height: 22px;
+    color: #333;
+  }
+
+  .user-info-dialog-field {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+
+    .label {
+      width: 80px;
+      color: #333;
+      flex-shrink: 0;
+    }
+  }
 }
 </style>