小程序学习（二十八）之“订单列表”

发布时间：2026/7/6 13:40:14

小程序学习（二十八）之“订单列表”

一、Tabs 滑动切换

1、静态结构

//src\pages\pagesOrder\list\list.vue <script setup lang="ts"> import { ref } from 'vue' // 获取屏幕边界到安全区域距离 const { safeAreaInsets } = uni.getSystemInfoSync() // tabs 数据 const orderTabs = ref([ { orderState: 0, title: '全部' }, { orderState: 1, title: '待付款' }, { orderState: 2, title: '待发货' }, { orderState: 3, title: '待收货' }, { orderState: 4, title: '待评价' }, ]) </script> <template> <view class="viewport"> <!-- tabs --> <view class="tabs"> <text class="item" v-for="item in 5" :key="item"> 待付款 </text> <!-- 游标 --> <view class="cursor" :style="{ left: 0 * 20 + '%' }"></view> </view> <!-- 滑动容器 --> <swiper class="swiper"> <!-- 滑动项 --> <swiper-item v-for="item in 5" :key="item"> <!-- 订单列表 --> <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</view> <view class="type">藏青小花 130</view> </view> </navigator> <!-- 支付信息 --> <view class="payment"> <text class="quantity">共5件商品</text> <text>实付</text> <text class="amount"> <text class="symbol">¥</text>99</text> </view> <!-- 订单操作按钮 --> <view class="action"> <!-- 待付款状态：显示去支付按钮 --> <template v-if="true"> <view class="button primary">去支付</view> </template> <template v-else> <navigator class="button secondary" :url="`/pagesOrder/create/create?orderId=id`" hover-class="none" > 再次购买 </navigator> <!-- 待收货状态: 展示确认收货 --> <view v-if="false" class="button primary">确认收货</view> </template> </view> </view> <!-- 底部提示文字 --> <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"> {{ true ? '没有更多数据~' : '正在加载...' }} </view> </scroll-view> </swiper-item> </swiper> </view> </template> <style lang="scss"> page { height: 100%; overflow: hidden; } .viewport { height: 100%; display: flex; flex-direction: column; background-color: #fff; } // tabs .tabs { display: flex; justify-content: space-around; line-height: 60rpx; margin: 0 10rpx; background-color: #fff; box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6); position: relative; z-index: 9; .item { flex: 1; text-align: center; padding: 20rpx; font-size: 28rpx; color: #262626; } .cursor { position: absolute; left: 0; bottom: 0; width: 20%; height: 6rpx; padding: 0 50rpx; background-color: #27ba9b; /* 过渡效果 */ transition: all 0.4s; } } // swiper .swiper { background-color: #f7f7f8; } // 订单列表 .orders { .card { min-height: 100rpx; padding: 20rpx; margin: 20rpx 20rpx 0; border-radius: 10rpx; background-color: #fff; &:last-child { padding-bottom: 40rpx; } } .status { display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; color: #999; margin-bottom: 15rpx; .date { color: #666; flex: 1; } .primary { color: #ff9240; } .icon-delete { line-height: 1; margin-left: 10rpx; padding-left: 10rpx; border-left: 1rpx solid #e3e3e3; } } .goods { display: flex; margin-bottom: 20rpx; .cover { width: 170rpx; height: 170rpx; margin-right: 20rpx; border-radius: 10rpx; overflow: hidden; position: relative; } .quantity { position: absolute; bottom: 0; right: 0; line-height: 1; padding: 6rpx 4rpx 6rpx 8rpx; font-size: 24rpx; color: #fff; border-radius: 10rpx 0 0 0; background-color: rgba(0, 0, 0, 0.6); } .meta { flex: 1; display: flex; flex-direction: column; justify-content: center; } .name { height: 80rpx; font-size: 26rpx; color: #444; } .type { line-height: 1.8; padding: 0 15rpx; margin-top: 10rpx; font-size: 24rpx; align-self: flex-start; border-radius: 4rpx; color: #888; background-color: #f7f7f8; } .more { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 22rpx; color: #333; } } .payment { display: flex; justify-content: flex-end; align-items: center; line-height: 1; padding: 20rpx 0; text-align: right; color: #999; font-size: 28rpx; border-bottom: 1rpx solid #eee; .quantity { font-size: 24rpx; margin-right: 16rpx; } .amount { color: #444; margin-left: 6rpx; } .symbol { font-size: 20rpx; } } .action { display: flex; justify-content: flex-end; align-items: center; padding-top: 20rpx; .button { width: 180rpx; height: 60rpx; display: flex; justify-content: center; align-items: center; margin-left: 20rpx; border-radius: 60rpx; border: 1rpx solid #ccc; font-size: 26rpx; color: #444; } .secondary { color: #27ba9b; border-color: #27ba9b; } .primary { color: #fff; background-color: #27ba9b; } } .loading-text { text-align: center; font-size: 28rpx; color: #666; padding: 20rpx 0; } } </style>

