From 20b2ca04f05c7dc2c31fb02e837426e0e32850e7 Mon Sep 17 00:00:00 2001
From: lele0521 <lele190626@gmail.com>
Date: Mon, 4 Dec 2023 17:19:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A=E6=89=8B=E6=9C=BA=E5=8F=B7=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/login.js                                 |  11 +
 pages.json                                   |  10 +
 pages/mine/set/personMsg.vue                 |  19 +-
 pages/mine/set/securityCenter/bindMobile.vue | 218 +++++++++++++++++++
 4 files changed, 257 insertions(+), 1 deletion(-)
 create mode 100644 pages/mine/set/securityCenter/bindMobile.vue

diff --git a/api/login.js b/api/login.js
index af9a1a0..9b062fa 100644
--- a/api/login.js
+++ b/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(){
diff --git a/pages.json b/pages.json
index eca83d4..bbce918 100644
--- a/pages.json
+++ b/pages.json
@@ -275,6 +275,16 @@
 						}
 					}
 				},
+				
+				{
+					"path": "set/securityCenter/bindMobile",
+					"style": {
+						"navigationBarTitleText": "绑定手机号",
+						"app-plus": {
+				
+						}
+					}
+				},
 
 				{
 					"path": "im/list",
diff --git a/pages/mine/set/personMsg.vue b/pages/mine/set/personMsg.vue
index e9c477e..fbe56b3 100644
--- a/pages/mine/set/personMsg.vue
+++ b/pages/mine/set/personMsg.vue
@@ -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,
+	  });
+	},
   },
 
   /**
diff --git a/pages/mine/set/securityCenter/bindMobile.vue b/pages/mine/set/securityCenter/bindMobile.vue
new file mode 100644
index 0000000..de301b0
--- /dev/null
+++ b/pages/mine/set/securityCenter/bindMobile.vue
@@ -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>