更新项目文档,调整易货商品列表组件

README.md

@@ -1,5 +1,53 @@
 # 易货App
 
-## 开发临时存储资源存放在/static/dev目录下
+_开发临时存储资源存放在/static/dev目录下_
+
+
+## 公共的组件
+
+### 1.商品列表
+
+_商品列表主要应用于首页，产品列表等_
+
+> 参数说明
+
+| 参数 | 参数 | 是否必填 | 数据类型 | 默认值 | 可选值 |
+| :---: | :---: | :---: | :---: | :---: | :---: |
+| 数据列表 | list | 是 | Array | [] | {{list}} |
+| 货币类型 | priceType | 否 | String | EB | EB, CNY| 
+| 空提示 | toast | 否 | String | 暂无商品数据 | - |
+
+> list格式说明
+
+```
+list: [
+	{
+		id	 : "1"
+		cover: "https://yanxuan-item.nosdn.127.net/d3b072b5006f56935d15d239cbc5c953.jpg",
+		title: "片片大果仁，夏威夷坚果脆片 可可味 55克",
+		price: "16",
+		sales: "25"
+	},{
+		...
+	}
+]
+```
+
+> 引入🙇🏻栗子
+
+```
+import goodsList from '@/components/goods-list/goods-list'
+
+export default {
+	components:{
+		goodsList
+	}
+}
+
+<template>
+	<goods-list></goods-list>
+	or
+	<goods-list/>
+<template/>
+```
 
-易货平台App端

components/goods-list/goods-list.vue

@@ -1,18 +1,30 @@
 
 <template>
 	<view class="goods--list">
-		<view class="goods--item" v-for="(item, index) in list" :key="index">
-			<view class="cover">
-				<image class="cover--src" :src="item.cover" mode="aspectFill" />
-			</view>
-			<view class="content">
-				<view class="title">{{item.title}}</view>
-				<view class="content-flex">
-					<view class="price">{{item.price}}<text>易币</text></view>
-					<view class="sales">已易{{item.sales}}</view>
+		<block v-if="list.length > 0">
+			<view class="goods--item" v-for="(item, index) in list" :key="index">
+				<view class="cover">
+					<image class="cover--src" :src="item.cover" mode="aspectFill" />
+				</view>
+				<view class="content">
+					<view class="title">{{item.title}}</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}}
+						</view>
+						<view class="sales">已易{{item.sales}}</view>
+					</view>
 				</view>
 			</view>
-		</view>
+		</block>
+		<block v-else>
+			<view class="goods--null">
+				<view>{{toast}}</view>
+			</view>
+		</block>
 	</view>
 </template>
 
@@ -20,11 +32,22 @@
 export default {
 	name	: 'goodsList',
 	props	: {
+		// 数据列表
 		list: {
 			type	: Array,
 			default	: () => {
 				return new Array
 			}
+		},
+		// 价格类型
+		priceType: {
+			type	: String,
+			default	: 'EB'
+		},
+		// 列表空提示
+		toast	: {
+			type	: String,
+			default	: '暂无商品数据 -_-!'
 		}
 	}
 };
@@ -86,4 +109,12 @@ export default {
 			}
 		}
 	}
+	// 数据空
+	.goods--null{
+		width: 100%;
+		padding: 20vh 0;
+		text-align: center;
+		font-size: $title-size-m;
+		color: $text-gray;
+	}
 </style>