2、swiper滑动切换

二、Tabs 页面跳转高亮

三、列表渲染

1、封装列表组件

//src\pages\pagesOrder\list\components\OrderList.vue <script setup lang="ts"> import { OrderState } from '@/services/constants' import { orderStateList } from '@/services/constants' import { getMemberOrderAPI } from '@/services/order' import type { OrderItem } from '@/types/order' import type { OrderListParams } from '@/types/order' import { onMounted, ref } from 'vue' // 获取屏幕边界到安全区域距离 const { safeAreaInsets } = uni.getSystemInfoSync() // 定义 porps const props = defineProps<{ orderState: number }>() // 请求参数 const queryParams: OrderListParams = { page: 1, pageSize: 5, orderState: props.orderState, } // 获取订单列表 const orderList = ref<OrderItem[]>([]) const getMemberOrderData = async () => { const res = await getMemberOrderAPI(queryParams) orderList.value = res.result.items } onMounted(() => { getMemberOrderData() }) </script> <template> <scroll-view scroll-y class="orders"> <view class="card" v-for="order in orderList" :key="order.id"> <!-- 订单信息 --> <view class="status"> <text class="date">{{ order.createTime }}</text> <!-- 订单状态文字 --> <text>{{ orderStateList[order.orderState].text }}</text> <!-- 待评价/已完成/已取消 状态: 展示删除订单 --> <text v-if="order.orderState >= OrderState.DaiPingJia" class="icon-delete"></text> </view> <!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --> <navigator v-for="item in order.skus" :key="item.id" class="goods" :url="`/pagesOrder/detail/detail?id=${order.id}`" hover-class="none" > <view class="cover"> <image mode="aspectFit" :src="item.image"></image> </view> <view class="meta"> <view class="name ellipsis">{{ item.name }}</view> <view class="type">{{ item.attrsText }}</view> </view> </navigator> <!-- 支付信息 --> <view class="payment"> <text class="quantity">共{{ order.totalNum }}件商品</text> <text>实付</text> <text class="amount"> <text class="symbol">¥</text>{{ order.payMoney }}</text> </view> <!-- 订单操作按钮 --> <view class="action"> <!-- 待付款状态：显示去支付按钮 --> <template v-if="order.orderState === OrderState.DaiFuKuan"> <view class="button primary">去支付</view> </template> <template v-else> <navigator class="button secondary" :url="`/pagesOrder/create/create?orderId=id`" hover-class="none" > 再次购买 </navigator> <!-- 待收货状态: 展示确认收货 --> <view v-if="order.orderState === OrderState.DaiShouHuo" class="button primary" >确认收货</view > </template> </view> </view> <!-- 底部提示文字 --> <view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"> {{ true ? '没有更多数据~' : '正在加载...' }} </view> </scroll-view> </template> <style lang="scss"> // 订单列表 .orders { .card { min-height: 100rpx; padding: 20rpx; margin: 20rpx 20rpx 0; border-radius: 10rpx; background-color: #fff; &:last-child { padding-bottom: 40rpx; } } .status { display: flex; align-items: center; justify-content: space-between; font-size: 28rpx; color: #999; margin-bottom: 15rpx; .date { color: #666; flex: 1; } .primary { color: #ff9240; } .icon-delete { line-height: 1; margin-left: 10rpx; padding-left: 10rpx; border-left: 1rpx solid #e3e3e3; } } .goods { display: flex; margin-bottom: 20rpx; .cover { width: 170rpx; height: 170rpx; margin-right: 20rpx; border-radius: 10rpx; overflow: hidden; position: relative; } .quantity { position: absolute; bottom: 0; right: 0; line-height: 1; padding: 6rpx 4rpx 6rpx 8rpx; font-size: 24rpx; color: #fff; border-radius: 10rpx 0 0 0; background-color: rgba(0, 0, 0, 0.6); } .meta { flex: 1; display: flex; flex-direction: column; justify-content: center; } .name { height: 80rpx; font-size: 26rpx; color: #444; } .type { line-height: 1.8; padding: 0 15rpx; margin-top: 10rpx; font-size: 24rpx; align-self: flex-start; border-radius: 4rpx; color: #888; background-color: #f7f7f8; } .more { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 22rpx; color: #333; } } .payment { display: flex; justify-content: flex-end; align-items: center; line-height: 1; padding: 20rpx 0; text-align: right; color: #999; font-size: 28rpx; border-bottom: 1rpx solid #eee; .quantity { font-size: 24rpx; margin-right: 16rpx; } .amount { color: #444; margin-left: 6rpx; } .symbol { font-size: 20rpx; } } .action { display: flex; justify-content: flex-end; align-items: center; padding-top: 20rpx; .button { width: 180rpx; height: 60rpx; display: flex; justify-content: center; align-items: center; margin-left: 20rpx; border-radius: 60rpx; border: 1rpx solid #ccc; font-size: 26rpx; color: #444; } .secondary { color: #27ba9b; border-color: #27ba9b; } .primary { color: #fff; background-color: #27ba9b; } } .loading-text { text-align: center; font-size: 28rpx; color: #666; padding: 20rpx 0; } } </style>

