优化获取验证码表单验证

更新验证码接口

src/api/admin/Captcha.ts

@@ -22,10 +22,16 @@ export class CaptchaApi<SecurityDataType = unknown> extends HttpClient<SecurityD
    * @request POST:/api/admin/captcha/generate
    * @secure
    */
-  generate = (params: RequestParams = {}) =>
+  generate = (
+    query?: {
+      captchaId?: string
+    },
+    params: RequestParams = {}
+  ) =>
     this.request<ResultOutputCaptchaData, any>({
       path: `/api/admin/captcha/generate`,
       method: 'POST',
+      query: query,
       secure: true,
       format: 'json',
       ...params,

src/components/my-input-code/index.vue

@@ -5,9 +5,14 @@
         <el-icon class="el-input__icon"><ele-Message /></el-icon>
       </template>
       <template #suffix>
-        <el-link type="primary" :underline="false" v-show="state.status !== 'countdown'" :disabled="state.status === 'countdown'" @click="onClick">{{
-          state.status === 'ready' ? state.startText : state.endText
-        }}</el-link>
+        <el-link
+          type="primary"
+          :underline="false"
+          v-show="state.status !== 'countdown'"
+          :disabled="state.status === 'countdown'"
+          @click.prevent.stop="onClick"
+          >{{ state.status === 'ready' ? state.startText : state.endText }}</el-link
+        >
         <el-countdown
           v-show="state.status === 'countdown'"
           :format="state.changeText"
@@ -104,7 +109,7 @@ const onChange = (value: number) => {
 //刷新滑块验证码
 const onRefresh = async () => {
   slideCaptchaRef.value.startRequestGenerate()
-  const res = await new CaptchaApi().generate().catch(() => {
+  const res = await new CaptchaApi().generate({ captchaId: state.requestId }).catch(() => {
     slideCaptchaRef.value.endRequestGenerate(null, null)
   })
   if (res?.success && res.data) {

src/components/my-slide-captcha/index.vue

@@ -77,7 +77,6 @@
             fill-rule="nonzero"
           ></path>
         </svg>
-        <!-- <span class="captcha__action__text">刷新</span> -->
       </a>
     </div>
   </div>
@@ -494,6 +493,11 @@ defineExpose({
   right: 0px;
   opacity: 0.8;
   background: rgba(0, 0, 0, 0.12);
+  padding: 0px 4px;
+  &:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.2);
+  }
 }
 
 .captcha__action__text {

src/views/admin/login/component/mobile.vue

@@ -10,6 +10,7 @@
         ]"
       >
         <el-input
+          ref="phoneRef"
           text
           :placeholder="$t('message.mobile.placeholder1')"
           maxlength="11"
@@ -44,6 +45,7 @@ import { testMobile } from '/@/utils/test'
 const MyInputCode = defineAsyncComponent(() => import('/@/components/my-input-code/index.vue'))
 
 const formRef = ref()
+const phoneRef = ref()
 // 定义变量内容
 const state = reactive({
   ruleForm: {
@@ -59,6 +61,7 @@ const state = reactive({
 const validate = (callback: Function) => {
   formRef.value.validateField('mobile', (isValid: boolean) => {
     if (!isValid) {
+      phoneRef.value?.focus()
       return
     }
     callback?.()