mall-web-ssr/components/pcb/home/StoreBanner.vue

<template>
  <div class="container" id="title-fragment" @mouseleave="hideChildrenLayout()">
    <div class="container">
      <div class="shop-pcb">
        <ul class="pk-list">
          <li class="pk-item"
              @click="setKindIds(null, null, -1)"
              :class="{active: selectedIndex === -1}"
              @mouseenter="hideChildrenLayout()">全部
          <li @click="setKindIds(kind, kind, index)" class="pk-item"
              :class="{active: selectedIndex === index}"
              v-for="(kind, index) in kinds"
              :key="kind.id"
              @mouseenter="showChildrenLayout(kind, index)">{{kind.nameCn}}<i class="icon-arrow-right iconfont"></i></li>
        </ul>
        <!-- 子类目 -->
        <transition name="fade" mode="out-in">
          <div class="kind-children" v-if="show">
            <div class="kind-children-layout" v-for="(kind, index) in kinds" :key="index" v-if="index === selectedIndex">
              <empty-box v-if="!kind.fetching && kind.children && !kind.children.length"></empty-box>
              <loading-box v-else-if="kind.fetching" color="rgba(80, 120, 203, 0.9)"></loading-box>
              <div class="kind-children-item-wrap" v-else>
                <dl class="kind-children-item dl-horizontal">
                  <dt></dt>
                  <dd>
                    <ul class="list-unstyled list-inline">
                      <li v-for="(c, index) in kind.children">
                        <span @click.stop.prevent="setKindIds(kind, c, index)">{{ c.nameCn }}</span>
                      </li>
                    </ul>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </transition>
      </div>
      <div class="pcb-banner">
        <img :src="storeInfo.bannerUrl || '/images/store/default/shop_banner.png'">
         <div id="shop-title" v-if="storeInfo.storeShortName" v-text="storeInfo.storeShortName">店铺名称</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'store-banner',
  data () {
    return {
      selectedIndex: -1,
      show: false
    }
  },
  computed: {
    kinds () {
      return this.$store.state.pcb.kindsData.kinds.data
    },
    storeInfo () {
      return this.$store.state.shop.storeInfo.store.data
    }
  },
  methods: {
    setKindIds (kinds, kind, index) {
      let idsArr = []
      let item = {}
      item.kind = kind
      item.kinds = kinds
      if (kind) {
        if (kind.children && kind.children.length) {
          this.show = true
          kind.children.forEach(item => {
            idsArr.push(item.id)
          })
        } else {
          this.show = false
          idsArr.push(kind.id)
        }
      }
      this.selectedIndex = index
      this.$emit('kindAction', idsArr.join(','))
      this.$emit('kindsAction', item)
    },
    showChildrenLayout (kind, index) {
      this.selectedIndex = index
      if (!kind.children) {
        this.show = false
      } else {
        this.show = true
      }
    },
    hideChildrenLayout () {
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~assets/scss/variables';
  #title-fragment {
		padding: 0;
	}
	#title-fragment .container {
		width: 1190px;
		padding-left: 0px;
		padding-right: 0px;
	}
  #title-fragment .shop-pcb{
    margin-right: 10px;
    width: 220px;
    border: 1px solid #e8e8e8;
    float: left;
    text-align: center;
    line-height: 210px;
    position: relative;
    background: #fff;
    .pk-list {
      height:300px;
      position: relative;
      left: -1px;
      width: 220px;
      .pk-item{
        height:43px;
        line-height:43px;
        border-bottom:1px solid #e7e7e7;
        cursor:pointer;
        text-align: left;
        color: #666;
        padding-left:20px;
        &:hover,
        &.active{
          background: #d3eafc;
          color: #2496f1;
        }
        &:last-child{
          border:none;
        }
        .iconfont {
          float: right;
          margin-right: 18px;
        }
      }
    }
    .kind-children .kind-children-layout{
      width: 963px;
      height: 300px;
      padding: 15px 0 0 0;
    }
    .kind-children {
      position: absolute;
      top: 0;
      left: 220px;
      z-index: 9;
      overflow: hidden;
      width: 963px;
      height: 300px;
      background-color: #ffffff;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.5);
      box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.5);
      .kind-children-layout {
        background-color: #fff;
        width: 963px;
        height: 300px;
        font-size: 12px;
        overflow-y: auto;
        a {
          color: #000;
        }
        a:hover {
          color: #ff0006;
        }
        .kind-children-item-wrap {
          height: 100%;
          width: 100%;

          .kind-children-item {
            margin-bottom: $md-pad;
            dt {
              span {
                width: 90%;
                display: inline-block;
                font-weight: bold;
                overflow: hidden;
                clear: left;
                text-align: right;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              i{
                font-size: 12px;
              }
            }
            dd {
              margin-left: 98px;
              text-align: left;
              ul {
                margin: 0;
                padding: 0;

                li {
                  border-left: $border;
                  margin-bottom: $pad;
                  span {
                    margin: 0 $sm-pad;
                    cursor: pointer;
                  }
                  &:first-child {
                    border-left: none;
                  }
                  &:hover span, &.active span{
                    color: #f31717;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  #title-fragment .pcb-banner {
    float: left;
    position: relative;
    width: 955px;
    height: 320px;
    border: 1px solid #e8e8e8;
    border-left: none;
    overflow: hidden;
    border-radius: 5px;
    img{
      width: 955px;
      height: 300px;
    }
    #shop-title{
      position: absolute;
      top: 50px;
      left: 60px;
      font-size: 30px;
      color: rgb(255,255,255);
    }
  }
	.container{
		width: 1190px;
		padding: 0;
	}
</style>