hwnc/components/waterfall/waterfall-item.vue

<template>
	<view class="waterfall-item-container">
		<view class="waterfall-item" @tap="onTap">
			<image :src="params.pic||default_img" mode="widthFix" @load="emitHeight" @error="emitHeight" lazy-load>
			</image>
			<view class="demo-title" :style="goodtitle_style">
				{{params.name}}
			</view>
			<view class="message_bot">
				<view class="f_left">
					<view class="color_org text-neutral" :style='goodprice_style'>
						{{ params.price }}元/{{ params.unit }}
					</view>
					<view class="old_price" :style='goodoprice_style'>原价：{{ params.oprice }}元</view>
				</view>
				<view class="f_right">
					<u-icon name="shopping-cart-fill" :color="primary" size="30"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "helang-waterfall",
		props: {
			params: {
				type: Object,
				default () {
					return {}
				}
			},
			tag: {
				type: String | Number,
				default: ''
			},
			index: {
				type: Number,
				default: -1
			},
			datas: {
				type: Object,
				default: ''
			}
		},
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			const img = siteinfo.root_img + '/static/app/imgs/default-goods.png';
			return {
				default_img: img,
				primary: this.$theme.primary,
			};
		},
		computed: {
			/** 副标题内容 */
			title() {
				return this.datas.title || '';
			},
			img_style2() {
				return `
				width:15px;
				height:15px;
				margin:auto;
				`;
			},
			// 副标题栏样式
			title_style() {
				const {
					text_size,
					text_color,
				} = this.datas;
				return `
			    font-size: ${text_size}px;
			    color: ${text_color};
			`;
			},
			// 副标题栏样式
			title_style1() {
				const {
					text_size,
				} = this.datas;
				return `
				color:rgb(96, 98, 102);
			    font-size: ${text_size}px;
			`;
			},
			// 商品标题
			goodtitle_style() {
				if (!this.datas.good_text_size) {
					this.datas.good_text_size = 15;
				}
				const {
					good_text_size,
					good_text_color
				} = this.datas;
				return `
			   font-size: ${good_text_size*2}rpx;
			   line-height: 40rpx;
			   color: ${good_text_color};
			`;
			},
			// 商品价格
			goodprice_style() {
				const {
					shop_price_color,
				} = this.datas;
				return `
			    color: ${shop_price_color};
			`;
			},
			// 商品价格
			goodoprice_style() {
				const {
					market_price_color,
				} = this.datas;
				return `
			    color: ${market_price_color};
			`;
			},
			// 商品图标
			goodiocn_style() {
				const {
					buynow_bg_color,
				} = this.datas;
				return `
				font-size: 25px;
			    color: ${buynow_bg_color};
			`;
			},
			/** 样式 */
			wrapper_style() {
				const {
					padding_top,
					padding_bottom,
					padding_left,
					padding_right,
					margin_top,
					margin_bottom,
					bg_color,
				} = this.datas;
				return `
				    width: 100%;
					background-color:${bg_color};
				    padding-top: ${margin_top}px;
				    padding-bottom: ${margin_bottom}px;
				    padding-left: ${padding_left}px;
				    padding-right: ${padding_right}px;
				`;
			},

			// 商品列表
			list() {
				let list = this.list2;
				if (!list || list.length <= 0) {
					list = this.datas.goods || [];
				}
				return list;
			},
		},
		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() {
				this.$emit("click", this.$props.index, this.$props.tag);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.demo-title {
		padding: 0rpx 16rpx 0rpx 16rpx;
		font-size: 26rpx;
		margin-top: 15rpx;
		color: $u-main-color;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-height: 40rpx;
		-webkit-box-orient: vertical;
	}

	.message_bot {
		padding: 0rpx 16rpx 0rpx 16rpx;
		border-top: 1px solid #f3f3f3;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 10rpx;
		margin-top: 5rpx;

		.f_left {
			.color_org {
				font-size: 28rpx;
			}

			.old_price {
				padding: 10rpx 0rpx 10rpx 4rpx;
				color: #999;
				font-size: 22rpx;
				text-decoration: line-through;
			}
		}

		.f_right {}
	}

	.waterfall-item {
		// padding: 16rpx;
		background-color: #fff;
		border-radius: 4px;
		font-size: 28rpx;
		color: #666;

		image {
			display: block;
			width: 100%;
			height: 350rpx;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
		}

		.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;
			}
		}
	}
</style>