<template>
|
<view class="normal-login-container">
|
<view class="logo-content">
|
<text>账号密码登录</text>
|
</view>
|
<view class="login-form-content">
|
<view class="input-item flex align-center">
|
<up-input prefixIcon="account" placeholder="请输入账号" border="bottom"
|
@blur="getUserLoginFacotryList"
|
maxlength="30" v-model="loginForm.username" clearable></up-input>
|
</view>
|
<view class="input-item flex align-center">
|
<up-input prefixIcon="lock" placeholder="请输入密码" border="bottom" maxlength="20" v-model="loginForm.password" clearable type="password"></up-input>
|
</view>
|
<view class="input-item flex align-center select-container">
|
<up-icon name="tags" size="18"></up-icon>
|
<up-picker-data
|
v-model="loginForm.factoryId"
|
title="请选择公司"
|
:options="factoryList"
|
valueKey="id"
|
labelKey="name">
|
</up-picker-data>
|
</view>
|
<view>
|
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
</view>
|
</view>
|
<!-- 记住密码选项 -->
|
<view class="remember-password">
|
<up-checkbox
|
:customStyle="{marginBottom: '8px'}"
|
label="记住密码"
|
name="agree"
|
usedAlone
|
v-model:checked="rememberPassword"
|
>
|
</up-checkbox>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import modal from '@/plugins/modal'
|
import { userLoginFacotryList} from '@/api/login'
|
import { ref, onMounted } from "vue";
|
import useUserStore from '@/store/modules/user'
|
import { getWxCode } from '@/utils/geek';
|
import { wxLogin } from '@/api/oauth';
|
import { setToken } from '@/utils/auth';
|
const userStore = useUserStore()
|
const useWxLogin = ref(false); // 是否使用微信登录
|
const rememberPassword = ref(false); // 记住密码
|
const loginForm = ref({
|
username: "",
|
password: "",
|
factoryId: "",
|
currentFatoryName: "",
|
});
|
const factoryList = ref([]) // 公司列表
|
|
// 保存密码到本地存储
|
function savePassword() {
|
if (rememberPassword.value) {
|
uni.setStorageSync('remembered_username', loginForm.value.username);
|
uni.setStorageSync('remembered_password', loginForm.value.password);
|
uni.setStorageSync('remember_password', true);
|
} else {
|
uni.removeStorageSync('remembered_username');
|
uni.removeStorageSync('remembered_password');
|
uni.setStorageSync('remember_password', false);
|
}
|
}
|
|
// 从本地存储加载密码
|
function loadPassword() {
|
const remembered = uni.getStorageSync('remember_password');
|
if (remembered) {
|
rememberPassword.value = true;
|
const savedUsername = uni.getStorageSync('remembered_username');
|
const savedPassword = uni.getStorageSync('remembered_password');
|
if (savedUsername) {
|
loginForm.value.username = savedUsername;
|
}
|
if (savedPassword) {
|
loginForm.value.password = savedPassword;
|
}
|
}
|
}
|
|
if (useWxLogin.value) {
|
getWxCode().then(res => {
|
console.log(res);
|
wxLogin('miniapp',res).then(res => {
|
if(res.token != null){
|
setToken(res.token);
|
loginSuccess()
|
}
|
});
|
})
|
}
|
|
function getUserLoginFacotryList() {
|
if(loginForm.value.username){
|
userLoginFacotryList({userName:loginForm.value.username}).then(res => {
|
// 检查res.data是否为数组
|
if (res.data && Array.isArray(res.data)) {
|
// 重新组装数据格式：deptId变成id，deptName变成name
|
factoryList.value = res.data.map(item => ({
|
id: item.deptId,
|
name: item.deptName
|
}))
|
} else {
|
// 如果res.data不是数组，设置为空数组
|
factoryList.value = []
|
}
|
}).catch(error => {
|
modal.msgError('获取公司列表失败:', error)
|
factoryList.value = []
|
})
|
}else {
|
factoryList.value = []
|
}
|
}
|
|
async function handleLogin() {
|
if (loginForm.value.username === "") {
|
modal.msgError("请输入您的账号")
|
} else if (loginForm.value.password === "") {
|
modal.msgError("请输入您的密码")
|
} else if (loginForm.value.factoryId === "") {
|
modal.msgError("请选择公司")
|
} else {
|
modal.loading("登录中，请耐心等待...")
|
pwdLogin()
|
}
|
};
|
// 密码登录
|
async function pwdLogin() {
|
userStore.loginCheckFactory(loginForm.value).then(() => {
|
modal.closeLoading()
|
// 登录成功后保存密码
|
savePassword();
|
loginSuccess()
|
}).catch(() => {
|
modal.closeLoading()
|
})
|
};
|
|
function loginSuccess(result) {
|
// 设置用户信息
|
userStore.getInfo().then(res => {
|
uni.switchTab({
|
url: '/pages/index'
|
});
|
})
|
}
|
// 页面加载时检查是否有保存的密码
|
onMounted(() => {
|
loadPassword();
|
getUserLoginFacotryList()
|
});
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #ffffff;
|
}
|
|
.normal-login-container {
|
width: 100%;
|
height: 100vh;
|
|
.logo-content {
|
width: 90%;
|
font-weight: 400;
|
font-size: 30px;
|
color: #333333;
|
margin: 80px 0 0 30px;
|
|
image {
|
border-radius: 4px;
|
}
|
|
.title {
|
margin-left: 10px;
|
}
|
}
|
.u-checkbox {
|
margin-left: 34px;
|
}
|
|
.login-form-content {
|
text-align: center;
|
margin: 58px auto;
|
padding: 0 30px;
|
|
.input-item {
|
margin: 30px auto;
|
height: 45px;
|
|
.icon {
|
font-size: 38rpx;
|
margin-left: 10px;
|
color: #999;
|
}
|
|
.input {
|
width: 100%;
|
font-size: 14px;
|
line-height: 20px;
|
text-align: left;
|
padding-left: 15px;
|
}
|
}
|
.select-container {
|
flex: 1;
|
border-bottom: 1px solid #e5e5e5;
|
padding: 6px 9px;
|
|
:deep(.up-select) {
|
border: none;
|
background: transparent;
|
|
.up-select__label {
|
font-size: 14px;
|
color: #333;
|
}
|
|
.up-select__value {
|
font-size: 14px;
|
color: #333;
|
}
|
}
|
}
|
|
.login-btn {
|
margin-top: 60px;
|
height: 50px;
|
background: linear-gradient( 140deg, #00BAFF 0%, #006CFB 100%);
|
box-shadow: 0px 4px 10px 0px rgba(3,88,185,0.2);
|
border-radius: 40px 40px 40px 40px;
|
}
|
|
.xieyi {
|
color: #333;
|
margin-top: 20px;
|
}
|
|
.login-code {
|
height: 38px;
|
float: right;
|
|
.login-code-img {
|
height: 38px;
|
position: absolute;
|
margin-left: 10px;
|
width: 200rpx;
|
}
|
}
|
}
|
}
|
</style>
|
