lxp_Maxcess/pages/client/account/login.vue

<template>
	<view class="app loginBox">
		<view class="header-tabs">
			<view class="header-tabs-title" :class="{active:state.tabCurrent === 0}"> Maxcess Barcode Syssten </view>
		</view>
		<view class="form-body">
			<view class="form-item form-item1" @tap="languageShowFun">
				<view style="border-bottom: 1rpx solid #CAD9E6;width: 100%;display: flex;box-sizing: border-box;padding: 16rpx;align-items: center;">
					<up-icon name="../../../static/icons/mine/guoji.png" color="#ffffff" size="22" style="margin-right: 4rpx;"></up-icon>
					<view style="margin-left: 8rpx;"> {{ state.languageText }} </view>
				</view>
			</view>
			<view class="form-item form-item2 u-m-t-32">
				<up-input :placeholder="t('login.usedName')" border="bottom" v-model="state.ruleForm.userName">
					<template #prefix>
						<up-icon name="account" color="#ffffff" size="24" style="margin-right: 4rpx;"></up-icon>
					</template>
				</up-input>
			</view>
			<view class="form-item form-item3 u-m-t-32">
				<up-input :placeholder="t('login.password')" 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>
			<uni-swipe-action>
				<uni-swipe-action-item>
					<template #right>
						<view class="itemRight" @click="toLoginConfigFun">
							<up-icon name="setting-fill" color="#ffffff" size="20"></up-icon>
						</view>
					</template>
					<view class="form-button" @tap="loginFun">{{t('login.loginbtn')}}</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<up-picker :show="state.languageShow" :columns="state.languageList" @close="() => {state.languageShow = false}"
			@cancel="() => {state.languageShow = false}" @confirm="languageFun"></up-picker>
	</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,
		country: '',
		languageShow: false,
		languageText: '',
		languageList: [['中文', 'English']],
		ruleForm: {
			userName: '',
			password: '',
			lcId: 2052
		},
		isCheck: false,
		appLoginInfoObj:{}
	})
	onShow(() => {
		if (uni.getStorageSync('locale') === 'en') {
			locale.value = 'en'
		} else {
			locale.value = 'cn'
		}
		state.language = locale.value
		state.languageText = state.language === 'en' ? 'English' : '中文'
		state.ruleForm.lcId = state.language === 'cn' ? 2052 : 1033
		
		state.appLoginInfoObj = uni.getStorageSync('appLoginInfo')
		if(!Object.keys(state.appLoginInfoObj).length){
			uni.$u.toast('配置文件丢失！')
		}
	})
	const loginFun = () => {
		if (state.ruleForm.userName === '') {
			uni.$u.toast(t('login.qsrzh'))
			return
		}
		if (state.ruleForm.password === '') {
			uni.$u.toast(t('login.qsrmm'))
			return;
		}
		if (state.appLoginInfoObj.organizationText === '') {
			uni.$u.toast('请配置数据中心！')
			return;
		}
		if (state.appLoginInfoObj.centerObj.Id === '') {
			uni.$u.toast('DBID丢失！')
			return;
		}
		if (state.appLoginInfoObj.organizationObj['FOrgOrgId.FNumber'] === '') {
			uni.$u.toast('请配置账套组织！')
			return;
		}
		console.log(state.appLoginInfoObj);
		loginApp({
			userName: state.ruleForm.userName,
			password: state.ruleForm.password,
			lcId: state.ruleForm.lcId,
			ServerUrl:state.appLoginInfoObj.organizationText,
			DBID:state.appLoginInfoObj.centerObj.Id,
			orgNum: state.appLoginInfoObj.organizationObj['FOrgOrgId.FNumber']
		}).then((res : any) => {
			if (res.code === 200) {
				uni.setStorageSync('TOKEN', res.token)
				getDetails({
					userName: state.ruleForm.userName,
					password: state.ruleForm.password,
					lcId: state.ruleForm.lcId,
					ServerUrl:state.appLoginInfoObj.organizationText,
					DBID:state.appLoginInfoObj.centerObj.Id,
					orgNum: state.appLoginInfoObj.organizationObj['FOrgOrgId.FNumber']
				}).then((content : any) => {
					if (content.code === 200) {
						uni.setStorageSync('userInfo', JSON.parse(content.data))
						uni.switchTab(
							{
								url: '/pages/main/home',
							}
						)
					}

				})
			}
		})
	}
	const languageFun = (val : string) => {
		let languageVal = val.value[0] === 'English' ? 'en' : 'cn'
		state.language = languageVal
		locale.value = languageVal
		uni.setStorageSync('locale', locale.value)
		state.languageText = val.value[0]
		state.ruleForm.lcId = state.language === 'cn' ? 2052 : 1033
		state.languageShow = false
	}
	const languageShowFun = () => {
		state.languageShow = true
	}
	const toLoginConfigFun = () => {
		if (state.ruleForm.userName !== '') {
			uni.$u.route({
				url: '/pages/client/account/loginConfig',
				params: { userName: state.ruleForm.userName }
			})
		} else {
			uni.$u.toast('请输入账号')
		}

	}
</script>

<style lang="scss" scoped>
	:deep(.button-group--right) {
		right: 2px;

	}

	.itemRight {
		display: flex;
		align-items: center;
		// padding: 0rpx 32rpx;
		background-color: #ff5a5d;
		border-radius: 96rpx;
		height: 96rpx;
		width: 96rpx;
		margin-top: 128rpx;
		margin-left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		// border-bottom-right-radius: 96rpx;

	}

	:deep(.u-popup__content) {
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
	}

	: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: 360rpx;
			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;
			justify-content: center;
			width: 100%;
			margin-top: 100rpx;
			margin-bottom: 100rpx;

			.header-tabs-title {
				font-size: 36rpx;
				font-family: Bold;
				font-weight: 500;
				color: #666;
				text-align: center;
				flex: 1;

				&.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>