xiangqinxiangmu/LiangZhiYUMao/pages/settings/phone-binding.vue

<template>
	<view class="phone-binding-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-back" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="navbar-title">绑定手机号</view>
			<view class="navbar-placeholder"></view>
		</view>
		
		<!-- 提示信息 -->
		<view class="tip-card">
			<text class="tip-icon">📱</text>
			<view class="tip-content">
				<text class="tip-title">手机号验证</text>
				<text class="tip-text">绑定手机号后可用于登录和找回密码</text>
			</view>
		</view>
		
		<!-- 当前绑定信息 -->
		<view class="current-phone" v-if="currentPhone">
			<view class="current-label">当前绑定手机号</view>
			<view class="current-value">{{ maskPhone(currentPhone) }}</view>
		</view>
		
		<!-- 表单区域 -->
		<view class="form-container">
			<view class="form-item">
				<text class="form-label">新手机号</text>
				<input class="form-input" v-model="formData.phone" placeholder="请输入新手机号" type="number" maxlength="11" />
			</view>
			
			<view class="form-item">
				<text class="form-label">验证码</text>
				<view class="code-input-group">
					<input class="form-input code-input" v-model="formData.code" placeholder="请输入验证码" maxlength="6" type="number" />
					<button class="send-code-btn" :disabled="countdown > 0 || !canSendCode" @click="sendCode">
						{{ countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
					</button>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-container">
			<button class="submit-btn" :disabled="!canSubmit" @click="handleSubmit">
				{{ submitting ? '绑定中...' : currentPhone ? '更换绑定' : '立即绑定' }}
			</button>
		</view>
		
		<!-- 说明 -->
		<view class="notice">
			<text class="notice-title">温馨提示</text>
			<text class="notice-item">• 手机号仅用于登录和安全验证</text>
			<text class="notice-item">• 一个手机号只能绑定一个账号</text>
			<text class="notice-item">• 如需更换，请先解绑原手机号</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentPhone: '',
			formData: {
				phone: '',
				code: ''
			},
			countdown: 0,
			submitting: false,
			timer: null
		}
	},
	
	computed: {
		canSendCode() {
			return this.formData.phone && /^1[3-9]\d{9}$/.test(this.formData.phone)
		},
		
		canSubmit() {
			return this.canSendCode && this.formData.code && !this.submitting
		}
	},
	
	onLoad() {
		this.loadCurrentPhone()
	},
	
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	},
	
	methods: {
		// 加载当前绑定的手机号
		loadCurrentPhone() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo && userInfo.phone) {
				this.currentPhone = userInfo.phone
			}
		},
		
		// 手机号脱敏
		maskPhone(phone) {
			if (!phone || phone.length !== 11) return phone
			return phone.substring(0, 3) + '****' + phone.substring(7)
		},
		
		// 发送验证码
		async sendCode() {
			if (!this.canSendCode || this.countdown > 0) return
			
			try {
				// TODO: 调用发送验证码API
				uni.showToast({
					title: '验证码已发送',
					icon: 'success'
				})
				
				// 开始倒计时
				this.countdown = 60
				this.timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(this.timer)
					}
				}, 1000)
			} catch (error) {
				console.error('发送验证码失败:', error)
				uni.showToast({
					title: '发送失败，请重试',
					icon: 'none'
				})
			}
		},
		
		// 提交绑定
		async handleSubmit() {
			if (!this.canSubmit) return
			
			// 验证手机号格式
			if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			
			// 验证验证码
			if (!this.formData.code || this.formData.code.length !== 6) {
				uni.showToast({
					title: '请输入6位验证码',
					icon: 'none'
				})
				return
			}
			
			this.submitting = true
			
			try {
				// TODO: 调用绑定手机号API
				await new Promise(resolve => setTimeout(resolve, 2000))
				
				// 更新本地存储
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					userInfo.phone = this.formData.phone
					uni.setStorageSync('userInfo', userInfo)
				}
				
				uni.showToast({
					title: '绑定成功',
					icon: 'success'
				})
				
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} catch (error) {
				console.error('绑定失败:', error)
				uni.showToast({
					title: '绑定失败，请重试',
					icon: 'none'
				})
			} finally {
				this.submitting = false
			}
		},
		
		// 返回
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style scoped>
.phone-binding-page {
	min-height: 100vh;
	background: #F5F5F5;
}

/* 自定义导航栏 */
.custom-navbar {
	height: 88rpx;
	background: #E91E63;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	color: white;
}

.navbar-back {
	padding: 10rpx 20rpx;
}

.back-icon {
	font-size: 40rpx;
	color: white;
	font-weight: bold;
}

.navbar-title {
	font-size: 32rpx;
	font-weight: bold;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.navbar-placeholder {
	width: 80rpx;
}

/* 提示卡片 */
.tip-card {
	margin: 24rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	border-left: 6rpx solid #2196F3;
}

.tip-icon {
	font-size: 48rpx;
}

.tip-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.tip-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #1565C0;
}

.tip-text {
	font-size: 24rpx;
	color: #1976D2;
	line-height: 1.5;
}

/* 当前绑定信息 */
.current-phone {
	margin: 24rpx;
	padding: 32rpx;
	background: white;
	border-radius: 16rpx;
	text-align: center;
}

.current-label {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 16rpx;
}

.current-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

/* 表单区域 */
.form-container {
	margin: 24rpx;
}

.form-item {
	background: white;
	padding: 32rpx;
	margin-bottom: 24rpx;
	border-radius: 16rpx;
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: bold;
}

.form-input {
	width: 92%;
	height: 80rpx;
	padding: 0 24rpx;
	background: #F5F5F5;
	border-radius: 12rpx;
	font-size: 28rpx;
	border: 2rpx solid #E0E0E0;
}

.code-input-group {
	display: flex;
	gap: 16rpx;
}

.code-input {
	flex: 1;
}

.send-code-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #E91E63;
	color: white;
	border: none;
	border-radius: 12rpx;
	font-size: 26rpx;
	padding: 0;
}

.send-code-btn[disabled] {
	background: #BDBDBD;
}

/* 提交按钮 */
.submit-container {
	padding: 40rpx 24rpx;
}

.submit-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
	color: white;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	border: none;
	box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.3);
}

.submit-btn[disabled] {
	background: #BDBDBD;
	box-shadow: none;
}

/* 说明 */
.notice {
	margin: 0 24rpx 40rpx;
	padding: 32rpx;
	background: white;
	border-radius: 16rpx;
}

.notice-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.notice-item {
	display: block;
	font-size: 24rpx;
	color: #666;
	line-height: 2;
}
</style>