vue3小兔鲜商城项目学习笔记+资料分享08
建议大家先去看我第一篇小兔鲜的文章，强烈建议，非常建议，十分建议，从头开始看更完整。
最近正在学习vue3小兔鲜
下面是学习笔记
支付模块
路由和组件
任务目标:完成支付页路由和组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KPrUa4zR-1668073221450)(media/05-164598169184610.png)]
1）准备组件
src/views/Pay/index.vue
<script setup lang="ts">
//
</script><template><div class="xtx-pay-page"><div class="container"><XtxBread><XtxBreadItem to="/">首页</XtxBreadItem><XtxBreadItem to="/cart">购物车</XtxBreadItem><XtxBreadItem>支付订单</XtxBreadItem></XtxBread><!-- 付款信息 --><div class="pay-info"><span class="icon iconfont icon-queren2"></span><div class="tip"><p>订单提交成功！请尽快完成支付。</p><p>支付还剩 <span>24分59秒</span>, 超时后将取消订单</p></div><div class="amount"><span>应付总额：</span><span>¥5673.00</span></div></div><!-- 付款方式 --><div class="pay-type"><p class="head">选择以下支付方式付款</p><div class="item"><p>支付平台</p><a class="btn wx" href="javascript:;"></a><a class="btn alipay" href="javascript:;"></a></div><div class="item"><p>支付方式</p><a class="btn" href="javascript:;">招商银行</a><a class="btn" href="javascript:;">工商银行</a><a class="btn" href="javascript:;">建设银行</a><a class="btn" href="javascript:;">农业银行</a><a class="btn" href="javascript:;">交通银行</a></div></div></div></div>
</template><style scoped lang="less">
.pay-info {background: #fff;display: flex;align-items: center;height: 240px;padding: 0 80px;.icon {font-size: 80px;color: #1dc779;}.tip {padding-left: 10px;flex: 1;p {&:first-child {font-size: 20px;margin-bottom: 5px;}&:last-child {color: #999;font-size: 16px;}}}.amount {span {&:first-child {font-size: 16px;color: #999;}&:last-child {color: @priceColor;font-size: 20px;}}}
}
.pay-type {margin-top: 20px;background-color: #fff;padding-bottom: 70px;p {line-height: 70px;height: 70px;padding-left: 30px;font-size: 16px;&.head {border-bottom: 1px solid #f5f5f5;}}.btn {width: 150px;height: 50px;border: 1px solid #e4e4e4;text-align: center;line-height: 48px;margin-left: 30px;color: #666666;display: inline-block;&.active,&:hover {border-color: @xtxColor;}&.alipay {background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)no-repeat center / contain;}&.wx {background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)no-repeat center / contain;}}
}
</style>
2）配置路由
{path: '/',component: Layout,children: [...{path: '/member/pay',component: () => import('@/views/Pay/index.vue')}]
},
订单跳转页
本节目标：订单跳转并传递订单 id 参数。
页面跳转思考
router.push()和router.replace()的区别是什么？- push 追加，后退能回到前页面
- replace 替换，后退不能回到前页面
- 提交订单后跳转到 支付详情页，是通过
push合适，还是用replace更合适呢，为什么？replace更合适，下单后商品在购物车已经没有了，后退回去会报错。
传递订单 id 号
- 完善TS 类型声明文件：
src\types\api\order.d.ts
// 下单后的返回值
export interface SubmitOrder {id: string;createTime: string;payType: number;orderState: number;payLatestTime: string;postFee: number;payMoney: number;totalMoney: number;totalNum: number;payChannel: number;// skus?: any;// countdown?: any;
}
- 跳转时传递订单
id
actions: {// 提交订单(创建订单)async createOrder(data: object) {// 创建订单const res = await http<SubmitOrder>('POST', '/member/order', data);// console.log('POST', '/member/order', res);// 成功提醒用户message({ type: 'success', text: '下单成功~' });//
vue3小兔鲜商城项目学习笔记+资料分享08相关推荐
- vue3小兔鲜商城项目学习笔记+资料分享06
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜 下面是学习笔记 购物车模块 购物车功能分析 [外链图片转存失败,源站可能有防盗链机制, ...
- vue3小兔鲜商城项目学习笔记+资料分享09
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜 下面是学习笔记 会员中心模块 个人中心 个人中心-路由配置 本节目标:个人中心二级路由 ...
- vue3小兔鲜商城项目学习笔记+资料分享03
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜 下面是学习笔记 顶级类目 目标:主要讲解开发时路由处理的要点,列表渲染部分自己课后实现 ...
- vue3小兔鲜商城项目学习笔记+资料分享01
最近正在学习vue3小兔鲜,需要相关学习资料的可以点链接 https://docs.qq.com/doc/DUmhUVERtUHpLaG1a 下面试学习笔记 项目起步 项目预览地址 小兔鲜儿商城:ht ...
- vue3小兔鲜商城项目学习笔记+资料分享04
最近正在学习vue3小兔鲜, 下面是学习笔记 详情模块 目标:界面渲染部分我们快速准备,详情模块的重点都在组件封装. 基础布局和路由 任务目标: 完成商品详情的基础布局和路由配置 [外链图片转存失败, ...
- vue3小兔鲜商城项目学习笔记+资料分享05
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 最近正在学习vue3小兔鲜, 下面是学习笔记 登录模块 路由与组件 目标:登录组件在书写一级路由的时候已经准备,添 ...
- vue3小兔鲜商城项目学习笔记+资料分享07
建议大家先去看我第一篇小兔鲜的文章,强烈建议,非常建议,十分建议,从头开始看更完整. 下面是学习笔记 填写订单模块 填写订单实现 本节目标: 实现填写订单跳转 填写订单页组件和路由 1)准备填写订单页 ...
- web基础阶段的小兔鲜儿项目学习
小兔鲜儿 1. 所用素材 2. 项目文件介绍 3. index页面的基本骨架 4. 思路:先写外面大盒子和版心,由外往内写 5. 源码: 6. 代码的一些命名 1. 所用素材 素材链接,点我跳转:ht ...
- 小兔鲜儿项目pc客户端前端静态页面
小兔鲜儿项目pc客户端前端静态页面 一.效果图 二.文件和目录准备 新建index.html在根目录 新建css文件夹保存网站的样式,并新建以下css文件: base.css:基础公共样式 commo ...
最新文章
- 云笔记积累个人知识体系
- 数据科学之基石：数据科学家必须掌握的10个统计学概念
- jboss5 启动时报HsqlException:length must be specified in type definition:VARBINARY错误
- 将Calendar对象转换为日期时间字符串
- C++为什么要学指针？
- LeetCode 第 19 场双周赛（231 / 1120，前20.6%）
- mysql批量插入 增加参数_MySql 的批量操作，要加rewriteBatchedStatements参数
- 【C++】递归打印杨辉三角
- 服务端api用php写还是用node,如何使用node搭建服务器,写接口,调接口,跨域
- Android 应用开发---ViewPager---5.使用Fragment实现ViewPager滑动
- Intel 64 and IA-32 Architectures Instruction Format 指令格式
- 想转行数据分析，看完这篇再做决定
- JavaSE基础-01-对象
- vivo21a点击android版本,VIVO X21A原厂线刷救砖包_内附工具可救砖
- Windows给SVN配置中文语言包
- Redis安装教程（vmware虚拟机上）
- 如何将网页另存为PDF
- 解决win10自动锁屏问题的一个方法
- 苹果电脑打不开网页连接不到服务器,苹果电脑chrome打不开网页怎么办_MAC上的chrome打不开网页如何解决-win7之家...
- Debian 10 安装fonts-noto-cjk
热门文章