uniProject/pages/my/bindDialog.vue

<template>
	<view class="my-tel-dialog">
		<view class="my-tel-content">
			<view class="tel-close" @click="telClose"></view>
			<view class="yzm-row">
				<view class="my-tel-title">绑定新手机号</view>
				<view class="yzm-tip" v-if="bindObj.getYzmFlag">验证码已发送至：{{bindObj.telNumber}}</view>
				<view class="my-input-box">
					<input class="my-input" type="text" v-model="bindObj.yzmNumber" placeholder="请输入验证码" maxlength="6"
						@input="changeYzmInput" />
					<view class="close-btn" v-if="bindObj.clearYzmIcon" @click="clearYzm"></view>
				</view>
				<view @click="bindBtn" class="my-bind-btn">绑定</view>
			</view>

		</view>
	</view>
</template>
<script>
	import captcha from "../../components/captcha4/index.vue";
	import cacheManager from '@/utils/cacheManager.js';
	import {
		telBind,
		sendCode
	} from "@/api/login.js"
	import {
		toast
	} from "../../utils/common";
	export default {
		data() {
			return {
				bindObj: {
					telNumber: '',
					yzmNumber: '',
					clearYzmIcon: false,
					/*** 验证码 ***/
					yzmStatus: 'login-btn-disabled',
					timeLeft: 60, // 初始倒计时时间（秒）
					intervalId: null, // 定时器ID
				},
			}
		},
		methods: {
			telClose() {
				this.$emit('telClose')
			},
			

			// 清空验证码
			clearYzm() {
				this.bindObj.yzmNumber = '';
				this.bindObj.clearYzmIcon = false;
			},

			// 判断是否显示验证码的清除按钮
			changeYzmInput(event) {
				if (event.detail.value.length > 0) {
					this.bindObj.clearYzmIcon = true;
				} else {
					this.bindObj.clearYzmIcon = false;
				}
			},

			// 绑定按钮
			bindBtn() {
				if (this.bindObj.yzmNumber === '') {
					toast('验证码不能为空')
					return;
				}

				let req = {
					tel: this.bindObj.telNumber,
					code: this.bindObj.yzmNumber,
				}
				telBind(req).then(res => {
					if (res.code == 0) {
						toast('手机号绑定成功')
						this.updataTel(this.bindObj.telNumber);
						this.telReset();
						this.$emit('bindBtn')
					}
				})
			},

			// 在缓存中修改手机号
			updataTel(data) {
				cacheManager.updateObject('auth', {
					userName: data
				})
			}
		}
	}
</script>