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">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>

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

<script>
import { computeOptionMethods } from '@/views/exercise_questions/data/common';
import PreviewMixin from './components/PreviewMixin';
import { GetStaticResources, 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: {},
      answer_list: [], // 用户答题数据
      active_index: 0,
    };
  },
  watch: {},
  created() {
    console.log(this.data);
    this.handleData();
  },
  mounted() {},
  methods: {
    // 初始化数据
    handleData() {
      this.answer_list = [];
      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);
        });
      });
      this.data.option_list.forEach((item) => {
        let obj = {
          mark: item.mark,
          audio_file_id: '',
        };
        item.definition_preview = item.definition.split('\n');
        this.answer_list.push(obj);
        let content_arr = item.content.trim().split('');
        let content_arrs = [];
        let content_arr_strokes = [];
        content_arr.forEach((itemc) => {
          if (itemc.trim()) {
            content_arrs.push(itemc.trim());
          }
        });
        content_arrs.forEach((itemc, indexc) => {
          content_arr_strokes.push(null);
          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
          let data = {
            hz: itemc,
          };
          GetStaticResources(MethodName, data).then((res) => {
            let obj = {
              hz: itemc.trim(),
              strokes: res,
            };
            content_arr_strokes[indexc] = obj;
          });
        });
        item.content_arr_strokes = content_arr_strokes;
      });
    },
  },
};
</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 {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        label {
          padding: 8px 16px;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          color: #fff;
          cursor: pointer;
          background: rgba(48, 110, 255, 30%);
          border-radius: 20px;

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

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

    .strock-chinese {
      border: 1px solid #e81b1b;
    }

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

  .strock-box {
    display: flex;
    column-gap: 16px;
    margin-top: 24px;
  }

  .strock-left {
    display: flex;
  }

  .pinyin-box {
    display: flex;
    gap: 4px;
    align-items: center;
    width: max-content;
    padding: 4px 8px;
    margin-top: 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-family: 'PingFang SC';
    font-size: 16px;
    line-height: 24px;
    color: #000;
  }

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

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

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

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