deming/pageE/mine/UpdatePhone.vue

<template>
	<view class="update-phone">
		<view class="update-main">
			<view class="old-phone">
				<view class="phone-number">
					<view class="title">原手机号</view>
					<input type="text" v-model="oldMobile" placeholder="请输入手机号码" />
				</view>
				<view class="code">
					<view class="title">验证码</view>
					<input type="text" v-model="oldCode" placeholder="请输入验证码" />
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uOldCode" @change="oldCodeChange" unique-key="old" change-text="x秒"></u-verification-code>
					<view class="get-code" @click="getCode(0)">{{ btnText[0] }}</view>
				</view>
			</view>
			<view class="new-phone">
				<view class="phone-number">
					<view class="title">新手机号</view>
					<input type="text" v-model="newMobile" placeholder="请输入手机号码" />
				</view>
				<view class="code">
					<view class="title">验证码</view>
					<input type="text" v-model="newCode" placeholder="请输入验证码" />
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uNewCode" @change="newCodeChange" unique-key="new" change-text="x秒"></u-verification-code>
					<view class="get-code" @click="getCode(1)">{{ btnText[1] }}</view>
				</view>
				<u-toast ref="uToast" />
			</view>
		</view>
		<view class="tips">注意：修改手机号需要原手机号获取验证码，无原手机验证码，请联系客服</view>
		<view class="btn" @click="changeMemberPhone">保存</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			oldMobile: '',
			oldCode: '',
			newMobile: '',
			newCode: '',
			btnText: ['获取验证码', '获取验证码'],
			seconds: 60, // 获取验证码间隔时间
		}
	},
	methods: {
		// 验证发送验证码
		verifySendCode(type) {
			const [phone, tips] = type == 0 
					? [this.oldMobile, '请填写正确的原手机号'] 
					: [this.newMobile, '请填写正确的新手机号'];
			if (!this.$u.test.mobile(phone)) {
				this.$u.toast(tips);
				return false;
			}
			return true;
		},
		// 验证修改绑定手机号
		verifyChangeMobile() {
			if(!this.$u.test.mobile(oldMobile)) {
				this.$u.toast('请填写正确的原手机号');
				return false;
			}
			if(this.$u.test.isEmpty(oldCode)) {
				this.$u.toast('验证码为空');
				return false;
			}
			if(!this.$u.test.mobile(newMobile)) {
				this.$u.toast('请填写正确的新手机号');
				return false;
			}
			if(this.$u.test.isEmpty(newCode)) {
				this.$u.toast('验证码为空');
				return false;
			}
			return true;
		},
		oldCodeChange(text) {
			this.$set(this.btnText, 0, text);
		},
		newCodeChange(text) {
			this.$set(this.btnText, 1, text);
		},
		// @param Number type 0: 原手机号 1: 新手机号
		async getSmsCode (type) {
			if(!this.verifySendCode(type)) return false;
			return await this.$u.api.sendSmsCode({
				member_mobile: type == 0 ? this.oldMobile: this.newMobile,
				smslog_type: 4 // 类型[1:注册,2:登录,3:找回密码,4:绑定手机]
			})
		},
		getCode(type) {
			const refs = type == 0 ? this.$refs.uOldCode : this.$refs.uNewCode;
			if(refs.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.getSmsCode(type).then(res => {
					uni.hideLoading();
					if(res.errCode == 0) {
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast(res.message);
						// 通知验证码组件内部开始倒计时
						refs.start();
					}
				}).catch(() => {
					uni.hideLoading();
					this.$u.toast('验证码发送错误');
				})
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		changeMemberPhone() {
			if(!this.verifyChangeMobile) return false;
			this.$u.api.changeMemberPhone({
				old_mobile: this.oldMobile,
				old_code: this.oldCode,
				new_mobile: this.newMobile,
				new_code: this.newCode,
			}).then(res => {
				if(res.errCode == 0) {
					
				}
			})
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		}
	},
};
</script>
<style lang="scss" scoped>
.update-phone {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.update-main {
		@mixin update-General() {
			> view {
				display: flex;
				align-items: center;
				padding: 35rpx 30rpx;
				background-color: #ffffff;
				.title {
					width: 156rpx;
					font-size: 28rpx;
					color: rgba(51,51,51,1);
				}
				.input {
					width: 340rpx;
					font-size: 26rpx;
				}
				.get-code {
					flex: 1;
					font-size: 28rpx;
					color: rgba(153,153,153,1);
					position: relative;
					padding: 0 25rpx;
					margin-left: 20rpx;
					text-align: center;
					&::after {
						position: absolute;
						content: "";
						width: 2rpx;
						height: 43rpx;
						background: rgba(242,242,242,1);
						left: 0;
						top: 50%;
						transform: translate(0, -50%);
					}
				}
			}
			.code {
				display: flex;
				align-items: center;
				.title {
					font-size: 28rpx;
					color: rgba(51,51,51,1);
				}
			}
		}
		.old-phone {
			@include update-General()
		}
		.new-phone {
			@include update-General()
		}
	}
	.tips {
		padding: 20rpx 30rpx;
		font-size: 24rpx;
		color: rgba(102,102,102,1);
		line-height: 40rpx;
	}
	.btn {
		margin: 120rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
	}
}
</style>