版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
小程序依然采用mpvue+云开发实现!本文只介绍功能,如果有问题欢迎留言,乐意解答。
小程序由来
前几天我舅跟我说,他买的小程序提示长时间未使用可能会被冻结,简单看了下他小程序的功能,就是产品的展示,没其他功能,舅还说花了2万块,我说你这钱完全是打了水漂,等我有时间给你重新做一个。
界面展示
首页
产品详情页
个人中心页
在线留言页
关于我们页
留言列表页
功能介绍
首页
- 轮播图不用过多介绍,轮播图右下角的数字是自己手写的;
- 搜索框,没有另起一页,直接输入可实现动态搜索产品;
- 产品列表页,默认一页加载6条;
- 每个产品右上角可能会出现hot标志,这里是否显示hot的条件是浏览量大于5,后面可以适当增大这个数字;
产品详情页
由于我舅提供的资料确实太少,所以详情做的难免有点粗糙,后面如果他有心想好好介绍他的产品我再好好改改
- 详情页banner图,可预览;
- 这里有个浏览量,即当进入详情走一遍针对这个产品浏览量+1的云函数,云函数实现了两个功能,先count数+1;后返回当前产品的详情内容;
- 底部fixed一个按钮,方便用户去联系我舅咨询购买;
个人中心页
为了好看,这里还是放一下用户头像和姓名
- 默认进个人中心页,用户未授权,一旦用户授权后查看用户权限是否能查看留言列表功能,这里通过判断openId,这里的做法是当openId是我舅本人的时候,才展示留言列表栏,方便他进入留言列表页与客户联系;
- 留言列表栏有个计数红点,红点个数通过云函数去读取数据库留言列表中read为false的项数之和;
- 之所以要做这个留言列表栏,是为了方便我舅管理,不至于要我去为他提供一个后台管理吧;
在线留言页
为了凸显简单明了,这里要填的都是必填项
- 姓名,手机号,想要买的设备名称;
- 手机号做了简单的校验,正则:/^1[3456789]\d{9}$/
- 提交成功后给个提交成功的提示返回到个人中心页;
关于我们页
-
由于能利用的资源实在匮乏,所有内容都是自己网上查找;
-
符合自己的审美就先凑合用;
留言列表页
- 默认每一项当管理员第一次看到的时候,右上角会有一个小红点;
- 一旦管理员拨打了某项客户的电话,我们这里走一下update相关的云函数,将这一项的read置为true,重新读取列表数组,则红点消失;
- 当返回个人中心页时,建议使用onShow让数据重新渲染,可以动态更新计数小红点;