YFYC-H5/yfyc/src/views/Serve/RecommendedPath.vue

<template>
  <div class="recommended-path">
    <SearchBar class="search-bar" @search="onSearch"></SearchBar>
    <div class="keywords">
      <h2>推荐</h2>
      <button
        class="keyword"
        :class="{
          active: item.isActive,
        }"
        v-for="(item, index) in tagList"
        :key="index"
        @click="onClickTag(index)"
      >
        {{item.name}}
      </button>
    </div>
    <div class="card-list">
      <article
        v-for="(item, idx) in pathList"
        :key="item.id"
        @click="$router.push({
          name: 'RecommendedPathDetail', query: {id: item.id}
        })"
      >
        <div class="left">
          <img :src="require(`@/assets/img/service/path/${item.id}/1.jpg`)" alt="" draggable="false">
        </div>
        <div class="right">
          <h3>{{item.name}}</h3>
          <ul class="tags">
            <li
              class="tag"
              v-for="(item, index) in item.tagList"
              :key="index"
            >
              {{item}}
            </li>
          </ul>
          <div class="bottom">
            <div class="time">{{item.publicDate}}</div>
            <!-- <div class="view-count">
              <img class="icon" src="@/assets/img/service/eye.png" alt="" draggable="false">
              666
            </div> -->
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script>
import SearchBar from "@/components/SearchRedBtn.vue";
import serveData from "@/assets/data/serve/data.js";

export default {
  components: {
    SearchBar,
  },
  data() {
    return {
      keyword: '',
      tagList: serveData.pathTagList.map((item) => {
        return {
          name: item,
          isActive: false,
        }
      }),
    }
  },
  computed: {
    pathList() {
      return serveData.pathList.filter((item) => {
        const activeTagList = this.tagList.filter((item) => {
          return item.isActive
        })
        if (!activeTagList.length) {
          return true
        } else {
          let ret = false
          for (const activeTag of activeTagList) {
            if (item.tagList.includes(activeTag.name)) {
              ret = true
              break
            }
          }
          return ret
        }
      }).filter((item) => {
        if (!this.keyword) {
          return true
        } else {
          return item.name.includes(this.keyword)
        }
      })
    }
  },
  methods: {
    onSearch(v) {
      this.keyword = v
    },
    onClickTag(idx) {
      this.tagList[idx].isActive = !this.tagList[idx].isActive
    }
  }
}
</script>

<style lang="less" scoped>
.recommended-path {
  background-color: #fff;
  height: calc(100% - 80px);
  overflow: auto;
  padding: 6.1vw 4.5vw 4.5vw 4.5vw;
  display: flex;
  flex-direction: column;
  .search-bar {
    flex: 0 0 auto;
  }
  .keywords {
    margin-top: 4.1vw;
    margin-right: -4.5vw;
    flex: 0 0 auto;
    > h2 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
      margin-bottom: 3.2vw;
    }
    > button {
      &.active {
        background: #fe726b;
        color: #fff;
      }
      background: #F4F4F4;
      border-radius: 0.5vw;
      padding: 2.5vw 4vw;
      font-size: 2.7vw;
      color: #333333;
      margin-right: 4.5vw;
      margin-bottom: 3.2vw;
    }
  }
  .card-list {
    flex: 1 0 1px;
    overflow: auto;
    > article {
      height: 29.6vw;
      background: #F7F8FA;
      box-shadow: 0vw 0.5vw 1.1vw 0vw rgba(109,128,166,0.29);
      border-radius: 1.1vw;
      overflow: hidden;
      margin-right: 1.1vw;
      margin-bottom: 5.6vw;
      display: flex;
      > .left {
        height: 100%;
        width: 21.3vw;
        flex: 0 1 auto;
        > img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 1.1vw;
        }
      }
      > .right {
        flex: 0 1 auto;
        width: 69.7vw;
        padding: 2.2vw 2vw 2.7vw 2vw;
        > h3 {
          font-size: 3.7vw;
          color: #333333;
          line-height: 6.4vw;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 3vw;
        }
        > ul.tags {
          margin-bottom: 5vw;
          > li.tag {
            border: 0.3vw solid #FE6E69;
            border-radius: 0.5vw;
            margin-right: 2.9vw;
            padding: 0.8vw 2vw;
            font-size: 2.7vw;
            color: #FE6E69;
            letter-spacing: 0.2em;
          }
        }
        > .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 2.7vw;
          color: #333333;
          > .time {
          }
          > .view-count {
            display: flex;
            align-items: center;
            > img {
              width: 3.3vw;
              height: 2.5vw;
              margin-right: 0.9vw;
            }
          }
        }
      }
    }
  }
}
</style>