feat: 分端显示

src/pagesMerchant/order/list.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+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 statusMap: Record<string, { text: string; color: string }> = {
+  pending: { text: '待处理', color: '#ff8f0d' },
+  processing: { text: '处理中', color: '#4d80f0' },
+  completed: { text: '已完成', color: '#00c05a' },
+}
+
+function handleOrder(id: string) {
+  uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
+}
+</script>
+
+<template>
+  <view class="order-list-page">
+    <view class="order-list">
+      <view
+        v-for="order in orders"
+        :key="order.id"
+        class="order-card"
+        @click="handleOrder(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>
+        </view>
+        <view class="order-body">
+          <text class="customer">客户：{{ order.customer }}</text>
+          <text class="amount">¥{{ order.amount.toFixed(2) }}</text>
+        </view>
+        <view class="order-footer">
+          <text class="time">今天 {{ order.time }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.order-list-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20rpx;
+}
+
+.order-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.order-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  
+  .order-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16rpx;
+    
+    .order-no {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #333;
+    }
+    
+    .order-status {
+      font-size: 24rpx;
+      font-weight: 500;
+    }
+  }
+  
+  .order-body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12rpx;
+    
+    .customer {
+      font-size: 26rpx;
+      color: #666;
+    }
+    
+    .amount {
+      font-size: 32rpx;
+      font-weight: 700;
+      color: #ff8f0d;
+    }
+  }
+  
+  .order-footer {
+    .time {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+</style>