<!-- 登录页 -->
|
<template>
|
<view class="login-form-wrap">
|
<image class="logo" :src="logoSvg" />
|
<div class="title">掌控智飞</div>
|
<div class="user-name">
|
<image :src="usernameSvg" />
|
<input v-model="loginForm.username" placeholder="请输入用户名" />
|
</div>
|
<div class="pass-word">
|
<image :src="passwordSvg" />
|
<input
|
v-model="loginForm.password"
|
type="password"
|
placeholder="请输入密码"
|
/>
|
</div>
|
<div class="remember-password">
|
<label>
|
<checkbox-group @change="toggleRemember">
|
<checkbox
|
:checked="rememberPassword"
|
color="#1D6FE9"
|
style="transform: scale(0.7)"
|
/>
|
</checkbox-group>
|
记住密码
|
</label>
|
</div>
|
|
<button class="login-btn" :style="[inputStyle]" @tap="submit">登录</button>
|
<image class="lowerRightCorner" :src="droneSvg" />
|
</view>
|
</template>
|
|
<script setup>
|
import { getAssetsImage } from "@/utils/index.js";
|
import md5 from "js-md5";
|
import { loginByUsername } from "@/api/user/index.js";
|
import { useUserStore } from "@/store/index.js";
|
|
import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
|
import { onMounted } from "vue";
|
|
const droneSvg = getAssetsImage("/images/login/droneSvg.png");
|
const usernameSvg = getAssetsImage("/images/login/username.png");
|
const passwordSvg = getAssetsImage("/images/login/password.png");
|
const logoSvg = getAssetsImage("/images/login/logo.png");
|
|
const userStore = useUserStore();
|
const loginForm = ref({
|
username: "",
|
password: "",
|
});
|
const rememberPassword = ref(false);
|
const inputStyle = computed(() => {
|
const style = {};
|
if (loginForm.value.username && loginForm.value.password) {
|
style.color = "#fff";
|
style.backgroundColor = "#1D6FE9";
|
}
|
return style;
|
});
|
let redirect = HOME_PATH;
|
function toggleRemember(e) {
|
rememberPassword.value = e.detail.value.length > 0;
|
}
|
|
async function submit() {
|
if (!loginForm.value.username.trim()) {
|
uni.showToast({
|
title: "请输入用户名",
|
icon: "none",
|
duration: 2000,
|
});
|
return;
|
}
|
|
if (!loginForm.value.password.trim()) {
|
uni.showToast({
|
title: "请输入密码",
|
icon: "none",
|
duration: 2000,
|
});
|
return;
|
}
|
let userInfo = {
|
tenantId: "000000",
|
deptId: "",
|
roleId: "",
|
username: loginForm.value.username,
|
password: loginForm.value.password,
|
type: "account",
|
code: "",
|
key: "",
|
};
|
|
if (rememberPassword.value) {
|
uni.setStorageSync("rememberedUser", {
|
username: loginForm.value.username,
|
password: loginForm.value.password,
|
});
|
} else {
|
uni.removeStorageSync("rememberedUser");
|
}
|
|
try {
|
const res = await loginByUsername(
|
userInfo.tenantId,
|
userInfo.deptId,
|
userInfo.roleId,
|
userInfo.username,
|
md5(userInfo.password),
|
userInfo.type,
|
userInfo.key,
|
userInfo.code
|
);
|
userStore.setUserInfo(res.data);
|
uni.reLaunch({
|
url: "/pages/map/index",
|
});
|
} catch (error) {
|
const errorMsg =
|
error.data?.error_description !== "Bad credentials"
|
? error.data?.error_description
|
: "登录失败，请重试";
|
uni.showToast({
|
title: errorMsg,
|
icon: "none",
|
duration: 2000,
|
});
|
}
|
}
|
|
// 从本地存储加载记住的密码
|
onMounted(() => {
|
const savedUserInfo = uni.getStorageSync("rememberedUser");
|
console.log("记住密码", savedUserInfo);
|
if (savedUserInfo) {
|
loginForm.value.username = savedUserInfo.username;
|
loginForm.value.password = savedUserInfo.password;
|
rememberPassword.value = true;
|
}
|
});
|
onLoad((options) => {
|
if (options.redirect && removeQueryString(options.redirect) !== LOGIN_PATH) {
|
redirect = decodeURIComponent(options.redirect);
|
}
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.login-form-wrap {
|
position: relative;
|
text-align: center;
|
height: 100%;
|
width: 100%;
|
|
.logo {
|
width: 127px;
|
height: 51px;
|
margin: 0 auto;
|
margin-top: 104px;
|
margin-bottom: 16px;
|
}
|
|
.lowerRightCorner {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
width: 425.61rpx;
|
height: 316.46rpx;
|
}
|
|
.title {
|
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
|
font-weight: 400;
|
font-size: 84rpx;
|
line-height: 82rpx;
|
letter-spacing: 1px;
|
text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18);
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
color: #1452d3;
|
text-align: center;
|
margin-bottom: 168rpx;
|
}
|
|
.user-name,
|
.pass-word {
|
display: flex;
|
//justify-content: center;
|
align-items: center;
|
margin-left: 62rpx;
|
margin-right: 58rpx;
|
height: 118rpx;
|
border-bottom: 2rpx solid #e3e3e3;
|
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 12rpx;
|
}
|
|
:deep(uni-input) {
|
height: 40rpx;
|
line-height: 40rpx;
|
width: 80%;
|
margin-top: 20rpx;
|
padding: 0 !important;
|
}
|
|
:deep(input) {
|
height: 40rpx;
|
line-height: 40rpx;
|
width: 80%;
|
margin-top: 20rpx;
|
padding: 0 !important;
|
margin: 0 !important;
|
}
|
|
:deep(.uni-input-placeholder) {
|
font-size: 32rpx;
|
color: #e3e3e3;
|
font-weight: 500;
|
}
|
}
|
|
.remember-password {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
margin-left: 62rpx;
|
margin-right: 58rpx;
|
margin-top: 20rpx;
|
|
color: #666;
|
font-size: 28rpx;
|
|
label {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
input {
|
@apply pb-6rpx mb-10rpx text-left;
|
}
|
|
.tips {
|
@apply mt-8rpx mb-60rpx;
|
color: $u-info;
|
}
|
|
.login-btn {
|
z-index: 1;
|
@apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
|
background: #1d6fe9;
|
color: white;
|
width: 590rpx;
|
height: 76rpx;
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
margin-top: 100rpx;
|
|
&::after {
|
@apply border-none;
|
}
|
}
|
|
.alternative {
|
@apply flex justify-between mt-30rpx;
|
color: $u-tips-color;
|
}
|
}
|
|
.login-type-wrap {
|
@apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
|
|
.item {
|
@apply flex items-center flex-col text-28rpx;
|
color: $u-content-color;
|
}
|
}
|
|
.hint {
|
@apply px-40rpx py-20rpx text-24rpx;
|
color: $u-tips-color;
|
|
.link {
|
color: $u-warning;
|
}
|
}
|
</style>
|
