uniapp-商城-62-后台 商品列表（分类展示商品的布局）
发布时间
阅读量：
阅读量
每一个商品都有类别，比如水果，蔬菜，肉，粮油等等，另外每一个商品都有自己的属性，这些都在前面的章节进行了大量篇幅的介绍。这里我们终于完成了商品类的添加，商品的添加，现在到了该进行商品列表的展示。
本文介绍了商品列表展示的实现过程。首先，通过界面设计，点击商品列表时，商品的基本信息会显示在右侧界面。页面布局代码包括新增商品按钮和商品展示部分，新增商品按钮允许用户跳转到新增商品页面。商品展示部分通过循环遍历商品列表，显示每个商品的类别、缩略图和基本信息，并提供编辑和删除功能。在数据库操作方面，通过异步方法获取商品列表，并根据商品类别进行归类。最后，页面逻辑通过调用云对象获取数据，并将结果赋值给商品列表进行展示。
1、界面情况
点击 商品列表，应该将商品的基本信息显示在右边的界面上。
2、页面布局代码
2.1 页面代码分析
2.1.1 新增商品按钮
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>
html
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
},
javascript
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
}
全部评论 (0)
还没有任何评论哟~