guangan-mp/pages/user/bind/bind.vue

<template>
	<view class="flex flex-column">
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-text">绑定手机</text>
				<input class="list-input" v-model="form.phone">
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-text">手机验证码</text>
				<view class="flex">
					<input type="nickname" class="list-input" v-model="form.verify">
					<button class="list-btn" :disabled="waiting" @click="getVerify">{{waiting ? `重新获取（${waitingTime}s）` : '获取验证码'}}</button>
				</view>
			</view>
		</view>
		<view style="margin-top:80rpx;" class="flex-center">
			<button type="success" size="large" @click="doBind" customStyle="width:600rpx;height:100rpx">绑定</button>
		</view>
	</view>
</template>

<script>
	import { TaAjax, TaPost } from '../../../common/ajax';
	import { TaCache } from '../../../common/cache';

	export default {
		data() {
			return {
				form: {
					phone: '',
					verify: ''
				},
				waiting: false,
				waitingTime: 60
			}
		},
		methods: {
			getVerify() {
				TaAjax.post('/cms/api.auth.Bind/send', {
					phone: this.form.phone
				}).then(res => {
					uni.showToast({
						title: res.info,
						icon: 'success',
					})
					this.form.verify = "123456"
					this.waiting = true;
					this.waitingTime = 60;
					this.timer = setInterval(() => {
						this.waitingTime--;
						if (this.waitingTime <= 0) {
							this.waiting = false;
							clearInterval(this.timer);
						}
					}, 1000)
				}).catch(err => {
					uni.showToast({
						title: "网络异常",
						icon: 'none',
					})
				})
			},
			doBind() {
				TaPost("/plugin-account/api.auth.center/bind", this.form).then((ret) => {
					if (ret.code === 1) {
						TaCache.set('auth.user', ret.data)
						uni.showToast({
							title: '绑定成功',
							icon: 'success',
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: ret.info,
							icon: 'none',
						})
					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: "网络异常",
						icon: 'none',
					})
				})
			},
		}
	}
</script>

<style>

	page {
		background-color: #f8f8f8;
	}

	.go-login-navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20upx;
	}

	.center-list {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
	}

	.center-list-item {
		height: 90upx;
		width: 690upx;
		display: flex;
		flex-direction: row;
		padding: 0upx 20upx;
		border-radius: 10upx;
		box-shadow: #55555555 1rpx 0rpx 2rpx 0rpx;
		justify-content: space-between;
	}

	.list-text {
		flex-shrink: 0;
	}
	.list-text,.list-input {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
	}
	.list-input {
		text-align: right;
	}
	.list-btn {
		font-size: 24rpx;
		flex-shrink: 0;
		height: 90upx;
		line-height: 90upx;
	}

</style>