<!--
|
* @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");
|
console.log(this.urlCode);
|
this.init();
|
},
|
methods: {
|
...mapActions(['loginByOpenId']),
|
/**
|
* @description:初始化授权
|
* @returns void
|
* **/
|
init() {
|
this.openId = localStorage.sib_wx_openId;
|
console.log(this.openId)
|
this.showContent = false;
|
// 模拟数据本地调试
|
// this.openId = "oJbj21YwUatdNaYf3iEPwwGtWuUg";
|
//this.urlCode = "021qXn000q9GCK1xU7300xMP1p0qXn0A";
|
if (
|
(!this.openId && !this.urlCode) ||
|
(typeof this.openId == "undefined" && !this.urlCode)
|
) {
|
console.log(111);
|
let url = location.host;
|
// url = "t.finlean.com";
|
var str = encodeURIComponent(`https://${url}/sib_wx_scorec/#/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>
|
