ec.uniapp-master/components/index-grouping/index-grouping.vue

<template>
<view class="g-main" :style="{marginBottom: meta.margin_bottom + 'px',background: meta.background_color}">
    <view class="m-lead" style="margin-bottom: 5px" v-if="groupingData.length == 1">
        <view class="ul-box">
            <view class="li-box" @tap="_changeItem" :data-index="index" v-for="(item, index) in groupingData" :key="index" >
                <span>{{item.name}}</span>
            </view>
        </view>
    </view>
    <view class="grouping-tap-box" v-else>
        <view class="tap-item" :class="tapIndex == index ? 'active' : ''" @tap="_changeItem" :data-index="index" v-for="(item, index) in groupingData"  :key="index">
            <span>{{item.name}}</span>
        </view>
    </view>
    <view class="m-content" :class="groupingData.length != 1 ? 'g-bg' : ''">
        <view class="m-main" v-if="goods_arr.type && goods_arr.type == 'micro_page_componet_goods_group'">
            <view class="goods_box" :data-id="item.associate.id" @tap="_jumpToDetail" v-for="(item, index) in goods_arr.children" :key="index" >
                <view class="goods_image">
                    <image :src="item.associate.img"></image>
                </view>
                <view class="title">{{item.associate.name}}</view>
                <view class="price">￥ {{item.associate.sell_price}}</view>
            </view>
        </view>

        <view class="m-main" v-else>
            <view class="img-box" :data-src="item.link" v-for="(item, index) in goods_arr.children" :key="index"  @tap="_jumpImg">
                <image mode="widthFix" :src="item.image"></image>
                <view class="description" v-if="item.name">{{item.name}}</view>
            </view>
        </view>
    </view>
</view>
</template>
<script>

export default {
  data() {
    return {
      currentDesc: 'news',
      goods_arr: [],
      tapIndex: 0
    };
  },
  props: {
	   groupingData: {
	    type: Array,
	    value: ''
	  },
	  meta: {
	    type: Object,
	    value: ""
	  }
  },

	mounted() {
		this.goods_arr=this.groupingData[0]
	},

    //组件的方法
    methods: {
		
      _changeItem(e) {
        var index = e.currentTarget.dataset.index;
        if (index == this.tapIndex) return;
		this.goods_arr=this.groupingData[index];
		this.tapIndex=index;
      },

      _jumpToDetail(e) {
        var id = e.currentTarget.dataset.id;
        wx.navigateTo({
          url: `/pages/store/detail/detail?id=${id}`
        });
      },

      _jumpImg(e) {
        var src = e.currentTarget.dataset.src;
        if (!src || src == 'uto_miniprogram') return;
        wx.navigateTo({
          url: src
        });
      }
  
	}


	
};

</script>
<style rel="stylesheet/less" lang="less">
@import "index-grouping";
</style>