模板项目
样式交互丰富可借鉴:openshopping-vue
基于vue-cli4使用了pug的H5商城模板(有很多封装,可以参考学习,iPhone11适配有问题):suo-design-pro
功能较齐全的聚划算H5项目(没用组件库):mall
什么都有最齐全商城(前后端 + 中后台管理):litemall
包含新闻资讯图片分享的H5商城:VUEcms010101
一个仿京东的,移动端H5电商平台:vue-jd-h5
最终决定:使用 mall 模板,参考 openshopping-vue 的样式和交互
交互逻辑
提交订单后
订单处理中:loading
待付款:请在 5 分钟内完成支付,过时订单将会取消(button:取消订单 + 去支付),过时后(text:期待您再次光临;button:再来一单);
支付完成:正在制作咖啡中,请稍候;
已完成:(text:感谢您的光临 Good Luck!; button:再来一单?)
各个H5商城项目调研
litemall
技术栈
- vue
- vant
有注册登录
包含了前后端和中后台管理
页面
个人中心:
登录:
注册:
VUEcms010101
技术栈
- vue
- vant
功能块
- 资讯头条
- 产品秀
- 商品购买
- 留言反馈
- 视频专区
- 联系我们
页面
首页:
个人中心:
商品列表:
mall
功能相对齐全,风格类似聚划算
特点:没用组件库,功能都纯手写,适合初学者学习。
页面
首页:
个人中心:
openshopping-vue
功能齐全
技术栈
- vue
- vant
页面
首页:
购买商品:
个人中心:
我的订单:
注册:
登录:
密码登录:
手机号登录:
我的优惠券:
suo-design-pro
特点
基于 vue-cli4 使用了 pug 的H5商城模板(有很多封装,可以参考学习,iPhone11适配有问题)
技术栈
- vue
- vant
- pug
- vconsole
页面
首页:
商城:
vConsole:
vue-jd-h5
技术栈
- vue
- vant
一个仿京东的,移动端H5电商平台
页面
首页:
个人中心:
我的订单:
设置: