悬浮框

src/pages/index/index.vue

@@ -144,6 +144,24 @@
     >
       没有更多啦~
     </view>
+
+    <!-- 悬浮按钮 -->
+    <wd-fab
+      type="error"
+      position="right-bottom"
+      direction="left"
+      :draggable="true"
+      inactiveIcon="a-controlplatform"
+    >
+      <view class="custom-button" @click="go('/pages/ticket/ticket')">
+        <image class="fab-icon" src="@/static/index/coupon.png"></image>
+        <text class="fab-text">优惠券</text>
+      </view>
+      <view class="custom-button" @click="go('/pages/order/order')">
+        <image class="fab-icon" src="@/static/index/order.png"></image>
+        <text class="fab-text">订单</text>
+      </view>
+    </wd-fab>
   </view>
 </template>
 
@@ -474,6 +492,13 @@ onReachBottom(() => {
   }
   show.value = true;
 });
+
+// 前往个人中心
+const go = (url) => {
+  xma.navigateTo({
+    url,
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -804,5 +829,26 @@ page {
       }
     }
   }
+
+  .custom-button {
+    min-width: auto;
+    box-sizing: border-box;
+    gap: 10rpx;
+    margin: 8rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .fab-icon {
+      width: 64rpx;
+      height: 64rpx;
+    }
+
+    .fab-text {
+      font-size: 20rpx;
+      color: #333;
+    }
+  }
 }
 </style>

src/pages/order/order.vue

@@ -119,15 +119,6 @@
     </view>
     <Payment ref="PaymentRef" @payment="payNow"></Payment>
   </view>
-
-  <!-- <wd-fab type="error" position="right-bottom" direction="left" :draggable="true">
-    <view class="custom-button">
-      <image class="fab-icon" src="@/static/index/coupon.png"></image>
-    </view>
-    <view class="custom-button">
-      <image class="fab-icon" src="@/static/index/order.png"></image>
-    </view>
-  </wd-fab> -->
 </template>
 
 <script setup>
@@ -615,18 +606,4 @@ page {
     }
   }
 }
-
-.custom-button {
-  min-width: auto;
-  box-sizing: border-box;
-  width: 64rpx;
-  height: 64rpx;
-  border-radius: 16px;
-  margin: 8rpx;
-
-  .fab-icon {
-    width: 64rpx;
-    height: 64rpx;
-  }
-}
 </style>