lift-drawing-wechat/pages/login/login.vue

<template>
	<view class="container">
		<view class="header">
			<div class="line">您好，</div>
			<div class="line">欢迎使用电梯图纸生成平台</div>
		</view>
		<div class="main">
			<view class="form">
				<uv-form labelAlign="right" labelWidth="50" labelPosition="top" :model="userInfo" :rules="rules"
					ref="form">
					<uv-form-item prop="phone">
						<div class="formLabel">
							<img class="img" src="/static/imgs/phone.png" alt="">
							手机号
						</div>
						<uv-input v-model="userInfo.phone" color="#000" border="bottom"
							:placeholderStyle="{color:'#666778'}" placeholder="请输入用户名">
						</uv-input>
					</uv-form-item>
					<uv-form-item prop="password">
						<div class="formLabel">
							<img class="img" src="/static/imgs/code.png" alt="">
							验证码
						</div>
						<uv-input v-model="userInfo.password" color="#000" border="bottom"
							:placeholderStyle="{color:'#666778'}" placeholder="请输入验证码">
							<template v-slot:suffix>
								<uv-code ref="codeRef" @change="codeChange" seconds="20" changeText="X秒重新获取"></uv-code>
								<text style="color:#4D82FD" @click="getCode">{{tips}}</text>
							</template>
						</uv-input>
					</uv-form-item>
				</uv-form>
			</view>
			<uv-button @click="login" customStyle="margin-top:30px" text="登录" color="#3F70FF"></uv-button>
			<div class="wechatBox">
				<uv-divider text="第三方登录"></uv-divider>
				<uv-icon name="weixin-circle-fill" color="#5fc157" size="50"></uv-icon>
			</div>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		HOME_PATH,
		LOGIN_PATH,
		isTabBarPath,
		removeQueryString,
	} from "@/router";
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import {
		onLoad
	} from "@dcloudio/uni-app";

	import RPC from "@/utils/request"
	
	const authStore = useAuthStore()
	const userStore = useUserStore()

	const tips = ref('获取验证码')
	const codeChange = (text) => {
		tips.value = text
	}
	const codeRef = ref(null)
	const getCode = () => {
			
		if(!userInfo.phone) {
			uni.showToast({
				title:'请填写手机号',
				icon:'none'
			});
			return
		}
		if (codeRef.value.canGetCode) {
			// 模拟向后端请求验证码
			uni.showLoading({
				title: '正在获取验证码'
			})
			setTimeout(() => {
				uni.hideLoading();
				// 这里此提示会被this.start()方法中的提示覆盖
				uni.showToast({
					title:'验证码已发送',
					icon:'none'
				});
				// 通知验证码组件内部开始倒计时
				codeRef.value.start();
			}, 2000);
		} else {
			uni.showToast({
				title:'倒计时结束后再发送',
				icon:'none'
			})
		}
	}


	const form = ref(null)
	const userInfo = ref({
		phone: '',
		password: '',
	})
	const rules = ref({
		'phone': {
			required: true,
			message: '请填写手机号',
			trigger: ['blur', 'change']
		},
		'password': {
			required: true,
			message: '请填写验证码',
			trigger: ['blur', 'change']
		}
	})
	let redirect = HOME_PATH;
	onLoad((options) => {
		if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
			redirect = decodeURIComponent(options.redirect)
		}
	});

	const login = async () => {
		await form.value.validate()
		console.log(userInfo.value)
		// RPC.post('/account/login', {
		// 	username: userInfo.value.name,
		// 	password: userInfo.value.password,
		// }, {
		// 	custom: {
		// 		loading: true,
		// 		loadingText: '正在登录...'
		// 	},
		// }).then(res => {
		// 	authStore.setAccessToken(res.token)
		// 	userStore.setUserInfo(res)
		// 	uni.$uv.route({
		// 		type: isTabBarPath(redirect) ? "switchTab" : "redirectTo",
		// 		url: redirect,
		// 	});
		// })
		authStore.setAccessToken('accessToken')
		setTimeout(() => {
			uni.$uv.route({
				type: isTabBarPath(redirect) ? "switchTab" : "redirectTo",
				url: redirect,
			});
		}, 800);
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(124.92deg, rgba(77, 130, 253, 1) 7.66%, rgba(85, 184, 254, 1) 89.55%);

		.header {
			height: 15vh;
			color: #fff;
			display: flex;
			flex-direction: column;
			padding-left: 7vw;
			font-size: 16px;
			justify-content: center;

			.line {
				margin: 6px 0;
			}
		}

		.main {
			flex: 1;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			padding: 7vw;
			.formLabel {
				display: flex;
				align-items: center;
				margin-bottom: 4px;
				.img {
					width: 20px;
					height: 20px;
					margin-right: 6px;
				}
			}
			.wechatBox {
				position: fixed;
				width: 100%;
				left: 0;
				bottom: 15vh;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>

<style lang="scss">
	.wechatBox {
		.uv-divider {
			margin-bottom: 30px;
			width: 90%;
		}
	}
</style>