@retailwe/ui-cart-group
v0.0.21
Published
## 引入
Readme
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
| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | ---------------- | --------- | ---------- | ---- | | storeGoods | 已加购且仍在售的商品数据 | array | - | - | | invalidGoodItems | 已加购但已失效的商品列表 | array | - | - |
cart-group Event
| 事件名 | 说明 | 参数 |
| ---------- | ---- | ---- |
| delete | 侧滑商品选择删除时触发 | event.detail.goods: 对应商品的数据对象 |
| clearinvalidgoods | 点击清除失效商品按钮触发 | - |
| selectgoods | 切换商品选择时触发 | event.detail.goods: 对应商品的数据对象; event.detail.isSelected: 是否已选 |
| changequantity | 修改商品加购数时触发（+1、-1或直接输入值） | event.detail.goods: 对应商品的数据对象; event.detail.quantity: 修改后的数量 |
| gocollect | 免邮活动或促销活动，点击去凑单/逛一逛触发 | - |
| selectstore | 切换门店全选按钮时触发 | event.detail.store: 对应门店的数据对象; event.detail.isSelected: 是否已选 |
| goodsclick | 点击商品卡片时触发 | event.detail.goods: 对应商品的数据对象 |