feat: 添加交易方式配置，更新相关组件以支持限价和市价委托

src/views/trade/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ChartingLibraryWidgetOptions } from "#/charting_library";
+import type { SpotOrderBody } from "@/api/types";
 import type { TradingViewInst } from "@/tradingview/index";
 import { modalController } from "@ionic/vue";
 import { useRouteQuery } from "@vueuse/router";
@@ -12,6 +13,7 @@ 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";
 
 const mode = useRouteQuery<TradeTypeEnum>("mode", TradeTypeEnum.BUY);
 const symbol = useRouteQuery<string>("symbol", "BTCUSD");
@@ -22,6 +24,14 @@ const tradingviewOptions: Partial<ChartingLibraryWidgetOptions> = {
   ],
 };
 const tradingViewInst = useTemplateRef<TradingViewInst>("tradingViewInst");
+const [form] = useResetRef<SpotOrderBody>({
+  orderType: TradeWayValueEnum.LIMIT,
+  quantity: "",
+  side: mode.value,
+  symbol: symbol.value,
+  memo: "",
+  price: "",
+});
 
 async function openTradePairs() {
   const modal = await modalController.create({
@@ -39,6 +49,14 @@ async function openTradePairs() {
     symbol.value = result;
   }
 }
+
+function handleSubmit() {
+  confirmOrderSchema.validate(form.value).then(() => {
+    console.log("submit successfully");
+  }).catch((err) => {
+    console.log("submit failed:", err);
+  });
+}
 </script>
 
 <template>
@@ -69,14 +87,20 @@ async function openTradePairs() {
 
       <div class="grid grid-cols-5 px-4">
         <div class="col-span-3 space-y-2">
-          <TradeSwitch v-model:active="mode" />
-          <TradeWay />
-          <ion-input label="金额" class="count" inputmode="decimal" type="number" placeholder="请输入交易金额">
+          <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)" />
+          </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>
-          <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 === 'buy' ? 'success' : 'danger'">
-            {{ mode === 'buy' ? '买入' : '卖出' }}
+          <!-- <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>
         </div>
         <div class="col-span-2" />