From c3321bfbf1dd3f02e5d6ffa2150dde1a814ecd64 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Fri, 19 Dec 2025 22:02:52 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20SubscribeRwa=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=20RWA=20=E7=94=B3?=
 =?UTF-8?q?=E8=B4=AD=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                             |  2 +
 components.d.ts                               |  4 ++
 src/components/subscribe-rwa/index.vue        | 45 +++++++++++++++++++
 src/views/trade-rwa/index.vue                 | 21 ++++++---
 .../trade/components/operation-wrapper.vue    | 27 ++++++++++-
 src/views/trade/index.vue                     |  9 ++--
 6 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 src/components/subscribe-rwa/index.vue

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 7091ad3..760d212 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -270,6 +270,7 @@ declare global {
   const useStorage: typeof import('@vueuse/core').useStorage
   const useStorageAsync: typeof import('@vueuse/core').useStorageAsync
   const useStyleTag: typeof import('@vueuse/core').useStyleTag
+  const useSubscribeModal: typeof import('./src/composables/useSubscribeModal').useSubscribeModal
   const useSupported: typeof import('@vueuse/core').useSupported
   const useSwipe: typeof import('@vueuse/core').useSwipe
   const useTemplateRef: typeof import('vue').useTemplateRef
@@ -611,6 +612,7 @@ declare module 'vue' {
     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSubscribeModal: UnwrapRef<typeof import('./src/composables/useSubscribeModal')['useSubscribeModal']>
     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
diff --git a/components.d.ts b/components.d.ts
index 87ff1e5..da2196b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     IonIcon: typeof import('@ionic/vue')['IonIcon']
     IonInfiniteScroll: typeof import('@ionic/vue')['IonInfiniteScroll']
     IonInfiniteScrollContent: typeof import('@ionic/vue')['IonInfiniteScrollContent']
+    IonInput: typeof import('@ionic/vue')['IonInput']
     IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
     IonItem: typeof import('@ionic/vue')['IonItem']
     IonLabel: typeof import('@ionic/vue')['IonLabel']
@@ -61,6 +62,7 @@ declare module 'vue' {
     QrScanner: typeof import('./src/components/qr-scanner/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SubscribeRwa: typeof import('./src/components/subscribe-rwa/index.vue')['default']
     UiAvatar: typeof import('./src/components/ui/avatar/index.vue')['default']
     UiCollapse: typeof import('./src/components/ui/collapse/index.vue')['default']
     UiDatetime: typeof import('./src/components/ui/datetime/index.vue')['default']
@@ -99,6 +101,7 @@ declare global {
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
   const IonInfiniteScroll: typeof import('@ionic/vue')['IonInfiniteScroll']
   const IonInfiniteScrollContent: typeof import('@ionic/vue')['IonInfiniteScrollContent']
+  const IonInput: typeof import('@ionic/vue')['IonInput']
   const IonInputOtp: typeof import('@ionic/vue')['IonInputOtp']
   const IonItem: typeof import('@ionic/vue')['IonItem']
   const IonLabel: typeof import('@ionic/vue')['IonLabel']
@@ -125,6 +128,7 @@ declare global {
   const QrScanner: typeof import('./src/components/qr-scanner/index.vue')['default']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
+  const SubscribeRwa: typeof import('./src/components/subscribe-rwa/index.vue')['default']
   const UiAvatar: typeof import('./src/components/ui/avatar/index.vue')['default']
   const UiCollapse: typeof import('./src/components/ui/collapse/index.vue')['default']
   const UiDatetime: typeof import('./src/components/ui/datetime/index.vue')['default']
diff --git a/src/components/subscribe-rwa/index.vue b/src/components/subscribe-rwa/index.vue
new file mode 100644
index 0000000..1f411b3
--- /dev/null
+++ b/src/components/subscribe-rwa/index.vue
@@ -0,0 +1,45 @@
+<script lang='ts' setup>
+const props = defineProps<{
+  unitPrice: number;
+}>();
+
+const walletStore = useWalletStore();
+const { balances } = storeToRefs(walletStore);
+const currentUSDTBalance = computed(() => balances.value[0].available);
+const maxSubscribeNumber = computed(() => {
+  return Math.floor(Number(currentUSDTBalance.value) / props.unitPrice);
+});
+</script>
+
+<template>
+  <ion-content class="ion-padding" :scroll-y="false">
+    <div class="space-y-5 mt-3">
+      <div>申购RWA</div>
+
+      <ion-input :placeholder="`最大可申购数量: ${maxSubscribeNumber}`" type="number" :max="maxSubscribeNumber" />
+
+      <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
+        单价: ${{ unitPrice }}
+      </div>
+
+      <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
+        可用余额: ${{ Number(currentUSDTBalance) }}
+      </div>
+
+      <ion-button expand="block" class="mt-6 ui-button" color="primary">
+        确认申购
+      </ion-button>
+    </div>
+  </ion-content>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+ion-input {
+  @apply rounded-lg;
+  --padding-start: 16px;
+  --padding-end: 16px;
+  border: 1px solid var(--ion-color-light-shade);
+}
+</style>
diff --git a/src/views/trade-rwa/index.vue b/src/views/trade-rwa/index.vue
index dbe9ea5..17c8b1f 100644
--- a/src/views/trade-rwa/index.vue
+++ b/src/views/trade-rwa/index.vue
@@ -47,26 +47,34 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
             </ion-col>
           </ion-row>
           <ion-row>
+            <ion-col>
+              <div class="label">
+                单价
+              </div>
+              <div>${{ formatAmount(data?.unitPrice) }}</div>
+            </ion-col>
             <ion-col>
               <div class="label">
                 总发行量
               </div>
               <div>{{ Number(data?.totalSupply) }}份</div>
             </ion-col>
+          </ion-row>
+          <ion-row>
             <ion-col>
               <div class="label">
                 每人限量
               </div>
               <div>{{ Number(data?.perUserLimit) }}份</div>
             </ion-col>
-          </ion-row>
-          <ion-row>
             <ion-col>
               <div class="label">
                 发行时间
               </div>
               <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
             </ion-col>
+          </ion-row>
+          <ion-row>
             <ion-col>
               <div class="label">
                 认购截止时间
@@ -90,12 +98,13 @@ const { data } = safeClient(client.api.rwa.subscription.available_editions({ edi
     <ion-footer>
       <ion-toolbar class="ion-padding-horizontal ui-toolbar">
         <div class="flex justify-center my-2 gap-5">
-          <ion-button shape="round" expand="block" color="success">
+          <ion-button id="open-modal" shape="round" expand="block" color="success">
             申购
           </ion-button>
-          <ion-button shape="round" expand="block" color="danger">
-            赎回
-          </ion-button>
+
+          <ion-modal trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
+            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" />
+          </ion-modal>
         </div>
       </ion-toolbar>
     </ion-footer>
diff --git a/src/views/trade/components/operation-wrapper.vue b/src/views/trade/components/operation-wrapper.vue
index afb0416..4b2e07d 100644
--- a/src/views/trade/components/operation-wrapper.vue
+++ b/src/views/trade/components/operation-wrapper.vue
@@ -1,11 +1,36 @@
 <script lang='ts' setup>
+import type { Animation } from "@ionic/vue";
+import { createAnimation } from "@ionic/vue";
 import { cartOutline } from "ionicons/icons";
 
 const model = defineModel<"sale" | "buy" | null>();
+
+const operationInst = useTemplateRef<HTMLDivElement>("operationInst");
+const targetIsVisible = useElementVisibility(operationInst);
+const animation = ref<Animation | null>(null);
+
+watch(targetIsVisible, (visible) => {
+  if (visible) {
+    animation.value?.easing("ease-in")
+      .fromTo("opacity", "0", "1")
+      .play();
+  }
+  else {
+    animation.value?.easing("ease-out")
+      .fromTo("opacity", "1", "0")
+      .play();
+  }
+});
+
+onMounted(() => {
+  animation.value = createAnimation()
+    .addElement(operationInst.value!)
+    .duration(500);
+});
 </script>
 
 <template>
-  <div v-if="model === null" class="operation-container">
+  <div v-if="model === null" ref="operationInst" class="operation-container">
     <div class="wrapper" />
 
     <div class="box">
diff --git a/src/views/trade/index.vue b/src/views/trade/index.vue
index 980f4cf..5d94b67 100644
--- a/src/views/trade/index.vue
+++ b/src/views/trade/index.vue
@@ -3,18 +3,17 @@ import { cartOutline } from "ionicons/icons";
 import OperationWrapper from "./components/operation-wrapper.vue";
 
 const { t } = useI18n();
-const current = ref<"sale" | "buy" | null>(null);
 </script>
 
 <template>
   <IonPage>
-    <IonHeader>
-      <IonToolbar>
+    <IonHeader class="ion-no-border">
+      <ion-toolbar class="ui-toolbar">
         <IonTitle>{{ t('tabs.trade') }}</IonTitle>
-      </IonToolbar>
+      </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true">
-      <OperationWrapper v-model="current" />
+      <!-- <OperationWrapper v-model="current" /> -->
     </IonContent>
   </IonPage>
 </template>