refactor(订单页面): 使用wd-tabs组件重构标签页布局

重构订单页面的标签页切换功能，使用wd-tabs组件替代原有自定义实现
调整相关样式以适应新组件，保持功能不变但提高代码可维护性

src/pages/order/index.vue

@@ -18,8 +18,8 @@ const wxStore = useWxStore()
 const hasReturn = ref<number>(0)
 
 // 处理标签页切换
-const handleTabChange = (tabIndex: number) => {
+const handleTabChange = (event: { index: number; name: string | number }) => {
-  hasReturn.value = tabIndex
+  hasReturn.value = event.index
   orderStore.getOrders(wxStore.corpid, wxStore.openid, wxStore.qyUserId, hasReturn.value)
 }
 
@@ -53,29 +53,14 @@ const goToOrderDetail = (orderId: number) => {
 <template>
   <view class="order-list">
     <!-- 状态切换标签页 -->
-    <view class="tabs-container">
+    <wd-tabs v-model="activeTab" @change="handleTabChange" sticky>
-      <view
+      <wd-tab title="未退还">
-        class="tab-item"
+        <view v-if="orderStore.orders.length === 0" class="empty 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-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>
@@ -116,35 +101,63 @@ const goToOrderDetail = (orderId: number) => {
             </view>
           </view>
         </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>
+      </wd-tab>
+    </wd-tabs>
   </view>
 </template>
 
 <style scoped>
 .order-list {
-  padding: 20rpx;
+  width: 100%;
-}
-
-.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;
 }
 
 .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>