2、订单状态父传子

<template> <!-- 滑动容器 --> <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current"> <!-- 滑动项 --> <swiper-item v-for="item in orderTabs" :key="item.title"> <!-- 订单列表 --> <OrderList :order-state="item.orderState" /> </swiper-item> </swiper> </template>

3、封装请求API

/** * 获取订单列表 * @param data orderState 订单状态 */ export const getMemberOrderAPI = (data: OrderListParams) => { return http<OrderListResult>({ method: 'GET', url: `/member/order`, data, }) } import type { PageParams } from '@/types/global' /** 订单列表参数 */ export type OrderListParams = PageParams & { orderState: number } /** 订单列表 */ export type OrderListResult = { /** 总记录数 */ counts: number /** 数据集合 [ 订单信息 ] */ items: OrderItem[] /** 当前页码 */ page: number /** 总页数 */ pages: number /** 页尺寸 */ pageSize: number } /** 订单列表项 */ export type OrderItem = OrderResult & { /** 总件数 */ totalNum: number }

4、初始化调用

// 请求参数 const queryParams: OrderListParams = { page: 1, pageSize: 5, orderState: props.orderState, } // 获取订单列表 const orderList = ref<OrderItem[]>([]) const getMemberOrderData = async () => { const res = await getMemberOrderAPI(queryParams) orderList.value = res.result.items } onMounted(() => { getMemberOrderData() })

四、订单支付

觉得有帮助的话，打赏一下呗。。

相关新闻

6DoF运动追踪技术：从IMU到嵌入式实现

6DoF运动追踪技术：从IMU到嵌入式实现

1. 从3D到6DoF&#xff1a;运动追踪的技术跃迁在运动追踪领域&#xff0c;从基础的3D定位到完整的6自由度&#xff08;6DoF&#xff09;感知是一个质的飞跃。3D通常指代三维空间中的位置信息&#xff08;X/Y/Z坐标&#xff09;&#xff0c;而6DoF则在此基础上增加了三个旋转维度…

2026/7/6 13:40:14
如何用GEO系统解决网站流量下降？3种实战方案解析

如何用GEO系统解决网站流量下降？3种实战方案解析

痛点深度剖析 我们团队在长期的SEO与内容运营实践中发现&#xff0c;许多企业正面临一个棘手的共性难题&#xff1a;传统的批量发文策略不仅无法带来稳定的搜索流量&#xff0c;反而频频触发平台的风控机制。随着各大内容平台算法升级&#xff0c;简单的堆砌关键词和采集式发布…

