Refactor code structure for improved readability and maintainability

src/views/trade/index.vue

@@ -2,6 +2,7 @@
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
 import type { SpotOrderBody } from "@/api/types";
 import type { TradingViewInst } from "@/tradingview/index";
+import type { ModalInstance } from "@/utils";
 import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
 import { caretDownOutline, ellipsisHorizontal } from "ionicons/icons";
@@ -9,28 +10,32 @@ import MaterialSymbolsCandlestickChartOutline from "~icons/material-symbols/cand
 import { client, safeClient } from "@/api";
 import { TradeTypeEnum } from "@/api/enum";
 import { TradingViewChart } from "@/tradingview/index";
+import ConfirmOrder from "./components/confirm-order.vue";
 import OrdersPanel from "./components/orders-panel.vue";
 import TradePairsModal from "./components/trade-pairs-modal.vue";
 import TradeSwitch from "./components/trade-switch.vue";
 import TradeWay from "./components/trade-way.vue";
-import { confirmOrderSchema, TradeWayValueEnum } from "./config";
+import { confirmOrderSubmitSchema, TradeWayValueEnum } from "./config";
 
+const { data } = await safeClient(client.api.trading_pairs.get({ query: { limit: 1 } }));
 const mode = useRouteQuery<TradeTypeEnum>("mode", TradeTypeEnum.BUY);
-const symbol = useRouteQuery<string>("symbol", "BTCUSD");
-
+const symbol = useRouteQuery<string>("symbol", data.value?.data[0].symbol);
 const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
   disabled_features: [
     "create_volume_indicator_by_default",
   ],
 };
 const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
-const [form] = useResetRef<SpotOrderBody>({
+const confirmModalInst = useTemplateRef<ModalInstance>("confirmModalInst");
+
+const [form] = useResetRef<SpotOrderBody & { amount: string }>({
   orderType: TradeWayValueEnum.LIMIT,
   quantity: "",
   side: mode.value,
   symbol: symbol.value,
   memo: "",
   price: "",
+  amount: "",
 });
 
 async function openTradePairs() {
@@ -40,22 +45,38 @@ async function openTradePairs() {
     initialBreakpoint: 0.95,
     handle: true,
   });
-
   await modal.present();
-
   const { data: result } = await modal.onWillDismiss<string>();
-
-  if (result) {
-    symbol.value = result;
+  result && (symbol.value = result);
+}
+function handleChangeQuantity(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.price) {
+    const amount = Number(val) * Number(form.value.price);
+    form.value.amount = amount.toString();
+  }
+  else {
+    form.value.amount = "";
   }
 }
-
-function handleSubmit() {
-  confirmOrderSchema.validate(form.value).then(() => {
-    console.log("submit successfully");
-  }).catch((err) => {
-    console.log("submit failed:", err);
-  });
+function handleChangeAmount(event) {
+  const val = (event.target as HTMLInputElement).value;
+  if (val && form.value.price) {
+    const quantity = Number(val) / Number(form.value.price);
+    form.value.quantity = quantity.toString();
+  }
+  else {
+    form.value.quantity = "";
+  }
+}
+async function handleSubmit() {
+  try {
+    await confirmOrderSubmitSchema.parseAsync(form.value);
+    confirmModalInst.value?.$el.present();
+  }
+  catch (err) {
+    console.error("订单验证失败:", err);
+  }
 }
 </script>
 
@@ -90,21 +111,37 @@ function handleSubmit() {
           <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="请输入价格(USDT)" />
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+              <span slot="end">USDT</span>
+            </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>
+            <ion-input v-model="form.amount" label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额" @ion-input="handleChangeAmount">
+              <span slot="end">USDT</span>
+            </ion-input>
           </template>
-          <ion-input v-model="form.quantity" label="数量" class="count" inputmode="decimal" type="number" placeholder="请输入交易数量">
-            <span slot="end">{{ symbol }}</span>
-          </ion-input>
-          <ion-input v-model="form.price" label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
-            <span slot="end">USDT</span>
-          </ion-input>
+          <template v-else-if="form.orderType === 'market'">
+            <ion-input v-model="form.price" label="价格" class="count" inputmode="decimal" type="number" placeholder="请输入价格">
+              <span slot="end">USDT</span>
+            </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>
+          </template>
+
           <!-- <ion-range class="range" aria-label="Range with ticks" :pin="true" :ticks="true" :snaps="true" :min="0" :max="5" /> -->
           <ion-button expand="block" size="small" shape="round" :color="mode === TradeTypeEnum.BUY ? 'success' : 'danger'" @click="handleSubmit">
             {{ mode === TradeTypeEnum.BUY ? '买入' : '卖出' }}
           </ion-button>
+
+          <ion-modal ref="confirmModalInst" class="confirm-modal" :breakpoints="[0, 1]" :initial-breakpoint="1" :handle="false">
+            <ConfirmOrder :form="form" />
+          </ion-modal>
         </div>
         <div class="col-span-2" />
       </div>
+
       <div class="mt-6 px-4 pb-4">
         <OrdersPanel />
       </div>
@@ -145,4 +182,7 @@ ion-range.range::part(tick-active) {
   top: 18px;
   border-radius: 100%;
 }
+.confirm-modal {
+  --height: auto;
+}
 </style>