tropsCode/src/views/login/index.vue

<template>
  <div class="login">
    <Transition :enter-active-class="proxy?.animate.error.enter">
      <div class="login-content" :key="key">
        <div class="login-content-center">
          <div class="login-title"> <img src="@/assets/images/login/login.png" /></div>
          <div class="login-input-box">
            <div class="login-item">
              <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
                v-model.trim="loginForm.username" />
            </div>
            <div class="login-item">
              <input class="login-input login-input-password" type="password" autocomplete="off" placeholder="请输入密码"
                v-model.trim="loginForm.password" />
            </div>
            <div class="login-item">
              <input class="login-input login-input-deviceid" type="text" placeholder="请输入设备ID"
                v-model.trim="loginForm.deviceid" />
            </div>
            <div @click="getLogin" class="login-btn">
              <el-icon class="is-loading" v-if="loading">
                <Loading />
              </el-icon>
              登 录
            </div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup name="Login" lang="ts">
import CryptoJS from 'crypto-js';
import useAppStore from '@/store/modules/app';

const { proxy } = getCurrentInstance() as any;
const router = useRouter();

interface DataType {
  loginForm: {
    username: string,
    password: string,
    deviceid: string,
  },
  loading: boolean,
  key: number,
}

const data = reactive<DataType>({
  loginForm: {
    username: '',
    password: '',
    deviceid: '',
  },
  loading: false,
  key: 0,
});

const { loginForm, loading, key } = toRefs(data);

// 登录
const getLogin = () => {
  let username = loginForm.value.username;
  let password = loginForm.value.password;
  let deviceid = loginForm.value.deviceid;
  if (!username || !password) {
    proxy?.$modal.msgWarning('账号、密码不能为空！');
    key.value++;
    return false;
  }
  loading.value = true;
  proxy?.$modal.loading();
  let params = {
    username,
    password,
  };
  proxy?.$http.common.login(params).then((res: any) => {
    if (res.access_token) {
      //保存token
      let token = res.access_token;
      let passwordStr = CryptoJS.AES.encrypt(password, 'trops').toString();
      localStorage.setItem("token", token);
      localStorage.setItem('username', username);
      localStorage.setItem('password', passwordStr);
      if (deviceid) {
        localStorage.setItem("deviceid", deviceid);
      } else {
        localStorage.removeItem('deviceid');
      }
      router.push({ path: '/' });
      getUserInfo();
    }
  }).catch(() => {
    key.value++;
  }).finally(() => {
    loading.value = false;
    proxy?.$modal?.closeLoading()
  });
};

//获取个人信息
const getUserInfo = () => {
  let params = {};
  proxy?.$http.common.getUserInfo(params).then((res: any) => {
    //保存信息
    if (res.data.length) {
      let myData = res.data[0];
      let info: any = JSON.stringify(myData);
      localStorage.setItem("userInfo", info);
      //修改收藏夹图标
      proxy?.$utils.setFavicon(myData?.logo_url);
      //跳转
    }
  });
};

onMounted(() => {
  //测试环境默认密码
  // if (import.meta.env.DEV) {
  //   loginForm.value.username = 'manage1';
  //   loginForm.value.password = 'trops@2022';
  // }
  let deviceid = localStorage.getItem('deviceid');
  let username = localStorage.getItem('username');
  // let password = localStorage.getItem('password');
  if (deviceid) {
    loginForm.value.deviceid = deviceid;
  }
  if (username) {
    loginForm.value.username = username;
  }
  localStorage.removeItem('ip');
  // if (password) {
  //   let myPassword = CryptoJS.AES.decrypt(password, 'trops').toString(CryptoJS.enc.Utf8);
  //   loginForm.value.password = myPassword;
  // }
})
</script>

<style lang="scss" scoped>
.login-title {
  img {
    width: 9.88rem;
  }

  margin-bottom: 1.8rem;
}

.login-content {
  width: 45%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-content-center {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;

    .login-input-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      padding: 6.8vh 0;
      border-radius: 1.42rem;
      opacity: 1;
      background: linear-gradient(68deg, #1D2F3D -85%, #304453 96%);
      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);

      .login-item {
        width: 100%;
        margin-bottom: 2rem;
        display: flex;
        justify-content: center;

        .login-input {
          width: 52.6%;
          height: 2.9rem;
          line-height: 2.9rem;
          border-radius: 0.83rem;
          padding: 0 1rem;
          text-align: center;
          font-size: 1.65rem;
          opacity: 1;
          background: #EAEAEA;
          box-sizing: border-box;
          border: 1px solid #FFFFFF;
          box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
        }
      }


      .login-btn {
        width: 36.7%;
        height: 3.59rem;
        line-height: 3.59rem;
        border-radius: 0.83rem;
        font-size: 2rem;
        opacity: 1;
        text-align: center;
        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.3);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;

        .is-loading {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>