ParkApp/pages/mine/editPhone/editPhone.vue

<template>
	<view class="page">
		<view class="flex justify-center text-df padding-50">
			完成短信验证进行换绑手机号
		</view>
		<view class="bg-white padding-left-40 padding-right-20">
			<u-form   ref="uForm" >
				<u-form-item   label="原手机号"  :label-width="labelWidth">
					<u-input   v-model="phone" disabled type="number"></u-input>
				</u-form-item>
				<u-form-item  label="验证码"  :label-width="labelWidth">
					<u-input  placeholder="请输入验证码" v-model="code" type="text"></u-input>
					<view  :style="showText?'':'background-color: #A7A7A7;'"  @click="getCode" slot="right" class="cu-btn round sm base-bg-color">
						{{codeTips}}
					</view>
				</u-form-item>
				<u-form-item   label="新手机号"  :label-width="labelWidth">
					<u-input  placeholder="请输入新手机号" v-model="newPhone" type="number"></u-input>
				</u-form-item>

			</u-form>
		</view>
		<view @click="submit" class="cu-btn base-bg-color round flex " style="padding: 40rpx;margin: 80rpx 20rpx;">
			换绑手机号
		</view>
		<u-verification-code seconds="60" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			userInfo:{},
			phone:'',
			newPhone:'',
			labelWidth:200,
			code:'',
			codeTips:'',
			showText:true,
		};
	},
	onLoad() {
		//从缓存中获取手机号
		if (this.$isEmpty(this.$cache.get('phone'))) {
			this.$showModel('系统错误',false).then(res=>{
				uni.navigateBack({
					delta:1
				})
				return
			})
		}else{
			this.phone=this.$cache.get('phone')
		}
	},
	onShow() {
		//获取用户信息
		if (this.$isEmpty(getApp().globalData.userInfo)) {
			this.fetchUserInfo()
		}else{
			this.userInfo=getApp().globalData.userInfo
		}
	},
	methods:{
		/**
		 * 获取用户信息
		 */
		fetchUserInfo(){
			this.$api.enterprisestaff.page({phone:this.phone,examine:1}).then(res=>{
				this.userInfo=res.data.records[0]
			})
		},
		/**
		 * 验证码提示
		 * @param {Object} text
		 */
		codeChange(text) {
			this.codeTips = text;
		},
		end() {
			this.showText=true
		},
		start() {
			this.showText=false
		},
		/**
		 * 确定修改
		 */
		async submit(){
			let that=this
			if (this.$isEmpty(this.newPhone)) {
				this.$u.toast("请输入手机号")
				return
			}
			if (!this.$u.test.mobile(this.newPhone)) {
				this.$u.toast("请输入正确的手机号")
				return
			}
			if (!this.code) {
				uni.showToast({ title: '请输入验证码', icon: 'none' });
				return;
			}
			if (this.code.length!=6) {
				this.$u.toast('请输入6位数的验证码')
				return
			}
			let params={
				phone:this.phone,
				code:this.code
			}
			let smsRes=await this.$api.SMSApi.validCode(this.$u.queryParams(params))
			if (smsRes.data!='success') {
				this.$u.toast(smsRes.data)
				return
			}
			this.userInfo.phone=this.newPhone
			this.$api.enterprisestaff.submit(this.userInfo).then(res=>{
				if (res.success) {
					getApp().globalData.userInfo=that.userInfo
					that.$cache.put('phone',that.newPhone)
					that.$showModel('修改成功',false).then(res=>{
						uni.navigateBack({
							delta:1
						})
					})
				}
			})
		},
		/**
		 * 获取验证码
		 */
		async getCode() {
			let that=this
			if (this.$isEmpty(this.phone)) {
				this.$showModel('系统异常',false).then(res=>{
					uni.navigateBack({
						delta:1
					})
				})
				return
			}
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(async () => {
					uni.hideLoading();
					let params=`?phone=${this.phone}`
					this.$api.SMSApi.sendSms(params).then(res=>{
						if (res.data=='获取验证码成功') {
							that.$u.toast('验证码已发送');
						}else{
							that.$refs.uTips.show({
								title: res.data,
								type: 'primary',
								duration: '2500'
							})
						}
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
					}).catch(err=>{
						that.$u.toast('获取验证码失败');
						// 通知验证码组件内部开始倒计时
						that.$refs.uCode.start();
					})
				}, 2300);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
	}
};
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
		min-height: 100vh;
	}
</style>