# 物品加入购物车并发起领用流程

来源快照：`result_data_new_260518.json`

- 来源 ID：`1972119483018137121`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****编写目的  **

在项目实施过程中，我们通常会遇到“物品加入购物车”的场景。例如在公司资产管理应用中，公司员工可以查看资产信息列表，并勾选部分资产放进购物车中；对于“空闲”状态的资产，可以批量勾选发起资产领用流程。

资产加入购物车并发起领用流程效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694665120153620&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

**2.  ****思路分析**  

上述场景由【列表组件】、【悬浮按钮】作为主要的样式组件，并通过js、动作流等功能实现业务联动。用户可以查看所有资产，勾选多条资产加入购入车（已经加购的资产，check框置灰无法勾选）；点击按钮进入购物车界面，可以勾选多条资产移出购物车；或者可以勾选空闲中的资产，发起资产领用申请。

** **

**3.  ****操作说明**  

**3.1****搭建资产信息表**

如下图所示，用户根据实际情况搭建资产信息表，注意资产信息表中需要添加一个人员多选字段“加购人员”，该字段的目的是用来过滤出购物车页面的资产信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694665146204205&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.2****搭建移动端资产页面**

**3.2.1****新建一个移动端页面，放入一个列表组件：**

列表组件的数据源选择资产信息表，配置显示字段。于此同时，开启列表的check框功能，并设置当收藏人员字段中包含当前人员时，check框置灰禁用，这是为了让用户区分哪些资产已经加购过：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694669395664907&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

用户可以添加一些筛选组件便于搜索资产，例如本场景中使用【分段组件】，将资产状态进行划分（所有/空闲/占用），设置方式如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694669455122458&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.2.2****之后在页面中放入悬浮按钮组件（按钮1）：**

按钮1用来勾选多条资产信息，触发动作流，修改加购人员字段，具体配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694673701699605&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

其中，js可以参考页面右上角源码中的内容，列表数据id获取方式如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694673573191710&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

该js需要调用动作流，动作流的目的是为了让资产信息表中的“加购人员”字段，多一个当前用户，这样就可以达到：用户A勾选了3条资产，点击这个写了js的按钮，就可以调用动作流，将资产信息表中这几条数据中的“加购人员”多添加一个用户A。

动作流配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694677885673477&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

演示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694677913665581&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.2.3****之后再放入一个悬浮按钮组件（按钮2）：**

按钮2的目的是为了点击跳转至购物车界面，并且还有一个提示购物车资产数量的功能：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694682314858512&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

数字提示的配置需要新建一个数据集，选择资产信息表，过滤出“加购人员属于当前人员”的数据（注意不是等于），并进行计数，配置方式如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694682384793681&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.3****配置购物车界面**

**3.3.1****放入列表组件，进行数据过滤：**

购物车界面放入列表组件，并进行数据过滤“加购人员属于当前用户”，这样就是展示自己的购物车，并且开启check框功能：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694686534328331&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.3.2****放入悬浮按钮组件（按钮3）：**

该按钮的功能是帮助用户将资产移出购物车，配置方式与加入购物车类似，js配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694686495211551&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

动作流也与加入购物车的动作流类似，唯一不同的是此时不再是累加（=+）当前人员，而是要删除当前人员（=-）：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694686611767346&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.3.3****再放入一个悬浮按钮组件（按钮4）：**

按钮4的目的是为了让用户勾选购物车中的资产，能够便捷的发起流程，其js的配置与上面的按钮相似，替换掉列表id以及动作流id即可，动作流的配置如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694690904793131&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

**总结：** 经过各类功能的组合使用，即可配制出物品加入购物车的场景，本场景中只是介绍了主要的配置过程，为了给用户更好的体验，可以对一些细节点进行优化，例如点击按钮后添加一些提示等等：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157694690811781201&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
