397 lines
9.4 KiB
Vue
397 lines
9.4 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="title" :class="{ mohu: !isLogin }">{{ props.data.title }}</view>
|
|
<view class="author">
|
|
<view class="name" :class="{ mohu: !isLogin }">
|
|
<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: !isLogin }">{{ props.data.publishTime }}</view>
|
|
</view>
|
|
|
|
<!-- 两个标签 start -->
|
|
<view class="r_r_tags" :class="{ mohu: !isLogin }">
|
|
<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: !isLogin }">
|
|
<!-- <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: !isLogin }">
|
|
<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; margin-top: -30rpx">
|
|
<view class="name">
|
|
<text class="text">编辑:</text>
|
|
<text class="text">{{ props.data.editor }}</text>
|
|
</view>
|
|
|
|
<view class="name" style="margin-left: 40rpx">
|
|
<text class="text">二校:</text>
|
|
<text class="text">{{ props.data.secondReviewer }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="r_etf" style="margin-top: 80rpx">
|
|
<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>
|
|
|
|
<LoginPopup
|
|
:show="LoginShow"
|
|
@handlePopupClose="handlePopupClose"
|
|
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
|
@handlePopupErrorCallback="handlePopupErrorCallback" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { onLaunch, onShow, onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
|
|
import articleMock from "@/mock/article.js";
|
|
import LoginPopup from "@/components/loginPopup/index.vue";
|
|
import { Session } from "@/utils/storage";
|
|
import zhaiyaoImg from "../../assets/zixun/zhaiyao_icon.png";
|
|
|
|
const isLogin = ref(Session.get("token"));
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
const tagList1 = ref([
|
|
{
|
|
name: "医药生物-生物制药",
|
|
},
|
|
{
|
|
name: "医药生物-化学制药",
|
|
},
|
|
{
|
|
name: "医药生物-医疗服务",
|
|
},
|
|
]);
|
|
const LoginShow = ref(false);
|
|
// 关闭弹框
|
|
const handlePopupClose = () => {
|
|
LoginShow.value = false;
|
|
isLogin.value = Session.get("token");
|
|
};
|
|
// 登录成功回调
|
|
const handlePopupSuccessCallback = () => {
|
|
isLogin.value = Session.get("token");
|
|
console.log("🚀 ~ handlePopupSuccessCallback ~ isLogin.value:", isLogin.value);
|
|
};
|
|
|
|
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 (!isLogin.value) {
|
|
LoginShow.value = true;
|
|
}
|
|
});
|
|
|
|
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;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
position: relative;
|
|
background-color: #fff;
|
|
padding-bottom: 120rpx;
|
|
|
|
.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;
|
|
padding: 0 30rpx;
|
|
|
|
.etfs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.etf_title {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
line-height: 42rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.etf_item {
|
|
width: calc(50vw - 80rpx);
|
|
height: 64rpx;
|
|
background: #edf1f5;
|
|
border-radius: 8rpx;
|
|
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 44rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 5rpx 20rpx;
|
|
}
|
|
}
|
|
</style>
|