caimei-applets-crm/components/waterFill/waterFill.vue

<template>
	<view class="flow-box" :style="'height: ' + loadingTop + 'px'">
		<view class="item"
			  :class="left[index] == 1 ? 'left' : ''"
			  :style="'top:' + top[index] + 'px;'"
			  v-for="(item, index) in newList" :key="index"
			  :data-index="index"
			  @click="detail(item.id)">
			<view class="tui-pro-item" hover-class="hover" :hover-start-time="150">
				<image :src="item.pic" class="tui-pro-img" mode="widthFix" />
				<view class="tui-pro-content">
					<view class="tui-pro-tit">{{item.name}}</view>
					<view class="tui-pro-tit subTitle">{{item.subTitle}}</view>
					<view>
						<view class="tui-pro-price">
							<text class="tui-sale-price">￥{{item.price}}</text>
							<text class="tui-factory-price">￥{{item.originalPrice}}</text>
						</view>
						<view class="tui-pro-pay">{{item.stock}}人付款</view>
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="loading" v-show="loading" :style="'top: ' + loadingTop + 'px'" >
			<image src="/static/loading.gif" style="width: 80rpx; height: 80rpx;"></image>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			// 数据列表
			list: {
				type: Array,
				default() {
					return []
				}
			},
			// 加载动画
			loading: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				mark: 0,
				newList: [],
				boxHeight: [],
				top: [], 
				left: [],
				loadingTop: 0
			}
		},
		watch: {
			// 数据
			list: function (newVal, oldVal) {
				this.mark = oldVal.length;
				if (newVal != oldVal) {
					this.newList = this.list;
					this.$nextTick(function () {
						setTimeout(() => {
							this.waterFall();
						}, 120)
					})
				}
			}
		},
		created() {
			this.newList = this.list;
			this.waterFall();
		},
		methods: {
			// 瀑布流定位
			waterFall() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.flow-box .item').boundingClientRect(res => {
					let len = this.newList.length;
					console.log(this.newList)
					let height = 0;
					for (let i = this.mark; i < len; i++) {
						height = res[i].height;
						if (i < 2) {
							this.$set(this.newList[i], 'top', 0);
							this.$set(this.newList[i], 'left', i);
							this.boxHeight.push(height);
							this.top.push(0);
							this.left.push(i);
						} else {
							let minHeight = this.boxHeight[0];
							let index = 0;
							if (minHeight > this.boxHeight[1]) {
								minHeight = this.boxHeight[1];
								index = 1;
							}
							this.boxHeight[index] = minHeight + height + 5;
							this.top.push(minHeight + 5);
							this.left.push(index);
							this.$set(this.newList[i], 'top', minHeight + 5);
							this.$set(this.newList[i], 'left', index);
							this.loadingTop = this.boxHeight[index];
						}
					}
				}).exec();
			},
			detail: function(id) {
				this.$api.navigateTo(`/pages/goods/productDetail?id=${id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flow-box {
		position: relative;
		color: #1a1a1a;
		padding-bottom: var(--window-bottom);
	}
	.flow-box .item {
		position: absolute;
		left: 0;
		width:350rpx;
		border: 1rpx solid #f9f9f9;
		background: #fff;
		border-radius: 10rpx;
	}
	.flow-box .left {
		left: 360rpx;
	}
	.flow-box .pic {
		background: #f6f6f6;
		position: relative;
		.image{
			width: 100%; 
			display: block;
			border-radius: 12rpx 12rpx 0 0;
		}
		.flow-site{
			height: 40rpx;
			padding: 0 15rpx;
			border-radius: 20rpx;
			background: rgba(0,0,0,.3);
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			line-height: 40rpx;
			color: #FFFFFF;
			.iconfont{
				font-size: $font-size-24;
			}
			.text{
				font-size: $font-size-24;
				margin:0 8rpx;
			}
		}
	}
	.flow-box .content {
		padding:10rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		border-radius: 0 0 12rpx 12rpx;
		&.bg{
			background: #FED100;
		}
		.content-title{
			width: 100%;
			font-size: $font-size-24;
			font-weight: bold;
			line-height: 30rpx;
			color: #333333;
			text-overflow:ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 10rpx;
		}
		.content-hot{
			height: 40rpx;
			margin-bottom: 10rpx;
			.hot{
				height: 40rpx;
				padding: 0 15rpx;
				border-radius: 6rpx;
				background: #FFF0E6;
				line-height: 40rpx;
				font-size: $font-size-24;
				color:#F07A22;
				text-align: center;
			}	
		}
		.content-text{
			width: 100%;
			font-size: $font-size-24;
			line-height: 30rpx;
			color: #333333;
			text-overflow:ellipsis;
			display: -webkit-box;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin-bottom: 10rpx;
		}
		.content-price{
			font-size: $font-size-24;
			line-height: 30rpx;
			color: #333333;
			.price{
				color: #E84F13;
			}
		}
		.content-rank{
			line-height: 30rpx;
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}
		.content-make{
			line-height: 30rpx;
			font-size: 22rpx;
			color: #666;
		}
	}
	.flow-box .content text {
		width: 100%;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	.flow-box .user {
		display: flex;
		width: 220rpx;
		overflow: hidden;
		font-size: 26rpx;
		color: #666;
	}
	.loading {
		position: absolute;
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
	}
</style>