如何开发一个优惠券组件

2,051 阅读4分钟

本文作为一次优惠券开发的流水账,会比较详细的介绍优惠券组件开发中最基础的布局设计以及动画设计。当然是因为年底kpi不够文章来硬凑,希望有同样困扰的兄弟们把文章链接打在评论里,笔者会回踩三连 ~~

需求分解

「 有一个优惠券列表banner位,领券完之后券状态更新,然后横滑消失,后面的券补上,要有动画效果 」

很经典的一句话需求,其实我们的工作可以拆解成这样:

  • 实现一个优惠券样式
  • 领券之后优惠券状态更新
  • 领券之后的优惠券顶替特效
  • 领券之后列表数据刷新

其实只要把问题先拆解了,开发工时就可控了,这也是萌新工程师们的估期不准的比较系统的解决方案。拆解完我除了顶替特效没把握以外其他时间是可控的,最坏的情况也就是没有领取特效,并不会影响领券的点击率,因为动画是发生在领券之后的。只能再苦一苦用户的体验了。

实现一个优惠券样式

标准的flex三段式布局:券logo | 券信息 | 领取

<div class="flex align-center">
  <div class="flex center">
    logo
  </div>
  <div class="flex1">
    100元
  </div>
  <div class="flex0">
    <div class="flex center">
      领取
    </div>
  </div>
</div>

领券之后优惠券状态更新

样式跟状态走,基本状态和class是绑定的,加上 transition 属性 transition: all 0.3s ease-out;, 缓动动画由于是按钮与icon的过度,所以选择宽度高度同时变化,transition-origin 默认为正中间所以无需设置

领券之后列表数据刷新

这里在开发过程中考虑过领取后再拉一遍优惠券列表数据来刷新优惠券视图,但这样不光多调一次接口,而且还会导致视图刷新闪动,要知道都做动画了就已经对用户体验追求到极致了,这种闪动是不可能容忍的。

要闪早闪了要啥用户体验

由于用的是Vue, 所以更新单个优惠券状态,然后记住当前的优惠券item以及index,set到整个优惠券列表的list中

this.$set(list, index, { ...item });

领券之后的优惠券顶替特效

可能看到这里大多数开发者会直接从 animation 入手,设置几个关键帧来完成这个动画,但是笔者十分不喜欢用这个属性,不是因为什么渲染性能的问题,单纯是因为笔者不太会用,甚至连api都记不太住,每次使用必须 google,这谁受得了。

对于渐变补位动画,对 widthtransition 效果可能会不错,不过要注意的是动画容器内的overflow属性要控制好,以免在 width 变为 0 的过程中导致容器内元素挤压错位

.coupon {
  transition: all 0.3s ease-out;
  width: 50%;
  max-width: 50%;
  margin: 20 0 20 12;
  height: 120;
  opacity: 0;
  &.invisible {
    opacity: 0;
    width: 0;
    margin-right: 0;
  }
}

我们再来捋一捋领取流程

  1. 点击领券
  2. 调接口返回领券结果
  3. 根据领券结果更新当前优惠券状态
  4. 将当前优惠券状态 Vue.set 到 优惠券 list
  5. 更新状态触发优惠券 class 变化会有 0.3s 的动画效果
  6. 领券效果结束后触发渐变补位动画
  7. 渐变补位动画消失后再将 list 中已领取的这张券 splice 出去
  8. 在动画执行过程中给整个操作区加上一个透明的mask防止重复点击

下面是实际效果

RPReplay_Final1639043943 (1).gif

写在最后

笔者终于战胜了惰性写了一篇流水账了,都是最基础的开发思路记录,写完以后发现也就一两个小时的事情没有KPI来推动也是完不成的。就像整个行业都在撸框架和低代码,用户体验这种没 KPI 的事情就变成无须在意的了,这在笔者入行初期可是重中之重的。最后祝大家新年快乐,写完作业咯~