You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.7 KiB
94 lines
2.7 KiB
<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>
|