<route lang="json5">
|
{
|
layout: 'default',
|
style: {
|
navigationBarTitleText: '登录',
|
},
|
}
|
</route>
|
|
<template>
|
<wd-img class="w-full h-[260rpx]" src="/static/images/pic2.jpg" />
|
<wd-form ref="form" :model="model" class="mt-2">
|
<wd-cell-group border>
|
<wd-input
|
label="用户名"
|
label-width="200rpx"
|
prop="username"
|
clearable
|
v-model="model.username"
|
placeholder="请输入用户名"
|
:rules="[{ required: true, message: '请填写用户名' }]"
|
/>
|
<wd-input
|
label="密码"
|
label-width="200rpx"
|
prop="password"
|
show-password
|
clearable
|
v-model="model.password"
|
placeholder="请输入密码"
|
:rules="[{ required: true, message: '请填写密码' }]"
|
/>
|
</wd-cell-group>
|
<view class="footer">
|
<view>
|
<wd-checkbox v-model="rember" @change="handleChange">
|
<text class="rember-text">记住密码</text>
|
</wd-checkbox>
|
</view>
|
<wd-button class="mt-6" type="primary" size="large" @click="handleSubmit" block>
|
提交
|
</wd-button>
|
|
<view class="copyright-info">
|
<text>上海兰宝传感科技股份有限公司</text>
|
</view>
|
</view>
|
</wd-form>
|
</template>
|
|
<script setup lang="ts">
|
import { currRoute } from '@/utils'
|
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
|
import { useToast } from 'wot-design-uni'
|
import { login, getUserInfo } from '@/service/login'
|
import type { UserInfo } from '@/service/login.d'
|
import { tabbarStore } from '@/components/fg-tabbar/tabbar'
|
const userStore = useUserStore()
|
const accessStore = useAccessStore()
|
const configStore = useSystemConfigStore()
|
|
const model = reactive<{
|
username: string
|
password: string
|
}>({
|
username: '',
|
password: '',
|
})
|
const rember = ref<boolean>(false)
|
|
function handleChange({ value }) {
|
console.log(value)
|
}
|
|
const form = ref()
|
function handleSubmit() {
|
form.value
|
.validate()
|
.then(({ valid, errors }) => {
|
if (valid) {
|
toLogin()
|
}
|
})
|
.catch((error) => {
|
console.log(error, 'error')
|
})
|
}
|
|
onLoad(() => {
|
const { remberPassword, username, password } = configStore.systemConfigInfo
|
if (remberPassword) {
|
rember.value = true
|
model.username = username
|
model.password = password
|
}
|
})
|
|
const toLogin = async () => {
|
// 记住密码
|
if (rember.value) {
|
configStore.setConfigInfo({ ...model, ...{ remberPassword: true } })
|
}
|
|
const res = await login(model)
|
accessStore.setAccessInfo(res as any)
|
const backUserInfo: any = await getUserInfo()
|
/**
|
* 登录超时的情况
|
*/
|
if (!backUserInfo) {
|
throw new Error('获取用户信息失败.')
|
}
|
const { permissions = [], roles = [], user } = backUserInfo
|
/**
|
* 从后台user -> vben user转换
|
*/
|
const userInfo: UserInfo = {
|
avatar: user.avatar ?? '',
|
permissions,
|
realName: user.nickName,
|
roles,
|
userId: user.userId,
|
deptId: user.deptId,
|
username: user.userName,
|
}
|
userStore.setUserInfo(userInfo)
|
const { query } = currRoute()
|
uni.switchTab({ url: '/pages/home/index' })
|
tabbarStore?.setCurIdx(0)
|
tabbarStore?.setLastIdx(0)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.footer {
|
padding: 24rpx;
|
}
|
.rember-text {
|
font-size: 24rpx;
|
color: $uni-text-color-grey;
|
}
|
|
.copyright-info {
|
position: absolute;
|
bottom: 20rpx;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
color: $uni-text-color-disable;
|
font-size: 24rpx;
|
}
|
</style>
|
