28、购物车结算页面-导航栏与地址选择布局

简介: 本章我们开始讲购物车结算页面的编写,这个页面应该是整个项目里最复杂的页面了,ok,这章讲下基本结构。Github:https://github.com/Ewall1106/mall(请选择分支chapter28)1、新建购物车页面(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue购物车页面构建(2)然后就是去注册下路由这里就不废话了占据篇幅了,这个应该很easy了。

本章我们开始讲购物车结算页面的编写,这个页面应该是整个项目里最复杂的页面了,ok,这章讲下基本结构。
Github:https://github.com/Ewall1106/mall(请选择分支chapter28)

1、新建购物车页面

(1)老规矩,复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue

img_156226a8184c6070847ec01150505416.png
购物车页面构建

(2)然后就是去注册下路由

  • 这里就不废话了占据篇幅了,这个应该很easy了。

2、顶部导航栏

(1)顶部的第一个块就是导航栏了,跟前面的一样,没什么难点的了。

img_ae9d52c4d9340ce98c93bd52ca271539.png
导航栏

然后就是添加几个前进后退的事件,我这里就直接复制前面章节中商品详情页里的头部了,其实,这里你也可以把部分抽离成一个组件从而实现复用,我就懒得抽了。

3、收货地址块

(1)重点说下收货地址这部分内容的实现,首先快速写下html和css完成基本布局:

img_7f1c50981a2cb7311138cb3f5f71cd25.png
收货地址

css就是一些简单的flex布局及阿里巴巴icon-font的运用,不贴代码了。完成的基本效果:

img_51318e2219b3d94566ba1759771b4ddf.png
基本头部效果

(2)然后我们需要跳转到一个新页面完成地址选择功能,所以我们再新建一个address.vue页面

  • 同上,复制一份我们test.vue重命名为address作为我们的地址选择页面;
  • 注册路由

4、小结

这章就是完成了购物车结算页面的部分布局,下一章我们去adress.vue中借助vant组件实现地址选择功能,然后我们在返回到这个页面来完成我们剩下的功能。

目录
相关文章
|
5月前
|
存储 Kubernetes 关系型数据库
k8s 安装posgresql
本指南介绍如何在K8s集群中快速部署PostgreSQL官方镜像(v18.3),配合local-path-provisioner提供本地持久化存储。含命名空间、PVC、Deployment与Service完整YAML,支持国产镜像加速,兼顾14–18版本路径兼容性,适用于开发与测试环境。(239字)
|
10月前
|
JSON JavaScript 数据可视化
TinyEngine物料自动导入上手指南:从零搭建高效低代码开发环境
本文介绍如何通过TinyEngine物料自动导入工具提升低代码开发效率。涵盖环境配置、物料规范、自动化脚本开发、Git集成及CI/CD实践,手把手教你实现物料一键导入与版本管理,助力团队高效协作。
|
6月前
|
人工智能 边缘计算 5G
云边端电源设计:一体成型电感选型,别只看感值和电流
本文深度解析云边端设备中一体成型电感的选型要点:聚焦磁粉配方(铁硅铝/铁硅铬/非晶)、压缩密度(≥7.6g/cm³)与磁导率(80–120最优)、热压工艺及扁平线散热设计,并给出留余量、回流焊可靠性、EMI布局三大避坑指南,助硬件工程师夯实电源稳定性。
601 1
|
6月前
|
数据采集 人工智能 JavaScript
OpenClaw 阿里云/本地部署+Apify MCP集成指南:强化全网结构化数据高效采集教程
现在AI编程工具的联网数据采集能力,往往卡在“JS渲染页面抓不到、反爬机制绕不开、数据格式不规范”三大痛点上。OpenClaw作为灵活的AI Agent平台,2026年通过与Apify生态深度集成,完美解决了这些问题——借助Apify的Agent Skills与MCP Server,OpenClaw不仅能突破JS渲染与反爬限制,还能直接输出结构化表格数据,让数据采集从“文本摘要”升级为“即用型数据集”。
640 0
|
API 定位技术 数据安全/隐私保护
微信加好友频繁怎么解决?有方法吗
微信加好友频繁的成因分析与系统解决方案
|
运维 关系型数据库 数据库
应用官方 Docker 镜像已成熟,团队为何转向 Websoft9 而不再依赖 Bitnami
随着云原生发展,部署工具从 Bitnami 转向 Websoft9。后者基于官方镜像,提供多应用编排与统一运维,提升部署效率与维护能力,适合多系统协同场景。
应用官方 Docker 镜像已成熟,团队为何转向 Websoft9 而不再依赖 Bitnami
|
物联网 智能硬件
物联卡如何选择
选择物联卡需综合考量设备类型与数量、流量需求及卡种特性。明确设备属性后,挑选适宜流量套餐,并了解普通物联网卡、语音卡、NB-IoT卡及陶瓷卡等不同类型的应用场景。同时考虑网络覆盖、服务质量及成本预算,优选性价比高且售后服务完善的运营商,确保物联卡兼容设备并顺利完成实名认证。
物联卡如何选择
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
843 1
|
NoSQL 网络协议 Unix
1)Redis 属于单线程还是多线程?不同版本之间有什么区别?
1)Redis 属于单线程还是多线程?不同版本之间有什么区别?
622 2

热门文章

最新文章