GCLS_Page_Book_Component_NPC/src/components/Adult/common/HzModule.vue

<!--  -->
<template>
  <div class="Big-Book-HzModule">
            

    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片：</span>
      <Upload
        :changeFillId="changeImage"
        :datafileList="fileCon.img_list"
        :filleNumber="imgNumber"
        :uploadType="'image'"
      />
    </div>
    <template v-if="type == 'image_single' || type == 'image_checkBox'">
      <div v-for="(item, i) in curQueItem.option" :key="'op' + i">
        <div class="adult-book-input-item">
          <span class="adult-book-lable">内容：</span>
          <el-input
            type="textarea"
            class="adult-book-input"
            :autosize="{ minRows: 2 }"
            placeholder="请输入文字"
            v-model="item.hanzi"
            @blur="onBlur(item, 'hanzi')"
            maxlength="200"
            show-word-limit
          ></el-input>
          <div v-if="checkList.indexOf('image_single') > -1">
            <el-radio
              @change="changeIsAnswer('single', i)"
              v-model="item.isAnswer"
              :label="i"
              >答案</el-radio
            >
          </div>
          <div v-if="checkList.indexOf('image_checkBox') > -1">
            <el-checkbox
              @change="changeIsAnswer('checkBox', i)"
              v-model="item.isChecked"
              :label="i"
              >答案</el-checkbox
            >
          </div>
          <img
            @click="childdeleteoption(index, i)"
            class="close"
            src="../../../assets/adult/del-close.png"
            alt=""
          />
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">拼音：</span>
          <el-input
            type="textarea"
            class="adult-book-input"
            :autosize="{ minRows: 2 }"
            placeholder="请输入拼音"
            v-model="item.pinyin"
            @blur="onBlur(item, 'pinyin')"
            maxlength="200"
            show-word-limit
          ></el-input>
          <el-button @click="getPinyin(item)">生成拼音</el-button>
        </div>
      </div>
      <div
        v-if="type == 'image_single' || type == 'image_checkBox'"
        class="addoption"
        @click="childaddOption(index)"
      >
        添加选项
      </div>
    </template>
    <template v-else>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">内容：</span>
        <el-input
          type="textarea"
          class="adult-book-input"
          :autosize="{ minRows: 2 }"
          placeholder="请输入文字"
          v-model="curQueItem.hanzi"
          @blur="onBlur(curQueItem, 'hanzi')"
          maxlength="200"
          show-word-limit
        ></el-input>
        <div class="adult-book-input-item">
          <div v-if="checkList.indexOf('image_single') > -1">
            <el-radio
              @change="changeIsAnswer('single')"
              v-model="curQueItem.isAnswer"
              :label="index"
              >答案</el-radio
            >
          </div>
          <div v-if="checkList.indexOf('image_checkBox') > -1">
            <el-checkbox
              @change="changeIsAnswer('checkBox')"
              v-model="curQueItem.isChecked"
              :label="index"
              >答案</el-checkbox
            >
          </div>
          <div v-if="checkList.indexOf('image_judge') > -1">
            <el-radio-group v-model="curQue.correct[0].judge[index]">
              <el-radio label="true">正确</el-radio>
              <el-radio label="false">错误</el-radio>
            </el-radio-group>
          </div>
          <div
            class="adult-book-input-item"
            v-if="checkList.indexOf('image_spell') > -1"
          >
            <span class="adult-book-lable">答案：</span>
            <el-input
              type="textarea"
              class="adult-book-input"
              :autosize="{ minRows: 2 }"
              placeholder="请输入答案"
              v-model.trim="curQue.correct[0].spell[index]"
              maxlength="200"
              show-word-limit
            ></el-input>
          </div>
        </div>
      </div>
      <div class="adult-book-input-item">
        <span class="adult-book-lable">拼音：</span>
        <el-input
          type="textarea"
          class="adult-book-input"
          :autosize="{ minRows: 2 }"
          placeholder="请输入拼音"
          v-model="curQueItem.pinyin"
          @blur="onBlur(curQueItem, 'pinyin')"
          maxlength="200"
          show-word-limit
        ></el-input>
        <el-button @click="getPinyin(curQueItem)">生成拼音</el-button>
      </div>
    </template>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">文字位置：</span>
      <el-radio-group v-model="curQueItem.hanziSite">
        <el-radio label="top">图片上方</el-radio>
        <el-radio label="bottom">图片下方</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">拼音位置：</span>
      <el-radio-group v-model="curQueItem.pinyinSite">
        <el-radio label="top">文字上方</el-radio>
        <el-radio label="bottom">文字下方</el-radio>
      </el-radio-group>
    </div>
    <div
      style="margin-top: 10px"
      class="adult-book-input-item"
      v-if="
        checkList.indexOf('image_input') > -1 ||
        checkList.indexOf('image_gdcy') > -1 ||
        checkList.indexOf('image_dobleinput') > -1 ||
        checkList.indexOf('image_wordInput') > -1
      "
    >
      <span class="adult-book-lable">答案：</span>
      <el-input
        type="textarea"
        class="adult-book-input"
        :autosize="{ minRows: 2 }"
        placeholder="请输入答案"
        v-model="curQue.correct[0].input[0]"
        @blur="onBlurCorrect(curQue.correct[0].input, 0)"
        maxlength="200"
        show-word-limit
      ></el-input>
    </div>
    <div
      style="margin-top: 10px"
      class="adult-book-input-item"
      v-if="checkList.indexOf('image_dobleinput') > -1"
    >
      <span class="adult-book-lable">答案：</span>
      <el-input
        type="textarea"
        class="adult-book-input"
        :autosize="{ minRows: 2 }"
        placeholder="请输入答案"
        v-model="curQue.correct[0].input[1]"
        @blur="onBlurCorrect(curQue.correct[0].input, 1)"
        maxlength="200"
        show-word-limit
      ></el-input>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">录音控件：</span>
      <el-radio-group v-model="curQueItem.RecordControl">
        <el-radio label="mini">mini</el-radio>
        <el-radio label="normal">normal</el-radio>
        <el-radio label="pro">pro</el-radio>
        <el-radio label="pro-max">pro-max</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item" v-if="curQueItem.RecordControl">
      <span class="adult-book-lable">控件展示：</span>
      <img
        v-if="curQueItem.RecordControl == 'mini'"
        src="../../../assets/adult/mini.png"
        alt=""
      />
      <img
        v-else-if="curQueItem.RecordControl == 'normal'"
        src="../../../assets/adult/normal.png"
        alt=""
      />
      <img
        v-else-if="curQueItem.RecordControl == 'pro'"
        src="../../../assets/adult/pro.png"
        alt=""
      />
      <img
        v-else-if="curQueItem.RecordControl == 'pro-max'"
        src="../../../assets/adult/pro-max.png"
        alt=""
      />
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">音频：</span>
      <Upload
        :changeFillId="changeMp3"
        :datafileList="fileCon.mp3_list"
        :filleNumber="mp3Number"
        :uploadType="'mp3'"
      />
    </div>
  </div>
