feat:部署微信小程序测试

shuishen

2025-12-16 0b3c4a0ffa0ff53e892e5fdacc7c4ac196393a70

 src/pages/login/index.vue

@@ -1,281 +1,284 @@
<!-- 登录页 -->
<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>
  <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>
    <button class="login-btn" :style="[inputStyle]" @tap="submit">登录</button>
    <image class="lowerRightCorner" :src="droneSvg" />
  </view>
</template>

<script setup>
   import md5 from "js-md5";
   import {
      loginByUsername
   } from "@/api/user/index.js";
   import {
      useUserStore
   } from "@/store/index.js";
   import droneSvg from '@/static/images/login/droneSvg.svg'
   import usernameSvg from '@/static/images/login/username.svg'
   import passwordSvg from '@/static/images/login/password.svg'
   import logoSvg from '@/static/images/login/logo.svg'
   import {
      HOME_PATH,
      LOGIN_PATH,
      removeQueryString
   } from "@/router";
   import { onMounted } from 'vue';
import { getAssetsImage } from "@/utils/index.js";
import md5 from "js-md5";
import { loginByUsername } from "@/api/user/index.js";
import { useUserStore } from "@/store/index.js";

   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;
   }
import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
import { onMounted } from "vue";

   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: "",
      };
const droneSvg = getAssetsImage("/images/login/droneSvg.svg");

      if (rememberPassword.value) {
         uni.setStorageSync('rememberedUser', {
            username: loginForm.value.username,
            password: loginForm.value.password
         });
      } else {
         uni.removeStorageSync('rememberedUser');
      }
const usernameSvg = getAssetsImage("/images/login/username.svg");
const passwordSvg = getAssetsImage("/images/login/password.svg");
const logoSvg = getAssetsImage("/images/login/logo.svg");

      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);
      }
   });
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%;
.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;
      }
  .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;
      }
  .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;
      }
  .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;
  .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;
         }
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
    }

         :deep(uni-input) {
            height: 40rpx;
            line-height: 40rpx;
            width: 80%;
            margin-top: 20rpx;
         }
    :deep(uni-input) {
      height: 40rpx;
      line-height: 40rpx;
      width: 80%;
      margin-top: 20rpx;
    }

         :deep(.uni-input-placeholder) {
            font-size: 32rpx;
            color: #E3E3E3;
            font-weight: 500;
         }
      }
    :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;
  .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;
    color: #666;
    font-size: 28rpx;

         label {
            display: flex;
            align-items: center;
         }
      }
    label {
      display: flex;
      align-items: center;
    }
  }

      input {
         @apply pb-6rpx mb-10rpx text-left;
      }
  input {
    @apply pb-6rpx mb-10rpx text-left;
  }

      .tips {
         @apply mt-8rpx mb-60rpx;
         color: $u-info;
      }
  .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;
  .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;
         }
      }
    &::after {
      @apply border-none;
    }
  }

      .alternative {
         @apply flex justify-between mt-30rpx;
         color: $u-tips-color;
      }
   }
  .alternative {
    @apply flex justify-between mt-30rpx;
    color: $u-tips-color;
  }
}

   .login-type-wrap {
      @apply flex justify-between pt-350rpx px-150rpx pb-150rpx;
.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;
      }
   }
  .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;
.hint {
  @apply px-40rpx py-20rpx text-24rpx;
  color: $u-tips-color;

      .link {
         color: $u-warning;
      }
   }
  .link {
    color: $u-warning;
  }
}
</style>