skl-www/src/views/list.vue

<template>
  <div class="list">
    <breadcrumb ref="breadcrumb"></breadcrumb>
    <div class="listHome">
      <div class="listBoxLeft">
        <letnav ref="letnav" :menuTree="menu"></letnav>
      </div>
      <div class="box" v-if="!isnew">
        <div class="listBoxRight"  v-if="listTotal > 0">
          <el-card class="listBox" v-for="(item, index) in contentList" :key="index">
            <el-image v-if="item && item.thumbnail" :src="item.thumbnail" class="listimg" @click="newClick(item)"></el-image>
            <el-image v-else :src="thumbnail" class="listimg" @click="newClick(item)"></el-image>
            <div class="text">
              <div class="title" @click="newClick(item)">{{ item.title }}</div>
              <span class="describe">{{ item.describe }}</span>
              <span class="date">{{ item.date | dates }}</span>
            </div>
          </el-card>
          <pagination ref="pagination" class="pagination" :total="listTotal" @query="filterQuery"></pagination>
        </div>
        <el-divider class="divider" v-else>暂无数据</el-divider>
      </div>
      <div class="isnewbox" v-if="isnew">
        <div class="titlebox" v-for="(item, index) in isnewcontentList" :key="index">
          <div class="left" v-for="i in item" :key="i._id">
            <img src="../assets/jt.png" class="jt">
            <span class="text" @click="newClick(i)">{{ i.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';
import letnav from '../components/leftmenu/index.vue';
import pagination from '../components/pagination';
import breadcrumb from '../components/breadcrumb/index.vue';
import { mapState, mapActions } from 'vuex';
export default {
  name: 'listHome',
  components: {
    pagination,
    letnav,
    breadcrumb
  },
  computed: {
    ...mapState(['contentList', 'listTotal', 'menusall']),
    isnewcontentList() {
      return _.chunk(this.contentList, 2);
    }
  },
  data() {
    return {
      code: null,
      pageSize: 10,
      parentCode: null,
      menu: {},
      thumbnail: require('../assets/newimg.jpg'),
      isnew: false
    };
  },
  async mounted() {
    // 所有菜单
    await this.menusQueryAll();
    // 当前菜单参数
    this.code = this.$route.params.code;
    // 顶级菜单参数
    this.parentCode = this.$route.query.parentCode;
    const topahes = await this.topage();
    if (topahes) {
      // 获取一例菜单
      this.menu = this.$setChildrenSession({ menus: this.menusall, iscode: this.parentCode });
      // 控制左侧菜单当前选项
      this.$refs.letnav.setIndex();
      if (this.code == '033' || this.code == '0441' || this.code == '0442' || this.code == '0443') {
        this.isnew = true;
        await this.filterQuery({ filter: {}, paging: { page: 0, size: 100 } });
        return;
      }
      await this.filterQuery();
    }
  },
  methods: {
    ...mapActions(['contentsList', 'menusQueryAll']),
    // 查询函数
    async filterQuery ({ filter = {}, paging = { page: 0, size: 10 } } = {}) {
      filter.bind = this.code;
      if (this.code.length == 2 && this.menu.children) filter.parentCode = this.code;
      await this.contentsList({ filter, paging });
    },
    // 列表点击
    newClick(e) {
      // 获取最后一级菜单
      const item = this.$last({ menus: this.menusall, code: this.code });
      // 缓存写入当前一例菜单
      this.$setParentsetSession({ menus: this.menusall, iscode: item });
      this.menu = this.$setChildrenSession({ menus: this.menusall, iscode: this.parentCode });
      this.$router.push(`/details/${e._id}`);
    },
    topage() {
      const item = this.menusall.find(e => e.code == this.code);
      if (item?.type == '2') {
        this.$router.push(`/pages/${item.code}?parentCode=${this.parentCode}`);
        return false;
      }
      return true;
    }
  },
  filters: {
    dates(e) {
      return moment(e).format('YYYY-MM-DD');
    }
  }
};
</script>
<style lang="scss" scoped>
.divider {
  width: 70%;
  margin: 5% auto;
}
.list {
  width: 60%;
  margin: 0 auto;
  margin-bottom: 5%;
  .listHome {
    width: 100%;
    display: flex;
    .listBoxLeft {
      width: 20%;
      margin-top: 3%;
      margin-right: 5%;
    }
    .box, .isnewbox {
      width: 75%;
      margin-top: 3%;
    }
    .listBoxRight {
      width: 100%;
      .listBox {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 3%;
        ::v-deep .el-card__body {
          display: flex;
          .listimg {
            display: block;
            width: 15%;
            height: 5%;
            cursor: pointer;
          }
          .text {
            width: 70%;
            margin-left: 5%;
            .title {
              cursor: pointer;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 16px;
              line-height: 35px;
              font-weight: 600;
            }
            .describe {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              color: #999;
              font-size: 12px;
            }
            .date {
              width: 100%;
              color: #999;
              line-height: 3em;
            }
          }
        }
      }
    }
  }
  .pagination {
    margin-bottom: 5%;
  }
}
</style>
<style lang="scss" scoped>
.titlebox {
  display: flex;
  width: 100%;
  border-bottom: 1px dashed #999;
  flex-wrap: wrap;
  .left {
    width: 50%;
    line-height: 38px;
    .text {
      margin-left: 5px;
    }
  }
  .left span:hover {
    color: #018dff ;
    cursor: pointer;
  }
}
</style>