Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/components/VerificationCode/index.vue

@@ -51,18 +51,26 @@
 
 <script setup>
 defineOptions({ name: 'verification-code' })
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 import { setCodeTime } from '@/utils/code'
 import { checkEmail } from '@/utils/validate'
 import { sendSmsCode } from '@/api/common/index'
 import { useI18n } from '@/hooks/web/useI18n'
 import Snackbar from '@/plugins/snackbar'
 
-const emits = defineEmits(['handleEnter'])
+const emits = defineEmits(['handleEnter', 'getCaptchaStr'])
 const { t } = useI18n()
 const props = defineProps({
   phoneDisabled: Boolean,
   phone: String,
+  openCaptcha: { // 是否开启人机验证
+    type: Boolean,
+    default: false
+  },
+  captchaStr: { // 人机验证码
+    type: String,
+    default: ''
+  },
   showEmailInput: { // 需要输入邮箱
     type: Boolean,
     default: false
@@ -123,9 +131,15 @@ const handleCode = () => {
     Snackbar.warning(t('login.mobileNumberPlaceholder'))
     return
   }
-  count.value = 60
-  setTime()
-  getSmsCode()
+  nextTick(() => {
+    if (props.openCaptcha && !props.captchaStr) {
+      emits('getCaptchaStr') // 在获取验证码之前加人机验证
+      return
+    }
+    count.value = 60
+    setTime()
+    getSmsCode()
+  })
 }
 
 const getSmsCode = async () => {
@@ -182,6 +196,7 @@ const resetForm = () => {
 
 defineExpose({
   resetForm, 
+  handleCode, 
   loginData, 
   phoneForm
 })

src/views/login/index.vue

@@ -30,7 +30,7 @@
             <v-window v-model="tab">
                 <!-- 验证码登录 -->
               <v-window-item :value="1">
-                <phoneFrom ref="phoneRef" @handleEnter="handleLogin"></phoneFrom>
+                <phoneFrom ref="phoneRef" :openCaptcha="true" :captchaStr="captchaStr" @getCaptchaStr="getCode" @handleEnter="handleLogin"></phoneFrom>
               </v-window-item>
                 <!-- 账号密码登录 -->
               <v-window-item :value="2">
@@ -55,6 +55,8 @@
             {{ $t('login.login') }}
           </v-btn>
           <div class="login-tips mt-3">
+              <v-icon v-if="isAgree" size="18" color="primary" class="mr-2" @click="isAgree = !isAgree">mdi-check-circle</v-icon>
+              <v-icon v-else size="18" color="grey" class="mr-2" @click="isAgree = !isAgree">mdi-check-circle-outline</v-icon>
               {{ $t('login.agreeLogin') }}
               <span class="color" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
               <span class="color" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
@@ -105,6 +107,7 @@ const { t } = useI18n()
 const router = useRouter()
 const tab = ref(1)
 const tab1 = ref(1)
+const isAgree = ref(false)
 const isEnterpriseLogin = ref(route.query?.entLogin || false)
 
 const handleChangeLogin = () => {
@@ -134,7 +137,8 @@ const handleCheckEnterprise = async () => {
 const handleLogin = async () => {
   const { valid } = isEnterpriseLogin.value ? await entPassRef.value.passwordForm.validate() : tab.value === 1 ? await phoneRef.value.phoneForm.validate() : await passRef.value.passwordForm.validate()
   if (!valid) return
-  if (!captchaVerification) {
+  if (!isAgree.value) return Snackbar.warning('请阅读并勾选底部协议')
+  if (!captchaStr.value) {
     getCode() // 验证码组件
     return
   }
@@ -143,10 +147,11 @@ const handleLogin = async () => {
   try {
     let params, api = {}
     // if (tab.value === 1) { params = { ...phoneRef.value.loginData }; api = 'handleSmsLogin'}
-    // else { params = { ...passRef.value.loginData, captchaVerification }; api = 'handlePasswordLogin'}
-    if (isEnterpriseLogin.value) { params = { ...entPassRef.value.loginData, captchaVerification }; api = 'handlePasswordLogin'}
-    else { params = tab.value === 1 ? { ...phoneRef.value.loginData, captchaVerification } : { ...passRef.value.loginData, captchaVerification }; api = tab.value === 1 ? 'handleSmsLogin' : 'handlePasswordLogin'}
-    
+    // else { params = { ...passRef.value.loginData }; api = 'handlePasswordLogin'}
+    if (isEnterpriseLogin.value) { params = { ...entPassRef.value.loginData }; api = 'handlePasswordLogin'}
+    else { params = tab.value === 1 ? { ...phoneRef.value.loginData } : { ...passRef.value.loginData }; api = tab.value === 1 ? 'handleSmsLogin' : 'handlePasswordLogin'}
+    if (captchaStr.value) params.captchaVerification = captchaStr.value // 人机验证
+
     // 邮箱为企业招聘， 手机号为个人求职
     if (isEnterpriseLogin.value) {
       const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
@@ -221,10 +226,14 @@ const getCode = async () => {
   verify.value.show()
 }
 
-let captchaVerification = ''
+const captchaStr = ref('')
 const verifySuccess = (params) => {
-  captchaVerification = params.captchaVerification
-  handleLogin()
+  captchaStr.value = params.captchaVerification
+  if (!isEnterpriseLogin.value && tab.value === 1 && phoneRef.value) {
+    nextTick(() => { phoneRef.value.handleCode() }) // 在获取验证码之前加人机验证
+  } else {
+    handleLogin()
+  }
 }
 
 </script>
@@ -284,7 +293,10 @@ const verifySuccess = (params) => {
 .login-tips {
   width: 100%;
   font-size: 12px;
-  text-align: center;
+  // text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .tips {
   span:hover {

src/views/register/person.vue

@@ -3,16 +3,25 @@
     <navBar v-if="!isMobile" :showLoginBtn="false" class="navBar"></navBar>
     <div class="content pa-10">
       <div class="content-title text-center mt-4">{{ isLogin ? '请输入您申请企业账号时填入的手机号进行效验' : '请输入手机号码进行注册认证'}}</div>
-      <phoneFrom class="mt-10" ref="phoneRef" @handleEnter="handleRegister" :phone="phone"></phoneFrom>
+      <phoneFrom class="mt-10" ref="phoneRef" :openCaptcha="true" :captchaStr="captchaStr" @getCaptchaStr="getCode" @handleEnter="handleRegister" :phone="phone"></phoneFrom>
       <div v-if="!isMobile" class="font-size-14 tips color-primary cursor-pointer text-end" @click="router.push('/login')">已有账号？去登录</div>
       <v-btn :loading="loading" color="primary" class="white--text mt-5" min-width="370" @click="handleRegister">{{ isCompany ? '下一步' : '注册' }}</v-btn>
       <div class="login-tips mt-3" v-if="!isCompany">
+        <v-icon v-if="isAgree" size="18" color="primary" class="mr-2" @click="isAgree = !isAgree">mdi-check-circle</v-icon>
+        <v-icon v-else size="18" color="grey" class="mr-2" @click="isAgree = !isAgree">mdi-check-circle-outline</v-icon>
         点击注册即代表您同意
         <span class="color-primary" style="cursor: pointer;" @click="router.push('/userAgreement')"> [{{ $t('login.userAgreement') }}] </span>和
         <span class="color-primary" style="cursor: pointer;" @click="router.push('/privacyPolicy')">[{{ $t('login.privacyPolicy') }}]</span>
       </div>
     </div>
   </div>
+  <Verify
+    ref="verify"
+    captchaType="blockPuzzle"
+    :imgSize="{ width: '400px', height: '200px' }"
+    mode="pop"
+    @success="verifySuccess"
+  />
 </template>
 
 <script setup>
@@ -24,6 +33,7 @@ import { useUserStore } from '@/store/user'
 import Snackbar from '@/plugins/snackbar'
 import { checkEmail } from '@/utils/validate'
 import navBar from '@/layout/personal/navBar.vue'
+import Verify from '@/components/Verifition'
 
 const isMobile = ref(false)
 onMounted(() => {
@@ -46,13 +56,32 @@ const props = defineProps({
 const router = useRouter()
 const phoneRef = ref()
 const loading = ref(false)
+const isAgree = ref(false)
 const userStore = useUserStore()
 const phone = localStorage.getItem('loginAccount') && !checkEmail(localStorage.getItem('loginAccount')) ? localStorage.getItem('loginAccount') : ''
 
+// 验证码
+const verify = ref()
+// 获取验证码
+const getCode = async () => {
+  // 弹出验证码 // 已开启：则展示验证码；只有完成验证码的情况，才进行登录
+  verify.value.show()
+}
+const captchaStr = ref('')
+const verifySuccess = (params) => {
+  captchaStr.value = params.captchaVerification
+  phoneRef.value.handleCode()
+}
+
 // 注册
 const handleRegister = async () => {
   const { valid } = await phoneRef.value.phoneForm.validate()
   if (!valid) return
+  if (!isAgree.value) return Snackbar.warning('请阅读并勾选底部协议')
+  if (!captchaStr.value) {
+    getCode() // 验证码组件
+    return
+  }
   loading.value = true
   try {
     // isLogin：企业注册申请被驳回后，再次提交时需先登录个人账号
@@ -101,7 +130,10 @@ const handleRegister = async () => {
 .login-tips {
   width: 100%;
   font-size: 14px;
-  text-align: center;
+  // text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .tips:hover {
   text-decoration: underline;