property-resident-side/property-uniapp-project/pages/my/changePhone.vue

<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="更改手机号码" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 手机号输入框（带+86前缀） -->
				<view class="input-group phone-input">
					<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/phoneIcon.png"></image>
					<input class="input-item" type="number" v-model="phone" placeholder="请输入手机号码"
						placeholder-class="input-placeholder" maxlength="11" />
				</view>

				<!-- 验证码输入框（带获取验证码按钮） -->
				<view class="input-group code-input" style="padding: 0 0 0 20rpx;">
					<image class="iconStyle" src="http://47.104.199.163:9090/images/propertyImgs/codeIcon.png">️</image>

					<input class="input-item code-item" type="number" v-model="code" placeholder="请输入验证码"
						placeholder-class="input-placeholder" maxlength="6" />
					<button class="code-btn" :disabled="countdown > 0" @click="getCode">
						{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
					</button>
				</view>

			</view>


		</scroll-view>
		<view class="bottom-btn">
			<button class="submit-btn" @click="onSubmit">确定</button>
		</view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {


		},
		created() {

		},
		onShow() {

		},
		onUnload() {
			// 页面卸载时清除定时器
			if (this.timer) clearInterval(this.timer)
		},
		mounted() {},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				phone: '',
				code: '',
				countdown: 0,
				timer: null,


			}
		},


		methods: {

			// 获取验证码
			getCode() {
				// 1. 手机号校验
				const phoneReg = /^1[3-9]\d{9}$/
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}

				// 2. 模拟发送验证码（替换为实际接口）
				uni.showLoading({
					title: '发送中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					})

					// 3. 开启60秒倒计时
					this.countdown = 60
					this.timer = setInterval(() => {
						if (this.countdown <= 1) {
							clearInterval(this.timer)
							this.countdown = 0
							return
						}
						this.countdown--
					}, 1000)
				}, 800)
			},

			// 提交修改
			onSubmit() {
				// 1. 基础校验
				const phoneReg = /^1[3-9]\d{9}$/
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!phoneReg.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '更换中...',
					mask: true
				});
				setTimeout(() => {
					uni.showToast({
						title: '更换成功',
						icon: 'success'
					});
				}, 1000);
				setTimeout(() => {
					// 提交成功后跳转列表页
					uni.hideLoading();
					this.goBack();
				}, 2500);




			},
			goBack() {
				uni.redirectTo({
					url: '/pages/my/settingIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	}

	/* 表单容器 */
	.form-container {
		/* padding: 60rpx 30rpx; */
	}

	/* 输入框组（手机号+验证码行） */
	.input-group {
		display: flex;
		align-items: center;
		height: 88rpx;
		/* border: 1rpx solid #dcdcdc; */
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	}

	.iconStyle {
		width:50rpx;
		height: 50rpx;
	}

	.phone-input .input-item {
		flex: 1;
		height: 100%;
		line-height: 88rpx;
		border: none;
		padding-left: 20rpx;
	}

	/* 验证码输入框 */
	.code-input .code-item {
		flex: 1;
		height: 100%;
		line-height: 88rpx;
		border: none;
		font-size: 30rpx;
	}

	.code-btn {
		font-size: 24rpx;
		color: #fff;
		background: #2F77FD;
		border: none;
		padding: 0;
		line-height: 88rpx;
		width: 100px;
	}

	.code-btn[disabled] {
		color: #999;
	}

	/* 通用输入框样式 */
	.input-item {
		font-size: 30rpx;
		color: #333;
		background-color: #fff;
		padding-left: 20rpx;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 确定按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		border: none;
		margin-top: 20rpx;
	}


	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>