eep_page/src/views/book/courseware/preview/components/notes/NotesPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="notes-preview" :style="getAreaStyle()">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <div class="NPC-zhedie">
        <div
          class="topTitle"
          :style="{
            backgroundColor:
              data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
          }"
        >
          <div class="NPC-top-left">
            <span class="NPC-topTitle-text" v-html="data.title_con"></span>
            <span class="NPC-topTitle-text" v-if="showLang">
              {{ titleTrans[getLang()] }}
            </span>
          </div>
          <div class="NPC-top-right" @click="handleChangeTab">
            <span class="NPC-top-right-text">{{ wordShow ? '收起' : '展开' }}</span>
            <img v-if="wordShow" src="@/assets/down.png" alt="" />
            <img v-else class="rotate" src="@/assets/down.png" alt="" />
          </div>
        </div>
        <el-collapse-transition>
          <div v-show="wordShow" class="NPC-notes-list">
            <div v-for="(item, index) in data.option" :key="'NPC-notes' + index" class="NPC-notes">
              <div class="NPC-notes-con">
                <span
                  class="NPC-notes-con-number"
                  v-html="item.number"
                  :style="{
                    color:
                      data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                  }"
                ></span>
                <div class="NPC-notes-con-box">
                  <template v-if="isEnable(data.property.view_pinyin)">
                    <p class="pinyin-text">
                      <span
                        v-if="data.property.pinyin_position === 'top'"
                        class="pinyin"
                        v-html="item.pinyin"
                        :style="{
                          fontSize:
                            data.unified_attrib && data.unified_attrib.pinyin_size
                              ? data.unified_attrib.pinyin_size
                              : '',
                        }"
                      >
                      </span>
                      <span>
                        <span
                          v-if="data.property.pinyin_position === 'front'"
                          v-html="item.pinyin"
                          class="pinyin pinyin-front"
                          :style="{
                            fontSize:
                              data.unified_attrib && data.unified_attrib.pinyin_size
                                ? data.unified_attrib.pinyin_size
                                : '',
                          }"
                        ></span
                        ><span
                          class="NPC-notes-con-text"
                          v-html="item.con"
                          :style="{
                            color:
                              data.unified_attrib && data.unified_attrib.topic_color
                                ? data.unified_attrib.topic_color
                                : '',
                            fontSize:
                              data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                          }"
                        ></span
                        ><span
                          v-if="data.property.pinyin_position === 'back'"
                          v-html="item.pinyin"
                          class="pinyin pinyin-back"
                          :style="{
                            fontSize:
                              data.unified_attrib && data.unified_attrib.pinyin_size
                                ? data.unified_attrib.pinyin_size
                                : '',
                          }"
                        ></span>
                      </span>
                      <span
                        v-if="data.property.pinyin_position === 'bottom'"
                        class="pinyin"
                        v-html="item.pinyin"
                        :style="{
                          fontSize:
                            data.unified_attrib && data.unified_attrib.pinyin_size
                              ? data.unified_attrib.pinyin_size
                              : '',
                        }"
                      ></span>
                    </p>
                  </template>

                  <span
                    class="NPC-notes-con-text"
                    v-html="item.con"
                    v-else
                    :style="{
                      color:
                        data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                      fontSize:
                        data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
                    }"
                  ></span>
                  <span class="multilingual" v-if="showLang">
                    {{
                      multilingualTextList[getLang()] &&
                      multilingualTextList[getLang()][index] &&
                      multilingualTextList[getLang()][index][0]
                        ? multilingualTextList[getLang()][index][0]
                        : ''
                    }}
                  </span>
                </div>
              </div>
              <div class="NPC-notes-trans" v-html="item.interpret"></div>

              <div v-if="item.note" class="NPC-notes-note" v-html="item.note"></div>
              <div v-if="item.file_list[0]" class="NPC-notes-note-img">
                <el-image :src="item.pic_url" :preview-src-list="[item.pic_url]" fit="contain" />
              </div>
              <div class="NPC-notes-note" v-if="showLang">
                {{
                  multilingualTextList[getLang()] &&
                  multilingualTextList[getLang()][index] &&
                  multilingualTextList[getLang()][index][1]
                    ? multilingualTextList[getLang()][index][1]
                    : ''
                }}
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
  </div>
</template>

<script>
import { getNotesData, isEnable } from '@/views/book/courseware/data/notes';

import PreviewMixin from '../common/PreviewMixin';
import { GetFileURLMap } from '@/api/app';

