MTP20_WEB_GLOBAL/src/packages/qdhs/views/home/main/Index.vue

<template>
  <app-view class="home-main">
    <template #header>
      <app-navbar :title="globalStore.getSystemInfo('appName')" :show-back-button="false" />
    </template>
    <Banner :data-list="topBanners" />
    <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
      <app-block>
        <Cell title="通知公告" value="更多" :to="{ name: 'notice-list' }" icon="volume" is-link />
      </app-block>
      <app-block class="home-main__news">
        <CellGroup class="article">
          <Cell class="home-main__titlebar" title="市场资讯" value="更多" icon="fire" :to="{ name: 'news-list' }" is-link />
          <template v-for="(item, index) in newsList" :key="index">
            <Cell class="article-item" :title="item.title" :value="formatDate(item.publishdate, 'MM/DD')"
              :to="{ name: 'news-detail', query: { id: item.id } }" />
          </template>
        </CellGroup>
      </app-block>
    </PullRefresh>
  </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from "vue";
import { Cell, CellGroup, PullRefresh } from "vant";
import { formatDate } from "@/filters";
import { queryImageConfigs } from "@/services/api/common";
import { queryNewTitles } from "@/services/api/news";
import {  useGlobalStore } from '@/stores'
import Banner from '@mobile/components/base/banner/index.vue'

const globalStore = useGlobalStore()
const refreshing = shallowRef(false); // 是否处于加载中状态
const topBanners = shallowRef<string[]>([]); // 轮播图列表
const newsList = shallowRef<Model.NewTitlesRsp[]>([]); // 资讯列表

// 下拉刷新
const onRefresh = () => {
  if (!topBanners.value.length) {
    queryImageConfigs({
      data: {
        imageType: 1,
      }
    }).then((res) => {
      topBanners.value = res.data.map((e) => e.imagepath)
    })
  }
  // 市场资讯
  queryNewTitles({
    data: {
      page: 1,
      pagesize: 10,
    }
  }).then((res) => {
    newsList.value = res.data
  }).finally(() => {
    refreshing.value = false
  })
}

onRefresh()
</script>

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