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";
export default {
  components: {
    HeaderBanner,
    Navigation,
    LoginInfo,
    Routerbanner,
    FooterBanner,
  },
  data() {
    return {
      isManufacturer: "manufacturer", // distributor 经销商 manufacturer 厂商
      userAccount: "",
      userToken: "",
      loadingFlag: true,
    };
  },
  methods: {
    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 {
            if (process.env.NODE_ENV === "development") {
              this.loadingFlag = false;
              console.log(this.loadingFlag)
            } else {
              let message = res.data.message;
              alert(message);
            }
          }
        })
        .catch((err) => {
          alert("无法校验的字符串");
          console.log(err);
        });
    },

    // 测试接口
    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 || {};
        sessionStorage.setItem("setToken", query.token);
        this.userToken = query.token || 'dXNlcklkPTEwMDEmYWNjb3VudD1MMDIxMF9NTSZmcm9tPXNpd2VpJnRpbWVzdGFtcD0xNjE4NTU2MTQ4JnNpZ249MWI3MmIwODkzNmZhNDdmMDU5MDRiNDc3N2FkOTdkMTI==';
        console.log("token:", this.userToken);
        this.getTokenRequest();
      }
    },
  },
  mounted() {},
  created() {
    this.loadingFlag = true;
    this.getData();
  },
};
</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: 400px;
  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;
  }
}
</style>