1,登陆设计
(1),该超市员工号为6位数字,如020001~工号输入也只能填写数字~
(2),密码使用<input type=“password”/>
(3),具有表单验证,按登陆的时候,会检验是否为空值,是否工号不存在~
(4),默认选择收银员~重置可情况输入,返回默认值
2,输入商品
(1),通过输入商品ID,以及数量进行添加商品
(2),商品ID输入限定只允许数字输入
(3),数量的输入限于1-1000
(4),数量可以通过按↑↓键进行递增递减~便于收银员操作
(5),输入完毕按Enter键进行添加商品,也可以点击“添加”按钮进行添加。
(6),添加时会验证商品ID是否存在,数量是否有效~
(7),添加商品之后,商品自动显示于订单项表格中~
(8),订单项表隔行换色,便于收银员浏览~
(9),小计、总金额,商品总数,会随商品添加而累加~
(10),订单编号自动生成格式为FM-日期-当天订单编号。如 FM-20150415001
(11),删除商品可选中商品(可多选),按del键进行删除(如下图),删除某一行之后,会对序号进行重新编号~确保序号规则;点击选中行可取消选中。
三,支付界面
(1),按支付后弹出这样的界面~
(2),界面自动显示支付的订单号,下单的系统时间,合计~
(3),为了让收银员快速清晰看到 合计,实付,找赎~界面字体调大并红色高亮
(4),当弹出该界面时,实付输入框自动获取焦点~
(5),输入实付,当键盘失去焦点,或者按键盘“=”键,便自动显示找赎金额~非常便于收银员。
(6),可选择是否打印小票,默认是~
(7),按确定之后,完成支付,打印小票,订单存入数据库~对主页面进行刷新,等待下一轮的订单。
(8),按取消之后,直接返回之前添加订单界面~亦可通过点击右上角close图标进行取消退出支付界面。
四,前端开发说明~
该界面的设计,出于小组成员对超市POS机的调查,同时站在收银员的角度进行设计~界面清晰明了而不逊色~关键又经常使用的操作可通过键盘控制,相对鼠标操作,显著提高收银员的工作效率。前端由HTML,CSS,JS进行开发,不使用任何框架~利用Ajax通过后台提供的API进行与后台的数据传输~
如果喜欢,请多给星喔,谢谢~