hire-wx-houxuanren/pagesD/change-tel.vue

<template>
	<view class="change-tel">
		<u-navbar back-icon-color="#000" :border-bottom="false"></u-navbar>
		<view class="change-header u-flex-col">
			<text>修改手机号</text>
			<text>当前手机号：{{mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</text>
		</view>
		<view class="change-new-item u-flex">
			<text class="text1">+86</text>
			<u-icon name="arrow-down-fill" size="12" color="rgba(0, 0, 0, 0.3)"></u-icon>
			<input class="input1" type="number" placeholder="请输入新的手机号" v-model="tel">
		</view>
		<view class="change-new-item u-flex">
			<input class="input2" type="number" placeholder="请输入短信验证码" v-model="code">
			<!-- <text class="text2" @click="getCode">{{tips}}</text> -->
			<view class="input-box u-flex u-row-between">
				<text class="send" @click="getCode" v-if="!timeEnd && !verificationTime ">获取验证码</text>
				<text class="send" v-else-if="verificationTime">{{verificationTime}}s</text>
				<text class="send" @click="getCode" v-else-if="timeEnd">重新获取验证码</text>
			</view>
		</view>
		<view class="change-btn" @click="save">
			保存
		</view>
		<!-- <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code> -->
	</view>
</template>

<script>
	import {
		index,
		getCode,
		changemobile
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				mobile: '',
				tel: '',
				code: '',
				tips: '',
				verificationTime: "",
				timeEnd:false
			}
		},
		onLoad() {
			this.getuser()
		},
		methods: {
			save() {
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				if (!this.code) {
					this.$u.toast("请输入验证码")
					return
				}
				uni.showLoading({
					mask: true,
					title: '请稍后'
				})
				changemobile({
					mobile: this.tel,
					captcha: this.code
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast("修改成功");
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			getCode() {
				if (!this.$u.test.mobile(this.tel)) {
					this.$u.toast("请输入正确的手机号")
					return
				}
				//获取验证码接口
				getCode({
					mobile: this.tel,
					event: 'changemobile'
				}).then(res => {
					// this.getcode = false
					if (res.code == 1) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						// this.$refs.uCode.start();
						this.verificationTime = 30
						this.verificationDown()
					} else {
						this.$u.toast(res.msg)
					}
				})
				if (true) {
					// 模拟向后端请求验证码
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//验证码倒计时
			verificationDown() {
				// 设置定时器
				this.timer = setInterval(() => {
					this.verificationTime = this.verificationTime - 1
					if (this.verificationTime < 10) this.verificationTime = '0' + this.verificationTime
					if (this.verificationTime <= 0) {
						// 清除定时器
						clearInterval(this.timer)
						this.timeEnd = true
						this.verificationTime = false
					}
				}, 1000)
			},
			// getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		if (!this.$u.test.mobile(this.tel)) {
			// 			this.$u.toast("请输入正确的手机号")
			// 			return
			// 		}
			// 		uni.showLoading({
			// 			mask: true,
			// 			title: '正在获取验证码'
			// 		})
			// 		this.$u.post('/api/sms/send', {
			// 			mobile: this.tel,
			// 			event: 'changemobile'
			// 		}).then(res => {
			// 			this.$u.toast(res.msg);
			// 			if (res.code == 1) {
			// 				// 通知验证码组件内部开始倒计时
			// 				this.$refs.uCode.start();
			// 			}
			// 		})
			// 	} else {
			// 		this.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			getuser() {
				index().then(res => {
					this.mobile = res.data.mobile
				})
			},
		}
	}
</script>

<style lang="scss">
	.send {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C66C2;
	}
	.change-tel {
		.change-btn {
			margin: 68rpx auto;
			width: 686rpx;
			line-height: 92rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.change-new-item {
			height: 120rpx;
			border-bottom: 2rpx solid #F0F0F0;
			margin: 0 32rpx;

			.input2 {
				flex: 1;
				font-size: 36rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
				width: 170rpx;
				text-align: center;
			}

			.text1 {
				font-size: 36rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #222222;
				margin-right: 8rpx;
			}

			.input1 {
				margin-left: 20rpx;
				flex: 1;
				font-size: 36rpx;
			}
		}

		.change-header {
			padding: 58rpx 32rpx;

			text:first-child {
				margin-bottom: 14rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			text:last-child {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}
		}
	}
</style>