吉安感知网项目-前端
shuishen
2026-02-03 89380e6260a75d1d3b94de687ebcc2f50d50659d
uniapps/work-app/src/pages/login/index.vue
@@ -1,20 +1,20 @@
<!-- 登录页 -->
<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>
@@ -27,44 +27,38 @@
        </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) {
@@ -78,7 +72,21 @@
  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: "请输入用户名",
@@ -129,6 +137,24 @@
      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",
    });
@@ -144,13 +170,53 @@
      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;
@@ -170,12 +236,21 @@
  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;
  }
@@ -188,20 +263,27 @@
  }
  .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;
@@ -209,8 +291,10 @@
    align-items: center;
    margin-left: 62rpx;
    margin-right: 58rpx;
    height: 118rpx;
    border-bottom: 2rpx solid #e3e3e3;
    height: 100rpx;
    background: #F1F4F9;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 0 22rpx;
    image {
      width: 40rpx;
@@ -250,8 +334,9 @@
    margin-right: 58rpx;
    margin-top: 20rpx;
    color: #666;
    font-weight: 400;
    font-size: 28rpx;
    color: #86909C;
    label {
      display: flex;
@@ -273,11 +358,13 @@
    @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;
    }
@@ -321,4 +408,10 @@
    color: $u-warning;
  }
}
.forgotPassword {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #4E5969;
}
</style>