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

<template>
  <div class="pc_temp02">
    <div class="left">
      <div class="classification-box" v-if="basicCategory.data">
        <div
          class="classification-cell"
          v-for="(item, ind) in basicCategory.data.slice(0, 10)"
          :key="ind"
          @click.stop="toCategoryChild({id: item.id})"
        >
          <div class="first-class">{{ item.name }}</div>
          <div class="secondary-class">
            <div
              class="secondary-name"
              @click.stop="toCategoryChild({ id: obj.id })"
              v-for="(obj, bidx) in item.children"
              :key="bidx"
            >
              {{ obj.name }}
            </div>
          </div>
        </div>
        <div
          class="classification-cell"
          v-if="basicCategory.total > 10"
          @click.stop="toUrl('category')"
        >
          <div class="first-class">查看更多分类</div>
        </div>
      </div>
      <div class="recommend">
        <div class="reTitle">
          <div class="line"></div>
          店铺热销
        </div>
        <div class="goodLis">
          <div class="goods_wrap flex">
            <div
              class="goods"
              v-for="(item, index) in hotGoods"
              :key="index"
              @click="toGoods(item)"
            >
              <img v-lazy="item.thumb" />
              <div class="goods_info flex flex-col">
                <div class="title">{{ item.title }}</div>
                <div class="price col_red">
                  <span
                    style="
                      font-size: 14px;
                      color: #666;
                      display: inline-block;
                      margin-right: 10px;
                    "
                    >{{
                      basic_info.lang &&
                      basic_info.lang.goods &&
                      basic_info.lang.goods.price
                        ? basic_info.lang.goods.price
                        : "现价"
                    }}:</span
                  ><span style="font-size: 18px">¥</span>{{ item.price }}
                </div>
              </div>
            </div>
            <div class="no-goods" v-if="hotGoods && hotGoods.length <= 0">
              暂无更多
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="class-box">
        {{ slides.parent && slides.parent.name ? slides.parent.name : "全部" }}
        > <span style="color: var(--color)">{{ slides.name }}</span>
      </div>
      <set @changeStatus="changeStatus" @changeCategory='changeCategory' :child='slides.children' ></set>
      <goods :list="goodList" :pc_temp="true"></goods>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import goods from "~/components/default/goods";
