fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 重构拓展阅读功能，优化组件数据传递和用户权限控制

This commit is contained in:
傅光孟 2026-02-06 17:10:10 +08:00
parent b0a3e38657
commit f9c0f69cd6
7 changed files with 213 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/detail.ts
View File

@ -42,6 +42,6 @@ export const getListByTag = (data: any) => {
};
// 拓展阅读新闻
export const getListByNewsExtend = (news_id: string) => {
export const getDetailFurtherReadData = (news_id: string) => {
return request.get(`/news/detail/${news_id}/furtherReadings`);
};

66
src/components/article/indexNewsInfo.vue
View File

@ -1,7 +1,9 @@
<template>
<view class="page-container">
<view class="main">
<view class="title" :class="{ mohu: !userStore.isLogin }">{{ props.data.title }}</view>
<view class="title" :class="{ mohu: !userStore.isLogin }">{{
props.data.title
}}</view>
<view class="author">
<view class="name" :class="{ mohu: !userStore.isLogin }">
<text class="text">来源:</text>
@ -15,7 +17,9 @@
<text class="text">编辑:</text>
<text class="text">{{ props.data.editor }}</text>
</view> -->
<view class="time" :class="{ mohu: !userStore.isLogin }">{{ props.data.publishTime }}</view>
<view class="time" :class="{ mohu: !userStore.isLogin }">{{
props.data.publishTime
}}</view>
</view>
<!-- 两个标签 start -->
@ -104,9 +108,28 @@
</view>
<!-- 关联个股 -->
<view class="r_etf" style="margin-top: 20rpx" v-if="intoType == 'etf'">
<view
class="r_etf"
style="margin-top: 20rpx"
v-if="data.stocks && data.stocks.length > 0"
>
<text class="etf_title">关联个股</text>
<view class="etfs">
<template>
<view v-for="(item, index) in data.stocks" class="stock_item" :key="index">
<view class="name">{{ item.name }}</view>
<view class="code">{{ item.code }}</view>
<!-- 暂无涨跌数据，保留样式 -->
<!-- <view>
<view class="name">{{ item.name }}</view>
<view class="code">{{ item.code }}</view>
</view>
<view>
<view class="percent up">-0.28%</view>
</view> -->
</view>
</template>
<template v-if="intoType == 'etf'">
<view
v-for="(item, index) in data.etfs"
class="etf_item"
@ -116,38 +139,25 @@
<view class="name">{{ item.name }}</view>
<view class="code">{{ item.code }}</view>
</view>
<view
v-for="(item, index) in data.etfs"
class="stock_item"
:key="index"
@click="goEtfDetail(item)"
>
<view>
<view class="name">{{ item.name }}</view>
<view class="code">{{ item.code }}</view>
</view>
<view>
<view class="percent up">-0.28%</view>
</view>
</view>
</template>
</view>
</view>
<!-- 拓展阅读 -->
<view class="more-news" style="margin-top: 20rpx" v-if="extendData.length > 0">
<view class="more-news" style="margin-top: 20rpx" v-if="furtherReadData.length > 0">
<text class="more-news-title">拓展阅读</text>
<view class="more-news-list">
<view
class="news"
v-for="item in extendData"
v-for="item in furtherReadData"
:ke="item.id"
@click="goNewsDetail(item)"
>
<view class="title">{{ item.title }}</view>
</view>
</view>
<view class="more-btn">
<view class="text" @click="getMoreExtendNews">查看更多</view>
<view class="more-btn" v-if="!isMore">
<view class="text" @click="getMoreNews">查看更多</view>
</view>
</view>
@ -177,13 +187,13 @@ import { Session } from "@/utils/storage";
import zhaiyaoImg from "../../assets/zixun/zhaiyao_icon.png";
import { useUserStore } from "@/stores/user";
const isLogin = ref(Session.get("token"));
const emit = defineEmits(["getFurtherReadData"]);
const props = defineProps({
data: {
type: Object,
default: () => {},
},
extendData: {
furtherReadData: {
type: Array,
default: () => [],
},
@ -203,7 +213,7 @@ const tagList1 = ref([
const userStore = useUserStore();
// 登录弹框
const LoginShow = ref(true);
const LoginShow = ref(false);
// 显示弹框
const handleShowLogin = () => {
@ -247,7 +257,7 @@ onLoad((option) => {
intoType.value = option?.intoType || null;
if (!userStore.isLogin) {
LoginShow.value = true;
// LoginShow.value = true;
}
});
@ -314,8 +324,10 @@ const goNewsDetail = (item: any) => {
};
// 拓展阅读更多
const getMoreExtendNews = (item: any) => {
console.log("output >>>>> 更多");
const isMore = ref(false);
const getMoreNews = () => {
isMore.value = true;
emit("getFurtherReadData");
};
</script>

35
src/pages/detail/indexNewsInfo.vue
View File

@ -11,7 +11,11 @@
</view>
<!-- 文章正文 start -->
<Article :data="data" :extendData="extendList" />
<Article
:data="data"
:furtherReadData="furtherReadData"
@getFurtherReadData="getFurtherReadData"
/>
<!-- 分割 -->
<view class="line"></view>
@ -36,7 +40,12 @@
import { onMounted, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onReachBottom } from "@dcloudio/uni-app";
import { fetchArticleDetail, fetchArticleLike, fetchArticleFavorate, getListByNewsExtend } from "@/api/detail";
import {
fetchArticleDetail,
fetchArticleLike,
fetchArticleFavorate,
getDetailFurtherReadData,
} from "@/api/detail";
import { getNewsList } from "@/api";
import Article from "@/components/article/indexNewsInfo.vue";
import Column from "@/components/column/index.vue";
@ -50,6 +59,7 @@ const data = ref<any>({});
const newType = ref<any>("");
const columnList = ref<any>([]);
const columnName = ref("");
const furtherReadData = ref<any[]>([]);
onReachBottom(() => {
console.log("🚀 ~ onReachBottom ~ onReachBottom:");
@ -66,6 +76,7 @@ const newList = async (columnId: number) => {
if (res.code === 200) {
// console.log(res.data)
columnList.value = res.data;
furtherReadData.value = res.data.furtherReadings || [];
}
};
@ -191,21 +202,16 @@ const jumpDetail = (item: any) => {
});
};
// 新闻id
const news_id = ref('')
const extendList = ref([]) // 扩展列表
const getExtendList = ()=> {
getListByNewsExtend(news_id.value).then((res: any) => {
console.log('output >>>>> res',res);
const news_id = ref("");
const getFurtherReadData = () => {
getDetailFurtherReadData(news_id.value).then((res: any) => {
furtherReadData.value = [...furtherReadData.value, ...res.data];
});
}
};
onLoad(async (option: any) => {
news_id.value = option.id
news_id.value = option.id;
aplus_queue.push({
action: "aplus.sendPV",
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
@ -230,9 +236,6 @@ onLoad(async (option: any) => {
id: option.id,
});
// 获取拓展阅读
getExtendList();
if (res.code === 200) {
data.value = res.data;

75
src/pages/realtimeInfo/components/ConceptNewsView/index.vue
View File

@ -1,25 +1,82 @@
<template>
<view class="hot-section">
<view class="hot-top">
<view class="hot-top" @click="navigateTo">
<view class="title">风口概念</view>
<view class="time">近一个月热门</view>
</view>
<view class="tag-box">
<view class="tag tag-active">医药生物</view>
<view class="tag">医药生物</view>
<view class="tag">医药生物</view>
<view class="tag">医药生物</view>
<view v-for="(item, index) in topConceptList_d" :key="index" class="tag">
{{ item.content }}
</view>
</view>
<view class="tag-content">
<view class="content"
>据称中国科技巨头赴海外训练AI模型以获取英伟达芯片据称中国科技巨头赴海外训练AI模型以获取英伟达芯片据称中国科技巨头赴海外训练AI模型以获取英伟达芯片
</view>
<view class="content" @click="goDetail(oneData)">{{ oneData.title }} </view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { getListByTag } from "@/api/detail";
import { getTopConcept_d } from "@/api/newsInfo";
import { useUserStore } from "@/stores/user";
import { computed, onMounted, ref } from "vue";
const emit = defineEmits(["onShow"]);
const active = ref(0);
const topConceptList = ref([]);
const oneData = ref({});
const userStore = useUserStore();
const topConceptList_d = computed(() => {
return topConceptList.value.slice(0, 3);
});
const handleClickTag = (index: number, item: any) => {
active.value = index;
getList(item);
};
// 热门行业top10
async function getTopConcept_dFn() {
topConceptList.value = await getTopConcept_d({});
}
async function getList() {
const name = topConceptList.value[active.value].content;
// 概念标签
let { code, data } = await getListByTag({ name });
if (code == 200) {
oneData.value = data[0];
}
}
// 跳转详情
function goDetail(item: any) {
if (userStore.isLogin) {
uni.navigateTo({
url: `/pages/detail/indexNewsInfo?id=${item.id}`,
});
} else {
emit("onShow");
}
}
// 跳转子页
function navigateTo() {
if (userStore.isLogin) {
uni.navigateTo({
url: `/pages/concept/index`,
});
} else {
emit("onShow");
}
}
onMounted(async () => {
// 热门行业top10
await getTopConcept_dFn();
await getList();
});
</script>
<style scoped lang="scss">

14
src/pages/realtimeInfo/components/HeaderView/index.vue
View File

@ -26,31 +26,31 @@ const menus = reactive([
{
name: "海外先机",
icon: MENUICON1,
auth: "menu1",
// auth: "menu1",
path: "/pages/foreign/index",
},
{
name: "编辑精选",
icon: MENUICON2,
auth: "menu2",
// auth: "menu2",
path: "/pages/recommend/index",
},
{
name: "宏观知微",
icon: MENUICON3,
auth: "menu3",
// auth: "menu3",
path: "/pages/macroscopic/index",
},
{
name: "热门行业",
icon: MENUICON4,
auth: "menu4",
// auth: "menu4",
path: "/pages/industry/index",
},
{
name: "风口概念",
icon: MENUICON5,
auth: "menu5",
// auth: "menu5",
path: "/pages/concept/index",
},
]);
@ -67,11 +67,13 @@ const goto = (path: string, auth: string) => {
return;
}
if (userInfos.value.auth.includes(auth)) {
if (userInfos.value.accountType === 1) {
// 正式账号
uni.navigateTo({
url: path,
});
} else {
// 试用账号
uni.showToast({
title: "无权限访问",
icon: "none",

88
src/pages/realtimeInfo/components/HotNewsView/index.vue
View File

@ -1,37 +1,93 @@
<template>
<view class="hot-section">
<view class="hot-top">
<view class="hot-top" @click="navigateTo">
<view class="title">热门行业</view>
<view class="time">近一个月热门</view>
</view>
<view class="tag-box">
<view class="tag tag-active">医药生物</view>
<view class="tag">医药生物</view>
<view class="tag">医药生物</view>
<view class="tag">医药生物</view>
<view
v-for="(item, index) in industryList_d"
:class="['tag', { 'tag-active': active === index }]"
@click="handleClickTag(index, item)"
>{{ item.content }}</view
>
</view>
<view class="tag-content">
<view class="tag-content" @click="goDetail(oneData)">
<view class="title">
<image class="icon-hot" src="@/assets/images/page/icon_hot@2x.png"></image>
<view class="name">
<text class="text"
>行业龙头最新财报行业龙头最新财报行业龙头最新财报行业龙头最新财报</text
>
<text class="text">{{ oneData.title }}</text>
</view>
</view>
<view class="content">
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
英伟达发布2026财年三季度业绩及四季度指引，均超市场预期。收入方场预期。收入方面，三亿美元，同…
{{ oneData.summary }}
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue";
const active = ref(0);
import { getListByTagIndustry } from "@/api/detail";
import { getTopIndustry_d } from "@/api/newsInfo";
import { useUserStore } from "@/stores/user";
import { computed, onMounted, ref } from "vue";
const emit = defineEmits(["onShow"]);
const active = ref(0);
const industryList = ref([]);
const oneData = ref({});
const userStore = useUserStore();
const industryList_d = computed(() => {
return industryList.value.slice(0, 4);
});
const handleClickTag = (index: number, item: any) => {
active.value = index;
getList(item);
};
// 热门行业top10
async function getTopIndustry_dFn() {
industryList.value = await getTopIndustry_d({});
}
async function getList() {
const name = industryList.value[active.value].content;
// 概念标签
let { code, data } = await getListByTagIndustry({ name });
if (code == 200) {
oneData.value = data[0];
}
}
// 跳转详情
function goDetail(item: any) {
if (userStore.isLogin) {
uni.navigateTo({
url: `/pages/detail/indexNewsInfo?id=${item.id}`,
});
} else {
emit("onShow");
}
}
// 跳转子页
function navigateTo() {
if (userStore.isLogin) {
uni.navigateTo({
url: `/pages/industry/index`,
});
} else {
emit("onShow");
}
}
onMounted(async () => {
// 热门行业top10
await getTopIndustry_dFn();
await getList();
});
</script>
<style scoped lang="scss">
@ -88,7 +144,9 @@ const active = ref(0);
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: center;
line-height: 36rpx;
padding: 0 10rpx;
box-sizing: border-box;
}

6
src/stores/user/index.ts
View File

@ -9,6 +9,7 @@ type IUserInfos = {
name?: string;
auth: string[];
role: string[];
accountType: number;
};
const storeSetup = () => {
@ -16,8 +17,9 @@ const storeSetup = () => {
const userInfos = ref<IUserInfos>({
phone: "",
name: "",
auth: [],
role: [],
auth: [], // 首页导航菜单权限存在， 暂不使用
role: [], // 角色，暂不使用
accountType: 0, // 账号类型，0:测试 ，1:正式
});
const setUserInfos = (payload: Partial<IUserInfos>) => {