hlm_pl_mall_h5/pages/home/storegoodsclass/GoodsclassBody.vue

<template>
  <view class="div ui-category-body" :style="'padding-top:'+navHeight+'px'">
    <view class="div category-flex">
		<view class="div pb-30" v-if="items">
			<view class="div" v-for="item in items" :key="item.id">
				<view class="div container pb-5">
					<view class='div title pt-5'>
						<view class='div storegc_name'>{{item.value}}</view>
					</view>
					<view class='div child-wrapper pt-5'>
						<view class='div child' v-for="(child,index) in item.children" :key='index' >
							<view class='childitem'  @click="goProduct(child.id)">
								{{child.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
    </view>
  </view>
</template>

<script>
import { urlencode } from '@/util/common'
import { getStoreGoodsClass } from '../../../api/homestoredetail'
export default {
  data () {
    return {
      navHeight:0,
      query:{},
      items: false,
      currentItem: false
    }
  },
  computed: {

  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    var pages = getCurrentPages()
    var page = pages[pages.length - 1]
    this.query = page.options

    this.getGoodsclassList()
  },
  methods: {
    onItemClick (item) {
      this.currentItem = item
    },
    getGoodsclassList () {
      if (!(this.items && this.items.length)) {
        uni.showLoading({ title: '加载中' })
      }
      getStoreGoodsClass(this.query.id).then((res) => {
        this.items = res.result.store_goods_class
        if (this.items.length > 0) {
          this.currentItem = this.items[0]
        }
        uni.hideLoading()
      }, (error) => {
        uni.showToast({icon:'none',title: error.message})
        uni.hideLoading()
      })
    },

    goProduct (id) {
      let params = { id:this.query.id,'gc_id': id }
      uni.navigateTo({url: '/pages/home/storegoodslist/Goodslist'+'?'+urlencode( params )})
    }
  }
}
</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;
	  .container {
	  	display: flex;
	  	flex-direction: column;
	  	justify-content: flex-start;
	  	align-items: stretch;
	  	background-color: #fff;
	  	padding: 0 $pageSpace;
		.title{
			font-size: .8rem;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
		}
		.child-wrapper{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.child{
				width: 23%;
				margin-right: 1%;
				font-size: .6rem;
				background:#f6f6f6;
				border-radius: 1.5rem;
				padding: .4rem .3rem;
				box-sizing: border-box;
				text-align: center;
				white-space: nowrap;
				margin-bottom: .5rem;
				overflow: hidden;
				.iconfont{
					font-size: .6rem;
					margin-right: .2rem;
				}
			}
			.child:not(:nth-child(4n)) {
			margin-right: calc(4% / 3);
			}
		}
	  }


    }
  }
</style>