blindDate/pages/my/bindPhone.vue

<template>
	<view>
		<view class="pure_top"></view>
		<view class="content">
			<view class="list">
				<input class="input" placeholder="输入手机号" v-model="phone" maxlength="11" />
				<view class="clear" v-if="phone.length" @click="phone = ''">
					<text class="lf-iconfont icon-shanchu"></text>
				</view>
			</view>
			<view class="list">
				<input class="input input-code" placeholder="输入验证码" v-model="code" />
				<view class="code" :class="{'active-bg': is_code}" @click="getCode">
					<text>{{ is_code ? num +'秒后重新获取' : '获取验证码' }}</text>
				</view>
			</view>
			<button class="confirm" hover-class="lf-opacity" @click="confirm">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				phone: '',
				code: '',
				is_code: false,
				timer: null,
				num: 10,
				click_button: false
			}
		},
		onLoad(){
			
		},
		onUnload(){
			if(this.timer){
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			getCode(){
				if(this.is_code) return;
				this.is_code = true;
				if(this.timer){
					clearInterval(this.timer);
					this.timer = null;
				}
				console.log("测试重复点击", Math.random())
				// TODO 在此发送网络请求
				this.timer = setInterval(() => {
					this.num--;
					if(this.num <= 0){
						clearInterval(this.timer);
						this.timer = null;
						this.num = 10;
						this.is_code = false;
					}
				}, 1000);
			},
			confirm(){
				if(this.click_button) return;
				this.click_button = true;
				this.$msg('确定').then(() => this.click_button = false);
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	.pure_top {
		width: 100%;
		height: 210rpx;
		position: relative;
		z-index: 1;
	}
	.pure_top::after {
		content: '';
		width: 140%;
		height: 210rpx;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		border-radius: 0 0 55% 55%;
		background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
	}
	
	.content{
		width: 686rpx;
		height: max-content;
		background-color: #FFFFFF;
		position: fixed;
		top: 100rpx;
		left: calc(50% - 343rpx);
		z-index: 3;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 60rpx;
		.list{
			height: 106rpx;
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:nth-child(2n){
				margin-top: 30rpx;
			}
			.input{
				width: 490rpx;
				height: 80rpx;
				font-size: 32rpx;
			}
			.input-code{
				width: 360rpx;
			}
			.clear{
				padding: 20rpx;
			}
			.code{
				min-width: 154rpx;
				max-width: 220rpx;
				height: 43rpx;
				padding: 0 4rpx;
				background: linear-gradient(180deg, #FE3EA5 0%, #FE7251 100%);
				border-radius: 5rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.active-bg{
				background: #adb5bd;
			}
		}
		.confirm{
			width: 100%;
			height: 100rpx;
			background-color: #E21196;
			border-radius: 60rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 100rpx;
			margin-bottom: 20rpx;
		}
	}
</style>