Browse Source

HL-5269SCP的验证码格式改成点击文字(B站)或移动图块(京东)等更易用的方式

hella_online_20240911
yufei_wang 3 months ago
parent
commit
5eda100d45
  1. 11
      src/api/login/index.ts
  2. 3
      src/components/Verifition/src/Verify.vue
  3. 30
      src/components/Verifition/src/Verify/VerifySlide.vue
  4. 46
      src/views/login/components/LoginForm.vue

11
src/api/login/index.ts

@ -60,6 +60,11 @@ export const getCode = (data) => {
return request.postOriginal({ url: 'system/captcha/get', data })
}
// 获取验证图片以及 token
export const getCodeCaptchaImage = (params) => {
return request.get({ url: 'system/captcha/captchaImage', params })
}
// 滑动或者点选验证
export const reqCheck = (data) => {
return request.postOriginal({ url: 'system/captcha/check', data })
@ -71,4 +76,8 @@ export const getCodeImg = () => {
url: 'system/captcha/captchaImage', headers: {
isToken: false
}})
}
}
// PDA下载地址
export const downloadApk = (params) => {
return request.get({ url: '/wms/system-install-package/downloadApk', params })
}

3
src/components/Verifition/src/Verify.vue

@ -137,7 +137,8 @@ export default {
instance,
showBox,
closeBox,
show
show,
refresh
}
}
}

30
src/components/Verifition/src/Verify/VerifySlide.vue

@ -11,7 +11,9 @@
alt=""
style="display: block; width: 100%; height: 100%"
/>
<div v-show="showRefresh" class="verify-refresh" @click="refresh">
<!-- <div v-show="showRefresh" class="verify-refresh" @click="refresh"> -->
<div class="verify-refresh" @click="refresh">
<i class="iconfont icon-refresh"></i>
</div>
<transition name="tips">
@ -78,7 +80,7 @@
* */
import { aesEncrypt } from './../utils/ase'
import { resetSize } from './../utils/util'
import { getCode, reqCheck } from '@/api/login'
import { getCode, getCodeCaptchaImage,reqCheck } from '@/api/login'
const props = defineProps({
captchaType: {
@ -388,14 +390,24 @@ const getPictrue = async () => {
let data = {
captchaType: captchaType.value
}
const res = await getCode(data)
if (res.repCode == '0000') {
backImgBase.value = res.repData.originalImageBase64
blockBackImgBase.value = res.repData.jigsawImageBase64
backToken.value = res.repData.token
secretKey.value = res.repData.secretKey
const res = await getCodeCaptchaImage(data)
console.log('res',res)
if(res){
backImgBase.value = res.originalImageBase64
blockBackImgBase.value = res.jigsawImageBase64
backToken.value = res.token
secretKey.value = res.secretKey
} else {
tipWords.value = res.repMsg
tipWords.value = res
}
// if (res.repCode == '0000') {
// backImgBase.value = res.repData.originalImageBase64
// blockBackImgBase.value = res.repData.jigsawImageBase64
// backToken.value = res.repData.token
// secretKey.value = res.repData.secretKey
// } else {
// tipWords.value = res.repMsg
// }
}
</script>

46
src/views/login/components/LoginForm.vue

@ -34,6 +34,11 @@
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode">
<el-form-item prop="code">
<Verify ref="VerifySlide" captchaType="blockPuzzle" mode="" :imgSize="{ width: '450px', height: '225px' }" @success="capctchaCheckSuccess" @error="capctchaCheckError"></Verify>
</el-form-item>
</el-col>
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode">
<el-form-item prop="code">
<div class="flex w-[100%]">
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
@ -47,7 +52,7 @@
</div>
</div>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
<el-form-item>
<el-row justify="space-between" style="width: 100%">
@ -70,13 +75,6 @@
@click="handleLogin()" />
</el-form-item>
</el-col>
<!-- <Verify
ref="verify"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
mode="pop"
@success="handleLogin"
/> -->
</el-row>
</el-form>
</template>
@ -84,6 +82,7 @@
import { ElLoading } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { Verify } from '@/components/Verifition'
import { useIcon } from '@/hooks/web/useIcon'
@ -113,8 +112,7 @@
const permissionStore = usePermissionStore()
const redirect = ref<string>('')
const loginLoading = ref(false)
const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle clickWord
const VerifySlide = ref()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
@ -185,13 +183,14 @@
if(!needCode.value){
return
}
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img;
loginData.loginForm.uuid = res.uuid;
}
});
VerifySlide.value.refresh()
// getCodeImg().then(res => {
// captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
// if (captchaEnabled.value) {
// codeUrl.value = "data:image/gif;base64," + res.img;
// loginData.loginForm.uuid = res.uuid;
// }
// });
}
//ID
const getTenantId = async () => {
@ -220,9 +219,20 @@
})
};
//
const capctchaCheckSuccess = ({captchaVerification})=>{
console.log('capctchaCheckSuccess',captchaVerification)
loginData.loginForm.code = captchaVerification
handleLogin()
}
//
const capctchaCheckError = ()=>{
VerifySlide.value.refresh()
}
const loading = ref() // ElLoading.service
//
const handleLogin = async (params) => {
const handleLogin = async () => {
console.log('登录-185')
if(getSystermUpdateAlert()=='true'||getSystermUpdateAlert()===true){
await ElMessageBox.alert(

Loading…
Cancel
Save