当前位置：首页 > article >正文

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

article 2025/2/14 1:08:42

文章目录

前言
一、准备静态结构（分包）
二、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>
            <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 -->
            <navigator
              v-for="sku in 2"
              :key="sku"
              class="goods"
              :url="`/pagesOrder/detail/detail?id=1`"
              hover-class="none"
            >
              <view class="cover">
                <image
                  mode="aspectFit"
                  src="https://yanxuan-item.nosdn.127.net/c07edde1047fa1bd0b795bed136c2bb2.jpg"
                ></image>
              </view>
              <view class="meta">
                <view class="name ellipsis">ins风小碎花泡泡袖衬110-160cm<</