cankao-h5/src/components/article/index.vue

<template>
  <view class="main">
    <view class="title">{{ props.data.title }}</view>
    <view class="author">
      <view class="name">
        <text class="text">来源:</text>
        <text class="text">{{ 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">{{ props.data.publishTime }}</view>
    </view>

    <!-- 摘要 -->
    <view class="desc" v-if="props.data.summary">
      <view class="bill_icon"></view>
      {{ props.data.summary }}
    </view>

    <view class="thumbnail" v-if="props.data.picture">
      <image :src="props.data.picture" mode="widthFix" />
    </view>

    <view
      class="articleDes"
      :class="props?.data?.needpay && 'needpay'"
      v-html="props.data.content"
    >
    </view>
  </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";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

console.log("props.data ===>", props.data);

const show = ref(false);
const type = ref("");
const handleClick = (value: any) => {
  show.value = value;
};

onLoad((option) => {
  type.value = option?.type || "list";
});

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;

  .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: #f5f5f5;
    width: 700rpx;
    margin: 30rpx auto;
    color: rgba(51, 51, 51, 0.6);
    // font-size: 28rpx;
    font-size: var(--h2-font-size);
    text-indent: 0.5em;
    white-space: pre-wrap;
    overflow-wrap: break-word;

    /* 在必要时单词内部断行 */
    .bill_icon {
      width: 28rpx;
      height: 28rpx;
      float: left;
      margin-right: 12rpx;
      margin-top: 6rpx;
      background-size: contain;
      background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_act_lt.png);
    }
  }

  .thumbnail {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
  }
}

.articleDes {
  padding: 0 30rpx 30rpx 30rpx;
  box-sizing: border-box;

  ::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;
  }
}
</style>