feat: 使用后端的验证码

src/views/login/components/phone.vue

@@ -90,7 +90,7 @@ function onBack() {
           :loading="loading"
           @click="onLogin(ruleFormRef)"
         >
-          {{ "登录" }}
+          登录
         </el-button>
       </el-form-item>
     </Motion>
@@ -98,7 +98,7 @@ function onBack() {
     <Motion :delay="200">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          {{ "返回" }}
+          返回
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/components/qrCode.vue

@@ -21,7 +21,7 @@ const $pageEmit = defineEmits(["update:currentPage"]);
   </Motion>
   <Motion :delay="150">
     <el-button class="w-full mt-4" @click="$pageEmit('update:currentPage', 0)">
-      {{ "返回" }}
+      返回
     </el-button>
   </Motion>
 </template>

src/views/login/components/register.vue

@@ -159,12 +159,8 @@ function onBack() {
 
     <Motion :delay="300">
       <el-form-item>
-        <el-checkbox v-model="checked">
-          {{ "我已仔细阅读并接受" }}
-        </el-checkbox>
-        <el-button link type="primary">
-          {{ "隐私政策" }}
-        </el-button>
+        <el-checkbox v-model="checked"> 我已仔细阅读并接受 </el-checkbox>
+        <el-button link type="primary"> 隐私政策 </el-button>
       </el-form-item>
     </Motion>
 
@@ -177,7 +173,7 @@ function onBack() {
           :loading="loading"
           @click="onUpdate(ruleFormRef)"
         >
-          {{ "确定" }}
+          确定
         </el-button>
       </el-form-item>
     </Motion>
@@ -185,7 +181,7 @@ function onBack() {
     <Motion :delay="400">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          {{ "返回" }}
+          返回
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/components/resetPassword.vue

@@ -138,7 +138,7 @@ function onBack() {
           :loading="loading"
           @click="onUpdate(ruleFormRef)"
         >
-          {{ "确定" }}
+          确定
         </el-button>
       </el-form-item>
     </Motion>
@@ -146,7 +146,7 @@ function onBack() {
     <Motion :delay="300">
       <el-form-item>
         <el-button class="w-full" size="default" @click="onBack">
-          {{ "返回" }}
+          返回
         </el-button>
       </el-form-item>
     </Motion>

src/views/login/index.vue

@@ -16,7 +16,6 @@ import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
 import { initRouter, getTopMenu } from "@/router/utils";
 import { bg, avatar, illustration } from "./utils/static";
-import { ReImageVerify } from "@/components/ReImageVerify";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
@@ -24,12 +23,13 @@ import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import Lock from "@iconify-icons/ri/lock-fill";
 import User from "@iconify-icons/ri/user-3-fill";
+import * as CommonAPI from "@/api/common";
 
 defineOptions({
   name: "Login"
 });
 
-const imgCode = ref("");
+const captchaCodeBase64 = ref("");
 const router = useRouter();
 const loading = ref(false);
 const checked = ref(false);
@@ -80,7 +80,13 @@ function onkeypress({ code }: KeyboardEvent) {
   }
 }
 
-onMounted(() => {
+function getCaptchaCode() {
+  CommonAPI.getCaptchaCode().then(res => {
+    captchaCodeBase64.value = `data:image/gif;base64,${res.data.img}`;
+  });
+}
+
+onMounted(async () => {
   window.document.addEventListener("keypress", onkeypress);
 });
 
@@ -169,7 +175,13 @@ onBeforeUnmount(() => {
                   :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
                 >
                   <template v-slot:append>
-                    <ReImageVerify v-model:code="imgCode" />
+                    <img
+                      width="120"
+                      height="40"
+                      class="cursor-pointer"
+                      :src="captchaCodeBase64"
+                      @click="getCaptchaCode"
+                    />
                   </template>
                 </el-input>
               </el-form-item>
@@ -178,11 +190,9 @@ onBeforeUnmount(() => {
             <Motion :delay="250">
               <el-form-item>
                 <div class="w-full h-[20px] flex justify-between items-center">
-                  <el-checkbox v-model="checked">
-                    {{ "记住密码" }}
-                  </el-checkbox>
+                  <el-checkbox v-model="checked"> 记住密码 </el-checkbox>
                   <el-button link type="primary" @click="currentPage = 4">
-                    {{ "忘记密码" }}
+                    忘记密码
                   </el-button>
                 </div>
                 <el-button
@@ -192,7 +202,7 @@ onBeforeUnmount(() => {
                   :loading="loading"
                   @click="onLogin(ruleFormRef)"
                 >
-                  {{ "登录" }}
+                  登录
                 </el-button>
               </el-form-item>
             </Motion>