lxp_Maxcess/pages/client/account/login.vue

<template>
	<view class="app loginBox">
		<view class="header-tabs">
			<view class="header-tabs-title u-m-r-48" :class="{active:state.tabCurrent === 0}"> Maxcess inspection App
			</view>
		</view>
		<view class="form-body">
			<view class="form-item form-item1">
				<up-input :placeholder="t('login.qsrzh')" border="bottom" v-model="state.ruleForm.userPhone">
					<template #prefix>
						<up-icon name="account" color="#ffffff" size="24" style="margin-right: 4rpx;"></up-icon>
					</template>
				</up-input>
			</view>
			<template v-if="state.tabCurrent === 0">
				<view class="form-item form-item1 u-m-t-32">
					<up-input :placeholder="t('login.qsrmm')" password border="bottom"
						v-model="state.ruleForm.password">
						<template #prefix>
							<up-icon name="lock" color="#ffffff" size="24" style="margin-right: 4rpx;"></up-icon>
						</template>
					</up-input>
				</view>
			</template>
			<view class="form-button" @tap="loginFun">{{t('login.loginbtn')}}</view>
		</view>
		<view class="language">
			<view class="languageText" @click="languageFun('en')">
				<text>EN</text>
				<u-icon v-if="state.language === 'en'" name="checkbox-mark"></u-icon>
			</view>
			<view class="languageText" @click="languageFun('cn')">
				<text>中文</text>
				<u-icon v-if="state.language === 'cn'" name="checkbox-mark"></u-icon>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, onMounted } from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app'

	import { getDetails, loginApp } from "../../../common/request/api/api";
	import i18n from '../../../locale/index'
	import { useI18n } from 'vue-i18n'
	const getI18n = useI18n()
	const { t, locale } = getI18n
	const state = reactive({
		tabCurrent: 0,
		language: getI18n.locale.value,
		ruleForm: {
			userPhone: '',
			password: '',
			lcId: 2052
		},
		isCheck: false,
	})
	onShow(() => {
		// locale.value = 'en'
		console.log(i18n.global.locale.value);
		console.log(t('login.loginbtn'));
		if (uni.getStorageSync('locale') === 'en') {
			locale.value = 'en'
		} else {
			locale.value = 'cn'
		}
		state.language = locale.value
	})
	const loginFun = () => {
		if (state.ruleForm.userPhone === '') {
			uni.$u.toast('请输入您的手机号')
			return
		}
		if (state.ruleForm.password === '') {
			uni.$u.toast('请输入您的密码')
			return;
		}
		loginApp({
			userName: state.ruleForm.userPhone,
			password: state.ruleForm.password,
			lcId: state.ruleForm.lcId,
		}).then((res : any) => {
			if (res.code === 200) {
				uni.setStorageSync('TOKEN', res.token)
				getDetails({
					userName: state.ruleForm.userPhone,
					password: state.ruleForm.password,
					lcId: state.ruleForm.lcId,
				}).then((content : any) => {
					if(content.code === 200){
						uni.setStorageSync('userInfo', JSON.parse(content.data))
						uni.switchTab(
							{
								url: '/pages/main/home',
							}
						)
					}
					
				})
			}
		})
	}
	const languageFun = (val : string) => {
		state.language = val
		locale.value = val
		uni.setStorageSync('locale', locale.value)
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-text) {
		line-height: normal !important;
	}

	.loginBox {
		background-image: url("../../../static/bc/loginBc.png");
		background-size: 100% 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.app {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0 64rpx;
		position: relative;
		height: 100vh !important;

		.language {
			position: absolute;
			right: 40rpx;
			top: 140rpx;
			min-width: 100rpx;

			.languageText {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 28rpx;
			}
		}

		.header-tabs {
			width: 100%;
			height: 24vmax;
			display: flex;
			align-items: center;

			.header-tabs-title {
				font-size: 36rpx;
				font-family: Bold;
				font-weight: 500;
				color: #666;

				&.active {
					color: #ffffff;
					font-size: 48rpx;
				}
			}
		}

		.form-body {
			width: 100%;
			// margin-bottom: auto;

			@for $i from 1 through 2 {
				.form-item#{$i} {
					opacity: 0;
					animation-name: error-num;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
					animation-delay: calc($i/10) + s;
					display: flex;
				}
			}

			@keyframes error-num {
				0% {
					transform: translateY(60px);
					opacity: 0;
				}

				100% {
					transform: translateY(0);
					opacity: 1;
				}
			}

			.form-button {
				height: 96rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: Medium;
				background-color: #0129D3;
				color: #fff;
				margin-top: 128rpx;
				margin-bottom: 48rpx;
			}
		}

		.footer-wrap {
			width: 100%;
			// margin-top: auto;
			display: flex;
			flex-direction: column;
			padding-bottom: 32rpx;

			.thirdway-grids {
				margin-bottom: 112rpx;
				display: flex;
				grid-template-columns: 1fr;
				justify-content: center;
			}
		}
	}
</style>