<!-- 登录页 -->
|
<template>
|
<view class="login-form-wrap">
|
<div class="imageLogo"> <image src="@/static/images/login/loginLogo.svg" /></div>
|
<image class="logo" :src="logoSvg" />
|
<div class="title">低空经济服务一体化平台系统</div>
|
<div class="user-name">
|
|
<input v-model="loginForm.username" placeholder="请输入用户名" />
|
</div>
|
<div class="pass-word">
|
<input
|
v-model="loginForm.password"
|
:type="showPassword ? 'text' : 'password'"
|
placeholder="请输入密码"
|
/>
|
<image :src="showPassword ? openPassword : showPasswordSvg" @click="toggleShowPassword" class="password-toggle-icon" />
|
</div>
|
<div class="remember-password">
|
<label>
|
<checkbox-group @change="toggleRemember">
|
<checkbox
|
:checked="rememberPassword"
|
color="#1D6FE9"
|
style="transform: scale(0.7)"
|
/>
|
</checkbox-group>
|
记住密码
|
</label>
|
<div class="forgotPassword" @click="goToForgotPassword">忘记密码？</div>
|
</div>
|
|
<button class="login-btn" :style="[inputStyle]" @tap="submit">登录</button>
|
</view>
|
</template>
|
|
<script setup>
|
import { getAssetsImage } from "@/utils/index.js";
|
import {ticketLoginInterfaceApi} from '@/api/work/index.js'
|
import md5 from "js-md5";
|
import { loginByUsername } from "@/api/user/index.js";
|
import { useUserStore, useLocationStore } from "@/store/index.js";
|
import locationUtil from "@/utils/location.js";
|
import websocketService from "@/utils/websocket.js";
|
|
import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
|
|
import logoSvg from "@/static/images/logo.svg";
|
import showPasswordSvg from "@/static/images/show-password.svg";
|
import openPassword from "@/static/images/openPassword.svg";
|
|
const agreed = ref(true);
|
|
const userStore = useUserStore();
|
const locationStore = useLocationStore();
|
const loginForm = ref({
|
username: "",
|
password: "",
|
});
|
const rememberPassword = ref(false);
|
const showPassword = 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;
|
}
|
|
function toggleShowPassword() {
|
showPassword.value = !showPassword.value;
|
}
|
|
function goToForgotPassword() {
|
uni.navigateTo({
|
url: '/subPackages/userDetail/password/index'
|
});
|
}
|
const loginFormGd = ref({
|
username: "zhx",
|
password: "123456",
|
});
|
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.password,
|
userInfo.type,
|
userInfo.key,
|
userInfo.code
|
);
|
userStore.setUserInfo(res.data.data);
|
// 请求位置权限并初始化位置服务
|
try {
|
// 请求位置权限
|
const hasPermission = await locationUtil.requestLocationPermission();
|
if (hasPermission) {
|
console.log('获取位置权限成功');
|
// 初始化位置服务
|
await locationStore.initLocationService();
|
} else {
|
console.log('获取位置权限失败');
|
}
|
} catch (error) {
|
console.error('处理位置服务失败:', error);
|
}
|
|
// 调用工单登录接口
|
await gdLogin()
|
|
uni.reLaunch({
|
url: "/pages/work/index",
|
});
|
} catch (error) {
|
const errorMsg =
|
error.data?.msg
|
? error.data.msg
|
: (error.data?.error_description && error.data.error_description !== "Bad credentials")
|
? error.data.error_description
|
: "登录失败，请重试";
|
uni.showToast({
|
title: errorMsg,
|
icon: "none",
|
duration: 2000,
|
});
|
// 即使原始登录失败，也尝试调用工单登录接口
|
await gdLogin();
|
}
|
}
|
// 工单登录
|
async function gdLogin() {
|
let userInfo = {
|
tenantId: "000000",
|
deptId: "",
|
roleId: "",
|
username: loginFormGd.value.username,
|
password: loginFormGd.value.password,
|
type: "account",
|
code: "",
|
key: "",
|
};
|
try {
|
const res = await ticketLoginInterfaceApi(
|
userInfo.tenantId,
|
userInfo.deptId,
|
userInfo.roleId,
|
userInfo.username,
|
md5(userInfo.password),
|
userInfo.type,
|
userInfo.key,
|
userInfo.code
|
);
|
console.log('工单登录',res)
|
// 存储工单token到用户信息中
|
if (res.data?.access_token) {
|
const currentUserInfo = userStore.$state.userInfo;
|
userStore.setUserInfo({
|
...currentUserInfo,
|
gd_access_token: res.data.access_token
|
});
|
}
|
} catch (error) {
|
const errorMsg =
|
error.data?.error_description !== "Bad credentials"
|
? error.data?.error_description
|
: "登录失败，请重试";
|
console.error('工单登录失败:', errorMsg);
|
}
|
}
|
// 从本地存储加载记住的密码
|
onMounted(() => {
|
const savedUserInfo = uni.getStorageSync("rememberedUser");
|
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%;
|
.imageLogo {
|
width: 425rpx;
|
height: 316rpx;
|
position: absolute;
|
right: 0;
|
image{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.logo {
|
width: 134rpx;
|
height: 134rpx;
|
margin: 0 auto;
|
margin-top: 286rpx;
|
margin-bottom: 16px;
|
}
|
|
.lowerRightCorner {
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
width: 425.61rpx;
|
height: 316.46rpx;
|
}
|
|
.title {
|
font-family: "PangMen";
|
font-weight: 400;
|
font-size: 52rpx;
|
line-height: 82rpx;
|
letter-spacing: 1px;
|
text-shadow: 0px 8rpx 8rpx rgba(0, 0, 0, 0.18);
|
text-align: center;
|
font-style: normal;
|
text-transform: none;
|
color: #161B2C;
|
text-align: center;
|
margin-bottom: 106rpx;
|
}
|
.user-name{
|
margin-bottom: 40rpx;
|
}
|
.pass-word{
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
}
|
.user-name,
|
.pass-word {
|
display: flex;
|
//justify-content: center;
|
align-items: center;
|
margin-left: 62rpx;
|
margin-right: 58rpx;
|
height: 100rpx;
|
background: #F1F4F9;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
padding: 0 22rpx;
|
|
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:space-between;
|
align-items: center;
|
margin-left: 62rpx;
|
margin-right: 58rpx;
|
margin-top: 20rpx;
|
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #86909C;
|
|
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: 670rpx;
|
height: 76rpx;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
margin-top: 184rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
&::after {
|
@apply border-none;
|
}
|
}
|
|
.wechat-login-btn {
|
z-index: 1;
|
@apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none;
|
background: #07C160;
|
color: white;
|
width: 590rpx;
|
height: 76rpx;
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
margin-top: 30rpx;
|
|
&::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;
|
}
|
}
|
.forgotPassword {
|
font-family: PingFang SC, PingFang SC;
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #4E5969;
|
}
|
</style>
|
