微信小程序云开发实战：网上商城（五）_mp-actionsheet

前言

代码下载

一般购物车如上图所示。具体结算时，有满减、优惠卷、免单等各种方式。

服务端

在管理页面添加【活动】入口。

点击活动将会进入【活动】管理页面：

添加【活动】时，将从底部弹出actionsheet供选择活动类型：

在该页面的json文件中引入控件：

"mp-actionSheet": "/miniprogram_npm/weui-miniprogram/actionsheet/actionsheet",
1

<mp-actionSheet bindactiontap="btnClick" show="{
    {showDialog}}" actions="{
    {groups}}" title="请选择活动种类">

</mp-actionSheet>
1
2
3
4
5

该groups变量的值：

    groups: [
      {
    text: '满减（一次）', value: 1 },
      {
    text: '满减（叠加）', value: 2 },
      {
    text: '免单', value: 3 },
    ]
1
2
3
4
5
6
7
8

对于每一个【活动】，都可以选择其适用的商品，以及设定时间限制（下图为新建满减活动的页面）：

客户端

购物车功能涉及客户端两个页面。对于原有的商品页面，需要增加【添加至购物车】的功能。而购物车页面属于新增加的页面。

商品列表页面

需要添加一个固定位置的按钮，当点击这个按钮时，会将选中的商品添加到购物车中。

这里有个问题，就是当切换商品类型时，用不用保存已选中商品的列表以便点击添加按钮后统一加入到购物车。目前demo是简单处理了，切换选项卡时清空保存选中商品的列表。

index.wxml:

  <view wx:if="{
    {pageIndex==0}}" class="add-wrap">
    <image src="../images/customer_user_add.png" bindtap="onAddToCard"></image>
  </view>
1
2
3
4

cart-op云函数:

处理添加时要考虑重复添加商品的问题。我的做法是，对于重复添加的商品，将其在购物车中的数量递增，而且将其置于选中状态。

const user = await collection.where({
   
        openid: wxContext.OPENID,
        cart: _.exists(true)
      }).get()
      //登陆的时候会创建空记录，此时只需要合并记录      
      var old_items = user.data.length > 0 ? user.data[0].cart : []
      console
1
2
3
4
5
6
7