WenWuGuanJia/answer_pages/user/changePhone.vue

<template>
	<view class="wrap">
		<view class="main">
			<view class="user-info">
				<view class="b-item">
					<view class="s-tit">旧手机号</view>
					<text class="s-input">{{ form.oldPhone }}</text>
				</view>
				<template v-if="loginMethods.indexOf('phone_captcha') !== -1">
					<view class="b-item">
						<view class="s-tit">新手机号</view>
						<input class="s-input" :value="form.newPhone" minlength="11" maxlength="11" @input="onInput" data-field="newPhone" placeholder="请输入新手机号" />
					</view>
					<view class="b-item">
						<view class="s-tit">验证码</view>
						<input class="s-input" :value="form.newCaptcha" maxlength="12" @input="onInput" data-field="newCaptcha" placeholder="请输入验证码" />
						<view class="s-captcha" :class="{ disable: captcha.second > 0 }" @click="onPhoneCaptcha">
							<text v-if="!captcha.retry && !captcha.second">获取验证码</text>
							<text v-else-if="captcha.second > 0">重新获取 {{ captcha.second }}秒</text>
							<text v-else-if="captcha.retry">重新获取</text>
						</view>
					</view>
				</template>
			</view>
			<template v-if="loginMethods.indexOf('phone_captcha') !== -1">
				<view class="btn-save" :class="{ disable: disable.submit }" @click="onSave">保存修改</view>
			</template>
			<!-- #ifdef  MP-WEIXIN -->
			<button class="btn-save f-wechat open-data-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" v-if="loginMethods.indexOf('wechat_phone') !== -1">
				授权微信手机号
			</button>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
import { getUserInfo, sendPhoneCaptcha, changePhone, changeWechatPhone } from '@/service/api/user.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '@/mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			form: {
				oldPhone: '',
				newPhone: '',
				newCaptcha: ''
			},
			disable: {
				submit: false
			},
			captcha: {
				retry: false,
				second: 0
			}
		};
	},
	onLoad() {
		getUserInfo().then(([err, res]) => {
			console.log('getUserInfo', err, res);
			if (!err) {
				this.form.oldPhone = res.phone;
			}
		});
	},
	computed: {
		loginMethods() {
			return this.$store.getters.globalConfig.login_methods || [];
		}
	},
	methods: {
		onInput(e) {
			console.log('onInput', e);
			const field = e.target.dataset.field;
			this.form[field] = e.detail.value;
		},
		onPhoneCaptcha() {
			if (this.disable.captcha) {
				return;
			}
			if (!this.form.newPhone) {
				return this.$logic.showToast('新手机号不能为空');
			}
			if (this.form.newPhone.length != 11) {
				return this.$logic.showToast('新手机号长度必须为11位');
			}
			if (this.form.newPhone == this.form.oldPhone) {
				return this.$logic.showToast('未修改手机号');
			}
			this.disable.captcha = true;
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				sendPhoneCaptcha(this.form.newPhone, res ? res.code : '', false).then(([err, res]) => {
					console.log('sendPhoneCaptcha', err, res);
					if (!err) {
						uni.showToast({
							title: '发送成功'
						});

						// 验证码倒计时
						this.captcha.second = 60;
						var interval = setInterval(() => {
							this.captcha.second--;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.captcha.retry = true;
							this.captcha.second = 0;
							this.disable.captcha = false;
						}, this.captcha.second * 1000);
					} else {
						this.disable.captcha = false;
					}
				});
			});
		},
		onSave() {
			if (this.disable.submit) {
				return;
			}
			if (!this.form.newPhone) {
				return this.$logic.showToast('新手机号不能为空');
			}
			if (this.form.newPhone.length != 11) {
				return this.$logic.showToast('新手机号长度必须为11位');
			}
			if (this.form.newPhone == this.form.oldPhone) {
				return this.$logic.showToast('未修改手机号');
			}
			if (!this.form.newCaptcha) {
				return this.$logic.showToast('验证码不能为空');
			}
			this.disable.submit = true;
			changePhone(this.form.newPhone, this.form.newCaptcha).then(([err, res]) => {
				console.log('changePhone', err, res);
				this.disable.submit = false;
				if (!err) {
					this.$logic.showToast('修改成功').then(([err, res]) => {
						uni.reLaunch({
							url: '/answer_pages/user/mine'
						});
					});
				}
			});
		},
		onGetPhoneNumber(e) {
			console.log('onGetPhoneNumber', e);
			if (e.detail.errMsg.indexOf(':ok') === -1) {
				// fail user deny
				this.$logic.showToast(e.detail.errMsg.replace('getPhoneNumber:', ''));
				return;
			}
			uni.showLoading({
				title: '修改手机号中'
			});
			uni.login().then(([err, res]) => {
				console.log('uni.login', err, res);
				changeWechatPhone(e.detail.encryptedData, e.detail.iv, e.detail.code || '', res ? res.code : '').then(([err, res]) => {
					console.log('changeWechatPhone', err, res);
					uni.hideLoading();
					if (!err) {
						this.$logic.showToast('修改成功').then(([err, res]) => {
							uni.reLaunch({
								url: '/answer_pages/user/mine'
							});
						});
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: env(safe-area-inset-bottom);
	background: $pq-bg-color;
}

.wrap {
	padding: 0 40upx;
}

.user-info {
	margin-top: 40upx;
	background: #fff;
	border-radius: 20upx;

	.b-item {
		padding: 0 40upx;
		border-bottom: 1upx solid $pq-bg-color;
		height: 100upx;
		display: flex;
		align-items: center;
		position: relative;

		.s-tit {
			color: #000000;
			font-size: 26upx;
		}

		.s-input {
			flex: 1;
			color: #808080;
			text-align: right;
			font-size: 26upx;
		}

		.s-captcha {
			margin-left: 20upx;
			padding: 0 30upx;
			background: #fff;
			border: 2upx #ccc solid;
			height: 64upx;
			line-height: 64upx;
			border-radius: 32upx;
			color: #808080;
			font-size: 24upx;

			&.disable {
				color: #999;
			}
		}
	}
}

.btn-save {
	margin-top: 50upx;
	height: 100upx;
	line-height: 100upx;
	text-align: center;
	color: #fff;
	font-size: 32upx;
	background: #da5650;
	border-radius: 50upx;
	letter-spacing: 10upx;

	&.f-wechat {
		background: #35c773;
	}
}
</style>