放入基础模块

components/goods-list/goods-list.vue

@@ -0,0 +1,137 @@
+
+<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>
+				<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.original_price}}
+						</view>
+						<view class="sales">
+							<slot name="statistics" :value="item">
+								月易量{{item.sales}}
+							</slot>
+						</view>
+					</view>
+					<slot name="footer" :value="item" />
+				</view>
+			</view>
+		</block>
+		<block v-else>
+			<view class="goods--null">
+				<view>{{toast}}</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+export default {
+	name	: 'goodsList',
+	props	: {
+		// 数据列表
+		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;
+			.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;
+				}
+				.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;
+						@extend .nowrap;
+					}
+				}
+			}
+		}
+	}
+	// 数据空
+	.goods--null{
+		width: 100%;
+		padding: 20vh 0;
+		text-align: center;
+		font-size: $title-size-m;
+		color: $text-gray;
+	}
+</style>