hemall.terabimsoft.com.cn/plugins/shop_server/components/microHome/recommendBox.vue

<template>
  <div>
    <div class="recommend-box" v-if="show_recommendList.length > 0">
      <h2 class="recommend-title">推荐内容</h2>
      <ul class="recommend-list-box finger-point">
        <li class="recommend-list-item" v-for="(item, index) in show_recommendList" :key="index" @click="getMicroDetails(item.id)">
          <p class="top">
            <span class="rank">{{index+1}}</span>
            <span class="article-title overflow-hide">{{item.title}}</span>
            <span class="watch-num">
                  <i class="iconfont icon-fontclass-yulan"></i>
                  {{item.browse_num}}
                </span>
          </p>
          <p class="article-content overflow-hide"><span v-html="item.contents"></span></p>
        </li>
      </ul>
      <p class="change-item finger-point" v-if="recommend_total>5" @click.stop="changeRecommend">
        <i class="iconfont icon-fontclass-gengxin"></i><span>换一批</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      recommend_page: 1,
      recommend_total: 0,
      recommendList: [],
      show_recommend_index: 0,
      show_recommendList: [],
    };
  },
  mounted() {
    this.getRecommendTrick();
  },
  methods: {
    getMicroDetails(stickid) {
      if(this.fun.getSiteRoot() == "http://localhost:82") {
        this.toUrl('microcommentdetails-tid',{tid: stickid})
      }else {
        window.open(this.fun.getSiteRoot() + `/plugins/shop_server/microcommentdetails/${stickid}?i=` +this.fun.getKeyByI(), "_blank");
      }
    },
    toUrl(url, params) {
      this.$router.push(this.fun.getUrl(url, params));
    },
    changeRecommend() {
      // console.log(this.show_recommend_index,this.recommendList.length,this.recommend_total)
      if(this.show_recommend_index + 5 > this.recommend_total) {
        this.show_recommend_index = 0;
      }
      if(this.show_recommend_index + 5 >= this.recommendList.length && this.recommendList.length < this.recommend_total) {
        this.recommend_page += 1;
        this.getRecommendTrick()
      }
      this.show_recommend_index = this.show_recommend_index + 5;
      this.show_recommendList = this.recommendList.slice(this.show_recommend_index,this.show_recommend_index + 5);
    },
    getRecommendTrick() {
      this.fun.$get("plugin.micro-communities.api.pc.index.recommendTrick", {page: this.recommend_page}, "load").then(response => {
        if (response.result == 1) {
          this.recommend_total = response.data.total;
          if(this.recommend_total > 0) {
            this.$emit('changeRecommend', true);
          }
          this.recommendList = this.recommendList.concat(response.data.data || []);
          this.show_recommendList = this.recommendList.slice(this.show_recommend_index,this.show_recommend_index+5);
        } else {
          this.$message.error(response.msg);
        }
      });
    },
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .recommend-box {
    margin-top: 8px;
    background-color: #ffffff;
    .recommend-title {
      padding: 15px 20px;
      border-bottom: 1px solid #efefef;
    }
    .recommend-list-item {
      position: relative;
      margin: 0 19px;
      padding: 16px 0;
      .top {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .rank {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 8px;
        color: #ec544a;
      }
      .article-title {
        flex: 1;
        width: 0;
        color: #2a2a2a;
        font-weight: bold;
      }
      .watch-num {
        margin-left: 8px;
        color: #6b6b6b;
      }
      .article-content {
        width: 240px;
        height: 20px;
        color: #6b6b6b;
      }
    }
    .recommend-list-item:hover {
      .article-title {
        color: var(--color);
      }
    }
    .recommend-list-item::after {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: #e4e4e4;
    }
    .recommend-list-item:nth-child(4), .recommend-list-item:nth-child(5) {
      .rank{
        color: #ff8200;
      }
    }
    .change-item {
      padding: 10px 0;
      text-align: center;
      letter-spacing: 1px;
      color: #555555;
      .icon-fontclass-gengxin {
        margin-right: 5px;
        vertical-align: middle;
      }
    }
  }
</style>