xxx

src/packages/mobile/views/order/list/Index.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent, onUnmounted} from 'vue'
 import { Tab, Tabs } from 'vant'
 import { useComponent } from '@/hooks/component'
 

src/packages/mobile/views/swap/detail/Index.vue

@@ -1,7 +1,13 @@
 <template>
     <app-view>
         <template #header>
-            <app-navbar title="掉期挂牌大厅" />
+            <app-navbar title="掉期挂牌大厅" >
+                <template #right>
+                    <div class="button-more" @click="onListing">
+                        <span>挂牌</span>
+                    </div>
+                </template>
+            </app-navbar>
         </template>
         <Tabs v-model:active="tabIndex" @change="tabChange">
             <Tab title="卖大厅">
@@ -18,7 +24,7 @@
                     </app-list>
                 </div>
             </div>
-        <component ref="componentRef" :is="components.delisting" v-bind="{ selectedRow }" @closed="closeComponent"
+        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow }" @closed="closeComponent"
             v-if="componentId" />
     </app-view>
 </template>
@@ -32,10 +38,10 @@ import { useComponent } from '@/hooks/component'
 import AppList from '@mobile/components/base/list/index.vue'
 import { queryTjmdTradeOrderDetail } from '@/services/api/swap'
 
-const components = {
-    delisting: defineAsyncComponent(() => import('./components/delisting/Index.vue')),
-    listing: defineAsyncComponent(() => import('./components/listing/Index.vue')),
-}
+const componentMap = new Map<string, unknown>([
+    ['delisting', defineAsyncComponent(() => import('./components/delisting/Index.vue'))],
+    ['listing', defineAsyncComponent(() => import('./components/listing/Index.vue'))],
+])
 
 const { getQueryStringToNumber } = useNavigation()
 const { componentRef, componentId, openComponent, closeComponent } = useComponent()
@@ -71,8 +77,12 @@ const tabChange = (index: number) => {
     console.log('切换列表', index)
 }
 
-const delisting = (row: Model.TjmdTradeOrderDetailRsp) => {
-    selectedRow.value = row
-    openComponent('delisting')
+const onListing = () => {
+    showComponent('listing')
+}
+
+const showComponent = (componentName: string) => {
+    openComponent(componentName)
 }
+
 </script>

src/packages/mobile/views/swap/detail/components/delisting/Index.vue

@@ -1,19 +1,12 @@
 <template>
-    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
-        <app-view class="g-form">
-            <template #header>
-                <app-navbar title="摘牌" @back="closed" />
-            </template>
-            <Form ref="formRef" class="g-form__container">
-            </Form>
-        </app-view>
-    </app-modal>
+    <app-popup :title="'摘牌'" v-model:show="showModal" :refresh="refresh">
+    </app-popup>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 import { Form, FormInstance } from 'vant'
-import AppModal from '@/components/base/modal/index.vue'
+import AppPopup from '@mobile/components/base/popup/index.vue'
 
 const props = defineProps({
     selectedRow: {

src/packages/mobile/views/swap/detail/components/listing/Index.less

@@ -0,0 +1,13 @@
+.swap-listing {
+    &__form {
+        .van-stepper {
+            display: flex;
+            align-items: center;
+            width: 100%;
+
+            &__input {
+                flex: 1;
+            }
+        }
+    }
+}

src/packages/mobile/views/swap/detail/components/listing/Index.vue

@@ -1,31 +1,24 @@
 <template>
-    <app-modal direction="right" height="100%" v-model:show="showModal" :refresh="refresh">
-        <app-view class="g-form">
-            <template #header>
-                <app-navbar title="挂牌" @back="closed" >
-                    <template #right>
-                    <div class="button-more" @click="onMoreClick">
-                        <span>挂牌</span>
-                    </div>
-                </template>
-                </app-navbar>
-            </template>
-            <Form ref="formRef" class="g-form__container">
-            </Form>
-        </app-view>
-    </app-modal>
+    <app-popup class="swap-listing" :title="'挂牌'" v-model:show="showModal" :refresh="refresh">
+        <Form class="swap-listing__form" ref="formRef" @submit="onSubmit">
+        </Form>
+        <template #footer>
+            <Button type="primary" block round @click="formRef?.submit">确定</Button>
+        </template>
+    </app-popup>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
-import { Form, FormInstance } from 'vant'
-import AppModal from '@/components/base/modal/index.vue'
+import { Form, FormInstance, Button } from 'vant'
+import AppPopup from '@mobile/components/base/popup/index.vue'
 
 const formRef = shallowRef<FormInstance>()
 const showModal = shallowRef(true)
 const refresh = shallowRef(false) // 是否刷新父组件数据
 
-const onMoreClick = () => {
+// 提交挂牌
+const onSubmit = () => {
     console.log()
 }