xiongmao/pages/my/change-bind-mobile-phone-number/change-bind-mobile-phone-number.vue

<!-- 更换绑定手机号 -->
<template>
	<view class="wrap">
		<view class="head-msg">
			更换绑定后可使用新手机号登录
		</view>
		<view class="padding-box">
			<view class="module">
				<view class="row-between">
					<input type="text" v-model="params.phone" class="input" placeholder="请输入新绑定的手机号" placeholder-class="placeholder" />
				</view>
				<view class="row-between">
					<input type="text" v-model="params.code" class="input" placeholder="请输入验证码" placeholder-class="placeholder" />
					<button v-if="countDown <= 0" @tap="sendSms()" type="default" class="send-code">发送验证码</button>
					<button v-else type="default" class="send-code">{{countDown}}秒后重发</button>
					<!-- 60s后重新发送 -->
				</view>
			</view>
			<view class="btn-box">
				<button type="default" @tap="modifyPhone()" class="active">确认</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { generalSendSms, userCenterModifyPhone } from '../../../common/service.js';
	import { validatorFun } from '../../../common/utils/util.js';
	export default {
		data() {
			return {
				info: {},
				params: {
					phone: '',
					code: '',
				},
				countDown: 0,
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('USER_INFO') || {};
			this.info.showPhone = this.info.phone.split('').map((n, i) => i > 2 && i < 7 ? '*' : n).join('');
		},
		methods: {
			modifyPhone() {
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
					['code', ['notNull', '请输入验证码']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userCenterModifyPhone({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.info.phone = params.phone;
							uni.setStorageSync('USER_INFO', info);
							this.params = {
								phone: '',
								code: '',
							};
							uni.showModal({
								title: '提示',
								content: '修改成功，请重新登录',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.removeStorageSync('session_key');
										uni.removeStorageSync('USER_INFO');
										uni.reLaunch({
											url: '/pages/index/index',
										});
									}
								}
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					},
				});
			},
			sendSms() {
				const params = this.params;
				const errList = validatorFun(params, [
					['phone', ['notNull', '请输入手机号'], ['isMobile', '请输入正确手机号']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				generalSendSms({
					data: {
						phone: params.phone,
					},
					success: ({code, msg, data}) => {
						if (code == 1) {
							this.countDownFn();
						}
						uni.showToast({
							icon: 'none',
							title: msg,
						});
					},
				});
			},
			countDownFn() {
				let num = 60;
				const fn = () => {
					if (num == 0) return;
					this.countDown = --num;
					setTimeout(() => fn(), 1000);
				};
				fn();
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./change-bind-mobile-phone-number.css";
</style>