<!--
|
* @Author: 小明丶
|
* @Date: 2020-11-09 09:43:37
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2021-01-07 10:34:23
|
* @Description: 微信扫码登录页面
|
-->
|
<template>
|
<div class="login-by-wx">
|
<div class="height-44" v-if="showContent">登录</div>
|
<div class="info-box" v-if="showContent">
|
<van-field v-model="phoneNum" type="tel" clearable maxlength="11" left-icon="phone-o left-icon" placeholder="请输入手机号码" />
|
<van-field v-model="code" type="number" clearable maxlength="4" left-icon="envelop-o left-icon" input-align="left" placeholder="请输入短信验证码">
|
<template #button>
|
<van-button color="#896EDB" style="width:60px" size="mini" @click="getCode" :disabled="isDisabled" plain type="info">{{ btnText }}</van-button>
|
</template>
|
</van-field>
|
<van-button round type="info" color="#896EDB" style="width: 100%; margin-top: 150px" @click="loginhanld">登录</van-button>
|
</div>
|
<div v-if="!showContent"></div>
|
</div>
|
</template>
|
<script>
|
import LoginBox from "../../components/common/h-login-box.vue";
|
import { GoWeChat } from "../../utils/wechat";
|
import { mapActions } from "vuex";
|
import Vue from "vue";
|
import { Toast } from "vant";
|
|
Vue.use(Toast);
|
export default {
|
components: {
|
LoginBox,
|
},
|
data() {
|
return {
|
btnText: "获取验证码",
|
phoneNum: "", //电话
|
code: "", //验证码
|
openId: "", //微信openID
|
showContent: false, //显示内容或者输入框
|
urlCode: "", //授权后回调链接上截取的code值
|
timer: "", //定时器
|
isDisabled: false,
|
};
|
},
|
created() {
|
if (!sessionStorage.sib_wx_merId || typeof sessionStorage.sib_wx_merId == "undefined") {
|
sessionStorage.sib_wx_merId = location.href.split("?")[1].split("=")[1];
|
}
|
clearTimeout(this.timer);
|
this.urlCode = this.getUrlCode("code");
|
this.init();
|
},
|
methods: {
|
...mapActions(["loginByOpenId"]),
|
/**
|
* @description:初始化授权
|
* @returns void
|
* **/
|
init() {
|
this.openId = localStorage.sib_wx_openId;
|
this.showContent = false;
|
// 模拟数据本地调试
|
// this.openId = "oJbj21YwUatdNaYf3iEPwwGtWuUg";
|
//this.urlCode = "021qXn000q9GCK1xU7300xMP1p0qXn0A";
|
if ((!this.openId && !this.urlCode) || (typeof this.openId == "undefined" && !this.urlCode)) {
|
let url = location.host;
|
// url = "t.finlean.com";
|
var str = encodeURIComponent(`https://${url}/sib_wx_scores/#/loginByWx`);
|
var fn = new GoWeChat("wx594ab33e0466eccf", str);
|
fn.gocontract();
|
} else {
|
if (!this.openId && this.urlCode) {
|
this.$api
|
.getWeChatUserInfo({
|
code: this.urlCode,
|
})
|
.then((res) => {
|
this.openId = res.body;
|
|
this.showContent = true;
|
});
|
} else if (this.openId && !this.urlCode) {
|
this.$api
|
.checkOpenIdIsBind({
|
wechatOpenId: this.openId,
|
merId: sessionStorage.sib_wx_merId,
|
})
|
.then((res) => {
|
this.showContent = true;
|
if (res.body.isBind === 1) {
|
localStorage.sib_wx_mblNo = res.body.mblNo;
|
localStorage.sib_wx_userId = res.body.userId;
|
this.loginByOpenId({
|
vm: this,
|
loginType: 2,
|
verCode: this.code,
|
mblNo: res.body.mblNo,
|
merId: sessionStorage.sib_wx_merId,
|
wechatOpenId: this.openId,
|
userId: res.body.userId,
|
});
|
// this.$router.push('/mine/toggle-identity?title=选择门店')
|
}
|
});
|
}
|
}
|
},
|
/**
|
* @description:截取code值
|
* @returns void
|
* **/
|
getUrlCode(name) {
|
return decodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href) || [, ""])[1].replace(/\+/g, "%20")) || null;
|
},
|
/**
|
* @description:倒计时
|
* @param {number} 秒数
|
* @return void
|
* **/
|
timeOut(time) {
|
time = time - 1;
|
if (time === 0) {
|
clearTimeout(this.timer);
|
this.btnText = "重新获取";
|
this.isDisabled = false;
|
} else {
|
this.isDisabled = true;
|
this.timer = setTimeout(() => {
|
this.btnText = `${time}S`;
|
this.timeOut(time);
|
}, 1000);
|
}
|
},
|
loginhanld() {
|
let v = this.$tool;
|
if (v.checkValEmpty(this.phoneNum)) {
|
Toast.fail("请输入手机号");
|
return;
|
}
|
if (!v.checkPhone(this.phoneNum)) {
|
Toast.fail("请输入姓名");
|
return;
|
}
|
if (v.checkValEmpty(this.code)) {
|
Toast.fail("请输入验证码");
|
return;
|
}
|
this.loginByOpenId({
|
vm: this,
|
loginType: 1,
|
verCode: this.code,
|
mblNo: this.phoneNum,
|
merId: sessionStorage.sib_wx_merId,
|
wechatOpenId: this.openId,
|
});
|
|
// this.$api.loginByOpenId({
|
// loginType:1,
|
// verCode:this.code,
|
// mblNo:this.phoneNum,
|
// merId:sessionStorage.sib_wx_merId,
|
// wechatOpenId:this.openId
|
// }).then(res=>{
|
// localStorage.sib_wx_mblNo = res.body.mblNo
|
// localStorage.sib_wx_userId = res.body.userId
|
// commit(SET_SESSION_ID, 'beef1616-fc2a-43a3-8c27-deb7837bde06');
|
// this.$router.push('/mine/toggle-identity?title=选择门店')
|
// })
|
},
|
getCode() {
|
this.$api
|
.userSendMsg({
|
verCodeType: 2,
|
mblNo: this.phoneNum,
|
})
|
.then((res) => {
|
this.timeOut(60);
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.login-by-wx {
|
& {
|
background-color: #fff;
|
min-height: 100vh;
|
}
|
.height-44 {
|
.lh(44px);
|
.flex(center, center);
|
font-size: @font-20;
|
color: @c-333;
|
}
|
.info-box {
|
& {
|
width: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%) translateY(-50%);
|
padding: 0 24px;
|
box-sizing: border-box;
|
}
|
.btn {
|
width: 100px;
|
border: 0;
|
outline: none;
|
background: #fff;
|
position: relative;
|
}
|
.btn::before {
|
content: "";
|
position: absolute;
|
height: 15px;
|
border: solid 1px #ebedf0;
|
left: 0px;
|
}
|
}
|
}
|
</style>
|
