new_app/pages/login/bind.vue

<template>
	<view class="containerView">
		<view class="cu-form-group" >
			<view class="title">手机号</view>
			<input type="number" :value="data.mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
				@input="inputChange" />
		</view>
		<view class="cu-form-group" >
			<text class="title">验证码</text>
			<input type="number" :value="data.code" placeholder="请输入验证码" maxlength="6" data-key="code" @input="inputChange"
				@confirm="toLogin" />
			<button class="send-msg" @click="sendMsg" :disabled="data.sendIng">{{ data.sendTime }}</button>
		</view>

		<button class="confirm-btn" @click="toLogin">立即绑定</button>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad} from '@dcloudio/uni-app'
	import { setSendMsg, bind} from '@/api/login/login.js';
	
	let data = reactive({
		mobile: '',
		code: '',
		loginIng: false,
		sendIng: false,
		sendTime: '获取验证码',
		count: 60,
		type: '',
	})	
	onLoad((option) => {
		if (option.type) {
			data.type = option.type
		}
	})
	
	function inputChange(e) {
		const key = e.currentTarget.dataset.key;
		data[key] = e.detail.value;
	}
			
	function countDown() {
		const {
			count
		} = data;
		if (count === 1) {
			data.count = 60;
			data.sendIng = false;
			data.sendTime = '获取验证码'
		} else {
			data.count = count - 1;
			data.sendIng = true;
			data.sendTime = count - 1 + '秒后重新获取';
			setTimeout(countDown.bind(this), 1000);
		}
	}
	
	async function sendMsg() {
		const { mobile } = data;
		if (!data.mobile) {
			uni.showToast({ title: '请输入手机号', icon: 'none', })
		} else if (mobile.length !== 11) {
			uni.showToast({ title: '请输入正确的手机号', icon: 'none', })
		} else {
			uni.showLoading({
				title: '正在发送验证码...'
			})
			let res = await setSendMsg(data.mobile,'gzg')
			uni.hideLoading();
			console.log(res)
			if (res.code == 0) {
				data.sendIng = true;
				uni.showToast({ title: '验证码发送成功请注意查收', icon: 'none', })
				countDown();
			} else {
				uni.showModal({
					showCancel: false,
					title: '短信发送失败',
					content: res.msg ? res.msg : '请一分钟后再获取验证码'
				});
			}
			
			
		}
	}
	
	async function toLogin() {
		const {
			mobile,
			code
		} = data;
		if (!data.mobile) {
			uni.showToast({ title: '请输入手机号', icon: 'none', })
		} else if (data.mobile.length !== 11) {
			uni.showToast({ title: '请输入正确的手机号', icon: 'none', })
		} else if (!data.code) {
			uni.showToast({ title: '请输入验证码', icon: 'none', })
		} else {
			uni.showLoading({ title: '正在绑定中...' })
			
			let res = await bind({
					phone: mobile,
					// wxId: openId,
					// userId: userId,
					// inviterCode: invitation,
					// avatar: openidheadimgurl,
					// userName: openidnickname,
					msg: code
				})
			uni.hideLoading();
		
			uni.setStorageSync('token', res.token)
			uni.setStorageSync('userInfo', res.user)
			uni.showToast({ title: '绑定成功', icon: 'none', })
			setTimeout(function() {
				uni.navigateBack()
			}, 1000)	
			
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background: #ffffff;
	}
	
	.cu-form-group{
		background-color: #ffffff;
		padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		min-height: 80rpx;
		justify-content: space-between;
		margin: 30rpx;
		border: 2rpx solid whitesmoke;
		margin-bottom: 40rpx;
		border-radius: 60rpx
		
	}
	.title{
		text-align: justify;
		padding-right: 30rpx;
		font-size: 30rpx;
		position: relative;
		height: 60rpx;
		line-height: 60rpx;
		flex-shrink: 0;
	}
	
	uni-input{
		    flex: 1;
		    font-size: 15px;
		    color: #555;
		    padding-right: 10px;
	}
	.send-msg {
	    border-radius: 30px;
	    color: white;
	    height: 30px;
	    font-size: 14px;
	    line-height: 30px;
	    background: #ff7581;
	}

	.containerView {
		top: 0;
		padding-top: 32upx;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #ffffff;
	}




	.confirm-btn {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 70px;
		background: #ff7581;
		color: #ffffff;
		font-size: 16px;

		&:after {
			border-radius: 60px;
		}
	}
</style>