reservation-uniapp-250509/service-uniapp-client/pages/mine/phoneDetail.vue

<template>
	<view class="phone-detail">
		<mNavbar :title="phone ? '修改手机号' : '绑定手机号'"></mNavbar>
		<div class="phone-detail-content">

			<view class="item-line flex">
				<view class="label">手机号</view>
				<input v-model="phone" placeholder="请输入手机号" />
			</view>

			<view class="item-line flex">
				<view class="label">验证码</view>
				<input v-model="code" placeholder="请输入验证码" />
				<view @click.stop="sendValidate" class="button" :class="{ forbidden : forbidden }">{{ forbidden ? `${m}秒后重试` : '发送验证码'}}</view>
			</view>

			<view class="add-btn">
				<view @click="editPhone" class="btn">
					立即绑定
				</view>
			</view>
		</div>
	</view>
</template>

<script>
	import mNavbar from '@/components/base/m-navbar.vue'
	export default {
		components: {
			mNavbar
		},
		data() {
			return {
				phone: '',
				code: '',
				setInterval : null,
				m : 60,
				forbidden : false
			}
		},
		destroyed() {
			clearInterval(this.setInterval)
		},
		methods: {
			editPhone() { //绑定手机号
				if (this.validateparams(true)) {
					let data = {
						phone: this.phone,
						code : this.code
					}

					this.$api('ChangePhone', data, res => {
						if (res.code == 200) {
							uni.showToast({
								title : '绑定成功',
								icon : 'none'
							})
							//更新本地存储
							if(localStorage.getItem("userInfo")){
								let userInfo = JSON.parse(localStorage.getItem("userInfo"))
								userInfo.phone = this.phone;
								localStorage.setItem('userInfo',userInfo)
							}
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				}
			},
			validateparams(isSubmit) { //验证参数
				if (this.phone.trim() == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return false;
				}
				if(!this.$utils.verificationPhone(this.phone)){
					uni.showToast({
						title: '手机号格式不合法',
						icon: 'none'
					})
					return false
				}
				if (isSubmit && this.code.trim() == '') {
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					return false
				}
				return true;
			},
			sendValidate() { //发送验证码
				if(this.forbidden){
					return;
				}
				if (this.validateparams()) {
					this.$api('getVipCode', {
						phone: this.phone
					}, res => {
						if (res.code == 200) {
							this.forbidden = true;
							this.setInterval = setInterval(()=>{
								if(this.m == 0){
									this.m = 60
									this.forbidden = false
									clearInterval(this.setInterval)
								}
								this.m--
							},1000)
						}
					})
				}
			},
			toUserCenter(){		//跳转用户中心
				uni.switchTab({
					url: '/pages/index/center'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phone-detail {
		width: 750rpx;
		margin: 0 auto;

		.phone-detail-content {
			width: calc(750rpx - 40rpx);
			margin: 0 20rpx;

			.item-line {
				position: relative;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #333333;

				margin-top: 40rpx;

				.button {
					display: flex;
					align-items: center;
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					height: 60rpx;
					border-radius: 30rpx;
					padding: 0rpx 30rpx;
					background: #5AC796;
					color: white;
				}
				
				.forbidden{
					background: #ccc;
				}
			}

			.item-line .label {
				width: 100rpx;
				height: 60rpx;
			}

			.item-line input {
				width: calc(100% - 100rpx);
				height: 80rpx;
				line-height: 80rpx;
				background: #f5f5f5;
				border-radius: 40rpx;

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #939393;

				padding: 0 20rpx;
			}

			.add-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				margin: 60rpx 0rpx;

				.btn {
					width: 95%;
					height: 80rpx;
					border-radius: 40rpx;
					color: white;
					text-align: center;
					line-height: 80rpx;
					font-size: 28rpx;
					background: linear-gradient(180deg, #6FDFBE, #5AC796);
				}
			}
		}
	}
</style>