growthRecord.vue

<template>
  <div>
    <!-- scoringCategoryData != 0 -->
    <div class="growthRecord" v-if="scoringCategoryData.length !== 0" @scroll="scrollEvent">
      <div class="year-header" id="yearHeader" ref="yearHeader">{{ dataTimer }}</div>
      <div class="growthRecord-content" v-for="(item, index) in scoringCategoryData" :key="index">
        <!-- 年 -->
        <div class="growthRecord-content-year">{{ item.year }}年</div>
        <div class="growthRecord-content-children" :data-timer="itemChild.cur_date.split('-')[0]" v-for="(itemChild, itemIndex) in item.monthArr">
          <!-- 月，日 -->
          <div class="growthRecord-content-left" :style="{ opacity: itemChild.ataer == 1 ? '1' : '0' }"> <!-- style="opacity: 0;" -->
            <span class="day">{{ itemChild.month.split('-')[1] }}</span><span class="mouth">{{ itemChild.month.split('-')[0] }}月</span>
          </div>
          <!-- 月日对应的content -->
          <div class="growthRecord-content-right">
            <div class="growthRecord-content-right-sleeping">{{ itemChild.element_title }}</div>
            <div class="growthRecord-content-right-title">
              <span class="title">{{ itemChild.category_name.split(' ')[0] + ' ' +itemChild.category_name.split(' ')[1] }}</span>
              <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory1Active" alt="">
              <span class="num">{{ itemChild.interest }}</span>
              <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory2Active" alt="">
              <span class="num">{{ itemChild.concent }}</span>
              <img class="scoring-category-active" :src="scoringCategoryImage.scoringCategory3Active" alt="">
              <span class="num">{{ itemChild.parent_child }}</span>
            </div>
            <div class="rowthRecord-content-sub" @click="xiajiantou(itemChild.id)">
              <span class="fa-text" :data-id="itemChild.id" :data-int="1" v-html="itemChild.growth_record.replace(/\n/g, '<br/>')"></span>
              <span class=""><img class="xiajiantou" :src="scoringCategoryImage.xiajiantou" alt=""></span> <!-- @click="xiajiantou(itemChild.id)" -->
            </div>
            <div class="timer">{{ itemChild.created_at.split(' ')[1] }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据为空时 -->
    <div class="growthRecord-null" v-if="scoringCategoryData.length === 0">
      <img class="data-null" :src="dataNull" alt="">
      <div class="text-tishi">您还没有记录哦~</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { getUserGrowthListApi } from "../service/api";
  import { scoringCategory }      from "../util/imgUrl";
  import dataNull from '../assets/evaluate/null.png'

  export default {
    name: 'growthRecord',
    data() {
      return {
        dataNull: dataNull,       // 图片
        dataTimer: '',            // 获取滚动时间
        textArew: false,
        indexPa: -1,
        scoringCategoryData: [],  // 获取数据
        scoringCategoryImage: scoringCategory, // 获取图片
      }
    },
    methods: {
      async userGrowthRecordList() {
        const userGrowthRecordData = await getUserGrowthListApi();
        if(userGrowthRecordData.length === 0) return
        userGrowthRecordData.map(item => {
          item.monthArr = [];
          for(let k in item.month) {
            // 相同日期显示一个
            item.month[k][0].ataer = 1;
            // 数据重新整合
            for(let i = 0; i < item.month[k].length; i++) {
              item.monthArr.push(item.month[k][i])
            }
          }
        })
        this.scoringCategoryData = userGrowthRecordData;
        // 初始化滚动值
        this.dataTimer = userGrowthRecordData[0].monthArr[0].cur_date.split('-')[0];
        // 判断行数
        this.$nextTick(() => {
          var rowthRecord = document.querySelectorAll('.rowthRecord-content-sub')
          for(var i = 0; i < rowthRecord.length; i++) {
            let line = window.getComputedStyle(rowthRecord[i], null);
            var lh = parseInt(line.lineHeight, 10);
            var h = parseInt(line.height, 10);
            var lc = Math.round(h / lh);
            if(lc > 2) {
              rowthRecord[i].querySelectorAll('.fa-text')[0].classList.add('text')
            }else {
              rowthRecord[i].querySelectorAll('.xiajiantou')[0].style.display = 'none';
            }
          }
        })

      },
      /**
       * 滚动监听
       * @param e
       */
      scrollEvent(e) {
        let scroll = document.documentElement.scrollTop || document.body.scrollTop,
            growthRecordContentChildren = document.querySelectorAll('.growthRecord-content-children');
        for(let i = 0; i < growthRecordContentChildren.length; i++) {
          let top = growthRecordContentChildren[i].offsetTop,       // 获取 dom 离顶端的高度
              height = growthRecordContentChildren[i].offsetHeight, // 获取 dom 高度
              dataTimer = growthRecordContentChildren[i].getAttribute('data-timer'); // 获取 dom 里的时间
          if(scroll >= top && scroll <= top + height)
            this.dataTimer = dataTimer;
        }
      },
      xiajiantou(itemIndex, index) {
        let faText = document.querySelectorAll('.fa-text'),
            xiajiantou = document.querySelectorAll('.xiajiantou')
        for(var i = 0; i < faText.length; i++) {
          if(faText[i].getAttribute('data-id') == itemIndex && faText[i].getAttribute('data-int') == 1) {
            faText[i].style.display = 'inherit'
            faText[i].setAttribute('data-int', 2)
            xiajiantou[i].setAttribute('src', this.scoringCategoryImage.shangjiantopu)
          }else if(faText[i].getAttribute('data-id') == itemIndex && faText[i].getAttribute('data-int') == 2){
            faText[i].style.display = '-webkit-box'
            faText[i].setAttribute('data-int', 1)
            xiajiantou[i].setAttribute('src', this.scoringCategoryImage.xiajiantou)
          }
        }
      },
    },
    mounted() {
      this.introduce = '拥有财富、名声、权力，这世界上的一切的男人--哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。拥有财富、名声、权力，这世界上的一切的男人 “海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。”，世界开始迎接“大海贼时代”的来临。';
      window.addEventListener('scroll', this.scrollEvent, false)
      this.userGrowthRecordList()

    }
  }
</script>

<style lang="less" type="text/less">
  @import "../util/public";

  .growthRecord {
    width: 100%;
    padding: 20 * @toVw;
    box-sizing: border-box;
    .year-header {
      width: 100%;
      height: 30 * @toVw;
      padding-left: 20 * @toVw;
      position: fixed;
      line-height: 30 * @toVw;
      background: #F8F8F8;
      top: 0;
      left: 0;
      z-index: 10;
      font-size: 14 * @toVw;
    }

    .growthRecord-content {
      width: 100%;
      /* 年 */
      .growthRecord-content-year {
        padding: 16 * @toVw 0;
        font-size: 24 * @toVw;
        font-weight: 500;
        color: #333333;
      }
      /* 月，日 */
      .growthRecord-content-children {
        width: 100%;
        overflow: hidden;
        padding-bottom: 15 * @toVw;
        .growthRecord-content-left {
          width: 60 * @toVw;
          float: left;
          .day {
            font-size: 22 * @toVw;
            font-weight: 500;
            color: #333;
          }
          .mouth {
            padding-left: 2px;
            font-size: 14 * @toVw;
            color: #333;
          }
        }
        /* 月日对应的content */
        .growthRecord-content-right {
          width: calc(100% - 16vw);
          padding: 12 * @toVw;
          float: left;
          background: #e2f3fe;
          border-radius: 5 * @toVw;
          box-sizing: border-box;

          .growthRecord-content-right-sleeping {
            padding-bottom: 11 * @toVw;
            font-size: 14 * @toVw;
            font-weight: 500;
            color: #333;
          }
          .growthRecord-content-right-title {
            .title {
              padding-right: 12 * @toVw;
              vertical-align: middle;
              font-size: 13 * @toVw;
              font-weight: 500;
              color: #333;
            }

            .scoring-category-active {
              width: 20 * @toVw;
              height: 20 * @toVw;
              padding-left: 13 * @toVw;
              vertical-align: middle;
            }

            .num {
              vertical-align: middle;
              font-size: 13 * @toVw;
              color: #666666;
            }
          }
          .text {
            word-wrap: break-word;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .rowthRecord-content-sub {
            position: relative;
            padding-top: 10 * @toVw;
            line-height: 21 * @toVw;
            font-size: 14 * @toVw;
            color: #666666;
            .text1 {
              overflow: auto;
            }

            .shouqi {
              font-size: 14 * @toVw;
              color: #40A9FF;
              vertical-align: middle;
            }
            .xiajiantou {
              width: 17 * @toVw;
              height: 10 * @toVw;
              position: absolute;
              right: 0;
              bottom: 2px;
            }
          }

          .timer {
            padding-top: 10 * @toVw;
            color: #666666;
            font-size: 12 * @toVw;
          }
        }
      }
    }
  }

  .growthRecord-null {
    text-align: center;
    padding-top: 168 * @toVw;
    .data-null {
      width: 120 * @toVw;
      height: 120 * @toVw;
    }

    .text-tishi {
      padding-top: 20 * @toVw;
      font-size: 13 * @toVw;
      color: #666;
    }
  }

</style>