当前位置：首页 > news >正文

uniapp-商城-62-后台商品列表（分类展示商品的布局）

news 来源：原创 2025/7/27 8:30:04

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

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

1、界面情况

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

2、页面布局代码

2.1 页面代码分析

2.1.1 新增商品按钮

<navigator url="./add" class="row add">
            <view class="left">
                
                <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.datalet 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.proGrounavData.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
            }