bdty_new_web/src/views/Applications/index.vue

<template>
  <div class="products-yemian">
    <div class="container">
      <div class="row">
        <!-- <div class="col-md-3 col-sm-3 products-leul">
          <h4>
            <span class="glyphicon glyphicon-globe" style="margin-right: 3px; vertical-align: middle;"></span>
            热门动态
          </h4>
          <ul class="news-left" @click="handleNews">
            <li v-for="item in hotNewsList" :key="item.ptsid">
              <router-link :to="`/news/detail/${item.ptsid}`" :data-title="item.title">{{ item.title }}</router-link>
            </li>
          </ul>
        </div> -->
        <div class="col-md-12">
          <div class="bread-container">
            <b>您当前的位置：</b>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="item in breadList" :key="item.path">
                <router-link :to="item.path" @click.native="handleClick" :data-title="item.meta.title">{{ item.meta.title }}</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item v-if="planTitle && !$route.meta.isDetail">
                <span class="nav-title">{{planTitle}}</span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="row" v-if="!$route.meta.isDetail" style="margin-top: 10px;">
            <div v-if="caseList.total==0"><el-empty :image-size="200"></el-empty></div>
            <div v-else>
              <div class="col-md-4 col-sm-6 col-xs-12" v-for="item in caseList.list" :key="item.ptsid" style="margin-bottom: 20px;">
                <el-card :body-style="{ padding: '0px' }" shadow="never">
                  <router-link :to="`/applications/detail/${item.ptsid}`" class="products-border">
                    <img :src="item.thumbnail" loading="lazy" :data-src="item.thumbnail" alt="" @click="handleToDetail" :data-title="item.title">
                  </router-link>
                  <div style="padding: 14px;">
                    <strong class="public-title">{{item.title}}</strong>
                    <div class="bottom clearfix">
                      <p class="public-time"></p>
                      <p>
                        <router-link :to="`/applications/detail/${item.ptsid}`">
                          <span @click="handleToDetail" :data-title="item.title" class="products-aniu">查看详情 <i class="fa fa-angle-right"></i></span>
                        </router-link>
                      </p>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
          <div class="row" v-else style="margin-top: 10px;">
            <router-view :key="$route.fullPath"></router-view>
          </div>
          <div class="footer-pagination" v-if="!$route.meta.isDetail">
            <el-pagination
              background
              hide-on-single-page
              layout="total, prev, pager, next"
              :page-size="9"
              :total="caseList.total"
              :current-page="curPage"
              @current-change="handleChangePage"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      planTitle: '',
      curPage: 1
    }
  },

  computed: {
    ...mapGetters([
      'caseList',
    ]),

    breadList() {
      const matche = this.$route.matched
      matche[0].path = '/'
      const length = matche.length
      if (length > 2) {
        matche[length-1].path = ''
        matche[length-1].meta.title = this.planTitle
      }
      return matche
    }
  },

  created() {
    const planTitle = localStorage.getItem('planTitle')
    if (planTitle) this.planTitle = planTitle
  },

  mounted() {
    // this.getNewsList({
    //   limit: 15
    // }).then(res => {
    //   this.hotNewsList = res.list
    // })
    this.getCaseList({
      limit: 9,
      type: 'case'
      // orderField: 'sort'
    })
  },

  methods: {
    ...mapActions({
      getCaseList: 'cases/getCaseLists',
    }),

    handleNews(e) {
      this.planTitle = e.target.dataset.title
      // console.log('newsId', newsId)
      // this.planTitle = this.productsType.filter(item => item.id == productTypeId).map(item => item.name)[0]
      localStorage.setItem('planTitle', this.planTitle)
    },

    handleClick(e) {
      const title = e.target.dataset.title
      if (title == '应用方案') {
        this.planTitle = ''
        localStorage.removeItem('planTitle')
      }
    },

    handleToDetail(e) {
      this.planTitle = e.target.dataset.title
      localStorage.setItem('planTitle', this.planTitle)
    },

    handleChangePage(curPage) {
      this.curPage = curPage
      this.getCaseList({
        type: 'case',
        limit: 9,
        page: curPage,
        // orderField: 'sort'
      })
    }
  },

  beforeDestroy() {
    localStorage.removeItem('planTitle')
  },
  beforeRouteUpdate(to, from, next) {
    if (to.meta.isDetail) {
      to.meta.title = this.planTitle
    }
    next()
  }
}
</script>

<style scoped>
.news-left li {
  display: flex;
}

.news-left li a {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  padding-left: 5px !important;
}

.bread-container {
  display: flex;
  align-items: center;
  line-height: 32px;
  border-bottom: 1px solid #dadada;
}

.bread-container .nav-title {
  font-weight: 600;
  color: #3884c0;
}

.bread-container .nav-title:hover {
  color: #333;
  /* border-bottom: 1px solid #084587; */
}

.el-breadcrumb__item {
  display: flex;
}

.el-breadcrumb__item:last-child a {
  font-weight: 600;
  color: #3884c0;
}

a {
  outline: none;
}

.footer-pagination {
  text-align: right;
  margin-bottom: 20px;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #3884c0;
}

.bottom .public-time {
  color: #666;
  margin-bottom: 5px;
  /* font-size: 12px; */
}
</style>