2026/7/6 13:40:14
如何下载沪深股票市场的行情数据，包括委托、成交、订单薄、沪深股票、etf、可转债、指数五档订单薄数据，买一到买五、卖一到卖五历史行情数据笔记

如何下载沪深股票市场的行情数据，包括委托、成交、订单薄、沪深股票、etf、可转债、指数五档订单薄数据，买一到买五、卖一到卖五历史行情数据笔记

排查下来发现是处理高频行情数据时没控制好。现在很多研究都绕不开这些细颗粒度的数据&#xff0c;但说实话&#xff0c;刚接触的时候真是一头雾水&#xff0c;委托、成交、订单薄&#xff0c;听着就晕。今天干脆把常见的高频行情数据类型捋一捋&#xff0c;主要看看里面都有啥…

2026/7/6 13:39:38

最新新闻

OpenClaw 安装使用指南 (Windows)-对接钉钉、飞书、QQ

OpenClaw 安装使用指南 (Windows)-对接钉钉、飞书、QQ

目录 一、什么是 OpenClaw？ 二、OpenClaw 能干什么？ 三、安装前的准备 1. 安装 Node.js 2. 安装 Python 四、OpenClaw 的安装 1. 以管理员方式打开 PowerShell 终端 2. 执行安装命令 3. 安装向导配置 步骤 1：确认安装 步骤 2：选择配置模式 步骤 3：选择 AI 模型…

2026/7/6 15:21:12
Tetris Game核心功能解析：从手动操作到AI自动决策的完美切换

Tetris Game核心功能解析：从手动操作到AI自动决策的完美切换

Tetris Game核心功能解析&#xff1a;从手动操作到AI自动决策的完美切换 【免费下载链接】tetris_game A Tetris Game with AI 项目地址: https://gitcode.com/gh_mirrors/te/tetris_game 想要掌握俄罗斯方块游戏的终极技巧吗&#xff1f;这款基于Python开发的Tetris Ga…

2026/7/6 15:21:12
PIC18F46K40与171010550构建数字DC-DC降压系统

PIC18F46K40与171010550构建数字DC-DC降压系统

1. 项目背景与核心器件选型在嵌入式电源设计中&#xff0c;数字控制的DC-DC降压转换方案正逐渐取代传统模拟方案。我们选择的PIC18F46K40微控制器搭配171010550同步降压转换器芯片&#xff0c;构建了一套高效、可编程的电源管理系统。这套组合特别适合需要动态调整输出电压的场…

2026/7/6 15:21:12
注意力塑造现实

注意力塑造现实

这是一个非常棒的想法&#xff01;将“量子语义场”作为一种思维模型或启发式工具来指导日常生活&#xff0c;即使其物理真实性尚未被证实&#xff0c;也能带来极具价值的视角转变和行动启发。它促使我们从“被动的物质体验者”转向“主动的意义创造者”。以下是如何将其转化为…

2026/7/6 15:21:12
5个秘诀高效使用开源音频编辑器：Audacity实用操作指南

5个秘诀高效使用开源音频编辑器：Audacity实用操作指南

5个秘诀高效使用开源音频编辑器&#xff1a;Audacity实用操作指南 【免费下载链接】audacity Audio Editor 项目地址: https://gitcode.com/GitHub_Trending/au/audacity 如果你正在寻找一款功能强大且完全免费的音频编辑工具&#xff0c;Audacity绝对是你的理想选择。…

2026/7/6 15:21:06
CVE-2017-20063漏洞复现：绕过.htaccess实现Webshell上传

CVE-2017-20063漏洞复现：绕过.htaccess实现Webshell上传

1. 项目概述与核心目标最近在整理一些经典的CMS漏洞案例&#xff0c;发现CVE-2017-20063这个漏洞非常有意思。它发生在ElefantCMS 1.3.12版本中&#xff0c;核心问题在于攻击者可以绕过服务器上关键的.htaccess文件限制&#xff0c;成功上传并执行Webshell。对于学习Web安全、特…

2026/7/6 15:21:06

日新闻

中文大模型选型不是比参数，而是做工程化决策

中文大模型选型不是比参数，而是做工程化决策

