zhongtuanLitterButler/pages/index/login.vue

<template>
	<!-- 空登陆页 -->
	<view class="app-container">
		<view class="header">
			<image src="https://mall.jiangxiaoxian.hschool.com.cn/loginLogo.jpg" mode=""></image>
			<view class="headerText" style="margin-top: 30rpx;">登录，中团小管家</view>
		</view>


		<view class="input-box">
			<input class="accountBox" v-model="loginForm.account" placeholder="账号" placeholder-style="color:#3d3d3d" />
			<input class="passBox" v-model="loginForm.password" :password="true" input="safe-password" placeholder="密码"
				placeholder-style="color:#3d3d3d"></input>
			<!-- <view class="accountBox">
				<input class="" v-model="loginForm.accountNum" type="number" placeholder="账号"></input>
			</view> -->
			<!-- <view class="passBox">
				<uni-easyinput v-model="loginForm.password" :password="true" 
				input="safe-password" placeholder="密码"></uni-easyinput>
			</view> -->
		</view>


		<view class="wxButton">
			<button class="login-style" @click="tologin()">
				<view class="text">
					立即登录
				</view>
			</button>
		</view>



	</view>
</template>

<script setup>
	import {
		isEmpty
	} from 'lodash';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		computed,
		ref,
		reactive
	} from 'vue';

	// onLoad(async (options) => {
	// 	// #ifdef H5
	// 	let event = '';
	// 	if (options.login_code) {
	// 		event = 'login';
	// 		const {
	// 			code
	// 		} = await sheep.$platform.useProvider().login(options.login_code);
	// 		if (code === 1) {
	// 			sheep.$store('user').getInfo();
	// 		}
	// 	}
	// 	if (options.bind_code) {
	// 		event = 'bind';
	// 		const {
	// 			code
	// 		} = await sheep.$platform.useProvider().bind(options.bind_code);
	// 	}

	// 	// 检测H5登录回调
	// 	let returnUrl = uni.getStorageSync('returnUrl');
	// 	if (returnUrl) {
	// 		uni.removeStorage('returnUrl');
	// 		location.replace(returnUrl);
	// 	} else {
	// 		uni.switchTab({
	// 			url: '/',
	// 		});
	// 	}

	// 	// #endif
	// });

	const loginForm = ref({
		account: '',
		password: '',
	})

	const isLogin = computed(() => sheep.$store('user').isLogin);

	function tologin() {
		console.log('dengl1', loginForm.value, isLogin.value);
		sheep.$api.app.account(loginForm.value).then((res) => {
			console.log('res-login:', res)
			if (res.code == 1) {
				uni.switchTab({
					url: '/pages/index/category'
				})
			}
		})



	}

	onLoad(() => {
		console.log('dengl1', isLogin.value);
		if (isLogin.value == true) {
			uni.switchTab({
				url: '/pages/index/category'
			})
		}

	})
</script>

<style lang="scss" scoped>
	.app-container {
		height: 100%;
		min-height: 100vh;
		/* 确保最小高度为100vh */
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		/* 垂直居中内容 */
		background-image: url('https://mall.jiangxiaoxian.hschool.com.cn/loginPageBack.png');
		background-size: 100% 100%;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;


		.header {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			align-items: left;
			justify-content: flex-end;
			padding-left: 40rpx;
			margin-bottom: 100rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 30rpx;
			}

			.headerText {
				margin-top: 30rpx;
				color: #323232;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 67rpx;
			}

		}

		.input-box {
			margin: 0 auto;

			.accountBox {
				padding: 0 30rpx;
				width: 570rpx;
				height: 110rpx;
				border-radius: 163rpx;
				border: 2rpx solid #323232;
				color: #3d3d3d;
				font-size: 32rpx;
				line-height: 45rpx;
				font-weight: bold;
				background-color: #fff;
			}

			.passBox {
				margin-top: 30rpx;
				padding: 0 30rpx;
				width: 570rpx;
				height: 110rpx;
				border-radius: 163rpx;
				border: 2rpx solid #323232;
				color: #3d3d3d;
				font-size: 32rpx;
				line-height: 45rpx;
				font-weight: bold;
				background-color: #fff;
			}
		}



		.wxButton {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 670rpx;
			margin-top: 60rpx;

			.login-style {
				background-color: #FEC136;
				font-size: 32rpx;
				color: #323232;
				margin: 20rpx;
				border-radius: 100rpx;
				width: 100%;
				font-weight: bold;
			}

			image {
				position: absolute;
				top: 15rpx;
				left: 20rpx;
				width: 60rpx;
				height: 60rpx;
				margin-left: 30rpx
			}

			.text {}
		}


		.bottom {
			display: flex;
			font-size: small;
			align-items: center;
			color: #b1b1b1;

			.xieyi {
				color: #5de198;
				margin: 0 6rpx;
			}
		}

	}
</style>