uniapp商场之订单模块【订单列表】

文章目录

前言
一、准备静态结构（分包）
二、Tabs滑动切换
- 1.Tabs文字渲染
- 2.点文字高亮切换
- 3.swiper滑动切换
三、Tabs页面跳转高亮
四、订单列表渲染
- 1.封装列表组件
- 2.订单状态父传子
- 3.封装请求API
- 4.准备请求参数
- 5.初始化调用
- 6.页面渲染
五、订单支付
- 1.页面条件渲染
- 2.事件绑定

前言

根据订单的不同状态展示订单列表，并实现多Tabs分页加载。

一、准备静态结构（分包）

右键pagesOrder新建分包list
在这里插入图片描述

二、Tabs滑动切换

订单列表的Tabs支持滑动切换，从【我的】进入订单列表，能高亮对应下标。

1.Tabs文字渲染

在这里插入图片描述

2.点文字高亮切换

在这里插入图片描述

3.swiper滑动切换

在这里插入图片描述

三、Tabs页面跳转高亮

在【我的】Tabs页点击我的订单的某类型，进行页面传参跳转至订单列表页，订单列表页接收参数并查找高亮下标显示。
在这里插入图片描述

个人中心页
在这里插入图片描述

订单列表页
在这里插入图片描述

四、订单列表渲染

1.封装列表组件

由于每个订单列表需要单独维护，将订单列表封装个组件方便管理。将订单列表页的订单列表部分剪贴至新建OrderList.vue

列表组件 OrderList.vue

<script setup lang="ts">// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()</script><template><!-- 订单列表 --><scroll-view scroll-y class="orders"><view class="card" v-for="item in 2" :key="item"><!-- 订单信息 --><view class="status"><text class="date">2023-04-14 13:14:20</text><!-- 订单状态文字 --><text>待付款</text><!-- 待评价/已完成/已取消 状态: 展示删除订单 --><text class="icon-delete"></text></view><!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --><navigatorv-for="sku in 2":key="sku"class="goods":url="`/pagesOrder/detail/detail?id=1`"hover-class="none"><view class="cover"><imagemode="aspectFit"src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"></image></view><view class="meta"><view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm<</