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.
249 lines
7.1 KiB
249 lines
7.1 KiB
<template>
|
|
<view class="many-goods-list">
|
|
<u-tabs class="utabs" @change="tabsChange" keyName="title" :list="value.list" :current="cateIndex"
|
|
lineColor="var(--base-color)" :activeStyle="{
|
|
color: '#303133',
|
|
fontWeight: 'bold',
|
|
transform: 'scale(1.15)'
|
|
}" :inactiveStyle="{
|
|
color: '#999',
|
|
transform: 'scale(1)'
|
|
}"></u-tabs>
|
|
|
|
<!-- <div style="height: 24rpx;"></div> -->
|
|
|
|
<!-- <scroll-view scroll-x="true" :scroll-into-view="'a' + cateIndex">
|
|
<view
|
|
v-for="(item, index) in value.list"
|
|
class="scroll-item"
|
|
:class="{ active: index == cateIndex }"
|
|
:id="'a' + index"
|
|
:key="index"
|
|
@click="changeCateIndex(item, index)"
|
|
>
|
|
<view class="item-wrap">
|
|
<view class="split-line" v-if="index > 0"></view>
|
|
<view class="cate">
|
|
<view class="name">{{ item.title }}</view>
|
|
<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
-->
|
|
<diy-goods-list v-show="cateIndex==0" :value.sync="goodsValue0" ref="diyGoodsList0">
|
|
</diy-goods-list>
|
|
<!-- <diy-goods-list v-if="cateIndex==0" :value.sync="goodsValue0" ref="diyGoodsList0">
|
|
</diy-goods-list> -->
|
|
|
|
<diy-goods-list v-show="cateIndex==1" :value.sync="goodsValue1" ref="diyGoodsList1">
|
|
</diy-goods-list>
|
|
<diy-goods-list v-show="cateIndex==2" :value.sync="goodsValue2" ref="diyGoodsList2">
|
|
</diy-goods-list>
|
|
<diy-goods-list v-show="cateIndex==3" :value.sync="goodsValue3" ref="diyGoodsList3">
|
|
</diy-goods-list>
|
|
<diy-goods-list v-show="cateIndex==4" :value.sync="goodsValue4" ref="diyGoodsList4">
|
|
</diy-goods-list>
|
|
<diy-goods-list v-show="cateIndex==5" :value.sync="goodsValue5" ref="diyGoodsList5">
|
|
</diy-goods-list>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'diy-many-goods-list',
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {};
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
cateIndex: 0, // 当前选中的分类id
|
|
goodsValue0: null, // 商品列表数据
|
|
goodsValue1: null,
|
|
goodsValue2: null,
|
|
goodsValue3: null,
|
|
goodsValue4: null,
|
|
goodsValue5: null,
|
|
|
|
};
|
|
},
|
|
created() {
|
|
this.goodsValue0 = this.value.list[0]
|
|
this.goodsValue1 = this.value.list[1]
|
|
this.goodsValue2 = this.value.list[2]
|
|
this.goodsValue3 = this.value.list[3]
|
|
this.goodsValue4 = this.value.list[4]
|
|
this.goodsValue5 = this.value.list[5]
|
|
console.log(this.value, '组件的总数据');
|
|
this.changeCateIndex(this.value.list[0], 0, true);
|
|
// this.changeCateIndex(this.value.list[0], 0);
|
|
},
|
|
mounted() {
|
|
// this.$nextTick(_ => {
|
|
// this.changeCateIndex(this.value.list[0], 0, true);
|
|
// })
|
|
},
|
|
methods: {
|
|
|
|
tabsChange(e) {
|
|
this.changeCateIndex(e, e.index, true);
|
|
},
|
|
|
|
changeCateIndex(item, index, isFirst) {
|
|
|
|
console.log(this.cateIndex, '之前的tab');
|
|
this.cateIndex = Number(item.newCategoryId) - 1;
|
|
console.log(this.cateIndex, '之后的tab');
|
|
this.goodsValue = {}
|
|
this["goodsValue" + index] = {
|
|
sources: item.sources,
|
|
categoryId: item.categoryId,
|
|
categoryName: item.categoryName,
|
|
newCategoryId: item.newCategoryId,
|
|
newCategoryName: item.newCategoryName,
|
|
goodsId: item.goodsId,
|
|
componentBgColor: this.value.componentBgColor,
|
|
componentAngle: this.value.componentAngle,
|
|
topAroundRadius: this.value.topAroundRadius,
|
|
bottomAroundRadius: this.value.bottomAroundRadius,
|
|
elementBgColor: this.value.elementBgColor,
|
|
elementAngle: this.value.elementAngle,
|
|
topElementAroundRadius: this.value.topElementAroundRadius,
|
|
bottomElementAroundRadius: this.value.bottomElementAroundRadius,
|
|
count: this.value.count,
|
|
nameLineMode: this.value.nameLineMode,
|
|
template: this.value.template,
|
|
style: this.value.style,
|
|
ornament: this.value.ornament,
|
|
sortWay: this.value.sortWay,
|
|
saleStyle: this.value.saleStyle,
|
|
tag: this.value.tag,
|
|
btnStyle: this.value.btnStyle,
|
|
goodsNameStyle: this.value.goodsNameStyle,
|
|
theme: this.value.theme,
|
|
priceStyle: this.value.priceStyle,
|
|
slideMode: this.value.slideMode,
|
|
imgAroundRadius: this.value.imgAroundRadius,
|
|
cartEvent: this.value.cartEvent,
|
|
cateName: this.cateIndex + 1,
|
|
tabsTitle: item.title,
|
|
pageStyle: this.value.pageStyle
|
|
};
|
|
console.log("goodsValue" + index, '切换之后的数据');
|
|
console.log(this["goodsValue" + index], '切换之后的数据源头');
|
|
|
|
// this.goodsValue0 = {
|
|
// sources: item.sources,
|
|
// categoryId: item.categoryId,
|
|
// categoryName: item.categoryName,
|
|
// newCategoryId: item.newCategoryId,
|
|
// newCategoryName: item.newCategoryName,
|
|
// goodsId: item.goodsId,
|
|
// componentBgColor: this.value.componentBgColor,
|
|
// componentAngle: this.value.componentAngle,
|
|
// topAroundRadius: this.value.topAroundRadius,
|
|
// bottomAroundRadius: this.value.bottomAroundRadius,
|
|
// elementBgColor: this.value.elementBgColor,
|
|
// elementAngle: this.value.elementAngle,
|
|
// topElementAroundRadius: this.value.topElementAroundRadius,
|
|
// bottomElementAroundRadius: this.value.bottomElementAroundRadius,
|
|
// count: this.value.count,
|
|
// nameLineMode: this.value.nameLineMode,
|
|
// template: this.value.template,
|
|
// style: this.value.style,
|
|
// ornament: this.value.ornament,
|
|
// sortWay: this.value.sortWay,
|
|
// saleStyle: this.value.saleStyle,
|
|
// tag: this.value.tag,
|
|
// btnStyle: this.value.btnStyle,
|
|
// goodsNameStyle: this.value.goodsNameStyle,
|
|
// theme: this.value.theme,
|
|
// priceStyle: this.value.priceStyle,
|
|
// slideMode: this.value.slideMode,
|
|
// imgAroundRadius: this.value.imgAroundRadius,
|
|
// cartEvent: this.value.cartEvent,
|
|
// cateName: this.cateIndex + 1,
|
|
// tabsTitle: item.title,
|
|
// pageStyle: this.value.pageStyle
|
|
// };
|
|
// 如果是第一次加载，不需要执行下面代码
|
|
// #ifdef APP
|
|
if (isFirst) return;
|
|
// #endif
|
|
// // #ifndef APP
|
|
// if (this["goodsValue" + index].goodsId > 20) {
|
|
// if (isFirst) return;
|
|
// }
|
|
// // #endif
|
|
|
|
|
|
|
|
this.$refs["diyGoodsList" + index].goodsValue = this["goodsValue" + index];
|
|
this.$refs["diyGoodsList" + index].list = [];
|
|
this.$refs["diyGoodsList" + index].getGoodsList();
|
|
this.$refs["diyGoodsList" + index].page = 1;
|
|
this.$refs["diyGoodsList" + index].nodata = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
scroll-view {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 20rpx;
|
|
|
|
.scroll-item {
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
|
|
.item-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.split-line {
|
|
display: inline-block;
|
|
width: 1rpx;
|
|
height: 30rpx;
|
|
// background-color: #e5e5e5;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
&.active {
|
|
.name {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.desc {
|
|
color: #ffffff;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
color: $color-title;
|
|
line-height: 1;
|
|
}
|
|
|
|
.desc {
|
|
font-size: $font-size-tag;
|
|
color: $color-tip;
|
|
height: 36rpx;
|
|
line-height: 36rpx;
|
|
margin-top: 10rpx;
|
|
min-width: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|