update

src/packages/mobile/assets/themes/global/global.less

@@ -228,6 +228,136 @@
     }
 }
 
+.g-detail {
+    &__buy {
+        background-color: #fff;
+
+        .topic {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #fff;
+            background-image: linear-gradient(to right, #ee0a24, #ff6034);
+            padding: .24rem;
+
+            &-left {
+                .price-text {
+                    font-size: .24rem;
+                }
+
+                .price-integer {
+                    font-size: .44rem;
+                }
+            }
+
+            &-right {
+                display: flex;
+                flex-direction: column;
+                font-size: .24rem;
+            }
+        }
+
+        .title {
+            font-size: .3rem;
+            font-weight: bold;
+            line-height: .48rem;
+            padding: .24rem;
+            padding-bottom: 0;
+
+            span {
+                margin-right: .1rem;
+            }
+        }
+
+        .qty {
+            font-size: .24rem;
+            color: #999;
+            padding: .1rem .24rem 0 .24rem;
+        }
+
+        .info {
+            background-color: #fff;
+            padding: .2rem;
+
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                font-size: .26rem;
+
+                li {
+                    display: flex;
+                    justify-content: space-between;
+                    width: 50%;
+                    padding: .08rem .24rem;
+
+                    span {
+                        &:first-child {
+                            color: #999;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &__desc {
+        margin-top: .24rem;
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: .88rem;
+        background-color: #fff;
+
+        .price {
+            padding-left: .32rem;
+
+            &-text,
+            &-unit {
+                font-size: .24rem;
+            }
+
+            &-unit {
+                color: #f2270c;
+            }
+
+            &-integer {
+                font-size: .36rem;
+                color: #f2270c;
+            }
+        }
+
+        .submit {
+            align-self: stretch;
+            display: flex;
+            margin-left: auto;
+
+            &-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                min-width: 2rem;
+                font-weight: bold;
+                color: #fff;
+                padding: 0 .48rem;
+
+                &.warning {
+                    background-image: linear-gradient(to right, #ffd01e, #ff8917);
+                    background-color: #ff8a17;
+                }
+
+                &.danger {
+                    background-image: linear-gradient(to right, #ff6034, #ee0a24);
+                    background-color: #ee270a;
+                }
+            }
+        }
+    }
+}
+
 .van {
     &-dialog {
         &__message {

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

@@ -4,51 +4,38 @@
             <app-navbar title="商品详情" />
         </template>
         <Banner :data-list="detailBanners" height="4rem" />
-        <div class="g-detail__info">
-            <div class="pricebar">
-                <div class="pricebar-left">
-                    <span class="tag">发行价</span>
-                    <span class="unit">￥</span>
-                    <span class="price">{{ detail.refprice?.toFixed(2) }}</span>
+        <div class="g-detail__buy">
+            <div class="topic">
+                <div class="topic-left">
+                    <span class="price-text">发行价</span>
+                    <span class="price-unit">￥</span>
+                    <span class="price-integer">{{ detail.refprice?.toFixed(2) }}</span>
                 </div>
-                <div class="pricebar-right">
-                    <span>总量：{{ detail.presaleqty }}</span>
+                <div class="topic-right">
+                    <span>开始：{{ detail.starttime }}</span>
+                    <span>结束：{{ detail.endtime }}</span>
                 </div>
             </div>
-            <div class="tag">
+            <div class="title">
                 <Tag type="danger" round>摇号中签</Tag>
-            </div>
-            <div class="titlebar">
                 <span>{{ detail.sellname }}</span>
-                <span>{{ detail.goodsname }}</span>
+                <span>{{ detail.goodscode }}/{{ detail.goodsname }}</span>
             </div>
-            <div class="timebar">
-
+            <div class="qty">
+                <span>总量：{{ detail.presaleqty }}</span>
+            </div>
+            <div class="info">
+                <ul>
+                    <li>
+                        <span>预售定金</span>
+                        <span>{{ earnest }}</span>
+                    </li>
+                    <li>
+                        <span>转让比例</span>
+                        <span>{{ parsePercent(detail.transferdepositratio) }}</span>
+                    </li>
+                </ul>
             </div>
-        </div>
-        <div class="g-detail__cell">
-            <ul>
-                <li>
-                    <span>预售定金</span>
-                    <span>{{ earnest }}</span>
-                </li>
-                <li>
-                    <span>转让比例</span>
-                    <span>{{ parsePercent(detail.transferdepositratio) }}</span>
-                </li>
-            </ul>
-        </div>
-        <div class="g-detail__cell">
-            <ul>
-                <li>
-                    <span>开始时间</span>
-                    <span>{{ detail.starttime }}</span>
-                </li>
-                <li>
-                    <span>结束时间</span>
-                    <span>{{ detail.endtime }}</span>
-                </li>
-            </ul>
         </div>
         <div class="g-detail__desc">
             <template v-for="(url, index) in detailImages" :key="index">
@@ -57,7 +44,14 @@
         </div>
         <template #footer>
             <div class="g-detail__footer">
-                <Button type="primary" block round @click="openComponent('delisting')">我要认购</Button>
+                <div class="price">
+                    <span class="price-text">发行价：</span>
+                    <span class="price-unit">￥</span>
+                    <span class="price-integer">{{ detail.refprice?.toFixed(2) }}</span>
+                </div>
+                <div class="submit">
+                    <span class="submit-button danger" @click="openComponent('delisting')">我要认购</span>
+                </div>
             </div>
             <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ detail }" @closed="closeComponent"
                 v-if="componentId" />

src/packages/mobile/views/ballot/detail/components/delisting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <app-popup class="supply-demand-listing" title="出价" v-model:show="showModal" :refresh="refresh">
+    <app-popup class="supply-demand-listing" title="认购" v-model:show="showModal" :refresh="refresh">
         <Form class="supply-demand-listing__form" ref="formRef" @submit="onSubmit">
             <Field label="发行价">
                 <template #input>

src/packages/mobile/views/ballot/detail/index.less

@@ -1,72 +1,69 @@
 .g-detail {
-    &__info {
+    &__buy {
         background-color: #fff;
-        border-bottom-left-radius: .2rem;
-        border-bottom-right-radius: .2rem;
-        padding: .32rem;
 
-        .pricebar {
+        .topic {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            color: #fff;
+            background-image: linear-gradient(to right, #ee0a24, #ff6034);
+            padding: .24rem;
 
             &-left {
-                color: red;
-
-                .tag {
+                .price-text {
                     font-size: .24rem;
                 }
 
-                .price {
+                .price-integer {
                     font-size: .44rem;
                 }
             }
 
             &-right {
+                display: flex;
+                flex-direction: column;
                 font-size: .24rem;
-                color: #999;
             }
         }
 
-        .tag {
-            margin-top: .24rem;
-        }
-
-        .titlebar {
-            font-size: .32rem;
+        .title {
+            font-size: .3rem;
             font-weight: bold;
-            margin-top: .2rem;
+            line-height: .48rem;
+            padding: .24rem;
+            padding-bottom: 0;
 
             span {
                 margin-right: .1rem;
             }
         }
 
-        .timebar {
-            display: flex;
-            justify-content: space-around;
+        .qty {
+            font-size: .24rem;
+            color: #999;
+            padding: .1rem .24rem 0 .24rem;
         }
-    }
 
-    &__cell {
-        background-color: #fff;
-        border-radius: .2rem;
-        margin-top: .24rem;
-        padding: .2rem .32rem;
+        .info {
+            background-color: #fff;
+            padding: .2rem;
 
-        ul {
-            li {
+            ul {
                 display: flex;
-                padding: .12rem;
+                flex-wrap: wrap;
+                font-size: .26rem;
 
-                span {
-                    &:first-child {
-                        width: 1.6rem;
-                        color: #999;
-                    }
+                li {
+                    display: flex;
+                    justify-content: space-between;
+                    width: 50%;
+                    padding: .08rem .24rem;
 
-                    &:last-child {
-                        flex: 1;
+                    span {
+                        &:first-child {
+                            color: #999;
+                        }
                     }
                 }
             }
@@ -78,7 +75,55 @@
     }
 
     &__footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: .88rem;
         background-color: #fff;
-        padding: .12rem .24rem;
+
+        .price {
+            padding-left: .32rem;
+
+            &-text,
+            &-unit {
+                font-size: .24rem;
+            }
+
+            &-unit {
+                color: #f2270c;
+            }
+
+            &-integer {
+                font-size: .36rem;
+                color: #f2270c;
+            }
+        }
+
+        .submit {
+            align-self: stretch;
+            display: flex;
+            margin-left: auto;
+
+            &-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100%;
+                min-width: 2rem;
+                font-weight: bold;
+                color: #fff;
+                padding: 0 .48rem;
+
+                &.warning {
+                    background-image: linear-gradient(to right, #ffd01e, #ff8917);
+                    background-color: #ff8a17;
+                }
+
+                &.danger {
+                    background-image: linear-gradient(to right, #ff6034, #ee0a24);
+                    background-color: #ee270a;
+                }
+            }
+        }
     }
 }

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

@@ -3,18 +3,19 @@
         <template #header>
             <app-navbar title="预售中签" />
         </template>
-        <Banner :data-list="bannerList" />
+        <Banner :data-list="bannerList" @click="onBannerClick" v-if="bannerList.length" />
         <Waterfall class="g-goods-list" :data-list="startList">
             <template #default="{ item }">
-                <div class="goods" @click="$router.push({ name: 'ballot-detail', params: { item: JSON.stringify(item) } })">
+                <div class="goods" @click="toDetail(item)">
                     <div class="goods-image">
                         <img :src="getFileUrl(item.attachmenturl)" />
                     </div>
                     <div class="goods-info">
                         <div class="goods-info__title">{{ item.goodsname }}</div>
                         <div class="goods-info__price">
-                            <Tag type="danger">卖价</Tag>
-                            <span class="unit">{{ item.refprice }}</span>
+                            <Tag type="danger" plain>卖价</Tag>
+                            <span class="unit">￥</span>
+                            <span class="integer">{{ item.refprice }}</span>
                         </div>
                     </div>
                 </div>
@@ -23,15 +24,16 @@
         <Divider>发售历史</Divider>
         <Waterfall class="g-goods-list" :data-list="endList">
             <template #default="{ item }">
-                <div class="goods" @click="$router.push({ name: 'ballot-detail', params: { item: JSON.stringify(item) } })">
+                <div class="goods" @click="toDetail(item)">
                     <div class="goods-image">
                         <img :src="getFileUrl(item.attachmenturl)" />
                     </div>
                     <div class="goods-info">
                         <div class="goods-info__title">{{ item.goodsname }}</div>
                         <div class="goods-info__price">
-                            <Tag type="danger">卖价</Tag>
-                            <span class="unit">{{ item.refprice }}</span>
+                            <Tag type="danger" plain>卖价</Tag>
+                            <span class="unit">￥</span>
+                            <span class="integer">{{ item.refprice }}</span>
                         </div>
                     </div>
                 </div>
@@ -44,14 +46,16 @@
 import { shallowRef } from 'vue'
 import { Tag, Divider } from 'vant'
 import { getFileUrl } from '@/filters'
+import { useNavigation } from '@/hooks/navigation'
 import { useRequest } from '@/hooks/request'
 import { queryPresaleAuctions } from '@/services/api/presale'
 import Banner from '@mobile/components/base/banner/index.vue'
 import Waterfall from '@mobile/components/base/waterfall/index.vue'
 
+const { router } = useNavigation()
 const bannerList = shallowRef<string[]>([])
 
-useRequest(queryPresaleAuctions, {
+const { dataList } = useRequest(queryPresaleAuctions, {
     params: {
         presalemode: 5,
         presalestatusstr: '1'
@@ -74,6 +78,15 @@ const { dataList: endList } = useRequest(queryPresaleAuctions, {
         presalestatusstr: '3,4'
     },
 })
+
+const onBannerClick = (index: number) => {
+    toDetail(dataList.value[index])
+}
+
+// 打开详情页
+const toDetail = (item: Model.PresaleAuctionsRsp) => {
+    router.push({ name: 'ballot-detail', params: { item: JSON.stringify(item) } })
+}
 </script>
 
 <style lang="less">

src/packages/mobile/views/goods/detail/index.less

@@ -1,36 +0,0 @@
-.goods-detail {
-    background-color: #fff;
-
-    .van-tabs {
-        &__nav {
-            background-color: #f2f2f2;
-        }
-    }
-
-    &__quote {
-        padding: .2rem 0;
-
-        .price {
-            display: flex;
-            align-items: center;
-            padding: 0 .2rem;
-
-            li {
-                &:first-child {
-                    font-size: .44rem;
-                }
-
-                +li {
-                    margin-left: .2rem;
-                }
-            }
-        }
-
-        .time {
-            font-size: .24rem;
-            color: #999;
-            padding: 0 .2rem;
-            margin-top: .1rem;
-        }
-    }
-}

src/packages/mobile/views/home/Index.vue

@@ -52,8 +52,8 @@ const tabList: Tabbar[] = [
   {
     name: 'home-swap',
     label: '掉期',
-    icon: 'icon-purchase',
-    activeIcon: 'icon-purchase-active',
+    icon: 'icon-gongqiu-1',
+    activeIcon: 'icon-gongqiu',
   },
   {
     name: 'home-mine',

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

@@ -99,8 +99,4 @@ const detailImages = computed(() => {
     const pictureurls = detail.pictureurls ?? ''
     return pictureurls.split(',').map((path) => getFileUrl(path))
 })
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/mobile/views/presale/detail/index.less

@@ -1,129 +0,0 @@
-.g-detail {
-    &__buy {
-        background-color: #fff;
-
-        .topic {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            color: #fff;
-            background-image: linear-gradient(to right, #ee0a24, #ff6034);
-            padding: .24rem;
-
-            &-left {
-                .price-text {
-                    font-size: .24rem;
-                }
-
-                .price-integer {
-                    font-size: .44rem;
-                }
-            }
-
-            &-right {
-                display: flex;
-                flex-direction: column;
-                font-size: .24rem;
-            }
-        }
-
-        .title {
-            font-size: .3rem;
-            font-weight: bold;
-            line-height: .48rem;
-            padding: .24rem;
-            padding-bottom: 0;
-
-            span {
-                margin-right: .1rem;
-            }
-        }
-
-        .qty {
-            font-size: .24rem;
-            color: #999;
-            padding: .1rem .24rem 0 .24rem;
-        }
-
-        .info {
-            background-color: #fff;
-            padding: .2rem;
-
-            ul {
-                display: flex;
-                flex-wrap: wrap;
-                font-size: .26rem;
-
-                li {
-                    display: flex;
-                    justify-content: space-between;
-                    width: 50%;
-                    padding: .08rem .24rem;
-
-                    span {
-                        &:first-child {
-                            color: #999;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &__desc {
-        margin-top: .24rem;
-    }
-
-    &__footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: .88rem;
-        background-color: #fff;
-
-        .price {
-            padding-left: .32rem;
-
-            &-text,
-            &-unit {
-                font-size: .24rem;
-            }
-
-            &-unit {
-                color: #f2270c;
-            }
-
-            &-integer {
-                font-size: .36rem;
-                color: #f2270c;
-            }
-        }
-
-        .submit {
-            align-self: stretch;
-            display: flex;
-            margin-left: auto;
-
-            &-button {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
-                min-width: 2rem;
-                font-weight: bold;
-                color: #fff;
-                padding: 0 .48rem;
-
-                &.warning {
-                    background-image: linear-gradient(to right, #ffd01e, #ff8917);
-                    background-color: #ff8a17;
-                }
-
-                &.danger {
-                    background-image: linear-gradient(to right, #ff6034, #ee0a24);
-                    background-color: #ee270a;
-                }
-            }
-        }
-    }
-}

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

@@ -3,7 +3,7 @@
         <template #header>
             <app-navbar title="预售竞拍" :show-back-button="false" />
         </template>
-        <Banner :data-list="bannerList" @click="onBannerClick" />
+        <Banner :data-list="bannerList" @click="onBannerClick" v-if="bannerList.length" />
         <Waterfall class="g-goods-list" :data-list="startList">
             <template #default="{ item }">
                 <div class="goods" @click="toDetail(item)">

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

@@ -3,10 +3,7 @@
         <template #header>
             <app-navbar title="订单点价" />
         </template>
-        <app-list :columns="columns" :data-list="tableList">
-            <template #goodsname="{ row }">
-                <span @click="$router.push({ name: 'pricing-detail', query: { goodscode: row.goodscode, buyOrSell: BuyOrSell.Buy, buildType: BuildType.Open } })">{{ row.goodsname }}</span>
-            </template>
+        <app-list :columns="columns" :data-list="tableList" @row-click="rowClick">
             <!-- 当前价 -->
             <template #last="{ row }">
                 <span :class="row.lastColor">{{ row.last }}</span>
@@ -48,6 +45,7 @@
 import { computed } from 'vue'
 import { v4 } from 'uuid'
 import { parsePercent, handleNumberValue } from '@/filters'
+import { useNavigation } from '@/hooks/navigation'
 import { useRequest } from '@/hooks/request'
 import { queryQuoteGoodsList } from '@/services/api/swap'
 import { useFuturesStore, useUserStore } from '@/stores'
@@ -55,6 +53,7 @@ import quoteSocket from '@/services/websocket/quote'
 import AppList from '@mobile/components/base/list/index.vue'
 import { BuyOrSell, BuildType } from '@/constants/order'
 
+const { router } = useNavigation()
 const futuresStore = useFuturesStore()
 const userStore = useUserStore()
 const subscribeId = v4()
@@ -66,7 +65,7 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
     },
     onSuccess: (res) => {
         const goodsCodes = res.data.map((e) => e.goodscode)
-        const subscribe = quoteSocket.addSubscribe(goodsCodes,  subscribeId)
+        const subscribe = quoteSocket.addSubscribe(goodsCodes, subscribeId)
         subscribe.start()
     }
 })
@@ -111,4 +110,14 @@ const columns: Model.TableColumn[] = [
     { prop: 'amplitude', label: '振幅' },
 ]
 
+const rowClick = (row: Model.Futures) => {
+    router.push({
+        name: 'pricing-detail',
+        query: {
+            goodscode: row.goodscode,
+            buyOrSell: BuyOrSell.Buy,
+            buildType: BuildType.Open
+        }
+    })
+}
 </script>

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

@@ -1,85 +1,72 @@
 <template>
-    <app-view class="spot-details g-form">
+    <app-view class="g-detail">
         <template #header>
             <app-navbar title="挂牌详情" />
         </template>
-        <div v-if="quoteItem" class="spot-details__content">
-            <Swipe class="banner" :autoplay="5000" indicator-color="white" lazy-render>
-                <SwipeItem v-for="(url, index) in topBanners" :key="index">
-                    <img :src="url" />
-                </SwipeItem>
-            </Swipe>
-            <div class="goods">
-                <table cellspacing="0" cellpadding="0">
-                    <tr>
-                        <th colspan="3">
-                            <h1>{{ quoteItem.wrstandardname }}</h1>
-                        </th>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span>卖价:</span>
-                            <span>{{ quoteItem.sellprice }}</span>
-                        </td>
-                        <td>
-                            <span>卖量:</span>
-                            <span>{{ quoteItem.sellqty }}</span>
-                        </td>
-                        <td rowspan="3" style="vertical-align:top">
-                            <div class="goods-price">
-                                <h4>参考价(元/{{ quoteItem.enumdicname }})</h4>
-                                <h2>{{ quoteItem.spotgoodsprice }}</h2>
-                            </div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <span>买价:</span>
-                            <span>{{ quoteItem.buyprice }}</span>
-                        </td>
-                        <td>
-                            <span>买量:</span>
-                            <span>{{ quoteItem.buyqty }}</span>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td colspan="2">
-                            <span>仓库:</span>
-                            <span>{{ quoteItem.warehousename }}</span>
-                        </td>
-                    </tr>
-                </table>
+        <Banner :data-list="topBanners" height="4rem" />
+        <div class="g-detail__buy" v-if="quoteItem">
+            <div class="title">
+                <span>{{ quoteItem.wrstandardname }}</span>
             </div>
-            <div class="trade">
-                <div class="trade-section sell" v-if="sellList.length">
-                    <Cell title="卖价" />
-                    <app-list :columns="columns" :data-list="sellList">
-                        <template #operate="{ row }">
-                            <Button size="small" round @click="delistingListing(row, BuyOrSell.Buy)">买入</Button>
-                        </template>
-                    </app-list>
-                </div>
-                <div class="trade-section buy" v-if="buyList.length">
-                    <Cell title="买价" />
-                    <app-list :columns="columns" :data-list="buyList">
-                        <template #operate="{ row }">
-                            <Button size="small" round @click="delistingListing(row, BuyOrSell.Sell)">卖出</Button>
-                        </template>
-                    </app-list>
-                </div>
+            <div class="info">
+                <ul>
+                    <li>
+                        <span>卖价</span>
+                        <span>￥{{ quoteItem.sellprice }}</span>
+                    </li>
+                    <li>
+                        <span>卖量</span>
+                        <span>{{ quoteItem.sellqty }}</span>
+                    </li>
+                    <li>
+                        <span>买价</span>
+                        <span>￥{{ quoteItem.buyprice }}</span>
+                    </li>
+                    <li>
+                        <span>买量</span>
+                        <span>{{ quoteItem.buyqty }}</span>
+                    </li>
+                    <li>
+                        <span>仓库</span>
+                        <span>{{ quoteItem.warehousename }}</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="trade">
+            <div class="trade-section sell" v-if="sellList.length">
+                <Cell title="卖价" />
+                <app-list :columns="columns" :data-list="sellList">
+                    <template #operate="{ row }">
+                        <Button size="small" round @click="delistingListing(row, BuyOrSell.Buy)">买入</Button>
+                    </template>
+                </app-list>
             </div>
-            <div class="gallery">
-                <Divider>商品详情</Divider>
-                <template v-for="(url, index) in goodsImages" :key="index">
-                    <img :src="url" alt="" />
-                </template>
+            <div class="trade-section buy" v-if="buyList.length">
+                <Cell title="买价" />
+                <app-list :columns="columns" :data-list="buyList">
+                    <template #operate="{ row }">
+                        <Button size="small" round @click="delistingListing(row, BuyOrSell.Sell)">卖出</Button>
+                    </template>
+                </app-list>
             </div>
         </div>
-        <Empty v-else />
+        <div class="g-detail__desc">
+            <template v-for="(url, index) in goodsImages" :key="index">
+                <img :src="url" alt="" />
+            </template>
+        </div>
         <template #footer>
-            <div class="g-form__footer" v-if="quoteItem">
-                <Button type="warning" block round @click="toggleListing(BuyOrSell.Sell)">我要卖</Button>
-                <Button type="primary" block round @click="toggleListing(BuyOrSell.Buy)">我要买</Button>
+            <div class="g-detail__footer">
+                <div class="price" v-if="quoteItem">
+                    <span class="price-text">参考价：</span>
+                    <span class="price-unit">￥</span>
+                    <span class="price-integer">{{ quoteItem.spotgoodsprice }}</span>
+                </div>
+                <div class="submit">
+                    <span class="submit-button warning" @click="toggleListing(BuyOrSell.Sell)">我要卖</span>
+                    <span class="submit-button danger" @click="toggleListing(BuyOrSell.Buy)">我要买</span>
+                </div>
             </div>
             <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ quoteItem, quoteDetail, buyorsell }"
                 @closed="closeComponent" v-if="componentId" />
@@ -89,7 +76,7 @@
 
 <script lang="ts" setup>
 import { shallowRef, computed, defineAsyncComponent, onUnmounted } from 'vue'
-import { Cell, Swipe, SwipeItem, Empty, Divider, Button } from 'vant'
+import { Cell, Button } from 'vant'
 import { getFileUrl } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { useComponent } from '@/hooks/component'
@@ -98,6 +85,7 @@ import { BuyOrSell } from '@/constants/order'
 import { queryOrderQuote, queryOrderQuoteDetail } from '@/services/api/goods'
 import eventBus from '@/services/bus'
 import AppList from '@mobile/components/base/list/index.vue'
+import Banner from '@mobile/components/base/banner/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['listing', defineAsyncComponent(() => import('./components/listing/index.vue'))], // 挂牌

src/packages/mobile/views/spot/detail/index.less

@@ -1,76 +1,11 @@
-.spot-details {
-    .g-form__footer {
-        background-color: #fff;
-    }
-
-    &__content {
-        .banner {
-            background-color: #999;
-
-            .van-swipe {
-                min-height: 3rem;
-
-                &-item {
-                    height: 3rem;
-                    font-size: 0;
-
-                    img {
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                    }
-                }
-            }
-        }
-
-        .goods {
-            padding: .32rem;
-            background-color: #fff;
-            margin-bottom: .2rem;
-
-            table {
-                width: 100%;
-
-                th {
-                    text-align: left;
-
-                    h1 {
-                        font-size: .36rem;
-                        font-weight: bold;
-                    }
-                }
-
-                td {
-                    padding: .08rem 0;
-
-                    span {
-                        &:first-child {
-                            color: #999;
-                            margin-right: .2rem;
-                        }
-                    }
-                }
-            }
-
-            &-price {
-                text-align: center;
-
-                h2 {
-                    font-size: .48rem;
-                    font-weight: bold;
-                    color: #E84F42;
-                }
-            }
-        }
-
-        .trade {
-            &-section {
-                margin-bottom: .2rem;
-
-                .van-button {
-                    width: 1rem;
-                    border-width: 1px;
-                }
+.g-detail {
+    .trade {
+        &-section {
+            margin-top: .2rem;
+
+            .van-button {
+                width: 1rem;
+                border-width: 1px;
             }
         }
     }

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

@@ -5,8 +5,8 @@
         </template>
         <app-pull-refresh ref="pullRefreshRef" class="purchase__container" v-model:loading="loading" v-model:error="error"
             v-model:pageIndex="pageIndex" :page-count="pageCount" @refresh="run">
-            <div class="waterfall">
-                <div class="waterfall-item" v-for="(item, index) in dataList" :key="index">
+            <Waterfall class="g-goods-list" :data-list="dataList">
+                <template #default="{ item }">
                     <div class="goods"
                         @click="$router.push({ name: 'spot-detail', query: { wrfactortypeid: item.wrfactortypeid } })">
                         <div class="goods-image">
@@ -15,17 +15,19 @@
                         <div class="goods-info">
                             <div class="goods-info__title">{{ item.wrstandardname }}</div>
                             <div class="goods-info__price">
-                                <Tag type="danger">卖价</Tag>
-                                <span class="unit">{{ item.sellprice }}</span>
+                                <Tag type="danger" plain>卖价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.sellprice }}</span>
                             </div>
                             <div class="goods-info__price">
-                                <Tag type="warning">买价</Tag>
-                                <span class="unit">{{ item.buyprice }}</span>
+                                <Tag type="warning" plain>买价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.buyprice }}</span>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
+                </template>
+            </Waterfall>
         </app-pull-refresh>
     </app-view>
 </template>
@@ -37,6 +39,7 @@ import { getFileUrl } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryOrderQuote } from '@/services/api/goods'
 import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
+import Waterfall from '@mobile/components/base/waterfall/index.vue'
 
 const error = shallowRef(false)
 const pullRefreshRef = shallowRef()

src/packages/mobile/views/swap/detail/index.less

@@ -1,36 +0,0 @@
-.swap-detail {
-    background-color: #fff;
-
-    .van-tabs {
-        &__nav {
-            background-color: #f2f2f2;
-        }
-    }
-
-    &__quote {
-        padding: .2rem 0;
-
-        .price {
-            display: flex;
-            align-items: center;
-            padding: 0 .2rem;
-
-            li {
-                &:first-child {
-                    font-size: .44rem;
-                }
-
-                +li {
-                    margin-left: .2rem;
-                }
-            }
-        }
-
-        .time {
-            font-size: .24rem;
-            color: #999;
-            padding: 0 .2rem;
-            margin-top: .1rem;
-        }
-    }
-}

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

@@ -3,11 +3,7 @@
         <template #header>
             <app-navbar title="转让详情" />
         </template>
-        <Swipe class="g-detail__banner" :autoplay="5000" indicator-color="white" lazy-render>
-            <SwipeItem v-for="(url, index) in detailBanners" :key="index">
-                <img :src="url" />
-            </SwipeItem>
-        </Swipe>
+        <Banner :data-list="detailBanners" height="4rem" />
         <div class="g-detail__buy" v-if="detail">
             <div class="title">
                 <span>{{ detail.goodscode }}/{{ detail.goodsname }}</span>
@@ -59,13 +55,13 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent } from 'vue'
-import { Swipe, SwipeItem } from 'vant'
 import { getFileUrl, parsePercent } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryPresaleDefault, queryMineTradePositionExs } from '@/services/api/transfer'
 import { useComponent } from '@/hooks/component'
 import { useNavigation } from '@/hooks/navigation'
 import { useFuturesStore } from '@/stores'
+import Banner from '@mobile/components/base/banner/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['listing', defineAsyncComponent(() => import('@mobile/views/order/position/components/transfer/listing/Index.vue'))], // 挂牌
@@ -101,8 +97,4 @@ const detailImages = computed(() => {
     const pictureurls = detail.value?.pictureurls ?? ''
     return pictureurls.split(',').map((path) => getFileUrl(path))
 })
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/mobile/views/transfer/detail/index.less

@@ -1,114 +0,0 @@
-.g-detail {
-    &__banner {
-        background-color: #ddd;
-        min-height: 3rem;
-
-        .van-swipe-item {
-            height: 4rem;
-            font-size: 0;
-
-            img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-    }
-
-    &__buy {
-        background-color: #fff;
-
-        .title {
-            font-size: .3rem;
-            font-weight: bold;
-            line-height: .48rem;
-            padding: .24rem;
-            padding-bottom: 0;
-
-            span {
-                margin-right: .1rem;
-            }
-        }
-
-        .info {
-            background-color: #fff;
-            padding: .2rem;
-
-            ul {
-                display: flex;
-                flex-wrap: wrap;
-                font-size: .26rem;
-
-                li {
-                    display: flex;
-                    justify-content: space-between;
-                    width: 50%;
-                    padding: .08rem .24rem;
-
-                    span {
-                        &:first-child {
-                            color: #999;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &__desc {
-        margin-top: .24rem;
-    }
-
-    &__footer {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: .88rem;
-        background-color: #fff;
-
-        .price {
-            padding-left: .32rem;
-
-            &-text,
-            &-unit {
-                font-size: .24rem;
-            }
-
-            &-unit {
-                color: #f2270c;
-            }
-
-            &-integer {
-                font-size: .36rem;
-                color: #f2270c;
-            }
-        }
-
-        .submit {
-            align-self: stretch;
-            display: flex;
-            margin-left: auto;
-
-            &-button {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 100%;
-                min-width: 2rem;
-                font-weight: bold;
-                color: #fff;
-                padding: 0 .48rem;
-
-                &.warning {
-                    background-image: linear-gradient(to right, #ffd01e, #ff8917);
-                    background-color: #ff8a17;
-                }
-
-                &.danger {
-                    background-image: linear-gradient(to right, #ff6034, #ee0a24);
-                    background-color: #ee270a;
-                }
-            }
-        }
-    }
-}