commit
This commit is contained in:
Paidax
@@ -67,7 +67,7 @@ layout("/mobile/platform.html"){
|
||||
|
||||
.bottom_v {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -98,10 +98,12 @@ layout("/mobile/platform.html"){
|
||||
</svg>
|
||||
</van-col>
|
||||
<van-col span="22">
|
||||
<van-field v-model="formData.username" placeholder="输入工号" clearable></van-field>
|
||||
<van-field v-model="formData.mobile" type="tel" maxlength="11"
|
||||
:rules="[{ pattern , message: '请输入正确的手机号' }]"
|
||||
placeholder="请输入手机号" clearable></van-field>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
|
||||
<!--<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
|
||||
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
|
||||
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
|
||||
@@ -113,7 +115,7 @@ layout("/mobile/platform.html"){
|
||||
<van-field v-model="formData.password" type="password" placeholder="输入密码"
|
||||
style="margin-top: 30px" clearable></van-field>
|
||||
</van-col>
|
||||
</van-row>
|
||||
</van-row>-->
|
||||
<van-row style="border-bottom: 1px rgb(230,230,230) solid !important;">
|
||||
<van-col span="2" style="line-height:50px;text-align: left;margin-top: 30px;">
|
||||
<svg t="1592742837149" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
@@ -123,24 +125,32 @@ layout("/mobile/platform.html"){
|
||||
</svg>
|
||||
</van-col>
|
||||
<van-col span="22">
|
||||
<van-field v-model="formData.platformCaptcha" placeholder="输入验证码"
|
||||
style="margin-top: 30px" clearable>
|
||||
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码"
|
||||
style="margin-top: 30px" maxlength="6" clearable>
|
||||
<template #button>
|
||||
<div class="login-code">
|
||||
<img :src="codeUrl" @click="getCode" alt="">
|
||||
<div class="login-code" style="margin-top: -20px">
|
||||
<van-button type="info" @click="sendCode()">{{ codeMsg }}</van-button>
|
||||
</div>
|
||||
</template>
|
||||
</van-field>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom_v">
|
||||
<van-button :loading="loading" size="large" color="linear-gradient(to right,#2b97d7,#8bc4ff)"
|
||||
@click="doLogin">登 录
|
||||
@click="handleLogin">登 录
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<van-dialog
|
||||
title="请拖动滑块完成拼图"
|
||||
v-model="isShowSliderVerify"
|
||||
@close="refresh"
|
||||
append-to-body>
|
||||
<slider-verify ref="sliderVerify" @success="onSuccess" @fail="onFail" @again="onAgain"></slider-verify>
|
||||
</van-dialog>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
@@ -149,55 +159,155 @@ layout("/mobile/platform.html"){
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
// 是否禁用按钮
|
||||
codeDisabled: false,
|
||||
// 倒计时秒数
|
||||
countdown: 60,
|
||||
// 按钮上的文字
|
||||
codeMsg: '获取动态码',
|
||||
// 定时器
|
||||
timer: null,
|
||||
isShowSliderVerify: false,
|
||||
loading: false,
|
||||
formData: {
|
||||
username: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
platformKey: '',
|
||||
platformCaptcha: "",
|
||||
platformCaptcha: '',
|
||||
// 随机字符串
|
||||
nonceStr: '',
|
||||
// 验证值
|
||||
value: '',
|
||||
},
|
||||
isNull(val) {
|
||||
return !val;
|
||||
},
|
||||
codeUrl: "${base!}/platform/login/captcha",
|
||||
pattern: /^1[3-9]\d{9}$/
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'slider-verify': httpVueLoader('/components/captcha/sliderVerify.vue'),
|
||||
},
|
||||
methods: {
|
||||
doLogin() {
|
||||
let self = this
|
||||
if (this.isNull(this.formData.username)) {
|
||||
vue.$notify({type: 'warning', message: '请填写工号'});
|
||||
async sendCode() {
|
||||
if (this.codeDisabled) {
|
||||
return
|
||||
}
|
||||
if (this.isNull(this.formData.password)) {
|
||||
vue.$notify({type: 'warning', message: '请填写密码'});
|
||||
if (this.isNull(this.formData.mobile)) {
|
||||
vue.$notify({type: 'warning', message: '请填写手机号'});
|
||||
return
|
||||
}
|
||||
const resp = await this.validMobile();
|
||||
if (resp.code !== 0) {
|
||||
vue.$notify({type: 'warning', message: resp.msg});
|
||||
return
|
||||
}
|
||||
|
||||
/*发送验证码功能*/
|
||||
//若发送验证码成功，则调用倒计时函数
|
||||
const {code, data} = await $.post('/platform/login/mobileCaptcha', {mobile: this.formData.mobile})
|
||||
if(code === 0) {
|
||||
this.formData.platformKey = data.key
|
||||
vue.$notify({type: 'success', message: data.msg});
|
||||
await this.getCode();
|
||||
} else {
|
||||
vue.$notify({type: 'warning', message: '动态码发送失败，请联系管理员'});
|
||||
}
|
||||
},
|
||||
//验证手机号是否存在
|
||||
async validMobile() {
|
||||
return await $.post('${base!}/platform/login/validMobile', {mobile: this.formData.mobile})
|
||||
},
|
||||
// 获取验证码
|
||||
async getCode() {
|
||||
// 验证码60秒倒计时
|
||||
if (!this.timer) {
|
||||
this.timer = setInterval(() => {
|
||||
if (this.countdown > 0 && this.countdown <= 60) {
|
||||
this.countdown--;
|
||||
if (this.countdown !== 0) {
|
||||
this.codeDisabled = true;
|
||||
this.codeMsg = "重新发送(" + this.countdown + ")";
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
this.codeMsg = "获取动态码";
|
||||
this.countdown = 60;
|
||||
this.timer = null;
|
||||
this.codeDisabled = false;
|
||||
}
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
//验证图片滑动
|
||||
async validVerify() {
|
||||
return await $.post('${base!}/platform/login/validVerify', {
|
||||
nonceStr: this.formData.nonceStr,
|
||||
value: this.formData.value,
|
||||
})
|
||||
},
|
||||
/* 滑动验证成功*/
|
||||
async onSuccess(captcha) {
|
||||
Object.assign(this.formData, captcha);
|
||||
const resp = await this.validVerify()
|
||||
if(resp.code === 0) {
|
||||
await this.doLogin();
|
||||
} else {
|
||||
this.$refs.sliderVerify.verifyFailEvent(resp.msg);
|
||||
}
|
||||
},
|
||||
/* 滑动验证失败*/
|
||||
onFail(msg) {
|
||||
vue.$notify({type: 'warning', message: msg || '验证失败，请控制拼图对齐缺口'});
|
||||
},
|
||||
/* 滑动验证异常*/
|
||||
onAgain() {
|
||||
vue.$notify({type: 'warning', message: '滑动操作异常，请重试'});
|
||||
this.$refs.sliderVerify.refresh();
|
||||
},
|
||||
/* 刷新验证码*/
|
||||
refresh() {
|
||||
this.$refs.sliderVerify.refresh();
|
||||
},
|
||||
handleLogin() {
|
||||
if (this.isNull(this.formData.mobile)) {
|
||||
vue.$notify({type: 'warning', message: '请填写手机号'});
|
||||
return
|
||||
}
|
||||
if (this.isNull(this.formData.platformCaptcha)) {
|
||||
vue.$notify({type: 'warning', message: '请填写验证码'});
|
||||
vue.$notify({type: 'warning', message: '请填写手机动态码'});
|
||||
return
|
||||
}
|
||||
this.isShowSliderVerify = true;
|
||||
},
|
||||
doLogin() {
|
||||
let self = this
|
||||
if (this.isNull(this.formData.mobile)) {
|
||||
vue.$notify({type: 'warning', message: '请填写手机号'});
|
||||
return
|
||||
}
|
||||
if (this.isNull(this.formData.platformCaptcha)) {
|
||||
vue.$notify({type: 'warning', message: '请填写手机动态码'});
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
this.formData.loginType = 'SMS_CODE'
|
||||
$.post("/mobile/login/doLogin", this.formData, function (d) {
|
||||
self.loading = false
|
||||
if (d.code === 0) {
|
||||
location.href = '/mobile/index'
|
||||
vue.$notify({type: 'success', message: d.msg})
|
||||
setTimeout(() => {
|
||||
location.href = '/mobile/index'
|
||||
},500)
|
||||
} else {
|
||||
vue.$notify({type: 'danger', message: d.msg})
|
||||
self.getCode()
|
||||
self.isShowSliderVerify = false
|
||||
}
|
||||
}, "json");
|
||||
},
|
||||
async getCode() {
|
||||
const {data} = await $.get('/platform/login/captcha')
|
||||
this.codeUrl = data.codeUrl
|
||||
this.formData.platformKey = data.key
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getCode()
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<!--#
|
||||
|
||||
Reference in New Issue
Block a user