|
|
@@ -8,7 +8,7 @@ |
|
|
|
<van-tab title="登录" name="1"> |
|
|
|
<van-form style="margin:50px 0;" v-if="!showMessage"> |
|
|
|
<van-field |
|
|
|
v-model="formData.mobile" |
|
|
|
v-model="formData.username" |
|
|
|
name="请输入手机号" |
|
|
|
placeholder="请输入手机号" |
|
|
|
:rules="[{ required: true, message: '请填写手机号' }]" |
|
|
@@ -21,9 +21,20 @@ |
|
|
|
placeholder="请输入密码" |
|
|
|
:rules="[{ required: true, message: '请填写密码' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img style="width: 100px" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<p style="text-align: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit">登录</van-button> |
|
|
|
<van-button block type="info" native-type="submit" @click="handleLogin">登录</van-button> |
|
|
|
<p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">短信验证码登录</p> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
@@ -34,8 +45,19 @@ |
|
|
|
placeholder="请输入手机号" |
|
|
|
:rules="[{ required: true, message: '请填写用户名' }]" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img style="width: 100px" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<div style="margin: 50px 16px 16px;"> |
|
|
|
<van-button block type="info" native-type="submit" @click="showPopup">获取验证码</van-button> |
|
|
|
<van-button block type="info" native-type="submit" @click="getSmsCode">获取验证码</van-button> |
|
|
|
<p style="text-align: center;margin-top: 20px;color:#878787 " @click="showMessagePop">密码登录</p> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
@@ -89,7 +111,7 @@ |
|
|
|
/> |
|
|
|
<div style="padding: 20px"> |
|
|
|
<h1>输入短信验证码</h1> |
|
|
|
<h3 style="color: #878787">验证码已发送至13333333333,请在下方输入框内输入4位数字验证码</h3> |
|
|
|
<h3 style="color: #878787">验证码已发送至{{(formData.mobile+"").substr(0,3) + "****" + (formData.mobile+"").substr(7)}},请在下方输入框内输入4位数字验证码</h3> |
|
|
|
</div> |
|
|
|
<van-password-input |
|
|
|
:value="smsCodeValue" |
|
|
@@ -104,99 +126,12 @@ |
|
|
|
close-button-text="完成" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
<div class="login-main" v-if="false"> |
|
|
|
<ul class="head_nav clear"> |
|
|
|
<li @click="isSmsLogin = false" :class="{ active: !isSmsLogin }"> |
|
|
|
账号登录 |
|
|
|
</li> |
|
|
|
<li @click="isSmsLogin = true" :class="{ active: isSmsLogin }"> |
|
|
|
验证码登录 |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="form_main"> |
|
|
|
<van-form @submit="handleLogin"> |
|
|
|
<div v-show="!isSmsLogin"> |
|
|
|
<van-field |
|
|
|
v-model="formData.username" |
|
|
|
name="username" |
|
|
|
label="用户名" |
|
|
|
placeholder="用户名" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.password" |
|
|
|
type="password" |
|
|
|
name="password" |
|
|
|
label="密码" |
|
|
|
placeholder="密码" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.code" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="验证码" |
|
|
|
placeholder="图形验证码" |
|
|
|
|
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<img class="code-img" :src="codeUrl" @click="getCode" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
</div> |
|
|
|
<div v-show="isSmsLogin"> |
|
|
|
<van-field |
|
|
|
v-model="formData.mobile" |
|
|
|
label="手机号" |
|
|
|
placeholder="请输入手机号码" |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="formData.smsCode" |
|
|
|
center |
|
|
|
clearable |
|
|
|
label="短信验证码" |
|
|
|
placeholder="请输入短信验证码" |
|
|
|
> |
|
|
|
<template #button> |
|
|
|
<van-button |
|
|
|
size="small" |
|
|
|
type="primary" |
|
|
|
@click.native.prevent="getSmsCode" |
|
|
|
>{{ |
|
|
|
computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码" |
|
|
|
}}</van-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
</div> |
|
|
|
<div class="form-submit"> |
|
|
|
<van-button |
|
|
|
round |
|
|
|
block |
|
|
|
type="info" |
|
|
|
native-type="submit" |
|
|
|
:loading="loading" |
|
|
|
>登录</van-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</van-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="reveal-modal-con"> |
|
|
|
<div class="dd_txt"> |
|
|
|
<router-link to="register/index">注册账户</router-link> |
|
|
|
</div> |
|
|
|
<!-- <div class="other-login">--> |
|
|
|
<!-- <p class="desc">—— 更多登录方式 ——</p>--> |
|
|
|
<!-- <p class="icon-other-logins">--> |
|
|
|
<!-- <router-link class="wx" to="/"></router-link>--> |
|
|
|
<!-- <router-link class="rlsb" to="/"></router-link>--> |
|
|
|
<!-- </p>--> |
|
|
|
<!-- </div>--> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style> |
|
|
|
.app-container{ |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
.van-tab--active{ |
|
|
|
font-size: .6rem; |
|
|
|
font-weight: bold; |
|
|
@@ -233,7 +168,7 @@ |
|
|
|
} |
|
|
|
</style> |
|
|
|
<script> |
|
|
|
import { getCodeImg, getSmsCode } from "@/api/login"; |
|
|
|
import { getCodeImg, getSmsCode } from "../api/login"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
//引用wx sdk |
|
|
|
import wx from "weixin-js-sdk"; |
|
|
@@ -245,8 +180,8 @@ export default { |
|
|
|
smsCodeValue:"", |
|
|
|
showKeyboard:false, |
|
|
|
formData: { |
|
|
|
username: "admin", //账号 |
|
|
|
password: "admin123", //密码 |
|
|
|
username: "", //账号 |
|
|
|
password: "", //密码 |
|
|
|
// username:'', |
|
|
|
// password:'', |
|
|
|
code: null, //图片验证码 |
|
|
@@ -266,20 +201,14 @@ export default { |
|
|
|
created() { |
|
|
|
this.getCode(); |
|
|
|
this.height = document.body.clientHeight |
|
|
|
//调用微信公众号方法 |
|
|
|
// wx.config({ |
|
|
|
// debug: true, // 开启调试模式, |
|
|
|
// appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid |
|
|
|
// timestamp: res.timestamp, // 必填,生成签名的时间戳 |
|
|
|
// nonceStr: res.nonceStr, // 必填,生成签名的随机串 |
|
|
|
// signature: res.signature,// 必填,签名,见附录1 |
|
|
|
// jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 |
|
|
|
// }); |
|
|
|
//分享要用encodeURIComponent()方法 |
|
|
|
this.reset(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
showPopup() { |
|
|
|
this.showKeyboard = !this.showKeyboard; |
|
|
|
reset(){ |
|
|
|
|
|
|
|
}, |
|
|
|
showPopup(){ |
|
|
|
this.showKeyboard = !this.showKeyboard |
|
|
|
}, |
|
|
|
showMessagePop(){ |
|
|
|
this.showMessage = !this.showMessage |
|
|
@@ -291,6 +220,12 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
getSmsCode() { |
|
|
|
if (this.formData.code == "") { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '图片验证码不能为空', |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
if (!this.computeTime) { |
|
|
|
let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; |
|
|
|
if (!myreg.test(this.formData.mobile)) { |
|
|
@@ -299,11 +234,12 @@ export default { |
|
|
|
}); |
|
|
|
return false; |
|
|
|
} |
|
|
|
getSmsCode(this.formData.mobile).then((res) => { |
|
|
|
/* getSmsCode(this.formData.mobile).then((res) => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.$dialog.alert({ |
|
|
|
message: '验证码已发送', |
|
|
|
}); |
|
|
|
this.showKeyboard = !this.showKeyboard; |
|
|
|
this.loginForm.uuid = res.uuid; |
|
|
|
this.computeTime = 60; |
|
|
|
this.timer = setInterval(() => { |
|
|
@@ -313,7 +249,7 @@ export default { |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
} |
|
|
|
}); |
|
|
|
});*/ |
|
|
|
} |
|
|
|
}, |
|
|
|
handleLogin(values) { |
|
|
@@ -335,9 +271,9 @@ export default { |
|
|
|
this.$store |
|
|
|
.dispatch("SmsLogin", this.formData) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|
|
|
this.$router.push({ path: "/onlineHomeIndex" }).catch(() => {}); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
.catch((error) => { |
|
|
|
this.loading = false; |
|
|
|
}); |
|
|
|
} else { |
|
|
@@ -361,9 +297,10 @@ export default { |
|
|
|
this.$store |
|
|
|
.dispatch("Login", this.formData) |
|
|
|
.then(() => { |
|
|
|
this.$router.push({ path: this.redirect || "/" }).catch(() => {}); |
|
|
|
this.$router.push({ path: "/onlineHome/workbench" }).catch(() => {}); |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
.catch((error) => { |
|
|
|
console.log(error) |
|
|
|
this.loading = false; |
|
|
|
this.getCode(); |
|
|
|
}); |
|
|
@@ -372,110 +309,3 @@ export default { |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|
|
|
<style scoped lang="scss"> |
|
|
|
>>>.van-tab--active { |
|
|
|
font-size: 30px!important; |
|
|
|
} |
|
|
|
.title{ |
|
|
|
padding-top: 20%; |
|
|
|
width: 84%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
.title_one{ |
|
|
|
color: #666666; |
|
|
|
font-size: 0.4rem; |
|
|
|
} |
|
|
|
.title_two{ |
|
|
|
color: #007e72; |
|
|
|
font-size: 0.6rem; |
|
|
|
} |
|
|
|
.title_three{ |
|
|
|
color: #FFF; |
|
|
|
font-size: 0.8rem; |
|
|
|
} |
|
|
|
.app-container { |
|
|
|
background: #fff; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
.focus-logo { |
|
|
|
width: 310px; |
|
|
|
margin: 0 auto 40px; |
|
|
|
padding-top: 60px; |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.describe{ |
|
|
|
text-align: center; |
|
|
|
font-size: 34px; |
|
|
|
padding:10px 0 0; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.login-main{ |
|
|
|
width: 95%; |
|
|
|
margin: 0 auto; |
|
|
|
background: #fff; |
|
|
|
border-radius: 20px; |
|
|
|
overflow: hidden; |
|
|
|
border: 1px solid #ddd; |
|
|
|
padding-bottom:40px; |
|
|
|
margin-top: 0.4rem; |
|
|
|
} |
|
|
|
.head_nav { |
|
|
|
li { |
|
|
|
width: 50%; |
|
|
|
float: left; |
|
|
|
height: 90px; |
|
|
|
line-height: 90px; |
|
|
|
text-align: center; |
|
|
|
font-size: 30px; |
|
|
|
border-bottom: 2px solid #ddd; |
|
|
|
&.active { |
|
|
|
background: #fff; |
|
|
|
border-bottom: 2px solid #fff; |
|
|
|
color: #2386ee; |
|
|
|
} |
|
|
|
&:last-child { |
|
|
|
border-left: 2px solid #ddd; |
|
|
|
} |
|
|
|
} |
|
|
|
background: #f5f5f5; |
|
|
|
} |
|
|
|
.form_main { |
|
|
|
padding-top: 20px; |
|
|
|
.form-submit { |
|
|
|
margin: 40px 40px 0; |
|
|
|
} |
|
|
|
.code-img { |
|
|
|
width: 220px; |
|
|
|
} |
|
|
|
} |
|
|
|
.reveal-modal-con { |
|
|
|
margin: 30px 40px 0; |
|
|
|
.dd_txt { |
|
|
|
text-align: center; |
|
|
|
font-size: 28px; |
|
|
|
a { |
|
|
|
color: #FFF; |
|
|
|
} |
|
|
|
} |
|
|
|
.other-login { |
|
|
|
text-align: center; |
|
|
|
.desc { |
|
|
|
font-family: PingFangSC-Regular; |
|
|
|
font-size: 24px; |
|
|
|
color: #666; |
|
|
|
letter-spacing: 0; |
|
|
|
line-height: 30px; |
|
|
|
height: 30px; |
|
|
|
margin-top: 40px; |
|
|
|
opacity: 0.7; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |