hemall.terabimsoft.com.cn/plugins/shop_server/components/default/set.vue

<template>
  <div>
    <div class="tag-box" v-if="brandId || filterId_name.length > 0">
      <div class="tag-title">已选择</div>
      <div class="brand-name" v-if="brandId">
        <div><span style="color: #b0b0b0;">品牌：</span>{{brandId_name}} <i @click="clearAll('brand')" class="iconfont icon-close11 finger-point" style="font-size: 12px;padding-left: 5px;"></i></div>
      </div>
      <div class="tag-name" v-if="filterId_name.length > 0">
        <div><span style="color: #b0b0b0;">标签：</span><span v-for="(item,i) in filterId_name" :key="i">{{item}} <em v-if="i!=filterId_name.length-1">，</em></span><i @click="clearAll('tag')" class="iconfont icon-close11 finger-point" style="font-size: 12px;padding-left: 5px;"></i></div>
      </div>
    </div>
    <div class="tag-box" v-if="brand.length > 0">
      <div class="tag-title">
        品牌
      </div>
      <div id="brand-box" class="tag-scroll-content" :class="{'showMore':showMore}">
        <span class="tag-item" :class="{'active': brandId == brand_item.id}" v-for="(brand_item,index) in brand" :key="index" @click="selecbrand(brand_item)">{{brand_item.name}}</span>
      </div>
      <div class="tag-right" v-if="!showMore">
        <div class="tag-more finger-point" @click="showMore = true"><span>更多</span></div>
      </div>
    </div>
    <div class="tag-box" v-if="child && child.length>0  ">
      <div class="tag-title">
        分类
      </div>
      <div id="brand-box" class="tag-scroll-content" >
        <span class="tag-item" :class="{'active': childId == classItem.id,'activeColor': childId == classItem.id}" v-for="(classItem,index) in child" :key="index" @click='selectTap(classItem)' >
          {{classItem.name}}</span>
      </div>
    </div>
    <div class="tag-box" v-if="tagname.length > 0">
      <div class="tag-title">
        标签
      </div>
      <div class="tag-content">
        <div style="margin: 5px" v-for="(tag, index) in tagname" :key="index">
          <el-popover width="300" trigger="hover">
            <div class="tagname-item">
              <span class="tag-item" :class="{'active': filterId.includes(item.id)}" v-for="item in tag.value" :key="item.id" @click="selectname(item)">{{item.name}}</span>
            </div>
            <el-button slot="reference" size="mini">{{tag.name}}</el-button>
          </el-popover>
        </div>
      </div>
    </div>
    <div class="common_left flex flex-j-sb flex-a-c common_title">
      <div class="flex">
        <div class="select_box flex flex-a-c"
             :class="{ active: sort_name == 1, up: sort_status == 2, down: sort_status == 1 }"
             @click="changeStatus(1)"
        >
          综合推荐
          <div class="img" v-if="sort_name == 1">
            <img v-if="sort_status == 2" src="~/assets/images/icon/up_price.png">
            <img v-if="sort_status == 1" src="~/assets/images/icon/down_price.png">
          </div>
          <div class="img" v-else>
            <img src="~/assets/images/icon/normal_price.png">
          </div>
        </div>
        <div class="select_box flex flex-a-c"
             :class="{ active: sort_name == 2, up: sort_status == 2, down: sort_status == 1 }"
             @click="changeStatus(2)"
        >
          销量
          <div class="img" v-if="sort_name == 2">
            <img v-if="sort_status == 2" src="~/assets/images/icon/up_price.png">
            <img v-if="sort_status == 1" src="~/assets/images/icon/down_price.png">
          </div>
          <div class="img" v-else>
            <img src="~/assets/images/icon/normal_price.png">
          </div>
        </div>
        <div class="select_box flex flex-a-c"
             :class="{ active: sort_name == 3, up: sort_status == 2, down: sort_status == 1 }"
             @click="changeStatus(3)"
        >
          价格
          <div class="img" v-if="sort_name == 3">
            <img v-if="sort_status == 2" src="~/assets/images/icon/up_price.png">
            <img v-if="sort_status == 1" src="~/assets/images/icon/down_price.png">
          </div>
          <div class="img" v-else>
            <img src="~/assets/images/icon/normal_price.png">
          </div>
        </div>
      </div>
      <div class="common_right">
        <i style="color: #fa0000" class="el-icon-success"></i><span>根据大部分用户选择的商品，为您推荐！</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  export default {
    props:['child'],
    data() {
      return {
        sort_name: 1,
        sort_status: 1,
        brand: [],
        tagname: [],
        showMore: true,
        filterId: [],
        filterId_name: [],
        brandId: '',
        brandId_name: '',
        childId:''
      };
    },
    computed: {
      ...mapState(["basicSet"])
    },
    mounted() {
      this.$nextTick(()=> {
        if(this.basicSet.set.pc_temp == 2) {
          this.getBrand();
          this.getTag();
        }
      })
    },
    methods: {
      selectTap(item){
        console.log(item,'sssss')
        this.childId = item.id;
        this.$emit('changeCategory', item.id)
      },
      getBrand() {
        this.fun.$post("goods.brand.get-brand").then(res => {
          this.brand = res.data.data || [];
          this.$nextTick(()=>{
            if(document.querySelector('#brand-box') && document.querySelector('#brand-box').offsetHeight > 58){
              this.showMore = false;
            }
          })
        });
      },
      getTag() {
        this.fun.$get("goods.filtering.index")
          .then(res => {
            if (res.result == 1) {
              this.tagname = res.data || [];
              for (let i = 0; i < this.tagname.length; i++) {
                for (let y = 0; y < this.tagname[i].value.length; y++) {
                  this.tagname[i].value[y].record = 1;
                }
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      selecbrand(item) {
        if(this.brandId == item.id) {
          this.brandId = "";
          this.brandId_name = '';
        }else {
          this.brandId = item.id;
          this.brandId_name = item.name;
        }
        let obj = this.getAllStatus();
        this.$emit('changeStatus', obj)
      },
      selectname(item) {
        if (this.filterId.includes(item.id)) {
          this.filterId = this.filterId.filter((obj)=> {
            return obj != item.id
          });
          this.filterId_name = this.filterId_name.filter((obj)=> {
            return obj != item.name
          });
        } else {
          this.filterId.push(item.id);
          this.filterId_name.push(item.name);
        }
        let obj = this.getAllStatus();
        this.$emit('changeStatus', obj)
      },
      clearAll(flag) {
        if(flag === 'tag') {
          this.filterId = [];
          this.filterId_name = [];
        }
        if(flag === 'brand') {
          this.brandId = "";
          this.brandId_name = '';
        }
        let obj = this.getAllStatus();
        this.$emit('changeStatus', obj)
      },
      getAllStatus() {
        return {
          sort_name: this.sort_name,
          sort_status: this.sort_status,
          brandId: this.brandId,
          filterId: JSON.parse(JSON.stringify(this.filterId))
        }
      },
      changeStatus(n) {
        if(this.sort_name != n) {
          this.sort_status = 1
        }else {
          if (this.sort_status == 2) {
            this.sort_status = 1
          } else {
            this.sort_status = 2
          }
        }
        this.sort_name = n;
        let obj = this.getAllStatus();
        this.$emit('changeStatus', obj)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .tag-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 15px 0;
  }
  .tag-title {
    font-size: 16px;
  }
  .tag-title, .tag-right{
    flex: 0 0 70px;
  }
  .brand-name, .tag-name {
    border: 1px solid var(--color);
    border-radius: 3px;
    padding: 2px 5px;
    margin: 5px;
    cursor: default;
  }
  .tag-more {
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    padding: 2px;
    margin-left: 10px;
  }
  .tag-more:hover {
    border: 1px solid var(--color);
  }
  .tag-scroll-content, .tag-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  }
  
  .tag-scroll-content {
    max-height: 60px;
    overflow: hidden;
    &.showMore {
      overflow-y: scroll;
      max-height: 120px;
    }
  }
  .tag-scroll-content::-webkit-scrollbar { width: 0 !important }
  .tag-scroll-content { overflow: -moz-scrollbars-none; }
  .tagname-item {
    display: flex;
    flex-wrap: wrap;
  }
  .tag-item {
    cursor: pointer;
    color: var(--color);
    margin: 5px 10px 5px 10px;
  }
  .activeColor{
    color: #fa0000 !important;
  }
  .tag-item:hover, .tag-item.active {
    color: #fa0000;
  }
  .common_left {
    margin-bottom: 30px;
    .select_box {
      font-size: 16px;
      margin-right: 80px;
      cursor: pointer;
      .img {
        margin: 5px 0 0 16px;
      }
    }
    .active {
      color: #fa0000;
    }
  }
</style>