xxxxx

src/filters/index.ts

@@ -13,6 +13,12 @@ export function getUrl(url: string, base?: string) {
     return new URL(url, base ?? uploadUrl)
 }
 
+// 获取商品首图
+export function getFirstImage(url: string){
+    const images = url.split(',').map((path) => getFileUrl(path))
+    return images[0] ?? ''
+}
+
 /**
  * 获取文件链接地址
  * @param filePath 

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

@@ -9,7 +9,7 @@
         </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">
-            <Waterfall class="g-goods-list" :data-list="dataList">
+            <Waterfall class="g-goods-waterfall" :data-list="dataList">
                 <template #default="{ item }">
                     <div class="goods"
                         @click="$router.push({ name: 'spot-detail', query: { wrfactortypeid: item.wrfactortypeid } })">

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

@@ -122,6 +122,67 @@
 
 /* 商品列表 */
 .g-goods-list {
+    .list {
+        padding: .2rem .2rem 0 .2rem;
+
+        &-item {
+            display: flex;
+            align-items: center;
+            border-radius: .1rem;
+            overflow: hidden;
+            padding: .2rem;
+
+            &:not(:last-child) {
+                margin-bottom: .2rem;
+            }
+
+            .img {
+                &:first-child {
+                    display: flex;
+                    align-items: center;
+
+                    img {
+                        width: 1.8rem;
+                        height: 1.8rem;
+                        object-fit: cover;
+                        border-radius: .16rem;
+                        margin-right: .3rem;
+                    }
+                }
+
+                &:last-child {
+                    .van-button {
+                        width: 1.3rem;
+                        height: .5rem;
+                    }
+                }
+            }
+
+            .info {
+                flex: 1;
+
+                .title {
+                    color: #333;
+                    font-size: .30rem;
+                }
+
+                .desc {
+                    color: #666;
+                    font-size: .24rem;
+                    padding: .1rem 0;
+                }
+
+                .price {
+                    .buyprice, .sellprice {
+                        padding-bottom: .02rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.g-goods-waterfall {
     padding: .2rem;
 
     .goods {

src/packages/mobile/components/base/waterfall/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, watch, nextTick, onActivated } from 'vue'
+import { shallowRef, watch, nextTick, onActivated, onMounted } from 'vue'
 
 const props = defineProps({
     //数据列表
@@ -101,6 +101,10 @@ onActivated(() => {
         render()
     }
 })
+
+onMounted(() => {
+    render()
+})
 </script>
 
 <style lang="less">

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

@@ -1,57 +1,93 @@
 <template>
     <app-view class="ballot-list">
         <template #header>
-            <app-navbar title="预售中签" />
+            <app-navbar title="预售中签" >
+                <template #right>
+                    <Icon name="bars" size=".4rem" @click="isWaterfall = !isWaterfall"/>
+                </template>
+            </app-navbar>
         </template>
         <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)">
-                    <div class="goods-image">
-                        <img :src="getFileUrl(item.attachmenturl)" />
+        <template v-if="isWaterfall">
+            <Waterfall class="g-goods-waterfall" :data-list="startList" >
+                <template #default="{ 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" plain>卖价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.refprice }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Waterfall>
+            <Divider>发售历史</Divider>
+            <Waterfall class="g-goods-waterfall" :data-list="endList">
+                <template #default="{ 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" plain>卖价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.refprice }}</span>
+                            </div>
+                        </div>
                     </div>
-                    <div class="goods-info">
-                        <div class="goods-info__title">{{ item.goodsname }}</div>
-                        <div class="goods-info__price">
+                </template>
+            </Waterfall>
+        </template>
+        <template v-else>
+            <ul class="g-goods-list">
+                <li class="list-item g-block--bg" v-for="(item, index) in startList" :key="index" @click="toDetail(item)">
+                    <div class="img"><img :src="getFirstImage(item.attachmenturl)" /></div>
+                    <div class="info">
+                        <div class="title"><span>{{ item.goodsname }}</span></div>
+                        <div class="price">
                             <Tag type="danger" plain>卖价</Tag>
                             <span class="unit">￥</span>
                             <span class="integer">{{ item.refprice }}</span>
                         </div>
                     </div>
-                </div>
-            </template>
-        </Waterfall>
-        <Divider>发售历史</Divider>
-        <Waterfall class="g-goods-list" :data-list="endList">
-            <template #default="{ 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">
+                </li>
+            </ul>
+            <Divider>发售历史</Divider>
+            <ul class="g-goods-list"> 
+                <li class="list-item g-block--bg" v-for="(item, index) in endList" :key="index" @click="toDetail(item)">
+                    <div class="img"><img :src="getFirstImage(item.attachmenturl)" /></div>
+                    <div class="info">
+                        <div class="title"><span>{{ item.goodsname }}</span></div>
+                        <div class="price">
                             <Tag type="danger" plain>卖价</Tag>
                             <span class="unit">￥</span>
                             <span class="integer">{{ item.refprice }}</span>
                         </div>
                     </div>
-                </div>
-            </template>
-        </Waterfall>
+                </li>
+            </ul>
+        </template>
     </app-view>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
-import { Tag, Divider } from 'vant'
-import { getFileUrl } from '@/filters'
+import { Tag, Divider, Icon } from 'vant'
+import { getFileUrl, getFirstImage } from '@/filters'
 import { useNavigation } from '../../../router/navigation'
 import { useRequest } from '@/hooks/request'
 import { queryPresaleAuctions } from '@/services/api/presale'
 import Banner from '../../../components/base/banner/index.vue'
 import Waterfall from '../../../components/base/waterfall/index.vue'
 
+const isWaterfall = shallowRef(false)
 const { router } = useNavigation()
 const bannerList = shallowRef<string[]>([])
 

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

@@ -1,57 +1,94 @@
 <template>
     <app-view class="presale-list">
         <template #header>
-            <app-navbar title="预售竞拍" :show-back-button="false" />
+            <app-navbar title="预售竞拍" :show-back-button="false" >
+                <template #right>
+                    <Icon name="bars" size=".4rem" @click="isWaterfall = !isWaterfall"/>
+                </template>
+            </app-navbar>
         </template>
         <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)">
-                    <div class="goods-image">
-                        <img :src="getFileUrl(item.attachmenturl)" />
+        <template v-if="isWaterfall">
+            <Waterfall class="g-goods-waterfall" :data-list="startList">
+                <template #default="{ 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" plain>起拍价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.startprice }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Waterfall>
+            <Divider>发售历史</Divider>
+            <Waterfall class="g-goods-waterfall" :data-list="endList">
+                <template #default="{ 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" plain>预售价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.tradeprice }}</span>
+                            </div>
+                        </div>
                     </div>
-                    <div class="goods-info">
-                        <div class="goods-info__title">{{ item.goodsname }}</div>
-                        <div class="goods-info__price">
+                </template>
+            </Waterfall>
+        </template>
+        <template v-else>
+            <ul class="lg-goods-list">
+                <li class="list-item g-block--bg" v-for="(item, index) in startList" :key="index" @click="toDetail(item)">
+                    <div class="img"><img :src="getFirstImage(item.attachmenturl)" /></div>
+                    <div class="info">
+                        <div class="title">{{ item.goodsname }}</div>
+                        <div class="desc">开始：{{ formatDate(item.starttime) }}-结束：{{ formatDate(item.endtime) }}</div>
+                        <div class="price">
                             <Tag type="danger" plain>起拍价</Tag>
                             <span class="unit">￥</span>
                             <span class="integer">{{ item.startprice }}</span>
                         </div>
                     </div>
-                </div>
-            </template>
-        </Waterfall>
-        <Divider>发售历史</Divider>
-        <Waterfall class="g-goods-list" :data-list="endList">
-            <template #default="{ 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">
+                </li>
+            </ul>
+            <Divider>发售历史</Divider>
+            <ul class="g-goods-list"> 
+                <li class="list-item g-block--bg" v-for="(item, index) in endList" :key="index" @click="toDetail(item)">
+                    <div class="img"><img :src="getFirstImage(item.attachmenturl)" /></div>
+                    <div class="info">
+                        <div class="title">{{ item.goodsname }}</div>
+                        <div class="price">
                             <Tag type="danger" plain>预售价</Tag>
                             <span class="unit">￥</span>
                             <span class="integer">{{ item.tradeprice }}</span>
                         </div>
                     </div>
-                </div>
-            </template>
-        </Waterfall>
+                </li>
+            </ul>
+        </template>
     </app-view>
 </template>
 
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
-import { Tag, Divider } from 'vant'
-import { getFileUrl } from '@/filters'
+import { Tag, Divider, Icon } from 'vant'
+import { formatDate, getFileUrl, getFirstImage } from '@/filters'
 import { useNavigation } from '../../../router/navigation'
 import { useRequest } from '@/hooks/request'
 import { queryPresaleAuctions } from '@/services/api/presale'
 import Banner from '../../../components/base/banner/index.vue'
 import Waterfall from '../../../components/base/waterfall/index.vue'
 
+const isWaterfall = shallowRef(false)
 const { router } = useNavigation()
 const bannerList = shallowRef<string[]>([])
 

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

@@ -4,12 +4,13 @@
             <app-navbar title="现货挂牌">
                 <template #right>
                     <Icon name="add" size=".4rem" @click="$router.push({ name: 'spot-add' })" />
+                    <Icon name="bars" size=".4rem" @click="isWaterfall = !isWaterfall"/>
                 </template>
             </app-navbar>
         </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">
-            <Waterfall class="g-goods-list" :data-list="dataList">
+            <Waterfall class="g-goods-waterfall" :data-list="dataList" v-if="isWaterfall">
                 <template #default="{ item }">
                     <div class="goods"
                         @click="$router.push({ name: 'spot-detail', query: { wrfactortypeid: item.wrfactortypeid } })">
@@ -33,6 +34,28 @@
                     </div>
                 </template>
             </Waterfall>
+            <ul class="g-goods-list" v-else>
+                <li class="list-item g-block--bg" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
+                    <div class="img"><img :src="getFirstImage(item.thumurls)" /></div>
+                    <div class="info">
+                        <div class="title"><span>{{ item.wrstandardcode }} / {{ item.wrstandardname }}</span></div>
+                        <div class="desc">{{ item.warehousename }}</div>
+                        <div class="price">
+                            <div class="sellprice" v-if="item.sellprice">
+                                <Tag type="danger" plain>卖价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.sellprice }}</span>
+                            </div>
+                            <div class="buyprice" v-if="item.buyprice">
+                                <Tag type="warning" plain>买价</Tag>
+                                <span class="unit">￥</span>
+                                <span class="integer">{{ item.buyprice }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                </li>
+            </ul>
         </app-pull-refresh>
     </app-view>
 </template>
@@ -46,6 +69,7 @@ import { queryOrderQuote } from '@/services/api/goods'
 import AppPullRefresh from '../../../components/base/pull-refresh/index.vue'
 import Waterfall from '../../../components/base/waterfall/index.vue'
 
+const isWaterfall = shallowRef(false)
 const error = shallowRef(false)
 const pullRefreshRef = shallowRef()
 const dataList = shallowRef<Model.OrderQuoteRsp[]>([])