@retailwe/ui-cart-group v0.0.21

cart-group 购物车分层

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-cart-group": "@retailwe/ui-cart-group/index"
}

代码演示

基本用法

<wr-cart-group
  store-goods="{{ cartGroupData.storeGoods }}"
  invalid-good-items="{{ cartGroupData.invalidGoodItems }}"
  bindselectgoods="onGoodsSelect"
  bindselectstore="onStoreSelect"
  bindchangequantity="onQuantityChange"
  bindgocollect="goCollect"
  bindgogoodsdetail="goGoodsDetail"
  bindclearinvalidgoods="clearInvalidGoods"
  binddelete="onGoodsDelete"
/>

import Dialog from 'components/dialog/src/dialog';
import Toast from 'components/toast/src/toast';

import { getCartGroupData } from './api';

Page({
  data: {
    cartGroupData: null as any,
  },
  onLoad() {
    this.refreshData();
  },

  refreshData() {
    this.getCartGroupData().then(res => {
      const cartGroupData = res.data;
      // 一些组件种需要的字段可能接口并没有返回，或者返回的数据结构与预期不一致，需要在此先对数据做一些处理
      // 统计门店下加购的商品是否全选、是否存在缺货/无货
      for (const store of cartGroupData.storeGoods) {
        store.isSelected = true; // 该门店已加购商品是否全选
        store.storeStockShortage = false; // 该门店已加购商品是否存在库存不足
        if (!store.shortageGoodsList) {
          store.shortageGoodsList = []; // 该门店已加购商品如果库存为0需单独分组
        }
        for (const activity of store.promotionGoodsList) {
          activity.goodsPromotionList = activity.goodsPromotionList.filter(
            goods => {
              // 统计是否有加购数大于库存数的商品
              if (goods.quantity > goods.stockQuantity) {
                store.storeStockShortage = true;
              }
              // 统计是否全选
              if (!goods.isSelected) {
                store.isSelected = false;
              }
              // 库存为0（无货）的商品单独分组
              if (goods.stockQuantity > 0) {
                return true;
              } else {
                store.shortageGoodsList.push(goods);
                return false;
              }
            },
          );
        }
      }
      this.setData({ cartGroupData });
    });
  },

  findGoods(spuId, skuId) {
    let currentStore;
    let currentActivity;
    let currentGoods;
    const { storeGoods } = this.data.cartGroupData;
    for (const store of storeGoods) {
      for (const activity of store.promotionGoodsList) {
        for (const goods of activity.goodsPromotionList) {
          if (goods.spuId === spuId && goods.skuId === skuId) {
            currentStore = store;
            currentActivity = currentActivity;
            currentGoods = goods;
            return {
              currentStore,
              currentActivity,
              currentGoods,
            };
          }
        }
      }
    }
    return {
      currentStore,
      currentActivity,
      currentGoods,
    };
  },

  // 注：实际场景时应该调用接口获取购物车数据
  getCartGroupData() {
    let { cartGroupData } = this.data;
    if (!cartGroupData) {
      cartGroupData = getCartGroupData();
    }
    return Promise.resolve({ data: cartGroupData });
  },

  // 选择单个商品
  // 注：实际场景时应该调用接口更改选中状态
  selectGoodsService({ spuId, skuId, isSelected }) {
    this.findGoods(spuId, skuId).currentGoods.isSelected = isSelected;
    return Promise.resolve();
  },

  // 全选门店
  // 注：实际场景时应该调用接口更改选中状态
  selectStoreService({ storeId, isSelected }) {
    const currentStore = this.data.cartGroupData.storeGoods.find(
      s => s.storeId === storeId,
    );
    currentStore.isSelected = isSelected;
    currentStore.promotionGoodsList.forEach(activity => {
      activity.goodsPromotionList.forEach(goods => {
        goods.isSelected = isSelected;
      });
    });
    return Promise.resolve();
  },

  // 加购数量变更
  // 注：实际场景时应该调用接口
  changeQuantityService({ spuId, skuId, quantity }) {
    this.findGoods(spuId, skuId).currentGoods.quantity = quantity;
    return Promise.resolve();
  },

  // 删除加购商品
  // 注：实际场景时应该调用接口
  deleteGoodsService({ spuId, skuId }) {
    const { storeGoods } = this.data.cartGroupData;
    for (const store of storeGoods) {
      for (const activity of store.promotionGoodsList) {
        for (const gindex in activity.goodsPromotionList) {
          const goods = activity.goodsPromotionList[gindex];
          if (goods.spuId === spuId && goods.skuId === skuId) {
            delete activity.goodsPromotionList[gindex];
            return Promise.resolve();
          }
        }
      }
    }
    return Promise.reject();
  },

  // 清空失效商品
  // 注：实际场景时应该调用接口
  clearInvalidGoodsService() {
    this.data.cartGroupData.invalidGoodItems = [];
    return Promise.resolve();
  },

  onGoodsSelect(e: any) {
    const {
      goods: { spuId, skuId },
      isSelected,
    } = e.detail;
    const { currentGoods } = this.findGoods(spuId, skuId);
    Toast({
      text: `${isSelected ? '选择' : '取消'}"${
        currentGoods.goodsName.length > 5
          ? currentGoods.goodsName.slice(0, 5) + '...'
          : currentGoods.goodsName
      }"`,
      icon: '',
    });
    this.selectGoodsService({ spuId, skuId, isSelected }).then(() =>
      this.refreshData(),
    );
  },

  onStoreSelect(e: any) {
    const {
      store: { storeId },
      isSelected,
    } = e.detail;
    this.selectStoreService({ storeId, isSelected }).then(() =>
      this.refreshData(),
    );
  },

  onQuantityChange(e: any) {
    const {
      goods: { spuId, skuId },
      quantity,
    } = e.detail;
    const { currentGoods } = this.findGoods(spuId, skuId);
    const stockQuantity =
      currentGoods.stockQuantity > 0 ? currentGoods.stockQuantity : 0; // 避免后端返回的是-1
    // 加购数量超过库存数量
    if (quantity > stockQuantity) {
      // 加购数量等于库存数量的情况下继续加购
      if (
        currentGoods.quantity === stockQuantity &&
        quantity - stockQuantity === 1
      ) {
        Toast({ text: '当前商品库存不足' });
        return;
      }
      Dialog.confirm({
        title: '商品库存不足',
        message: `当前商品库存不足，最大可购买数量为${stockQuantity}件`,
        confirmButtonText: '修改为最大可购买数量',
      })
        .then(() => {
          this.changeQuantityService({
            spuId,
            skuId,
            quantity: stockQuantity,
          }).then(() => this.refreshData());
        })
        .catch(() => {
          this.setData({
            cartGroupData: this.data.cartGroupData.storeGoods,
          });
        });
      return;
    }
    this.changeQuantityService({ spuId, skuId, quantity }).then(() =>
      this.refreshData(),
    );
  },

  goCollect() {
    Toast({ text: '你点击了去凑单' });
  },

  goGoodsDetail(e: any) {
    // eslint-disable-next-line no-console
    console.log('跳转商品详情', e.detail.goods);
    Toast({
      text: `跳转商品详情`,
    });
  },

  clearInvalidGoods() {
    // 实际场景时应该调用接口清空失效商品
    this.clearInvalidGoodsService().then(() => this.refreshData());
  },

  onGoodsDelete(e: any) {
    const {
      goods: { spuId, skuId },
    } = e.detail;
    Dialog.confirm({
      message: '确认删除该商品吗?',
    }).then(() => {
      this.deleteGoodsService({ spuId, skuId }).then(() => {
        Toast({ text: '商品删除成功' });
        this.refreshData();
      });
    });
  },
});

