THJ_Mobile/src/packages/mobile/views/home/components/main/index.vue

<template>
  <app-view class="home-main" flex>
    <template #header>
      <app-navbar title="铁合金掌上行" :show-back-button="false" />
    </template>
    <div class="home-main__banner home-main__banner--header">
      <Swipe :autoplay="3000" indicator-color="white" lazy-render>
        <SwipeItem v-for="(item, index) in topBanners" :key="index">
          <img :src="getImageUrl(item.imagepath)" />
        </SwipeItem>
      </Swipe>
    </div>
    <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
      <div class="home-main__iconbar">
        <ul>
          <li @click="routerTo('product')">
            <app-iconfont icon="icon-chanpinjieshao" label-direction="bottom">产品介绍</app-iconfont>
          </li>
          <li @click="routerTo('contract')">
            <app-iconfont icon="icon-chanpinjiage" label-direction="bottom">合同转让</app-iconfont>
          </li>
          <li @click="routerTo('rules-ptgz')">
            <app-iconfont icon="icon-pingtaiguize" label-direction="bottom">平台规则</app-iconfont>
          </li>
        </ul>
        <ul>
          <li @click="routerTo('credit-signin')">
            <app-iconfont icon="icon-woderenwu" label-direction="bottom">我的任务</app-iconfont>
          </li>
          <li @click="routerTo('rules-myrz')">
            <app-iconfont icon="icon-maoyirongzi" label-direction="bottom">贸易融资</app-iconfont>
          </li>
          <li @click="routerTo('rules-ccwl')">
            <app-iconfont icon="icon-a-bianzu12" label-direction="bottom">仓储物流</app-iconfont>
          </li>
        </ul>
      </div>
      <div class="home-main__market" v-if="false">
        <div class="left">
          <h2>合金指数</h2>
          <span>{{ formatDate(marketRun.tradedate, "YYYY-MM-DD") }}</span>
        </div>
        <div class="right">
          <table cellspacing="0" cellpadding="0">
            <tbody>
              <tr v-for="(item, index) in dataList" :key="index">
                <td>{{ item.wrstandardname }}</td>
                <td>{{ item.prespotgoodsprice }}</td>
                <td>{{ item.todayspotgoodsprice }}</td>
                <td>{{ item.chg }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="home-main__banner home-main__banner--body">
        <Swipe :autoplay="3000" indicator-color="white" lazy-render>
          <SwipeItem v-for="(item, index) in bodyBanners" :key="index">
            <img :src="getImageUrl(item.imagepath)" />
          </SwipeItem>
        </Swipe>
      </div>
      <div class="home-main__news">
        <Cell class="titlebar" title-class="titlebar-title" value-class="titlebar-more" title="市场资讯" value="更多资讯"
          :to="{ name: 'news-list' }" is-link />
        <CellGroup class="article">
          <template v-for="(item, index) in newsList" :key="index">
            <Cell class="article-item" title-class="article-item__title" value-class="article-item__time"
              :title="item.title" :value="formatDate(item.creaedate, 'MM/DD')"
              :to="{ name: 'news-details', params: { details: JSON.stringify(item) } }" />
          </template>
        </CellGroup>
      </div>
    </PullRefresh>
  </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Cell, CellGroup, Swipe, SwipeItem, PullRefresh } from 'vant'
import { getImageUrl, formatDate } from '@/filters'
import { useNavigation } from '@/hooks/navigation'
import { queryImageConfigs } from '@/services/api/common'
import { querySiteColumnDetail } from '@/services/api/news'
import { useQuerySpotGoodsPriceLists } from '@/business/goods'
import { queryMarketRun } from '@/services/api/goods'
import AppIconfont from '@mobile/components/base/iconfont/index.vue'

const { routerTo } = useNavigation()
const refreshing = shallowRef(false) // 是否处于加载中状态
const topBanners = shallowRef<Model.ImageConfigsRsp[]>([])   // 轮播图列表
const bodyBanners = shallowRef<Model.ImageConfigsRsp[]>([])  // 轮播图列表
const newsList = shallowRef<Model.SiteColumnDetailRsp[]>([]) // 资讯列表
const marketRun = shallowRef<Partial<Model.MarketRunRsp>>({})         // 市场

const { dataList, getQuerySpotGoodsPriceLists } = useQuerySpotGoodsPriceLists()
getQuerySpotGoodsPriceLists()

// 下拉刷新
const onRefresh = () => {
  querySiteColumnDetail({
    data: {
      page: 1,
      pagesize: 10,
    },
    success: (res) => {
      newsList.value = res.data
    },
    complete: () => {
      refreshing.value = false
    }
  })
}

queryImageConfigs({
  data: {
    imageType: 1
  },
  success: (res) => {
    topBanners.value = res.data
  }
})

queryImageConfigs({
  data: {
    imageType: 10
  },
  success: (res) => {
    bodyBanners.value = res.data
  }
})

queryMarketRun({
  success: (res) => {
    marketRun.value = res.data[0]
  }
})

onRefresh()
</script>

<style lang="less">
@import './index.less';
</style>