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

<template>
  <div class="cargory_all_box">
    <template v-if="show_type === 'all'">
      <div class="category_box_all" v-for="categoryItem in category" :key="categoryItem.id">
        <div class="category_title" @click.stop="toCategoryChild({id: categoryItem.id})">
          <span class="line"></span><span>{{categoryItem.name}}</span>
        </div>
        <div class="category_box flex">
          <div class="category_item flex box flex-col flex-a-c" v-for="item in categoryItem.children" :key="item.id"
               @click.stop="toCategoryChild({id: item.id})">
            <div class="circle">
              <img :src="item.thumb_src" alt=""/>
            </div>
            <div class="box_title">{{item.name}}</div>
          </div>
          <div class="no-goods" v-if="categoryItem.children.length <= 0">
            暂无更多
          </div>
        </div>
      </div>
    </template>

    <div class="category_box flex" v-if="show_type === 'three'">
      <div class="category_item flex box flex-col flex-a-c" v-for="item in category" :key="item.id" @click="changeCategory(item)">
        <div class="circle">
          <img :src="item.thumb" alt=""/>
        </div>
        <div class="box_title">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    props: {
      show_type: String,
      category: Array
    },
    data() {
      return {
        category_template: "03"
      };
    },
    computed: {
      ...mapState(["basicSet", "basic_info"]),
    },
    mounted() {
      // 获取分类模板
      if (this.basic_info.home.item && this.basic_info.home.item.is_decorate === 1) {
        if (this.basic_info.home.item.ViewSet.category.is_default != 0) {
          this.category_template = this.basic_info.home.item.ViewSet.category.code.substring(8);
        } else {
          this.category_template = "03"
        }
      }
    },
    methods: {
      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));
          }
        }
      },
      toUrl(url,params) {
        this.$router.push(this.fun.getUrl(url,params));
      },
      changeCategory(item) {
        this.$emit('changeCategory', item.id)
      }
    }
  };
</script>
<style lang="scss" scoped>
  .cargory_all_box {
    /*padding: 20px 0;*/
  }

  .category_box_all {
    margin-bottom: 30px;
  }

  .category_title {
    cursor: pointer;
    padding: 5px 5px 10px 5px;
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 18px;
    .line {
      display: inline-block;
      width: 3px;
      height: 14px;
      background:var(--color);
      margin-right: 6px;
    }
  }

  .category_box {
    flex-wrap: wrap;
    .box {
      margin: 20px;
      .circle {
        width: 70px;
        height: 70px;
        box-sizing: border-box;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .box_title {
        color: #4f585c;
        margin-top: 7px;
      }
    }
    .box:nth-child(10n) {
      margin-right: 0;
    }
    .no-goods {
      margin: 20px;
      font-size: 16px;
      color: var(--color);
    }
  }
  .category_item {
    cursor: pointer;
  }
</style>