接口数据示例

{
  "isNotEmpty": true,
  "storeGoods": [
    {
      "storeId": "1000",
      "storeName": "云Mall深圳旗舰店",
      "storeStatus": 1,
      "totalDiscountSalePrice": "9990",
      "promotionGoodsList": [
        {
          "title": "满减满折回归",
          "promotionCode": "MERCHANT",
          "promotionSubCode": "MYJ",
          "promotionId": "159174555838121985",
          "tagText": [
            "满100元减99.9元"
          ],
          "promotionStatus": 3,
          "tag": "满减",
          "description": "满100元减99.9元,已减99.9元",
          "doorSillRemain": null,
          "isNeedAddOnShop": 0,
          "goodsPromotionList": [
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135686623",
              "skuId": "135691622",
              "isSelected": 1,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fcc8b0b4ef894ab99766054f608279c0-1586941823540-锘垮垏鍥_鍟嗗搧 - 3.png",
              "goodsName": "熊本T恤短袖情侣男女衣服装kumamon吉祥物动漫周边T恤",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fcc8b0b4ef894ab99766054f608279c0-1586941823540-锘垮垏鍥_鍟嗗搧 - 3.png",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": 3,
              "price": "9900",
              "originPrice": "16900",
              "tagPrice": null,
              "tagText": [
                {
                  "text": "新品"
                },
                {
                  "text": "火爆"
                }
              ],
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "红色"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "S"
                }
              ],
              "joinCartTime": "2020-06-29T07:55:40.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135686623",
              "skuId": "135686625",
              "isSelected": 1,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fcc8b0b4ef894ab99766054f608279c0-1586941823540-锘垮垏鍥_鍟嗗搧 - 3.png",
              "goodsName": "熊本T恤短袖情侣男女衣服装kumamon吉祥物动漫周边T恤",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fcc8b0b4ef894ab99766054f608279c0-1586941823540-锘垮垏鍥_鍟嗗搧 - 3.png",
              "quantity": 11,
              "stockStatus": true,
              "stockQuantity": 10,
              "price": "9900",
              "originPrice": "16900",
              "tagPrice": null,
              "tagText": [
                {
                  "text": "火爆"
                }
              ],
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "白色"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "S"
                }
              ],
              "joinCartTime": "2020-04-30T03:15:06.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135681630",
              "skuId": "135681631",
              "isSelected": 1,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/13f6cbead98a455196331630aef7f57e-1586941824188-锘垮垏鍥_鍟嗗搧 - 6.png",
              "goodsName": "真丝上衣女穿长袖时尚波点白衬衫",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/13f6cbead98a455196331630aef7f57e-1586941824188-锘垮垏鍥_鍟嗗搧 - 6.png",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": 177,
              "price": "29800",
              "originPrice": "40000",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "米色波点"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "M"
                }
              ],
              "joinCartTime": "2020-06-29T07:55:27.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135703356",
              "skuId": "135698362",
              "isSelected": 1,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/518f5400e2d3469189f32a1e08d9f0f1-1587378598641-这个图片的名称是中文 9.png",
              "goodsName": "青蛙王子酒精75度便携式喷雾液免手洗杀菌喷雾家用消毒室内抑菌液-进口",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/518f5400e2d3469189f32a1e08d9f0f1-1587378598641-这个图片的名称是中文 9.png",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": 99,
              "price": "10000",
              "originPrice": "0",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [],
              "joinCartTime": "2020-06-29T07:54:43.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135701819",
              "skuId": "135696825",
              "isSelected": 1,
              "skuImage": "https://gz4-cos-bl-yewu-dev-01-1300977798.cos.ap-guangzhou.myqcloud.com/show/ac7645e933675ebdb28a37c5bdbc66c1.jpg",
              "goodsName": "青蛙王子酒精75度便携式喷雾液免手洗杀菌喷雾家用消毒室内抑菌液",
              "primaryImage": "https://gz4-cos-bl-yewu-dev-01-1300977798.cos.ap-guangzhou.myqcloud.com/show/ac7645e933675ebdb28a37c5bdbc66c1.jpg",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": 73,
              "price": "1",
              "originPrice": "1989",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [],
              "joinCartTime": "2020-06-29T07:54:47.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135681624",
              "skuId": "135681625",
              "isSelected": 1,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/004baa3296584200a6c2f907895c1581-1586941823327-锘垮垏鍥_鍟嗗搧 - 2.png",
              "goodsName": "夏季新款纯白色宽松短袖T",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/004baa3296584200a6c2f907895c1581-1586941823327-锘垮垏鍥_鍟嗗搧 - 2.png",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": -1,
              "price": "29900",
              "originPrice": "29900",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "白色"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "M"
                }
              ],
              "joinCartTime": "2020-06-29T07:55:00.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            }
          ],
          "lastJoinTime": "2020-06-29T07:55:40.000+0000"
        },
        {
          "title": null,
          "promotionCode": "EMPTY_PROMOTION",
          "promotionSubCode": null,
          "promotionId": null,
          "tagText": null,
          "promotionStatus": null,
          "tag": null,
          "description": null,
          "doorSillRemain": null,
          "isNeedAddOnShop": 0,
          "goodsPromotionList": [
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135691628",
              "skuId": "135691629",
              "isSelected": 0,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/a69198306ad647faa2a798e657c1e3a0-1586941824614-锘垮垏鍥_鍟嗗搧 - 8.png",
              "goodsName": "春夏新款日系少女甜美气质洋气连衣裙",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/a69198306ad647faa2a798e657c1e3a0-1586941824614-锘垮垏鍥_鍟嗗搧 - 8.png",
              "quantity": 1,
              "stockStatus": false,
              "stockQuantity": 100,
              "price": "25900",
              "originPrice": "39900",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "白色"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "S"
                }
              ],
              "joinCartTime": "2020-04-24T06:26:48.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            },
            {
              "uid": "88888888205468",
              "saasId": "88888888",
              "storeId": "1000",
              "spuId": "135686635",
              "skuId": "135691635",
              "isSelected": 0,
              "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/1681ff35a85a4ea38b058bc11a168dc0-1586941825041-锘垮垏鍥_鍟嗗搧 - 10.png",
              "goodsName": "春秋夏季薄款运动裤女宽松直筒7分裤",
              "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/1681ff35a85a4ea38b058bc11a168dc0-1586941825041-锘垮垏鍥_鍟嗗搧 - 10.png",
              "quantity": 1,
              "stockStatus": true,
              "stockQuantity": 96,
              "price": "19900",
              "originPrice": "29900",
              "tagPrice": null,
              "tagText": null,
              "roomId": null,
              "specInfo": [
                {
                  "specTitle": "颜色",
                  "specValue": "黑色"
                },
                {
                  "specTitle": "尺码",
                  "specValue": "M"
                }
              ],
              "joinCartTime": "2020-06-29T07:55:17.000+0000",
              "available": 1,
              "putOnSale": 1,
              "egoodsName": null
            }
          ],
          "lastJoinTime": null
        }
      ],
      "lastJoinTime": "2020-06-29T07:55:40.000+0000",
      "postageFreePromotionVo": {
        "title": null,
        "promotionCode": null,
        "promotionSubCode": null,
        "promotionId": null,
        "tagText": null,
        "promotionStatus": null,
        "tag": null,
        "description": null,
        "doorSillRemain": null,
        "isNeedAddOnShop": 0
      }
    }
  ],
  "invalidGoodItems": [
    {
      "uid": "88888888205468",
      "saasId": "88888888",
      "storeId": "1000",
      "spuId": "135721631",
      "skuId": "135716632",
      "isSelected": 1,
      "skuImage": "//bl-material-online-1300977798.file.myqcloud.com/persist/10001/88888888/0206394/material/1/0b8c3011dd5a444fa429198ccd31a6a1-1592214594528-%E6%88%AA%E5%B1%8F2020-06-15%20%E4%B8%8B%E5%8D%885.40.29.png",
      "goodsName": "UGG 秋季男士单鞋休闲传承系列舒适商务开车鞋一脚蹬鞋 1108",
      "primaryImage": "//bl-material-online-1300977798.file.myqcloud.com/persist/10001/88888888/0206394/material/1/0b8c3011dd5a444fa429198ccd31a6a1-1592214594528-%E6%88%AA%E5%B1%8F2020-06-15%20%E4%B8%8B%E5%8D%885.40.29.png",
      "quantity": 1,
      "stockStatus": true,
      "stockQuantity": 120,
      "price": "139800",
      "originPrice": "312900",
      "tagPrice": null,
      "tagText": null,
      "roomId": null,
      "specInfo": [
        {
          "specTitle": "颜色",
          "specValue": "栗色/辣椒红"
        },
        {
          "specTitle": "尺码",
          "specValue": "42"
        }
      ],
      "joinCartTime": "2020-06-29T07:54:55.000+0000",
      "available": 1,
      "putOnSale": 1,
      "egoodsName": null
    },
    {
      "uid": "88888888205468",
      "saasId": "88888888",
      "storeId": "1000",
      "spuId": "135686633",
      "skuId": "135691631",
      "isSelected": 1,
      "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fe9ca204723849848cb3fc0d736e82f7-1586941824833-锘垮垏鍥_鍟嗗搧 - 9.png",
      "goodsName": "时尚领口蕾丝花边拼接T恤女",
      "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/fe9ca204723849848cb3fc0d736e82f7-1586941824833-锘垮垏鍥_鍟嗗搧 - 9.png",
      "quantity": 8,
      "stockStatus": true,
      "stockQuantity": 177,
      "price": "26900",
      "originPrice": "31900",
      "tagPrice": null,
      "tagText": null,
      "roomId": null,
      "specInfo": [
        {
          "specTitle": "颜色",
          "specValue": "红色"
        },
        {
          "specTitle": "尺码",
          "specValue": "S"
        }
      ],
      "joinCartTime": "2020-04-28T04:03:59.000+0000",
      "available": 1,
      "putOnSale": 1,
      "egoodsName": null
    },
    {
      "uid": "88888888205468",
      "saasId": "88888888",
      "storeId": "1000",
      "spuId": "135681630",
      "skuId": "135676631",
      "isSelected": 1,
      "skuImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/13f6cbead98a455196331630aef7f57e-1586941824188-锘垮垏鍥_鍟嗗搧 - 6.png",
      "goodsName": "真丝上衣女穿长袖时尚波点白衬衫",
      "primaryImage": "//bl-material-online-1300977798.cos.ap-guangzhou.myqcloud.com/persist/10001/88888888/1000000/material/1/13f6cbead98a455196331630aef7f57e-1586941824188-锘垮垏鍥_鍟嗗搧 - 6.png",
      "quantity": 6,
      "stockStatus": true,
      "stockQuantity": 175,
      "price": "29800",
      "originPrice": "40000",
      "tagPrice": null,
      "tagText": null,
      "roomId": null,
      "specInfo": [
        {
          "specTitle": "颜色",
          "specValue": "米色波点"
        },
        {
          "specTitle": "尺码",
          "specValue": "S"
        }
      ],
      "joinCartTime": "2020-04-29T07:05:18.000+0000",
      "available": 1,
      "putOnSale": 1,
      "egoodsName": null
    }
  ],
  "selectedGoodsCount": 22,
  "totalAmount": "633211",
  "totalDiscountAmount": "9990"
}

cart-group Props

cart-group Event