From bed88896f8ef66645bf4e4b3e3994b236ed8de08 Mon Sep 17 00:00:00 2001
From: bobobobo <1055026847@qq.com>
Date: Sat, 7 Feb 2026 21:11:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TUIChat/message-input-toolbar/index.vue   |   5 +-
 manifest.json                                 |   4 +-
 pages.json                                    |   7 +
 pages/discover/order/detail.scss              | 378 ++++++++++++++++++
 pages/discover/order/detail.vue               | 284 +++++++++++++
 pages/discover/order/index.scss               | 317 +++++++++++++++
 pages/discover/order/index.vue                | 214 +++++++++-
 7 files changed, 1200 insertions(+), 9 deletions(-)
 create mode 100644 pages/discover/order/detail.scss
 create mode 100644 pages/discover/order/detail.vue
 create mode 100644 pages/discover/order/index.scss

diff --git a/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
index 243e102..bfd8c74 100644
--- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue
+++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue
@@ -65,6 +65,9 @@
           /> -->
           <!-- 红包 -->
           <RedEnvelope @onDialogPopupShowOrHide="handleSwiperDotShow" />
+
+          <!-- 直播按钮 -->
+          <!-- #ifdef APP-PLUS -->
           <!-- 语音通话 -->
           <CallView
             v-if="
@@ -82,8 +85,6 @@
             type="1"
             @onDialogPopupShowOrHide="handleSwiperDotShow"
           />
-          <!-- 直播按钮 -->
-          <!-- #ifdef APP-PLUS -->
           <LiveStream
             v-if="
               currentConversation?.type === TUIChatEngine.TYPES.CONV_GROUP
diff --git a/manifest.json b/manifest.json
index 0a0b4f7..b480c9d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -119,7 +119,7 @@
                     "description" : "融云实时音视频 SDK uni 原生插件",
                     "platforms" : "Android,iOS",
                     "url" : "https://ext.dcloud.net.cn/plugin?id=6372",
-                    "android_package_name" : "uni.app.UNI9EFDC69",
+                    "android_package_name" : "uni.app.UNI9EFDC69WWCC",
                     "ios_bundle_id" : "",
                     "isCloud" : true,
                     "bought" : 1,
@@ -133,7 +133,7 @@
                     "description" : "融云即时通讯 SDK uni 原生插件V2",
                     "platforms" : "Android,iOS",
                     "url" : "https://ext.dcloud.net.cn/plugin?id=9227",
-                    "android_package_name" : "uni.app.UNI9EFDC69",
+                    "android_package_name" : "uni.app.UNI9EFDC69WWCC",
                     "ios_bundle_id" : "",
                     "isCloud" : true,
                     "bought" : 1,
diff --git a/pages.json b/pages.json
index 98e2ab7..048bb18 100644
--- a/pages.json
+++ b/pages.json
@@ -499,6 +499,13 @@
         "navigationBarTitleText": "购买记录",
         "navigationBarBackgroundColor": "#ffffff"
       }
