[开发日志]1：分析需求和原型设计

一、行业情况

行业情况：目前所有的零售行业都存在厂家会给销售进行返利的情况，那么返利通过什么来确定呢？最有力的当然是销售小票了！目前就我了解的情况来说基本上都是使用微信或者QQ拍照发到群内然后由返利人员审核后发放红包。

但是，这个存在一个问题，就是使用如果参与返利的人员过多的话会存在漏发或者发错的情况。并且如果要统计销售数据的话必须还要另外用表格或者手写的方式统计登记，无形之中增加了办公成本。

1. **营业员：**要做的事情就是销售指定的品种之后拍照并发送到微信群
2. **管理员：**查看各个人员的销售单据，并核算返利金额。如果单据无误就发放红包。单据有误或者有特殊情况便需要在群里告知相关人员。

所以实际的软件具备的功能因具备以下功能

1. **登录系统：**有角色区分。登陆后显示不同的操作页面。

营业员登陆后的业务流程：

1. 系统列出所有可以参与返利的品种，
2. 营业员选择需要晒单的品种，并设置对应的销售数量。
3. 跳转至信息统计页面，这个页面显示了已选择的晒单品种、数量、单项统计金额、合计金额。并且可以上传销售单据。选择完后点提交即可。
4. 有一个历史晒单界面可以显示目前所有晒过的单据，并且显示所有已通过审核获得返利的总金额，点击可查看单据详情。
5. 单据详情页面显示晒单品种、数量、单项统计金额、合计金额、管理员审核信息。

管理员登陆后的业务流程：

1. 系统列出所有人员晒出来的单据情况，点击后如果是待审核单据跳转至单据审核页面，已审核或者未通过单据跳转至单据详情页面。
2. 单据审核页面会显示单据的晒单品种、数量、单项统计金额、合计金额，可填入审核信息，可选择拒绝或者通过。
3. 单据的查询页面，可根据条件查询指定单据，目前设想的条件为：开始时间、结束时间、晒单人，点击查询后显示对应的数据，查询出来的数据点击后进入对应的单据详情页面。

因为是专门的原型设计工具，大概花了半个小时做如下的软件原型。(PS：刚刚在做这张图片的时候发现似乎有三张很重要的页面没有做：晒单品种的增删改查)

四、框架选择

说道这里，我想起我七年前写代码的时候。那时候啥也不懂，一个刚毕业的小白，只懂学校里教的一些固化的东西，所有的功能都是自己造轮子一个个写出来的。

看看现在的开发环境，各种框架、ide，各种方便的快速开发，我就不由得感叹，真是变化得太快了，新技术层出不穷好像永远不会停止似得。不过也庆幸自己以前有一些基础，即便六七年后再来写代码也不会觉得太难受，虽然以前学的技术可能用不上了，但是思维还在，万变不离其宗。

前端框架：framework7，模版引擎：artTemplate

Framework7项目地址：github | 中文站 | 中文文档

artTemplate项目地址：github(没有官方网站，github上有详细介绍)

framework7

为什么用f7？只是因为知乎上有一个人说它有几乎完美的使用体验，而且国内淘宝在负责维护。使用过后感觉还可以，但是虽然是淘宝在维护，但是中文资料偏少、而且学习环境真的是很差(这一点请看这篇文章：吐槽。基本上属于摸着石头过河，各位在选择学习某个框架的时候虽然框架的优点很重要，但是也要考虑下学习环境。

总得来说框架的效果还是不错的，打包后在手机上使用也没有什么大问题。但是有人说低端手机如果直接使用会有卡顿的情况，需要搭配crosswalk才行。我也不太懂，到时候遇到了再说把。

具体的示例代码我就不写了，f7的初始化代码比较多而且有些复杂。

artTemplate

模版引擎我不是太了解，但是在使用ghost的时候用到过一种：Handlebars.js，本来打算使用这个，但是考虑到中文资料偏少所以还是选择了国人写的artTemplate，口碑也非常不错。而且兼容多种模版语法，甚至可以自定义模版语法。使用起来也相对简单例如，连我这种从来没学习过的人看了几分钟后就能使用了，以下是我个人理解的示例：

//在头部引入js文件
<script src="../../lib/template-web.js"></script>
...
//模板化后的html填充的容器
<div id="content"></div>
//定义模版区域
<script id="test" type="text/html">
<ul>
//开始循环填入数据，这里list为要循环的json对象，后面的value则为循环中读取出来的值，i则是索引。
//另外，传入进来的json对象名默认为$data
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>
</script>

<script>
var data = {
	title: '基本例子',
	isAdmin: true,
	list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
//生成模版化后的html
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>