# 年会应用

来源快照：`result_data_new_260518.json`

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

## 正文

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

在公司举办年会的过程中，同事们利用手机端的年会应用，便捷化查看自己的会议日程、会议地点、晚宴座位、中奖名单等信息。在年会结束后，有许多同事咨询这样一款应用是如何搭建的？搭建是否复杂？以及能否重复利用？

本期就为大家讲解该应用的构建过程以及使用方法，同时我们也会提供该应用的安装包（系统eb门户-移动端常见场景的文档附件中），用户导入到自己的系统并稍作修改后，即可重复利用。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705217751457795&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.****思路分析**

年会应用主要由表单和页面构成，同时发布到PC端与移动端：PC端给管理者使用，方便管理者通过表单录入年会的各类信息；移动端给公司同事使用，方便同事们利用手机页面查看自己的年会相关日程。

**PC****端使用效果展示：**

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705222209372163&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=1157705226436345879&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.  ****操作说明**  

**1.****新建各类信息表**

在年会应用中，我们创建了四张表单，管理人员录入数据后，提供给移动端页面进行展示：

①   年会资料：展示年会中要用到的各类信息文件（对应移动端“会议资料”）

②   会议楼层图：展示公司会议地址（对应移动端“会议楼层”）

③   年会人员信息：该表是主要的一张表，记录了参加年会的每个人每天的日程安排、食宿情况，并且记录晚宴座位号等。用户导入应用后，可以对表单字段进行修改，并且支持excel批量导入数据。（对应移动端“行程安排”、“我的晚宴”）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705226325352482&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=1157705230594416674&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.****搭建移动端页面**

移动端是该应用的主要部分，公司同事查看年会的各类信息都是通过移动端。移动端由多个页面组成，通过首页的按钮实现业务联动：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705230594416687&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)

**移动端每个页面具体的搭建如下：**

①   首页：首页主要由【人员名片】以及【导航面板】组成，名片可以动态展示当前人员，导航面板设置多个菜单，链接不同的页面，同时利用源码中的css对样式进行一些优化：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705230799306797&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=1157705234922938412&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=1157705234915287117&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=1157705239260585992&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=1157705239343734809&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=1157705243600322561&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=1157705243571593238&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=1157705243600322598&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=1157705247869239307&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=1157705247917629471&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)
