167 lines
5.3 KiB
Vue
167 lines
5.3 KiB
Vue
<template>
|
||
<Head>
|
||
<Title>{{ tdkNewType }}{{ tdk.tdk_title }}</Title>
|
||
<Meta :content=tdk.tdk_keyword name="keywords" />
|
||
<Meta :content=tdk.tdk_description name="description" />
|
||
</Head>
|
||
<Header></Header>
|
||
<Poster :type=1></Poster>
|
||
|
||
<div class="background_box">
|
||
|
||
<!-- 新闻类型 -->
|
||
<div class="news-titile-pos-box">
|
||
<div class="news-title-box" v-for="(item, index) in newsTypeList" :key="index">
|
||
<div :class="active.idx === index ? 'news-title news-title-active' : 'news-title'"
|
||
@click="handleClickType(index)">{{ item.dictionary_name }}</div>
|
||
<div class="news-title-line" v-if="index !== newsTypeList.length - 1"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="container ">
|
||
<!--招生新闻-->
|
||
<div class="news-container-box container">
|
||
|
||
<!-- 模块渲染列表 -->
|
||
<div v-if="newsList.length != 0" class="news-big-box row animate__animated animate__fadeIn">
|
||
<div class="news-box col-lg-12" v-for="(item, index) in newsList">
|
||
<div class="news-s-box">
|
||
<nuxt-link :to="getLink(item)" class="jump">
|
||
<div class="news-contianer" style="border: 1px solid #e5e4e4">
|
||
<div class="news-content-box">
|
||
<div class="news-cover-box">
|
||
<img :src=item.news_cover>
|
||
</div>
|
||
<div class="news-content-right-box">
|
||
<div class="news-title">{{ item.news_title }}</div>
|
||
<div class="news-time">{{ item.news_issue_date }}</div>
|
||
<div class="news-intro">{{ item.news_intro }}</div>
|
||
<el-button type="info">查看详情</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list_none" v-else>
|
||
<el-empty description="暂无数据" />
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<!-- 分页 -->
|
||
<div class="page-box">
|
||
<pagination class="page" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit"
|
||
@pagination="routerJump()" />
|
||
</div>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<Final></Final>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
// 预对接
|
||
let newsList = ref(
|
||
[
|
||
// {
|
||
// news_id: '1',
|
||
// news_title: "米尔喊你抽奖啦！NXP i.MX开发板、米家台灯、血压计等礼品~",
|
||
// news_intro: "一年一度端午节，与往常不一样的是今年的端午节多了一个特别的礼物那就是米尔将联合XP福利送~\n免费赠送i.MX开发板、台灯、血压计快来参与，你就是锦鲤~一等奖(5名)米尔基于NXPi.MX6U儿的开发板（价值558元）\n",
|
||
// news_cover: "/uploads/NewsImg/20230629\\b3897ad4ecce0204b2086110539ec1b3.jpg",
|
||
// news_issue_date: "2023-02-23",
|
||
// },
|
||
]
|
||
)
|
||
|
||
let newsTypeList = ref([
|
||
{
|
||
dictionary_name: '---',
|
||
idx: 0
|
||
},
|
||
])
|
||
let tdkNewType = ref()
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
let active = reactive({ idx: Number(route.params.idx), name: newsTypeList.value[0] })
|
||
|
||
onMounted(() => {
|
||
|
||
})
|
||
|
||
watch(active, (nv) => {
|
||
router.push(String(nv['idx']) + "-1")
|
||
})
|
||
|
||
// --- 参数 ---
|
||
let total = ref(0)
|
||
const queryParams = reactive({
|
||
page: parseInt(route.params.page) || 1,
|
||
idx: parseInt(route.params.idx) || 0,
|
||
limit: 10
|
||
})
|
||
|
||
// --- 方法 ---
|
||
const routerJump = function () {
|
||
let { page } = queryParams
|
||
router.push(String(newsTypeList.value[active['idx']]) + "-" + String(page))
|
||
}
|
||
|
||
const handleClickType = function (index) {
|
||
let { page } = queryParams
|
||
router.push(String(index) + "-" + String(page))
|
||
}
|
||
|
||
const getLink = function (item) {
|
||
if (item.news_link) {
|
||
return item.news_link;
|
||
} else {
|
||
return "/news/details/" + item.news_id;
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 接口对接
|
||
*/
|
||
|
||
// 获取Tdk
|
||
let tdk = ref({})
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 2 } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
|
||
// 获取新闻类型
|
||
useFetch('/api/news/getNewsType').then(res => {
|
||
newsTypeList.value = JSON.parse(res.data.value).data || []
|
||
tdkNewType.value = newsTypeList?.value[active.idx]?.dictionary_name
|
||
})
|
||
|
||
// // 获取新闻列表
|
||
useFetch('/api/news/getNewsList', { params: queryParams }).then(res => {
|
||
total.value = JSON.parse(res.data.value).count || 0
|
||
newsList.value = JSON.parse(res.data.value).data || []
|
||
})
|
||
|
||
// // 添加流量访问
|
||
// useFetch('/api/flow/addFlowRecord', { params: { flow_target: route.name } })
|
||
|
||
|
||
// fontSizeReactive({
|
||
// 880: 1,
|
||
// 480: 3,
|
||
// })
|
||
onMounted(() => {
|
||
htmlAddAnimations()
|
||
|
||
})
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/business/news/index.scss"></style>
|
||
<style scoped src="~/assets/css/business/news/media.scss"></style> |