lucky_shop/components/diy-components/diy-many-goods-list.vue

<template>
	<view data-component-name="diy-many-goods-list" class="many-goods-list">
		<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex" :style="manyWrapCss">
			<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }" :id="'a' + index" :key="index" @click="handlerClick({item,index})" @tap="handlerClick({item,index})">
				<view class="split-line" v-if="index > 0"></view>
				<view class="cate">
					<view class="name" :style="{ color : value.headStyle.titleColor }">{{ item.title }}</view>
					<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="many-goods-list-fill" :style="{'height': manyInfo.height}" v-if="fixedTop"></view>
		<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
	</view>
</template>

<script>
	import DiyMinx from './minx.js'
	export default {
		name: 'diy-many-goods-list',
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				}
			},
			scrollTop: {
				type: [Number, String]
			},
			global: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {
				cateIndex: 0, // 当前选中的分类id
				goodsValue: null, // 商品列表数据
				manyInfo: {
					bodyHeight: 0,
					bodyTop: 0,
					height: 0,
					top: 0
				}
			};
		},
		created() {
			this.changeCateIndex(this.value.list[0], 0, true);
		},
		mixins: [DiyMinx],
		watch: {
			// 组件刷新监听
			componentRefresh: function(nval) {
				this.changeCateIndex(this.value.list[0], 0, true);
			},
			scrollTop: function(nval) {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.many-goods-list')
					.boundingClientRect(data => {
						if (data) {
							this.manyInfo.top = data.top;
						}
					})
					.exec();

				query
					.select('.many-goods-list .many-goods-list-body')
					.boundingClientRect(data => {
						if (data) {
							this.manyInfo.bodyHeight = (data.height || 0);
							this.manyInfo.bodyTop = (data.top || 0);
						}
					})
					.exec();
			}
		},
		computed: {
			fixedTop() {
				let diyPositionObj = JSON.parse(JSON.stringify(this.$store.state.diyGroupPositionObj));
				let positionHeight = 0;
				let height = 0;

				delete diyPositionObj.diyManyGoodsList;

				if (diyPositionObj) {
					let arr = Object.values(diyPositionObj);
					arr.forEach((item, index) => {
						positionHeight += item.originalVal; //定位的高度【搜索框+导航分类+自定义头部】
					});
				}

				if (this.manyInfo.top < positionHeight && (this.manyInfo.bodyTop + this.manyInfo.bodyHeight >
						positionHeight + Number.parseFloat(this.manyInfo.height))) {
					height = positionHeight;
				}
				return height;
			},
			manyWrapCss() {
				let html = '';
				html += `position: ${this.fixedTop ? 'fixed' : 'initial'};`
				html += `top: ${this.fixedTop}px;`
				if (!this.global.topNavBg)
					html += `background-color: #fff;`
				else
					html += `background-color: ${this.fixedTop ? this.global.topNavColor : 'transparent'};`
				return html;
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.many-goods-list .many-goods-list-head')
				.boundingClientRect(data => {
					if (data) {
						this.manyInfo.height = (data.height || 0) + 'px';
						// 向vuex中的diyIndexPositionObj增加多商品组件定位位置
						let diyManyGoodsList = {
							originalVal: data.height || 0 //自身高度 px
						}
						this.$store.commit('setDiyGroupPositionObj', {
							diyManyGoodsList: diyManyGoodsList
						});
					}
				})
				.exec();
		},
		methods: {
			changeCateIndex(item, index, isFirst) {
				this.cateIndex = index;
				this.goodsValue = {
					sources: item.sources,
					categoryId: item.categoryId,
					categoryName: item.categoryName,
					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,
					margin: this.value.margin,
					goodsMarginType: this.value.goodsMarginType,
					goodsMarginNum: this.value.goodsMarginNum
				};

				// 如果是第一次加载，不需要执行下面代码
				if (isFirst) return;
				this.$refs.diyGoodsList.goodsValue = this.goodsValue;
				this.$refs.diyGoodsList.getGoodsList();
			},
			async handlerClick({item,index}) {
				await this.__$emitEvent({eventName: 'many-goods-list-tap', data: {item,index}, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					this.changeCateIndex(item, index, false);
				}})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.many-goods-list-head {
		left: 0;
		right: 0;
		z-index: 5;
		background-color: #fff;
	}

	scroll-view {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding: 20rpx 0;

		.scroll-item {
			display: inline-block;
			text-align: center;
			vertical-align: top;
			width: calc(25% - 40rpx);
			position: relative;
			padding: 0 20rpx;

			&:first-child {
				width: calc(25% - 20rpx);
				padding-left: 0;
			}

			.split-line {
				display: inline-block;
				width: 1rpx;
				height: 30rpx;
				background-color: #e5e5e5;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			&.active {
				.name {
					font-weight: bold;
				}

				.desc {
					color: #ffffff;
					border-radius: 20rpx;
				}
			}

			.name {
				font-size: 32rpx;
				color: $color-title;
				line-height: 1;
			}

			.cate {
				display: inline-block;
			}

			.desc {
				font-size: $font-size-tag;
				color: $color-tip;
				height: 36rpx;
				line-height: 36rpx;
				margin-top: 10rpx;
				min-width: 120rpx;
				max-width: 220rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 0 10rpx;
			}
		}
	}
</style>