MoeNovaClient/pages/my/editMobile.vue

<template>
	<view class="page">
		<view class="list_info">
			<!-- 标题和说明 -->
			<view class="title"> <template v-if="processProgress == 1">新</template> 手机号验证</view>
			<view class="subtitle">该账号绑定的原手机号 {{ formatPhoneNumber(originalPhoneNumber) }}，完成手机验证</view>

			<!-- 手机号输入 -->
			<view class="phone_input">
				<text class="area_code">+86</text>
				<input type="number" class="input" placeholder="请输入手机号" v-model="mobile" maxlength="11" />
			</view>

			<!-- 验证码输入 -->
			<view class="code_input">
				<input type="number" class="input" placeholder="请输入验证码" v-model="code" maxlength="6" />
				<view class="btn" v-if="captchaTime === 0" @click="getCode">获取验证码</view>
				<view class="btn disabled" v-else>{{ captchaTime }}秒后重试</view>
			</view>

			<view class="blankHeight"></view>
		</view>

		<view class="btn_submit" @click="processProgress == 0 ? submitData() : newSubmitData()">确定</view>
		<view class="mobilePhoneNotAvailable" @click="openCustomPopup">现手机已不可用？</view>
		<DialogBox ref="DialogBox"></DialogBox>
		<CustomerServicePopup ref="customerServicePopup"></CustomerServicePopup>
	</view>
</template>

<script>
import CustomPopup from '@/components/CustomPopup/CustomPopup.vue'
import CustomerServicePopup from '@/components/CustomerServicePopup/CustomerServicePopup.vue'

