金学生的诉求

冬日凌晨，客服小王第一个来到了公司，还没顾得上脱下厚厚的羽绒服，桌上的电话就响了起来。“您好，这里是京东客服，请问有什么能够帮到您的么？”电话那头很嘈杂，吼叫的北风让复电人的声音很难被听清，而惟一能够被弄懂的就是对方始终在声嘶力竭反复强调的“......开票！......我要开票！......”

Invoicing wanted

业务娴熟的小王并没有慌乱，在办公桌前静候了几分钟后，电话铃声果然再次响起。

通过短暂几分钟的交谈，小王明确了复电人金学生的用意，在应用京东慧采 APP 购买到称心的商品后，开票环节的体验却比拟差，每次都要找人帮忙解决，感觉很麻烦，心愿能有一个自助开票的性能上线。

小王急躁地听金学生讲完后，便立即开展了考察，原来京东慧采 APP 是一款专门面向大客户的购物平台，线上运行工夫久，口碑也不错，小王稍作打听就顺利找到了慧采 APP 的研发人员。

在研发小哥哥那里，小王理解到：业务侧之前也做过调研，目前慧采 APP 的客户在应用开票性能的时候确实体验不佳，咱们的商务及经营端对于发票解决的工作量也较大，开票时效无奈晋升，人力老本也很高。疾速开发一个自助开票零碎是很有必要的。

小王：“研发小哥哥，客户那边催的紧，咱们啥时候能够开发完这个性能呀？”

小王：“小哥哥，小哥哥，多久能够做好呀？”

小哥哥：“很快。”

小王：“......”

我的项目开发

develop with NutUI3


NutUI 是一套京东格调的挪动端组件库，反对应用 Vue 在 H5和小程序端进行开发。小哥哥关上了 NutUI 官网 ，发现每半个月就会有一次大版本更新，并且最近几个版本又新增了好多组件：指示器组件、表格组件、骨架屏组件、级联选择器组件......不仅如此，组件库的设计格调也紧跟趋势，未然合乎最新的京东 10.0 设计规范。


小哥哥关上了视觉稿，看到了铺满屏幕的几十张设计图，心中有些悔恨和客服小王说了“很快”那两个字。然而看到入口页面后，他的眼中闪过一道光。

入口文件的这种设计，尽管看起来简略，然而也要思考圆角、边界、间距、字体、右侧箭头等内容的开发与调整，而 NutUI 的单元格（Cell）组件却能够让整个开发工夫缩减到极致。小哥哥思考着，敲下了几行代码：

<nut-cell-group>     <nut-cell title="申请开票" is-link></nut-cell>     <nut-cell title="开票提报申请单查问" is-link></nut-cell>     <nut-cell title="发票换开查问" is-link></nut-cell>     <nut-cell title="低头资质治理" is-link></nut-cell></nut-cell-group><nut-cell title="历史发票" is-link></nut-cell>

1 分钟后，入口页面的重构根本实现了。

小哥哥关上了下一个页面“填写开票信息页”的视觉稿，这个页面是用来在开票过程中收集用户信息的，波及到的性能较多，单看这上半局部就蕴含进度条、金额展现和开票形式的切换等性能。其余的性能暂且不提，单纯一个进度条的交互实现就须要花一点工夫。

不过 NutUI 提供了一个步骤条（Steps）组件，在匹配度上极其吻合，引入组件后适当调整色彩即可应用。代码的编写上也只有几行。

<nut-steps :current="curPage">    <template v-for="(item, i) in data" :key="i">        <nut-step :title="item.name">{{ i }}</nut-step>    </template></nut-steps>


小哥哥持续查看 NutUI 的文档，发现了价格（Price）组件和 单选按钮（Radio）组件

<nut-price :price="price" :decimal-digits="2" :need-symbol="true" :thousands="true" />
<nut-radiogroup v-model="radioVal" direction="horizontal">      <template v-for="(item, i) in radioData" :key="i">           <nut-radio shape="button" :label="item.name">{{ item.name }}</nut-radio>      </template></nut-radiogroup>

价格（Price）组件中的 thousands 属性能够管制是否依照千分号模式显示，这样就无需去解决价格字段再手动增加逗号；同时，也能够自定义小数位数，设置是否展现人民币符号"￥"等。

单选按钮（Radio）组件在这里难以在第一工夫想到它，因为开票形式的抉择按钮，更容易让人联想到按钮（Button）组件，不过根据一次只能抉择一个的逻辑，应用单选按钮（Radio）组件将带来更快捷的开发体验。

很快，小哥哥把第一期需要开发实现了。

精益求精

optimize with NutUI3


又是一个美妙的晚上，金学生找到了客服小王，衷心感谢了小王及其共事们所做出的种种致力，并示意，如果能在用户体验上再优化一下，他会更爱大家。

小王受到了褒扬很开心，也立即找到了研发小哥哥。

小哥哥：“哦。”

一大早就“很有干劲”的小哥哥只得持续到 NutUI 文档 中寻求帮忙，却很顺利地就发现了滚动加载（InfiniteLoading）组件，不禁心头一喜：“要啥有啥，真棒。”

相似这种信息列表，如果是间接把数据全副取到而后列出来确实不太敌对，让用户拉到底部后再加载更多的内容，在性能和用户体验上都是一种更优的抉择。

那么，下拉加载要怎么写？外围的思路就是监听用户滑动到了底部后再次申请接口获取分页数据，而应用 NutUI 滚动加载（InfiniteLoading）组件能够这样写：

<nut-infiniteloading    :has-more="hasMore"    :use-window="false"    container-id="search-list"    load-more-txt="没有更多数据啦～"    @load-more="getMore">     <div>           <!-- 这里是要展现的内容，此处就是列表信息 -->     </div></nut-infiniteloading>

has-more 用来标识是否还有更多数据以展现触底文案，load-more 为持续加载的回调函数。

刚刚优化了下拉加载性能的小哥哥意犹未尽，感觉能够再做一点事件，片刻思考后他想到之前开发过程中，NutUI 组件库并未提供 表单（Form）组件，他便提了一个 Issue ，不晓得当初有没有人回复他。

小哥哥关上 github，惊奇地发现 NutUI 团队的小伙伴曾经激情地回复了他，并且表单（Form）组件也曾经追随最新版本公布上线。带着试试看的情绪，小哥哥打算重构一下之前纯手写的“新增普票收票人地址”页面。

<nut-form>    <nut-form-item label="姓名">        <input class="nut-input-text" placeholder="请输出姓名" type="text" />    </nut-form-item>    <nut-form-item label="电话">        <input class="nut-input-text" placeholder="请输出年龄" type="text" />    </nut-form-item>    <nut-form-item label="所在地区">        <input class="nut-input-text" placeholder="请输出联系电话" type="text" />    </nut-form-item>    <nut-form-item label="具体地址">        <input class="nut-input-text" placeholder="请输出地址" type="text" />    </nut-form-item></nut-form>

不得不抵赖，开发这个组件的小伙伴还是很给力的，依照文档把代码写下来后，间隔理论的需要实现就曾经很近了。

简略的总结

make a summary
  • 一个凌晨，客户金学生寻求帮忙，心愿能够自助开票；
  • 客服小王找到研发小哥哥；
  • 工夫紧、工作重，小哥哥应用 NutUI 组件库 进行开发；
  • 过程很顺利，后果很美妙；
  • 又一个凌晨，客户金学生提出优化需要；
  • NutUI 组件库再退场
  • 客户金学生很称心，我的项目就叫——金如意。