303 lines
7.5 KiB
Vue
303 lines
7.5 KiB
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> |