vue-优惠券组件化设计

通用优惠券以及 srv 优惠券组件化方案

Overview

范围：

该方案包括通用优惠券以及 srv 优惠券

分为业务层和 UI 层，UI 只是容器，不考虑数据。

业务层逻辑

业务线会调用各自的 API，取得各自的一些业务数据之后，再调用 coupon api。

UI 组件

desktop

列表模块

输入

coupons: [{

  disabled: Boolean, // default false

  isChosen: Boolean, // default false

  isRecommended: Boolean,// default false

  couponDetail: Object, // required

}]

couponDetail: CouponDetail { // coupon detail 结构

  usable,

  top_tag: { // optional

    // API下发限定券标识，如srv限定圈，只支持一种标示

    background_color,

    text_color,

    text

  },

  discount_desc,

  end_time,

  end_date,

  code,

  special_desc, // for tooltip

  desc, // for tooltip

  reason， // for tooltip, optional

  bottom_link: { // optional

    url,

    text

  }

}

输出

choose-coupon: // select/deselect event, if user select emit selected code, if user deselect emit blank string

兑换模块

输入

inputCouponCode(可输入可用户填写)

提供一个方法，clear coupon code

输出

event: handleClickCta // emit code user input

注解

超过 5 个字符，弹 tooltip

非空校验

校验规则可以定制 （讨论）

注意一个需求，不在这个组件内部实现的，就是可以根据 localstorage 初始化 code（提供能力）

标题模块（collapse）

输入

属性：

title //

sub-title

content // 展开后显示的内容

输出

fold/unfold

Mobile

输入和输出和 desktop 类似，只是子组件不同，把 collapase 换成 modal，并且加了一个 trigger point 组件

SRV

下图是 SRV 的组件安排

业务层

业务层主要做两件事，获取列表以及兑换优惠券，这里仅仅规定 API 入参以及返回格式。

API 入参规则：

必要参数：

{

  currency,

  language,

  platform

  amount,

  settlement_type,

  shoppingcart_guid_list,

  phone_number,

  supported_method_list,

  coupon_key,

  tickets,

  select_coupon_code_list(optional)

}

API 返回规则：

列表：

Coupons: Array<Coupon>

兑换：

Coupon

Coupon 结构

Coupon: {

  usable,

  top_tag: { // optional

    // API下发限定券标识，如srv限定圈，只支持一种标示

    background_color,

    text_color,

    text

  },

  isbest: ,

  top_tags: [], // 新增

  discount_desc,

  end_time,

  end_date,

  code,

  special_desc, // for tooltip

  desc, // for tooltip

  reason， // for tooltip, optional

  bottom_link: { // optional

    url,

    text

  }

}

埋点

点击 callapse

点击兑换按钮

兑换成功

选中优惠券（包括点击 以及兑换成功）

组件生命周期以及钩子

组件初始化（组件 mounted）

获取列表之前 (请求发送之前)

获取列表之后（包含成功 失败）

手动输入兑换之后（包含成功失败）

选中优惠券

点击展开之后

组件 destory