<template>
|
<view>
|
<u-toast ref="uToast" />
|
<!-- #ifndef MP-WEIXIN -->
|
<u-popup class="coreshop-bottom-popup-box" :show="showLogin && sessionAuthIdTool" @close="hideModal" mode="bottom" :closeable="true">
|
<view class="radius coreshop-bg-white wrap">
|
<view v-if="!showCodeBox">
|
<view class="wrap-content">
|
<view class="coreshop-font-25 coreshop-font-weight-bold coreshop-margin-bottom-50">欢迎登录{{shopName}}</view>
|
<input class="coreshop-solid coreshop-margin-bottom-10 coreshop-padding-bottom-5" type="number" v-model="mobile" placeholder="请输入手机号" />
|
<view class="coreshop-margin-bottom-30 coreshop-margin-top-5 ">未注册的手机号验证后自动创建平台账号</view>
|
<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
|
<view class="coreshop-flex coreshop-justify-between coreshop-margin-top-25">
|
<view class="password">一键登录</view>
|
<view class="issue">遇到问题</view>
|
</view>
|
</view>
|
<view class=" coreshop-padding-bottom-30 coreshop-padding-top-30">
|
<view class="hint">
|
登录即代表你同意
|
<text @click="goUserAgreementPage()">用户协议</text>
|
和
|
<text @click="goUserPrivacyPolicy()">隐私政策</text>，
|
并授权使用您的{{shopName}}账号信息（如昵称、头像、收货地址）以便您统一管理
|
</view>
|
</view>
|
</view>
|
<view class="wrapkey" v-if="showCodeBox">
|
<view class="key-input">
|
<view class="coreshop-font-25 coreshop-font-weight-bold coreshop-margin-bottom-50">输入验证码</view>
|
<view class="coreshop-margin-bottom-30 coreshop-margin-top-5">验证码已发送至 +{{mobile}}</view>
|
<u-code-input :focus="true" v-model="codevalue" @change="change" @finish="finish" mode="box" :maxlength="maxlength"></u-code-input>
|
<text :class="{ error: error }">{{errorMsg}}</text>
|
<view class="captcha">
|
<text :class="{ noCaptcha: verification }" @tap="noCaptcha">收不到验证码点这里</text>
|
<text :class="{ regain: !verification }">{{ timer }}秒后重新获取验证码</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- #endif -->
|
<!-- #ifdef MP-WEIXIN -->
|
<u-popup class="coreshop-bottom-popup-box" :show="showLogin && sessionAuthIdTool" @close="hideModal" mode="center">
|
<view class="radius coreshop-bg-white">
|
<view class="modal-box">
|
<view class="modal-box-detail-detail">
|
<view class="shopDesc">
|
<view class="coreshop-avatar sm round margin-left">
|
<u--image width="24px" height="24px" :src="shopLogo"></u--image>
|
</view>
|
<text class="shopName">
|
{{shopName||'登录授权'}}
|
</text>
|
<text class="get">
|
申请
|
</text>
|
</view>
|
<view class="modal-box-detail-title3">获取以下权限为您提供服务</view>
|
<view class="modal-box-detail-desc">
|
1、获取你的手机号提供更好的账户安全，物流，订单状态提醒等服务（在接下来微信授权手机号的弹窗中选择“允许”）<br />
|
2、使用我们的相关服务，需要将您的手机号授权给我们。
|
</view>
|
<!--服务协议-->
|
<view class="coreshop-margin-top-15 coreshop-margin-bottom-30 agreement-checked-view">
|
<u-checkbox-group>
|
<u-checkbox v-model="agreement" :checked="agreement" @change="checkboxChange" size="20" active-color="#19be6b"></u-checkbox>
|
</u-checkbox-group>
|
|
|
<view class="coreshop-text-black-view">
|
<text class="coreshop-text-black">同意</text>
|
<text class="text-blue" @tap="goUserAgreementPage">《服务协议》</text>
|
<text class="coreshop-text-black">与</text>
|
<text class="text-blue" @tap="goUserPrivacyPolicy">《隐私协议》</text>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-justify-between coreshop-padding-left-15 coreshop-padding-right-15">
|
<view class="coreshop-padding-5">
|
<u-button @click="closeAuth">暂不授权</u-button>
|
</view>
|
<view class="coreshop-padding-5">
|
<u-button type="success" :disabled="isDisabled" v-if="isDisabled">确定授权</u-button>
|
<u-button type="success" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else>确定授权</u-button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
/**
|
* 登录提示页
|
* @property {Boolean} value=showLoginTip - 由v-model控制显示隐藏。
|
* @property {Boolean} forceOauth - 小程序端特制的全屏登录提示。
|
*/
|
import { mapState } from 'vuex';
|
export default {
|
name: 'coreshopLoginModal',
|
components: {},
|
data() {
|
return {
|
agreement: false,
|
isDisabled: true,
|
maxMobile: 11,
|
mobile: '', // 用户手机号
|
code: '', // 短信验证码
|
verification: true, // 通过v-show控制显示获取还是倒计时
|
timer: 60, // 定义初始时间为60s
|
btnb: 'coreshop-btn coreshop-btn-square coreshop-btn-c coreshop-btn-all', //按钮背景
|
type: '', // 有值是第三方登录账号绑定
|
showCodeBox: false,
|
maxlength: 6,
|
codevalue: '',
|
error: false,
|
errorMsg: '验证码错误，请重新输入',
|
};
|
},
|
props: {
|
value: {},
|
modalType: {
|
type: String,
|
default: ''
|
}
|
},
|
computed: {
|
...mapState({
|
showLoginTip: state => state.showLoginTip,
|
sessionAuthId: state => state.sessionAuthId,
|
hasLogin: state => state.hasLogin,
|
}),
|
shopLogo() {
|
return this.$store.state.config.shopLogo
|
},
|
shopName() {
|
return this.$store.state.config.shopName;
|
},
|
showLogin: {
|
get() {
|
return this.showLoginTip;
|
},
|
set(val) {
|
this.$store.commit('showLoginTip', val);
|
}
|
},
|
sessionAuthIdTool: {
|
get() {
|
return this.sessionAuthId;
|
},
|
set(val) {
|
this.$store.commit('sessionAuthId', val);
|
}
|
},
|
inputStyle() {
|
let style = {};
|
if (this.mobile) {
|
style.color = "#fff";
|
style.backgroundColor = this.$u.color['warning'];
|
}
|
return style;
|
},
|
// 验证手机号
|
rightMobile() {
|
let res = {};
|
if (!this.mobile) {
|
res.status = false;
|
res.msg = '请输入手机号';
|
} else if (!this.$u.test.mobile(this.mobile)) {
|
res.status = false;
|
res.msg = '手机号格式不正确';
|
} else {
|
res.status = true;
|
}
|
return res;
|
},
|
// 动态计算发送验证码按钮样式
|
sendCodeBtn() {
|
let btn = 'coreshop-btn coreshop-btn-g';
|
if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
|
return btn + ' coreshop-btn-b';
|
} else {
|
return btn;
|
}
|
},
|
// 动态更改登录按钮bg
|
regButtonClass() {
|
return this.mobile && this.mobile.length === this.maxMobile && this.code ? this.btnb + ' coreshop-btn-b' : this.btnb;
|
}
|
},
|
mounted() {
|
const _this = this
|
// #ifdef MP-WEIXIN
|
var userInfo = this.$store.state.userInfo;
|
//var token = this.$db.get('userToken');
|
if (Object.keys(userInfo).length != 0) {
|
//console.log("获取到store.state用户数据");
|
} else {
|
_this.$store.commit('userInfo', "");
|
_this.doToken();
|
}
|
// #endif
|
},
|
//watch: {
|
// 'hasLogin': {
|
// handler(newVal) {
|
// //console.log(newVal);
|
// if (newVal == false) {
|
// //console.log("watch监听");
|
// this.doToken();
|
// }
|
// },
|
// deep: true,
|
// immediate: true,
|
// }
|
//},
|
onShow() {
|
let _this = this;
|
_this.timer = parseInt(_this.$db.get('timer'));
|
if (_this.timer != null && _this.timer > 0) {
|
_this.countDown();
|
_this.verification = false;
|
}
|
},
|
methods: {
|
submit() {
|
if (this.$u.test.mobile(this.mobile)) {
|
this.sendCode();
|
} else {
|
this.$u.toast('请输入合法的手机号码!');
|
}
|
},
|
// 收不到验证码选择时的选择
|
noCaptcha() {
|
var _this = this;
|
uni.showActionSheet({
|
itemList: ['重新获取验证码'],
|
success: function (res) {
|
_this.sendCode();
|
},
|
fail: function (res) {
|
this.$u.toast('重发失败!');
|
}
|
});
|
},
|
// change事件侦听
|
change(value) {
|
console.log('change', value);
|
},
|
// 输入完验证码最后一位执行
|
finish(value) {
|
this.code = value;
|
if (this.sessionAuthIdTool) {
|
this.toBind();
|
} else {
|
this.login();
|
}
|
},
|
// 发送短信验证码
|
sendCode() {
|
if (!this.rightMobile.status) {
|
this.$u.toast(this.rightMobile.msg);
|
} else {
|
uni.showToast({ title: '发送中...', icon: 'loading' })
|
setTimeout(() => {
|
uni.hideToast();
|
this.$u.api.sms({ mobile: this.mobile, code: 'login' }).then(res => {
|
if (res.status) {
|
this.showCodeBox = true;
|
this.timer = 60;
|
this.verification = false;
|
this.$refs.uToast.show({ message: res.msg, type: 'success' });
|
this.countDown(); // 执行验证码计时
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
}, 1000);
|
}
|
},
|
// 验证码倒计时
|
countDown() {
|
let auth_timer = setInterval(() => {
|
// 定时器设置每秒递减
|
this.timer--; // 递减时间
|
uni.setStorage({
|
key: 'timer',
|
data: this.timer,
|
success: function () { }
|
});
|
if (this.timer <= 0) {
|
this.verification = true; // 60s时间结束还原v-show状态并清除定时器
|
clearInterval(auth_timer);
|
}
|
}, 1000);
|
},
|
// 登录
|
login() {
|
var _this = this;
|
if (!_this.rightMobile.status) {
|
_this.$u.toast(_this.rightMobile.msg);
|
} else {
|
// 短信验证码登录
|
if (!_this.code) {
|
_this.$u.toast('请输入短信验证码!');
|
} else {
|
let data = {
|
mobile: _this.mobile,
|
code: _this.code
|
};
|
|
let invicode = _this.$db.get('invitecode');
|
if (invicode) {
|
data.invitecode = invicode;
|
}
|
|
_this.$u.api.smsLogin(data).then(res => {
|
if (res.status) {
|
_this.$db.set('userToken', res.data.token);
|
_this.redirectHandler(res.msg);
|
} else {
|
_this.$u.toast(res.msg);
|
_this.error = true;
|
_this.errorMsg = res.msg;
|
}
|
});
|
}
|
}
|
},
|
// 重定向跳转 或者返回上一个页面
|
redirectHandler(msg) {
|
let _this = this;
|
this.$refs.uToast.show({
|
message: msg, type: 'success', complete: function () {
|
_this.$db.set('timer', 0);
|
_this.$db.del('invitecode');
|
_this.showLogin = false;
|
_this.toLoginSuccessHandleBack();
|
}
|
})
|
},
|
|
doToken() {
|
const _this = this
|
//console.log("重新获取用户数据");
|
_this.getCode(function (code) {
|
var data = {
|
code: code
|
}
|
_this.$u.api.onLogin(data).then(res => {
|
if (res.status) {
|
if (res.data.auth) {
|
_this.$db.set('userToken', res.data.auth.token)
|
_this.$store.commit('hasLogin', true);
|
}
|
if (res.data.user) {
|
_this.$store.commit('userInfo', res.data.user);
|
}
|
_this.sessionAuthIdTool = res.otherData;
|
//console.log("成功后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
} else {
|
_this.$u.toast(res.msg);
|
_this.$store.commit('userInfo', "");
|
_this.sessionAuthIdTool = res.otherData;
|
//console.log("失败后获取sessionAuthIdTool：" + _this.sessionAuthIdTool);
|
}
|
})
|
})
|
},
|
// 勾选版权协议
|
checkboxChange(e) {
|
this.agreement = e;
|
if (e == true) {
|
this.isDisabled = false;
|
} else {
|
this.isDisabled = true;
|
}
|
console.log(this.agreement);
|
},
|
// 隐藏登录弹窗
|
hideModal() {
|
this.showLogin = false;
|
},
|
// 去登录
|
toAccountLogin() {
|
this.showLogin = false;
|
this.$u.route('/pages/login/loginByAccount/loginByAccount');
|
},
|
// 小程序，取消登录
|
closeAuth() {
|
this.showLogin = false;
|
this.$u.toast('您已取消授权')
|
},
|
getCode: function (callback) {
|
let _this = this
|
uni.login({
|
// #ifdef MP-ALIPAY
|
scopes: 'auth_user',
|
// #endif
|
success: function (res) {
|
//console.log(res);
|
if (res.code) {
|
return callback(res.code)
|
} else {
|
//login成功，但是没有取到code
|
_this.$refs.uToast.show({ message: '未取得code，请重试', type: 'error', })
|
}
|
},
|
fail: function (res) {
|
//console.log(res);
|
var scene = this.$store.state.scene;
|
//判断是否为 朋友圈内打开“单页模式"，单页模式下，数据交互无法执行。所以不进行提醒
|
if (scene != 1154) {
|
_this.$refs.uToast.show({ message: '用户授权失败wx.login，请重试', type: 'error', })
|
}
|
}
|
})
|
},
|
toLogin: function (data) {
|
let _this = this
|
_this.$u.api.loginByDecodeEncryptedData(data).then(res => {
|
if (res.status) {
|
//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
|
if (res.data.token) {
|
//登陆成功，设置token，并返回上一页
|
_this.$db.set('userToken', res.data.token)
|
_this.$store.commit('hasLogin', true);
|
_this.$refs.uToast.show({ message: '登录成功', type: 'success', })
|
return false
|
} else {
|
// #ifdef MP-WEIXIN
|
_this.sessionAuthIdTool = res.data.sessionAuthId;
|
// #endif
|
// #ifndef MP-WEIXIN
|
_this.$u.route({ type: 'navigateTo', url: '/pages/login/loginBySMS/loginBySMS?sessionAuthId=' + res.data.sessionAuthId });
|
// #endif
|
}
|
} else {
|
_this.$refs.uToast.show({ message: '登录失败，请重试', type: 'error', })
|
}
|
})
|
},
|
async getPhoneNumber(e) {
|
if (this.agreement == false) {
|
this.$refs.uToast.show({ message: '请先勾选并同意服务', type: 'error', })
|
return false;
|
} else {
|
let _this = this;
|
if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
|
var data = {
|
sessionAuthId: _this.sessionAuthIdTool,
|
iv: e.mp.detail.iv,
|
encryptedData: e.mp.detail.encryptedData,
|
}
|
//有推荐码的话，带上
|
var invitecode = _this.$db.get('invitecode')
|
if (invitecode) {
|
data.invitecode = invitecode
|
}
|
_this.toGetPhoneNumber(data);
|
} else if (e.mp.detail.errMsg == 'getPhoneNumber:fail user deny') {
|
_this.$u.toast('您已经取消了授权，将无法进行关键业务功能。');
|
}
|
else {
|
_this.$u.toast('如未授权，您可尝试使用手机号+短信验证码登录');
|
}
|
_this.agreement = false;
|
_this.isDisabled = true;
|
_this.showLogin = false;
|
console.log(e.mp.detail.errMsg);
|
}
|
|
},
|
//实际的去登陆
|
toGetPhoneNumber: function (data) {
|
let _this = this
|
_this.$u.api.loginByGetPhoneNumber(data).then(res => {
|
//console.log(res);
|
if (res.status) {
|
//判断是否返回了token，如果没有，就说明没有绑定账号，跳转到绑定页面
|
if (res.data.token) {
|
//console.log("登陆成功，设置token，并返回上一页");
|
//登陆成功，设置token，并返回上一页
|
_this.$db.set('userToken', res.data.token)
|
_this.$store.commit('hasLogin', true);
|
_this.showLogin = false;
|
_this.$refs.uToast.show({ message: '登录成功', type: 'success', })
|
return false
|
}
|
} else if (res.status == false && res.code == 500) {
|
//console.log("sessionId不正确，重载");
|
_this.$u.route({ type: 'switchTab', url: '/pages/index/default/default' });
|
} else {
|
_this.$u.toast('登录失败，请重试')
|
}
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "coreshop-login-modal.scss";
|
</style>
|
