feat: 更新确认订单逻辑，确保模态框关闭时返回成功状态；在订单列表中添加底部间距；在订单页面中添加价格、数量和金额变化的计算逻辑

src/views/trade/components/confirm-order.vue

@@ -31,7 +31,7 @@ async function onConfirm() {
     color: "success",
   });
   await toast.present();
-  modalController.dismiss();
+  modalController.dismiss({ success: true });
 }
 </script>
 

src/views/trade/components/order-book.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { Treaty } from "@elysiajs/eden";
 import { client, safeClient } from "@/api";
+import { tradeWebSocket } from "@/tradingview/websocket";
 
 type Item = Treaty.Data<typeof client.api.trading_pairs.orderbook.get>;
 
 const props = defineProps<{
   symbol: string;
 }>();
+const socket = tradeWebSocket.getSocket();
 
 const { data } = await safeClient(client.api.trading_pairs.orderbook.get({ query: { symbol: props.symbol, depth: 5 } }));
 
@@ -33,6 +35,44 @@ function getDepthPercent(items?: Item["asks" | "bids"], index?: number) {
   const itemTotal = totalValues[index];
   return (itemTotal / maxTotal) * 100;
 }
+function subscribe() {
+  socket.send({
+    action: "subscribe",
+    channels: [{
+      name: "depth",
+      symbol: props.symbol,
+    }],
+  });
+}
+function unsubscribe() {
+  socket.send({
+    action: "unsubscribe",
+    channels: [{
+      name: "depth",
+      symbol: props.symbol,
+    }],
+  });
+}
+
+// 监听订单簿更新
+socket.subscribe((message) => {
+  const data = message.data;
+});
+
+watch(() => props.symbol, (newSymbol, oldSymbol) => {
+  if (newSymbol === oldSymbol)
+    return;
+  unsubscribe();
+  subscribe();
+});
+
+onMounted(() => {
+  subscribe();
+});
+
+onUnmounted(() => {
+  unsubscribe();
+});
 </script>
 
 <template>

src/views/trade/components/order-list.vue

@@ -58,7 +58,7 @@ onBeforeMount(() => {
 <template>
   <ui-empty v-if="data.length === 0" title="当前暂无委托" />
   <template v-else>
-    <div v-for="item in data" :key="item.id" class="bg-faint rounded-xl p-3">
+    <div v-for="item in data" :key="item.id" class="bg-faint rounded-xl p-3 mb-3">
       <OrderCard :item="item" :show-cancel="props.showCancel" @refresh="handleRefresh" />
     </div>
     <ion-infinite-scroll threshold="100px" @ion-infinite="handleInfinite">

src/views/trade/index.vue

@@ -31,7 +31,7 @@ const confirmModalInst = useTemplateRef<ModalInstance>("confirmModalInst");
 const userStore = useUserStore();
 const router = useRouter();
 
-const [form] = useResetRef<SpotOrderBody & { amount: string }>({
+const [form, reset] = useResetRef<SpotOrderBody & { amount: string }>({
   orderType: TradeWayValueEnum.LIMIT,
   quantity: "",
   side: mode.value,
@@ -52,6 +52,20 @@ async function openTradePairs() {
   const { data: result } = await modal.onWillDismiss<string>();
   result && (symbol.value = result);
 }
+
+// 价格变化时，根据数量计算金额
+function handleChangePrice(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.quantity) {
+    const amount = Number(form.value.quantity) * Number(val);
+    form.value.amount = amount.toString();
+  }
+  else {
+    form.value.amount = "";
+  }
+}
+
+// 数量变化时，根据价格计算金额
 function handleChangeQuantity(event) {
   const val = (event.target as HTMLInputElement).value;
   if (val && form.value.price) {
@@ -62,6 +76,8 @@ function handleChangeQuantity(event) {
     form.value.amount = "";
   }
 }
+
+// 金额变化时，根据价格计算数量
 function handleChangeAmount(event) {
   const val = (event.target as HTMLInputElement).value;
   if (val && form.value.price) {
@@ -75,7 +91,11 @@ function handleChangeAmount(event) {
 async function handleSubmit() {
   try {
     await confirmOrderSubmitSchema.parseAsync(form.value);
-    confirmModalInst.value?.$el.present();
+    await confirmModalInst.value?.$el.present();
+    const { data: result } = await confirmModalInst.value?.$el.onWillDismiss();
+    if (result?.success) {
+      reset();
+    }
   }
   catch (err) {
     console.error("订单验证失败:", err);
@@ -122,7 +142,7 @@ function signIn() {
           <TradeSwitch v-model:active="mode" @update:active="val => form.side = val" />
           <TradeWay v-model="form" />
           <template v-if="form.orderType === 'limit'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格" @ion-input="handleChangePrice">
               <span slot="end">USDT</span>
             </ion-input>
             <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
@@ -133,9 +153,9 @@ function signIn() {
             </ion-input>
           </template>
           <template v-else-if="form.orderType === 'market'">
-            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+            <!-- <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
               <span slot="end">USDT</span>
-            </ion-input>
+            </ion-input> -->
             <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量" @ion-input="handleChangeQuantity">
               <span slot="end">{{ symbol }}</span>
             </ion-input>