update

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

@@ -30,16 +30,22 @@ const props = defineProps({
 })
 
 const warterfallRef = shallowRef<HTMLDivElement>()
-const total = shallowRef(0)
-const hightList: number[] = [] //瀑布流高度列表
+
+const state: { total: number; hightList: number[]; } = {
+    total: 0,
+    hightList: [] //瀑布流高度列表
+}
 
 const render = () => {
+    state.total = 0
+    state.hightList = []
+
     nextTick(async () => {
         const el = warterfallRef.value
         if (el) {
             const nodes = el.querySelectorAll('li')
 
-            for (let i = total.value; i < nodes.length; i++) {
+            for (let i = state.total; i < nodes.length; i++) {
                 const li = nodes[i]
                 const images = li.querySelectorAll('img')
 
@@ -75,19 +81,19 @@ const render = () => {
                 if (i < props.column) {
                     li.style.top = '0'
                     li.style.left = (width * i) + (props.gap * i) + 'px'
-                    hightList.push(li.offsetHeight + props.gap)
+                    state.hightList.push(li.offsetHeight + props.gap)
                 } else {
-                    const minHeight = Math.min(...hightList) // 获取数组中最小值
-                    const index = hightList.findIndex((e) => e === minHeight) // 最小值的索引位置
+                    const minHeight = Math.min(...state.hightList) // 获取数组中最小值
+                    const index = state.hightList.findIndex((e) => e === minHeight) // 最小值的索引位置
                     li.style.top = minHeight + 'px'
                     li.style.left = (width * index) + (props.gap * index) + 'px'
-                    hightList[index] += li.offsetHeight + props.gap
+                    state.hightList[index] += li.offsetHeight + props.gap
                 }
 
-                total.value++
+                state.total++
             }
 
-            const maxHeight = Math.max(...hightList); // 获取数组中最大值
+            const maxHeight = Math.max(...state.hightList); // 获取数组中最大值
             el.style.height = (maxHeight - props.gap) + 'px'
         }
     })
@@ -95,15 +101,15 @@ const render = () => {
 
 watch(() => props.dataList, () => render())
 
-onActivated(() => {
-    // 对未完成加载的数据进行渲染
-    if (props.dataList.length > total.value) {
-        render()
-    }
-})
-
 onMounted(() => {
     render()
+
+    onActivated(() => {
+        // 对未完成加载的数据进行渲染
+        if (props.dataList.length > state.total) {
+            render()
+        }
+    })
 })
 </script>
 

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

@@ -243,6 +243,7 @@
             justify-content: center;
             align-items: center;
             min-height: 120px;
+            max-height: 200px;
             font-size: 0;
             border-radius: 8px;
             border-bottom-left-radius: 0;

src/packages/tss/router/index.ts

@@ -50,7 +50,7 @@ const routes: Array<RouteRecordRaw> = [
           {
             path: 'group',
             name: 'home-group',
-            component: () => import('../views/group/index.vue'),
+            component: () => import('../views/product/group/index.vue'),
           },
           ...homeRoutes
         ]
@@ -58,6 +58,17 @@ const routes: Array<RouteRecordRaw> = [
     ]
   },
   {
+    path: '/product',
+    component: Page,
+    children: [
+      {
+        path: 'list',
+        name: 'product-list',
+        component: () => import('../views/product/list/index.vue'),
+      }
+    ]
+  },
+  {
     path: '/search',
     component: Page,
     children: [

src/packages/tss/views/home/main/index.vue

@@ -33,28 +33,29 @@
           </template>
         </CellGroup>
       </app-block>
-      <app-block class="home-main__group" v-if="loginStore.token">
-        <GroupList :market-id="53201" />
-      </app-block>
+      <ProductList :data-list="goodsList" v-if="loginStore.token" />
     </PullRefresh>
   </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue'
+import { shallowRef, onMounted, onActivated } from 'vue'
 import { Cell, CellGroup, PullRefresh, Badge, Search } from 'vant'
 import { formatDate } from '@/filters'
 import { queryImageConfigs } from '@/services/api/common'
 import { queryNewTitles } from '@/services/api/news'
-import { useLoginStore, useNoticeStore, useGlobalStore } from '@/stores'
+import { useLoginStore, useNoticeStore, useGlobalStore, useFuturesStore } from '@/stores'
 import Banner from '@mobile/components/base/banner/index.vue'
-import GroupList from '../../group/list/index.vue'
+import ProductList from '../../product/list/components/waterfall-list/index.vue'
 
 const noticeStore = useNoticeStore()
 const loginStore = useLoginStore()
 const globalStore = useGlobalStore()
+const futuresStore = useFuturesStore()
+
 const refreshing = shallowRef(false) // 是否处于加载中状态
 const topBanners = shallowRef<string[]>([]); // 轮播图列表
+const goodsList = shallowRef<Model.GoodsQuote[]>([])
 const newsList = shallowRef<Model.NewTitlesRsp[]>([]) // 资讯列表
 
 // 下拉刷新
@@ -81,7 +82,19 @@ const onRefresh = () => {
   })
 }
 
-onRefresh()
+const getGoodsList = () => {
+  const list = futuresStore.quotationList.filter((e) => e.marketid === 53201)
+  goodsList.value = list.map((e) => ({ ...e }))
+}
+
+futuresStore.onDataCompleted(() => {
+  getGoodsList()
+})
+
+onMounted(() => {
+  onRefresh()
+  onActivated(() => getGoodsList())
+})
 </script>
 
 <style lang="less">

src/packages/tss/views/group/list/index.vue → src/packages/tss/views/product/group/components/waterfall-list/index.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="app-group">
+    <div class="app-group" v-if="goodsGroups.length">
         <h4 class="app-group__title" v-if="title">{{ title }}</h4>
         <Waterfall class="g-goods-waterfall" :data-list="goodsGroups">
             <template #default="{ item }">
                 <div class="goods"
-                    @click="$router.push({ name: 'pricing-list', query: { groupId: item.goodsgroupid } })">
+                    @click="$router.push({ name: 'product-list', query: { groupId: item.goodsgroupid } })">
                     <div class="goods-image">
                         <img :src="item.thumurls" />
                     </div>

src/packages/tss/views/group/index.vue → src/packages/tss/views/product/group/index.vue

@@ -8,14 +8,14 @@
                 </template>
             </app-navbar>
         </template>
-        <GroupList :market-id="10101" title="全款" />
+        <GroupList :market-id="53201" title="全款" />
         <GroupList :market-id="10101" title="预付款" />
     </app-view>
 </template>
 
 <script lang="ts" setup>
 import { Search } from 'vant'
-import GroupList from './list/index.vue'
+import GroupList from './components/waterfall-list/index.vue'
 
 defineProps({
     showBackButton: {

src/packages/tss/views/product/list/components/waterfall-list/index.vue

@@ -0,0 +1,46 @@
+<template>
+    <Waterfall class="g-goods-waterfall" :data-list="dataList">
+        <template #default="{ item }">
+            <div class="goods" @click="rowClick(item)">
+                <div class="goods-image">
+                    <img :src="getFileUrl(item.pictureurl)" />
+                </div>
+                <div class="goods-info">
+                    <div class="goods-info__title">{{ item.goodscode }}</div>
+                    <div class="goods-info__price">
+                        <span :class="['integer', item.askColor]">{{ item.ask }}</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </Waterfall>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { getFileUrl } from '@/filters'
+import { useNavigation } from '@mobile/router/navigation'
+import { BuyOrSell, BuildType } from '@/constants/order'
+import Waterfall from '@mobile/components/base/waterfall/index.vue'
+
+defineProps({
+    dataList: {
+        type: Array as PropType<Model.GoodsQuote[]>,
+        required: true
+    }
+})
+
+const { router } = useNavigation()
+
+const rowClick = (row: Model.GoodsQuote) => {
+    router.push({
+        name: 'pricing-trade',
+        query: {
+            goodsid: row.goodsid,
+            goodscode: row.goodscode,
+            buyOrSell: BuyOrSell.Buy,
+            buildType: BuildType.Open
+        }
+    })
+}
+</script>

src/packages/tss/views/product/list/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <app-view>
+        <template #header>
+            <app-navbar :title="groupInfo ? groupInfo.goodsgroupname : $t('home.pricing')" />
+        </template>
+        <ProductList :data-list="dataList" v-if="dataList.length" />
+        <Empty description="暂无数据" v-else />
+    </app-view>
+</template>
+
+<script lang="ts" setup>
+import { shallowRef, computed, onActivated } from 'vue'
+import { Empty } from 'vant'
+import { useNavigation } from '@mobile/router/navigation'
+import { useUserStore, useFuturesStore } from '@/stores'
+import ProductList from './components/waterfall-list/index.vue'
+
+const { getQueryStringToNumber } = useNavigation()
+const groupId = getQueryStringToNumber('groupId')
+const futuresStore = useFuturesStore()
+const userStore = useUserStore()
+
+const dataList = shallowRef<Model.GoodsQuote[]>([])
+
+const groupInfo = computed(() => {
+    const list = userStore.getUserDataInfo('goodsgroups')
+    return list.find((e) => e.goodsgroupid === groupId)
+})
+
+onActivated(() => {
+    const list = futuresStore.quotationList.filter((e) => e.goodsgroupid === groupId)
+    dataList.value = list.map((e) => ({ ...e }))
+})
+</script>

src/packages/tss/views/search/index.vue

@@ -5,21 +5,7 @@
                 <Search v-model="keyword" shape="round" background="transparent" placeholder="请输入搜索关键词" autofocus
                     @search="onSearch" />
             </app-navbar>
-            <Waterfall class="g-goods-waterfall" :data-list="searchList" v-if="searchList.length">
-                <template #default="{ item }">
-                    <div class="goods">
-                        <div class="goods-image">
-                            <img :src="getFileUrl(item.pictureurl)" />
-                        </div>
-                        <div class="goods-info">
-                            <div class="goods-info__title">{{ item.goodscode }}</div>
-                            <div class="goods-info__price">
-                                <span class="integer">{{ item.ask }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </Waterfall>
+            <ProductList :data-list="searchList" v-if="searchList.length" />
             <Empty description="暂无结果" v-else />
         </template>
     </app-view>
@@ -28,9 +14,8 @@
 <script lang="ts" setup>
 import { shallowRef } from 'vue'
 import { Search, Empty } from 'vant'
-import { getFileUrl } from '@/filters'
 import { useFuturesStore } from '@/stores'
-import Waterfall from '@mobile/components/base/waterfall/index.vue'
+import ProductList from '../product/list/components/waterfall-list/index.vue'
 
 const futuresStore = useFuturesStore()
 const keyword = shallowRef('')
@@ -39,7 +24,8 @@ const searchList = shallowRef<Model.GoodsQuote[]>([])
 
 const onSearch = () => {
     if (keyword.value) {
-        searchList.value = futuresStore.quotationList.filter((e) => [53201, 10101].includes(e.marketid) && e.goodscode.toLowerCase().includes(keyword.value.toLowerCase()))
+        const result = futuresStore.quotationList.filter((e) => [53201, 10101].includes(e.marketid) && e.goodscode.toLowerCase().includes(keyword.value.toLowerCase()))
+        searchList.value = result.map((e) => ({ ...e }))
     } else {
         searchList.value = []
     }

vue.config.js

@@ -63,6 +63,8 @@ module.exports = defineConfig({
   configureWebpack: (config) => {
     const oem = process.env.VUE_APP_OEM
 
+    config.devtool = 'source-map'
+
     // const manifestPath = oem ? convertPath(oem + 'manifest.json') : convertPath('public/manifest.json')
     // const manifestContents = fs.readFileSync(manifestPath, 'utf-8')
     // const manifest = JSON.parse(manifestContents)