horzi_rai_wxa/components/ItemComponent/reportItem.vue

<template>
  <view class="container-report-item global_card_content" @click="goDetail(list)">
    <image v-if="list.CategoryId == '0' && !(list.ReportId && list.ReportId > 0)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/Research_normal.png" class="yan-xuan-tag"></image>
    <image v-if="list.Source == 'yanxuanspecial'" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/YX_zl.png" class="yan-xuan-tag"></image>
    <view v-if="(list.CategoryId == '0' || list.Source == 'yanxuanspecial') && !(list.ReportId && list.ReportId > 0)" class="yan-xuan-tag-box"></view>
    <view class="global_title" v-if="list.Title">
      <mp-html :content="richTextClamp(3) + isTypeTitle(list) + list.Title + '</div>'" />
    </view>
    <view class="item-image" v-if="list.BodyHtml">
      <image :src="list.BodyHtml"></image>
    </view>
    <view class="item-image" v-if="list.Cover">
      <image :src="list.Cover"></image>
    </view>
    <block v-if="(list.Annotation || list.Body[0]) && !list.Cover">
      <view class="global_content item-rich-text">
        <text v-if="!list.Body[0]">{{ list.ArticleResponse == 4 ? "核心观点" : "核心结论" }}:</text>
        <mp-html :content="richTextClamp(7) + (list.Annotation || list.Body[0]) + '</div>'" />
      </view>
    </block>
    <view class="item-abstract text-Line" v-if="list.Abstract && list.ArticleResponse != 1"> 摘要：{{ list.Abstract }} </view>
    <view class="item-time">
      <text>{{ list.PublishDate }}</text>
      <view class="item-examine" v-if="list.Source != 'yanxuanspecial'">
        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/examine_icon.png"></image>
        <text>{{ list.Pv }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import mpHtml from "@/uni_modules/mp-html/components/mp-html/mp-html.vue";
export default {
  name: "",
  components: { mpHtml },
  props: {
    list: {
      type: Object,
      default: {},
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goDetail(item) {
      if (item.Source === "yanxuanspecial") {
        uni.navigateTo({ url: "/pages-purchaser/noteAndViewpoint/noteAndViewpoint?id=" + item.Id });
        return;
      }
       if (!item.Source && item.ReportId && item.ReportId > 0) {
        uni.navigateTo({ url: "/pages-ficc/reportDetail/reportDetail?id=" + item.ReportId });
        return;
      }
      if (item.HomeType !== 1) {
        /* 无需授权且已绑定 检验是或否有权限 */
        uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
      }
    },
    richTextClamp(val) {
      return `<div style="${
        val == 7 ? "min-height: 50px;" : ""
      }line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
    },
    isTypeTitle(item) {
      let str = "";
      if (item.Source === "yanxuanspecial") {
        str = item.Type == 1 ? "【笔记】" : "【观点】";
      }
      return str;
    },
  },
};
</script>
<style scoped lang="scss">
.container-report-item {
  width: 100%;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  position: relative;
  min-height: 220rpx;
  .yan-xuan-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 160rpx;
    height: 48rpx;
    z-index: 2;
  }
  .yan-xuan-tag-box {
    height: 35rpx;
  }
  .item-content {
    margin-top: 10rpx;
  }
  .item-rich-text {
    margin: 28rpx 0;
  }
  .item-image {
    height: 238rpx;
    margin: 15rpx 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .item-abstract {
    font-size: 22rpx;
    font-weight: 400;
    color: #333333;
    line-height: 30rpx;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 20rpx;
  }
  .text-Line {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
  }

  .item-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #999;
    font-size: 22rpx;
    line-height: 30rpx;
    .item-examine {
      display: flex;
      align-items: center;
      image {
        width: 30rpx;
        height: 30rpx;
        margin: 0 10rpx 0 15rpx;
      }
    }
  }
}
</style>