每一个商品都有类别，比如水果，蔬菜，肉，粮油等等，另外每一个商品都有自己的属性，这些都在前面的章节进行了大量篇幅的介绍。这里我们终于完成了商品类的添加，商品的添加，现在到了该进行商品列表的展示。 

        本文介绍了商品列表展示的实现过程。首先，通过界面设计，点击商品列表时，商品的基本信息会显示在右侧界面。页面布局代码包括新增商品按钮和商品展示部分，新增商品按钮允许用户跳转到新增商品页面。商品展示部分通过循环遍历商品列表，显示每个商品的类别、缩略图和基本信息，并提供编辑和删除功能。在数据库操作方面，通过异步方法获取商品列表，并根据商品类别进行归类。最后，页面逻辑通过调用云对象获取数据，并将结果赋值给商品列表进行展示。

1、界面情况

点击 商品列表，应该将商品的基本信息显示在右边的界面上。

2、页面布局代码

2.1 页面代码分析

2.1.1 新增商品按钮

        <!-- 添加一个增加按钮，通过这里也可以跳转到新增商品的页面 -->
        <navigator url="./add" class="row add">
            <view class="left">
                <!-- 一个按钮 u-icon  +  -->
                <u-icon name="plus" color="#576b95" size="22"></u-icon>
                <text class="text">新增商品</text>
            </view>
        </navigator>

2.1.2 商品的展示

2.1.3 页面代码（带注释）

<template>
	<view class="goodsList">
		<!-- 添加一个增加按钮，通过这里也可以跳转到新增商品的页面 -->
		<navigator url="./add" class="row add">
			<view class="left">
				<!-- 一个按钮 u-icon  +  -->
				<u-icon name="plus" color="#576b95" size="22"></u-icon>
				<text class="text">新增商品</text>
			</view>
		</navigator>
		
		<!-- 对商品列表goodsList 进行循环展示 -->
		<view class="row" v-for="item in goodsList" :key="item._id">
			
			<view class="title">
				<!-- 
				标题栏显示 商品类别名
				https://uniapp.dcloud.net.cn/component/uniui/uni-section.html#%E4%BB%8B%E7%BB%8D -->
				<uni-section :title="item.name" type="line"></uni-section>
			</view>
			
			<!-- 下面是该类下的商品 循环展示 在该类商品的 proGroup 列表中-->
			<view class="goodsRow" v-for="row in item.proGroup" :key="row._id">
				<view class="view">
					<!-- 左边显示商品缩略图 -->
					<view class="left">
						<!-- 如果存在就显示图的第一张【0】，不存在就显示默认图 -->
						<image v-if="row.thumb.length" class="pic" :src="row.thumb[0].url" mode="aspectFill"></image>
						<image v-else class="pic" src="../../static/images/logo.png" mode="aspectFill"></image>
					</view>
					<!-- 右边显示商品信息 -->
					<view class="right">
						<!-- 显示名字，没有描述信息显示 -->
						<view class="top">{{row.name}}</view>
						<view class="info">
							<!-- 编辑修改 -->
							<view class="icon" @click="clickEdit(row._id)">
								<u-icon name="edit-pen" size="25"></u-icon>
							</view>
							<!-- 删除该商品 -->
							<view class="icon" @click="clickRemove(row._id)">
								<u-icon name="trash" size="25"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

3.基本方法

3.1、在数据库中获取数据，并归类商品

3.2 数据库 getList的操作 代码分析

	//获取商品列表
	async getList() {
		// 获取商品类的信息 在 green-mall-category 的数据库中，数据都在  navData.data
		let navData = await db.collection("green-mall-category").get();
		let goods = []; // 所有用户列表
		let limit = 100; // 每次查询的数量
		let offset = 0; // 偏移量	
		let {total} = await db.collection('green-mall-goods').count(); // 总数量		
						
		do {
			// 获取一个对象  商品列表的对象 并放到goods列表，
			let {data} = await db.collection('green-mall-goods').skip(offset).limit(limit).get();
			goods = goods.concat(data); // 将查询到的数据添加到列表中	 concat功能：新获得的data 直接放到goods，不会改变原来的值
			offset += limit; // 更新偏移量
		} while (offset < total);  //判断偏移是否小于总数，只要等于大于总数就停止执行循环了。避免10000个商品一次读出来，如果那样，憋憋卡死，效率低下 相当于死循环
		
		//对 navData.data 进行循环，对每一个分类找到属于自类的商品，是不是自己的类商品就类ID是不是一致
		// 过滤 goods中 categroy id 和 item中id一样的数据，并将过滤出来的数据 给item.proGrou
		navData.data.forEach(item => {
			let proGroup = goods.filter(g => {
				return g.category_id == item._id
			})
			item.proGroup = proGroup
		})
		// 返回商品类数据  navData.data   中 item.proGroup 不为空的  newsArr 新数组
		let newsArr = navData.data.filter(item => {
			return item.proGroup.length
		})
		return newsArr
	},

3.3 list.vue 页面中 的引入

const goodsCloudObj = uniCloud.importObject("green-mall-goods")

3.4 页面中逻辑获取数据  调用的是云对象 3.3 ,然后再返数据   res给  goodsList   

            //获取商品列表
            async getGoodsList() {
                let res =await goodsCloudObj.getList();
                console.log(res);
                this.goodsList = res
            }