315 lines
14 KiB
HTML
315 lines
14 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
<style>
|
|
html, #app {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none
|
|
}
|
|
|
|
.van-nav-bar {
|
|
background-color: #1e8cde;
|
|
}
|
|
|
|
.van-nav-bar__title {
|
|
color: #FFF;
|
|
}
|
|
|
|
.anchorBL {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
min-height: 380px;
|
|
width: 80%;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 100px;
|
|
margin: auto;
|
|
}
|
|
|
|
.header_v {
|
|
height: 30px;
|
|
width: 100%;
|
|
}
|
|
|
|
.parm_v {
|
|
background-color: white;
|
|
height: 150px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
margin: auto;
|
|
}
|
|
|
|
.input_v {
|
|
border: none;
|
|
width: 100%;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.van-cell:not(:last-child)::after {
|
|
border: none;
|
|
}
|
|
|
|
.van-field {
|
|
padding: 0;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.bottom_v {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.logo {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.logo img {
|
|
width: 300px;
|
|
}
|
|
</style>
|
|
<div v-cloak id="app">
|
|
<div class="logo">
|
|
<img style="width: 100%" src="/assets/mobile/img/login.png"/>
|
|
</div>
|
|
<div class="content">
|
|
<van-row><h1 style="margin: 0px 0;color: #1d1b1b;font-family: 'SourceHanSansCN-Heav">Welcome</h1></van-row>
|
|
<van-row>
|
|
<span style="color: rgb(160,160,160)">欢迎登录智慧工会手机平台</span>
|
|
</van-row>
|
|
<div class="parm_v">
|
|
<van-row style="border-bottom: 1px rgb(230, 230, 230) solid !important;">
|
|
<van-col span="2" style="line-height:50px;text-align: left;">
|
|
<svg t="1592742719420" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="2146" width="16" height="16">
|
|
<path d="M621.8 601.2c86.8-49.5 146.1-141.9 146.1-249 0-158.9-128.8-287.7-287.7-287.7S192.5 193.3 192.5 352.2c0 107.1 59.2 199.5 146.1 249-150 54.5-259.7 192.7-272.3 358.3h63.9c16.2-178.9 166.9-319.6 350-319.6s333.8 140.7 350 319.6h63.9c-12.6-165.6-122.3-303.8-272.3-358.3z m-365.4-249c0-123.4 100.4-223.7 223.8-223.7S704 228.8 704 352.2 603.6 575.9 480.2 575.9 256.4 475.6 256.4 352.2z"
|
|
p-id="2147" fill="#8a8a8a"></path>
|
|
</svg>
|
|
</van-col>
|
|
<van-col span="22">
|
|
<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-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">
|
|
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
|
|
p-id="3555" fill="#8a8a8a"></path>
|
|
</svg>
|
|
</van-col>
|
|
<van-col span="22">
|
|
<van-field v-model="formData.password" type="password" placeholder="输入密码"
|
|
style="margin-top: 30px" clearable></van-field>
|
|
</van-col>
|
|
</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"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="3554" width="16" height="16">
|
|
<path d="M819.221333 417.856l-519.253333 0-0.021333-150.336-0.277333-4.309333c-0.170667-2.453333-0.341333-4.906667-0.341333-7.402667s0.170667-4.970667 0.341333-7.445333l0.298667-13.397333c0.490667-1.408 0.832-2.901333 1.024-4.437333 12.650667-105.962667 102.72-185.877333 209.472-185.877333 106.773333 0 196.842667 79.914667 209.365333 184.085333 0 0 1.770667 50.794667 1.792 55.509333 0.042667 11.754667 9.578667 21.290667 21.333333 21.290667 11.477333 0.832 21.333333-9.493333 21.333333-21.312 0-4.416-1.834667-56.981333-1.962667-58.773333C747.114667 98.069333 638.848 1.984 510.485333 1.984c-125.973333 0-232.618667 92.565333-250.901333 216.448-1.450667 2.88-2.261333 6.122667-2.261333 9.557333l0.021333 13.802667-0.234667 3.690667c-0.234667 3.413333-0.448 6.826667-0.448 10.304s0.213333 6.869333 0.448 10.261333l0.192 151.786667L204.757333 417.834667c-53.44 0-96.938667 44.16-96.938667 98.432l0 412.693333c0 53.013333 42.090667 93.013333 97.898667 93.013333l612.565333 0c55.808 0 97.92-40 97.92-93.013333L916.202667 516.309333C916.181333 462.016 872.682667 417.856 819.221333 417.856zM873.514667 929.002667c0 33.066667-27.797333 50.346667-55.253333 50.346667L205.717333 979.349333c-27.456 0-55.232-17.301333-55.232-50.346667L150.485333 516.309333c0-30.741333 24.341333-55.765333 54.272-55.765333l614.485333 0c29.930667 0 54.293333 25.024 54.293333 55.765333L873.536 929.002667z"
|
|
p-id="3555" fill="#8a8a8a"></path>
|
|
</svg>
|
|
</van-col>
|
|
<van-col span="22">
|
|
<van-field v-model="formData.platformCaptcha" placeholder="请输入手机动态码"
|
|
style="margin-top: 30px" maxlength="6" clearable>
|
|
<template #button>
|
|
<div class="login-code" style="margin-top: -20px">
|
|
<van-button type="info" @click="handleLogin()">{{ 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">登 录
|
|
</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>
|
|
let marker
|
|
let vue = new Vue({
|
|
el: "#app",
|
|
data() {
|
|
return {
|
|
// 是否禁用按钮
|
|
codeDisabled: false,
|
|
// 倒计时秒数
|
|
countdown: 60,
|
|
// 按钮上的文字
|
|
codeMsg: '获取动态码',
|
|
// 定时器
|
|
timer: null,
|
|
isShowSliderVerify: false,
|
|
loading: false,
|
|
formData: {
|
|
mobile: '',
|
|
password: '',
|
|
platformKey: '',
|
|
platformCaptcha: '',
|
|
// 随机字符串
|
|
nonceStr: '',
|
|
// 验证值
|
|
value: '',
|
|
},
|
|
isNull(val) {
|
|
return !val;
|
|
},
|
|
pattern: /^1[3-9]\d{9}$/
|
|
}
|
|
},
|
|
components: {
|
|
'slider-verify': httpVueLoader('/components/captcha/sliderVerify.vue'),
|
|
},
|
|
methods: {
|
|
async sendCode() {
|
|
if (this.codeDisabled) {
|
|
return
|
|
}
|
|
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) {
|
|
console.log('success')
|
|
this.isShowSliderVerify = false;
|
|
await this.sendCode();
|
|
} 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
|
|
}
|
|
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) {
|
|
vue.$notify({type: 'success', message: d.msg})
|
|
setTimeout(() => {
|
|
location.href = '/mobile/index'
|
|
},500)
|
|
} else {
|
|
vue.$notify({type: 'danger', message: d.msg})
|
|
self.isShowSliderVerify = false
|
|
}
|
|
}, "json");
|
|
},
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<!--#
|
|
}
|
|
#-->
|