THJ_Mobile/src/packages/mobile/views/market/spot/index.vue

<template>
    <app-view class="market-spot">
        <template #header>
            <app-navbar title="现货行情" />
        </template>
        <Tabs @change="onTabChange" v-model:active="active">
            <template v-for="(item, index) in tabList" :key="index">
                <Tab :name="item.spotname" :title="item.spotname" />
            </template>
        </Tabs>
        <template v-if="dataList.length">
            <app-list :columns="columns" :data-list="dataList" :showHeader="false" @click="onRowClick">
                <template #spotprice="{ value }">
                    <span class="text-red">{{ value }}元/吨</span>
                </template>
                <template #spotqty="{ value }">
                    <span class="text-red">{{ value }}吨</span>
                </template>
            </app-list>
        </template>
        <Empty v-else />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Tab, Tabs, Empty } from 'vant'
import { useNavigation } from '@/hooks/navigation'
import { useRequest } from '@/hooks/request'
import { queryThjSpotQuote, queryThjSpotQuoteConfig } from '@/services/api/market'
import AppList from '@mobile/components/base/list/index.vue'

const { router } = useNavigation()
const active = shallowRef(0)

const { dataList, run } = useRequest(queryThjSpotQuoteConfig, {
    manual: true
})

const { dataList: tabList } = useRequest(queryThjSpotQuote, {
    onSuccess: (res) => {
        if (res.data) {
            run({ spotname: res.data[0].spotname })
        }
    }
})

const columns: Model.TableColumn[] = [
    { prop: 'spotmonth', label: '月份' },
    { prop: 'spotsrc', label: '来源' },
    { prop: 'spotprice', label: '价格' },
    { prop: 'spotqty', label: '数量' },
]

const onTabChange = (spotname: string) => {
    run({ spotname })
}

const onRowClick = (row: Model.ThjSpotQuoteConfigRsp) => {
    if (row.relatedid) {
        router.push({ name: 'news-details', query: { id: row.relatedid } })
    }
}
</script>

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