| | |
| | | <!-- 登录页 --> |
| | | <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"> |
| | | <!-- <image :src="usernameSvg" /> --> |
| | | |
| | | <input v-model="loginForm.username" placeholder="请输入用户名" /> |
| | | </div> |
| | | <div class="pass-word"> |
| | | <!-- <image :src="passwordSvg" /> --> |
| | | <input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | :type="showPassword ? 'text' : 'password'" |
| | | placeholder="请输入密码" |
| | | /> |
| | | <image :src="showPasswordSvg" /> |
| | | <image :src="showPassword ? openPassword : showPasswordSvg" @click="toggleShowPassword" class="password-toggle-icon" /> |
| | | </div> |
| | | <div class="remember-password"> |
| | | <label> |
| | |
| | | </checkbox-group> |
| | | 记住密码 |
| | | </label> |
| | | <div>忘记密码?</div> |
| | | <div class="forgotPassword" @click="goToForgotPassword">忘记密码?</div> |
| | | </div> |
| | | |
| | | <button class="login-btn" :style="[inputStyle]" @tap="submit">登录</button> |
| | | <view class="agreement"> |
| | | <label> |
| | | <checkbox :checked="agreed" @click="agreed = !agreed" /> |
| | | 同意《用户协议》与《隐私政策》 |
| | | </label> |
| | | </view> |
| | | </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 } from "@/store/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 { ref } from "vue"; |
| | | |
| | | import logoSvg from "@/static/images/logo.svg"; |
| | | import showPasswordSvg from "@/static/images/show-password.svg"; |
| | | |
| | | const droneSvg = getAssetsImage("/images/login/droneSvg.svg"); |
| | | const usernameSvg = getAssetsImage("/images/login/username.svg"); |
| | | const passwordSvg = getAssetsImage("/images/login/password.svg"); |
| | | // const logoSvg = getAssetsImage("/images/login/logo.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) { |
| | |
| | | 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: "请输入用户名", |
| | |
| | | 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", |
| | | }); |
| | |
| | | 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"); |
| | | console.log("记住密码", savedUserInfo); |
| | | if (savedUserInfo) { |
| | | loginForm.value.username = savedUserInfo.username; |
| | | loginForm.value.password = savedUserInfo.password; |
| | |
| | | text-align: center; |
| | | height: 100%; |
| | | width: 100%; |
| | | |
| | | .imageLogo { |
| | | width: 425rpx; |
| | | height: 316rpx; |
| | | position: absolute; |
| | | right: 0; |
| | | image{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .logo { |
| | | width: 127px; |
| | | height: 51px; |
| | | width: 134rpx; |
| | | height: 134rpx; |
| | | margin: 0 auto; |
| | | margin-top: 104px; |
| | | margin-top: 286rpx; |
| | | margin-bottom: 16px; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .title { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | font-family: "PangMen"; |
| | | font-weight: 400; |
| | | font-size: 52rpx; |
| | | line-height: 82rpx; |
| | | letter-spacing: 1px; |
| | | text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.18); |
| | | 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: 168rpx; |
| | | 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; |
| | |
| | | margin-right: 58rpx; |
| | | margin-top: 20rpx; |
| | | |
| | | color: #666; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #86909C; |
| | | |
| | | label { |
| | | display: flex; |
| | |
| | | @apply flex items-center justify-center py-12rpx px-0 text-30rpx border-none; |
| | | background: #1d6fe9; |
| | | color: white; |
| | | width: 590rpx; |
| | | width: 670rpx; |
| | | height: 76rpx; |
| | | border-radius: 40rpx 40rpx 40rpx 40rpx; |
| | | margin-top: 100rpx; |
| | | |
| | | 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; |
| | | } |
| | |
| | | color: $u-warning; |
| | | } |
| | | } |
| | | .agreement { |
| | | position: absolute; |
| | | bottom: 40rpx; |
| | | left: 0; |
| | | right: 0; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | text-align: center; |
| | | .forgotPassword { |
| | | font-family: PingFang SC, PingFang SC; |
| | | font-weight: 500; |
| | | font-size: 28rpx; |
| | | color: #4E5969; |
| | | } |
| | | </style> |