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

<template>
  <app-scroll-view class="home-main">
    <template #afterHeader>
      <app-navbar title="铁合金掌上行" :show-back-button="false" />
    </template>
    <app-statusbar class="home-main__header">
      <div class="home-main__banner home-main__banner--header">
        <Swipe :autoplay="5000" indicator-color="white" lazy-render>
          <SwipeItem v-for="(item, index) in topBanners" :key="index">
            <img :src="getFileUrl(item.imagepath)" />
          </SwipeItem>
        </Swipe>
      </div>
    </app-statusbar>
    <PullRefresh class="home-main__container" v-model="refreshing" @refresh="onRefresh">
      <app-block class="home-main__iconbar bg">
        <ul>
          <li @click="routerTo('product')">
            <img src="@mobile/assets/icons/cpjs.svg" />
            <span>产品介绍</span>
          </li>
          <li @click="routerTo('Market')">
            <img src="@mobile/assets/icons/cpjg.svg" />
            <span>产品价格</span>
          </li>
          <li @click="routerTo('NavigationPTGZ')">
            <img src="@mobile/assets/icons/ptgz.svg" />
            <span>平台规则</span>
          </li>
        </ul>
        <ul>
          <li @click="routerTo('credit-signin')">
            <img src="@mobile/assets/icons/wdrw.svg" />
            <span>我的任务</span>
          </li>
          <li @click="routerTo('contract')">
            <img src="@mobile/assets/icons/htzr.svg" />
            <span>合同转让</span>
          </li>
          <li @click="routerTo('rules-ccwl')">
            <img src="@mobile/assets/icons/ccwl.svg" />
            <span>仓储物流</span>
          </li>
        </ul>
      </app-block>
      <app-block class="home-main__market" v-if="spotQuoteList.length">
        <Cell class="home-main__titlebar" value="更多" :to="{ name: 'MarketSpot' }" is-link>
          <template #title>
            <img src="@mobile/assets/icons/spot.png" />
            <span>现货行情</span>
            <span>({{ currentSpotQuote.spotmonth }})</span>
          </template>
        </Cell>
        <section class="scrollbar">
          <Swipe :autoplay="8000" :show-indicators="false" :touchable="false" vertical @change="onSpotChange">
            <SwipeItem v-for="(item, i) in spotQuoteList" :key="i">
              <ul @click="openNewsDetails(item.relatedid)">
                <li>
                  <span>{{ item.spotsrc }}</span>
                </li>
                <li>
                  <span>{{ item.spotname }}招标价 </span>
                  <span class="g-color--up">{{ item.spotprice }}元/吨</span>
                </li>
                <li>
                  <span>采购量 </span>
                  <span class="g-color--up">{{ item.spotqty }}吨</span>
                </li>
              </ul>
            </SwipeItem>
          </Swipe>
        </section>
      </app-block>
      <app-block v-if="false">
        <section class="scrollbar">
          <h4 class="scrollbar-title">
            <img src="@mobile/assets/icons/futures.png" />
            <span>期货行情</span>
          </h4>
          <Swipe :autoplay="8000" :show-indicators="false" :touchable="false" vertical>
            <SwipeItem
              v-for="({ goodsname, last, lasttime, presettle, change, amplitude, holdvolume, lastvolume, decimalplace }, i) in dataList"
              :key="i">
              <ul>
                <li>{{ goodsname }}</li>
                <li style="color:#999">{{ formatDate(lasttime, 'HH:mm') }}</li>
                <li :class="handlePriceColor(last, presettle)">{{ handleNumberValue(formatDecimal(last, decimalplace))
                }}
                </li>
                <li :class="handlePriceColor(last, presettle)">{{ handleNumberValue(formatDecimal(change, decimalplace))
                }}</li>
                <li :class="handlePriceColor(last, presettle)">{{ parsePercent(amplitude) }}</li>
                <li :class="handlePriceColor(last, presettle)">{{ changeUnit(lastvolume) }}</li>
                <li :class="handlePriceColor(last, presettle)">{{ changeUnit(holdvolume) }}</li>
              </ul>
            </SwipeItem>
          </Swipe>
        </section>
      </app-block>
      <app-block class="home-main__banner home-main__banner--body" v-if="false">
        <Swipe :autoplay="5000" indicator-color="white" lazy-render>
          <SwipeItem v-for="(item, index) in bodyBanners" :key="index">
            <img :src="getFileUrl(item.imagepath)" />
          </SwipeItem>
        </Swipe>
      </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="@mobile/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-details', query: { id: item.id } }" />
          </template>
        </CellGroup>
      </app-block>
    </PullRefresh>
  </app-scroll-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed } from "vue";
import { Cell, CellGroup, Swipe, SwipeItem, PullRefresh } from "vant";
import { formatDecimal, getFileUrl, formatDate, handlePriceColor, parsePercent, handleNumberValue, changeUnit } from "@/filters";
import { useNavigation } from "@/hooks/navigation";
import { queryImageConfigs } from "@/services/api/common";
import { queryNewTitles } from "@/services/api/news";
import { useFuturesList } from "@/business/market";
import { queryMarketRun } from "@/services/api/goods";
import { queryThjSpotQuoteConfig } from "@/services/api/market";

const { router, routerTo } = useNavigation();
const { dataList } = useFuturesList();
const refreshing = shallowRef(false); // 是否处于加载中状态
const topBanners = shallowRef<Model.ImageConfigsRsp[]>([]); // 轮播图列表
const bodyBanners = shallowRef<Model.ImageConfigsRsp[]>([]); // 轮播图列表
const newsList = shallowRef<Model.NewTitlesRsp[]>([]); // 资讯列表
const spotQuoteList = shallowRef<Model.ThjSpotQuoteConfigRsp[]>([]); // 现货行情
const spotQuoteIndex = shallowRef(0) // 当前现货行情索引
const marketRun = shallowRef<Partial<Model.MarketRunRsp>>({}); // 市场

// 当前现货行情
const currentSpotQuote = computed(() => spotQuoteList.value[spotQuoteIndex.value])

// 打开新闻详情
const openNewsDetails = (id: number) => {
  if (id) {
    router.push({ name: 'news-details', query: { id } })
  }
}

// 现货行情轮播变化
const onSpotChange = (index: number) => {
  spotQuoteIndex.value = index
}

// 下拉刷新
const onRefresh = () => {
  if (!topBanners.value.length) {
    queryImageConfigs({
      imageType: 1,
    }).then((res) => {
      topBanners.value = res.data
    })
  }
  // if (!bodyBanners.value.length) {
  //   queryImageConfigs({
  //     imageType: 10,
  //   }).then((res) => {
  //     bodyBanners.value = res.data
  //   })
  // }
  // 现货行情
  queryThjSpotQuoteConfig().then((res) => {
    spotQuoteList.value = res.data
  })
  // 市场资讯
  queryNewTitles({
    page: 1,
    pagesize: 10,
  }).then((res) => {
    newsList.value = res.data
  }).finally(() => {
    refreshing.value = false
  })
}

// 市场信息
queryMarketRun().then((res) => {
  marketRun.value = res.data[0]
})

onRefresh()
</script>

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