From 3f0b5cb43191731c782683398b8fa19df5e3821e Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Tue, 4 Nov 2025 17:28:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=AE=A2=E5=8D=95=E9=A1=B5=E9=9D=A2):?=
 =?UTF-8?q?=20=E4=BD=BF=E7=94=A8wd-tabs=E7=BB=84=E4=BB=B6=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E6=A0=87=E7=AD=BE=E9=A1=B5=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构订单页面的标签页切换功能，使用wd-tabs组件替代原有自定义实现
调整相关样式以适应新组件，保持功能不变但提高代码可维护性
---
 src/pages/order/index.vue | 185 +++++++++++++++++++++-----------------
 1 file changed, 103 insertions(+), 82 deletions(-)

diff --git a/src/pages/order/index.vue b/src/pages/order/index.vue
index ca43689..77f66e0 100644
--- a/src/pages/order/index.vue
+++ b/src/pages/order/index.vue
@@ -18,8 +18,8 @@ const wxStore = useWxStore()
 const hasReturn = ref<number>(0)
 
 // 处理标签页切换
-const handleTabChange = (tabIndex: number) => {
-  hasReturn.value = tabIndex
+const handleTabChange = (event: { index: number; name: string | number }) => {
+  hasReturn.value = event.index
   orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
 }
 
@@ -53,98 +53,111 @@ const goToOrderDetail = (orderId: number) => {
 <template>
   <view class="order-list">
     <!-- 状态切换标签页 -->
-    <view class="tabs-container">
-      <view
-        class="tab-item"
-        :class="{ active: activeTab === 0 }"
-        @tap="() => { activeTab = 0; handleTabChange(0) }"
-      >
-        未退还
-      </view>
-      <view
-        class="tab-item"
-        :class="{ active: activeTab === 1 }"
-        @tap="() => { activeTab = 1; handleTabChange(1) }"
-      >
-        已退还
-      </view>
-    </view>
-
-    <view v-if="orderStore.orders.length === 0" class="empty">
-      <view class="empty-icon">📦</view>
-      <view class="empty-text">暂无订单</view>
-    </view>
-
-    <view v-else class="orders">
-      <view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
-        <view class="order-header">
-          <text class="order-id">订单号: {{ order.orderId }}</text>
-          <button
-            class="detail-btn"
-            size="mini"
-            type="primary"
-            @tap="goToOrderDetail(order.orderId)"
-          >
-            订单详情
-          </button>
+    <wd-tabs v-model="activeTab" @change="handleTabChange" sticky>
+      <wd-tab title="未退还">
+        <view v-if="orderStore.orders.length === 0" class="empty tab-item">
+          <view class="empty-icon">📦</view>
+          <view class="empty-text">暂无订单</view>
         </view>
 
-        <view class="goods-list">
-          <view
-            v-for="(goods, index) in order.goodsList.slice(0, 1)"
-            :key="goods.orderGoods.orderGoodsId"
-            class="goods-item"
-          >
-            <image
-              :src="goods.goodsInfo?.coverImg"
-              mode="aspectFill"
-              class="product-image"
-            />
-            <view class="product-info">
-              <text class="product-name text-ellipsis">
-                {{ goods.goodsInfo?.goodsName }}
-              </text>
-              <view class="product-meta">
-                <text class="status">状态: {{ getStatusText(order.status) }}</text>
-                <text class="total">总价: ¥{{ order.totalAmount }}</text>
+        <view v-else class="orders tab-item">
+          <view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
+            <view class="order-header">
+              <text class="order-id">订单号: {{ order.orderId }}</text>
+              <button
+                class="detail-btn"
+                size="mini"
+                type="primary"
+                @tap="goToOrderDetail(order.orderId)"
+              >
+                订单详情
+              </button>
+            </view>
+
+            <view class="goods-list">
+              <view
+                v-for="(goods, index) in order.goodsList.slice(0, 1)"
+                :key="goods.orderGoods.orderGoodsId"
+                class="goods-item"
+              >
+                <image
+                  :src="goods.goodsInfo?.coverImg"
+                  mode="aspectFill"
+                  class="product-image"
+                />
+                <view class="product-info">
+                  <text class="product-name text-ellipsis">
+                    {{ goods.goodsInfo?.goodsName }}
+                  </text>
+                  <view class="product-meta">
+                    <text class="status">状态: {{ getStatusText(order.status) }}</text>
+                    <text class="total">总价: ¥{{ order.totalAmount }}</text>
+                  </view>
+                </view>
+              </view>
+              <view v-if="order.goodsList.length > 1" class="more-goods">
+                <text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
               </view>
             </view>
           </view>
-          <view v-if="order.goodsList.length > 1" class="more-goods">
-            <text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
+        </view>
+      </wd-tab>
+
+      <wd-tab title="已退还">
+        <view v-if="orderStore.orders.length === 0" class="empty tab-item">
+          <view class="empty-icon">📦</view>
+          <view class="empty-text">暂无订单</view>
+        </view>
+
+        <view v-else class="orders tab-item">
+          <view v-for="order in orderStore.orders" :key="order.orderId" class="order-item">
+            <view class="order-header">
+              <text class="order-id">订单号: {{ order.orderId }}</text>
+              <button
+                class="detail-btn"
+                size="mini"
+                type="primary"
+                @tap="goToOrderDetail(order.orderId)"
+              >
+                订单详情
+              </button>
+            </view>
+
+            <view class="goods-list">
+              <view
+                v-for="(goods, index) in order.goodsList.slice(0, 1)"
+                :key="goods.orderGoods.orderGoodsId"
+                class="goods-item"
+              >
+                <image
+                  :src="goods.goodsInfo?.coverImg"
+                  mode="aspectFill"
+                  class="product-image"
+                />
+                <view class="product-info">
+                  <text class="product-name text-ellipsis">
+                    {{ goods.goodsInfo?.goodsName }}
+                  </text>
+                  <view class="product-meta">
+                    <text class="status">状态: {{ getStatusText(order.status) }}</text>
+                    <text class="total">总价: ¥{{ order.totalAmount }}</text>
+                  </view>
+                </view>
+              </view>
+              <view v-if="order.goodsList.length > 1" class="more-goods">
+                <text class="text-ellipsis">等{{ order.goodsList.length }}个商品</text>
+              </view>
+            </view>
           </view>
         </view>
-      </view>
-    </view>
+      </wd-tab>
+    </wd-tabs>
   </view>
 </template>
 
 <style scoped>
 .order-list {
-  padding: 20rpx;
-}
-
-.tabs-container {
-  display: flex;
-  background-color: #fff;
-  margin-bottom: 20rpx;
-  border-radius: 16rpx;
-  padding: 8rpx;
-}
-
-.tab-item {
-  flex: 1;
-  text-align: center;
-  padding: 20rpx 0;
-  border-radius: 12rpx;
-  font-size: 28rpx;
-  color: #666;
-  transition: all 0.3s;
-}
-
-.tab-item.active {
-  background-color: #e95d5d;
-  color: #fff;
+  width: 100%;
 }
 
 .empty {
@@ -192,6 +205,7 @@ const goToOrderDetail = (orderId: number) => {
   border: none;
   border-radius: 26rpx;
   font-size: 24rpx;
+  margin-right: 8rpx;
 }
 
 .goods-list {
@@ -255,4 +269,11 @@ const goToOrderDetail = (orderId: number) => {
   color: #999;
   font-size: 24rpx;
 }
+
+.tab-item {
+  padding: 24rpx;
+  background-color: #f8f9fa;
+  min-height: 400rpx;
+}
+
 </style>