export default {
	components: { CustomPopup, CustomerServicePopup },
	data() {
		return {
			title: '',
			mobile: '',
			originalPhoneNumber: '',
			code: '',
			captchaTime: 0,
			processProgress: 0, // 0原手机号验证逻辑，1新手机号验证逻辑
		}
	},
	onLoad(e) {
		if (e.originalPhoneNumber) {
			this.originalPhoneNumber = e.originalPhoneNumber;
		}
	},
	onShow() {
		// this.loadData();
	},
	methods: {
		openCustomPopup() {
			this.$refs.customerServicePopup.$refs.customPopup.open()
		},
		formatPhoneNumber(phoneNumber) {
			if (phoneNumber && phoneNumber.length === 11) {
				return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			}
			return phoneNumber;
		},
		onBack() { },
		chkSel() {
			if (this.sel == 1) {
				this.sel = 0;
			} else {
				this.sel = 1;
			}
		},
		getCodeTime() {
			this.captchaTime = 60;
			let timer = setInterval(() => {
				this.captchaTime--;
				if (this.captchaTime < 1) {
					clearInterval(timer);
					this.captchaTime = 0
				}
			}, 1000)
		},
		getCode() {
			var _this = this
			if (this.mobile.length != 11) {
				uni.showToast({
					title: '请输入完整手机号',
					icon: 'none'
				});
				return;
			}
			// 验证原手机号的逻辑
			if (this.processProgress == 0 && this.mobile != this.originalPhoneNumber) {
				uni.showToast({
					title: '请输入正确的原手机号',
					icon: 'none'
				});
				return;
			}

			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.mobile)) {
				uni.showToast({
					title: '请输入有效的手机号',
					icon: 'none'
				});
				return;
			}

			if (this.captchaTime > 0) {
				uni.showToast({
					title: '不能重复获取',
					icon: 'none'
				});
				return;
			}
			this.captchaTime = 60;
			var url = '/Web/getcode'
			var data = {}
			if (this.processProgress == 0) {
				url = '/Member/getcode'
				data = {}
			}
			if (this.processProgress == 1) {
				url = '/Web/getcode'
				data = { mobile: _this.mobile, skey: this.skey, }
			}
			uni.request({
				url: this.$apiHost + url,
				data: {
					uuid: getApp().globalData.uuid,
					...data
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					console.log("----", res.data)
					uni.showToast({
						title: res.data.str,
						icon: 'none'
					})
					if (res.data.success == 'yes') {
						this.getCodeTime();
					} else {
						this.captchaTime = 0;
					}
				}
			});
		},
		submitData() {
			console.log('submitData');

			if (this.mobile == "") {
				uni.showToast({
					title: "请输入手机号",
					icon: 'none'
				});
				return;
			}
			if (this.code == "") {
				uni.showToast({
					title: "请输入验证码",
					icon: 'none'
				});
				return;
			}
			//   验证原始手机号 
			uni.request({
				url: this.$apiHost + '/Member/checkMobile',
				data: {
					uuid: getApp().globalData.uuid,
					code: this.code,
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					console.log("----", res.data);
					uni.showToast({
						title: res.data.str,
						icon: 'none'
					});
					if (res.data.success == "yes") {
						this.$refs['DialogBox'].confirm({
							title: '确认修改手机号',
							content: '当前绑定的手机号为 ' + this.mobile + ' 吗？',
							DialogType: "inquiry",
							btn1: "再考虑一下",
							btn2: "确认更换",
							animation: 0
						}).then(() => {
							// 用户点击确认后，发送请求
							this.mobile = ''
							this.code = ''
							this.captchaTime = 0
							this.processProgress = 1

							uni.showToast({
								title: "请输入新手机号",
								icon: 'none'
							});
						}).catch(() => {
							// 用户点击取消后，不发送请求
							console.log('用户取消了修改手机号');
						});
					}
				}
			});
			// 弹窗确认是否修改手机号

		},
		newSubmitData() {
			console.log("newSubmitData");

			if (this.mobile == "") {
				uni.showToast({
					title: "请输入手机号",
					icon: 'none'
				});
				return;
			}
			if (this.code == "") {
				uni.showToast({
					title: "请输入验证码",
					icon: 'none'
				});
				return;
			}

			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.mobile)) {
				uni.showToast({
					title: '请输入有效的手机号',
					icon: 'none'
				});
				return;
			}
			// 更改为新手机号时发送验证请求
			uni.request({
				url: this.$apiHost + '/Member/editMobile',
				data: {
					uuid: getApp().globalData.uuid,
					mobile: this.mobile,
					code: this.code,
				},
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					console.log("----", res.data);
					uni.showToast({
						title: res.data.str,
						icon: 'none'
					});
					if (res.data.success == "yes") {
						// 可以在此处添加修改成功后的逻辑
						if (this.mobile) {
							getApp().globalData.mobile = this.mobile
							uni.removeStorageSync("mobile" );
							uni.setStorageSync("mobile", this.mobile);
						}
					}
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
.list_info {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	color: #fff;
	width: 750rpx;

	.textContent {
		color: #1f1f1f;
		max-width: 400rpx;
	}

	.textPrompt {
		color: #999999;
	}

	.name {
		width: 690rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		color: #333;
		font-size: 28rpx;
		margin-top: 20rpx;

		.right {
			font-size: 28rpx;
			color: #ff2a95;
		}
	}

	.desc {
		width: 690rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.item {
		width: 690rpx;
		height: 84rpx;
		margin-top: 20rpx;
		background: #ffffff;
		position: relative;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		input {
			width: 100%;
			height: 100%;
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #333;
			border: solid 1px #f0f0f0;
			border-radius: 12rpx;
		}

		.btn {
			position: absolute;
			right: 20rpx;
			top: 0rpx;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 84rpx;
			color: #ff2a95;
		}

		.arrow {
			width: 36rpx;
			position: absolute;
			right: 20rpx;
			top: 24rpx;
		}
	}

	.bcenter {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 120rpx;

		.avator {
			width: 200rpx;
			height: 200rpx;
			position: relative;

			.img {
				width: 172rpx;
				height: 172rpx;
				border-radius: 86rpx;
			}

			.photo {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				bottom: 0;
				right: 10rpx;
			}
		}
	}

	.item2 {
		width: 690rpx;
		height: 84rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.sex {
			width: 334rpx;
			height: 84rpx;
			background: #ffffff;
			border-radius: 24rpx;
			border: 2rpx solid #282828;
			color: #999;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.active {
			border: 4rpx solid #ff2a95;
			color: #ff2a95;
		}

		.sex2 {
			image {
				width: 172rpx;
			}
		}
	}

	.itemSex {
		width: 690rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.sex2 {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			width: 210rpx;
			height: 210rpx;

			text {
				color: #999;
			}

			image {
				width: 132rpx;
				height: 132rpx;
			}
		}

		.active {
			text {
				color: #fff;
			}

			image {
				border: 4rpx solid #36d6ff;
				border-radius: 172rpx;
				width: 172rpx;
				height: 172rpx;
			}
		}
	}

	.itemSingle {
		width: 690rpx;
		height: 84rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.slider {
			width: 100%;
		}
	}

	.itemXL {
		width: 690rpx;
	}

	.item_tag {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 690rpx;
		padding: 20rpx;

		.tag {
			border-radius: 12rpx;
			margin-right: 10rpx;
			margin-top: 10rpx;
			padding: 8rpx 16rpx;
			height: 60rpx;
			border: 2rpx solid #eee;
			color: #333;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background: #eeeeee;

			.close {
				width: 28rpx;
				margin-left: 2rpx;
				position: relative;
			}
		}

		.active {
			border-radius: 20rpx;
			border: 2rpx solid #ff5967;
		}

		.addNew {
			margin-right: 10rpx;
			margin-top: 10rpx;
			padding: 0rpx 20rpx;
			height: 60rpx;
			border-radius: 12rpx;
			background: #1f1f1f;
			color: #fff;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}

	.title {
		text-align: center;
		margin-top: 96rpx;
		width: 100%;
		font-weight: 600;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 48rpx;
		color: #1F1F1F;
	}

	.subtitle {
		font-size: 24rpx;
		font-weight: 400;
		color: #959595;
		text-align: center;
		margin-top: 20rpx;
		width: 100%;
	}

	.phone_input {
		width: 626rpx;
		height: 84rpx;
		margin-top: 96rpx;
		background: #ffffff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		border: 4rpx solid #000000;
		border-radius: 74rpx;

		.area_code {
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #333;
			border-right: 1rpx solid #e0e0e0;
		}

		.input {
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	.code_input {
		width: 626rpx;
		height: 84rpx;
		margin-top: 20rpx;
		background: #ffffff;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		border: 4rpx solid #000000;
		border-radius: 74rpx;
		padding-right: 8rpx;

		.input {
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			font-size: 28rpx;
			color: #333;
		}

		.btn {
			padding: 11rpx 26rpx;
			font-size: 28rpx;
			background: #000000;
			border-radius: 74rpx;
			font-family: 'PingFang SC-Bold';

			&.disabled {
				color: #999;
				background: transparent;
			}
		}
	}
}

.btn_submit {
	width: 660rpx;
	height: 96rpx;
	margin: 0 auto;
	margin-top: 74rpx;
	background: #1f1f1f;
	border-radius: 50rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #ffffff;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.mobilePhoneNotAvailable {
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #0084FF;
	text-align: center;
	margin-top: 42rpx;
}
</style>