最近用 Laravel + React 给客户做项目。 客户是生产销售医疗美容硬件的。他们想要一个像竞争对手一样的用微信扫码登记些信息然后给用户发来产品 pin 码用于激活产品,另一个功能是防伪验证。因为他们的竞争对手做了有这些功能,他们也要有。第三个功能就是要有个页面让关注公众号的人可以方便地知道找到美容店,那这些美容店都是买他们仪器的店,这些店激活仪器时就要记录门店信息。
这个项目分用户端与管理员端。
用户端主要就是他们的客户从微信公众号底菜单点进来手机号+验证码登录,然后扫码(机器上二维码)填表从服务端下发 pin 码用于设备激活。
另一个功能是标准的防伪查询功能,用户刮开贴在机器上的防伪码输入后四位验证仪器真伪。记录查询次数。(如果是只要防伪查询功能,那直接上某宝买防伪贴纸人家送查询服务)。
管理后台基础先是标准和 RBAC 这种基于角色的权限管理系统,方便给不同员工分配不同的权限。这是内部系统,就用邮箱登认证了。主要功能为管理客户,客户门店,产品, 产口的二维码、序列号、pin 码、防伪码、谁激活的,还有防伪查询的信息。防伪查询会记录些用户浏览器信息,登录的人还会记录是谁查的,看看有没有坏人在偷防伪码,造假货。还有独立表记录了所有管理后台数据变更处的操作,避免员工间扯皮。仪表盘列出了一些简单的数据,方便老板查看。
用的 Laravel 里的 starter kit 的 react 版,带有 inertia.js,所以页面跳转实际是前端控制的,数据也是异步传输的,打开页面后再没有整页刷新,页面响应迅速,还自带预读取,所以我也没有放 loading 这种加载中的状态,闪一下加载中样子也不好看。默认用的是 shadcn/ui 组件,所以简约黑白的风格,也方便管理员认真工作,没有花里胡哨的设计。(遗憾的是 shadcn/ui 组件比较少,复杂点的功能当然也要自己写,比较起来,纯组件功能方面,还是 ant design 的组件好用,强大,多。)
用户端实际是运行在微信里的网页, 所以页面是移动端优先的响应式布局。而 PC 端也仅做少量元素移动。管理后台也一样,但管理后台在电脑上看当然是最方便操作的,手机上仅表格要横向滚动。
这个项目难点在于帮助客户申请各种东西,如企业 ICP 备案要填写的东西很多,还要申请短信服务(这个电信移动等运营商审核了有12-13天才过,就是慢,审核的就是验证码短信前面那几个方括号里的字,就是企业的简称)。
最难的是 《互联网医疗信息服务资格证书》,这个要准备的资料超多,许多还要等到项目上线后截图。
这个产品部分截图如下:
用了百度地图。
管理后台的管理员的 RBAC 这种基于角色的管理系统。
数据仪表盘