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

<template>
	<view class="container register">
		<view class="register-main first clearfix">
			<view class="register-row clearfix">
				<view class="register-from">
					<input
						class="row-input"
						type="number"
						v-model="params.mobile"
						placeholder="请输入原手机号"
						@input="handleInput"
						placeholder-class="place-holder"
						maxlength="11"
						disabled="true"
					/>
				</view>
			</view>
			<view class="register-row clearfix">
				<view class="register-from code">
					<input
						class="row-input"
						type="number"
						v-model="params.smsCode"
						placeholder="请输入原手机号验证码"
						placeholder-class="place-holder"
						maxlength="6"
					/>
				</view>
				<view class="register-from btn" :class="{ disabled: disabled1, disabled: isMobileDisabled }">
					<button
						class="row-input"
						type="button"
						@click.stop="getNewMobileCodeFn(1)"
						:disabled="isMobileDisabled"
					>
						{{ mobileCodeText }}
					</button>
				</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: disabled2, disabled: isNewMobileDisabled }">
					<button
						class="row-input"
						type="button"
						@click.stop="getNewMobileCodeFn(2)"
						: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 class="register-btn-text"> 注意：本操作更换的是机构联系人的手机号，不是运营人员的手机号。 </view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex'
var self
export default {
	data() {
		return {
			newCount: '', //倒计时
			codeTimeNew: null,
			newMobileCodeText: '获取验证码',
			isNewMobileDisabled: true, //手机验证码按钮控制
			count: '', //倒计时
			codeTime: null,
			mobileCodeText: '获取验证码',
			isMobileDisabled: false, //手机验证码按钮控制
			params: {
				mobile: '', //旧手机号
				newMobile: '', //新联系人手机号
				smsCode: '', //原手机号验证码
				newSmsCode: '', //新手机号手机验证码
				userId: 0
			},
			codeParams:{
				mobile: '',
				isCheckCaptcha: 1,
				activateCodeType: 11,
				platformType: 0
			}
		}
	},
	computed: {
		disabled1() {
			return !this.params.mobile.length === 11
		},
		disabled2() {
			return !this.params.newMobile.length === 11
		},
		disabled() {
			return !(this.params.mobile && this.params.smsCode && 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
			}
		},
		// 确认更换
		async btnConfirm() {
			const use = await this.$api.getStorage()
			this.params.userId = use.userId
			if (!this.$reg.isMobile(this.params.newMobile)) {
				this.$util.msg('新手机号格式不正确', 2000)
				return
			}
			try {
				const res = await this.UserService.UserUpdateMobile(this.params)
				this.$util.msg(res.msg, 1500, true, 'success')
				setTimeout(() => {
					uni.navigateBack({ delta: 2 })
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		getNewMobileCodeFn(type) {
			if (type === 1) {
				//旧手机号验证码
				this.codeParams.mobile =this.params.mobile
				this.codeParams.activateCodeType =11
				this.getMobileCode(this.codeParams)
			} else {
				if (!this.$reg.isMobile(this.params.newMobile)) {
					this.$util.msg('请输入正确的新手机号', 2000)
					return
				}
				this.codeParams.mobile =this.params.newMobile
				this.codeParams.activateCodeType =12
				this.getNewMobileCode(this.codeParams)
			}
		},
		//获取就手机号验证码
		async getMobileCode(params) {
			try {
				const TIME_COUNT = 60
				this.isMobileDisabled = true
				const res = await this.PublicService.GetRegisterMobileCode(params)
				this.$util.msg(res.data, 2000)
				if (!this.codeTime) {
					this.count = TIME_COUNT
					this.isMobileDisabled = true
					this.codeTime = setInterval(() => {
						if (this.count > 1 && this.count <= TIME_COUNT) {
							this.count--
							this.mobileCodeText = this.count + 's重新发送'
						} else {
							this.isMobileDisabled = false
							clearInterval(this.codeTime)
							this.codeTime = null
							this.mobileCodeText = '获取验证码'
						}
					}, 1000)
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
				this.isMobileDisabled = false
			}
		},
		//获取新手机号短信
		async getNewMobileCode(params) {
			try {
				const TIME_COUNT = 60
				this.isNewMobileDisabled = true
				const res = await this.PublicService.GetRegisterMobileCode(params)
				this.$util.msg(res.data, 2000)
				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 (error) {
				this.$util.msg(error.msg, 2000)
				this.isNewMobileDisabled = false
			}
		}
	},
	onShow() {
		
	}
}
</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-btn-text {
			width: 500rpx;
			height: auto;
			font-size: $font-size-24;
			line-height: 44rpx;
			color: #f85050;
			margin: 40rpx auto;
			text-align: justify;
		}
	}
}
.register-text {
	width: 506rpx;
	color: #fea785;
	font-size: 22rpx;
	line-height: 32rpx;
	margin: 30rpx auto;
	text-align: center;
}
.place-holder {
	color: #b2b2b2;
}
</style>