ionic4.x仿京东 - 10.2.确认订单-去结算跳到确认订单（返回特定页面），确认订单页面布局

最新推荐文章于 2023-09-12 22:10:25 发布
最新推荐文章于 2023-09-12 22:10:25 发布
阅读量933 收藏
点赞数
分类专栏： ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYYzyy1993/article/details/109035663
版权
ionic 专栏收录该内容
62 篇文章 5 订阅 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了如何在Ionic4.x中创建并配置确认订单页面，从购物车点击去结算时，不仅进行页面跳转，而且传递数据。通过NavController进行页面间的数据传递，并确保返回操作能正确回到购物车页面。同时，文章涵盖了确认订单页面的布局设计，包括图片问题的修复和最终代码展示。
摘要由CSDN通过智能技术生成

购物车 => 确认订单

一、新建确认订单页面

ionic g page checkout

 

二、配置路由

----------- tab3与checkout -----------

1. 从tab3的购物车点击去结算，跳到确认订单页面

【tab3.page.html】

为什么不用routerlink，这里不单单是页面的跳转，还涉及到数据的处理

【tab3.page.ts】

doCheckout()里要做的事情：navController跳转页面并get传值重要！！！

获取选中的要去结算的商品，判断有没有选中，没有选中要提醒，选中了就保存该数据，用NavController跳转

