gypsy-crm-frontend-vu/pages/analytics/news.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="container">
            <view
                class="app-page-head card-header d-flex gap-3 flex-wrap align-items-center justify-content-between border-0">
                <view class="app-page-head mb-0">
                    <h1 class="app-page-title" v-t="'News.NewsInformation'"></h1>
                </view>
            </view>
            <view class="col-row">
                <!-- <view class="col-xl-12">
                    <view class="card">

                        <view class="card-body">
                            <h6 class="card-title mb-3">Popular Tags </h6>
                            <view class="d-flex flex-wrap gap-2">
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#NZD/USD</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#EUR/USD</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#XAU/USD</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#USOIL</a>
                                <a href="javascript:void(0);" class="badge bg-secondary-subtle text-secondary">#US30</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#UK100</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#ADA/USD</a>
                                <a href="javascript:void(0);"
                                    class="badge bg-secondary-subtle text-secondary">#ZEC/USD</a>
                            </view>
                        </view>
                    </view>
                </view> -->
                <view class="card">
                    <view class="card-header">
                        <view class="nav nav-underline card-header-tabs" id="myTab" role="tablist">
                            <view class="nav-item" v-for="item in tabsConfig" :key="item">
                                <view class="nav-link cursor-pointer" @click="activeTab = item.value"
                                    :class="{ 'active': item.value == activeTab }">{{
                                        item.text }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="card-body">
                        <List ref="newsList" :fetchData="fetchNewsList" :queryParams="queryParams" :type="type" />
                    </view>
                </view>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n' // uni-app 中已集成，但需配置
import { newsApi } from '@/service/news'
import List from './components/List.vue'
const { t, locale } = useI18n()
const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))
const newsList = ref(null)
const fetchNewsList = ref(null)
const queryParams = ref({
    tag: 3,
    endDate: "",
    startDate: "",
    id: null
})
const activeTab = ref(1)
const tabsConfig = computed(() => [
    { text: t('News.ExpertAnalysis'), value: 1, type: 5 },
    { text: t('News.Ebook'), value: 2, type: 10 },
])
onReachBottom(() => {
    newsList.value?.loadMore()
})
const type = ref(0)
watch(activeTab, (val) => {
    if (val == 1) {
        fetchNewsList.value = newsApi.newsInformationNewsletterList
        queryParams.value = {
            tag: 3,
            endDate: '',
            startDate: '',
            id: null, pageSize: 9
        }
    } else {
        fetchNewsList.value = newsApi.newsEbookList
        queryParams.value = {
            tag: null,
            endDate: '',
            startDate: '',
            id: null, pageSize: 12
        }
    }
    type.value = tabsConfig.value.find(item => item.value == val).type
    nextTick(() => {
        newsList.value.load()
    })
}, { immediate: true })
</script>
<style lang="scss" scoped>
@import "@/uni.scss";
</style>