BlockChainH5/components/goods-list/goods-list.vue

<template>
	<view class="goods--list">
		<block v-if="list.length > 0">
			<view class="goods--item" v-for="(item, index) in list" :key="index" @click="goods(item)">
				<view class="cover">
					<image class="cover--src" :src="item.cover" mode="aspectFill" />
				</view>
				<template v-if='notag === ""'>
					<span class='is_self' v-if='item.specal_tags.is_self'>{{item.specal_tags.is_self}}</span>
				</template>

				<template v-if='notag === ""'>
					<span class='is_allow_values'	v-if='item.specal_tags.is_allow_values'>
						<image src="/static/imgs/baodan_hot.png" mode="widthFix" />
					</span>
				</template>
				<view class="content">
					<view class="title">
						{{item.name}}
					</view>
					<view class="content-flex">
						<view class="price eb" v-if="priceType === 'EB'">
							{{item.price}}<text>易币</text>
						</view>
						<view class="price cny" v-if="priceType === 'CNY'">
							<text>￥</text>{{item.price.price_min}}
						</view>
						<view class="sales">
							<slot name="statistics" :value="item">
								月销量{{item.sales}}
								<!-- 贡献值:{{item.price.pv}} <image style="width: 30rpx;" src="/static/icons/crystal-icon.png" mode="widthFix" /> -->
							</slot>
						</view>
					</view>
					<slot name="footer" :value="item" />
				</view>
			</view>
		</block>
		<block v-else>
			<view class="goods--null">
				<no-list name='no-goods' :txt="toast" />
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'goodsList',
		props: {
			notag: {
				type: String,
				default: ''
			},
			// 数据列表
			list: {
				type: Array,
				default: () => {
					return new Array
				}
			},
			// 价格类型
			priceType: {
				type: String,
				default: 'EB'
			},
			// 列表空提示
			toast: {
				type: String,
				default: '暂无商品数据 -_-!'
			}
		},
		methods: {
			goods(e) {
				this.$emit('on-goods', e)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods--list {
		padding: calc(#{$padding} - 10rpx);
		display: flex;
		flex-wrap: wrap;

		.goods--item {
			background: white;
			box-sizing: border-box;
			width: calc(50% - 20rpx);
			margin: 10rpx;
			border-radius: $radius/2;
			overflow: hidden;
			position: relative;

			.is_self {
				position: absolute;
				top: 0;
				right: 20rpx;
				background-image: linear-gradient(to bottom, #ee4c47, #f80000);
				// background-color: #ee4c47;
				box-shadow: 0 4rpx 10rpx 2rpx rgba($color: #000, $alpha: .3);
				color: #fff;
				font-size: 26;
				padding: 2rpx 20rpx 10rpx 20rpx;
				border-radius: 0 0 50rpx 50rpx;
			}

			.is_allow_values {
				position: absolute;
				top: 264rpx;
				left: 0;

				image {
					width: 180rpx;
				}
			}

			.cover {
				position: relative;
				width: 100%;
				padding-top: 100%;

				.cover--src {
					position: absolute;
					height: 100%;
					width: 100%;
					top: 0;
					left: 0;
				}
			}

			.content {
				padding: $padding/2;

				.title {
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 80rpx;
					text-align: justify;
					@extend .ellipsis;

					// .is_allow_values {
					// 	color: #fff;
					// 	background-image: linear-gradient(to left, $mian-color, $mian-color-light);
					// 	padding: 2rpx 14rpx;
					// 	font-size: 20rpx;
					// 	text-align: center;
					// 	border-radius: 30rpx;
					// 	margin-right: 20rpx;
					// }
				}

				.content-flex {
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding-top: $padding/2;

					.price {
						width: 50%;
						color: $text-price;
						font-weight: bold;
						font-size: $title-size;
						@extend .nowrap;

						text {
							font-size: $title-size-sm;
							font-weight: normal;
							padding-left: $padding/4;
							line-height: 50rpx;
						}
					}

					.sales {
						width: 50%;
						font-size: $title-size-sm;
						color: $text-gray;
						line-height: 50rpx;
						text-align: right;
					}
				}
			}
		}
	}

	// 数据空
	.goods--null {
		width: 100%;
		padding: 200rpx 0;
		text-align: center;
		font-size: $title-size-m;
		color: $text-gray;
	}
</style>