import set from "~/components/default/set";
export default {
  props: {
    slides:{
      type: null,
    },
    goodList:{
      type: null,
    },
    hotGoods: {
      type: null,
    },
  },
  components: {
    goods,
    set,
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState(["basicSet", "basicCategory", "basic_info"]),
  },
  methods: {
    changeCategory(thrId){
      console.log('eeeeeeee',thrId)
      this.$emit('changeCategory', thrId);
    },
    toUrl(url,params,query) {
      this.$router.push(this.fun.getUrl(url,params,query));
    },
    toGoods(item) {
      let id = item.id || item.goods_id;
      if(this.$baseURL) {
        // 静态部署环境下
        window.open(this.fun.getSiteRoot() + "/plugins/shop_server/goods?i=" +this.fun.getKeyByI()+'&id='+id, "_blank");
      }else {
        window.open(this.fun.getSiteRoot() + "/plugins/shop_server/goods/"+ id +"?i=" +this.fun.getKeyByI(), "_blank");
      }
    },
    toCategoryChild(params) {
      if (this.category_template === "03") {
        if (this.$baseURL) {
          // 静态部署环境下
          this.$router.push(this.fun.getUrl("category_child", {}, params));
        } else {
          this.$router.push(this.fun.getUrl("category_child-id", params));
        }
      } else {
        if (this.$baseURL) {
          // 静态部署环境下
          this.$router.push(this.fun.getUrl("catelist", {}, params));
        } else {
          this.$router.push(this.fun.getUrl("catelist-id", params));
        }
      }
    },
    changeStatus(obj) {
      if (obj.sort_name == 1) {
        this.sort_name = "comment_num"
      } else if (obj.sort_name == 2) {
        this.sort_name = "show_sales"
      } else if (obj.sort_name == 3) {
        this.sort_name = "price"
      }

      if (obj.sort_status == 1) {
        this.sort_status = "desc";
      } else {
        this.sort_status = "asc";
      }

      this.brandId = obj.brandId;
      this.filterId = obj.filterId;
      this.$emit('handleChange', {
        brandId:this.brandId,
        filterId:this.filterId.toString(),
        sort_name: this.sort_name,
        sort_status: this.sort_status,
        page: 1,
        key: 'good'
      });
      // this.handleCurrentChange({page: 1}, 'good')
    },
      // handleCurrentChange(val, flag) {
      //   this.fun.$post('goods.goods.search-goods',
      //     {
      //       search: {category: this.$route.params.id,brand_id:this.brandId,filtering:this.filterId.toString()},
      //       page: val.page,
      //       order_field: this.sort_name,
      //       order_by: this.sort_status,
      //     }, '正在获取').then(res => {
      //     if (res.result === 1) {
      //       if(flag !== 'good') {
      //         document.body.scrollIntoView();  //滚回顶部
      //       }else {
      //         this.$nextTick(()=> {
      //           document.documentElement.scrollTop = document.getElementById('index_content').offsetTop - 115;
      //         });
      //       }
      //       this.$emit('change',res.data);
      //     } else {
      //       this.$emit('change',{
      //         data: [],
      //         total: 0,
      //       });
      //       this.$message.error(res.msg);
      //     }
      //   })
      // }
  },
};
</script>
<style lang="scss" scoped>
.pc_temp02 {
  display: flex;
  .left {
    margin-right: 15px;
    .recommend {
      width: 220px;
      border-radius: 8px;
      padding: 7px;
      background: #fff;
      box-sizing: border-box;
      margin-top: 20px;
      .goodLis {
        width: 100%;
        margin-top: 6px;
        display: flex;
        .goods_wrap {
          flex-wrap: wrap;
          justify-content: center;
          padding-top: 10px;
          .goods {
            padding-top: 10px;
            border: 1px solid rgba(191, 191, 191, 0.3);
            border-radius: 6px;
            // box-shadow: 1px 1px 2px rgba(191, 191, 191, 0.3);
            width: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff;
            // margin-right: 12px;
            box-sizing: border-box;
            margin-bottom: 20px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.5s ease;
            img {
              width: 170px;
              height: 170px;
              overflow: hidden;
            }
            .goods_info {
              width: 100%;
              font-size: 16px;
              padding: 15px;
              height: 130px;
              box-sizing: border-box;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: flex-start;
              .title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .price {
                font-size: 18px;
              }
            }
          }
          .goods:hover {
            opacity: 0.8;
            box-shadow: 0px 4px 8px 0px rgba(191, 191, 191, 0.6);
            img {
              transform: scale(1.04);
              transition: all 0.5s ease;
            }
          }
          .goods:nth-child(5n) {
            margin-right: 0;
          }
          .no-goods {
            margin: 20px auto;
            font-size: 16px;
            color: var(--color);
            text-align: center;
          }
        }
      }
      .reTitle {
        margin-left: 10px;
        display: flex;
        font-size: 16px;
        .line {
          width: 4px;
          height: 20px;
          background: var(--color);
          border-radius: 2px;
          margin-right: 10px;
        }
      }
    }
  }
  .right {
    background: #fff;
    flex: 1;
    padding: 9px 17px;
    border-radius: 8px;
  }
  .class-box {
    margin: 15px 0;
  }
}
.classification-box {
  background-color: #fff;
  width: 220px;
  height: 480px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-top: 6px solid var(--dark_color);
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  margin-top: -10px;

  .classification-cell {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
    .first-class {
      font-size: 14px;
      line-height: 28px;
      color: #000000;
      font-weight: bold;
      &:hover {
        cursor: pointer;
        color: var(--color);
      }
    }
    .secondary-class {
      display: flex;
      flex-wrap: wrap;

      .secondary-name {
        font-size: 12px;
        color: #8c8c8c;
        padding-right: 8px;
        text-align: left;
        min-width: 50%;
        box-sizing: border-box;
        line-height: 26px;
        &:hover {
          cursor: pointer;
          color: var(--color);
        }
      }
    }
  }
  .classification-cell:first-child {
    padding: 0;
  }
}
.classification-box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>