669 lines
16 KiB
Vue
669 lines
16 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<view class="main">
|
||
<view class="title" :class="{ mohu: isMask }">{{ props.data.title }}</view>
|
||
<view class="author">
|
||
<view class="name" :class="{ mohu: isMask }">
|
||
<text class="text">来源:</text>
|
||
<text class="text" v-if="intoType === 'etf'">中国证券报</text>
|
||
<text class="text" v-else>{{
|
||
props.data.tag ? props.data.tag : "中国证券报"
|
||
}}</text>
|
||
</view>
|
||
|
||
<!-- <view class="name" v-if="props.data.editor">
|
||
<text class="text">编辑:</text>
|
||
<text class="text">{{ props.data.editor }}</text>
|
||
</view> -->
|
||
<view class="time" :class="{ mohu: isMask }">{{ props.data.publishTime }}</view>
|
||
</view>
|
||
|
||
<!-- 两个标签 start -->
|
||
<view class="r_r_tags" :class="{ mohu: isMask }">
|
||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
|
||
<view class="r_tags">
|
||
<view
|
||
class="tag"
|
||
style="background-color: #fff9ec; color: #ffb100"
|
||
v-for="(item, index) in props.data.conceptLabels"
|
||
:key="index"
|
||
>{{ item }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 100vw">
|
||
<view class="r_tags">
|
||
<view
|
||
class="tag"
|
||
style="background-color: #f5f8fe; color: #007aff"
|
||
v-for="(item, index) in props.data.industryLabels"
|
||
:key="index"
|
||
>{{ item }}</view
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 两个标签 end -->
|
||
|
||
<!-- 摘要 -->
|
||
<view class="desc" v-if="props.data.summary" :class="{ mohu: isMask }">
|
||
<!-- <view class="bill_icon"></view> -->
|
||
<image :src="zhaiyaoImg" mode="scaleToFill" class="zhaiyao_icon" />
|
||
<view>
|
||
{{ props.data.summary }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="thumbnail" v-if="props.data.picture">
|
||
<image :src="props.data.picture" mode="widthFix" />
|
||
</view>
|
||
|
||
<view style="padding: 35rpx" :class="{ mohu: isMask }">
|
||
<text
|
||
class="articleDes"
|
||
:class="props?.data?.needpay && 'needpay'"
|
||
style="white-space: pre-wrap"
|
||
v-html="props.data.content"
|
||
>
|
||
</text>
|
||
</view>
|
||
|
||
<!-- <view
|
||
class="articleDes"
|
||
:class="props?.data?.needpay && 'needpay'"
|
||
v-html="props.data.content"
|
||
>
|
||
</view> -->
|
||
|
||
<view class="author" style="justify-content: flex-start">
|
||
<view class="name" v-if="props.data.editor">
|
||
<text class="text">编辑:</text>
|
||
<text class="text">{{ props.data.editor }}</text>
|
||
</view>
|
||
|
||
<view class="name" style="margin-left: 40rpx" v-if="props.data.secondReviewer">
|
||
<text class="text">二校:</text>
|
||
<text class="text">{{ props.data.secondReviewer }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="company-tag" v-if="props.data.companyName">
|
||
<text class="txt">{{ props.data.companyName }}</text>
|
||
</view>
|
||
|
||
<!-- <view class="r_etf" style="margin-top: 80rpx" v-if="intoType == 'etf'">
|
||
<text class="etf_title">AI关联标的</text>
|
||
<view class="etfs">
|
||
<view
|
||
v-for="(item, index) in data.etfs"
|
||
class="etf_item"
|
||
:key="index"
|
||
@click="goEtfDetail(item)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 关联个股 -->
|
||
<view
|
||
class="r_etf"
|
||
style="margin-top: 20rpx"
|
||
v-if="data.stocks && data.stocks.length > 0"
|
||
>
|
||
<text class="etf_title">关联个股</text>
|
||
<view class="etfs">
|
||
<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 v-if="intoType == 'etf'">
|
||
<view
|
||
v-for="(item, index) in data.etfs"
|
||
class="etf_item"
|
||
:key="index"
|
||
@click="goEtfDetail(item)"
|
||
>
|
||
<view class="name">{{ item.name }}</view>
|
||
<view class="code">{{ item.code }}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 拓展阅读 -->
|
||
<view
|
||
:class="['more-news', { mohu: isMask }]"
|
||
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 furtherReadData"
|
||
:ke="item.id"
|
||
@click="goNewsDetail(item)"
|
||
>
|
||
<view class="title">{{ item.title }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="more-btn" v-if="!isMore">
|
||
<view class="text" @click="getMoreNews">查看更多</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登录弹窗 start -->
|
||
<LoginDialog
|
||
:show="LoginShow"
|
||
@onSuccess="handleLoginSuccess"
|
||
@onCancel="handleLoginCancel"
|
||
@onError="handleLoginError"
|
||
/>
|
||
<!-- 登录弹窗 end -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed, ref } from "vue";
|
||
import {
|
||
onLaunch,
|
||
onShow,
|
||
onLoad,
|
||
onShareAppMessage,
|
||
onShareTimeline,
|
||
} from "@dcloudio/uni-app";
|
||
import articleMock from "@/mock/article.js";
|
||
import LoginDialog from "@/components/loginPopup/index.vue";
|
||
import { Session } from "@/utils/storage";
|
||
import zhaiyaoImg from "../../assets/zixun/zhaiyao_icon.png";
|
||
import { useUserStore } from "@/stores/user";
|
||
|
||
const emit = defineEmits(["getFurtherReadData"]);
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
furtherReadData: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
});
|
||
const tagList1 = ref([
|
||
{
|
||
name: "医药生物-生物制药",
|
||
},
|
||
{
|
||
name: "医药生物-化学制药",
|
||
},
|
||
{
|
||
name: "医药生物-医疗服务",
|
||
},
|
||
]);
|
||
|
||
const userStore = useUserStore();
|
||
// 未登录|试用，显示蒙层
|
||
const isMask = computed(() => {
|
||
return !userStore.isLogin || !userStore.isUserType;
|
||
});
|
||
|
||
// 登录弹框
|
||
const LoginShow = ref(false);
|
||
|
||
// 显示弹框
|
||
const handleShowLogin = () => {
|
||
LoginShow.value = true;
|
||
};
|
||
|
||
// 关闭弹框
|
||
const handleLoginCancel = () => {
|
||
LoginShow.value = false;
|
||
};
|
||
// 登录成功之后的回调
|
||
const handleLoginSuccess = () => {
|
||
LoginShow.value = false;
|
||
};
|
||
// 登录失败之后的回调
|
||
const handleLoginError = () => {
|
||
console.log("登录失败");
|
||
};
|
||
|
||
const tagList2 = ref([
|
||
{
|
||
name: "医药生物-生物制药",
|
||
},
|
||
{
|
||
name: "医药生物-化学制药",
|
||
},
|
||
{
|
||
name: "医药生物-医疗服务",
|
||
},
|
||
]);
|
||
|
||
const show = ref(false);
|
||
const type = ref("");
|
||
const handleClick = (value: any) => {
|
||
show.value = value;
|
||
};
|
||
|
||
const intoType = ref(null);
|
||
onLoad((option) => {
|
||
type.value = option?.type || "list";
|
||
intoType.value = option?.intoType || null;
|
||
|
||
if (!userStore.isLogin) {
|
||
handleShowLogin();
|
||
}
|
||
});
|
||
|
||
function goEtfDetail(item) {
|
||
console.log("🚀 ~ goEtfDetail ~ item:", item);
|
||
uni.navigateTo({
|
||
url: `/pages/realtimeInfo/indexEtfInfo?name=${item.name}&code=${item.code}`,
|
||
});
|
||
}
|
||
|
||
const handleSub = () => {
|
||
if (type.value === "list") {
|
||
let mainItemId = uni.getStorageSync("mainItem");
|
||
let arr = uni.getStorageSync("list");
|
||
let subArr = arr.filter((item) => {
|
||
if (item.id == mainItemId.id) {
|
||
item.needpay = false;
|
||
}
|
||
return item;
|
||
});
|
||
uni.setStorageSync("list", subArr);
|
||
} else if (type.value === "vipList") {
|
||
let mainItemId = uni.getStorageSync("vipItem");
|
||
// console.log("mainItemId", mainItemId)
|
||
let arr = uni.getStorageSync("vipList");
|
||
let subArr = arr.filter((item) => {
|
||
if (item.id == mainItemId.id) {
|
||
item.needpay = false;
|
||
}
|
||
return item;
|
||
});
|
||
uni.setStorageSync("vipList", subArr);
|
||
} else if (type.value === "newsList") {
|
||
let mainItemId = uni.getStorageSync("newsItem");
|
||
let arr = uni.getStorageSync("newsList");
|
||
let subArr = arr.filter((item) => {
|
||
if (item.id == mainItemId.id) {
|
||
item.needpay = false;
|
||
}
|
||
return item;
|
||
});
|
||
uni.setStorageSync("newsList", subArr);
|
||
} else if (type.value === "handpickList") {
|
||
let mainItemId = uni.getStorageSync("handpickItem");
|
||
let arr = uni.getStorageSync("handpickList");
|
||
let subArr = arr.filter((item) => {
|
||
if (item.id == mainItemId.id) {
|
||
item.needpay = true;
|
||
}
|
||
return item;
|
||
});
|
||
uni.setStorageSync("handpickList", subArr);
|
||
}
|
||
props.data.needpay = false;
|
||
|
||
show.value = false;
|
||
};
|
||
|
||
// 拓展阅读跳转新闻详情
|
||
const goNewsDetail = (item: any) => {
|
||
uni.navigateTo({
|
||
url: `/pages/detail/indexNewsInfo?id=${item.id}`,
|
||
});
|
||
};
|
||
|
||
// 拓展阅读更多
|
||
const isMore = ref(false);
|
||
const getMoreNews = () => {
|
||
isMore.value = true;
|
||
emit("getFurtherReadData");
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-container {
|
||
background-color: #f3f5f8;
|
||
// padding-bottom: 80rpx;
|
||
}
|
||
.main {
|
||
position: relative;
|
||
background-color: #fff;
|
||
padding-bottom: 50rpx;
|
||
|
||
.title {
|
||
padding-top: 16rpx;
|
||
padding: 0 40rpx;
|
||
// font-size: 40rpx;
|
||
font-size: 20px;
|
||
color: #333;
|
||
// font-weight: 700;
|
||
white-space: normal;
|
||
/* 允许换行 */
|
||
overflow-wrap: break-word;
|
||
/* 在必要时单词内部断行 */
|
||
font-family: "SourceHanSansCN-Medium";
|
||
}
|
||
|
||
.author {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
padding: 0 40rpx;
|
||
|
||
.text {
|
||
// font-size: 26rpx;
|
||
font-size: var(--h3-font-size);
|
||
color: rgba(51, 51, 51, 0.6);
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.time {
|
||
// font-size: 26rpx;
|
||
font-size: var(--h3-font-size);
|
||
color: rgba(51, 51, 51, 0.6);
|
||
}
|
||
}
|
||
|
||
// 摘要
|
||
.desc {
|
||
padding: 12rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f2f4fa;
|
||
width: 700rpx;
|
||
margin: 30rpx auto;
|
||
color: #666666;
|
||
// font-size: 28rpx;
|
||
font-size: var(--h2-font-size);
|
||
// text-indent: 0.5em;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: break-word;
|
||
line-height: 40rpx;
|
||
|
||
/* 在必要时单词内部断行 */
|
||
.bill_icon {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
float: left;
|
||
margin-right: 12rpx;
|
||
margin-top: 6rpx;
|
||
background-size: contain;
|
||
background-image: url(@/static/icon_act_lt.png);
|
||
}
|
||
}
|
||
|
||
.thumbnail {
|
||
margin-top: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.articleDes {
|
||
// padding: 0 30rpx 30rpx 30rpx;
|
||
box-sizing: border-box;
|
||
line-height: 50rpx;
|
||
text-align: justify;
|
||
white-space: pre-wrap;
|
||
|
||
::v-deep {
|
||
p {
|
||
margin: 30rpx 0;
|
||
// font-size: 28rpx;
|
||
font-size: var(--h2-font-size);
|
||
color: #333;
|
||
//text-indent: 2em;
|
||
line-height: 48rpx;
|
||
// white-space: normal;
|
||
/* 允许换行 */
|
||
overflow-wrap: break-word;
|
||
/* 在必要时单词内部断行 */
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
margin-left: -2em;
|
||
// margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
&.needpay {
|
||
height: 730rpx;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
|
||
.r_r_tags {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.r_tags {
|
||
display: flex;
|
||
gap: 10rpx;
|
||
|
||
.tag {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #3f80fa;
|
||
|
||
padding: 5rpx 20rpx;
|
||
border-radius: 10rpx;
|
||
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.mohu {
|
||
filter: blur(4px);
|
||
}
|
||
|
||
.zhaiyao_icon {
|
||
width: 72rpx;
|
||
height: 51rpx;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.r_etf {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
|
||
.etfs {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.etf_title {
|
||
padding-left: 53rpx;
|
||
background-image: url("@/assets/images/page/page_icon_1@2x.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 40rpx 40rpx;
|
||
background-position: 0 center;
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.etf_item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
background: rgba(240, 247, 255, 1);
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #222222;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.code {
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.stock_item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx;
|
||
background: rgba(240, 247, 255, 1);
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
|
||
.name {
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #222222;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.code {
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 30rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.percent {
|
||
padding-right: 25rpx;
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #2fa054;
|
||
line-height: 33rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
|
||
&.up {
|
||
color: #e6253b;
|
||
background: url("@/assets/images/page/up2_icon@2x.png") no-repeat right center;
|
||
background-size: 20rpx 12rpx;
|
||
}
|
||
&.down {
|
||
color: #2fa054;
|
||
background: url("@/assets/images/page/down2_icon@2x.png") no-repeat right center;
|
||
background-size: 20rpx 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.company-tag {
|
||
padding: 30rpx 40rpx 0;
|
||
display: flex;
|
||
.txt {
|
||
margin-right: 16rpx;
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #d6a68c;
|
||
line-height: 33rpx;
|
||
}
|
||
}
|
||
|
||
.more-news {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.more-news-title {
|
||
padding-left: 53rpx;
|
||
background-image: url("@/assets/images/page/page_icon_2@2x.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 40rpx 40rpx;
|
||
background-position: 0 center;
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.more-news-list {
|
||
margin-top: 30rpx;
|
||
|
||
.news {
|
||
padding: 30rpx 0;
|
||
border-bottom: 2rpx solid #f3f3f5;
|
||
.title {
|
||
font-family: "PingFangSC, PingFang SC";
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
</style>
|