了解本专栏 订阅专栏 解锁全文
ZYYzyy1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
订阅专栏
商城-下单-订单结算页
shenzhen_zsw的专栏
06-18 1万+
商城-购物车-订单结算页2.订单结算页2.1.页面跳转2.2.收货人信息（作业）2.3.支付方式2.4.商品列表2.4.1.购物车信息获取2.4.2.页面渲染2.5.总金额2.6.提交订单2.6.1.页面提交2.6.2.精度损失问题 2.订单结算页 2.1.页面跳转 在购物车页面的最下方，有一个去结算按钮： 当点击结算，我们应该跳转到订单结算页，即：getOrderInfo.html 查看购物...
利用flex布局设计网购订单确认页面
hmcxy123的博客
08-26 624
当我们需要给多个对象设计相同的style时，灵活运用公共样式设计会节省大量代码。把共同的样式单独自定义一个class，然后在需要的对象里引用（比如：class="box orange")。这与导入字体图标的道理一样。...
ecshop 3 确认订单HTML页面
11-29
ecshop 3 确认订单HTML页面　
确认订单
yushengniwo的博客
04-06 1205
package com.example.fangjingdong.view.activity; import android.content.DialogInterface; import android.content.Intent; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCom...
VueDemo-21 确认订单
a9874561328的博客
02-09 961
21.确认订单 21.1 添加确认订单的页面 // src/views/order/index.vue <template> <div class="box"> <header class="header"> <van-nav-bar title="确认订单" left-arrow /> </header> <div class="content"......
访京东订单界面
qq_39923392的博客
01-16 900
首先先写一下主Activity的代码吧 public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ImageView image_btn; private TextView text_daizhi; private TextView
ionic-android-push-notification
05-07
使用Ionic和Node.js在Android上推送通知的示例 您必须按照本教程的说明向注册，生成KEY API和项目编号。 安装 $ cd app $ ionic platforms add android $ cd push-server $ npm install 必要的改变 /App/...
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建
02-13
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
ionic-vue-适用于Ionic v4的Vue.js集成-Vue.js开发
05-27
Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并以@ ionic / vue的形式提供。 Ionic-Vue如何为Vue集成离子适配器。 Ionic-Vue与@ ionic / vue的比较Ionic-Vue代码库已添加到Ionic内核中，并...
ionic-img-cache:Ionic 1.x应用程序的图像缓存
04-06
ionic-img-cache :framed_picture: 离子指令，用于在首次加载时缓存图像或元素背景图像。 在库的顶部工作。 该库可与Ionic Framework（v> = 1.0）一起使用，支持的平台为： 安卓 的iOS Windows Phone 8.1 ...
localStorage实现本地购物车
04-17
背景： 行业内企业应用，购物车不需要保存到服务器，关闭浏览器就清空购物车。 实现方法： 单个商品加入购物车｜ 商品批量加入购物车｜ 删除单个商品｜ 批量删除商品｜ 清空购物车｜ 增减购物车某个商品的数量｜ 修改购物车某个商品的数量｜ 查询购物车中某个商品的数量｜ 查询购物车商品列表｜ 查询购物车商品ID列表｜
简单实现IONIC购物车功能
08-31
主要为大家详细介绍了IONIC简易购物车的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
仿京东全套jsp模板
04-15
非常全面的仿京东jsp界面，包含首页，购物车，订单，登录，注册……等页面
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
08-27
本文将深入探讨如何在Ionic 3.x中进行正向传值，即从一个页面（A页面）传递数据到另一个页面（B页面），在A页面跳转到B页面的过程中实现数据的传递。 1. **NavController与NavParams的使用** Ionic 3.x对Angular...
淘淘商城第112讲——展示订单确认页面以及用户身份认证
李阿昀的博客
11-19 1519
我们上一讲一起搭建了订单系统的服务层工程和表现层工程。这一讲，我们就要实现订单确认页面展示这个功能了。 展示订单确认页面 在淘淘商城中，用户未登录即可添加商品到购物车，如下图所示。 这儿我们是参考的之前的京东，之前的京东在用户没有登录的情况下他就可以使用购物车了，但是当用户要真正去结算的时候，一定是要求他登录的，也就是说由购物车商品列表展示页面直接跳转到用户登录页面要求他去登录。 在淘淘商城中，我们也是这样做的，当用户点击购物车商品列表展示页面中的去结算之后，如果当前用户还没登录，那么必须要求他先登录。也
跳转到订单结算页
Leon_Jinhai_Sun的博客
02-13 2929
订单结算页 页面跳转 在购物车页面的最下方，有一个去结算按钮： 当点击结算，我们应该跳转到订单结算页，即：getOrderInfo.html 查看购物车的结算按钮： 可以看到，地址是正确的。但是只有登录用户才可以去结算付款，因此我们不能直接跳转，而是在跳转前校验用户的登录状态，如果发现是未登录，应该重定向到登录页！ 我们给这个按钮绑定点击事件： 事件中判断登录状态，进行页面跳...
1.订单结算页
痞子王的博客
02-13 617
1.订单结算页 1.1收件地址分析 用户从购物车页面点击结算，跳转到订单结算页，结算页需要加载用户对应的收件地址，如下图： 表结构： CREATE TABLE `tb_address` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) DEFAULT NULL COMMENT '用户名', `provinceid` va...
SpringBoot项目--电脑商城【确认订单】
最新发布
m0_63077733的博客
09-12 345
用户在购物车列表页中通过随机勾选相关的商品,在点击"结算"按钮后跳转到"确认订单页",在这个页面中需要展示用户在上个页面所勾选的"购物车列表页"中对应的数据.说白了也就是列表展示,且展示的内容还是来自于购物车表.但是用户勾选了哪些商品呢,所所以在持久层需要完成“根据若干个不确定的id值，查询购物车数据表，显示购物车中的数据信息”。则需要执行的SQL语句大致是。注意where cid in (?),这里是需要传入cid的集合。
UNIAPP实战项目笔记46 订单确认页面的布局
Ggome的博客
11-28 1729
common 公共文件：全局css文件 || 全局js文件。pages.json 配置文件： 导航、 tabbar、 路由。manifest.json 配置文件： appid、logo…confirm-order.vue 确认订单页面布局和渲染。App.vue 全局配置：样式、全局监视。main.js vue初始化入口文件。具体内容图片自己替换哈，随便找了个图片的做示例。page 页面。components 组件。
ionic-angular中怎么新建页面
06-08
在ionic-angular中，新建页面可以通过以下步骤完成： 1. 打开终端，进入到你的ionic项目的根目录。 2. 运行以下命令创建一个新的页面： ``` ionic generate page <page-name> ``` 其中，`<page-name>`是你想要创建的页面的名称，例如： ``` ionic generate page mypage ``` 3. 运行以上命令后，ionic会自动生成一个包含了相关文件的新页面，这些文件包括： - `mypage.module.ts`：定义了新页面的模块。 - `mypage.page.ts`：定义了新页面的逻辑代码。 - `mypage.page.html`：定义了新页面的HTML模板代码。 - `mypage.page.scss`：定义了新页面的样式代码。 4. 在需要使用新页面的地方引入它的模块，例如在`app.module.ts`中添加如下代码： ``` import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { MyPageModule } from './mypage/mypage.module'; // 引入新页面的模块 @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [ BrowserModule, FormsModule, IonicModule.forRoot(), AppRoutingModule, MyPageModule // 添加新页面的模块 ], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` 至此，你已经成功创建了一个新的页面。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZYYzyy1993

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值