horzi_rai_wxa/components/report/timeLine.vue

<template>
  <view class="time-line">
    <view class="line-item" v-for="(item, index) in dataList" :key="index" @click="goDetailFromTimeLine(item, index)">
      <view class="time">{{ item.date }}</view>
      <view class="content" v-if="item.Content.length">
        <text class="content-reg" v-if="item.IsRed"></text>
        <rich-text
          :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }"
          :data-index="index"
          :class="['rich-text', item.isExpand && 'expand', (item.ArticleId || item.ChartId) && 'texe-color']"
          :nodes="item.Content"
        >
        </rich-text>
        <view
          class="expan-btn"
          :class="[{ pos: !item.isExpand }, (item.ArticleId || item.ChartId) && 'expan-btn-padding']"
          @click.stop="handleExpand(item, index)"
          v-if="item.isShowBtn"
          >{{ item.isExpand ? "收起" : "展开" }}</view
        >
      </view>
      <view class="title" v-else>
        <text class="content-reg" v-if="item.IsRed"></text>
        {{ item.Title }}</view
      >
    </view>
    <view v-show="loadTimeLine" class="loadTimeLine"></view>
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";

export default {
  name: "",
  components: {},
  props: {
    dataList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      richTextHeight: 10000,
      loadTimeLine: false, //时间线的遮罩
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async goDetailFromTimeLine(item, index) {
      item.TimeLineId &&
        (await Reports.postTacticsHistory({
          TimeLineId: item.TimeLineId,
        }));
      if (item.Content.length !== 0 && !item.ArticleId && !item.ChartId) return;
      if (item.SubCategoryName === "路演精华") {
        //跳转路演精华
        uni.navigateTo({
          url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
        });
      } else {
        !item.ArticleId && !item.ChartId && this.$emit("setRouter");
        if (item.Id || item.ArticleId) {
          uni.navigateTo({
            url: "/pageMy/reportDetail/reportDetail?id=" + (item.Id || item.ArticleId),
          });
        } else if (item.ChartId) {
          uni.navigateTo({
            url: "/pageMy/chartPage/chartPage?id=" + item.ChartId,
          });
        }
      }
    }, //展开收起晨会内容
    // 去往文章详情的
    async handleExpand(item, index) {
      item.TimeLineId
        ? await Reports.postTacticsHistory({
            TimeLineId: item.TimeLineId,
          })
        : this.getRecordTracking("展开收起", { Id: item.Id });
      item.isExpand = !item.isExpand;
      this.$parent.timeLine.splice(index, 1, item);
    },
    getConentsHeight() {
      const query = wx.createSelectorQuery().in(this);
      query.selectAll(".rich-text").boundingClientRect();
      query.exec((res) => {
        //根据timeLine的第一项确定当前手机三行文字的高度
        const standardHeight = res[0][0].height;
        this.richTextHeight = standardHeight;
        res[0].forEach((item) => {
          let temp = this.$parent.timeLine[item.dataset.index];
          //超过这个高度的,需要显示展开/收起按钮
          if (item.height > standardHeight) {
            temp.isExpand = false;
            temp.isShowBtn = true;
          } else {
            temp.isExpand = true;
            temp.isShowBtn = false;
          }
        });
        //然后把timeLine的第一项扔掉
        this.$parent.timeLine.shift();
        this.loadTimeLine = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.time-line {
  padding: 30rpx 40rpx 20rpx 40rpx;
  min-height: calc(100vh - 190rpx);
  background-color: #ffffff;
  position: relative;
  .texe-color {
    color: #3385ff;
  }
  .loadTimeLine {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    background-color: #fff;
    z-index: 6;
  }
  .line-item {
    position: relative;
    padding: 0 0 50rpx 40rpx;
    /* border-left:1rpx solid #DAE9FD; */
    &:last-child {
      padding-bottom: 0;
      &::after {
        height: calc(100% - 25rpx);
      }
    }
    &:first-child {
      .time {
        &::after {
          background-color: #3385ff;
        }
      }
    }
    &::before,
    &::after {
      position: absolute;
      content: "";
    }
    &::before {
      width: 24rpx;
      height: 24rpx;
      background-color: #dae9fd;
      z-index: 1;
      left: 0;
      top: 27rpx;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
    &::after {
      top: 17rpx;
      left: 0;
      width: 1rpx;
      height: calc(100%);
      background-color: #dae9fd;
      z-index: 2;
    }
    .time {
      width: 245rpx;
      height: 55rpx;
      text-align: center;
      line-height: 45rpx;
      padding: 5rpx 20rpx;
      background-color: #f5f9ff;
      border-radius: 64rpx;
      color: #5181c9;
      font-size: 32rpx;
      margin-bottom: 20rpx;
      position: relative;
      &::before,
      &::after {
        position: absolute;
        content: "";
        left: -36rpx;
        top: 27rpx;
        width: 24rpx;
        height: 1rpx;
        background-color: #dae9fd;
        z-index: 1;
      }
      &::after {
        left: -40rpx;
        top: 27rpx;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-color: #9dc5ff;
        z-index: 3;
      }
    }
    .content {
      color: #666666;
      position: relative;
      .rich-text {
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        position: relative;
        &.expand {
          -webkit-line-clamp: 999;
          height: auto;
        }
      }
      .expan-btn {
        color: #2c83ff;
        text-align: right;
        &.pos {
          padding: 0 0 0 40rpx;
          background-color: rgba(255, 255, 255, 0.882);
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
      .expan-btn-padding {
        &.pos {
          padding: 0 0 0 80rpx;
        }
      }

      .content-reg {
        position: absolute;
        top: 10rpx;
        left: -20rpx;
        width: 14rpx;
        height: 14rpx;
        background-color: #ff0000;
        border-radius: 50%;
      }
    }
    .title {
      position: relative;
      color: #3385ff;
      .content-reg {
        position: absolute;
        top: 10rpx;
        left: -20rpx;
        width: 14rpx;
        height: 14rpx;
        background-color: #ff0000;
        border-radius: 50%;
      }
    }
  }
}
</style>