活动模板逻辑记录

简单的逻辑图示

入口：引用模板，后台交互，获取数据
↓
模板：引用组件，排列功能，控制样式，传递数据
↓
组件：接收数据，灵活展示，实现功能，用户交互

维度控制

【活动开始前、进行中、结束后】，【拼团、砍价、秒杀】，
【原始链接、活动发起者、活动参与者、预参与者】

从末端的开始谈起，一个模板中，把每一块区域功能划分为一个组件

组件

• banner图。传入图片信息数组，使用swiper实现。

• 活动倒数。传入活动状态（开始结束）和起止时间，分别显示距离活动开始或结束的倒计时，甚至是已结束文字。倒计时功能在组件内实现，需传入当前服务器时间。组件变化维度是活动的状态。

• 重点交互框。①传入活动重要的基础信息，并展示。②传入浏览角色。根据浏览活动的角色不同，显示不同的信息或按钮。例如，未参与活动前显示参与按钮，参与后显示参与信息。维度是浏览角色。

• 参与人展示。传入活动参与者的信息列表，并展示。展示形式根据需求，交互在组件内实现。例如滚动式，列表式弹窗式等。

• 底部操作栏。最基本的形式为价格和购买按钮。但根据活动类型不同、浏览角色不同，功能会增加或内容进行调整。例如，秒杀活动中会显示倒数，按钮文字会变成加入团购或直接购买等。同时，根据活动起止状态不同，将按钮点亮或置灰。所以这里维度有两个，活动状态和浏览角色，交叉影响着组件的展示。

• 另外。还有一些比较单纯的部分，比如活动标题、活动简介、活动的图文详情、相关的商家信息等，这些部分没有什么特别的交互和逻辑，所以直接写在父组件（母版）上，而非组件引用。

正好，这里提及到母版。
从上面可以看出，既然把各功能做成组件，那么就要有一个母版来负责承载这些组件，并给组件传输必要的数据。下面就来说说

母版（父组件）

这里所说的母版，就是上面提到的各功能组件的父组件，所有组件都在这里加载排列。构成页面的样式。母版的功能很简单，主要有这4个特点。

• 样式控制。这是最主要的一点，整个模板的所有样式都写在母版上，包括子组件的样式。也就是说母版决定了模板长什么样子。
• 几乎无交互。既然母版的主要功能是控制样子，那就专注于此。
• 功能控制。一个模板中的功能，都在母版中确定，加载不同的子组件来获得不同的功能，再进行组合排列。
• 数据传递。①自上而下的，从入口页面获取整个活动数据，在针对每个子组件所需的数据进行分发传递；②自下而上的，子组件通过母版触发入口页面交互。

再向上一级，就是入口页面了，也就是使用了模板的页面。

入口页面

上面说到母版几乎无交互，子组件内有少许交互，但也是针对组件自身功能以及与用户的交互，所以说，与后台的交互，就需要交给另一个角色去执行，那就是现在要讲的入口页面。
在现在这套项目中，入口页面主要有两个：

• 活动预览，商家新建互动时，需要预览活动的展示效果，就需要引用到模板，不过预览时也不需要与后台交互，所以这个入口页面只会接受指令，但不会产生实际的交互。
• 活动展示页，这个就是真正的活动页面了，用户点击进入查看活动时，页面从后台获取活动的所有数据，通过参数来加载对应的模板并传入的数据。这个页面是能够操作的，当用户在页面中点击按钮，入口页面就能接收到的指令，并与后台进行对应的交互，然后在继续控制着模板，使用户看到正确的内容。

所以说，入口页面的功能也很简单，最主要的一个就是与后台交互。

页面展示控制

作为一个模板，应具备非常强的适应性。以一个原始的状态为基础，根据不同的条件变化成相符合的页面。这里简单说一下这套模板系统可提供的适应维度。

• 时间维度。根据活动的开始前、进行中、结束后为节点：
  1、页面倒计时组件适应地进行开始或结束的倒计时。
  2、重点信息框在非活动时间内不显示活动参与数据等。
  3、购买栏在非活动时间内按钮置灰，秒杀栏适应性倒数开始结束。

• 类型维度。根据活动的类型，拼团、砍价、秒杀：
  1、拼团活动显示拼团情况，开团列表等信息。
  2、砍价活动显示当前价格，帮砍人员列表等信息。
  3、秒杀活动倒计时从页面移到购买栏，并增加毫秒计时。

• 角色维度。
  1、原始链接即商家刚创建完，处于未发起状态的活动链接，这个页面不带有任意用户的信息，所以这个页面展示的内容，都是为了引导用户去参与或者发起该活动的。（预览时也是处于这个角色）
  2、发起者指的是活动发起者，比如某个用户在原始链接中，发起了商家创建的砍价活动，就会生成一个带有发起者信息的链接，这个链接内容就是属于发起者的活动，发起者浏览自己发起的活动时，会展示当前相关的数据如有谁帮砍，已经砍了多少钱等。
  3、参与者指的是他人发起的活动的参与者，比如说当一个用户参与了别人发起的拼团活动，在别人的活动页面中就是参与者，可以看到自己的团长是谁，也可以帮忙邀请他人加入成团。
  4、预参与者就是进入他们活动页面但未参与的状态，这个状态下，页面可能会同时展示参与他人活动和发起自己活动的引导内容。

接下一篇 —— 用户端活动页面逻辑设计