feat: 登录页添加captcha code

src/constants/pageConstants.ts

@@ -199,3 +199,9 @@ export const UserTypeTooltip = [
   '(二) 人事关系不在我院的遵义医科大学及其直属附属医院的科研人员，按照遵医校部及其他附院标准执行。',
   '(三) 非上述类型的科研人员，按照院外收费标准执行，并视情况实行预交费制度，由医院开具增值税专用发票。',
 ]
+
+export enum HttpStatus {
+  OK = 200,
+  PARAM_ERROR = 400,
+  INTERNAL_ERROR = 500,
+}

src/view/login/index.vue

@@ -15,6 +15,14 @@
       </div>
       <van-field v-model="state.form.userName" placeholder="请输入用户名" />
       <van-field v-model="state.form.password" type="password" placeholder="请输入密码" class="mt10" />
+
+      <div class="mt10 input-box code">
+        <van-field v-model="state.form.idValueC" placeholder="验证码"/>
+        <div class="login-code">
+          <img class="captcha-image" width="120" height="40" :src="state.captchaImage" @click="getCaptchaImage" />
+        </div>
+      </div>
+
       <!-- <van-row justify="space-between">
         <van-button size="mini" round class="mt10 w50">找回密码</van-button>
         <van-button size="mini" round class="mt10 w50">找回密码</van-button>
@@ -39,6 +47,8 @@
   import { storeToRefs } from 'pinia'
   import { useUserInfo } from '/@/stores/userInfo'
   import { showDialog } from 'vant'
+  import { HttpStatus } from '/@/constants/pageConstants'
+
   const router = useRouter()
   const route = useRoute()
   const sm3 = crypto.sm3
@@ -46,14 +56,27 @@
   const storesUseUserInfo = useUserInfo()
   const { userInfos, openId, unionId } = storeToRefs(storesUseUserInfo)
   const state = reactive({
+    captchaImage: '',
     loading: {
       signIn: false
     },
     form: {
       userName: '',
-      password: ''
-    }
+      password: '',
+      idValueC: '',
+      idKeyC: '',
+    },
   })
+
+  const getCaptchaImage = async () => {
+    const [err, res]: ToResponse = await to(loginApi.getCaptchaImg())
+    if (err) return
+    if (res.code == HttpStatus.OK) {
+      state.captchaImage = res.data.base64stringC
+      state.form.idKeyC = res.data.idKeyC
+    }
+  }
+
   const onSignIn = async () => {
     state.loading.signIn = true
     const params = JSON.parse(JSON.stringify(state.form))
@@ -66,6 +89,7 @@
     const [err, res]: ToResponse = await to(post(params))
     if (err) {
       state.loading.signIn = false
+      await getCaptchaImage()
       return
     }
     // 存储 token 到浏览器缓存
@@ -73,7 +97,10 @@
     router.push('/home')
   }
   const openIdLogin = async () => {
-    const [err, res]: ToResponse = await to(loginApi.weChatLoginUnionId({ openId: openId.value, unionId: unionId.value }))
+    const [err, res]: ToResponse = await to(loginApi.weChatLoginUnionId({
+      openId: openId.value,
+      unionId: unionId.value,
+    }))
     if (err) return
     Local.set('token', res?.data.token)
     router.push('/home')
@@ -124,6 +151,7 @@
     if(code) {
       openIdLogin()
     }
+    await getCaptchaImage()
   })
 </script>
 
@@ -135,41 +163,59 @@
     margin: 0 auto;
     padding: 40px 0;
     flex-direction: column;
+
     .logo {
       display: flex;
       flex-direction: column;
       align-items: center;
     }
+
     header {
       display: flex;
       flex-direction: column;
       flex: 1;
     }
+
     footer {
       flex: 0 0 30px;
       display: flex;
       align-items: center;
       justify-content: center;
     }
+
     h4 {
       text-align: center;
       font-size: 24px;
       margin: 40px 0;
     }
+
     .w50 {
       width: 120px;
       background-color: #e8effc;
     }
+
     .van-cell {
       background-color: #f3f5f6;
       border-radius: 22px;
       overflow: hidden;
+
       :v-deep .van-van-field__control {
         text-align: center;
       }
+
       :deep(.van-van-field__control) {
         text-align: center;
       }
     }
+
+    .input-box.code {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .captcha-image {
+      margin-left: 16px;
+    }
   }
 </style>