feat: 滑块验证码调用

plugins/login-auth/src/components/toast/Toast.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="showWrap" class="jy-toast" :class="showContent ? 'fadein' : 'fadeout'">
+  <div
+    v-if="showWrap"
+    class="jy-toast"
+    :class="showContent ? 'fadein' : 'fadeout'"
+  >
     {{ text }}
   </div>
 </template>
@@ -15,7 +19,7 @@
   transform: translate(-50%, -50%);
   color: #fff;
   font-size: 16px;
-  z-index: 9999;
+  z-index: 99999;
 }
 .fadein {
   animation: animate_in 0.25s;

plugins/login-auth/src/views/form/login.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
 import { some } from 'lodash'
-import { ajaxSetLogin } from '@/api'
 import { computed, ref } from 'vue'
-import { tabActive, doChangeTabActive } from '@/module-model/tab'
+import { ajaxSetLogin } from '@/api'
+import { doChangeTabActive, tabActive } from '@/module-model/tab'
 import { autoLoginState, doSelectAutoLogin } from '@/module-model/autoLogin'
 import { FormRules } from '@/data/constant'
 import { trackReport } from '@/utils/common'
 import { useToast } from '@/utils/use'
 import pluginLogin from '@/lib/pluginLogin'
+import { useSMSVerify } from '@/utils/useSmsVerify'
 
 // 埋点上报
 
 function track() {
   const href = window.location.href
   let sourceStr = ''
-  if (href.indexOf('/front/structed/pc_index.html?source=baidusem') > -1) {
+  if (href.includes('/front/structed/pc_index.html?source=baidusem')) {
     sourceStr = '结构化数据-pc-baidusem'
-  } else if (
-    href.indexOf('/bid/pc/page/bidfile_landpage?source=baidusem') > -1
-  ) {
+  } else if (href.includes('/bid/pc/page/bidfile_landpage?source=baidusem')) {
     sourceStr = '招标文件解读-pc-baidusem'
   }
 
@@ -41,11 +40,12 @@ const loginCodeFormState = ref({
     value: '',
     validate: false
   },
-  imgCaptcha: {
-    value: '',
-    validate: false
-  },
+  // imgCaptcha: {
+  //   value: '',
+  //   validate: true
+  // },
   smsCaptcha: {
+    captKey: '',
     value: '',
     validate: false
   }
@@ -76,6 +76,8 @@ const loginCodeForm = {
     const params = {
       reqType: 'identCodeLogin',
       identCode: loginCodeFormState.value.smsCaptcha.value,
+      phone: loginCodeFormState.value.phone.value,
+      captchaKey: loginCodeFormState.value.smsCaptcha.captKey,
       isAutoLogin: autoLoginState.value,
       source: urlParams.source
     }
@@ -126,19 +128,19 @@ const loginCodeFormSchema = {
         maxlength: 11
       }
     },
-    {
-      key: 'imgCaptcha',
-      type: 'imgCaptcha',
-      icon: 'icon-guard',
-      message: '图形验证码输入错误',
-      rule: FormRules.imgCode,
-      inputAttr: {
-        name: 'verify_code',
-        type: 'text',
-        placeholder: '输入图形验证码',
-        maxlength: 4
-      }
-    },
+    // {
+    //   key: 'imgCaptcha',
+    //   type: 'imgCaptcha',
+    //   icon: 'icon-guard',
+    //   message: '图形验证码输入错误',
+    //   rule: FormRules.imgCode,
+    //   inputAttr: {
+    //     name: 'verify_code',
+    //     type: 'text',
+    //     placeholder: '输入图形验证码',
+    //     maxlength: 4
+    //   }
+    // },
     {
       key: 'smsCaptcha',
       type: 'smsCaptcha',
@@ -153,58 +155,22 @@ const loginCodeFormSchema = {
       },
       expands: {
         preCheckState: computed(() => {
-          const result =
-            loginCodeFormState.value.phone.validate &&
-            loginCodeFormState.value.imgCaptcha.validate
+          const result = loginCodeFormState.value.phone.validate
           return result
         })
       },
       actions: {
-        preSubmit: async function () {
+        async preSubmit() {
           trackReport('huiju', 'c_register', {
             c_platform: 'pc',
             c_type: '注册行为-验证码登录/注册-获取验证码',
             date: new Date()
           })
 
-          const params = {
-            reqType: 'sendIdentCode',
-            phone: loginCodeFormState.value.phone.value,
-            code: loginCodeFormState.value.imgCaptcha.value
-          }
-          const result = await ajaxSetLogin(params)
-            .then(({ data }) => {
-              const type = data.status
-              if (type < 0) {
-                const errorMaps = {
-                  '-1': {
-                    key: 0,
-                    message: '手机号格式错误'
-                  },
-                  '-2': {
-                    key: 1,
-                    message: '图形验证码输入错误'
-                  },
-                  '-3': {
-                    key: 0,
-                    message: '手机号已被注册'
-                  }
-                }
-                loginCodeFormNode.value.showError(
-                  errorMaps[type].key,
-                  errorMaps[type].message
-                )
-                if (type === -2 || type === -3) {
-                  loginCodeFormNode.value.doRefreshCaptcha()
-                }
-                return false
-              }
-              return true
-            })
-            .catch(() => {
-              useToast('出现错误，请稍后重试')
-            })
-          return result
+          const phone = loginCodeFormState.value.phone.value
+          const { pass, captKey } = await useSMSVerify({ phone, mold: 1 })
+          loginCodeFormState.value.smsCaptcha.captKey = captKey
+          return pass
         }
       }
     }
@@ -308,6 +274,7 @@ const loginPassFormSchema = {
   ]
 }
 </script>
+
 <template>
   <!--  表单  -->
   <div class="login-auth--form">
@@ -335,15 +302,16 @@ const loginPassFormSchema = {
       </div>
       <!-- 验证码登录 -->
       <div
-        class="login-auth--switch-tab-content"
         v-if="tabActive === 'login-code'"
+        class="login-auth--switch-tab-content"
+        :class="{ mt40: tabActive === 'login-code' }"
       >
         <base-form
           ref="loginCodeFormNode"
-          @submit="loginCodeForm.doSubmit"
-          :schema="loginCodeFormSchema.fields"
           v-model="loginCodeFormState"
-        ></base-form>
+          :schema="loginCodeFormSchema.fields"
+          @submit="loginCodeForm.doSubmit"
+        />
         <button
           class="login-auth--submit-button"
           name="verify_submit"
@@ -356,16 +324,16 @@ const loginPassFormSchema = {
 
       <!-- 密码登录 -->
       <div
+        v-if="tabActive === 'login-pass'"
         class="login-auth--switch-tab-content"
         :class="{ mt40: tabActive === 'login-pass' }"
-        v-if="tabActive === 'login-pass'"
       >
         <base-form
           ref="loginPassFormNode"
-          @submit="loginPassForm.doSubmit"
-          :schema="loginPassFormSchema.fields"
           v-model="loginPassFormState"
-        ></base-form>
+          :schema="loginPassFormSchema.fields"
+          @submit="loginPassForm.doSubmit"
+        />
         <button
           class="login-auth--submit-button"
           name="verify_submit"