xinyang5yuan-web/pages/list/[id].vue

<template>
    <div class="bg-[#ffffff]">
        <div class="box_6 flex-col">
            <div class="group_1">
                <div class="flex section_4 flex-row justify-between">
                    <img class="thumbnail_1" referrerpolicy="no-referrer" src="public/images/home.png" />
                    <span class="text_13">您的位置：首页>{{ id == '-3' ? '医生团队' : gory_name }}</span>
                </div>
                <div class="text_14">{{ id == '-3' ? '医生团队' : gory_name }}</div>
            </div>
        </div>
        <div class="flex box_7 flex-row align-center" v-for="(item, index) in newsList" :key="index"
            @click="goDetail(item)">
            <div class="flex block_3 flex-col"></div>
            <div class="flex image-text_7 flex-row justify-between">
                <img class="image_1" referrerpolicy="no-referrer" :src="item.news_image[0]" />
                <div class="flex group_13 flex-col justify-between">
                    <div class="flex text-group_7 flex-col justify-between">
                        <span class="text_15 text-ellipsis font-bold">
                            {{ item.news_title }}
                        </span>
                        <span class="text_16">
                            {{ item.news_titleshort }}
                        </span>
                    </div>
                    <img class="label_1" referrerpolicy="no-referrer" src="public/images/bs1.png" />
                </div>
            </div>
            <div class="block_4 flex-col">
                <div v-if="id != '-3'" class="flex text-wrapper_11 flex-col text-center">
                    <span class="text_17">{{ formattedMonth(item.showtime) }}</span>
                    <span class="text_18">{{ formattedYearMonth(item.showtime) }}</span>
                </div>
                <div v-if="id == '-3'" class="flex text-wrapper_11 flex-col text-center" style="justify-content: center">
                    <span style="font-size: 22px;color: #ffffff;">{{ item.news_titleshort }}</span>
                </div>
            </div>
        </div>
        <div class="text-gray-500 text-center h-[50px] mt-[30px]" v-if="newsList.length == 0">
            暂未找到内容...
        </div>
        <div class="flex flex-row justify-center py-5">
            <n-pagination v-model:page="page" :item-count="total" size="large" show-quick-jumper show-size-picker
                @update:page="getPageList">
            </n-pagination>
        </div>
    </div>
</template>

<script setup lang="ts">
import { NPagination } from 'naive-ui'
import { nextTick, ref } from 'vue'
import { useStore } from '~/store'
import $api from '@/service/webRequest'
const router = useRouter()
const route = useRoute()
const id = ref(route.params.id)
onMounted(() => {
    document.documentElement.style.fontSize = '16px';
    const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    if (coMobile) {
        router.push('/phone_list/' + id.value)
    } else {
        router.push('/list/' + id.value)
    }
    if (id.value == '-3') {
        getYsGroupList()
    } else {
        getGroupList()
    }
})

const newsList = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const gory_name = ref('');
const getGroupList = () => {
    $api.post("/api/news/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
        .then((res: any) => {
            console.log(res)
            newsList.value = res.data.data.list;
            total.value = res.data.data.total_count;
            gory_name.value = res.data.data.gory_name;
            //滚到页面最上面
            window.scrollTo(0, 0)
        })
        .catch((err) => {
            console.dir(err)
        })
}
const getPageList = (p) => {
    page.value = p;
    if (id.value == '-3') {
        getYsGroupList()
    } else {
        getGroupList()
    }
}


const getYsGroupList = () => {
    $api.post("/api/Newsbx/index", { gory_id: id.value, page: page.value, pageSize: pageSize.value })
        .then((res: any) => {
            console.log(res)
            newsList.value = res.data.data.list;
            total.value = res.data.data.total_count;
            gory_name.value = res.data.data.gory_name;
            //滚到页面最上面
            window.scrollTo(0, 0)
        })
        .catch((err) => {
            console.dir(err)
        })
}


const goDetail = (item: any) => {
    //router.push(`/info/${item.id}`)
    if (id.value == '-3') {
        window.open(`/ys_info/${item.id}`)
    } else {
        window.open(`/info/${item.id}`)
    }
}
// 计算D（补零）
const formattedMonth = (showtime) => {
    const date = new Date(showtime);
    var day = date.getDate().toString().padStart(2, "0");
    return day;
};

// 计算 "YYYY.MM" 格式 
const formattedYearMonth = (showtime) => {
    const date = new Date(showtime);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    return `${year}.${month}`;
};
</script>
<style scoped>
@import "@/assets/css/common.scss";
@import "@/assets/css/list.css";

::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
    color: #1FC4C2;
    border: 1px solid #1FC4C2;
}
</style>