feat: 商家端代码

src/pagesMerchant/order/list.vue

@@ -1,52 +1,171 @@
 <script lang="ts" setup>
+import { useMerchantStore } from '@/store/merchant'
+import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
+
 definePage({
   style: {
     navigationBarTitleText: '订单管理',
   },
 })
 
-// 模拟订单数据
-const orders = ref([
-  { id: '1', orderNo: 'M202312170001', customer: '张三', amount: 299.00, status: 'pending', time: '10:30' },
-  { id: '2', orderNo: 'M202312170002', customer: '李四', amount: 1580.00, status: 'processing', time: '09:45' },
-  { id: '3', orderNo: 'M202312170003', customer: '王五', amount: 456.50, status: 'completed', time: '08:20' },
-])
+const merchantStore = useMerchantStore()
 
-const statusMap: Record<string, { text: string; color: string }> = {
-  pending: { text: '待处理', color: '#ff8f0d' },
-  processing: { text: '处理中', color: '#4d80f0' },
-  completed: { text: '已完成', color: '#00c05a' },
+// Tab 状态
+const tabs = [
+  { value: 'all', label: '全部' },
+  { value: OrderStatus.PENDING, label: '待确认' },
+  { value: OrderStatus.SHIPPING, label: '待发货' },
+  { value: OrderStatus.SHIPPED, label: '已发货' },
+  { value: OrderStatus.COMPLETED, label: '已完成' },
+]
+const currentTab = ref<OrderStatus | 'all'>('all')
+
+// 搜索
+const keyword = ref('')
+
+// 加载订单
+async function loadOrders() {
+  await merchantStore.fetchOrders({
+    status: currentTab.value,
+    keyword: keyword.value,
+  })
 }
 
-function handleOrder(id: string) {
+// 切换 Tab
+function handleTabChange(value: OrderStatus | 'all') {
+  currentTab.value = value
+  loadOrders()
+}
+
+// 搜索
+function handleSearch() {
+  loadOrders()
+}
+
+// 查看详情
+function handleDetail(id: string) {
   uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
 }
+
+// 快捷确认订单
+async function handleConfirm(id: string) {
+  uni.showModal({
+    title: '确认订单',
+    content: '确认接受此订单？',
+    success: async (res) => {
+      if (res.confirm) {
+        await merchantStore.confirmOrder(id)
+        uni.showToast({ title: '确认成功', icon: 'success' })
+      }
+    },
+  })
+}
+
+// 下拉刷新
+async function onRefresh() {
+  await loadOrders()
+}
+
+// 页面加载
+onMounted(() => {
+  loadOrders()
+})
 </script>
 
 <template>
   <view class="order-list-page">
-    <view class="order-list">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <wd-search
+        v-model="keyword"
+        placeholder="搜索订单号/客户名称"
+        @search="handleSearch"
+        @clear="handleSearch"
+      />
+    </view>
+    
+    <!-- Tab 切换 -->
+    <view class="tabs">
       <view
-        v-for="order in orders"
+        v-for="tab in tabs"
+        :key="tab.value"
+        class="tab-item"
+        :class="{ active: currentTab === tab.value }"
+        @click="handleTabChange(tab.value)"
+      >
+        {{ tab.label }}
+      </view>
+    </view>
+    
+    <!-- 订单列表 -->
+    <scroll-view 
+      class="order-list" 
+      scroll-y 
+      refresher-enabled
+      :refresher-triggered="merchantStore.loading"
+      @refresherrefresh="onRefresh"
+    >
+      <view v-if="merchantStore.orders.length === 0" class="empty">
+        <text class="i-carbon-document"></text>
+        <text>暂无订单</text>
+      </view>
+      
+      <view
+        v-for="order in merchantStore.orders"
         :key="order.id"
         class="order-card"
-        @click="handleOrder(order.id)"
+        @click="handleDetail(order.id)"
       >
         <view class="order-header">
           <text class="order-no">{{ order.orderNo }}</text>
-          <text class="order-status" :style="{ color: statusMap[order.status].color }">
-            {{ statusMap[order.status].text }}
+          <text class="order-status" :style="{ color: ORDER_STATUS_CONFIG[order.status].color }">
+            {{ ORDER_STATUS_CONFIG[order.status].label }}
           </text>
         </view>
-        <view class="order-body">
-          <text class="customer">客户：{{ order.customer }}</text>
-          <text class="amount">¥{{ order.amount.toFixed(2) }}</text>
+        
+        <view class="order-goods">
+          <view v-for="goods in order.goods" :key="goods.id" class="goods-item">
+            <image :src="goods.image" class="goods-image" mode="aspectFill" />
+            <view class="goods-info">
+              <text class="goods-name">{{ goods.name }}</text>
+              <text class="goods-sku">{{ goods.skuName }}</text>
+              <view class="goods-price">
+                <text class="price">¥{{ goods.price.toFixed(2) }}</text>
+                <text class="quantity">x{{ goods.quantity }}</text>
+              </view>
+            </view>
+          </view>
         </view>
+        
         <view class="order-footer">
-          <text class="time">今天 {{ order.time }}</text>
+          <view class="customer">
+            <text class="i-carbon-user"></text>
+            <text>{{ order.customerName }}</text>
+          </view>
+          <view class="amount">
+            共{{ order.goods.length }}件 实付 <text class="total">¥{{ order.payAmount.toFixed(2) }}</text>
+          </view>
+        </view>
+        
+        <!-- 操作按钮 -->
+        <view class="order-actions" v-if="order.status === OrderStatus.PENDING || order.status === OrderStatus.SHIPPING">
+          <view 
+            v-if="order.status === OrderStatus.PENDING"
+            class="action-btn primary"
+            @click.stop="handleConfirm(order.id)"
+          >
+            确认订单
+          </view>
+          <view 
+            v-if="order.status === OrderStatus.SHIPPING"
+            class="action-btn primary"
+            @click.stop="handleDetail(order.id)"
+          >
+            去发货
+          </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -54,30 +173,81 @@ function handleOrder(id: string) {
 .order-list-page {
   min-height: 100vh;
   background: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
   padding: 20rpx;
+  background: #fff;
+}
+
+.tabs {
+  display: flex;
+  background: #fff;
+  padding: 0 10rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  
+  .tab-item {
+    flex: 1;
+    text-align: center;
+    padding: 24rpx 0;
+    font-size: 26rpx;
+    color: #666;
+    position: relative;
+    
+    &.active {
+      color: #ff8f0d;
+      font-weight: 600;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40rpx;
+        height: 4rpx;
+        background: #ff8f0d;
+        border-radius: 2rpx;
+      }
+    }
+  }
 }
 
 .order-list {
+  flex: 1;
+}
+
+.empty {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: #999;
+  
+  text:first-child {
+    font-size: 80rpx;
+    margin-bottom: 20rpx;
+  }
 }
 
 .order-card {
   background: #fff;
   border-radius: 16rpx;
   padding: 24rpx;
-  
+  margin: 20rpx;
   .order-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 16rpx;
+    margin-bottom: 20rpx;
     
     .order-no {
-      font-size: 28rpx;
-      font-weight: 600;
+      font-size: 26rpx;
       color: #333;
+      font-weight: 500;
     }
     
     .order-status {
@@ -86,29 +256,114 @@ function handleOrder(id: string) {
     }
   }
   
-  .order-body {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12rpx;
+  .order-goods {
+    border-top: 1rpx solid #f5f5f5;
+    border-bottom: 1rpx solid #f5f5f5;
+    padding: 20rpx 0;
     
-    .customer {
-      font-size: 26rpx;
-      color: #666;
-    }
-    
-    .amount {
-      font-size: 32rpx;
-      font-weight: 700;
-      color: #ff8f0d;
+    .goods-item {
+      display: flex;
+      gap: 16rpx;
+      
+      & + .goods-item {
+        margin-top: 16rpx;
+      }
+      
+      .goods-image {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 8rpx;
+        background: #f5f5f5;
+      }
+      
+      .goods-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        
+        .goods-name {
+          font-size: 26rpx;
+          color: #333;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        
+        .goods-sku {
+          font-size: 22rpx;
+          color: #999;
+        }
+        
+        .goods-price {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          
+          .price {
+            font-size: 28rpx;
+            color: #ff8f0d;
+            font-weight: 600;
+          }
+          
+          .quantity {
+            font-size: 24rpx;
+            color: #999;
+          }
+        }
+      }
     }
   }
   
   .order-footer {
-    .time {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 16rpx;
+    
+    .customer {
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
       font-size: 24rpx;
-      color: #999;
+      color: #666;
+    }
+    
+    .amount {
+      font-size: 24rpx;
+      color: #666;
+      
+      .total {
+        font-size: 30rpx;
+        color: #ff8f0d;
+        font-weight: 600;
+      }
+    }
+  }
+  
+  .order-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 16rpx;
+    margin-top: 20rpx;
+    padding-top: 20rpx;
+    border-top: 1rpx solid #f5f5f5;
+    
+    .action-btn {
+      padding: 12rpx 32rpx;
+      border-radius: 32rpx;
+      font-size: 24rpx;
+      border: 1rpx solid #ddd;
+      color: #666;
+      
+      &.primary {
+        background: #ff8f0d;
+        border-color: #ff8f0d;
+        color: #fff;
+      }
     }
   }
 }
 </style>
+