hlm_pl_mall_h5/pages/home/goodsclass/GoodsclassBody.vue

<template>
  <view class="div ui-category-body" :style="'padding-top:'+navHeight+'px'">
    <view class="common-header-holder"></view>
    <view class="div category-flex">
      <view class="div category-sidebar">
        <view class="ul">
          <view class="li item"
              v-for='item in items'
              v-bind:key="item.id"
              v-on:click='(item.children && item.children.length)?onItemClick(item):goProduct(item.id)'
              v-bind:class="{'sidbaractive': (currentItem && item.id == currentItem.id), 'noActive' : (currentItem && item.id != currentItem.id)}">
            <text class="a">{{ item.value }}</text>
          </view>
        </view>
      </view>
      <view class="div category-content" ref="content" v-if='currentItem && currentItem.children'>
        <view class="ul">
          <view class="li item clearfix" v-for='item in currentItem.children' v-bind:key = "item.id">
            <text class="a" v-on:click='goProduct(item.id)'>{{item.value}}</text>
            <view class="dl" v-for='item_1 in item.children' :key = "item_1.id" v-on:click='goProduct(item_1.id)'>
              <view class="dt"><image mode="aspectFit" class="img" :src="item_1.image" /></view>
              <view class="dd">{{item_1.value}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { urlencode } from '@/util/common'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      navHeight:0,
      currentItem:{}
    }
  },
  computed: {
    ...mapState({
      items: state => state.goodsclass.items,
    }),
  },
  created () {
    this.getGoodsclassList()
  },
  methods: {
    ...mapMutations({
      saveCurrentGoodsclassItem: 'saveCurrentGoodsclassItem'
    }),
    ...mapActions({
      fetchGoodsclassList: 'fetchGoodsclassList'
    }),
    getGoodsclassList () {
      if (!(this.items && this.items.length)) {
        uni.showLoading({ title: '加载中' })
      }
      this.fetchGoodsclassList().then((res) => {
        var item=res.result.class_list[0]
        this.onItemClick (item)
        uni.hideLoading()
      }, (error) => {
        uni.showToast({icon:'none',title: error.message})
        uni.hideLoading()
      })
    },
    onItemClick (item) {
      this.currentItem=item
    },
    goProduct (id) {
      let params = { 'cate_id': id }
      uni.navigateTo({ url: '/pages/home/goodslist/Goodslist'+'?'+urlencode( params )})
    }
  },
  mounted: function() {
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
  },
}
</script>

<style scoped lang="scss">
  .ui-category-body{
      width: 100%;
      position: absolute;
      bottom: 0;
      top: var(--status-bar-height);
    .category-flex {
      height: 100%;
      box-sizing: border-box;
      padding-top:$headerHeight;
      background: #fff;
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      .category-sidebar {
        flex-basis:6rem;
        background-color: #F0F1F5;
        overflow-y: scroll;
        border-radius:0 .8rem 0 0;
        margin-top: 1rem;
        .ul {
          .li {
            display: block;
            padding: 0.8rem 0.25rem;
            .a {
              color: $formInputColor;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              font-size:$fontSize;
              text-align: center;
            }
          }
          .li.noActive {
            background-color: #F0F2F5;
            border-left: 0.1rem solid transparent;
            .a {
              color: $formInputColor;
            }
          }
          .li.sidbaractive{
            background-color: #FFFFFF;
            border-left: 0.1rem solid $primaryColor;
            .a {
              font-weight:600;
              color: $primaryColor;
            }
          }
        }
      }
      .category-content {
        width: 100%;
        background-color: #fff;
        overflow: auto;
        .ul {
          height: 100%;
          .li {
            display: block;
            padding: 0.95rem 0;
            cursor: pointer;
            .a {
              color: $formInputColor;
              font-size:$h2;
              margin-bottom:1rem;
              font-weight:700;
              text-align: center;
              display:block;;
            }
          }
          .dl{
            display:inline-block;
            width:33.33%;
            text-align:center;
            .dt{
              position:relative;
              .img{width:3.5rem;height:3.5rem;overflow:hidden;border-radius:.4rem;}
            }
            .dd{font-size:$fontSize;line-height:1rem;height:1rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom:0.5rem;margin-top:.2rem;}
          }
        }
      }
    }
  }
</style>