473 lines
9.5 KiB
Vue
473 lines
9.5 KiB
Vue
<template>
|
||
<div class="pc_all">
|
||
<!-- <PageTop></PageTop> -->
|
||
|
||
<div class="content">
|
||
<div class="top_title">
|
||
<text class="pageTitle">编辑<text class="strong">精选</text></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 class="pagination" style="width: 100%; display: flex; justify-content: flex-end" v-if="newsList && newsList.length > 0">
|
||
<el-pagination
|
||
popper-class="popper-style"
|
||
background
|
||
v-model:current-page="currentPage"
|
||
:page-size="form.size"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="form.total"
|
||
@current-change="currentChange"
|
||
@size-change="sizeChange"
|
||
>
|
||
</el-pagination>
|
||
</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();
|
||
}
|
||
|
||
function sizeChange(size) {
|
||
form.page = 1;
|
||
currentPage.value = 1;
|
||
form.size = size;
|
||
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;
|
||
|
||
.strong {
|
||
color: #ff9900;
|
||
}
|
||
}
|
||
|
||
.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: #ff9900;
|
||
}
|
||
|
||
.item_title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: bold;
|
||
font-size: 20px;
|
||
color: #1a1a1a;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.item_summary {
|
||
font-family: 'Microsoft YaHei', '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: #ff9900;
|
||
|
||
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(.input::placeholder) {
|
||
color: #ccc;
|
||
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;
|
||
}
|
||
}
|
||
.pagination {
|
||
margin-top: 24px;
|
||
width: 100%;
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// :deep(.el-pager li){
|
||
// border: 1px solid #ccc;
|
||
// background: transparent;
|
||
// }
|
||
}
|
||
|
||
:deep(.el-select-dropdown__item.is-selected) {
|
||
color: #ff9900;
|
||
}
|
||
</style>
|