<template>
|
<view class="wrap">
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="短信登录" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view v-if="!showCodeBox">
|
<view class="top"></view>
|
<view class="content">
|
<view class="title">欢迎登录{{appTitle}}</view>
|
<u--input placeholder="请输入手机号"
|
border="surround"
|
v-model="mobile"
|
type="number"
|
@change="change"></u--input>
|
<view class="tips coreshop-margin-10">未注册的手机号验证后自动创建平台账号</view>
|
</view>
|
<view class="buttom">
|
<view class="loginType">
|
<button @tap="submit" :style="[inputStyle]" class="getCaptcha">获取短信验证码</button>
|
</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>
|
<view class="wrapkey" v-if="showCodeBox">
|
<view class="key-input">
|
<view class="title">输入验证码</view>
|
<view class="tips">验证码已发送至 +{{mobile}}</view>
|
<u-code-input :focus="true" v-model="value" @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>
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
return {
|
agreement: false,
|
maxMobile: 11,
|
mobile: '', // 用户手机号
|
code: '', // 短信验证码
|
sessionAuthId: '', //授权id
|
verification: true, // 通过v-show控制显示获取还是倒计时
|
timer: 60, // 定义初始时间为60s
|
btnb: 'coreshop-btn coreshop-btn-square coreshop-btn-c coreshop-btn-all', //按钮背景
|
type: '', // 有值是第三方登录账号绑定
|
showCodeBox: false,
|
maxlength: 6,
|
value: '',
|
error: false,
|
errorMsg: '验证码错误，请重新输入',
|
};
|
},
|
onLoad(option) {
|
if (option.sessionAuthId) {
|
this.sessionAuthId = option.sessionAuthId;
|
}
|
console.log('onLoad', this.sessionAuthId);
|
},
|
computed: {
|
logoImage() {
|
return this.$store.state.config.shopLogo
|
},
|
appTitle() {
|
return this.$store.state.config.shopName;
|
},
|
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;
|
},
|
},
|
onShow() {
|
let _this = this;
|
let userToken = _this.$db.get('userToken');
|
if (userToken) {
|
this.$u.route({
|
type: 'switchTab',
|
url: '/pages/index/member/member'
|
});
|
return true;
|
}
|
_this.timer = parseInt(_this.$db.get('timer'));
|
if (_this.timer != null && _this.timer > 0) {
|
_this.countDown();
|
_this.verification = false;
|
}
|
},
|
methods: {
|
checkboxChange(e) {
|
this.agreement = e;
|
console.log(this.agreement);
|
},
|
change(e) {
|
console.log('change', e);
|
},
|
submit() {
|
if (!this.$u.test.mobile(this.mobile)) {
|
this.$u.toast('请输入合法的手机号码!');
|
return;
|
}
|
if (this.agreement == false) {
|
this.$u.toast('请先勾选同意《服务协议》与《隐私协议》!');
|
return;
|
}
|
this.sendCode();
|
},
|
// 收不到验证码选择时的选择
|
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;
|
// #ifdef APP-PLUS|APP-PLUS-NVUE
|
if (this.sessionAuthId) {
|
this.toBind();
|
} else {
|
this.login();
|
}
|
// #endif
|
// #ifdef MP
|
this.showTopTips();
|
// #endif
|
console.log('finish', value);
|
console.log('sessionAuthId', this.sessionAuthId);
|
},
|
// 发送短信验证码
|
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,
|
platform: 1
|
};
|
|
let invicode = _this.$db.get('invitecode');
|
if (invicode) {
|
data.invitecode = invicode;
|
}
|
_this.$u.api.smsLogin(data).then(res => {
|
console.log(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.toLoginSuccessHandleBack();
|
}
|
})
|
},
|
// 跳转到普通登录
|
toLogin() {
|
uni.navigateTo({
|
url: '../../login/login/loginByAccount'
|
});
|
},
|
//提交按钮
|
showTopTips: function () {
|
let _this = this;
|
if (_this.mobile == '') {
|
_this.$u.toast('请输入手机号码');
|
return false;
|
}
|
if (this.code == '') {
|
_this.$u.toast('请输入验证码');
|
return false;
|
}
|
//if (_this.sessionAuthId == 0) {
|
// this.$refs.uToast.show({
|
// message: '登录失败，请稍后再试', type: 'error', complete: function () {
|
// uni.navigateBack({
|
// delta: 1
|
// });
|
// }
|
// });
|
// return false;
|
//}
|
var platform = 2;
|
//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
|
// #ifdef MP-ALIPAY
|
platform = 3;
|
// #endif
|
// #ifdef APP-PLUS || APP-PLUS-NVUE
|
platform = 4;
|
// #endif
|
var data = {
|
mobile: _this.mobile,
|
code: _this.code,
|
platform: platform, //平台id，标识是小程序登陆的
|
sessionAuthId: _this.sessionAuthId //微信小程序接口存不了session，所以要绑定的id只能传到前台
|
};
|
//有推荐码的话，带上
|
var invitecode = _this.$db.get('invitecode');
|
if (invitecode) {
|
data.invitecode = invitecode;
|
}
|
_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;
|
}
|
});
|
},
|
// 公众号第三方登录账号绑定
|
toBind() {
|
if (this.mobile == '') {
|
this.$u.toast('请输入手机号码');
|
return false;
|
}
|
if (this.code == '') {
|
this.$u.toast('请输入验证码');
|
return false;
|
}
|
|
let data = {
|
mobile: this.mobile,
|
code: this.code,
|
sessionAuthId: this.sessionAuthId
|
};
|
|
// 获取邀请码
|
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);
|
this.redirectHandler(res.msg);
|
} else {
|
this.$u.toast(res.msg);
|
this.error = true;
|
this.errorMsg = res.msg;
|
}
|
});
|
},
|
// 切换登录方式
|
selectLoginType() {
|
this.$u.route({ type: 'redirectTo', url: '/pages/login/loginByAccount/loginByAccount' });
|
},
|
goForgetpwd() {
|
this.$u.route('/pages/login/forget/forget');
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page { background: #fff; }
|
</style>
|
|
<style lang="scss" scoped>
|
@import 'loginBySMS.scss';
|
</style>
|
