MTP20_WEB_GLOBAL/src/packages/sbyj/views/home/main/index.vue

<template>
  <app-view class="home-main">
    <template #header>
      <app-navbar :show-back-button="false">
        <div class="home-main__title">
          <span>{{ globalStore.getSystemInfo('appName') }}</span>
          <span>订单管理系统</span>
        </div>
      </app-navbar>
    </template>
    <div class="home-main__banner">
      <Banner :data-list="topBanners" />
    </div>
    <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__iconbar bg">
        <ul>
          <li @click="routerTo('home-market', true)">
            <Iconfont label-direction="bottom" icon="g-icon-quote--line">行情</Iconfont>
          </li>
          <li @click="routerTo('order-list')">
            <Iconfont label-direction="bottom" icon="g-icon-order--line">持有订单</Iconfont>
          </li>
          <li @click="routerTo('delivery-list')">
            <Iconfont label-direction="bottom" icon="g-icon-delivery--line">交料订单</Iconfont>
          </li>
          <li @click="routerTo('pickup-list')">
            <Iconfont label-direction="bottom" icon="g-icon-pickup--line">提料订单</Iconfont>
          </li>
        </ul>
      </app-block>
      <app-block class="home-main__news">
        <CellGroup class="article">
          <Cell class="home-main__titlebar" title="市场资讯" value="更多" icon="fire" @click="routerTo('home-news', true)"
            is-link />
          <template v-for="(item, index) in newsList" :key="index">
            <Cell class="article-item" :title="item.data.content" :value="formatDate(item.time, 'MM/DD')"
              @click="routerTo('home-news', true)" />
          </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 { useNavigation } from '@mobile/router/navigation';
import { queryImageConfigs, getJ10News } from "@/services/api/common";
import { useGlobalStore } from '@/stores'
import Banner from '@mobile/components/base/banner/index.vue'
import Iconfont from '@/components/base/iconfont/index.vue'

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

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

onRefresh()
</script>

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