purchase-let/pages/login/test.vue

<template>
	<view class="content">
		<view style="text-align: center;">
			<image class="logo" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/35adb202404271727457954.png">
			</image>
			<view class="tips">欢迎登录泸优采</view>
		</view>

		<view class='card'>
			<view style="display: flex;align-items: center;">
				<text>手机号：</text>
				<up-input v-model="formData.account" placeholder="请输入手机号"></up-input>
			</view>
			<view style="margin: 30rpx 0;">
			</view>
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<text style="margin-right: 20rpx;">验证码:</text>
				<up-input v-model="formData.code" placeholder="请输入验证码" type='number'></up-input>
				<view class="code-btn">
					<view style="margin: 0 20rpx;">
						<up-line color="grey" direction="col" length="30rpx"></up-line>
					</view>
					<text class='btn-text' style="color: grey;" v-if='cutDown'>重新获取({{cutDown}})</text>
					<text @click="getCode" class='btn-text' v-else> {{flag?'获取验证码':'重新获取' }} </text>
				</view>
			</view>
		</view>
		<view class="submit-btn">
			<up-button @click="submit" color="#20B128" size="large">
				登录</up-button>

		</view>

	</view>
</template>

<script setup>
	import {
		userLoginApi,
		userInfoApi,
		getStoreInfo,
		getloginSms
	} from "@/api/user.js";
	import {
		ref,
		reactive
	} from "vue"
	import useUserStore from "@/store/user";
	const userStore = useUserStore();




	const formData = reactive({
		account: "",
		code: "",
		terminal: 1,
		scene: 2
	})


	// 获取验证码
	const cutDown = ref(0)
	const flag = ref(true)
	const code = ref('')
	const checkPhone = (phone) => {
		const regex = /^1[3-9]\d{9}$/;
		return regex.test(phone) ? true : false
	}

	const getCode = async () => {
		if (!checkPhone(formData.account)) return uni.$u.toast('请输入正确的手机号')
		await getloginSms({
			account: formData.account
		})
		flag.value = false
		cutDown.value = 60
		let timer = setInterval(() => {
			cutDown.value--
			if (cutDown.value <= 0) clearInterval(timer)
		}, 1000)
	}
	// 获取验证码结束


	const zh = ref("")

	const submit = () => {
		userLoginApi({
			...formData
		}).then(res => {
			getStoreInfo().then(res => {
				uni.setStorageSync("STORE_INFO", JSON.stringify(res.data))
			})
			uni.setStorageSync('token', res.data.token);
			userStore.setToken(res.data.token);
			userInfoApi().then(res => {
				const user = res.data;
				userStore.setUserInfo(user);
				uni.reLaunch({
					url: '/pages/index/index'
				}) // 存储token到本地存储中
			})
		})



	}
</script>

<style lang='scss'>
	.content {
		background-color: white;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 15vh;

		.logo {
			height: 152rpx;
			width: 152rpx;
		}

		.tips {
			color: #444444;
			font-size: 28rpx;
			margin: 30rpx 0;
		}
	}

	.card {
		padding: 50rpx;
		background-color: white;
		margin-bottom: 30rpx;
		padding-bottom: 30rpx;
	}

	.submit-btn {
		position: absolute;
		bottom: 100rpx;
		width: 710rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.code-btn {
		display: flex;
		align-items: center;
	}

	.btn-text {
		color: #20B128;
	}
</style>