feat: 1.0

2026-07-28 10:53:59 +08:00
parent 3cd6ef665b
commit 88f5371ed8
5 changed files with 640 additions and 79 deletions
@@ -1,19 +1,34 @@
 <template>
  <main class="orders-page">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.back()" />
-    <van-tabs v-model="active">
+    <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>
-      <article v-for="order in orders" :key="order.id">
-        <header><span>订单号：{{ order.id }}</span><b :class="order.status">{{ order.status }}</b></header>
-        <van-card
-          :title="order.product.name"
-          desc="共 3 件商品"
-          price="297.90"
-          :thumb="order.product.image"
-        />
-        <footer><span>合计：<b>¥297.90</b></span><van-button size="small" round plain type="danger">查看详情</van-button></footer>
+
+    <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"
+            />
+          </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>
    </section>
  </main>
@@ -28,22 +43,187 @@ export default {
    active: 0,
    tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '售后'],
    orders: [
-      { id: 'YX2024051812345678', status: '待发货', product: joyfulProducts[0] },
-      { id: 'YX2024051509876543', status: '待收货', product: joyfulProducts[1] },
-      { id: 'YX2024051211223344', status: '已完成', product: joyfulProducts[2] }
+      {
+        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'
+      }
    ]
-  })
+  }),
+  computed: {
+    visibleOrders() {
+      const tab = this.tabs[this.active]
+
+      return tab === '全部' ? this.orders : this.orders.filter(order => order.status === tab)
+    }
+  }
 }
 </script>

-<style scoped>
-.orders-page { min-height: 100vh; padding-top: 46px; background: #f7f7f7; }
-.orders-page ::v-deep .van-nav-bar { position: fixed; z-index: 20; top: 0; right: 0; left: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
-.orders-page section { padding: 0 12px; }
-.orders-page article { margin-top: 10px; border-radius: 10px; background: #fff; }
-.orders-page header, .orders-page footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #999; font-size: 11px; }
-.orders-page header b { color: #ff5b20; }
-.orders-page .已完成 { color: #27ae60; }
-.orders-page footer b { color: #222; }
-.orders-page .van-card { background: #fff; }
+<style scoped lang="less">
+.orders-page {
+  min-height: 100vh;
+  padding-top: 90px;
+  background: #f7f7f7;
+}
+
+.orders-page ::v-deep .van-nav-bar {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.order-tabs {
+  position: fixed;
+  z-index: 19;
+  top: 46px;
+  right: 0;
+  left: 0;
+}
+
+.orders-page ::v-deep .van-tabs__wrap {
+  height: 44px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.orders-page ::v-deep .van-tab {
+  color: #333;
+  font-size: 12px;
+}
+
+.order-list {
+  padding: 8px 8px 14px;
+}
+
+.order-card {
+  overflow: hidden;
+  margin-bottom: 10px;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.order-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 12px 8px;
+}
+
+.order-card header span {
+  min-width: 0;
+  overflow: hidden;
+  color: #777;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.order-card header b {
+  flex: none;
+  margin-left: 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.order-card header .pending {
+  color: #ff5b20;
+}
+
+.order-card header .done {
+  color: #21b36b;
+}
+
+.order-body {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 12px 10px;
+}
+
+.thumb-row {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  gap: 8px;
+}
+
+.order-thumb {
+  width: 62px;
+  height: 62px;
+  flex: none;
+  overflow: hidden;
+  border-radius: 4px;
+  background: #f5f5f5;
+}
+
+.order-summary {
+  flex: none;
+  margin-left: 10px;
+  color: #777;
+  font-size: 11px;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.order-summary p {
+  margin: 0;
+  line-height: 22px;
+}
+
+.order-summary b {
+  color: #222;
+  font-size: 12px;
+}
+
+.order-card footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 12px 12px;
+}
+
+.order-card footer .van-button {
+  min-width: 78px;
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 15px;
+  font-size: 11px;
+}
+
+.primary-action {
+  color: #ff5b20;
+  border-color: #ff5b20;
+}
+
+.dark-action {
+  color: #333;
+  border-color: #ddd;
+}
 </style>