+    },
+    {
+      "path": "pages/discover/order/detail",
+      "style": {
+        "navigationBarTitleText": "记录详情",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
     }
   ],
   "globalStyle": {
diff --git a/pages/discover/order/detail.scss b/pages/discover/order/detail.scss
new file mode 100644
index 0000000..8e53ee4
--- /dev/null
+++ b/pages/discover/order/detail.scss
@@ -0,0 +1,378 @@
+.goods-detail-page {
+  min-height: 100vh;
+  background-color: #f8f9fa;
+  padding-bottom: 40rpx;
+}
+
+// 商品轮播图
+.goods-swiper {
+  width: 100%;
+  height: 750rpx;
+  background-color: #fff;
+
+  .swiper-image {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .image-indicator {
+    position: absolute;
+    bottom: 60rpx;
+    right: 30rpx;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 20rpx;
+    padding: 6rpx 16rpx;
+
+    .indicator-text {
+      font-size: 22rpx;
+      color: #fff;
+    }
+  }
+}
+
+// 卡片通用样式
+.goods-info-card,
+.spec-card,
+.info-card,
+.detail-card,
+.service-card,
+.params-card {
+  background-color: #fff;
+  border-radius: 20rpx;
+  margin: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
+}
+
+// 商品信息卡片
+.goods-info-card {
+  margin-top: -40rpx;
+  position: relative;
+  z-index: 2;
+
+  .price-section {
+    margin-bottom: 24rpx;
+
+    .current-price {
+      display: flex;
+      align-items: baseline;
+      margin-bottom: 20rpx;
+
+      .price-symbol {
+        font-size: 32rpx;
+        color: #ff4d4f;
+        font-weight: 500;
+        margin-right: 4rpx;
+      }
+
+      .price-number {
+        font-size: 48rpx;
+        color: #ff4d4f;
+        font-weight: 700;
+        margin-right: 20rpx;
+      }
+
+      .original-price {
+        font-size: 28rpx;
+        color: #999;
+        text-decoration: line-through;
+        margin-right: 20rpx;
+      }
+
+      .discount-tag {
+        background-color: #fff0f0;
+        border-radius: 6rpx;
+        padding: 4rpx 12rpx;
+
+        .discount-text {
+          font-size: 22rpx;
+          color: #ff4d4f;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .goods-title {
+      font-size: 36rpx;
+      color: #333;
+      font-weight: 600;
+      line-height: 1.4;
+      display: block;
+    }
+  }
+
+  .goods-description {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 28rpx;
+    display: block;
+  }
+
+  .tags-section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+
+    .tag-item {
+      background-color: #f0f9ff;
+      border-radius: 8rpx;
+      padding: 8rpx 16rpx;
+
+      .tag-text {
+        font-size: 24rpx;
+        color: #1890ff;
+      }
+    }
+  }
+}
+
+// 规格卡片
+.spec-card {
+  .card-header {
+    margin-bottom: 24rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+
+    .card-title {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 600;
+    }
+  }
+
+  .spec-list {
+    .spec-item {
+      display: flex;
+      margin-bottom: 20rpx;
+      padding-bottom: 20rpx;
+      border-bottom: 1rpx dashed #f0f0f0;
+
+      &:last-child {
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+      }
+
+      .spec-key {
+        font-size: 28rpx;
+        color: #666;
+        min-width: 140rpx;
+      }
+
+      .spec-value {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+}
+
+// 信息卡片
+.info-card {
+  .info-grid {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .info-label {
+        font-size: 26rpx;
+        color: #999;
+        margin-bottom: 8rpx;
+      }
+
+      .info-value {
+        font-size: 32rpx;
+        color: #333;
+        font-weight: 500;
+      }
+    }
+
+    .divider {
+      width: 1rpx;
+      height: 50rpx;
+      background-color: #f0f0f0;
+    }
+  }
+}
+
+// 详情卡片
+.detail-card {
+  .detail-content {
+    padding-top: 20rpx;
+  }
+
+  .default-detail {
+    .detail-section {
+      margin-bottom: 32rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .detail-title {
+        display: block;
+        font-size: 30rpx;
+        color: #333;
+        font-weight: 600;
+        margin-bottom: 16rpx;
+        padding-left: 20rpx;
+        position: relative;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 8rpx;
+          height: 30rpx;
+          background-color: #1890ff;
+          border-radius: 4rpx;
+        }
+      }
+
+      .detail-text {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.6;
+        display: block;
+      }
+    }
+  }
+}
+
+// 服务卡片
+.service-card {
+  .service-list {
+    .service-item {
+      display: flex;
+      align-items: center;
+      padding: 24rpx 0;
+      border-bottom: 1rpx solid #f5f5f5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .service-icon {
+        font-size: 40rpx;
+        margin-right: 24rpx;
+        width: 60rpx;
+        text-align: center;
+      }
+
+      .service-info {
+        flex: 1;
+
+        .service-title {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 500;
+          display: block;
+          margin-bottom: 4rpx;
+        }
+
+        .service-desc {
+          font-size: 24rpx;
+          color: #999;
+          display: block;
+        }
+      }
+    }
+  }
+}
+
+// 参数卡片
+.params-card {
+  .params-table {
+    .param-row {
+      display: flex;
+      padding: 20rpx 0;
+      border-bottom: 1rpx solid #f5f5f5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .param-key {
+        font-size: 28rpx;
+        color: #666;
+        width: 200rpx;
+      }
+
+      .param-value {
+        font-size: 28rpx;
+        color: #333;
+        flex: 1;
+      }
+    }
+  }
+}
+
+// 底部装饰
+.bottom-decor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 60rpx 0 40rpx;
+  padding: 0 32rpx;
+
+  .decor-line {
+    flex: 1;
+    height: 1rpx;
+    background-color: #e8e8e8;
+  }
+
+  .end-text {
+    font-size: 24rpx;
+    color: #ccc;
+    padding: 0 32rpx;
+  }
+}
+
+// 富文本内容样式调整
+::v-deep .rich-text {
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 20rpx auto;
+    border-radius: 12rpx;
+  }
+
+  p {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 20rpx;
+  }
+
+  h3 {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 600;
+    margin: 40rpx 0 20rpx;
+  }
+
+  ul,
+  ol {
+    padding-left: 40rpx;
+    margin-bottom: 20rpx;
+  }
+
+  li {
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.6;
+    margin-bottom: 12rpx;
+  }
+}
diff --git a/pages/discover/order/detail.vue b/pages/discover/order/detail.vue
new file mode 100644
index 0000000..1c03b71
--- /dev/null
+++ b/pages/discover/order/detail.vue
@@ -0,0 +1,284 @@
+<script setup>
+  import { ref } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { getUserBuyRecordDetail } from '../../../api/my-index'
+  import { navigateBack } from '../../../utils/router'
+
+  // 商品数据
+  const goods = ref({
+    id: 1001,
+    title: '简约纯棉T恤 2023夏季新款',
+    description:
+      '采用100%优质纯棉面料，亲肤透气，经典简约设计，多色可选，百搭时尚单品',
+    price: 89.99,
+    originalPrice: 129.99,
+    discount: 6.9,
+    stock: 256,
+    monthlySales: 1234,
+    totalSales: 8567,
+    isFavorite: false,
+
+    // 商品图片
+    images: [
+      'https://picsum.photos/seed/goods1/800/800',
+      'https://picsum.photos/seed/goods2/800/800',
+      'https://picsum.photos/seed/goods3/800/800',
+      'https://picsum.photos/seed/goods4/800/800'
+    ],
+
+    // 商品标签
+    tags: ['纯棉', '透气', '简约', '百搭', '夏季'],
+
+    // 商品规格
+    specifications: [
+      { key: '材质', value: '100%纯棉' },
+      { key: '颜色', value: '白色/黑色/灰色/藏青' },
+      { key: '尺码', value: 'S/M/L/XL/XXL' },
+      { key: '厚度', value: '常规厚度' },
+      { key: '袖长', value: '短袖' },
+      { key: '领型', value: '圆领' },
+      { key: '风格', value: '简约休闲' },
+      { key: '适用人群', value: '男女通用' }
+    ],
+
+    // 商品详情
+    features:
+      '采用精梳棉面料，柔软亲肤，透气性好，不易起球。简约设计，百搭各种风格，无论是休闲还是运动场合都能轻松驾驭。',
+    material:
+      '面料：100%精梳纯棉；里料：100%纯棉；洗涤建议：30°C以下水温，不可漂白，低温熨烫',
+    sizeInfo:
+      'S(肩宽44cm/胸围96cm/衣长68cm)、M(肩宽46cm/胸围100cm/衣长70cm)、L(肩宽48cm/胸围104cm/衣长72cm)、XL(肩宽50cm/胸围108cm/衣长74cm)、XXL(肩宽52cm/胸围112cm/衣长76cm)',
+    instructions:
+      '首次洗涤建议单独清洗，避免深色衣物褪色。自然晾干，避免暴晒。',
+
+    // 商品参数
+    parameters: [
+      { key: '品牌', value: 'SimpleLife' },
+      { key: '商品编号', value: 'SP20230615001' },
+      { key: '产地', value: '中国浙江' },
+      { key: '上市时间', value: '2023年6月' },
+      { key: '适用季节', value: '夏季' },
+      { key: '重量', value: '约0.25kg' },
+      { key: '包装', value: 'OPP袋装' },
+      { key: '质检', value: '已通过国家纺织品质量检验' }
+    ],
+    // 富文本内容（示例）
+    detailContent: ''
+  })
+
+  const loading = ref(true)
+  const detailData = ref({})
+
+  // 预览图片
+  const previewImage = index => {
+    uni.previewImage({
+      current: goods.value.images[index],
+      urls: goods.value.images,
+      indicator: 'number',
+      loop: true
+    })
+  }
+
+  const getData = async id => {
+    try {
+      loading.value = true
+      const res = await getUserBuyRecordDetail(id)
+      detailData.value = res.data
+      loading.value = false
+    } catch (error) {
+      console.log(error)
+      loading.value = false
+      navigateBack()
+    }
+  }
+
+  // 模拟加载数据
+  onLoad(e => {
+    getData(e.id)
+  })
+</script>
+
+<template>
+  <view class="goods-detail-page">
+    <!-- 商品图片轮播 -->
+    <swiper
+      class="goods-swiper"
+      :indicator-dots="true"
+      :autoplay="false"
+      :interval="3000"
+      :duration="500"
+      circular
+    >
+      <swiper-item v-for="(img, index) in goods.images" :key="index">
+        <image
+          :src="img"
+          class="swiper-image"
+          mode="aspectFit"
+          @tap="previewImage(index)"
+        />
+        <!-- 图片指示器 -->
+        <view class="image-indicator">
+          <text class="indicator-text">
+            {{ index + 1 }}/{{ goods.images.length }}
+          </text>
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <!-- 商品基本信息卡片 -->
+    <view class="goods-info-card">
+      <!-- 价格和名称 -->
+      <view class="price-section">
+        <view class="current-price">
+          <text class="price-symbol">¥</text>
+          <text class="price-number">{{ goods.price.toFixed(2) }}</text>
+          <text v-if="goods.originalPrice" class="original-price">
+            ¥{{ goods.originalPrice.toFixed(2) }}
+          </text>
+          <view v-if="goods.discount" class="discount-tag">
+            <text class="discount-text">{{ goods.discount }}折</text>
+          </view>
+        </view>
+        <text class="goods-title">{{ goods.title }}</text>
+      </view>
+
+      <!-- 商品描述 -->
+      <text class="goods-description">{{ goods.description }}</text>
+
+      <!-- 商品标签 -->
+      <view class="tags-section">
+        <view class="tag-item" v-for="tag in goods.tags" :key="tag">
+          <text class="tag-text">{{ tag }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商品规格信息卡片 -->
+    <view class="spec-card">
+      <view class="card-header">
+        <text class="card-title">商品规格</text>
+      </view>
+      <view class="spec-list">
+        <view
+          class="spec-item"
+          v-for="spec in goods.specifications"
+          :key="spec.key"
+        >
+          <text class="spec-key">{{ spec.key }}：</text>
+          <text class="spec-value">{{ spec.value }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 库存和销量信息卡片 -->
+    <view class="info-card">
+      <view class="info-grid">
+        <view class="info-item">
+          <text class="info-label">库存</text>
+          <text class="info-value">{{ goods.stock }}件</text>
+        </view>
+        <view class="divider"></view>
+        <view class="info-item">
+          <text class="info-label">月销量</text>
+          <text class="info-value">{{ goods.monthlySales }}件</text>
+        </view>
+        <view class="divider"></view>
+        <view class="info-item">
+          <text class="info-label">累计销量</text>
+          <text class="info-value">{{ goods.totalSales }}件</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商品详情描述 -->
+    <view class="detail-card">
+      <view class="card-header">
+        <text class="card-title">商品详情</text>
+      </view>
+      <view class="detail-content">
+        <!-- 富文本内容 -->
+        <rich-text :nodes="goods.detailContent"></rich-text>
+
+        <!-- 如果没有富文本，显示默认描述 -->
+        <view v-if="!goods.detailContent" class="default-detail">
+          <view class="detail-section">
+            <text class="detail-title">产品特色</text>
+            <text class="detail-text">{{ goods.features }}</text>
+          </view>
+          <view class="detail-section">
+            <text class="detail-title">材质说明</text>
+            <text class="detail-text">{{ goods.material }}</text>
+          </view>
+          <view class="detail-section">
+            <text class="detail-title">尺寸信息</text>
+            <text class="detail-text">{{ goods.sizeInfo }}</text>
+          </view>
+          <view class="detail-section">
+            <text class="detail-title">使用说明</text>
+            <text class="detail-text">{{ goods.instructions }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 配送和售后信息 -->
+    <view class="service-card">
+      <view class="card-header">
+        <text class="card-title">服务保障</text>
+      </view>
+      <view class="service-list">
+        <view class="service-item">
+          <text class="service-icon">🚚</text>
+          <view class="service-info">
+            <text class="service-title">配送服务</text>
+            <text class="service-desc">全国包邮 · 48小时内发货</text>
+          </view>
+        </view>
+        <view class="service-item">
+          <text class="service-icon">🔄</text>
+          <view class="service-info">
+            <text class="service-title">退换服务</text>
+            <text class="service-desc">
+              7天无理由退换货 · 质量问题包退
+            </text>
+          </view>
+        </view>
+        <view class="service-item">
+          <text class="service-icon">🛡️</text>
+          <view class="service-info">
+            <text class="service-title">品质保障</text>
+            <text class="service-desc">官方正品 · 假一赔十</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 商品参数表格 -->
+    <view class="params-card">
+      <view class="card-header">
+        <text class="card-title">商品参数</text>
+      </view>
+      <view class="params-table">
+        <view
+          class="param-row"
+          v-for="param in goods.parameters"
+          :key="param.key"
+        >
+          <text class="param-key">{{ param.key }}</text>
+          <text class="param-value">{{ param.value }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部装饰 -->
+    <view class="bottom-decor">
+      <view class="decor-line"></view>
+      <text class="end-text">商品详情展示完毕</text>
+      <view class="decor-line"></view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import './detail.scss';
+</style>
diff --git a/pages/discover/order/index.scss b/pages/discover/order/index.scss
new file mode 100644
index 0000000..9d28e8d
--- /dev/null
+++ b/pages/discover/order/index.scss
@@ -0,0 +1,317 @@
+.order-list-page {
+  display: flex;
+  flex-direction: column;
+}
+
+// 页面标题
+.page-header {
+  background-color: #ffffff;
+  padding: 40rpx 32rpx 20rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
+
+  .page-title {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// 状态筛选
+.status-filter {
+  white-space: nowrap;
+  padding: 20rpx 32rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  .filter-item {
+    display: inline-block;
+    padding: 12rpx 28rpx;
+    margin-right: 20rpx;
+    font-size: 28rpx;
+    color: #666;
+    background-color: #f8f8f8;
+    border-radius: 40rpx;
+
+    &:last-child {
+      margin-right: 60rpx;
+    }
+
+    &.active {
+      background-color: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+}
+
+// 订单列表容器
+.order-list-container {
+  flex: 1;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+}
+
+// 加载骨架屏
+.loading-container {
+  padding: 24rpx 0;
+
+  .loading-item {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 32rpx;
+    margin-bottom: 24rpx;
+    display: flex;
+
+    .skeleton-image {
+      width: 160rpx;
+      height: 160rpx;
+      background-color: #f0f0f0;
+      border-radius: 12rpx;
+    }
+
+    .skeleton-text-container {
+      flex: 1;
+      margin-left: 24rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .skeleton-text-line {
+        height: 30rpx;
+        background-color: #f0f0f0;
+        border-radius: 6rpx;
+
+        &.short {
+          width: 60%;
+        }
+
+        &.medium {
+          width: 80%;
+        }
+
+        &.long {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+
+
+// 订单列表
+.order-list {
+  padding: 24rpx 0;
+}
+
+// 订单卡片
+.order-card {
+  background-color: #fff;
+  border-radius: 20rpx;
+  margin-bottom: 24rpx;
+  padding: 32rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+  &:active {
+    transform: translateY(-2rpx);
+    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.05);
+  }
+}
+
+// 订单头部
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 28rpx;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+
+  .order-info {
+    display: flex;
+    flex-direction: column;
+
+    .order-number {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 500;
+      margin-bottom: 8rpx;
+    }
+
+    .order-time {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+
+  .order-status {
+    .status-label {
+      padding: 6rpx 16rpx;
+      border-radius: 20rpx;
+      font-size: 22rpx;
+      font-weight: 500;
+    }
+
+    // 状态颜色定义
+    .status-wait-pay {
+      background-color: #fff0f0;
+      color: #ff4d4f;
+    }
+
+    .status-paid {
+      background-color: #f0f9ff;
+      color: #1890ff;
+    }
+
+    .status-cancelled {
+      background-color: #f5f5f5;
+      color: #999;
+    }
+
+    .status-completed {
+      background-color: #f0fff0;
+      color: #52c41a;
+    }
+
+    .status-group {
+      background-color: #fff5f0;
+      color: #fa8c16;
+    }
+
+    .status-wait-ship {
+      background-color: #f0f5ff;
+      color: #2f54eb;
+    }
+
+    .status-shipped {
+      background-color: #f0f5ff;
+      color: #2f54eb;
+    }
+
+    .status-wait-receive {
+      background-color: #f0f5ff;
+      color: #2f54eb;
+    }
+
+    .status-received {
+      background-color: #f0fff0;
+      color: #52c41a;
+    }
+
+    .status-refunded {
+      background-color: #f5f5f5;
+      color: #999;
+    }
+  }
+}
+
+// 商品项
+.goods-item {
+  display: flex;
+  margin-bottom: 24rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .goods-image {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 12rpx;
+    background-color: #f5f5f5;
+  }
+
+  .goods-info {
+    flex: 1;
+    margin-left: 24rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .goods-name {
+      font-size: 28rpx;
+      color: #333;
+      line-height: 1.4;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+
+    .goods-spec {
+      font-size: 24rpx;
+      color: #999;
+      margin-top: 8rpx;
+    }
+
+    .goods-price-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 16rpx;
+
+      .goods-price {
+        font-size: 28rpx;
+        color: #ff4d4f;
+        font-weight: 500;
+      }
+
+      .goods-quantity {
+        font-size: 26rpx;
+        color: #666;
+      }
+    }
+  }
+}
+
+// 订单统计
+.order-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 28rpx;
+  padding-top: 24rpx;
+  border-top: 1rpx solid #f5f5f5;
+
+  .total-quantity {
+    font-size: 26rpx;
+    color: #666;
+  }
+
+  .price-section {
+    display: flex;
+    align-items: center;
+
+    .total-label {
+      font-size: 26rpx;
+      color: #666;
+      margin-right: 8rpx;
+    }
+
+    .total-price {
+      font-size: 32rpx;
+      color: #ff4d4f;
+      font-weight: 600;
+    }
+  }
+}
+
+// 卡片底部装饰线
+.card-footer {
+  margin-top: 24rpx;
+
+  .decorative-line {
+    height: 2rpx;
+    background: linear-gradient(
+      to right,
+      transparent,
+      #e6f7ff 20%,
+      #e6f7ff 80%,
+      transparent
+    );
+    border-radius: 2rpx;
+  }
+}
+
+
diff --git a/pages/discover/order/index.vue b/pages/discover/order/index.vue
index 70239a8..06d4eeb 100644
--- a/pages/discover/order/index.vue
+++ b/pages/discover/order/index.vue
@@ -1,11 +1,215 @@
-<script setup></script>
+<script setup>
+  import { ref, computed, onMounted, reactive } from 'vue'
+  import { navigateTo } from '@/utils/router'
+  import { getUserBuyRecordList } from '../../../api/my-index'
+
+  // 响应式数据
+  const paging = ref(null)
+  const activeFilter = ref('') // -1表示全部
+  const orders = ref([])
+  const loading = ref(true)
+  const formData = reactive({
+    dataList: [],
+    pageNum: 1,
+    pageSize: 15
+  })
+
+  // 状态映射
+  const statusMap = {
+    0: { text: '待支付', color: 'status-wait-pay', bgColor: '#fff0f0' },
+    1: { text: '已支付', color: 'status-paid', bgColor: '#f0f9ff' },
+    2: { text: '已取消', color: 'status-cancelled', bgColor: '#f5f5f5' },
+    3: { text: '已完成', color: 'status-completed', bgColor: '#f0fff0' },
+    4: { text: '等待拼团', color: 'status-group', bgColor: '#fff5f0' },
+    5: { text: '待发货', color: 'status-wait-ship', bgColor: '#f0f5ff' },
+    6: { text: '已发货', color: 'status-shipped', bgColor: '#f0f5ff' },
+    7: {
+      text: '待收货',
+      color: 'status-wait-receive',
+      bgColor: '#f0f5ff'
+    },
+    8: { text: '已收货', color: 'status-received', bgColor: '#f0fff0' },
+    9: { text: '已退款', color: 'status-refunded', bgColor: '#f5f5f5' }
+  }
+
+  // 初始化加载订单数据
+  const getList = async () => {
+    try {
+      const res = await getUserBuyRecordList({
+        orderStatus: activeFilter.value,
+        pageNum: formData.pageNum,
+        pageSize: formData.pageSize
+      })
+      formData.dataList = res.rows
+      paging.value.complete(res.rows)
+    } catch (error) {
+      paging.value.complete(false)
+    }
+  }
+
+  // 切换筛选状态
+  const changeFilter = status => {
+    formData.pageNum = 1
+    activeFilter.value = status
+    getList()
+  }
+
+  // 跳转到订单详情
+  const goToDetail = item => {
+    navigateTo('/pages/discover/order/detail', { id: item.id })
+  }
+
+  // 获取状态文本
+  const getStatusText = status => {
+    return statusMap[status]?.text || '未知状态'
+  }
+
+  // 获取状态对应的CSS类
+  const getStatusClass = status => {
+    return statusMap[status]?.color || 'status-default'
+  }
+</script>
 
 <template>
-  <view>购买记录pages\discover\order\index.vue</view>
+  <z-paging
+    ref="paging"
+    v-model="formData.dataList"
+    :default-page-no="formData.pageNum"
+    :default-page-size="formData.pageSize"
+    safe-area-inset-bottom
+    use-safe-area-placeholder
+    :paging-style="{ 'background-color': '#f9f9f9' }"
+    @query="getList"
+  >
+    <template #top>
+      <!-- 页面标题 -->
+      <view class="page-header">
+        <text class="page-title">我的购买记录</text>
+      </view>
+
+      <!-- 订单状态筛选（可选功能） -->
+      <scroll-view
+        class="status-filter"
+        scroll-x="true"
+        :show-scrollbar="false"
+      >
+        <view
+          class="filter-item"
+          :class="{ active: activeFilter === '' }"
+          @tap="changeFilter('')"
+        >
+          全部订单
+        </view>
+        <view
+          class="filter-item"
+          :class="{ active: activeFilter === 0 }"
+          @tap="changeFilter(0)"
+        >
+          待支付
+        </view>
+        <view
+          class="filter-item"
+          :class="{ active: activeFilter === 5 }"
+          @tap="changeFilter(5)"
+        >
+          待发货
+        </view>
+        <view
+          class="filter-item"
+          :class="{ active: activeFilter === 7 }"
+          @tap="changeFilter(7)"
+        >
+          待收货
+        </view>
+        <view
+          class="filter-item"
+          :class="{ active: activeFilter === 3 }"
+          @tap="changeFilter(3)"
+        >
+          已完成
+        </view>
+      </scroll-view>
+    </template>
+    <view class="order-list-page">
+      <!-- 订单列表 -->
+      <view class="order-list-container">
+        <!-- 加载状态 -->
+        <!-- <view v-if="loading" class="loading-container">
+        <view class="loading-item" v-for="i in 3" :key="i">
+          <view class="skeleton-image"></view>
+          <view class="skeleton-text-container">
+            <view class="skeleton-text-line short"></view>
+            <view class="skeleton-text-line medium"></view>
+            <view class="skeleton-text-line long"></view>
+          </view>
+        </view>
+      </view> -->
+
+        <!-- 订单列表 -->
+        <view class="order-list">
+          <view
+            class="order-card"
+            v-for="item in formData.dataList"
+            :key="item.id"
+            @tap="goToDetail(item)"
+          >
+            <!-- 订单头部：订单号 + 状态 -->
+            <view class="order-header">
+              <view class="order-info">
+                <text class="order-number">
+                  订单号: {{ item.orderNo }}
+                </text>
+                <text class="order-time">{{ item.updateTime }}</text>
+              </view>
+              <view class="order-status">
+                <text
+                  class="status-label"
+                  :class="getStatusClass(item.orderStatus)"
+                >
+                  {{ getStatusText(item.orderStatus) }}
+                </text>
+              </view>
+            </view>
+
+            <!-- 商品信息 -->
+            <view class="goods-item">
+              <image
+                src="https://p2.itc.cn/images01/20230924/143c6d6ba2044b79b36eb3de4c92145d.jpeg"
+                class="goods-image"
+                mode="aspectFill"
+              />
+              <view class="goods-info">
+                <text class="goods-name">{{ item.userName }}</text>
+                <text class="goods-spec">默认规格</text>
+                <view class="goods-price-info">
+                  <text class="goods-price">¥{{ item.unitPrice }}</text>
+                  <text class="goods-quantity">
+                    x1
+                  </text>
+                </view>
+              </view>
+            </view>
+
+            <!-- 订单统计信息 -->
+            <view class="order-summary">
+              <text class="total-quantity">共1件商品</text>
+              <view class="price-section">
+                <text class="total-label">合计:</text>
+                <text class="total-price">¥{{ item.payAmount }}</text>
+              </view>
+            </view>
+
+            <!-- 底部装饰线 -->
+            <view class="card-footer">
+              <view class="decorative-line"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </z-paging>
 </template>
 
 <style lang="scss" scoped>
-  page {
-    background: #f9f9f9;
-  }
+  @import './index.scss';
 </style>