账号密码做滑块校验

src/components/Verifition/index.vue

@@ -47,7 +47,7 @@ export default {
     VerifyPoints
   },
   props: {
-    captchaType: {
+    captchaType: { // blockPuzzle 滑块 clickWord 点击文字
       type: String,
       required: true
     },

src/views/login/forgotPasswordEnt.vue

@@ -10,7 +10,7 @@
   </div>
   <Verify
     ref="verify"
-    :captchaType="captchaType"
+    captchaType="blockPuzzle"
     :imgSize="{ width: '400px', height: '200px' }"
     mode="pop"
     @success="verifySuccess"
@@ -30,7 +30,6 @@ const router = useRouter()
 
 // 验证码
 const verify = ref()
-const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
 
 // 获取验证码
 const getCode = async () => {

src/views/login/index.vue

@@ -67,6 +67,13 @@
     </div>
     <navBar :showLoginBtn="false" class="navBar"></navBar>
   </div>
+  <Verify
+    ref="verify"
+    captchaType="blockPuzzle"
+    :imgSize="{ width: '400px', height: '200px' }"
+    mode="pop"
+    @success="verifySuccess"
+  />
 </template>
 
 <script setup>
@@ -86,6 +93,7 @@ import Confirm from '@/plugins/confirm'
 import navBar from '@/layout/personal/navBar.vue'
 import about from '@/views/about/index.vue'
 import { useRoute } from 'vue-router'; const route = useRoute()
+import Verify from '@/components/Verifition'
 
 const { t } = useI18n()
 const router = useRouter()
@@ -119,11 +127,16 @@ const handleCheckEnterprise = async () => {
 const handleLogin = async () => {
   const { valid } = tab.value === 1 ? await phoneRef.value.phoneForm.validate() : await passRef.value.passwordForm.validate()
   if (!valid) return
+  if (tab.value === 2 && !captchaVerification) {
+    getCode() // 验证码组件
+    return
+  }
+  
   loginLoading.value = true
   try {
     let params, api = {}
     if (tab.value === 1) { params = { ...phoneRef.value.loginData }; api = 'handleSmsLogin'}
-    else { params = { ...passRef.value.loginData }; api = 'handlePasswordLogin'}
+    else { params = { ...passRef.value.loginData, captchaVerification }; api = 'handlePasswordLogin'}
     
     // 邮箱为企业招聘， 手机号为个人求职
     if (isEnterpriseLogin.value) {
@@ -185,6 +198,20 @@ const carouselList = ref([
   { src: 'https://minio.citupro.com/dev/menduner/preferredGroup/Hong-Kong-Polytechnic-University-banner.jpg' }
 ])
 
+// 验证码
+const verify = ref()
+// 获取验证码
+const getCode = async () => {
+  // 弹出验证码 // 已开启：则展示验证码；只有完成验证码的情况，才进行登录
+  verify.value.show()
+}
+
+let captchaVerification = ''
+const verifySuccess = (params) => {
+  captchaVerification = params.captchaVerification
+  handleLogin()
+}
+
 </script>
 
 <style lang="scss" scoped>