343 lines
8.6 KiB
Vue
343 lines
8.6 KiB
Vue
<template>
|
||
<view class="pc_all">
|
||
<PageTop></PageTop>
|
||
|
||
<view class="content" :style="{ filter: Session.get('token') ? '' : 'blur(5px)' }">
|
||
<view class="top_title">
|
||
<text class="pageTitle" v-if="pageType != 4">资讯头条榜</text>
|
||
<text class="pageTitle" v-if="pageType == 4">编辑精选</text>
|
||
<image src="@/assets/zixun/top20_icon.png" class="title_icon" v-if="pageType != 4"></image>
|
||
<u-input v-if="pageType == 4" placeholder="请输入搜索内容" v-model="form.keyword" prefixIcon="search"
|
||
prefixIconStyle="font-size: 22px;color: #909399"
|
||
style="margin-left: 40rpx;margin-top: 5rpx;border-radius: 20rpx;">
|
||
|
||
<template #suffix>
|
||
<u-button @tap="getNewsList" text="搜索" size="mini"></u-button>
|
||
</template>
|
||
</u-input>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
<view class="r_list">
|
||
<view class="list_item" v-for="(item, index) in newsList" :key="index">
|
||
<view class="r_list_item_num" v-if="pageType != 4">
|
||
<view class="list_item_num num1" v-if="index < 3 && index == 0">{{ index + 1 }}</view>
|
||
<view class="list_item_num num2" v-else-if="index < 3 && index == 1">{{ index + 1 }}</view>
|
||
<view class="list_item_num num3" v-else-if="index < 3 && index == 2">{{ index + 1 }}</view>
|
||
<view class="list_item_num nol_num" v-else>{{ index + 1 }}</view>
|
||
</view>
|
||
|
||
<view class="list_item_content">
|
||
<text class="item_title" @click="goDetail(item)" v-html="item.title"></text>
|
||
<text class="item_summary" v-if="pageType != 4">{{ item.summary }}</text>
|
||
<text class="item_summary" v-if="pageType == 4" v-html="item.summary"></text>
|
||
|
||
<view class="item_bottom">
|
||
<view>
|
||
<text class="time">{{ item.source }}</text>
|
||
<text class="time" style="margin-left: 30rpx" v-if="pageType != 4">{{
|
||
dayjs(item.publish_time).format("YYYY-MM-DD HH:MM:ss")
|
||
}}</text>
|
||
<text class="time" style="margin-left: 30rpx" v-if="pageType == 4">{{
|
||
item.time
|
||
}}</text>
|
||
</view>
|
||
|
||
<text class="score" v-if="pageType != 4">{{ item.news_score }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<div style="width: 100%;display: flex;justify-content: center;"
|
||
v-if="pageType == 4 && 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>
|
||
|
||
</view>
|
||
<LoginPopup :show="LoginShow" mode="center" @handlePopupClose="handlePopupClose"
|
||
@handlePopupSuccessCallback="handlePopupSuccessCallback" @handlePopupErrorCallback="handlePopupErrorCallback" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, reactive } from "vue";
|
||
import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
|
||
import { getTopNewsDay } from "@/api/newsInfo";
|
||
import dayjs from "dayjs/esm/index";
|
||
import LoginPopup from "@/components/loginPopup/index.vue";
|
||
import { Session } from "@/utils/storage";
|
||
import { editTopNews } from "@/api/index";
|
||
import { sendToken } from "@/api/index";
|
||
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(route.query.type);
|
||
const newsList = ref([]);
|
||
|
||
|
||
async function getNewsList() {
|
||
if (pageType.value == 4) {
|
||
// 编辑精选
|
||
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>');
|
||
});
|
||
}
|
||
} else {
|
||
// 概念标签贴标
|
||
newsList.value = await getTopNewsDay({});
|
||
}
|
||
}
|
||
|
||
function goDetail(item) {
|
||
let id = null
|
||
if (pageType.value != 4) {
|
||
id = item.news_id
|
||
} else {
|
||
id = item.id
|
||
}
|
||
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")) {
|
||
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);
|
||
|
||
window.location.reload();
|
||
}
|
||
})
|
||
} else {
|
||
if (!Session.get("token")) {
|
||
LoginShow.value = true;
|
||
}
|
||
}
|
||
|
||
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">
|
||
@import url("./index.css");
|
||
|
||
.top_title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pageTitle {
|
||
font-family: AlibabaPuHuiTiM;
|
||
font-size: 26px;
|
||
color: #1a1a1a;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title_icon {
|
||
width: 180rpx;
|
||
height: 50rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: #f0f0f0;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.r_list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.list_item {
|
||
display: flex;
|
||
min-height: 200rpx;
|
||
padding: 30rpx 0;
|
||
border-bottom: 1px solid #f6f6f6;
|
||
margin-top: 30rpx;
|
||
|
||
.r_list_item_num {
|
||
width: 100rpx;
|
||
|
||
display: flex;
|
||
text-align: center;
|
||
}
|
||
|
||
.list_item_num {
|
||
margin-top: 10rpx;
|
||
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: 5rpx;
|
||
}
|
||
|
||
.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: 20rpx;
|
||
|
||
|
||
/* 必须：限制内容不溢出容器 */
|
||
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: 30rpx;
|
||
margin-bottom: 10rpx;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
</style>
|