GCLS_Page_Exercise/src/views/exercise_questions/preview/WordCardPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="word-card-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(data.property.question_number) }}
      </span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>

    <!-- 笔画学习 -->
    <div :class="['words-box']">
      <el-image
        v-if="
          option_list[active_index] &&
          option_list[active_index].picture_file_id &&
          pic_list[option_list[active_index].picture_file_id]
        "
        :src="pic_list[option_list[active_index].picture_file_id]"
        fit="contain"
      />
      <div class="words-right">
        <template v-for="(item, index) in option_list">
          <div v-if="index === active_index" :key="index" class="strock-box">
            <div v-if="item.audio_file_id || item.pinyin" class="pinyin-box">
              <AudioPlay v-if="item.audio_file_id" :file-id="item.audio_file_id" theme-color="white" />
              <span class="pinyin">{{ item.pinyin }}</span>
            </div>
            <div v-if="item.hz_strokes_list && item.hz_strokes_list.length > 0" class="strock-left">
              <template v-for="(items, indexs) in item.hz_strokes_list">
                <Strockplayredline
                  v-if="items"
                  :key="indexs"
                  :play-storkes="true"
                  :book-text="items.hz"
                  :target-div="'pre' + items.hz + indexs + active_index"
                  :book-strokes="items.strokes"
                  :class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
                />
              </template>
            </div>
          </div>
        </template>
        <el-divider />
        <div v-if="option_list[active_index]" class="content-box">
          <span v-if="option_list[active_index].definition_preview.length > 0" class="tips">释义：</span>
          <p v-for="(itemd, indexd) in option_list[active_index].definition_preview" :key="indexd" class="definition">
            {{ itemd }}
          </p>
          <span v-if="option_list[active_index].collocation" class="tips">搭配：</span>
          <p v-if="option_list[active_index].collocation" class="definition">
            {{ option_list[active_index].collocation }}
          </p>
          <span v-if="option_list[active_index].example_sentence.length > 0" class="tips">例句：</span>
          <template v-for="(iteme, indexe) in option_list[active_index].example_sentence">
            <p v-if="iteme.trim()" :key="indexe + iteme.trim()" class="example-sentence">
              <span>{{ computeOptionMethods[data.option_number_show_mode](indexe) }} </span>
              <span>{{ iteme }}</span>
            </p>
          </template>
        </div>
        <el-divider />
        <div v-if="answer.answer_list[active_index]" class="sound-box">
          <SoundRecordPreview
            :wav-blob.sync="answer.answer_list[active_index].audio_file_id"
            :type="'small'"
            :disabled="disabled"
          />
        </div>
      </div>

      <div v-if="option_list.length > 1" :class="['words-item']">
        <label
          v-for="(item, index) in option_list"
          :key="index"
          :class="[active_index === index ? 'active' : '']"
          @click="active_index = index"
          >{{ item.content }}</label
        >
      </div>
    </div>
  </div>
</template>

<script>
import { computeOptionMethods } from '@/views/exercise_questions/data/common';
import PreviewMixin from './components/PreviewMixin';
import { GetFileStoreInfo } from '@/api/app';
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
import Strockplayredline from './components/common/Strockplayredline.vue';

export default {
  name: 'WordCardPreview',
  components: { SoundRecordPreview, Strockplayredline },
  mixins: [PreviewMixin],
  data() {
    return {
      computeOptionMethods,
      hanzi_color: '#404040', // 描红汉字底色
      pic_list: {},
      active_index: 0,
      option_list: [],
    };
  },
  watch: {
    data: {
      handler(val) {
        if (!val || this.data.type !== 'word_card') return;
        this.handleData();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.handleData();
  },
  mounted() {},
  methods: {
    // 初始化数据
    handleData() {
      this.pic_list = {};
      this.data.file_id_list.forEach((item) => {
        GetFileStoreInfo({ file_id: item }).then(({ file_id, file_url }) => {
          this.$set(this.pic_list, file_id, file_url);
        });
      });
      let option_list = JSON.parse(JSON.stringify(this.data.option_list));
      option_list.forEach((item) => {
        let obj = {
          mark: item.mark,
          audio_file_id: '',
        };
        item.definition_preview = item.definition.split('\n');
        if (!this.isJudgingRightWrong) {
          this.answer.answer_list.push(obj);
        }
      });
      this.option_list = option_list;
    },
  },
};
</script>

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

.word-card-preview {
  @include preview;

  .words-box {
    display: flex;
    column-gap: 24px;

    .el-image {
      flex-shrink: 0;
      width: 346px;
      height: 346px;
    }

    .words-right {
      flex: 1;
    }

    .words-item {
      width: 120px;

      label {
        display: block;
        padding: 8px 16px;
        margin-bottom: 4px;
        font-size: 18px;
        font-weight: 400;
        line-height: 26px;
        color: rgba(0, 0, 0, 30%);
        cursor: pointer;
        border-radius: 20px;

        &.active {
          color: #fff;
          background: rgba(48, 110, 255, 100%);
        }
      }
    }

    .pinyin {
      font-family: 'League';
      font-size: 16px;
      font-weight: 500;
      color: #fff;
    }

    .strock-chinese {
      width: 96px;
      height: 96px;
      border: 1px solid #e81b1b;

      :deep .strock-play-box {
        width: 16px;
        height: 16px;
      }
    }

    .border-right-none {
      border-right: none;
    }
  }

  .strock-left {
    display: flex;
  }

  .pinyin-box {
    display: flex;
    gap: 4px;
    align-items: center;
    width: max-content;
    padding: 4px 8px;
    margin-bottom: 10px;
    background: rgba(47, 111, 236, 100%);
    border-radius: 40px;

    :deep .audio-play {
      width: auto;
      height: 24px;
      background: none;
    }
  }

  .definition {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
  }

  .tips {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: rgba(0, 0, 0, 40%);
  }

  .example-sentence {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #000;
  }

  .sound-box {
    width: max-content;
    padding: 8px;
    background: $content-color;
    border-radius: 40px;
  }

  .el-divider {
    margin: 16px 0;
  }
}
</style>