You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
11 KiB
498 lines
11 KiB
<template>
|
|
<view>
|
|
<view @touchmove.prevent.stop>
|
|
<uni-popup ref="bindMobile" :custom="true" :mask-click="true">
|
|
<view class="bind-wrap">
|
|
<!-- #ifdef H5 -->
|
|
<view class="head">检测到您还未绑定手机号码</view>
|
|
<view class="form-wrap">
|
|
<view class="label">手机号码</view>
|
|
<view class="form-item">
|
|
<view class="input-wrap">
|
|
<input
|
|
type="number"
|
|
placeholder="请输入您的手机号码"
|
|
placeholder-class="placeholder"
|
|
v-model="formData.mobile"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<block v-if="captchaConfig">
|
|
<view class="label">验证码</view>
|
|
<view class="form-item">
|
|
<view class="input-wrap">
|
|
<input
|
|
type="number"
|
|
placeholder="请输入验证码"
|
|
placeholder-class="placeholder"
|
|
v-model="formData.vercode"
|
|
/>
|
|
</view>
|
|
<image
|
|
:src="captcha.img"
|
|
class="captcha"
|
|
@click="getCaptcha"
|
|
></image>
|
|
</view>
|
|
</block>
|
|
<view class="label">动态码</view>
|
|
<view class="form-item">
|
|
<view class="input-wrap">
|
|
<input
|
|
type="number"
|
|
placeholder="请输入动态码"
|
|
placeholder-class="placeholder"
|
|
v-model="formData.dynacode"
|
|
/>
|
|
</view>
|
|
<view class="send color-base-text" @click="sendMobileCode">
|
|
{{ dynacodeData.codeText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="confirm" @click="confirm">确定</view>
|
|
<view @click="cancel" class="cancel">取消</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
|
|
<view class="bind-tip-icon">
|
|
<image
|
|
:src="$util.img('public/uniapp/member/login.png')"
|
|
mode="widthFix"
|
|
></image>
|
|
</view>
|
|
<view class="bind-tips">为了方便您接收订单等信息，需要绑定您的手机号码</view>
|
|
<button
|
|
open-type="getPhoneNumber"
|
|
class="auth-login ns-btn-default-all color-base-bg"
|
|
@getphonenumber="mobileAuthLogin"
|
|
>
|
|
<text>点击绑定手机号码</text>
|
|
</button>
|
|
<!-- #endif -->
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<register-reward ref="registerReward"></register-reward>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniPopup from '../uni-popup/uni-popup.vue';
|
|
import validate from 'common/js/validate.js';
|
|
import registerReward from '../register-reward/register-reward.vue';
|
|
|
|
export default {
|
|
name: 'bind-mobile',
|
|
components: {
|
|
uniPopup,
|
|
registerReward
|
|
},
|
|
mixins: [validate],
|
|
data() {
|
|
return {
|
|
captchaConfig: 0,
|
|
captcha: {
|
|
id: '',
|
|
img: ''
|
|
},
|
|
dynacodeData: {
|
|
seconds: 120,
|
|
timer: null,
|
|
codeText: '获取动态码',
|
|
isSend: false
|
|
},
|
|
formData: {
|
|
key: '',
|
|
mobile: '',
|
|
vercode: '',
|
|
dynacode: ''
|
|
},
|
|
isSub: false
|
|
};
|
|
},
|
|
created() {
|
|
this.getCaptchaConfig();
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$refs.bindMobile.open();
|
|
},
|
|
cancel() {
|
|
this.$refs.bindMobile.close();
|
|
},
|
|
confirm() {
|
|
let authData = uni.getStorageSync('authInfo');
|
|
let data = {
|
|
mobile: this.formData.mobile,
|
|
key: this.formData.key,
|
|
code: this.formData.dynacode
|
|
};
|
|
if (this.captcha.id != '') {
|
|
data.captcha_id = this.captcha.id;
|
|
data.captcha_code = this.formData.vercode;
|
|
}
|
|
|
|
if (authData) Object.assign(data, authData);
|
|
if (authData.avatarUrl) data.headimg = authData.avatarUrl;
|
|
if (authData.nickName) data.nickname = authData.nickName;
|
|
|
|
if (uni.getStorageSync('source_member'))
|
|
data.source_member = uni.getStorageSync('source_member');
|
|
|
|
if (this.verify(data)) {
|
|
if (this.isSub) return;
|
|
this.isSub = true;
|
|
this.$api.sendRequest({
|
|
url: '/api/tripartite/mobile',
|
|
data,
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
uni.setStorage({
|
|
key: 'token',
|
|
data: res.data.token,
|
|
success: () => {
|
|
this.$store.commit('setToken', res.data.token);
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
});
|
|
this.$refs.bindMobile.close();
|
|
|
|
if (res.data.is_register && this.$refs.registerReward.getReward()) {
|
|
this.$refs.registerReward.open();
|
|
}
|
|
} else {
|
|
this.isSub = false;
|
|
this.getCaptcha();
|
|
this.$util.showToast({ title: res.message });
|
|
}
|
|
},
|
|
fail: res => {
|
|
this.isSub = false;
|
|
this.getCaptcha();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
/**
|
|
* 表单验证
|
|
* @param {Object} data
|
|
*/
|
|
verify(data) {
|
|
let rule = [
|
|
{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
|
|
{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
|
|
];
|
|
if (this.captchaConfig == 1) {
|
|
if (this.captcha.id != '')
|
|
rule.push({
|
|
name: 'captcha_code',
|
|
checkType: 'required',
|
|
errorMsg: this.$lang('captchaPlaceholder')
|
|
});
|
|
}
|
|
rule.push({
|
|
name: 'code',
|
|
checkType: 'required',
|
|
errorMsg: this.$lang('dynacodePlaceholder')
|
|
});
|
|
|
|
var checkRes = validate.check(data, rule);
|
|
if (checkRes) {
|
|
return true;
|
|
} else {
|
|
this.$util.showToast({ title: validate.error });
|
|
return false;
|
|
}
|
|
},
|
|
/**
|
|
* 获取验证码配置
|
|
*/
|
|
getCaptchaConfig() {
|
|
this.$api.sendRequest({
|
|
url: '/api/config/getCaptchaConfig',
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.captchaConfig = res.data.data.value.shop_reception_login;
|
|
if (this.captchaConfig) this.getCaptcha();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 获取验证码
|
|
*/
|
|
getCaptcha() {
|
|
this.$api.sendRequest({
|
|
url: '/api/captcha/captcha',
|
|
data: {
|
|
captcha_id: this.captcha.id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.captcha = res.data;
|
|
this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 发送手机动态码
|
|
*/
|
|
sendMobileCode() {
|
|
if (this.dynacodeData.seconds != 120 || this.dynacodeData.isSend) return;
|
|
var data = {
|
|
mobile: this.formData.mobile,
|
|
captcha_id: this.captcha.id,
|
|
captcha_code: this.formData.vercode
|
|
};
|
|
var rule = [
|
|
{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
|
|
{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }
|
|
];
|
|
if (this.captchaConfig == 1) {
|
|
rule.push({
|
|
name: 'captcha_code',
|
|
checkType: 'required',
|
|
errorMsg: '请输入验证码'
|
|
});
|
|
}
|
|
var checkRes = validate.check(data, rule);
|
|
if (!checkRes) {
|
|
this.$util.showToast({ title: validate.error });
|
|
return;
|
|
}
|
|
this.dynacodeData.isSend = true;
|
|
|
|
if (this.dynacodeData.seconds == 120) {
|
|
this.dynacodeData.timer = setInterval(() => {
|
|
this.dynacodeData.seconds--;
|
|
this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
|
|
}, 1000);
|
|
}
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/tripartite/mobileCode',
|
|
data: data,
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.formData.key = res.data.key;
|
|
} else {
|
|
this.$util.showToast({ title: res.message });
|
|
this.refreshDynacodeData();
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.$util.showToast({ title: 'request:fail' });
|
|
this.refreshDynacodeData();
|
|
}
|
|
});
|
|
},
|
|
mobileAuthLogin(e) {
|
|
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
|
let authData = uni.getStorageSync('authInfo');
|
|
var data = {
|
|
iv: e.detail.iv,
|
|
encryptedData: e.detail.encryptedData
|
|
};
|
|
if (authData) Object.assign(data, authData);
|
|
if (authData.avatarUrl) data.headimg = authData.avatarUrl;
|
|
if (authData.nickName) data.nickname = authData.nickName;
|
|
if (uni.getStorageSync('source_member'))
|
|
data.source_member = uni.getStorageSync('source_member');
|
|
|
|
if (this.isSub) return;
|
|
this.isSub = true;
|
|
|
|
this.$api.sendRequest({
|
|
url: '/api/tripartite/mobileauth',
|
|
data,
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
uni.setStorage({
|
|
key: 'token',
|
|
data: res.data.token,
|
|
success: () => {
|
|
this.$store.dispatch('getCartNumber');
|
|
this.$store.commit('setToken', res.data.token);
|
|
}
|
|
});
|
|
this.$refs.bindMobile.close();
|
|
if (res.data.is_register && this.$refs.registerReward.getReward()) {
|
|
this.$refs.registerReward.open();
|
|
}
|
|
} else {
|
|
this.isSub = false;
|
|
this.$util.showToast({ title: res.message });
|
|
}
|
|
},
|
|
fail: res => {
|
|
this.isSub = false;
|
|
this.$util.showToast({ title: 'request:fail' });
|
|
}
|
|
});
|
|
}
|
|
},
|
|
refreshDynacodeData() {
|
|
this.getCaptcha();
|
|
clearInterval(this.dynacodeData.timer);
|
|
this.dynacodeData = {
|
|
seconds: 120,
|
|
timer: null,
|
|
codeText: '获取动态码',
|
|
isSend: false
|
|
};
|
|
}
|
|
},
|
|
watch: {
|
|
'dynacodeData.seconds': {
|
|
handler(newValue, oldValue) {
|
|
if (newValue == 0) {
|
|
this.refreshDynacodeData();
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bind-wrap {
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
width: calc(100vw - 168rpx);
|
|
margin: 0 auto;
|
|
|
|
.head {
|
|
text-align: center;
|
|
height: 118rpx;
|
|
line-height: 118rpx;
|
|
background-color: #f6f6f6;
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-wrap {
|
|
padding: 30rpx 70rpx;
|
|
|
|
.label {
|
|
color: #000;
|
|
font-size: $font-size-base;
|
|
line-height: 1.3;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-item {
|
|
margin: 24rpx 0;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.input-wrap {
|
|
padding-bottom: 30rpx;
|
|
border-bottom: 2rpx solid #f2f2f2;
|
|
flex: 1;
|
|
width: 0;
|
|
margin-right: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.placeholder {
|
|
font-size: $font-size-tag;
|
|
color: #a3a3a3;
|
|
height: 100%;
|
|
}
|
|
|
|
input {
|
|
font-size: $font-size-tag;
|
|
}
|
|
|
|
.send {
|
|
border: 2rpx solid $base-color;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 60rpx;
|
|
font-size: $font-size-tag;
|
|
text-align: center;
|
|
padding: 0 40rpx;
|
|
}
|
|
|
|
.captcha {
|
|
margin: 4rpx;
|
|
height: 52rpx;
|
|
width: 140rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
.confirm {
|
|
height: 78rpx;
|
|
line-height: 78rpx;
|
|
border-radius: 78rpx;
|
|
text-align: center;
|
|
background: $base-color;
|
|
color: #fff;
|
|
margin: 0 54rpx;
|
|
}
|
|
.cancel {
|
|
text-align: center;
|
|
padding: 30rpx 0;
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.bind-tips {
|
|
color: #aaa;
|
|
font-size: $font-size-base;
|
|
padding: 20rpx 50rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.auth-login {
|
|
width: calc(100% - 100rpx);
|
|
margin: 20rpx auto 50rpx auto;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 80rpx;
|
|
}
|
|
|
|
.bind-tip-icon {
|
|
padding-top: 80rpx;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
image {
|
|
width: 300rpx;
|
|
}
|
|
}
|
|
}
|
|
.ns-btn-default-all {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
border-radius: $border-radius;
|
|
text-align: center;
|
|
line-height: 70rpx;
|
|
color: #ffffff;
|
|
font-size: $font-size-base;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
/deep/ .reward-popup .uni-popup__wrapper-box {
|
|
background: none !important;
|
|
max-width: unset !important;
|
|
max-height: unset !important;
|
|
overflow: unset !important;
|
|
}
|
|
</style>
|
|
|