移动端商城H5调研

模板项目

样式交互丰富可借鉴: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电商平台

页面

首页:

个人中心:

我的订单:

设置:

留下评论