cankao-h5/src/components/article/indexNewsInfo.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">
        {{ props.data.companyName }}
      </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>