ZZ-official-h5/src/views/home/tab.vue

<template>
  <div id="">
    <van-tabs
      @click="onClickTab"
      color="#333"
      title-active-color="#fff"
      animated
    >
      <van-tab
        v-for="(item, index) in tab"
        :key="index"
        :title="item.label"
        :name="item.name"
      >
        <van-empty
          description="暂无数据"
          v-if="notList[item.name].length == 0"
        />
        <el-main v-else v-loading="loading" class="notList_box">
          <div
            class="notList_style"
            v-for="(items, indexs) in notList[item.name]"
            :key="indexs"
            @click="jumpInfo(items)"
          >
            <i></i>
            <div class="title">{{ items.Title }}</div>
            <span class="time">{{
              $methods.onlyFormaHao(items.NewsCreateTime, false)
            }}</span>
          </div>
          <div style="text-align: center" v-if="notList[item.name].length > 0">
            <el-pagination
              :pager-count="3"
              class="paginations"
              @current-change="handleCurrentChange($event, item.name)"
              :current-page.sync="formData1.pageindex"
              :page-size="formData1.pagesize"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-main>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      activeTab: "",
      tab: [
        { label: "最新动态", name: "d0" },
        { label: "政策要闻", name: "d1" },
        { label: "通知公告", name: "d2" },
        { label: "协会动态", name: "d3" },
        // { label: "行业报告", name: "d4" },
      ],
      notList: {
        d0: [],
        d1: [],
        d2: [],
        d3: [],
        d4: [],
      },
      total: 0,
      formData1: {
        pagesize: 10, //每页内容条数
        pageindex: 1, //当前第几页
      },
    };
  },
  created() {
    this.onClickTab("d0");
  },
  methods: {
    //通知列表
    getList(name) {
      return new Promise((resolve, reject) => {
        var data = {
          ...this.formData1,
        };
        if (name == "d0") {
          this.$api
            .XfWebApiGetNewsReList(data)
            .then((res) => {
              this.notList[name] = res.Data.List || [];
              this.total = res.Data.TotalCount;
            })
            .finally(() => {
              this.loading = false;
              resolve();
            });
        } else {
          switch (name) {
            case "d1":
              data.seat = 1;
              break;
            case "d2":
              data.seat = 2;
              break;
            case "d3":
              data.seat = 3;
              break;
            case "d4":
              data.seat = 4;
              break;
            default:
              break;
          }
          this.loading = true;
          this.$api
            .XfWebApiGetNewPositionList(data)
            .then((res) => {
              this.notList[name] = res.Data.List || [];
              this.total = res.Data.TotalCount;
            })
            .finally(() => {
              this.loading = false;
              resolve();
            });
        }
      });
    },
    //Tab切换
    async onClickTab(name, title) {
      if (name == this.activeTab) return;
      this.formData1 = {
        pagesize: 10, //每页内容条数
        pageindex: 1, //当前第几页
      };
      await this.getList(name);
      this.activeTab = name;
    },
    handleCurrentChange(e, name) {
      this.formData1.pageindex = e;
      this.getList(name);
    },
    //跳转详情页
    jumpInfo(e) {
      this.$router.push({
        path: "info",
        query: {
          MenuId: e.MenuId,
          NewsId: e.NewsId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tabs__nav--line {
  border-bottom: 2px solid #1890ff !important;
  padding-bottom: 0px;
  box-sizing: border-box;
}
::v-deep .van-tab--active {
  background-color: #1890ff;
}
::v-deep .van-tabs__line {
  display: none;
}
.notList_box {
  padding: 48px 30px;
  .notList_style {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    &:first-child{
      margin-top: 10px;
    }
    & > i {
      width: 10px;
      height: 10px;
      background-color: rgb(158, 156, 156);
      border-radius: 50%;
      margin-right: 14px;
      flex-shrink: 0;
    }
    & > .title {
      flex: 1;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      color: #222;
      font-weight: 500;
      font-size: 28px;
      margin-right: 20px;
    }
    & > .time {
      color: #636b75;
      font-size: 24px;
      flex-shrink: 0;
    }
  }
}
</style>