</template>

<script>
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: { Upload },
  props: [
    "curQue",
    "curQueItem",
    "index",
    "changAnswer",
    "deleteOptionOne",
    "checkList",
    "type",
    "addOption",
    "deleteoption",
  ],
  data() {
    return {
      //checkListRes: [],
      fileCon: {
        mp3_list: [],
        img_list: [],
      },
      mp3Number: 1,
      imgNumber: 1,
    };
  },
  computed: {},
  watch: {
    // checkList: {
    //   handler: function (val, oldVal) {
    //     const _this = this;
    //     _this.checkListRes = val;
    //   },
    //   // 深度观察监听
    //   deep: true,
    // },
  },
  //方法集合
  methods: {
    childaddOption(index) {
      this.addOption(index);
    },
    childdeleteoption(index, i) {
      this.deleteoption(index, i);
    },
    onBlur(item, field) {
      item[field] = item[field] ? item[field].trim() : "";
    },
    onBlurIndex(index, field) {
      let res = this.curQueItem[field][index].trim();
      this.$set(this.curQueItem[field], index, res);
    },
    onBlurCorrect(item, index) {
      if (item[index]) {
        item[index] = item[index].trim();
        this.$forceUpdate();
      }
    },
    //   修改正确答案
    changeIsAnswer(type, i) {
      this.changAnswer(this.index, type, i);
    },
    // 点击生成拼音
    getPinyin(item) {
      let bool = false;
      let value = "";
      if (item.hanzi == "") {
        this.$message.warning("请先输入内容,再生成拼音");
        bool = true;
      } else {
        value = item.hanzi;
      }
      if (bool) {
        return;
      }
      let result = pinyinUtil.getPinyin(value);
      item.pinyin = result;
    },
    changeMp3(fileList) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",

            media_duration: item.response.file_info_list[0].media_duration, //音频时长
          };
          articleImgRes.push(obj);
        }
      });
      this.curQueItem.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    changeImage(fileList) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
          };
          articleImgRes.push(obj);
        }
      });
      //this.articleImgList = articleImgRes;
      this.curQueItem.img_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    //添加释义
    addDef() {
      let leg = this.curQueItem.definition_list.length;
      let last = this.curQueItem.definition_list[leg - 1];
      if (!last) {
        this.$message.warning("请填写");
        return;
      }
      this.curQueItem.definition_list.push("");
    },
    delDef(defIndex) {
      this.curQueItem.definition_list.splice(defIndex, 1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.curQueItem) {
      this.fileCon.img_list = this.curQueItem.img_list;
      this.fileCon.mp3_list = this.curQueItem.mp3_list;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book {
  &-delDef {
    padding: 0;
    line-height: 32px;
    color: #f56c6c;
  }
  &-def-list {
    margin-bottom: 8px;
  }
  &-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
    .deleteOptionBox {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .close {
        width: 24px;
        cursor: pointer;
      }
    }
    .Big-Book-input {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      > span {
        line-height: 32px;
        margin-right: 6px;
      }
    }
  }
  &-HzModule {
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;

    > div {
      // display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-right: 10px;
      > span {
        line-height: 32px;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }

  &-set {
    // min-width: 140px;
  }
  &-mp3 {
    margin-top: 6px;
    span {
      width: 50px;
    }
  }
  &-img {
    span {
      width: 50px;
    }
  }
  .addoption {
    width: 148px;
    height: 40px;
    background: #f3f3f3;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 14px;
    color: #000000;
  }
}
</style>
<style lang="scss">
.Big-Book-HzModule {
  .el-textarea {
    width: 400px;
    margin-right: 15px;
  }
}
.Big-Book-input {
  .el-textarea {
    width: 160px;
    margin-right: 15px;
  }
}
</style>