Lexus-media/src/App.vue

<template>
  <div id="app">
    <HeaderBanner></HeaderBanner>
    <div v-if="!loadingFlag">
      <Navigation></Navigation>
    </div>
    <div class="app_content">
      <div class="router" v-if="!loadingFlag">
        <LoginInfo :userAccount="userAccount"></LoginInfo>
        <Routerbanner :isManufacturer="isManufacturer" />
      </div>
      <div class="router_view">
          <router-view
            :isManufacturer="isManufacturer"
            :isLoading="loadingFlag"
          ></router-view>
      </div>
    </div>
    <div v-if="!loadingFlag">
      <FooterBanner />
    </div>
  </div>
</template>

<script>
import HeaderBanner from "./components/HeaderBanner";
import Navigation from "./components/Navigation";
import LoginInfo from "./components/LoginInfo";
import Routerbanner from "./components/RouterBanner";
import FooterBanner from "./components/Footerbanner";
import { login_out_url } from "./config/env";
export default {
  components: {
    HeaderBanner,
    Navigation,
    LoginInfo,
    Routerbanner,
    FooterBanner,
  },
  data() {
    return {
      isManufacturer: "distributor", // distributor 经销商 manufacturer 厂商
      userAccount: "",
      userToken: "",
      loadingFlag: true,
      login_out_url: login_out_url,
    };
  },
  methods: {
    goHomePage: function () {
      window.location.replace(this.login_out_url);
    },
    getTokenRequest() {
      this.$http({
        method: "post",
        url: "/auth/checkSign",
        data: this.userToken,
      })
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
            let userInfo = res.data.data;
            this.userAccount = userInfo.userCode;
            localStorage.setItem("userId", userInfo.agentId);
            sessionStorage.setItem("userNameAccount", userInfo.userCode);
            if (!userInfo.agentId) {
              this.isManufacturer = "manufacturer";
              // this.$router.replace({ path: "/uploadInfor" });
            } else {
              if (userInfo.userRole == "1" || userInfo.userRole == "2") {
                this.isManufacturer = "distributor";
                // this.$router.replace({ path: "/inforList" });
              } else {
                this.isManufacturer = "manufacturer";
                // this.$router.replace({ path: "/uploadInfor" });
              }
            }
            sessionStorage.setItem("userPath", this.isManufacturer);
            this.loadingFlag = false;
          } else {
            let message = res.data.message;
            alert(message);
            sessionStorage.clear();
            localStorage.clear();
            this.goHomePage();
          }
        })
        .catch(() => {
          alert("无法校验的字符串");
          sessionStorage.clear();
          localStorage.clear();
          this.goHomePage();
        });
    },
    // 测试接口
    getData() {
      // 正常token
      // dXNlcklkPTEwMDEmYWNjb3VudD1MMDIxMF9NTSZmcm9tPXNpd2VpJnRpbWVzdGFtcD0xNjE4NTU2MTQ4JnNpZ249MWI3MmIwODkzNmZhNDdmMDU5MDRiNDc3N2FkOTdkMTI== //测试经销商TOKEN
      // dXNlcklkPTE1NiZhY2NvdW50PUwwTTE0X01NJmZyb209c2l3ZWkmdGltZXN0YW1wPTE2MTg1NTYzMDAmc2lnbj1lNDZmM2Q3MmFiZDI3ODYwMDYyMmY2N2NmZjFiNjZmNw== //测试厂商TOKEN
      this.userToken = sessionStorage.getItem("setToken");
      if (this.userToken) {
        console.log(
          "已登录",
          this.userToken,
          this.$route.path,
          sessionStorage.getItem("userNameAccount")
        );
        this.userAccount = sessionStorage.getItem("userNameAccount");
        if (sessionStorage.getItem("userPath") === "distributor") {
          this.isManufacturer = "distributor";
          // if(this.$route.path !== '/inforList') this.$router.replace({ path: "/inforList" });
          this.loadingFlag = false;
        } else if (sessionStorage.getItem("userPath") === "manufacturer") {
          this.isManufacturer = "manufacturer";
          this.loadingFlag = false;
          // if(this.$route.path !== '/uploadInfor') this.$router.replace({ path: "/uploadInfor" });
        } else {
          this.loadingFlag = false;
        }
      } else {
        sessionStorage.clear();
        localStorage.clear();
        let query = this.$route.query || {};
        if (query.token) {
          sessionStorage.setItem("setToken", query.token);
          this.userToken = query.token || "";
          console.log("token:", this.userToken);
          this.getTokenRequest();
        } else {
          this.goHomePage();
        }
      }
    },
    //localTest
    localTest(){
      // 本地调试打开
      this.loadingFlag = false;
      this.isManufacturer = "manufacturer"; //  distributor
      if (this.isManufacturer === "manufacturer") {
        if (this.$route.path === "/loading")
          this.$router.replace({ path: "/uploadInfor" });
        localStorage.setItem("userId", 3084);
        sessionStorage.setItem("userNameAccount", "L0M14_MM");
        this.userAccount = "L0M14_MM";
      } else {
        if (this.$route.path === "/loading")
          this.$router.replace({ path: "/inforList" });
        localStorage.setItem("userId", 2002);
        sessionStorage.setItem("userNameAccount", "L0210_MM");
        this.userAccount = "L0210_MM";
      }
    }
  },
  mounted() {},
  /*  created() {
    this.loadingFlag = true;
    this.getData(); // 线上打开
    // 本地调试打开
    this.localTest();// 本地调试打开
  }, */
  created() {
     this.loadingFlag = true;
     this.getData(); // 线上打开
     //this.localTest();// 本地调试打开
  },
};
</script>
<style lang="less">
* {
  padding: 0;
  margin: 0;
 /*  list-style: none;
  color: #333; */
  font-size: 12px;
}
button {
  border: none;
  background-color: #0056a0;
  height: 30px;
  width: 58px;
  color: #fff;
  font-weight: 400;
  font-family: Arial;
  margin-left: 18px;
  font-size: 14px;
  &:hover {
    cursor: pointer;
  }
}
.current_button {
  background-color: #0056a0;
  height: 30px;
  width: 58px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-weight: 400px;
  font-family: Arial;
  margin-left: 18px;
  font-size: 14px;
  &:hover {
    cursor: pointer;
  }
}
#app {
  background-color: #eeeeee;
  height: 100%;
  min-height: 100vh;
  .app_content {
    width: 1190px;
    margin: 0 auto;
    font-size: 12px;
    color: #333;
    font-family: "微软雅黑";
    display: flex;
    justify-content: space-between;
    .router {
      width: 150px;
      height: 100%;
      background-color: #d4d4d4;
      height: auto;
      min-height: 50vh;
    }
    .router_view {
      width: 1030px;
    }
  }
}
@media screen and (max-width: 1190px) {
  #app {
    width: 1190px;
  }
}
// 时间选择框样式
.datePickStyle {
  height: 28px;
  width: 144px;
  border: 1px solid #ccc;
  padding: 4px 8px;
  color: #555;
  font-size: 12px;
}
.datePickClass {
  height: 28px;
  width: 144px;
  padding: 4px 8px;
  color: #555;
  font-size: 12px;
}
</style>