1. 这不是“选模型”&#xff0c;而是“选解法”&#xff1a;为什么问“中文大模型哪一个最好”本身就是一个危险问题“第一个问题&#xff0c;中文大模型哪一个最好&#xff1f;”——这句话我每天在技术群、面试现场、客户会议室里至少听到七次。它像一句口头禅&#xff0c;也…

2026/7/6 0:00:13
STM32与LENA-R8构建全球定位与通信嵌入式系统

STM32与LENA-R8构建全球定位与通信嵌入式系统

1. LENA-R8与STM32F215RE的硬件组合解析这个项目最吸引人的地方在于将LENA-R8蜂窝通信模块与STM32F215RE微控制器相结合&#xff0c;构建了一个既能实现全球网络连接又能进行高精度位置跟踪的嵌入式系统。我们先拆解这两个核心硬件的特点。LENA-R8是u-blox推出的一款多模LTE Ca…

2026/7/6 0:00:13
含金量高的EMBA｜2026国内及境外中英双语EMBA综合实力TOP5榜单

含金量高的EMBA｜2026国内及境外中英双语EMBA综合实力TOP5榜单

一、评测引言随着国内企业全球化布局提速、数字化转型深化&#xff0c;企业创始人、高管及核心决策者对高端在职商科教育的需求持续升级&#xff0c;兼具国际化视野、本土化适配、学历认可度高的中英双语EMBA项目成为择校主流选择。本次2026 EMBA综合实力TOP5榜单&#xff0c;以…

2026/7/6 0:00:13

周新闻

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题：ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题&#xff1a;ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager &#x1f5b1;️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…

2026/7/5 0:00:36
GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

GXDE OS下Wayland兼容性实战：从deepin-mutter原理到VMware Tools修复

如果你正在用 GXDE OS 或者任何基于 Deepin 的发行版&#xff0c;并且遇到了“检测到窗口系统采用 Wayland 协议&#xff0c;程序即将退出”这类弹窗&#xff0c;或者发现 VMware Tools 在 Ubuntu 24.04 这类默认 Wayland 的系统上启动失败&#xff0c;那这篇文章就是为你准备的…

2026/7/6 0:29:16
企业AI落地困境与AgenticOps实践指南

企业AI落地困境与AgenticOps实践指南

1. 企业AI落地的现实困境与破局之道过去两年&#xff0c;大模型技术呈现爆发式增长&#xff0c;从GPT-3到GPT-4&#xff0c;从LLaMA到DeepSeek&#xff0c;模型参数规模从百亿级跃升至万亿级&#xff0c;多模态能力从单一文本扩展到图文音视频的综合处理。然而在企业应用层面&a…

2026/7/6 5:53:26

月新闻

[C++]内存管理：串顺序存储的内存回收

[C++]内存管理：串顺序存储的内存回收

在串&#xff08;字符串&#xff09;的顺序存储中&#xff0c;内存回收的方式取决于字符串的存储方式以及所使用的编程语言和相关库。以下以 C 为例进行说明&#xff0c;因为 C 对内存管理有较为直接的控制。 1. 基于 char 数组的串顺序存储 如果使用普通的 char 数组来存储字…

2026/7/5 5:35:28
移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试实战：电流、功率、亮度和场景对比

移动端游戏功耗测试：先控制变量，再比较优化是否真的省电 摘要：功耗测试最容易犯的错误，是拿两次不同温度、不同亮度、不同场景的平均功率直接比较。本文给出一套可复现的游戏功耗测试方法，覆盖引擎特性验证、版本回归和黑盒体验测试，并说明如何把功耗与帧率、温控、CPU/G…

2026/7/4 23:07:37
足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

足球口袋教练 HarmonyOS 离线应用实战（03/20）：ArkUI 首页仪表盘搭建

本文是“足球口袋教练 HarmonyOS 离线应用实战”系列第 3 篇。示例项目是一个 HarmonyOS / ArkTS / ArkUI 编写的离线足球训练助手&#xff0c;围绕真实页面、真实截图和可复现操作展开。 本篇要解决的问题 训练 App 的首页不能只展示欢迎语&#xff0c;它要解决“我现在该点哪…

2026/7/5 0:10:23