point-app/pagesMy/account/bindPhone.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
					<uni-forms-item label="手机号" name="phone">
						<uni-easyinput type="number" v-model="form.phone" placeholder="请输入您的手机号" />
					</uni-forms-item>
					<uni-forms-item label="手机验证码" name="code">
						<view class="yzm">
							<view class="l">
								<uni-easyinput type="text" v-model="form.code" placeholder="请输入您的手机验证码" />
							</view>
							<view class="r">
								<button type="default" size="mini" @tap="sendCount">{{time_count==0?'发送验证码':time_count}}</button>
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="btn">
					<button type="primary" @click="onSubmit('form')" size="small">立即绑定</button>
				</view>
				<view class="Tips">提示：为了您的账号安全，请及时绑定手机号</view>
			</view>
		</view>

	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				form: {},
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入手机验证码',
						}]
					},
				},
				// 倒计时
				time_count: 0
			};
		},
		onShow: function() {
			const that = this;
			that.watchLogin();
		},
		methods: {
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			sendCount() {
				const that = this;
				let form = that.form;
				if (form && form.phone) {
					let time_count = 60;
					that.$set(that, `time_count`, time_count);
					that.timeDown();
				} else {
					uni.showToast({
						title: '输入错误，请重新输入!',
						icon: 'none'
					})
				}
			},
			// 倒计时
			timeDown() {
				const that = this;
				var times = setInterval(() => {
					that.time_count--;
					if (that.time_count <= 0) {
						clearInterval(times);
					}
				}, 1000);
			},
			// 提交保存
			onSubmit(ref) {
				const that = this;
				let user = that.user;
				that.$refs[ref].validate().then(async params => {
					let code = '1234';
					if (params.code == code) {
						let res = await that.$api(`/user/${user._id}`, 'POST', params);
						if (res.errcode == '0') {
							uni.showToast({
								title: '手机号绑定成功',
								icon: 'none'
							})
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.showToast({
								title: res.errms,
								icon: 'none'
							})
						}
					} else {
						uni.showToast({
							title: '验证码输入错误!',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			padding: 2vw;

			.btn {
				text-align: center;

				button {
					margin: 0 2vw 2vw 2vw;
					background-color: var(--ff0Color);
					color: var(--fffColor);
				}

				.name {
					color: var(--f85Color);
					font-size: var(--font14Size);
				}
			}

			.Tips {
				font-size: var(--font12Size);
				color: var(--f85Color);
			}
		}
	}

	.uni-forms-item {
		margin-bottom: 6vw !important;
		display: flex;
		flex-direction: row;
	}

	.yzm {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.l {
			flex-grow: 1;
		}

		.r {
			width: 20vw;

			button {
				width: 100%;
				line-height: 2.8;
				padding: 0 1vw;
			}
		}
	}
</style>