fiee-official-website/src/views/press-releases/size1440/index.vue
2025-10-11 17:04:28 +08:00

810 lines
17 KiB
Vue

<template>
<div class="press-releases-page">
<main class="mx-auto">
<div class="title-section">
<div class="title-decoration"></div>
<div class="title">
{{ t("press_releases.title") }}
</div>
</div>
<div class="search-container">
<n-select
:options="state.selectOptions"
v-model:value="state.selectedValue"
class="search-select"
/>
<input
v-model="state.inputValue"
type="text"
:placeholder="t('press_releases.search.placeholder')"
class="search-input"
/>
<button @click="handleSearch" class="search-button">
{{ t("press_releases.search.button") }}
</button>
</div>
<div class="reports-list">
<div
v-for="(item, idx) in state.filterNewsData"
:key="idx"
class="news-item table-row"
>
<div class="content">
<div class="file-content">
<div class="file-info">
<div class="vertical-line"></div>
<div
class="news-item-title text-[#000] cursor-pointer"
style="
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
"
@click="handleNewClick(item)"
>
{{ item.title }}
</div>
<svg
class="arrow-icon"
width="7"
height="14"
viewBox="0 0 7 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@click="handleNewClick(item)"
>
<path
d="M1 1L6 7L1 13"
stroke="#FF7BAC"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<n-tooltip trigger="hover" :disabled="true" width="trigger">
<template #trigger>
<div
:ref="(el) => setTitleRef(el, idx)"
class="news-item-content file-description"
style="
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
"
>
{{ item.summary }}
</div>
</template>
<div slot="content">
{{ item.summary }}
</div>
</n-tooltip>
<div class="download-section">
<div class="news-item-date">{{ item.date }}</div>
</div>
</div>
</div>
<div class="separator-line"></div>
</div>
</div>
<!-- 分页器 -->
<div class="pagination-container" v-if="state.total > 0">
<div class="pagination-info">
Displaying {{ displayRange.start }} - {{ displayRange.end }} of
{{ state.total }} results
</div>
<div class="pagination-controls">
<div class="pagination-buttons">
<button
class="page-btn prev-btn"
:disabled="state.currentPage === 1"
@click="goToPrevPage"
>
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
<path
d="M4 1L1 4.5L4 8"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<template v-for="page in getVisiblePages()" :key="page">
<button
v-if="page !== '...'"
class="page-btn"
:class="{ active: page === state.currentPage }"
@click="goToPage(page)"
>
{{ page }}
</button>
<button v-else class="page-btn disabled" disabled>...</button>
</template>
<button
class="page-btn next-btn"
:disabled="state.currentPage === totalPages"
@click="goToNextPage"
>
<svg width="5" height="9" viewBox="0 0 5 9" fill="none">
<path
d="M1 1L4 5L1 8"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="page-size-selector" @click="togglePageSizeMenu">
<span>{{ state.pageSize }}/page</span>
<svg width="10" height="5" viewBox="0 0 10 5" fill="none">
<path
d="M1 1L5 4L9 1"
stroke="#455363"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div v-if="showPageSizeMenu" class="page-size-menu">
<div
v-for="size in [10, 20, 50]"
:key="size"
class="page-size-option"
:class="{ active: state.pageSize === size }"
@click="changePageSize(size)"
>
{{ size }}/page
</div>
</div>
</div>
<div class="goto-section">
<span>Goto</span>
<input
type="number"
v-model="state.gotoPage"
class="goto-input"
:min="1"
:max="totalPages"
@keyup.enter="handleGoto"
/>
</div>
</div>
</div>
</main>
</div>
</template>
<script setup>
import customDefaultPage from "@/components/customDefaultPage/index.vue";
import {
reactive,
onMounted,
watch,
nextTick,
ref,
computed,
onUnmounted,
} from "vue";
import { NSelect, NInput, NButton, NTooltip } from "naive-ui";
import { useI18n } from "vue-i18n";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const { t } = useI18n();
const state = reactive({
selectedValue: "all_years", //选中值
selectOptions: [
{
label: "All Years",
value: "all_years",
},
...Array.from({ length: 2025 - 1990 + 1 }, (_, i) => {
const year = 2025 - i;
return { label: String(year), value: String(year) };
}),
], //下拉选项
inputValue: "", //输入值
filterNewsData: [],
loading: false, //是否正在加载数据
currentPage: 1, //当前页码
pageSize: 10,
total: 0,
gotoPage: 1,
});
const showPageSizeMenu = ref(false);
const titleRefs = ref([]);
const setTitleRef = (el, idx) => {
if (el) titleRefs.value[idx] = el;
};
const checkAllTitleOverflow = () => {
state.filterNewsData.forEach((item, idx) => {
const el = titleRefs.value[idx];
if (!el) {
item.showTooltip = false;
return;
}
item.showTooltip =
el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
});
};
onMounted(() => {
getPressReleasesDisplay();
document.addEventListener("click", handleClickOutside);
nextTick(() => {
checkAllTitleOverflow();
});
});
onUnmounted(() => {
document.removeEventListener("click", handleClickOutside);
});
watch(
() => state.filterNewsData,
() => {
nextTick(() => {
checkAllTitleOverflow();
});
},
{ deep: true }
);
// 获取新闻列表
const getPressReleasesDisplay = () => {
state.loading = true;
let url = "https://erpapi.fiee.com/api/fiee/pressreleases/display";
let params = {
query: state.inputValue,
page: state.currentPage,
pageSize: state.pageSize,
timeStart: state.selectedValue
? state.selectedValue === "all_years"
? null
: new Date(state.selectedValue).getTime()
: null,
};
axios
.post(url, params)
.then((res) => {
if (res.status === 200) {
if (res.data.status === 0) {
res.data.data?.data?.forEach((item) => {
item.date = new Date(item.createdAt).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
});
state.filterNewsData = res.data.data?.data || [];
state.total = res.data.data?.total || 0;
}
}
})
.finally(() => {
state.loading = false;
});
};
// 添加 watcher 来实现自动筛选
watch(
() => [state.selectedValue, state.inputValue],
() => {
state.currentPage = 1;
getPressReleasesDisplay();
}
);
watch(
() => state.pageSize,
() => {
state.currentPage = 1;
getPressReleasesDisplay();
}
);
watch(
() => state.currentPage,
(newPage) => {
state.gotoPage = newPage;
getPressReleasesDisplay();
}
);
const handleSearch = () => {
state.currentPage = 1;
getPressReleasesDisplay();
};
const handleNewClick = (item) => {
router.push({
path: "/news",
query: {
id: item.id,
},
});
};
const totalPages = computed(() => {
return Math.ceil(state.total / state.pageSize) || 1;
});
const displayRange = computed(() => {
if (state.total === 0) return { start: 0, end: 0 };
const start = (state.currentPage - 1) * state.pageSize + 1;
const end = Math.min(state.currentPage * state.pageSize, state.total);
return { start, end };
});
const goToPage = (page) => {
if (page >= 1 && page <= totalPages.value) {
state.currentPage = page;
}
};
const goToPrevPage = () => {
if (state.currentPage > 1) {
state.currentPage--;
}
};
const goToNextPage = () => {
if (state.currentPage < totalPages.value) {
state.currentPage++;
}
};
const changePageSize = (size) => {
state.pageSize = size;
};
const handleGoto = () => {
const page = parseInt(state.gotoPage);
if (page >= 1 && page <= totalPages.value) {
state.currentPage = page;
}
};
const togglePageSizeMenu = () => {
showPageSizeMenu.value = !showPageSizeMenu.value;
};
const getVisiblePages = () => {
const current = state.currentPage;
const total = totalPages.value;
const pages = [];
if (total <= 7) {
for (let i = 1; i <= total; i++) {
pages.push(i);
}
} else {
pages.push(1);
if (current <= 4) {
for (let i = 2; i <= 5; i++) {
pages.push(i);
}
pages.push("...");
pages.push(total);
} else if (current >= total - 3) {
pages.push("...");
for (let i = total - 4; i <= total; i++) {
pages.push(i);
}
} else {
pages.push("...");
for (let i = current - 1; i <= current + 1; i++) {
pages.push(i);
}
pages.push("...");
pages.push(total);
}
}
return pages;
};
// 点击外部关闭页面大小选择菜单
const handleClickOutside = (event) => {
if (!event.target.closest || !event.target.closest(".page-size-selector")) {
showPageSizeMenu.value = false;
}
};
</script>
<style scoped lang="scss">
.press-releases-page {
width: 1240px;
margin: 0 auto;
}
.title-section {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0 16px;
margin-bottom: 40px;
}
.title-decoration {
width: 58px;
height: 7px;
background: #ff7bac;
margin: auto 0;
margin-top: 43px;
}
.title {
font-family: "PingFang SC";
font-size: 48px;
font-style: normal;
font-weight: 500;
line-height: 58px;
color: #000;
}
.search-container {
margin-bottom: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 16px;
padding: 0 16px;
}
.search-select {
width: 200px;
}
.search-input {
flex: 1;
height: 46px;
padding: 7px;
border: 1px solid #e0e0e6;
border-radius: 3px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.375em;
letter-spacing: 0.03em;
color: #455363;
&::placeholder {
color: #b6b6b6;
}
}
:deep(.n-input) {
.n-input__input {
padding: 4px 0;
// border: 1px solid #ccc;
border-radius: 4px;
}
}
:deep(.n-select) {
.n-select__input {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
}
:deep(.n-button) {
padding: 20px 16px;
border-radius: 4px;
}
.search-button {
height: 46px;
padding: 7px 12px;
min-width: 201px;
background: #ff7bac;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.375em;
letter-spacing: 0.03em;
&:hover {
background: #ff7bac;
color: #fff;
}
}
.reports-list {
display: flex;
flex-direction: column;
gap: 4px;
background: #fff;
}
.table-row {
display: flex;
flex-direction: column;
position: relative;
border-radius: 8px;
// &:last-child {
// .separator-line {
// display: none;
// }
// }
}
.content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.table-row .content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0;
padding: 24px 0;
}
.file-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
padding-right: 16px;
&:hover {
background: #fff8fb;
}
}
.file-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex: 1;
}
.news-item-title {
font-family: "PingFang SC", sans-serif;
font-weight: 500;
font-size: 20px;
line-height: 24px;
color: #000000;
}
.arrow-icon {
margin-left: auto;
flex-shrink: 0;
cursor: pointer;
}
.vertical-line {
width: 1px;
height: 20px;
background: #ff7bac;
flex-shrink: 0;
}
.file-description {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.375em;
letter-spacing: 0.03em;
color: #455363;
margin: 0;
padding: 0 21px;
margin-top: 4px;
}
.news-item-date {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 24px;
color: #455363;
}
.download-section {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 4px 16px;
}
.separator-line {
width: 100%;
height: 1px;
background: repeating-linear-gradient(
to right,
#e0e0e6 0px,
#e0e0e6 4px,
transparent 4px,
transparent 8px
);
margin-top: 0;
}
// 分页器样式
.pagination-container {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 20px;
margin-bottom: 30px;
gap: 21px;
}
.pagination-info {
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.4375em;
color: #455363;
text-align: right;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 8px;
}
.pagination-buttons {
display: flex;
align-items: center;
gap: 8px;
}
.page-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid #e0e0e6;
border-radius: 3px;
background: #ffffff;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.428em;
color: #455363;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
border-color: #ff7bac;
color: #ff7bac;
}
&.active {
border-color: #ff7bac;
color: #ff7bac;
background: #fff0f5;
}
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
&.disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
.page-size-selector {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 4px 12px;
height: 28px;
border: 1px solid #e0e0e6;
border-radius: 3px;
background: #ffffff;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.428em;
color: #455363;
cursor: pointer;
&:hover {
border-color: #ff7bac;
}
}
.page-size-menu {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e0e0e6;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
margin-bottom: 2px;
}
.page-size-option {
padding: 8px 12px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.428em;
color: #455363;
cursor: pointer;
transition: background-color 0.2s ease;
&:hover {
background: #fff0f5;
}
&.active {
background: #fff0f5;
color: #ff7bac;
}
}
.goto-section {
display: flex;
align-items: center;
gap: 8px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.428em;
color: #455363;
margin-right: 16px;
}
.goto-input {
width: 60px;
height: 28px;
padding: 4px 12px;
border: 1px solid #e0e0e6;
border-radius: 3px;
font-family: "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.428em;
color: #455363;
text-align: center;
&:focus {
outline: none;
border-color: #ff7bac;
}
}
</style>