443 lines
9.0 KiB
Vue
443 lines
9.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="pc_all">
|
|||
|
|
<!-- <PageTop></PageTop> -->
|
|||
|
|
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="top_title">
|
|||
|
|
<text class="pageTitle">编辑精选</text>
|
|||
|
|
|
|||
|
|
<div class="r_input">
|
|||
|
|
<input
|
|||
|
|
v-model="form.keyword"
|
|||
|
|
placeholder="请输入搜索内容"
|
|||
|
|
class="input"
|
|||
|
|
@keyup.enter="getNewsList"
|
|||
|
|
@clear="getNewsList"
|
|||
|
|
@blur="getNewsList"
|
|||
|
|
/>
|
|||
|
|
<div class="input_button" @click="getNewsList">搜索</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="line"></div>
|
|||
|
|
|
|||
|
|
<div class="r_list">
|
|||
|
|
<div class="list_item" v-for="(item, index) in newsList" :key="index">
|
|||
|
|
<div class="list_item_content">
|
|||
|
|
<text class="item_title" @click="goDetail(item)" v-html="item.title"></text>
|
|||
|
|
<text class="item_summary" v-html="item.summary"></text>
|
|||
|
|
|
|||
|
|
<div class="item_bottom">
|
|||
|
|
<div>
|
|||
|
|
<text class="time">{{ item.source }}</text>
|
|||
|
|
<text class="time" style="margin-left: 15px">{{ formatTime(item.time) }}</text>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="width: 100%; display: flex; justify-content: center" v-if="newsList && newsList.length > 0">
|
|||
|
|
<el-pagination
|
|||
|
|
v-model:current-page="currentPage"
|
|||
|
|
:page-size="form.size"
|
|||
|
|
layout="prev, pager, next"
|
|||
|
|
:total="form.total"
|
|||
|
|
@current-change="currentChange"
|
|||
|
|
@size-change="sizeChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|||
|
|
// import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
|
|||
|
|
import dayjs from 'dayjs/esm/index';
|
|||
|
|
import { Local, Session } from '/@/utils/storage';
|
|||
|
|
import { editTopNews } from '/@/api/cankao';
|
|||
|
|
import { useRoute, useRouter } from 'vue-router';
|
|||
|
|
|
|||
|
|
const pageSizes = ref([10, 20, 30, 40]);
|
|||
|
|
const form = reactive({
|
|||
|
|
keyword: '',
|
|||
|
|
page: 1,
|
|||
|
|
size: 10,
|
|||
|
|
total: 10,
|
|||
|
|
});
|
|||
|
|
const currentPage = ref(form.page);
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
const router = useRouter();
|
|||
|
|
|
|||
|
|
const pageType = ref(4);
|
|||
|
|
const newsList = ref([]);
|
|||
|
|
|
|||
|
|
function formatTime(timestamp) {
|
|||
|
|
const date = new Date(Number(timestamp).toString().length === 10 ? timestamp * 1000 : timestamp);
|
|||
|
|
return (
|
|||
|
|
[date.getFullYear(), (date.getMonth() + 1).toString().padStart(2, '0'), date.getDate().toString().padStart(2, '0')].join('-') +
|
|||
|
|
' ' +
|
|||
|
|
[date.getHours().toString().padStart(2, '0'), date.getMinutes().toString().padStart(2, '0'), date.getSeconds().toString().padStart(2, '0')].join(
|
|||
|
|
':'
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function getNewsList() {
|
|||
|
|
// 编辑精选
|
|||
|
|
let { code, data } = await editTopNews({
|
|||
|
|
...form,
|
|||
|
|
});
|
|||
|
|
if (code == 200) {
|
|||
|
|
newsList.value = data.list;
|
|||
|
|
form.total = data.total;
|
|||
|
|
data.list.forEach((item) => {
|
|||
|
|
item.summary = item.summary.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + '</span>');
|
|||
|
|
item.title = item.title.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + '</span>');
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goDetail(item) {
|
|||
|
|
let id = null;
|
|||
|
|
if (pageType.value != 4) {
|
|||
|
|
id = item.news_id;
|
|||
|
|
} else {
|
|||
|
|
id = item.id;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
router.push({
|
|||
|
|
path: '/indexPC',
|
|||
|
|
query: {
|
|||
|
|
id: id,
|
|||
|
|
type: pageType.value,
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: '/pages/realtimeInfo/pc/indexPC?id=' + id + '&type=' + pageType.value,
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function currentChange(page) {
|
|||
|
|
form.page = page;
|
|||
|
|
getNewsList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async (e) => {
|
|||
|
|
console.log('🚀 ~ route.query:', route.query);
|
|||
|
|
|
|||
|
|
if (route.query?.token && (!Session.get('token') || Session.get('token') == 'undefined')) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '加载中',
|
|||
|
|
mask: true,
|
|||
|
|
});
|
|||
|
|
sendToken({
|
|||
|
|
token: route.query.token,
|
|||
|
|
}).then((res) => {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
Session.set('token', res.data.token);
|
|||
|
|
Session.set('userPhone', res.data.phone);
|
|||
|
|
|
|||
|
|
// 解构路由参数，排除token
|
|||
|
|
const { token, ...otherQuery } = route.query;
|
|||
|
|
// 若存在token，替换路由清除参数
|
|||
|
|
if (token) {
|
|||
|
|
router.replace({
|
|||
|
|
path: route.path, // 保持当前路径不变
|
|||
|
|
query: otherQuery, // 保留其他参数
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
window.location.reload();
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
if (!Session.get('token') || Session.get('token') == 'undefined') {
|
|||
|
|
LoginShow.value = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 解构路由参数，排除token
|
|||
|
|
const { token, ...otherQuery } = route.query;
|
|||
|
|
// 若存在token，替换路由清除参数
|
|||
|
|
if (token) {
|
|||
|
|
router.replace({
|
|||
|
|
path: route.path, // 保持当前路径不变
|
|||
|
|
query: otherQuery, // 保留其他参数
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
getNewsList();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const LoginShow = ref(false);
|
|||
|
|
const isLoginStatus = ref();
|
|||
|
|
// 关闭弹框
|
|||
|
|
const handlePopupClose = () => {
|
|||
|
|
LoginShow.value = false;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 登录成功之后的回调
|
|||
|
|
const handlePopupSuccessCallback = () => {
|
|||
|
|
isLoginStatus.value = true;
|
|||
|
|
window.location.reload();
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: "/pages/realtimeInfo/rankDetail?type=" + type,
|
|||
|
|
// });
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 登录失败之后的回调
|
|||
|
|
const handlePopupErrorCallback = () => {
|
|||
|
|
console.log('登录失败');
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.pc_all {
|
|||
|
|
background: #f5f7fd;
|
|||
|
|
width: 100vw;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
background-color: white;
|
|||
|
|
width: 55vw;
|
|||
|
|
min-width: 100vw;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 20px 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top_title {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.pageTitle {
|
|||
|
|
font-family: AlibabaPuHuiTiM;
|
|||
|
|
font-size: 26px;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title_icon {
|
|||
|
|
width: 90px;
|
|||
|
|
height: 25px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #f0f0f0;
|
|||
|
|
margin-top: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_item {
|
|||
|
|
display: flex;
|
|||
|
|
min-height: 100px;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
border-bottom: 1px solid #f6f6f6;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
|
|||
|
|
.r_list_item_num {
|
|||
|
|
width: 50px;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_item_num {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
|
|||
|
|
display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding-bottom: 2.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num1 {
|
|||
|
|
background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num2 {
|
|||
|
|
background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.num3 {
|
|||
|
|
background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nol_num {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #93a2b3;
|
|||
|
|
line-height: 28px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list_item_content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title:hover {
|
|||
|
|
color: #057cff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_title {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_summary {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
|
|||
|
|
/* 必须：限制内容不溢出容器 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
/* 必须：超出部分显示省略号 */
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
/* 必须：将元素设置为webkit弹性盒模型（用于控制行数） */
|
|||
|
|
display: -webkit-box;
|
|||
|
|
/* 关键：限制显示的行数（这里设为2行） */
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
/* 必须：设置弹性盒的排列方向为垂直（让文本换行） */
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
|
|||
|
|
/* 可选：调整行高和容器高度，确保刚好容纳2行文本 */
|
|||
|
|
line-height: 1.5;
|
|||
|
|
/* 行高 */
|
|||
|
|
max-height: 3em;
|
|||
|
|
/* 2行总高度 = 行高 × 2（1.5×2=3） */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item_bottom {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 15px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #919191;
|
|||
|
|
line-height: 20px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.score {
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #ffa800;
|
|||
|
|
line-height: 25px;
|
|||
|
|
text-align: right;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search_btn {
|
|||
|
|
border: none;
|
|||
|
|
display: flex;
|
|||
|
|
width: 56px;
|
|||
|
|
height: 44px;
|
|||
|
|
padding: 8px 15px;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: #0062d9;
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
border: none;
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input_button {
|
|||
|
|
display: flex;
|
|||
|
|
width: 140px;
|
|||
|
|
height: 100%;
|
|||
|
|
// padding: 8px 15px;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
border-radius: 0 10px 10px 0;
|
|||
|
|
background: #007aff;
|
|||
|
|
|
|||
|
|
color: white;
|
|||
|
|
font-family: PingFangSC, PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
line-height: 25px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.r_input {
|
|||
|
|
background-color: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
border: 1px solid #e3e3e3;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 52px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 30px;
|
|||
|
|
margin-top: 3px;
|
|||
|
|
|
|||
|
|
:deep(.el-input__inner::placeholder) {
|
|||
|
|
color: #ccced3;
|
|||
|
|
font-family: 'PingFang SC';
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-input__wrapper) {
|
|||
|
|
box-shadow: 0 0 0 #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|