web-app-v1/pages/change-phone/change-phone.vue

<template>
	<view class="change-phone">
		<view class="content">
			<view class="form">
				<navigator url="../phone-area/phone-area" class="phone-area">
					<text class="text">国家/地区</text>
					<text class="area">{{ areaName }}（{{ areaCode }}）</text>
					<text class="icon cuIcon-right"></text>
				</navigator>
				<view class="item">
					<text class="icon cuIcon-mobilefill"></text>
					<input maxlength="11" type="number" v-model="phone" placeholder="请输入要换绑的手机号" />
					<text v-if="phone" class="cuIcon-roundclosefill" @tap="phone=''"></text>
				</view>
				<view class="item">
					<text class="icon cuIcon-markfill"></text>
					<input maxlength="6" type="number" v-model="verifycode" placeholder="请输入6位验证码" />
					<text v-if="verifycode" class="cuIcon-roundclosefill" @tap="clearVerify"></text>
					<view class="countdown" @tap="getCode">
						发送验证码 <text v-if="countDown">{{ ' ' + countDown }}</text>
					</view>
				</view>
			</view>
			<button class="big-btn bg" @tap="submit">立即换绑</button>
		</view>
	</view>
</template>

<script>
	import {
		_API_ChangeBindCode,
		_API_ChangeBindPhone
	} from '@/apis/verify.js'
	export default {
		data() {
			return {
				areaName: '中国大陆', // 手机号地区名称
				areaCode: '+86', // 手机号地区代码
				phone: '', // 手机号
				verifycode: '', // 验证码
				countDown: 0, // 倒计时
			};
		},
		created() {
			uni.$on('CHOOSEPHONECODE', (name, code) => { // 监听 chooseArea 事件更新
				this.areaName = name // 修改选择的手机号地区名称
				this.areaCode = code // 修改选择的手机号地区代码
			})
		},
		methods: {
			getCode() { // 点击获取手机验证码
				if (this.phone.length) { // 手机号是否输入
					if (this.countDown) { // 如果正在倒计时
						uni.toast('验证码已发送,请稍后重试')
					} else {
						uni.showLoading({
							mask: true
						}) // 显示 loading
						_API_ChangeBindCode({
							mobile: this.phone,
							code: this.areaCode
						}).then(res => {
							if (res.code == 200) {
								uni.toast('验证码发送成功') // 提示邀请码发送成功
								this.countDown = 120 // 倒计时时长
								this.timer = setInterval(() => { // 开始倒计时
									this.countDown--
									if (this.countDown <= 0) { // 倒计时结束清除倒计时
										this.countDown = 0
										clearInterval(this.timer)
									}
								}, 1000)
							} else { // code 300 表示禁止获取验证码，禁止登录
								uni.toast(res.message)
							}
						})
					}
				} else {
					uni.toast('手机号格式不正确，请重新输入')
				}
			},
			submit() { // 立即换绑
				if (!(this.verifycode.length == 6)) {
					uni.toast('验证码格式不正确，请重新输入');
					return
				}
				uni.showLoading({
					mask: true
				}) // 显示 loading
				_API_ChangeBindPhone({
					mobile: this.phone,
					verify_code: this.verifycode,
					code: this.areaCode
				}).then(res => {
					if (res.code == 200) {
						this.$store.commit('app/LOGOUT')
						uni.reLaunch({
							url: '../login-reg/login-reg'
						})
					} else {
						uni.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.change-phone {
		@include page();

		.content {
			.form {
				padding: 30rpx;
				margin-top: 10rpx;
				box-sizing: border-box;
				background-color: #FFFFFF;

				.phone-area {
					@include flex();
					justify-content: space-between;

					.text {
						font-size: 32rpx;
					}

					.area {
						color: #42b983;
					}

				}

				.item {
					@include flex();
					height: 110rpx;
					padding-top: 20rpx;
					box-sizing: border-box;
					color: $app-sec-text-color;
					border-bottom: 1rpx solid #B2B2B2;

					.icon,
					.cuIcon-roundclosefill {
						margin: 0 20rpx;
						font-size: 36rpx;
					}

					input {
						flex: 1;
						height: 84rpx;
						margin-left: 15rpx;
					}

					.countdown {
						@include flex();
						height: 50rpx;
						font-size: 24rpx;
						padding: 0 20rpx;
						background: #FFEFF0;
						margin-right: 20rpx;
						border-radius: 33rpx;
						color: $app-base-color;

						text {
							margin-left: 8rpx;
						}
					}
				}
			}
		}
	}
</style>