唔...因为这个公众号做的是关于一个墓园的公众号（~_~）,所以有很多东西，都涉及到一些“不太好”的东西，所以大家看的时候，还挺谅解~

接下来做了一个商品展示，购物车展示，加入购物车等功能，如图所示

（1）商铺展示页面

 商铺展示页，借鉴了uView组件中的垂直分类

垂直分类uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://www.uviewui.com/layout/menu.html代码里面也都有，大家可以下载下来看一下，借鉴一下商品展示的样式。（反正不用白不用~）

（1.1）购物车标识

在uView的基础上，我添加了一个直接到达“购物车”的标识，如图所示

<!-- 购物车 -->
<view class="buyCar"><u-icon name="shopping-cart" color="#ffaa00" size="48" @click="toBuyCar"></u-icon><u-badge :count="allCartGoods" :absolute="true" :offset="[-7,-7]" type="success"></u-badge>
</view>

 又上角是购物车中存在的商品数。是使用vuex来操作商品加入购物车的，后续会给大家完整的代码。

（2）商品展示页面

商品展示，我在以前的微信小程序中写过，大家可以去看看，这里不做赘述。

uni-app微信小程序——商城（7）——商品详情_徐小硕—心之所向，素履以往-CSDN博客在我们讲完了最基础的四个tabBar栏之后，商城也算是初现模样，本篇文章将会介绍商品详情页面的制作，包括把商品加入购物车的功能、分享商品信息的功能等等，效果图如下：首先是做了是个三图轮播的样式来展示该商品，然后是商品信息的介绍，接着是分享商品和商品类型的挑选，最后使用VantWeapp中的GoodsAction ...https://blog.csdn.net/qq_40601005/article/details/108092783把点击商品，带着参数，传到商品展示页，代码如下：

// 选择祭祀商品chooseGoods(item) {this.$u.route({type: 'to',params: {goods: JSON.stringify(item)},url: '/pages/view/functionOverview/onlineBusiness/jsGoodsDetails',animationType: 'slide-in-bottom'});},

 在商品展示页中，在onLoad()方法中获取传过来的商品参数，并把它显示出来。代码如下：

onLoad(goods) {//对商品数据进行处理this.goodsInformation(goods);
},
methods: {...mapActions(['add']),//vuex，加入购物车功能/* 获取商品详情 */goodsInformation(goods) {let goodsInfo = ''if (JSON.stringify(goods) != "{}") {goodsInfo = JSON.parse(goods.goods);this.goodsInfo = goodsInfo;}//console.log(this.goodsInfo);},// 加入购物车addGoodToCart() {this.add(this.goodsInfo);this.$u.toast(`加入购物车`);},
}

接下来就是把商品加入购物车，这也是使用vuex方式，对商品进行操作。后续再说。

（3）购物车页面

 

购物车最基础的就是商品的增删，全选，多选，费用合计等功能。

我会单独使用一篇文章去仔细介绍购物车功能，请大家斧正~