feat: 底部按钮增加

src/pages/myOrders/orderDetail.vue

@@ -15,108 +15,118 @@ defineOptions({
 </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">
+  <z-paging>
+    <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 class="mb-20rpx text-24rpx">
+          <text class="mr-20rpx">
+            Aamir Khan
+          </text>
+          <text>0642251008</text>
         </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 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>
-          <view class="flex items-center justify-between text-24rpx">
-            <view class="text-[var(--wot-color-theme)]">
-              ৳ 300
+        </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="text-#3A444C">
-              Quantity：1
+            <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>
-      </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>
+      </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>
-      <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 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>
-      <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 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>
-  </view>
+    <template #bottom>
+      <view class="flex items-center justify-end bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
+        <wd-button custom-class="mr-16rpx!" plain>
+          Cancel
+        </wd-button>
+        <wd-button>Share Now</wd-button>
+      </view>
+    </template>
+  </z-paging>
 </template>
 
 <style lang="scss" scoped>