添加code

src/api/sys/user.ts

@@ -4,10 +4,18 @@ import { encodeStr } from '/@/utils/encodeUtil';
 import { ErrorMessageMode } from '/#/axios';
 import type { AppRouteRecordRaw } from '/@/router/types';
 
+// const guid = () => {
+//   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+//     let r = (Math.random() * 16) | 0,
+//       v = c == "x" ? r : (r & 0x3) | 0x8;
+//     return v.toString(16);
+//   });
+// };
 enum Api {
   // Login = '/basic-api/login',
   Login = '/service/manage/login',
   Logout = '/service/manage/logout',
+  // getCode = '/service/notAuth/getLoginAuthCode',
   GetUserInfo = '/service/manage/sysUser/getInfo',
   GetPermCode = '/service/manage/sysMenu/getButtonByUserId',
 }
@@ -19,11 +27,11 @@ export function loginApi(params: LoginParams, mode: ErrorMessageMode = 'modal')
   return defHttp.post<LoginResultModel>(
     {
       url: Api.Login,
-      params:{
+      params: {
         ...params,
-        userName:params.username,
-        password: encodeStr(window.btoa(params.password))
-    },
+        userName: params.username,
+        password: encodeStr(window.btoa(params.password)),
+      },
     },
     {
       errorMessageMode: mode,

src/views/sys/login/LoginForm.vue

@@ -26,6 +26,20 @@
       />
     </FormItem>
 
+    <FormItem name="sms" class="enter-x">
+      <Input
+        size="large"
+        :maxLength="6"
+        visibilityToggle
+        v-model:value="formData.code"
+        placeholder="验证码"
+      >
+        <template #suffix>
+          <img style="height: 100%; width: auto; position: absolute; right: 0;" :src="codeImg" class="code-img" @click="refer" />
+        </template>
+      </Input>
+    </FormItem>
+
     <ARow class="enter-x">
       <ACol :span="12">
         <FormItem>
@@ -114,6 +128,20 @@
 
   const { setLoginState, getLoginState } = useLoginState();
   const { getFormRules } = useFormRules();
+  console.log(getFormRules, 'getFormRules')
+  // 图片验证码
+  const guid = () => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+      let r = (Math.random() * 16) | 0,
+        v = c == "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  };
+  const baseURL = 'https://test-mix3d.4dkankan.com/fusion/notAuth/getLoginAuthCode'
+  let getCode = ''
+  const imgKey = ref(guid());
+  const refer = () => (imgKey.value = guid());
+  const codeImg = computed(() => baseURL + getCode + "?key=" + imgKey.value);
 
   const formRef = ref();
   const loading = ref(false);
@@ -122,8 +150,8 @@
   const formData = reactive({
     account: '',
     password: '',
+    code: '',
   });
-
   const { validForm } = useFormValid(formRef);
 
   //onKeyStroke('Enter', handleLogin);
@@ -150,6 +178,7 @@
       const userInfo = await userStore.login({
         password: data.password,
         username: data.account,
+        code: data.code,
         mode: 'none', //不要默认的错误提示
       });
       if (userInfo) {

src/views/sys/login/useLogin.ts

@@ -89,6 +89,7 @@ export function useFormRules(formData?: Recordable) {
       sms: smsFormRule,
       mobile: mobileFormRule,
     };
+    console.log('mobileRule', unref(currentState), smsFormRule);
     switch (unref(currentState)) {
       // register form rules
       case LoginStateEnum.REGISTER:
@@ -135,6 +136,7 @@ export function useFormRules(formData?: Recordable) {
       default:
         return {
           account: accountFormRule,
+          code: smsFormRule,
           password: [{ validator: getPasswordFormRule(formData?.password), trigger: 'change' }],
         };
     }