IHG/components/waterfall/waterfall-item.vue

<template>
	<view class="waterfall-item-container">
		
		<!-- <view class="waterfall-item" @tap="onTap">
			<image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
			<view class="content">
				<view>{{params.title}}</view>
				<view class="money">{{params.money}}元</view>
				<view style="margin: 0 0 8rpx 0;">
					<text class="label">{{params.label}}</text>
				</view>
				<view class="shop-name">{{params.shop}}</view>
			</view>
		</view> -->
		
		<view class="waterfall-item-container" >
			<view class="contentItem" @tap="onTap(params.money)">
				<image  :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
				<view class="itemName">{{params.label}}</view>
				<view class="itemPrice">{{params.money}}积分</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"helangWaterfallItem",
		options:{
			virtualHost: true
		},
		props:{
			params:{
				type: Object,
				default(){
					return {}
				}
			},
			tag:{
				type:String | Number,
				default:''
			},
			index:{
				type:Number,
				default:-1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			// 发出组件高度信息，在此处可以区分正确和错误的加载，给予错误的提示图片
			emitHeight(e){
				const query = uni.createSelectorQuery().in(this);
				query.select('.waterfall-item-container').boundingClientRect(data => {
					let height = Math.floor(data.height);
					this.$emit("height",height,this.$props.tag);
				}).exec();
			},
			onTap(id){
				this.$emit("click",this.$props.index,this.$props.tag);
				console.log(id)
				uni.navigateTo({
					url:'/pages/my/integral/integralOrder'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
// .waterfall-item{
// 	padding: 16rpx;
// 	background-color: #fff;
// 	border-radius: 4px;
// 	font-size: 28rpx;
// 	color: #666;
	
// 	image{
// 		display: block;
// 		width: 100%;
// 		// 默认设置一个图片的大约值
// 		height: 350rpx;
// 	}
	
// 	.content{
// 		margin-top: 16rpx;
		
// 		.money{
// 			color: #fa3534;
// 			margin-top: 8rpx;
// 		}
		
// 		.label{
// 			background-color: #fa3534;
// 			color: #fff;
// 			font-size: 20rpx;
// 			padding: 4rpx 16rpx;
// 			border-radius: 20rpx;
// 		}
		
// 		.shop-name{
// 			font-size: 20rpx;
// 			color: #999;
// 		}
// 	}
// }
.waterfall-item-container{
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			.contentItem{
				width: 332rpx;
				// height: 100%;
				background: #FFFFFF;
				box-sizing: border-box;
				box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
				border-radius: 12rpx;
				image{
					width: 100%;
					height: 100%;
				}
				.itemName{
					margin:0 18rpx 10rpx 22rpx ;
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
				}
				.itemPrice{
					margin-left: 22rpx;
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FF6200;
				}
			}
			
		}
</style>