yizhizan-h5/pages/my/userphone.vue

<template>
	<view class="modify-phone-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-leftward" color="#333" size="42"></u-icon>
				</view>
				<view class="nav-title">修改手机号</view>
				<view class="nav-right"></view>
			</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="main-content">
			<!-- 页面标题 -->
			<view class="page-title">修改手机号</view>
			
			<!-- 说明文字 -->
			<view class="description">
				<text>修改手机号后,可以使用新手机号登录亿职赞,聊天时"交换电话"功能的手机号会统一修改</text>
			</view>
			
			<!-- 当前手机号显示 -->
			<view class="current-phone-section">
				<text class="current-label">当前手机号:</text>
				<text class="current-phone">{{currentPhoneMask}}</text>
			</view>
			
			<!-- 新手机号输入 -->
			<view class="input-section">
				<view class="phone-input-container">
					<view class="country-selector" @click="showCountrySelector">
						<text class="country-code">+ 86</text>
						<u-icon name="arrow-down" color="#999" size="24"></u-icon>
					</view>
					<input 
						v-model="newPhone" 
						type="number" 
						placeholder="请输入新手机号" 
						maxlength="11"
						class="phone-input"
					/>
				</view>
			</view>
			
			<!-- 验证码输入 -->
			<view class="verification-section">
				<view class="verify-input-container">
					<view class="verify-boxes">
						<input 
							v-for="(digit, index) in verificationDigits" 
							:key="index"
							v-model="verificationDigits[index]"
							type="number"
							maxlength="1"
							class="verify-box"
							@input="handleDigitInput(index, $event)"
							@keyup.delete="handleDelete(index)"
						/>
					</view>
					<view class="get-code-btn" @click="getVerificationCode" :class="{ disabled: isCountingDown }">
						<text>{{ countdownText }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部确定按钮 -->
		<view class="bottom-btn-container">
			<view class="confirm-btn" @click="confirmChange" :class="{ disabled: !canConfirm }">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
import configdata from '../../common/config.js';

export default {
	data() {
		return {
			currentPhone: '18800000097', // 当前手机号
			newPhone: '', // 新手机号
			verificationDigits: ['', '', '', '', ''], // 验证码
			isCountingDown: false,
			countdown: 60,
			countdownText: '获取验证码',
		};
	},
	computed: {
		// 当前手机号脱敏显示
		currentPhoneMask() {
			if (this.currentPhone && this.currentPhone.length >= 11) {
				return this.currentPhone.substring(0, 3) + '********' + this.currentPhone.substring(9);
			}
			return this.currentPhone || '请设置手机号';
		},
		// 是否可以确认
		canConfirm() {
			return this.newPhone.length === 11 && this.verificationDigits.join('').length === 5;
		}
	},
	onLoad(options) {
		// 从用户信息页面获取当前手机号
		if (options.currentPhone) {
			this.currentPhone = options.currentPhone;
		}
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 显示国家选择器
		showCountrySelector() {
			uni.showToast({
				title: '选择国家/地区',
				icon: 'none'
			});
		},
		
		// 验证码输入处理
		handleDigitInput(index, event) {
			const value = event.detail.value;
			this.verificationDigits[index] = value;
			
			// 自动跳转到下一框
			if (value && index < 4) {
				this.$nextTick(() => {
					const nextInput = this.$el.querySelector(`input[data-index="${index + 1}"]`);
					if (nextInput) nextInput.focus();
				});
			}
		},
		
		// 删除处理
		handleDelete(index) {
			if (!this.verificationDigits[index] && index > 0) {
				this.$nextTick(() => {
					const prevInput = this.$el.querySelector(`input[data-index="${index - 1}"]`);
					if (prevInput) prevInput.focus();
				});
			}
		},
		
		// 获取验证码
		async getVerificationCode() {
			if (!this.newPhone) {
				uni.showToast({
					title: '请输入新手机号',
					icon: 'none'
				});
				return;
			}
			
			if (this.newPhone.length !== 11) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '发送中...'
			});
			
			try {
				// 调用发送验证码API
				const res = await this.request({
					url: '/msg/sendMsg/' + this.newPhone + '/changePhone',
					method: 'GET'
				});
				
				uni.hideLoading();
				
				if (res.status === 0) {
					uni.showToast({
						title: '验证码发送成功',
						icon: 'success'
					});
					this.startCountdown();
				} else {
					uni.showToast({
						title: res.msg || '发送失败，请重试',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},
		
		// 开始倒计时
		startCountdown() {
			this.isCountingDown = true;
			this.countdown = 60;
			this.countdownText = '60秒后重新获取';
			
			const timer = setInterval(() => {
				this.countdown--;
				this.countdownText = `${this.countdown}秒后重新获取`;
				
				if (this.countdown <= 0) {
					clearInterval(timer);
					this.isCountingDown = false;
					this.countdownText = '获取验证码';
				}
			}, 1000);
		},
		
		// 确认修改
		async confirmChange() {
			if (!this.canConfirm) {
				uni.showToast({
					title: '请完整填写信息',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '处理中...'
			});
			
			try {
				const userId = uni.getStorageSync('userId');
				const res = await this.request({
					url: '/user/changePhone',
					method: 'GET',
					data: {
						userId: userId,
						phone: this.newPhone,
						msg: this.verificationDigits.join('')
					}
				});
				
				uni.hideLoading();
				
				if (res.status === 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: res.msg || '修改失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				});
			}
		},
		
		// 请求封装
		request(options) {
			return new Promise((resolve, reject) => {
				uni.request({
					url: configdata.APIHOST1 + options.url,
					method: options.method || 'POST',
					data: options.data || {},
					success: resolve,
					fail: reject
				});
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.modify-phone-page {
	min-height: 100vh;
	background: #ffffff;
}

/* 导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 80rpx;
	background-color: #ffffff;
	z-index: 9999;
	// border-bottom: 1rpx solid #f0f0f0;
	
	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 40rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			color: rgba(51, 51, 51, 1);
			font-family: PingFang SC;
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50rpx;
			text-align: center;
		}
	}
}

/* 主要内容 */
.main-content {
	margin-top: 168rpx;
	padding: 40rpx 30rpx;
}

.page-title {
	color: rgba(51, 51, 51, 1);
	font-family: DM Sans;
	font-size: 48rpx;
	font-weight: 700;
	line-height: 60rpx;
	letter-spacing: 0px;
	text-align: left;
	margin-bottom: 20rpx;
}

.description {
	color: rgba(102, 102, 102, 1);
	font-family: DM Sans;
	font-size: 24rpx;
	font-weight: 400;
	line-height: 32rpx;
	letter-spacing: 0.5%;
	text-align: left;
	margin-bottom: 20rpx;
}

.current-phone-section {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	gap: 16rpx;
	
	.current-label , .current-phone{
		color: rgba(102, 102, 102, 1);
		font-family: DM Sans;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 32rpx;
		letter-spacing: 0.5%;
		text-align: left;
	}
}

/* 手机号输入 */
.input-section {
	margin-bottom: 40rpx;
}

.phone-input-container {
	width: 100%;
	height: 88rpx;
	// border: 1px solid rgba(227, 231, 236, 1);
	// border-radius: 24px;
	background: rgba(255, 255, 255, 1);
	display: flex;
	align-items: center;
	// padding: 0 20rpx;
	
	.country-selector {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 208rpx;
		height: 96rpx;
		border-radius: 12rpx;
		background: rgba(247, 248, 249, 1);
		// border-right: 1rpx solid #e4e6ea;
		margin-right: 20rpx;
		gap: 26rpx;
		
		.country-code {
			color: rgba(56, 59, 70, 1);
			font-family: DM Sans;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 48rpx;
			letter-spacing: 0%;
			text-align: center;
		}
	}
	
	.phone-input {
		flex: 1;
		width: 446rpx;
		height: 96rpx;
		border-radius: 12rpx;
		padding: 0 32rpx;
		background: rgba(247, 248, 249, 1);
		// color: rgba(195, 196, 199, 1);
		font-family: DM Sans;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 48rpx;
		letter-spacing: 0%;
		text-align: left;
		
		&::placeholder {
			color: rgba(195, 196, 199, 1);
		}
	}
}

/* 验证码部分 */
.verification-section {
	margin-bottom: 60rpx;
}

.verify-input-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 20rpx;
	padding: 20rpx 0;
}

.verify-boxes {
	display: flex;
	gap: 20rpx;
	justify-content: space-between;
	width: 100%;
	
	.verify-box {
		width: 110rpx;
		height: 96rpx;
		border: 1px solid rgba(234, 239, 245, 1);
		border-radius: 24rpx;
		background: rgba(245, 249, 254, 1);
		text-align: center;
		color: rgba(23, 23, 37, 1);
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 80rpx;
		
		&:focus {
			border-color: rgba(24, 144, 255, 1);
			background: rgba(255, 255, 255, 1);
		}
		
		&::placeholder {
			color: rgba(155, 155, 155, 1);
		}
	}
}

.get-code-btn {
	color:rgba(1, 107, 246, 1);
	font-family: DM Sans;
	font-size: 26rpx;
	font-weight: 400;
	line-height: 32rpx;
	letter-spacing: 0.5%;
	text-align: left;
	
	&.disabled {
		color: rgba(155, 155, 155, 1);
	}
}

/* 底部按钮 */
.bottom-btn-container {
	padding: 30rpx;
	background: #fff;
	// border-top: 1rpx solid #f0f0f0;
	z-index: 9999;
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	background: var(--线性渐变, linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1) 100%));
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&.disabled {
		opacity: 0.4;
	}
	
	text {
		color: rgba(255, 255, 255, 1);
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 44rpx;
	}
}
</style>