使用ionic完成的一个小项目

在这里插入图片描述
查询数据库返回的结果,显示轮播和新品上市功能
在这里插入图片描述
商品列表是从数据库中拿到结果遍历出来的,并在点击跳转详情页面的时候将商品ID作为参数传递过去
在这里插入图片描述
根据拿到的商品ID去数据库中查询商品信息显示出来
在这里插入图片描述
点击右上角图标会弹出一些操作
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
购物车信息有三种状态,根据用户的登录状态来判断显示内容,登录成功在判断购物车数据是否为空
在这里插入图片描述
这边显示的是用户的一些个人信息
在这里插入图片描述
这是模拟APP设置里的功能模块,点击退出登录清除session中的用户id,并返回到登录面板
在这里插入图片描述
这里按钮默认是禁用的,根据JS判断用户名是否有输入,用户名,密码都输入按钮才回复可用
在这里插入图片描述
这里点击后会判断一下用户名密码是否正确
在这里插入图片描述
在这里插入图片描述
点击商品详情里的加入购物车,会判断用户当前是否登录,登录状态下点击会提示添加成功,否则会跳转到登录界面
在这里插入图片描述
购物车中的加减功能都是实时对应数据库中的数量进行修改的
在这里插入图片描述
在这里插入图片描述
当数量<1的时候会触发删除功能,将这条商品信息从购物车中移除
在这里插入图片描述
4.23新增功能

在这里插入图片描述
在这里插入图片描述
点击复选框和加减功能,会自动算出当前已选商品的总价
在这里插入图片描述
点击某一个商品点结算会跳到订单支付界面
在这里插入图片描述
点击支付订单,会弹出一个模态窗口
在这里插入图片描述
点支付会加载,完成功能后自动跳回首页
在这里插入图片描述
git仓库:https://github.com/WDaGao/template

发布了56 篇原创文章 · 获赞 8 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44361433/article/details/89459967