zkPCproject/src/page/check/index.vue

<template>
  <div class="box-center">
    <div class="head">
      <div>质控管家管理系统</div>
      <div class="callback" @click="goloign" style="cursor: pointer">
        {{ backFlag ? "返回" : "退出" }}
      </div>
    </div>
    <div class="hid">选择后台</div>
    <div class="content">
      <!-- 质控后台 -->
      <div class="tab" @click="goindex(0)" v-if="tabFlag1">
        <div><img src="/img/checktab1.png" alt="" /></div>
        <div class="text">质控管家后台</div>
      </div>
      <div class="tab" @click="goindex(1)" v-if="tabFlag2">
        <div><img src="/img/checktab2.png" alt="" /></div>
        <div class="text">代理商后台</div>
      </div>
      <div class="tab" @click="goindex(2)" v-if="tabFlag3">
        <div><img src="/img/checktab3.png" alt="" /></div>
        <div class="text">公司后台</div>
      </div>
      <div class="tab" @click="goindex(3)" v-if="tabFlag4">
        <div><img src="/img/checktab4.png" alt="" /></div>
        <div class="text">楼盘后台</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 质控管家标志
      tabFlag1: false,
      // 代理商标志
      tabFlag2: false,
      // 公司后台标志
      tabFlag3: false,
      // 楼盘后台标志
      tabFlag4: false,
      backFlag: false,
    };
  },
  computed: {},
  mounted() {
    // console.log(this.$route.query.backFlag);
    if (this.$route.query.backFlag) {
      this.backFlag = this.$route.query.backFlag;
    }
    this.getTab();
  },
  methods: {
    // 获取可选权限对
    getTab() {
      this.$api.api.getTab().then((res) => {
        // console.log(res)
        // 循环数组，给定各种标志
        this.tabFlag1 = true;
        this.tabFlag2 = true;
        this.tabFlag3 = true;
        this.tabFlag4 = true;
        return
        res.data.map((item) => {
          if (item.orgType == 0) {
            this.tabFlag1 = true;
          }
          if (item.orgType == 1) {
            this.tabFlag2 = true;
          }
          if (item.orgType == 2) {
            this.tabFlag3 = true;
          }
          if (item.orgType == 3) {
            this.tabFlag4 = true;
          }
        });
      });
    },
    goloign() {
      // 对此进行判断，获取this.$route的参数，如果没有则退出登陆，有的话就返回之前的页面
      if (this.backFlag) {
        this.$router.back();
      } else {
        this.$confirm("是否退出系统, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.push({ path: "/login" });
          });
        });
      }
    },
    goindex(idx) {
      localStorage.setItem("orgType", idx);
      if (idx == 0) {
        // 质控管家后台
        this.$router.push({ path: "/wel" });
      }
      if (idx == 1) {
        // 代理商
        this.$router.push({ path: "/chose", query: { flag: 1 } });
      }
      if (idx == 2) {
        // 公司后台
        this.$router.push({ path: "/chose", query: { flag: 2 } });
      }
      if (idx == 3) {
        // 楼盘后台
        this.$router.push({ path: "/chose", query: { flag: 3 } });
      }

      // this.$router.push({ path: "/chose" });
    },
  },
};
</script>

<style lang="scss" scoped >
.box-center{
  min-width: 1500px;
}
.head {
  height: 64px;
  background: #409eff;
  display: flex;
  padding: 0 20%;
  box-sizing: border-box;
  justify-content: space-between;
  line-height: 64px;
  color: #fff;
  font-size: 24px;
  .callback {
    font-size: 14px;
  }
}
.hid {
  margin-top: 25px;
  height: 50px;
  background: #f8f8f8;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  color: #32363d;
}
.content {
  margin-top: 30px;
  padding: 0 20%;
  display: flex;
  justify-content: space-around;
  .tab {
    width: 225px;
    height: 225px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    text-align: center;
    cursor: pointer;
    img {
      height: 88px;
      width: 88px;
      margin-top: 47px;
    }
    .text {
      font-size: 20px;
      margin-top: 30px;
      color: #333333;
      line-height: 20px;
    }
  }
}
</style>