feat: 查积分、支付、拆弹、取消订单

supplied-h5/src/view/joyful-selection/profile/orders/index.vue

@@ -1,86 +1,109 @@
 <template>
   <main class="orders-page">
     <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
-    <van-tabs v-model="active" class="order-tabs" line-width="18" line-height="2" color="#ff5b20" title-active-color="#ff5b20">
+    <van-tabs
+      v-model="active"
+      class="order-tabs"
+      line-width="18"
+      line-height="2"
+      color="#ff5b20"
+      title-active-color="#ff5b20"
+    >
       <van-tab v-for="tab in tabs" :key="tab" :title="tab" />
     </van-tabs>
 
     <section class="order-list">
-      <article v-for="order in visibleOrders" :key="order.id" class="order-card">
-        <header>
-          <span>订单号：{{ order.id }}</span>
-          <b :class="order.statusClass">{{ order.status }}</b>
-        </header>
-        <div class="order-body">
-          <div class="thumb-row">
-            <van-image
-              v-for="item in order.products"
-              :key="item.id"
-              class="order-thumb"
-              :src="item.image"
-              fit="cover"
-            />
+      <van-loading v-if="loading" class="order-loading" color="#ff5b20" size="24px">加载中...</van-loading>
+      <van-empty v-else-if="visibleOrders.length === 0" description="暂无订单" />
+
+      <template v-else>
+        <article v-for="order in visibleOrders" :key="order.id" class="order-card">
+          <header>
+            <div class="order-nos">
+              <span>主单号：{{ order.mainOrderId || '-' }}</span>
+              <span>子单号：{{ order.orderId || '-' }}</span>
+            </div>
+            <b :class="order.statusClass">{{ order.status }}</b>
+          </header>
+          <div class="order-body">
+            <div class="thumb-row">
+              <van-image
+                v-for="item in previewProducts(order.products)"
+                :key="item.id"
+                class="order-thumb"
+                :src="item.image"
+                fit="cover"
+              />
+            </div>
+            <div class="order-summary">
+              <p>共{{ order.count }}件商品</p>
+              <p>合计：<b>¥{{ order.amount }}</b></p>
+            </div>
           </div>
-          <div class="order-summary">
-            <p>共{{ order.count }}件商品</p>
-            <p>合计：<b>¥{{ order.amount }}</b></p>
-          </div>
-        </div>
-        <footer>
-          <van-button size="small" round plain :class="order.buttonClass">{{ order.actionText }}</van-button>
-        </footer>
-      </article>
+          <footer>
+            <van-button size="small" round plain :class="order.buttonClass">{{ order.actionText }}</van-button>
+          </footer>
+        </article>
+      </template>
     </section>
   </main>
 </template>
 
 <script>
-import { joyfulProducts } from '../../product-data'
+import { mapActions, mapState } from 'pinia'
+import { Toast } from 'vant'
+import { postFunction } from '@/api/supplied-service'
+import { useUserStore } from '@/store/user'
 
 export default {
   name: 'JoyfulSelectionOrders',
   data: () => ({
     active: 0,
     tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
-    orders: [
-      {
-        id: 'YX2024051812345678',
-        status: '待发货',
-        statusClass: 'pending',
-        actionText: '查看物流',
-        buttonClass: 'primary-action',
-        products: joyfulProducts.slice(0, 3),
-        count: 3,
-        amount: '287.90'
-      },
-      {
-        id: 'YX2024051509876543',
-        status: '待收货',
-        statusClass: 'pending',
-        actionText: '确认收货',
-        buttonClass: 'dark-action',
-        products: joyfulProducts.slice(1, 2),
-        count: 2,
-        amount: '139.00'
-      },
-      {
-        id: 'YX2024051211223344',
-        status: '已完成',
-        statusClass: 'done',
-        actionText: '再次购买',
-        buttonClass: 'dark-action',
-        products: joyfulProducts.slice(2, 3),
-        count: 1,
-        amount: '69.90'
-      }
-    ]
+    orders: [],
+    loading: false
   }),
   computed: {
+    ...mapState(useUserStore, ['supplierId', 'userId']),
     visibleOrders() {
       const tab = this.tabs[this.active]
 
       return tab === '全部' ? this.orders : this.orders.filter(order => order.status === tab)
     }
+  },
+  created() {
+    this.loadOrders()
+  },
+  methods: {
+    ...mapActions(useUserStore, ['fetchBridgeToken']),
+    previewProducts(products = []) {
+      return products.slice(0, 3)
+    },
+    async loadOrders() {
+      this.loading = true
+
+      try {
+        await this.fetchBridgeToken()
+
+        if (!this.supplierId || !this.userId) {
+          Toast('用户信息不完整，请重新进入商城')
+          this.orders = []
+          return
+        }
+
+        const data = await postFunction('order-list', {
+          supplierId: this.supplierId,
+          userId: this.userId
+        })
+
+        this.orders = data?.orders || []
+      } catch (error) {
+        Toast(error.message || '查询订单失败，请稍后再试')
+        this.orders = []
+      } finally {
+        this.loading = false
+      }
+    }
   }
 }
 </script>
@@ -123,6 +146,12 @@ export default {
   padding: 8px 8px 14px;
 }
 
+.order-loading {
+  display: flex;
+  justify-content: center;
+  padding: 42px 0;
+}
+
 .order-card {
   overflow: hidden;
   margin-bottom: 10px;
@@ -132,16 +161,21 @@ export default {
 
 .order-card header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   padding: 12px 12px 8px;
 }
 
-.order-card header span {
+.order-nos {
   min-width: 0;
+}
+
+.order-nos span {
+  display: block;
   overflow: hidden;
   color: #777;
   font-size: 11px;
+  line-height: 18px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -151,6 +185,7 @@ export default {
   margin-left: 10px;
   font-size: 12px;
   font-weight: 700;
+  line-height: 18px;
 }
 
 .order-card header .pending {