JHVip/src/App.vue

<template>
  <div id="app">
    <div class="bg"></div>
    <TopNav v-if="showNav" />
    <LeftNav v-if="showNav" />
    <div class="app_content">
      <router-view />
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav/TopNav";
import LeftNav from "@/components/LeftNav/LeftNav";
import { mapActions } from "vuex";
export default {
  name: "App",
  provide() {
    return {
      checkCode: this.checkCode,
    };
  },
  components: {
    TopNav,
    LeftNav,
  },
  data() {
    return {
      showNav: false, // 是否显示导航
    };
  },
  computed: {},
  watch: {
    $route(to) {
      this.initUrl(to.query);
      if (
        to.name === "NotFound" ||
        to.name === "Login" ||
        to.name === "Forget" ||
        to.name === "Reg"
      ) {
        this.showNav = false;
        return;
      }
      this.showNav = true;
    },
  },
  created() {
    this.initUrl(this.$route.query);
  },
  mounted() {
    const { name } = this.$route;
    if (
      name === "NotFound" ||
      name === "Login" ||
      name === "Forget" ||
      name === "Reg"
    ) {
      this.showNav = false;
    }
  },
  methods: {
    ...mapActions([
      "userInfoAction",
      "queryAction",
      "isLoginAction",
      "userProfitAction",
    ]),

    // 获取已赚取佣金
    onProfit() {
      this.$api.profit().then((res) => {
        this.checkCode(res);
        const { code, data } = res.data;
        if (code) {
          return;
        }
        // 成功 todo
        this.userProfitAction(data);
      });
    },

    /**
     * 初始化路由地址
     */
    initUrl(query) {
      this.queryAction({ ...query });
    },

    // 校验返回值
    checkCode(res) {
      // 请求超时
      if (!res) {
        this.$notify({
          message: "当前网络拥堵, 请重试",
          type: "warning",
        });
        return;
      }
      const { code, msg } = res.data;
      if (!code) {
        return;
      }
      switch (code) {
        // 2 未登录
        case 2:
          localStorage.removeItem("userInfo");
          this.userInfoAction(false);
          this.userInfoAction({});
          this.$router.push({
            name: "Login",
          });
          this.$notify({
            message: msg,
            type: "warning",
          });
          break;
        default:
          this.$notify({
            message: msg,
            type: "warning",
          });
      }
    },

    // 请求用户信息
    getUserInfo() {
      this.$api.info().then((res) => {
        this.checkCode(res);
        const { data, code, msg } = res.data;
        // 错误
        if (code) {
          return;
        }
        // 成功
        this.$utils.setCookie("userInfo", JSON.stringify(data), 7);
        this.userInfoAction(data);

        // 用户佣金详情
        this.onProfit();
      });
    },
  },
};
</script>

<style lang="less">
.el-dialog {
  min-width: 500px !important;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #555555;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
  }
  .app_content {
    width: 90%;
    min-width: 1120px;
    margin: 0 auto;
    padding-top: 85px;
    padding-left: 200px;
    position: relative;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  // 所有分页的样式
  .el-pager li,
  .el-pager li.btn-quickprev,
  .el-pager li.btn-quicknext,
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    font-size: 16px;
    font-weight: 500;
    background: transparent;

    &:hover {
      color: #409eff;
    }
  }
  .el-pager li.active {
    font-weight: 600;
  }
  .el-pagination button:disabled {
    color: #919fb9;
    &:hover {
      color: #919fb9;
    }
  }
  .el-pagination,
  .el-pager li.btn-quicknext,
  .el-pager li.btn-quickprev,
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    color: #555555;
    background-color: transparent;
  }

  .el-pagination__jump {
    color: #555555;
  }

  .el-textarea__inner {
    max-height: 100px;
  }

  textarea,
  textarea::-webkit-input-placeholder {
    font-family: "微软雅黑";
  }

  .el-input__inner {
    font-size: 16px;
    // color: #ededed;
    // border: 1px solid #686868;
    // background-color: transparent;
    // &:hover {
    //   border: 1px solid #686868;
    // }
  }

  .el-textarea textarea {
    // overflow-y: hidden;
  }
}
.el-notification__content {
  margin: 0;
}
</style>