spfm-market-front/src/pages/main/terminals/advertisement.vue

<template>
  <div>
    <div class="container">
      <div class="container-box">
        <h2 class="font-ui">素材库</h2>
        <div class="adv-type">
          <div
            v-for="item in typeList"
            :key="item.dataCode"
            @click="advmaterial(item)"
          >
            <span><i class="el-icon-folder-opened"></i></span>
            <span>{{ item.dataName }}</span>
          </div>
        </div>
        <h2 class="font-ui" style="margin-top: 20px">广告管理</h2>
        <div class="adv-box">
          <div class="adv-tit" @click="jumpadv('0')">
            <i class="el-icon-time"></i>
            <span
              >待审批 
              <!-- <em>{{ info.approvalNum || 0 }}</em> -->
              </span
            >
          </div>
          <div class="adv-tit" @click="jumpadv('1')">
            <i class="el-icon-time"></i>
            <span
              >已审批 
              <!-- <em>{{ info.approvalNum || 0 }}</em> -->
              </span
            >
          </div>
          <div class="adv-tit" @click="jumpadv('2')">
            <i class="el-icon-time"></i>
            <span
              >我发起的
               <!-- <em>{{ info.approvalNum || 0 }}</em> -->
               </span
            >
          </div>
          <div class="adv-tit" @click="jumpadv('3')">
            <i class="el-icon-notebook-1"></i>
            <!-- <span>定稿 <em>{{info.designNum||0}}</em></span> -->
            <span
              >定稿 
              <!-- <em>{{ info.finalNum || 0 }}</em> -->
              </span
            >
          </div>
          <div class="adv-tit" @click="jumpinfo">
            <span>广告设计费明细</span>
          </div>
          <div class="adv-tit" @click="advadd">
            <i class="el-icon-plus"></i>
            <span>申请</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      info: {},
      typeList: [],
    };
  },
  methods: {
    jumpinfo() {
      this.$router.push({
        path: "/advdetailed",
      });
      this.setabList("广告设计费明细", "/advdetailed");
    },
    advadd() {
      this.$router.push({
        path: "/advertincrease",
      });
      this.setabList("广告申请", "/advertincrease");
    },
    jumpadv(v) {
      this.$router.push({
        path: "/advcheck",
        query: {
          type: v,
        },
      });
      this.setabList("广告管理列表", "/advcheck?type=" + v);
    },
    advmaterial(v) {
      this.$router.push({
        path: "/advertmaterial",
        query: {
          type: v.dataCode,
        },
      });
      this.setabList("素材库", "/advertmaterial?type=" + v.dataCode);
    },
    setabList(n, p) {
      let params = {
        children: "",
        name: n,
        rountPath: p,
        target: "_self",
      };
      for (let i = 0; i < this.$store.state.tabList.length; i++) {
        if (this.$store.state.tabList[i].name === params.name) {
          this.$store.state.tabList[i] = params;
        }
      }
      let set = new Set([...this.$store.state.tabList, params]);
      set.add(params);
      this.$store.commit("setDefaultActive", params.rountPath);
      this.$store.commit("setTabList", Array.from(set));
    },
    getlist() {
      this.$http({
        url: "/market/cadv/queryMkAdvStsNum",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.info = res.data;
      });
    },
    gettype() {
      this.$http({
        url: "/sysmgr/cfgDataDicts/queryMap",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCodePks: "materType",
        },
      }).then((res) => {
        this.typeList = res.data.body.materType;
      });
    },
    getUser() {
      this.userInfo = JSON.parse(window.sessionStorage.userInfo);
    },
  },
  mounted() {
    this.gettype();
    // this.getUser();
    this.getlist();
  },
  created() {},
};
</script>
<style scoped lang="scss">
.container-box {
  padding: 0 30px;
  height: calc(100% - 40px);
  overflow-y: scroll;
  padding-bottom: 20px;
}
.adv-box {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  div {
    display: inline-block;
    cursor: pointer;
    .el-card {
      width: 100%;
    }
    i {
      margin-right: 10px;
    }
  }

  .adv-tit {
    width: 28%;
    border: 1px solid transparent;
    border-radius: 5px;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    em {
      float: right;
      margin-right: 20px;
      font-style: normal;
      color: #0074d9;
    }
  }
  .adv-tit:hover {
    border: 1px solid #cfe8fc;
    background: #cfe8fc;
  }

  .adv-add {
    width: 100px;
  }
}
.adv-type {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  // border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  div {
    width: 24%;
    text-align: center;
    height: 80px;
    overflow: hidden;
    min-width: 100px;
    cursor: pointer;
    padding-top: 10px;
    margin: 10px 0;
  }
  div:hover {
    background: #cfe8fc;
    border-radius: 5px;
  }
  span {
    width: 100%;
    display: inline-block;
    height: 40px;
    // line-height: 40px;
    i {
      color: #0074d9;
      font-size: 36px;
    }
  }
}
</style>