<template>
|
<div class="warpIndex content">
|
<div class="loginContentBox">
|
<div class="backgroundImg">
|
旅游教育出版社
|
</div>
|
<div class="loginContent">
|
<!-- validate-first -->
|
<van-form
|
:disabled="loginLoading"
|
v-show="loginFormType == 'code'"
|
ref="login"
|
@submit="loginFun"
|
>
|
<div class="codeLoginItemBox flex">
|
<van-field
|
placeholder="请输入手机号"
|
v-model="loginForm.mobilePhone"
|
name="mobilePhone"
|
@keyup.enter.native="loginFun"
|
:rules="[
|
{ required: true, message: '' },
|
{
|
pattern: rulesPhonePattern,
|
message: '请输入正确格式的手机号'
|
}
|
]"
|
></van-field>
|
</div>
|
<div class="codeLoginItemBox flex">
|
<van-field
|
placeholder="请输入图形验证码"
|
name="imgCode"
|
v-model="loginForm.imgCode"
|
@keyup.enter.native="loginFun"
|
:rules="[
|
{ required: true, message: '' },
|
{ pattern: rulesImgCode, message: '请输入4位的图形验证码' }
|
]"
|
></van-field>
|
<div class="centerVertically">
|
<img
|
:src="imgCode"
|
class="imgCode"
|
alt=""
|
@click="getImgCapcha"
|
/>
|
</div>
|
</div>
|
<div class="codeLoginItemBox flex">
|
<van-field
|
placeholder="请输入验证码"
|
name="verificationCode"
|
:rules="[
|
{ required: true, message: '' },
|
{ pattern: rulesImgCode, message: '请输入4位的验证码' }
|
]"
|
v-model="loginForm.verificationCode"
|
@keyup.enter.native="loginFun"
|
></van-field>
|
<div class="centerVertically">
|
<van-button
|
size="large"
|
style="width: 125px; height: 40px; color: #828282"
|
@click.prevent="getVerifyCode"
|
:disabled="countDown != 0"
|
>{{
|
countDown == 0
|
? "获取短信验证码"
|
: "验证码(" + countDown + "s)"
|
}}</van-button
|
>
|
</div>
|
</div>
|
<div class="changFormBtn">
|
<span v-show="loginFormType == 'password'" @click="resetInput"
|
>短信验证码登录</span
|
>
|
<span v-show="loginFormType == 'code'" @click="resetInput"
|
>手机号密码登录</span
|
>
|
</div>
|
<div class="loginBtnBox">
|
<van-button
|
type="primary"
|
class="loginBtn"
|
@click="loginFun"
|
:loading="loginLoading"
|
>登 录</van-button
|
>
|
</div>
|
</van-form>
|
<van-form
|
:disabled="loginLoading"
|
v-show="loginFormType == 'password'"
|
ref="passwordLogin"
|
@submit="phonePwdLogin"
|
>
|
<div class="loginItemBox">
|
<van-field
|
v-model="loginForm.mobilePhone"
|
placeholder="请输入手机号"
|
clearable
|
:label-width="50"
|
label="手机号"
|
name="mobilePhone"
|
:rules="[
|
{ required: true, message: '' },
|
{
|
pattern: rulesPhonePattern,
|
message: '请输入正确格式的手机号'
|
}
|
]"
|
@keyup.enter.native="phonePwdLogin"
|
></van-field>
|
</div>
|
<div class="loginItemBox">
|
<van-field
|
:label-width="50"
|
label="密码"
|
v-model="loginForm.password"
|
type="password"
|
show-password
|
name="password"
|
:rules="[{ required: true, message: '' }]"
|
placeholder="请输入密码"
|
></van-field>
|
</div>
|
<div class="changFormBtn">
|
<span v-show="loginFormType == 'password'" @click="resetInput"
|
>短信验证码登录</span
|
>
|
<span v-show="loginFormType == 'code'" @click="resetInput"
|
>手机号密码登录</span
|
>
|
</div>
|
<div class="loginBtnBox">
|
<van-button
|
type="primary"
|
class="loginBtn"
|
@click="phonePwdLogin"
|
:loading="loginLoading"
|
>登 录</van-button
|
>
|
</div>
|
</van-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { Toast } from "vant";
|
export default {
|
/**
|
* .农大社移动端增加登录方式选择
|
* 增加手机号的登录，微信登录 移动端 登陆方式选择，
|
* 手机号登录 -> 获取微信code 静默绑定微信
|
* 微信登录 -> 让绑定手机号。
|
*/
|
data() {
|
return {
|
countDown: 0,
|
loginFormType: "code",
|
// 登录表单
|
loginForm: {
|
mobilePhone: "",
|
password: "",
|
imgCode: "",
|
verificationCode: ""
|
},
|
imgCode: "",
|
rulesPhonePattern:
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
rulesImgCode: /^\d{4}$/,
|
loginLoading: false
|
};
|
},
|
created() {
|
this.getImgCapcha();
|
},
|
methods: {
|
getImgCapcha() {
|
this.MG.identity.getImgCode().then((res) => {
|
this.imgCode = "data:image/png;base64," + res;
|
});
|
},
|
// 手机号 - 验证码登录
|
loginFun() {
|
this.$refs.login
|
.validate(["mobilePhone", "imgCode", "verificationCode"])
|
.then((res) => {
|
this.loginLoading = true;
|
this.MG.identity
|
.loginByMobilePhone({
|
phoneNumber: this.loginForm.mobilePhone,
|
phoneCaptcha: this.loginForm.verificationCode,
|
appRefCode: this.config.appRefCode,
|
platform: "PCWeb"
|
})
|
.then((res) => {
|
this.loginLoading = false;
|
if (res && res.status == "Ok") {
|
Toast.success("登录成功");
|
let token = res.token;
|
this.tool.setCookie(this.config.tokenKey, token);
|
sessionStorage.token = token;
|
// 静默绑定微信
|
// this.$router.push("/bindWeChatAuto");
|
} else {
|
let errorTipsTxt = res.data.errorDescription || "手机号或验证码错误！";
|
Toast.fail(errorTipsTxt);
|
}
|
});
|
})
|
.catch((res) => {});
|
},
|
// 手机号 - 密码登录
|
phonePwdLogin() {
|
this.$refs.passwordLogin
|
.validate(["mobilePhone", "passwordLogin"])
|
.then((res) => {
|
this.loginLoading = true;
|
this.MG.identity
|
.loginByPassword({
|
loginName: this.loginForm.mobilePhone,
|
password: this.loginForm.password,
|
appRefCode: this.config.appRefCode,
|
platform: "PCWeb"
|
})
|
.then((res) => {
|
this.loginLoading = false;
|
if (res && res.status == "Ok") {
|
Toast.success("登录成功");
|
let token = res.token;
|
this.tool.setCookie(this.config.tokenKey, token);
|
sessionStorage.token = token;
|
// 静默绑定微信
|
// this.bindingWeChat();
|
} else {
|
let errorTipsTxt = res.message || "手机号或验证码错误！";
|
Toast.fail(errorTipsTxt);
|
}
|
});
|
})
|
.catch((res) => {
|
console.log(res);
|
});
|
},
|
// 获取验证码
|
getVerifyCode() {
|
this.$refs.login
|
.validate(["mobilePhone", "imgCode"])
|
.then((res) => {
|
this.MG.identity
|
.getPhoneCode({
|
phoneNumber: this.loginForm.mobilePhone,
|
imageCaptcha: this.loginForm.imgCode,
|
appRefCode: this.config.appRefCode
|
})
|
.then((res) => {
|
if (res == "验证码发送成功") {
|
this.getSecond(60);
|
Toast.success(res);
|
} else {
|
Toast.fail(res);
|
this.getImgCapcha();
|
}
|
});
|
})
|
.catch((res) => {
|
console.log(res);
|
});
|
},
|
//验证码倒计时
|
getSecond(time) {
|
if (!this.timer) {
|
this.countDown = time;
|
this.timer = setInterval(() => {
|
this.countDown--;
|
if (this.countDown == 0) {
|
clearInterval(this.timer);
|
this.timer = null;
|
}
|
}, 1000);
|
}
|
},
|
// 静默绑定微信
|
bindingWeChat() {
|
// 重新获取code，类型为微信登录
|
this.WeChat.getCode("bindingWeChat");
|
},
|
// 切换输入框 并重置 输入信息
|
resetInput() {
|
if (this.loginFormType == "password") {
|
this.loginFormType = "code";
|
this.$refs.login.resetValidation([
|
"mobilePhone",
|
"imgCode",
|
"verificationCode"
|
]);
|
} else {
|
this.loginFormType = "password";
|
this.$refs.passwordLogin.resetValidation([
|
"mobilePhone",
|
"passwordLogin"
|
]);
|
}
|
for (const key in this.loginForm) {
|
this.loginForm[key] = "";
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.warpIndex {
|
// width: calc(100% - 40px);
|
// height: calc(100vh - 40px);
|
// overflow: auto;
|
padding: 20px;
|
background-color: #fff;
|
font-size: 12px;
|
box-sizing: border-box;
|
.backgroundImg {
|
margin-top: 50px;
|
font-size: 36px;
|
text-align: center;
|
font-weight: 700;
|
color: #000;
|
}
|
.loginContentBox {
|
position: relative;
|
.welcome {
|
font-size: 40px;
|
}
|
.loginContent {
|
margin-top: 200px;
|
.errorTips {
|
position: absolute;
|
top: 8px;
|
left: 10px;
|
font-size: 12px;
|
color: #e50021;
|
.findPassword {
|
cursor: pointer;
|
color: #2b68cd;
|
font-size: 12px;
|
}
|
}
|
.codeLoginItemBox {
|
margin-bottom: 15px;
|
.imgCode {
|
width: 130px;
|
height: 45px;
|
img {
|
width: 100%;
|
height: 100%;
|
background: #efefef;
|
}
|
}
|
// 垂直居中
|
.centerVertically {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
/deep/ .van-field__error-message {
|
font-size: 24px;
|
}
|
/deep/ .van-cell--borderless::after,
|
.van-cell:last-child::after {
|
display: block;
|
}
|
}
|
.loginItemBox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-radius: 4px;
|
margin-bottom: 15px;
|
box-sizing: border-box;
|
span {
|
display: inline-block;
|
width: 100px;
|
text-align: center;
|
}
|
/deep/ .van-field__error-message {
|
font-size: 24px;
|
}
|
/deep/ .van-cell--borderless::after,
|
.van-cell:last-child::after {
|
display: block;
|
}
|
}
|
.changFormBtn {
|
margin-top: 30px;
|
margin-bottom: 15px;
|
overflow: hidden;
|
text-align: right;
|
span {
|
cursor: pointer;
|
}
|
}
|
.loginBtnBox {
|
width: 80%;
|
margin-bottom: 15px;
|
margin: 0 auto;
|
margin-top: 100px;
|
.loginBtn {
|
border-radius: 10px;
|
width: 100%;
|
height: 50px;
|
}
|
}
|
.registerBox {
|
margin-top: 20px;
|
font-size: 14px;
|
text-align: center;
|
color: #666666;
|
span {
|
cursor: pointer;
|
}
|
.division {
|
margin: 0 20px;
|
cursor: initial;
|
color: #d0d0d0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