export default {
  name: 'NotesPreview',
  components: {},
  props: ['notesData'],
  mixins: [PreviewMixin],
  data() {
    return {
      data: this.notesData ? this.notesData : getNotesData(),
      wordShow: true,
      multilingualTextList: {}, // 多语言对应的切割后的翻译
      titleTrans: {},
    };
  },
  computed: {},
  watch: {
    'data.option.length': {
      handler(val) {
        if (val) {
          // this.wordShow = isEnable(this.data.property.is_word_show);
          this.handleData();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  methods: {
    handleChangeTab() {
      this.wordShow = !this.wordShow;
    },
    handleData() {
      if (this.showLang) {
        this.data.multilingual.forEach((item) => {
          let trans_arr = item.translation.split('\n');
          this.$set(this.titleTrans, item.type, trans_arr[0] ? trans_arr[0] : '');
          let chunkSize = 2;
          let chunkedArr = trans_arr.splice(1).reduce((acc, curr, index) => {
            // 当索引是chunkSize的倍数时，开始一个新的子数组
            if (index % chunkSize === 0) {
              acc.push([curr]); // 开始新的子数组并添加当前元素
            } else {
              acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
            }
            return acc;
          }, []);
          this.$set(this.multilingualTextList, item.type, chunkedArr);
        });
      }
      this.data.option.forEach((item) => {
        if (item.file_list && item.file_list[0]) {
          GetFileURLMap({ file_id_list: item.file_list }).then(({ url_map }) => {
            this.$set(item, 'pic_url', url_map[item.file_list[0]]);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.notes-preview {
  @include preview-base;

  .NPC-zhedie {
    // margin-bottom: 24px;

    .topTitle {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 48px;
      padding-right: 16px;
      padding-left: 24px;
      overflow: hidden;
      background: #e35454;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-radius: 8px 8px 0 0;

      :deep p {
        margin: 0;
      }

      .NPC-top-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .NPC-topTitle-text {
          margin: 0 8px 0 0;
          font-family: 'sourceR';
          font-size: 16px;
          font-weight: bold;
          color: #fff;
        }
      }

      .NPC-top-right {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        cursor: pointer;

        &-text {
          font-size: 14px;
          font-weight: normal;
          line-height: 16px;
          color: #fff;
        }

        img {
          width: 16px;
          height: 16px;
          margin-left: 4px;
        }
      }

      .rotate {
        animation-name: firstrotate;
        animation-timing-function: linear;
        animation-direction: 2s;
        animation-fill-mode: both;
      }
    }

    .NPC-notes-list {
      padding: 24px 24px 5px;
      border: 1px solid rgba(0, 0, 0, 10%);
      border-top: none;
      border-radius: 0 0 8px 8px;

      .NPC-notes {
        width: 100%;
        margin-bottom: 24px;

        :deep p {
          margin: 0;
        }

        .NPC-notes-con {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 12px;

          .NPC-notes-con-box {
            flex: 1;
            margin-left: 5px;
          }

          .NPC-notes-con-number {
            font-family: 'robot';
            font-size: 14px;
            font-style: normal;
            font-weight: normal;
            line-height: 150%;
            color: #e35454;
          }

          .NPC-notes-con-text {
            width: max-content;
            margin: 0 5px;

            // font-size: 14px;
            font-style: normal;
            font-weight: normal;
            line-height: 1;
            color: #e35454;

            :deep p {
              // line-height: 150%;
              display: inline;
            }
          }
        }

        .pinyin {
          font-family: 'League';
          font-size: 14px;

          &-front,
          &-back {
            :deep p {
              // line-height: 150%;
              display: inline;
            }
          }
        }

        .NPC-notes-trans {
          padding-left: 27px;
          margin-bottom: 12px;
          font-size: 14px;
          font-style: normal;
          font-weight: bold;
          line-height: 150%;
          color: #000;
        }

        .NPC-notes-note {
          font-size: 14px;
          font-style: normal;
          font-weight: normal;
          line-height: 150%;
          color: #000;
          text-indent: 27px;
          word-break: break-word;
        }
      }
    }

    .NPC-notes-note-img {
      width: 100%;

      > div {
        max-width: 100%;

        > img {
          max-width: 100%;
        }
      }
    }
  }

  @keyframes firstrotate {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(180deg);
    }
  }

  @keyframes huifuRotate {
    0% {
      transform: rotateZ(180deg);
    }

    100% {
      transform: rotateZ(0deg);
    }
  }
}
</style>