feat: 订单列表及订单详情

src/pages.json

@@ -113,6 +113,24 @@
         "navigationBarBackgroundColor": "#fff"
       }
     },
+    {
+      "path": "pages/myOrders/myOrders",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "My Orders",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
+      "path": "pages/myOrders/orderDetail",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "My Orders",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
     {
       "path": "pages/productDetail/checkOut",
       "type": "page",

src/pages/mine/mine.vue

@@ -17,6 +17,12 @@ const safeAreaInsets = systemInfo.safeAreaInsets
 
 const dayType = ref(1)
 
+function toPage() {
+  uni.navigateTo({
+    url: '/pages/myOrders/myOrders',
+  })
+}
+
 // 搜索结果
 const dataList = ref([])
 function queryList(pageNo, pageSize) {
@@ -88,7 +94,7 @@ function queryList(pageNo, pageSize) {
       <text class="text-32rpx font-bold">
         My Group
       </text>
-      <view class="flex items-center">
+      <view class="flex items-center" @click="toPage">
         <text class="mr-8rpx text-22rpx text-#3A444C">
           All Group
         </text>

src/pages/myOrders/myOrders.vue

@@ -0,0 +1,91 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'My Orders',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
+defineOptions({
+  name: 'MyOrders', // 我的订单
+})
+// z-paging
+const paging = ref(null)
+// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
+useZPaging(paging)
+const tab = ref<number>(0)
+// 搜索结果
+const dataList = ref([])
+function queryList(pageNo, pageSize) {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  setTimeout(() => {
+    dataList.value = [
+      { title: '123' },
+      { title: '123' },
+      { title: '123' },
+      { title: '12345' },
+    ]
+    console.log(12312)
+    paging.value[tab.value].complete(dataList.value)
+  }, 1000)
+}
+
+function toPage() {
+  uni.navigateTo({
+    url: '/pages/myOrders/orderDetail',
+  })
+}
+</script>
+
+<template>
+  <wd-tabs v-model="tab" swipeable sticky custom-class="bg-transparent!">
+    <wd-tab v-for="item in 4" :key="item" :title="`标签${item}`">
+      <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
+        <wd-card type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!" @click="toPage">
+          <template #title>
+            <view class="flex items-center justify-between">
+              <view class="text-28rpx text-#000">
+                Order ID：20250505123030120
+              </view>
+              <wd-text size="26rpx" type="primary" text="Completed" />
+            </view>
+          </template>
+          <view class="flex items-center gap-24rpx">
+            <image
+              src="/static/images/avatar.jpg"
+              class="h-140rpx w-140rpx shrink-0"
+            />
+            <view class="flex-1">
+              <view class="line-clamp-2 text-28rpx text-#000">
+                SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+              </view>
+              <view class="py-4rpx text-24rpx text-#3A444C">
+                Color：Black Grey
+              </view>
+              <view class="flex items-center justify-between text-24rpx text-#3A444C">
+                <view>
+                  ৳ 300
+                </view>
+                <view>
+                  Quantity：1
+                </view>
+              </view>
+            </view>
+          </view>
+        </wd-card>
+      </z-paging>
+    </wd-tab>
+  </wd-tabs>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>

src/pages/myOrders/orderDetail.vue

@@ -0,0 +1,124 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: 'My Orders',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'OrderDetail', // 订单详情
+})
+</script>
+
+<template>
+  <view class="pt-20rpx">
+    <!-- 状态显示 -->
+    <view class="mb-20rpx bg-#17AA68/80 py-20rpx text-center text-28rpx text-white">
+      Congrats，You won the prize in this group！
+      <br>
+      You have received
+      <text class="text-[var(--wot-color-theme)]">
+        ৳10
+      </text>
+      group opening reward
+    </view>
+    <!-- 拼团头像 -->
+    <view class="mb-20rpx bg-white px-20rpx py-20rpx text-center">
+      <image v-for="i in 10" :key="i" class="mx-4rpx mb-8rpx h-80rpx w-80rpx rounded-full" src="/static/images/avatar.jpg" />
+    </view>
+    <!-- 地址 -->
+    <view class="mb-20rpx bg-white px-24rpx py-20rpx">
+      <!-- 无地址 -->
+      <!-- <view class="flex items-center justify-between">
+        <view class="text-28rpx text-[var(--wot-color-theme)]">
+          Please provide your shipping address
+        </view>
+        <wd-icon name="arrow-right" color="#7D7D7D" size="28rpx" />
+      </view> -->
+      <!-- 有地址 -->
+      <view class="mb-20rpx text-24rpx">
+        <text class="mr-20rpx">
+          Aamir Khan
+        </text>
+        <text>0642251008</text>
+      </view>
+      <view class="text-22rpx text-#3A444C">
+        55/66 The Bliss Koolpunt Vlile 16, P3QM+RW8, San Kamphaeng, San Kamphaeng District, Chiang Mai  50130
+      </view>
+    </view>
+    <!-- 商品信息 -->
+    <wd-card type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!">
+      <template #title>
+        <view class="flex items-center justify-between">
+          <view class="text-28rpx text-#000">
+            Order ID：20250505123030120
+          </view>
+          <wd-text size="26rpx" type="primary" text="To Ship" />
+        </view>
+      </template>
+      <view class="flex items-center gap-24rpx">
+        <image
+          src="/static/images/avatar.jpg"
+          class="h-140rpx w-140rpx shrink-0"
+        />
+        <view class="flex-1">
+          <view class="line-clamp-2 text-28rpx text-#000">
+            SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
+          </view>
+          <view class="py-4rpx text-24rpx text-#3A444C">
+            Color：Black Grey
+          </view>
+          <view class="flex items-center justify-between text-24rpx">
+            <view class="text-[var(--wot-color-theme)]">
+              ৳ 300
+            </view>
+            <view class="text-#3A444C">
+              Quantity：1
+            </view>
+          </view>
+        </view>
+      </view>
+    </wd-card>
+    <!-- 订单信息 -->
+    <view class="bg-white px-24rpx">
+      <view class="border-b-1 border-b-#E1E1E1 border-b-solid py-24rpx">
+        <view class="mb-12rpx text-28rpx">
+          Oder Summary
+        </view>
+        <view class="flex flex-col gap-16rpx text-#3A444C">
+          <view class="flex items-center justify-between text-24rpx">
+            <text>SubTotal</text>
+            <text>৳1,000.00</text>
+          </view>
+        </view>
+      </view>
+      <view class="border-b-1 border-b-#E1E1E1 border-b-solid py-24rpx">
+        <view class="mb-12rpx text-28rpx">
+          Paid by
+        </view>
+        <view class="flex flex-col gap-16rpx text-#3A444C">
+          <view class="flex items-center justify-between text-24rpx">
+            <text>SubTotal</text>
+            <text>৳1,000.00</text>
+          </view>
+        </view>
+      </view>
+      <view class="py-24rpx">
+        <view class="flex flex-col gap-16rpx text-#3A444C">
+          <view class="flex items-center justify-between text-24rpx">
+            <text>Placed on</text>
+            <text>2025/05/05  12:30:30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+//
+</style>