feat: 新增会员绑定手机号功能
lele0521
parent
25677ced97
commit
20b2ca04f0
11
api/login.js
11
api/login.js
|
|
@ -14,6 +14,17 @@ export function resetByMobile(params) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定手机号码
|
||||
* @param mobile
|
||||
*/
|
||||
export function bindMobile(params) {
|
||||
return http.request({
|
||||
url: `/passport/member/bindMobile`,
|
||||
method: "POST",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
//获取自动发券
|
||||
export function getAutoCoup(){
|
||||
|
|
|
|||
10
pages.json
10
pages.json
|
|
@ -275,6 +275,16 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "set/securityCenter/bindMobile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "绑定手机号",
|
||||
"app-plus": {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "im/list",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,15 @@
|
|||
<u-form-item label="城市" label-width="150" placeholder="请选择城市" right-icon="arrow-right">
|
||||
<div style="width: 100%;" @click="clickRegion">{{ form.___path || '请选择城市' }}</div>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="手机号" label-width="150">
|
||||
<view v-if="form.mobile">
|
||||
{{form.mobile}}
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="submit" @click="navigateTo(form.username)">绑定手机号码</view>
|
||||
</view>
|
||||
</u-form-item>
|
||||
|
||||
</u-form>
|
||||
<div class="bottom">
|
||||
|
|
@ -32,7 +41,7 @@
|
|||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { saveUserInfo } from "@/api/members.js";
|
||||
import { saveUserInfo, getUserInfo } from "@/api/members.js";
|
||||
import { upload } from "@/api/common.js";
|
||||
import storage from "@/utils/storage.js";
|
||||
import uFormItem from "@/uview-ui/components/u-form-item/u-form-item.vue";
|
||||
|
|
@ -50,6 +59,8 @@ export default {
|
|||
region: storage.getUserInfo().region || [], //地址
|
||||
sex: storage.getUserInfo().sex, //性别
|
||||
___path: storage.getUserInfo().region,
|
||||
mobile: storage.getUserInfo().mobile,
|
||||
username: storage.getUserInfo().username,
|
||||
},
|
||||
birthday: storage.getUserInfo().birthday || "", //生日
|
||||
photo: [
|
||||
|
|
@ -160,6 +171,12 @@ export default {
|
|||
this.form.birthday = `${time.year}-${time.month}-${time.day}`;
|
||||
this.birthday = `${time.year} - ${time.month} - ${time.day}`;
|
||||
},
|
||||
|
||||
navigateTo(username) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/set/securityCenter/bindMobile' + '?username=' + username,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<view class="box">
|
||||
<view class="box-tips">
|
||||
<h2 class='h2'>
|
||||
绑定手机号码
|
||||
</h2>
|
||||
<view class="verification"></view>
|
||||
</view>
|
||||
<view class="form">
|
||||
<u-form :model="codeForm" ref="validateCodeForm">
|
||||
<view v-if="!validateFlage">
|
||||
<u-form-item label-width="120" label="手机号" prop="mobile">
|
||||
<u-input maxlength="11" v-model="codeForm.mobile" placeholder="请输入您的手机号" />
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item class="sendCode" label-width="120" prop="code" label="验证码">
|
||||
<u-input v-model="codeForm.code" placeholder="请输入验证码" />
|
||||
<u-verification-code unique-key="page-edit" :seconds="seconds" @end="end" @start="start"
|
||||
ref="uCode" @change="codeChange"></u-verification-code>
|
||||
<view @tap="getCode" class="text-tips">{{ tips }}</view>
|
||||
</u-form-item>
|
||||
|
||||
<view class="submit" @click="validatePhone">绑定</view>
|
||||
<myVerification keep-running @send="verification" class="verification" ref="verification"
|
||||
business="BIND_MOBILE" />
|
||||
</view>
|
||||
</u-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
sendMobile,
|
||||
bindMobile
|
||||
} from "@/api/login";
|
||||
|
||||
import myVerification from "@/components/verification/verification.vue"; //验证
|
||||
import uuid from "@/utils/uuid.modified.js";
|
||||
export default {
|
||||
components: {
|
||||
myVerification,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uuid,
|
||||
validateFlage: false, //是否进行了手机号验证
|
||||
step: 0, //当前验证步骤
|
||||
flage: false, //是否验证码验证
|
||||
codeForm: {
|
||||
mobile: "", //手机号
|
||||
code: "", //验证码
|
||||
username: "", //用户名
|
||||
},
|
||||
tips: "", //提示
|
||||
seconds: 69, // 60s等待时间
|
||||
|
||||
// 验证码登录校验
|
||||
codeRules: {
|
||||
mobile: [{
|
||||
validator: (rule, value, callback) => {
|
||||
return this.$u.test.mobile(value);
|
||||
},
|
||||
message: "手机号码不正确",
|
||||
trigger: ["blur"],
|
||||
}, ],
|
||||
code: [{
|
||||
min: 4,
|
||||
max: 6,
|
||||
required: true,
|
||||
message: "请输入验证码",
|
||||
trigger: ["blur"],
|
||||
}, ],
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.codeForm.username = options.username;
|
||||
},
|
||||
onReady() {
|
||||
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
||||
this.$refs.validateCodeForm.setRules(this.codeRules);
|
||||
},
|
||||
watch: {
|
||||
flage(val) {
|
||||
if (val) {
|
||||
if (this.$refs.uCode.canGetCode) {
|
||||
uni.showLoading({
|
||||
title: "正在获取验证码",
|
||||
});
|
||||
sendMobile(this.codeForm.mobile, "BIND_MOBILE").then((res) => {
|
||||
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
if (res.data.success) {
|
||||
this.$refs.uCode.start();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.data.message,
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.flage = false;
|
||||
this.$refs.verification.getCode();
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$u.toast("请倒计时结束后再发送");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 验证码验证
|
||||
verification(val) {
|
||||
this.flage = val == this.$store.state.verificationKey ? true : false;
|
||||
},
|
||||
|
||||
// 验证手机号
|
||||
validatePhone() {
|
||||
this.$refs.validateCodeForm.validate((valid) => {
|
||||
if (valid) {
|
||||
bindMobile(this.codeForm).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.validateFlage = !this.validateFlage;
|
||||
// 登录成功
|
||||
uni.showToast({
|
||||
title: "绑定成功!",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
end() {
|
||||
|
||||
this.flage = false;
|
||||
this.$refs.verification.getCode()
|
||||
},
|
||||
|
||||
/**获取验证码 */
|
||||
getCode() {
|
||||
if (this.tips == "重新获取") {
|
||||
this.$refs.verification.error(); //发送
|
||||
}
|
||||
if (!this.$u.test.mobile(this.codeForm.mobile)) {
|
||||
uni.showToast({
|
||||
title: "请输入正确手机号",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (!this.flage) {
|
||||
this.$refs.verification.error(); //发送
|
||||
return false;
|
||||
}
|
||||
},
|
||||
start() {
|
||||
this.$u.toast("验证码已发送");
|
||||
this.flage = true;
|
||||
|
||||
this.$refs.verification.hide();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import url("@/pages/passport/login.scss");
|
||||
|
||||
/deep/ .u-form-item {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.sendCode {
|
||||
/deep/ .u-form-item--right__content__slot {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 80rpx 0;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.submit {
|
||||
background: $light-color;
|
||||
}
|
||||
|
||||
.box-tips {
|
||||
margin: 0 72rpx;
|
||||
}
|
||||
|
||||
.verification {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue