saas_miniprogram/components/course/noteBox.vue

<template>
  <view>
    <view v-if="noteList.length == 0" style="text-align: center">暂无笔记</view>
    <view v-for="(item, index) in noteList" :key="index">
      <view class="dateBox">{{ $method.timestampToTime(item.dateNote) }}</view>
      <view class="noteBox">
        <view
          v-for="(item1, index1) in item.userNotes"
          :key="index1"
          style="margin-top: 30rpx"
          @click="jumpNote(item1)"
        >
          <view style="display: flex">
            <view class="left_ti">
              <view>
                <image
                  src="/static/icon/note2.png"
                  v-if="noteId != item1.noteId"
                  style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
                ></image>
                <image
                  src="/static/icon/note1.png"
                  v-if="noteId == item1.noteId"
                  style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
                ></image>
              </view>
              <view
                class="title"
                style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
                >{{ $method.secondToDate(item1.noteSecond) }}</view
              >
            </view>
            <view style="margin-left: 10rpx">
              <view class="t2Content leftPadding">{{ item1.sectionName }}</view>
              <view class="tBox2">{{ item1.noteText }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SaasMiniprogramNoteBox",
  props: {
    params: {
      type: Object,
      defaule: {},
    },
  },
  data() {
    return {
      noteList: [],
      noteId: 0,
    };
  },
  mounted() {
    this.getNoteList();
  },

  methods: {
    getNoteList() {
      this.$api
        .noteList({ ...this.param, ...{ sectionId: this.playSectionId } })
        .then((res) => {
          if (res.data.code == 200) {
            this.noteList = res.data.rows;
            console.log(this.noteList, 789);
          }
        });
    },
    jumpNote(item) {
      this.noteId = item.noteId;
      this.$emit('jumpNote', item);
    },
  },
  computed: {
    ...mapGetters(["playSectionId"]),
  },
};
</script>

<style lang="scss" scoped>
.leftPadding {
  margin-left: 8rpx;
}
.dateBox {
  width: 216rpx;
  height: 48rpx;
  background: #ffffff;
  border-radius: 24rpx;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  line-height: 48rpx;
  margin: 16rpx 0rpx 8rpx;
}
.noteBox {
  width: 100%;
  background: #ffffff;
  padding: 0rpx 10rpx 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  .left_ti {
    padding-top: 14rpx;
    .title {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
.t2Content {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  line-height: 48rpx;
}
.tBox2 {
  display: flex;
  padding-top: 10rpx;
  color: #333333;
  font-size: 30rpx;
  font-weight: 400;
}
</style>