yicangzongtai_app_240321/pages/user/bindPhone.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="box">
			<view class="item">
				<u-input v-model="form.value" type="text" placeholder="请输入手机号" />
			</view>
			<view class="item flex">
				<u-input v-model="form.value" type="text" placeholder="请输入验证码" />
				<view @click="getCode()">{{txt}}</view>
			</view>
		</view>
		<view class="btnBox">
			<u-button type="primary" @click="logOut">完 成</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '绑定手机号',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFFFFF"],
				},
				form: {},
				txt: "获取验证码"
			}
		},
		methods: {
			getCode() {
				if (this.txt == "获取验证码") {
					this.txt=60+'s'
					let num=60;
					this.$u.toast('验证码已发送');
					let setTime = setInterval(() => {
						num--
						this.txt=num+'s'
						if (num == 0) {
							this.txt = "获取验证码";
							clearTimeout(setTime)
						}
					}, 1000);
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .hxicon {
		color: #1A1A1A !important;
	}

	.box {
		padding: 20rpx;

		.item {
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid rgb(222, 222, 222);

			/deep/ .u-input__input {
				font-size: 32rpx;
			}
		}

		.flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				color: rgb(64, 149, 226);
			}
		}
	}
	.btnBox{
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.u-btn{
		width: 90%;
		border-radius: 10rpx;
		background: rgb(64,149,229);
	}
</style>