GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Hanzi.vue

<!--  -->
<template>
  <div class="Big-Book-singleHanzi" v-if="curQue && fn_list_obj">
    <div
      class="Big-Book-singleHanzi-main"
      v-for="(item, index) in curQue.option"
      :key="'shz' + index"
    >
      <p class="Big-Book-pinyin" v-if="item.pinyin">{{ item.pinyin }}</p>
      <div class="Big-Book-hanzi">
        <template v-if="fn_list_obj.copy">
          <Adultstrockred
            :index="pageIndex + '_' + curIndex + '_' + queIndex + '_' + index"
            :hanzi="item.hanzi"
          />
        </template>
        <template v-else>
          <Adultstrockplay
            :index="pageIndex + '_' + curIndex + '_' + queIndex + '_' + index"
            :hanzi="item.hanzi"
          />
        </template>
      </div>
      <template v-if="fn_list_obj.copy">
        <div class="Big-Book-clear-bg">
          <img src="../../../assets/adult/clear.png" class="Big-Book-clear" />
        </div>
      </template>
      <template v-else>
        <div class="Big-Book-en" v-if="item.english">{{ item.english }}</div>
        <div class="Big-Book-def" v-if="fn_list_obj.def">更多释义</div>
        <div class="Big-Book-fn">
          <template v-if="fn_list_obj.spell">
            <ul class="Big-Book-btn-list">
              <li
                class="Big-Book-tone-btn-bg"
                v-for="(tItem, tIndex) in tone_list"
                :key="'tone' + tIndex"
              >
                <img :src="tItem" class="Big-Book-tone-img" />
              </li>
            </ul>
            <el-input
              type="text"
              v-model="answer[index].spell[0]"
              style="margin-top: 8px"
            ></el-input>
          </template>
          <template v-else-if="fn_list_obj.input">
            <ul
              class="Big-Book-btn-list"
              style="margin-top: 8px; margin-bottom: 8px"
            >
              <li class="Big-Book-btn-bg" v-if="item.mp3_list.length > 0">
                <img src="../../../assets/adult/play-mp3-blue.png" />
              </li>
              <li class="Big-Book-btn-bg">
                <img
                  src="../../../assets/adult/coll-icon.png"
                  style="width: 15px; height: 15px"
                />
              </li>
              <li class="Big-Book-btn-bg">
                <img src="../../../assets/adult/exercise-icon.png" />
              </li>
            </ul>
            <el-input type="text" v-model="answer[index].input[0]"></el-input>
          </template>
          <template v-else-if="fn_list_obj.record">
            <ul class="Big-Book-btn-list" style="margin-top: 8px">
              <li class="Big-Book-btn-bg">
                <img src="../../../assets/adult/play-mp3-black.png" />
              </li>
              <li class="Big-Book-btn-bg">
                <img src="../../../assets/adult/record-icon.png" />
              </li>
              <li class="Big-Book-btn-bg">
                <img src="../../../assets/adult/play-record.png" />
              </li>
            </ul>
          </template>
          <template v-else-if="fn_list_obj.judge">
            <el-radio-group
              v-model="answer[0].judge[index]"
              @change="changAnswer(index, 'judge')"
            >
              <el-radio label="'true'">正确</el-radio>
              <el-radio label="'false'">错误</el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="fn_list_obj.checkBox">
            <el-checkbox
              v-model="item.isChecked"
              @change="changAnswer(index, 'checkBox')"
            ></el-checkbox>
          </template>
          <template v-else-if="fn_list_obj.single">
            <el-radio
              v-model="answer[0].single[0]"
              :label="index"
              @change="changAnswer(index, 'single')"
              ><span></span
            ></el-radio>
          </template>
          <template v-else>
            <ul class="Big-Book-btn-list" style="margin-top: 8px">
              <li class="Big-Book-btn-bg" v-if="item.mp3_list.length > 0">
                <img src="../../../assets/adult/play-mp3-blue.png" />
              </li>
              <li class="Big-Book-btn-bg">
                <img
                  src="../../../assets/adult/coll-icon.png"
                  style="width: 15px; height: 15px"
                />
              </li>
              <li class="Big-Book-btn-bg">
                <img src="../../../assets/adult/exercise-icon.png" />
              </li>
            </ul>
          </template>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Adultstrockplay from "./components/Adultstrockplay.vue";
import Adultstrockred from "./components/Adultstrockred.vue";
export default {
  components: { Adultstrockplay, Adultstrockred },
  props: ["curQue", "pageIndex", "curIndex", "queIndex"],
  data() {
    return {
      fn_list_obj: null,
      answer: [],
      tone_list: [
        require("../../../assets/adult/v1.png"),
        require("../../../assets/adult/v2.png"),
        require("../../../assets/adult/v2.png"),
        require("../../../assets/adult/v2.png"),
      ],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handleFnList() {
      let obj = {};
      this.curQue.fn_list.forEach((item) => {
        if (item.isFn) {
          obj[item.type] = true;
        } else {
          obj[item.type] = false;
        }
      });
      this.fn_list_obj = obj;
      console.log(this.fn_list_obj);
    },
    // 修改正确选项中得某一个为正确答案
    changAnswer(index, type) {
      if (type == "single") {
        console.log(this.answer);
      } else if (type == "checkBox") {
        let correct = [];
        this.curQue.option.forEach((item, i) => {
          if (item.isChecked) {
            correct.push(i);
          }
        });
        this.answer[0].checkBox = correct;
        console.log(this.answer);
      } else if (type == "judge") {
        console.log(this.answer);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQue) {
      this.handleFnList();

      let obj = {
        single: [],
        checkBox: [],
        judge: [],
        input: [],
        spell: [],
      };
      this.answer.push(obj);
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book {
  &-singleHanzi {
    clear: both;
    overflow: hidden;
  }
  &-clear-bg {
    background: #f7f7f7;
    border-radius: 4px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  &-clear {
    width: 24px;
    height: 24px;
  }
  &-singleHanzi-main {
    width: 160px;
    height: 272px;
    left: 32px;
    top: 77px;
    background: #ffffff;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 8px;
    float: left;
    margin: 10px 10px 0 0;
  }
  &-pinyin {
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #000000;
    margin-bottom: 8px;
  }
  &-hanzi {
    width: 144px;
    height: 144px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
  }
  &-en {
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #000000;
    margin-bottom: 8px;
  }
  &-def {
    font-weight: normal;
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: #000000;
    opacity: 0.5;
    cursor: pointer;
  }
  &-btn-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  &-tone-btn-bg {
    width: 30px;
    height: 30px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  &-btn-bg {
    width: 46px;
    height: 40px;
    background: #f7f7f7;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &.hanzi-record {
      background: #ffecec;
    }
    > img {
      width: 24px;
      background: 24px;
    }
  }
  &-tone-img {
  }
}
</style>