555 lines
13 KiB
Vue
555 lines
13 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<!-- 导航栏 start -->
|
|
<view class="custom-bav-bar">
|
|
<view class="left">
|
|
<u-icon name="arrow-left" color="#fff" size="36rpx" @click="handleBack" />
|
|
</view>
|
|
<view class="center"> 智能资讯榜 </view>
|
|
</view>
|
|
<!-- 导航栏 end -->
|
|
|
|
<!-- 24小时榜 start -->
|
|
<view class="radar-container">
|
|
<view class="title">24h AI追踪海外资讯</view>
|
|
<div ref="chatRef" class="chat-box"></div>
|
|
<view
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-right: 15rpx;
|
|
font-size: 30rpx;
|
|
gap: 10rpx;
|
|
margin-top: 20rpx;
|
|
"
|
|
@click="showCalendar"
|
|
>
|
|
{{ chooseDate.startDate.split(" ")[0] }}
|
|
<u-icon name="calendar" size="26" style="margin-right: 10rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
<!-- 24小时榜 end -->
|
|
<view v-if="!loading" :class="['page-main ', { blur: !userStore.isLogin }]">
|
|
<view class="news-list-top">
|
|
<view class="news-item" v-for="(item, index) in newsListTop" :key="item.news_id">
|
|
<view class="news-no"> {{ index + 1 }} </view>
|
|
<view class="news-info">
|
|
<view class="news-title">
|
|
<view class="title">{{ item.title }}</view>
|
|
<view class="score">{{ item.news_score }}</view>
|
|
</view>
|
|
<view class="news-cont">
|
|
{{ item.summary }}
|
|
</view>
|
|
<view class="source">
|
|
<view class="t-1">{{ item.source }}</view>
|
|
<view class="t-2">{{
|
|
dayjs(item.publish_time).format("YYYY-MM-DD hh:mm:ss")
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="news-list">
|
|
<view class="news-item" v-for="(item, index) in newsList" :key="item.news_id">
|
|
<view class="news-no"> {{ index + 1 + topNum }} </view>
|
|
<view class="news-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<view class="news-score">{{ item.news_score }}</view>
|
|
</view>
|
|
|
|
<view class="more-btn" v-if="!isExpAll" @click="handleShowAll">
|
|
<view class="text">查看更多</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="more-loading" v-if="moreLoading">
|
|
<u-loading-icon
|
|
mode="circle"
|
|
text="AI正在实时计算剩余资讯"
|
|
textSize="26rpx"
|
|
textColor="#999999"
|
|
color="rgba(23, 119, 255, 1)"
|
|
size="28rpx"
|
|
></u-loading-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<u-loading-icon
|
|
v-else
|
|
mode="circle"
|
|
text="加载中"
|
|
textSize="26rpx"
|
|
textColor="#999999"
|
|
color="rgba(23, 119, 255, 1)"
|
|
size="28rpx"
|
|
></u-loading-icon>
|
|
|
|
<!-- 日历 -->
|
|
<u-calendar
|
|
:show="calendarShow"
|
|
:min-date="calendar.minDate"
|
|
:max-date="calendar.maxDate"
|
|
:monthNum="calendar.monthNum"
|
|
:default-date="chooseDate.startDate"
|
|
@confirm="calendarConfirm"
|
|
@close="hideCalendar"
|
|
>
|
|
</u-calendar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive, ref, watch } from "vue";
|
|
import { getTopNews } from "@/api/newsInfo";
|
|
import * as echarts from "echarts";
|
|
import dayjs from "dayjs";
|
|
import { useUserStore } from "@/stores/user";
|
|
|
|
const userStore = useUserStore();
|
|
const chatRef = ref(null);
|
|
let myChart = null;
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
myChart = echarts.init(chatRef.value);
|
|
|
|
let option = {
|
|
gird: {
|
|
show: true,
|
|
top: 50,
|
|
left: 50,
|
|
right: 50,
|
|
},
|
|
color: ["#4681FF"],
|
|
radar: {
|
|
// shape: 'circle',
|
|
indicator: [
|
|
{ name: "资本市场相关", max: 6500 },
|
|
{ name: "资讯质量", max: 6000 },
|
|
{ name: "媒体影响力", max: 30000 },
|
|
{ name: "行业导向", max: 38000 },
|
|
{ name: "历史溯洄", max: 52000 },
|
|
{ name: "话题性", max: 30000 },
|
|
{ name: "风险性", max: 6500 },
|
|
{ name: "地缘影响", max: 6500 },
|
|
{ name: "产业政策", max: 6500 },
|
|
{ name: "潜在信号", max: 6500 },
|
|
],
|
|
axisName: {
|
|
color: "#666666",
|
|
fontSize: 12,
|
|
fontWeight: 400,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(234, 234, 236, 1)",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "1111",
|
|
type: "radar",
|
|
areaStyle: { color: "rgba(62, 122, 252, 0.20)" },
|
|
data: [
|
|
{
|
|
value: [4200, 3000, 20000, 35000, 50000, 18000, 4200, 3000, 4200, 3000],
|
|
name: "AI追踪海外资讯",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
//使用配置
|
|
myChart.setOption(option);
|
|
};
|
|
|
|
watch(
|
|
() => chatRef.value,
|
|
() => {
|
|
initChart();
|
|
},
|
|
);
|
|
|
|
// 获取数据
|
|
const loading = ref(false);
|
|
const isExpAll = ref(false);
|
|
const topNum = 3; // 前置高量数
|
|
const lastNewsIndex = ref(10); // 控制 取前10条数据 和 取所有数据
|
|
const newsListAll = ref([]); // 全部新闻
|
|
const limit_num = ref(1000);
|
|
const moreLoading = ref(false);
|
|
|
|
// 获取前置数据
|
|
const newsListTop = computed(() => {
|
|
const _data = newsListAll.value.slice(0, topNum);
|
|
return _data;
|
|
});
|
|
// 获取剩余数据
|
|
const newsList = computed(() => {
|
|
const _data = newsListAll.value.slice(topNum, lastNewsIndex.value);
|
|
return _data;
|
|
});
|
|
|
|
// 获取更多数据
|
|
const handleShowAll = async () => {
|
|
isExpAll.value = true;
|
|
moreLoading.value = true;
|
|
// 模拟加载数据
|
|
await new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve(true);
|
|
}, 500);
|
|
}).then(() => {
|
|
moreLoading.value = false;
|
|
});
|
|
|
|
// 获取所有新闻
|
|
lastNewsIndex.value = newsListAll.value.length;
|
|
};
|
|
|
|
// 日期格式
|
|
const formatDateStart = "YYYY-MM-DD 00:00:00";
|
|
const formatDateEnd = "YYYY-MM-DD 23:59:59";
|
|
|
|
// 日历初始数据
|
|
const calendar = reactive({
|
|
minDate: "2025-01-01",
|
|
maxDate: dayjs().format(formatDateEnd),
|
|
monthNum: Math.ceil(dayjs().diff("2025-01-01", "month", true)),
|
|
});
|
|
|
|
// 选择的日期
|
|
const chooseDate = reactive({
|
|
startDate: dayjs().format(formatDateStart),
|
|
endDate: dayjs().format(formatDateEnd),
|
|
});
|
|
// 日历显示
|
|
const calendarShow = ref(false);
|
|
function showCalendar() {
|
|
calendarShow.value = true;
|
|
}
|
|
// 隐藏日历
|
|
function hideCalendar() {
|
|
calendarShow.value = false;
|
|
}
|
|
|
|
function calendarConfirm(dateList: string[]) {
|
|
if (dateList && dateList.length > 0) {
|
|
chooseDate.startDate = dayjs(dateList[0]).format(formatDateStart);
|
|
chooseDate.endDate = dayjs(dateList[dateList.length - 1]).format(formatDateEnd);
|
|
}
|
|
getNewsList();
|
|
calendarShow.value = false;
|
|
isExpAll.value = false;
|
|
lastNewsIndex.value = 10
|
|
}
|
|
|
|
async function getNewsList() {
|
|
const params = {
|
|
start_date: chooseDate.startDate,
|
|
end_date: chooseDate.endDate,
|
|
limit_num: limit_num.value,
|
|
};
|
|
|
|
loading.value = true;
|
|
try {
|
|
const result = await getTopNews(params);
|
|
newsListAll.value = result;
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
// 导航栏路由返回
|
|
const handleBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
};
|
|
|
|
onMounted(() => {
|
|
initChart();
|
|
getNewsList();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page-container {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding-bottom: 20rpx;
|
|
background-color: #f3f5f8;
|
|
background-image: url("@/assets/images/page/page6_pic@2x.png");
|
|
background-size: 100% auto;
|
|
background-repeat: no-repeat;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.custom-bav-bar {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.back_icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.logo_icon {
|
|
width: 168rpx;
|
|
height: 36rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
|
|
.left {
|
|
position: absolute;
|
|
top: 24rpx;
|
|
left: 32rpx;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 34rpx;
|
|
color: #ffffff;
|
|
line-height: 36rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.radar-container {
|
|
// min-height: 600rpx;
|
|
margin: 38rpx 20rpx 20rpx;
|
|
padding: 39rpx 0 30rpx;
|
|
background-image: linear-gradient(180deg, rgba(194, 214, 253, 0.96) 0%, #ffffff 50%);
|
|
box-shadow: inset 0px 1px 0px 0px #ffffff;
|
|
border-radius: 20px;
|
|
backdrop-filter: blur(10px);
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
width: 329rpx;
|
|
padding: 14rpx 30rpx;
|
|
margin: 0 auto;
|
|
background: #ffffff;
|
|
border-radius: 32rpx;
|
|
border: 1px solid #e7e7e7;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
line-height: 38rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.chat-box {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
}
|
|
|
|
.page-main {
|
|
&.blur {
|
|
filter: blur(5px);
|
|
}
|
|
.news-list-top {
|
|
margin: 0 20rpx;
|
|
.news-item {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
background: #ffffff;
|
|
box-shadow: inset 0px 2rpx 0px 0px #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.news-no {
|
|
flex: 0 0 35rpx;
|
|
height: 46rpx;
|
|
margin-right: 15rpx;
|
|
background-image: url("@/assets/images/page/icon_no1@2x.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 35rpx 46rpx;
|
|
text-indent: -999em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
.news-no {
|
|
background-image: url("@/assets/images/page/icon_no1@2x.png");
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
.news-no {
|
|
background-image: url("@/assets/images/page/icon_no2@2x.png");
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
.news-no {
|
|
background-image: url("@/assets/images/page/icon_no3@2x.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
.news-info {
|
|
.news-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14rpx;
|
|
.title {
|
|
width: 505rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.score {
|
|
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #3f80fa;
|
|
line-height: 42rpx;
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.news-cont {
|
|
margin-bottom: 16rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
line-height: 33rpx;
|
|
text-align: justify;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.source {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.t-1 {
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 33rpx;
|
|
margin-right: 4rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.t-2 {
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
line-height: 33rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.news-list {
|
|
padding-bottom: 20rpx;
|
|
margin: 0 20rpx;
|
|
background: #ffffff;
|
|
box-shadow: inset 0px 2rpx 0px 0px #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.news-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx 0;
|
|
margin: 0 30rpx;
|
|
border-bottom: 2rpx solid #f3f3f5;
|
|
|
|
.news-no {
|
|
flex: 0 0 35rpx;
|
|
height: 42rpx;
|
|
margin-right: 15rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #e98254;
|
|
line-height: 42rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.news-title {
|
|
width: 505rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 500;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.news-score {
|
|
font-family: "AlimamaShuHeiTi, AlimamaShuHeiTi";
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #3f80fa;
|
|
line-height: 42rpx;
|
|
text-align: right;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
|
|
.more-btn {
|
|
margin-top: 22rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.text {
|
|
padding-right: 31rpx;
|
|
background: url("@/assets/images/page/grey_down@2x.png") no-repeat right center;
|
|
background-size: 21rpx 11rpx;
|
|
font-family: "PingFangSC, PingFang SC";
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.more-loading {
|
|
padding: 30rpx 0;
|
|
}
|
|
}
|
|
</style>
|