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

<template>
  <app-view class="home-main">
    <template #header>
      <app-navbar :title="globalStore.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__iconbar bg">
        <ul>
          <li @click="routerTo('presale-list')">
            <Iconfont label-direction="bottom" icon="icon-yushoujingpai">预售竞拍</Iconfont>
          </li>
          <li @click="routerTo('forward-list')">
            <Iconfont label-direction="bottom" icon="icon-dingjinzhuanrang">中远期挂牌</Iconfont>
          </li>
          <li @click="routerTo('fullpayment-list')">
            <Iconfont label-direction="bottom" icon="icon-a-zu771">全款挂牌</Iconfont>
          </li>
          <!-- <li @click="switchTab(1)">
            <Iconfont label-direction="bottom" icon="icon-zhongqian">预售中签</Iconfont>
          </li> -->
          <!-- <li @click="switchTab(2)">
            <Iconfont label-direction="bottom" icon="icon-dingjinzhuanrang">定金转让</Iconfont>
          </li> -->
          <li @click="routerTo('swap-list')">
            <Iconfont label-direction="bottom" icon="icon-diaoqimaoyi">掉期贸易</Iconfont>
          </li>
        </ul>
        <ul>
          <!-- <li @click="switchTab(3)">
            <Iconfont label-direction="bottom" icon="icon-a-zu771">订单挂牌</Iconfont>
          </li> -->
          <li @click="routerTo('pricing-list')">
            <Iconfont label-direction="bottom" icon="icon-guapaidianjia">挂牌点价</Iconfont>
          </li>
          <li @click="routerTo('spot-list')">
            <Iconfont label-direction="bottom" icon="icon-xianhuomaoyi">现货贸易</Iconfont>
          </li>
          <li @click="routerTo('market-list')">
            <Iconfont label-direction="bottom" icon="icon-cankaohangqing">参考行情</Iconfont>
          </li>
        </ul>
      </app-block>
      <app-block class="home-main__news">
        <CellGroup class="article">
          <Cell class="home-main__titlebar" value="更多" :to="{ name: 'news-list' }" is-link>
            <template #title>
              <img src="../../../assets/icons/fire.png" />
              <span>市场资讯</span>
            </template>
          </Cell>
          <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 { useNavigation } from '@mobile/router/navigation';
import { queryImageConfigs } from "@/services/api/common";
import { queryNewTitles } from "@/services/api/news";
import { useLoginStore, useGlobalStore } from '@/stores'
import Banner from '@mobile/components/base/banner/index.vue'
import Iconfont from '@mobile/components/base/iconfont/index.vue'

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

// 跳转导航页面
const switchTab = (tabIndex: number) => {
  if (loginStore.token) {
    setGlobalUrlParams({ tabIndex })
    switch (tabIndex) {
      case 1:
        routerTo('home-ballot', true)
        break
      case 2:
        routerTo('home-transfer', true)
        break
      case 3:
        routerTo('home-goods', true)
        break
    }
  } else {
    routerTo('user-login')
  }
}

// 下拉刷新
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>