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>
    <!--  v-if="!(isPlayRebuild > 0) && playChannelId == 0" -->
    <view class="inputBottom" :style="{ bottom: bottomHeight + 'px' }">
      <view style="width: 10%"
        ><image
          src="/static/icon/note3.png"
          style="width: 39rpx; height: 39rpx; margin: 0 29rpx"
        ></image
      ></view>
      <view style="width: 73%; height: 100%; padding: 10rpx 0">
        <input
          v-model="noteValue"
          height="60"
          fixed="true"
          placeholder="您可以在这里输入笔记内容"
          type="text"
          :custom-style="inputStyle"
          :adjust-position="false"
          class="input"
          @focus="focusNote"
          @blur="blurNote"
        />
      </view>
      <view
        style="
          color: #007aff;
          font-size: 30rpx;
          font-weight: bold;
          width: 15%;
          text-align: center;
        "
        @click="postNote"
        >提交</view
      >
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "SaasMiniprogramNoteBox",
  props: {
    refPlv: {
      type: Object,
      defaule: () => {
        return {};
      },
    },
    isPlayRebuild: {},
  },
  inject: ["paramsFn"],
  data() {
    return {
      noteList: [],
      noteId: 0,
      noteValue: "",
      inputStyle: {
        background: "rgba(244, 244, 244, 0.98)",
        borderRadius: "24rpx",
        padding: "8rpx",
        marginBottom: "10rpx",
      },
      bottomHeight: 0,
    };
  },
  methods: {
    getNoteList() {
      this.$api
        .noteList({ ...this.params, ...{ sectionId: this.playSectionId } })
        .then((res) => {
          if (res.data.code == 200) {
            this.noteList = res.data.rows;
          }
        });
    },
    jumpNote(item) {
      this.noteId = item.noteId;
      this.$emit("jumpNote", item);
    },
    postNote() {
      let self = this;
      if (!(this.playSectionId > 0)) {
        this.$u.toast("目前无播放视频");
        return;
      }
      if (!this.noteValue) {
        this.$u.toast("请输入内容");
        return;
      }
      if (!this.params.gradeId) {
        this.$u.toast("暂无班级数据");
        return;
      }
      let noteSecond = this.refPlv.playCurrentTime
        ? this.refPlv.playCurrentTime()
        : 0;
      if (!noteSecond) {
        this.$u.toast("视频暂未开始");
        return;
      }
      let data = {
        sectionId: this.playSectionId,
        noteText: this.noteValue,
        noteDate: this.$method.getZeroTime(),
        noteSecond: noteSecond,
        ...this.params,
      };
      this.$api.postNote(data).then((res) => {
        if (res.data.code == 200) {
          this.$u.toast("发布成功");
          self.getNoteList();
          this.noteValue = "";
        }
      });
    },
    blurNote() {
      this.bottomHeight = 0;
    },
    focusNote(event) {
      this.bottomHeight = event.detail.height;
    },
  },
  computed: {
    ...mapGetters(["playSectionId"]),
    params() {
      return this.paramsFn(["orderGoodsId", "goodsId", "courseId"]);
    },
  },
  watch: {
    playSectionId: {
      handler(val) {
        this.getNoteList();
      },
      immediate: true,
    },
  },
};
</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;
}
.inputBottom {
  position: fixed;
  left: 0;
  bottom: 0;
  background: #ffffff;
  height: 98rpx;
  display: flex;
  align-items: center;
  width: 100%;

  .flex_auto {
    flex: 1;
    margin-left: 10%;
    word-break: break-all;
    // .input {
    //   height: 60rpx;
    // }
  }

  .btn {
    color: #007aff;
    font-size: 30rpx;
    font-weight: bold;
    width: 15%;
    text-align: center;
  }
  .input {
    background: rgba(244, 244, 244, 0.98);
    height: 60rpx;
    border-radius: 24rpx;
    margin-top: 12rpx;
  }
}
</style>