caimei-applets-mcare/pages/user/setting/phone.vue

<template>
	<view class="container register">
		<view class="register-main first clearfix">
			<view class="register-row none clearfix">
				<view class="register-from">
					<view class="label">当前手机号:</view> <view class="row-input">{{ params.mobile }}</view>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from">
					<input
						class="row-input"
						type="number"
						v-model="params.newMobile"
						placeholder="请输入新手机号"
						@input="handleInput"
						placeholder-class="place-holder"
						maxlength="11"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from code">
					<input
						class="row-input"
						type="number"
						v-model="params.newSmsCode"
						placeholder="请输入验证码"
						placeholder-class="place-holder"
						maxlength="6"
					/>
				</view>
				<view class="register-from btn" :class="{ 'disabled' : disabled1 , 'disabled' : isNewMobileDisabled}">
					<button
						class="row-input"
						type="button"
						@click.stop="getNewMobileCodeFn"
						:disabled="isNewMobileDisabled"
					>
						{{ newMobileCodeText }}
					</button>
				</view>
			</view>
			<view class="register-row clearfix" style="border: 0;">
				<button class="register-btn" :disabled="disabled" :class="disabled ? 'disabled' : ''" @click="btnConfirm">
					确定
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex'
var self
export default {
	data() {
		return {
			newCount: '', //倒计时
			codeTimeNew: null,
			newMobileCodeText: '获取验证码',
			isNewMobileDisabled: true, //手机验证码按钮控制
			params: {
				newMobile: '', //新联系人手机号
				newSmsCode: '', //新手机号手机验证码
				userId: 0
			}
		}
	},
	computed: {
		disabled1(){
			return !this.params.newMobile.length === 11
		},
		disabled() {
			return !(this.params.newMobile != '' && this.params.newSmsCode != '')
		}
	},
	onLoad(option) {
		this.params.mobile = option.phone
	},
	methods: {
		// 监听输入手机号
		handleInput(e){
			this.params.newMobile = e.detail.value
			if(this.params.newMobile.length === 11){
				this.isNewMobileDisabled  = false
			}
		},
		// 确认更换
		btnConfirm() {
			if (this.params.newMobile == '') {
				this.$util.msg('请输入新的手机号码', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.newMobile)) {
				this.$util.msg('请输入正确的手机号码', 2000)
				return
			}
			if (this.params.newSmsCode == '') {
				this.$util.msg('请输入新手机验证码', 2000)
				return
			}
			if (!this.$reg.isMobileCode(this.params.newSmsCode)) {
				this.$util.msg('新手机验证码格式不正确', 2000)
				return
			}
			this.UserService.UserUpdateMobile(this.params)
				.then(response => {
					this.$util.msg('修改成功', 1500, true, 'success')
					setTimeout(() => {
						uni.navigateBack({ delta: 1 })
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		getNewMobileCodeFn() {
			if (this.params.newMobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.newMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			let params =  {
				mobile: this.params.newMobile,
				isCheckCaptcha: 1,
				activateCodeType: 11,
				platformType: 0
			}
			this.getMobileCode(params)
		},
		//获取短信
		async getMobileCode(params) {
			this.isNewMobileDisabled = true
			try {
				const res = this.PublicService.GetRegisterMobileCode(params)
				this.$util.msg('验证短信已发送', 2000)
				const TIME_COUNT = 60
				if (!this.codeTimeNew) {
					this.newCount = TIME_COUNT
					this.isNewMobileDisabled = true
					this.codeTimeNew = setInterval(() => {
						if (this.newCount > 1 && this.newCount <= TIME_COUNT) {
							this.newCount--
							this.newMobileCodeText = this.newCount + 's重新发送'
						} else {
							this.isNewMobileDisabled = false
							clearInterval(this.codeTimeNew)
							this.codeTimeNew = null
							this.newMobileCodeText = '获取验证码'
						}
					}, 1000)
				}
			} catch (e) {
				//TODO handle the exception
				this.$util.msg(error.msg, 2000)
				this.isNewMobileDisabled = false
			}
		}
	},
	onShow() {
		this.$api.getStorage().then(resolve => {
			this.params.userId = resolve.userId ? resolve.userId : 0
		})
	}
}
</script>

<style lang="scss">
.register {
	width: 100%;
	height: auto;
	border-top: 1px solid #f7f7f7;
	.model-warp.none {
		display: none;
	}
	.model-warp.show {
		display: block;
	}
	.register-main {
		width: 100%;
		height: auto;
		&.detailed {
			padding-bottom: 300rpx;
		}
		&.first {
			padding-top: 40rpx;
		}
		.register-tips {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 44rpx;
			font-size: $font-size-24;
			color: #ff0000;
			margin-bottom: 40rpx;
			.iconfont {
				font-size: $font-size-24;
			}
		}
		.register-row {
			width: 702rpx;
			height: auto;
			margin: auto;
			// margin-bottom: 20rpx;
			border-bottom: 2rpx solid #e1e1e1;
			&.none{
				border-bottom: none;
			}
			.register-title {
				line-height: 60rpx;
				font-size: $font-size-32;
				color: $text-color;
				text-align: left;
				padding-left: 20rpx;
				.txt {
					font-size: $font-size-26;
					font-weight: normal;
				}
			}
			.row-btn {
				position: absolute;
				right: 24rpx;
				top: 0;
				line-height: 88rpx;
				text-align: center;
				font-size: $font-size-28;
				color: $color-system;
			}
			.register-from {
				width: 702rpx;
				height: 64rpx;
				padding: 24rpx 0;
				position: relative;
				.label {
					text-align: left;
					font-size: $font-size-28;
					color: #666666;
					line-height: 64rpx;
					float: left;
				}
				.row-input {
					width: 440rpx;
					padding-left: 10rpx;
					font-size: $font-size-28;
					color: $text-color;
					line-height: 64rpx;
					float: left;
					height: 64rpx;
					&.none {
						color: #999999;
					}
				}
				&.code {
					width: 410rpx;
					float: left;
					margin-right: 20rpx;
					.row-input {
						width: 390rpx;
					}
				}
				&.btn {
					width: 180rpx;
					height: 64rpx;
					float: right;
					padding: 0;
					border-radius: 32rpx;
					background: $btn-confirm;
					.row-input {
						width: 180rpx;
						height: 64rpx;
						line-height: 64rpx;
						padding: 0;
						background: $btn-confirm;
						color: #ffffff;
						text-align: center;
						border-radius: 45rpx;
						font-size: $font-size-24;
						&.none {
							background: #f7f7f7;
						}
					}
					&.disabled {
						background: #f7f7f7;
						.row-input {
							background: #f7f7f7;
							color: #999999;
						}
					}
				}
				&.btn {
					margin-top: 20rpx;
				}
			}
		}
		.register-btn {
			width: 600rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #ffffff;
			margin: 0 auto;
			text-align: center;
			background: $btn-confirm;
			margin-top: 100rpx;
			&.disabled {
				background: #e2e2e2;
			}
		}
	}
}
.register-text {
	width: 506rpx;
	color: #fea785;
	font-size: 22rpx;
	line-height: 32rpx;
	margin: 30rpx auto;
	text-align: center;
}
.place-holder {
	color: #b2b2b2;
}
</style>