从前端视角看转转售后业务

入职转转一年多，大部分时间都在负责售后业务的前端开发，本文主要从前端视角，分享一下转转售后的业务和系统，本文目录如下

• 从业务出发

• 前端技术架构

• 从业务到技术

• 写在最后

从业务出发

作为电商公司，售后服务不仅仅是一个交易的结束，也是下一个交易的开始。做好售后服务，可以很好的提升用户体验和口碑，提高用户的满意度。转转售后项目主要有两部分：

• 用户侧售后页面

• 客服侧后台系统

转转售后作为一个较为复杂的业务，主要包括从用户申请售后到完成散货的全部链路，下图为一个简单的售后流程示意图：

售后业务的复杂除了业务流程之外，还有以下几个方面的挑战：

• 涉及多个运行环境：包括转转、找靓机、采货侠以及小程序和 H5 页面

• 多个业务例如：3C、图书、游戏、奢侈品、虚拟商品等

• 多种售后类型：维修、退货退款、换货等

面对复杂的业务时，如何适配多端环境，兼容多种业务场景、多种售后类型，并且更快更好的应对业务变化便是我们在系统开发时需要思考的问题。

前端技术架构

先看一下转转售后系统的前端技术架构图：

转转具有比较完善的前端技术架构，如上图，售后系统的开发完全按照其系统架构进行开发，其中中包含了

• UI 协作：蓝湖、可视化辅助平台

• 技术栈：Vue（用户端）、React（后台）

• 工具库&组件库：zz-ui、zant-ui、多端适配器 native-adapter，call-app 唤端、zz-util 工具库等

• 工程化：apollo 配置平台、zz-cli 脚手架、umi-cli

• 开发调试：whistle 代理，zApi 接口管理平台

• 监控平台：sentry 异常监控、性能分析平台、以及 lego 埋点

• ......

从业务到技术

日常的业务开发，我主要讲一下两个方面

1. 用户侧页面设计

2. 后台系统相关

用户侧页面设计

售后场景的多样性，导致在用户侧很多页面虽然页面相似，但不同客户端、不同业务、不同状态需要展示给用户的信息都有差异。在需要用同一套页面去兼容多端多业务场景时如果使用大量 if-else 做业务逻辑处理，又或者是针对每种场景都开发一套页面都是非常麻烦的事。在面对如扩品类、业务下线等业务变化时，对于项目的影响和改动页会比较大，大大增加测试回归成本。因此我们更多采用配置化的方式解决这个问题。

在用户点击进入售后页面时，我们需要根据不同业务在售后的不同状态节点跳转进入不同的售后页面。这里我们需要根据首先会进入一个空白中转页面，在这个页面调用接口查询，根据接口返回链接进入不同页面，前端不需要做过多的判断，并且在其他业务需要跳转售后页面时，只需要提供中转页面的链接即可。

对于售后类型选择页面，我们会在后台针对商品不同品类、业务线、客户端、申请时效等配置页面需要展示的售后服务类型。并且关联不同售后类型下的原因配置。