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

<!--  -->
<template>
  <div class="Big-Book-SentenceModule" v-if="curQueItem">
    <div class="adult-book-input-item">
      <span class="adult-book-lable">序号：</span>
      <el-input
        size="small"
        class="adult-book-input"
        :autosize="{ minRows: 2 }"
        placeholder="请输入序号"
        v-model="curQueItem.number"
        @blur="onBlur(curQueItem, 'number')"
      ></el-input>
      <div class="deleteOptionBox">
        <img
          @click="deleteOption"
          class="close"
          src="../../../assets/adult/del-close.png"
          alt=""
        />
      </div>
    </div>
    <div class="NPC-sentence-Segword">
      <SentenceSegwordChs :curQue="curQueItem.detail" />
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">英文：</span>
      <el-input
        size="small"
        class="adult-book-input"
        placeholder="请输入句子翻译"
        v-model="curQueItem.en"
        @blur="onBlur(curQueItem, 'en')"
      ></el-input>
    </div>
    <template v-if="type == 'sentence_input'">
      <div class="adult-book-input-item">
        <span class="adult-book-lable">答案：</span>
        <div>
          <div
            class="NPC-sentence-input-box"
            v-for="(ansItem, ansIndex) in curQueItem.answer"
            :key="'answer' + ansIndex"
          >
            <el-input
              class="adult-book-input"
              type="textarea"
              autosize
              placeholder="请输入答案"
              v-model="curQueItem.answer[ansIndex]"
              @blur="onBlurIndex(ansIndex, 'answer')"
            ></el-input>
            <div class="adult-book-del-icon" @click="delAnswer(ansIndex)">
              <i class="el-icon-circle-close"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="adult-book-input-item" style="padding-left: 80px">
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="addAnswer"
          >添加答案</el-button
        >
      </div>
    </template>
    <div class="adult-book-input-item" v-if="type == 'sentence_judge'">
      <span class="adult-book-lable">判断：</span>
      <el-radio-group v-model="curQueItem.judge">
        <el-radio :lable="true" :label="true">正确</el-radio>
        <el-radio :lable="false" :label="false">错误</el-radio>
      </el-radio-group>
    </div>
    <div class="adult-book-input-item" v-if="type == 'sentence_record'">
      <span class="adult-book-lable">录音组件：</span>
      <img src="../../../assets/adult/mini.png" class="adult-record-min" />
    </div>
    <div class="adult-book-input-item" v-if="type == 'recordHZ_inputPY_chs'">
      <span>录音</span>
      <el-radio v-model="curQueItem.IsRecord" :label="true">需要</el-radio>
      <el-radio v-model="curQueItem.IsRecord" :label="false">不需要</el-radio>
    </div>
    <div
      class="adult-book-input-item"
      v-if="type == 'recordHZ_inputPY_chs' && curQueItem.IsRecord"
    >
      <img src="../../../assets/adult/pro-plus.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 SentenceSegwordChs from "./SentenceSegwordChs/index.vue";
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: { Upload, SentenceSegwordChs },
  props: [
    "curQue",
    "curQueItem",
    "index",
    "changAnswer",
    "deleteOptionOne",
    "checkList",
    "type",
  ],
  data() {
    return {
      //checkListRes: [],
      fileCon: {
        mp3_list: [],
        img_list: [],
      },
      mp3Number: 1,
      imgNumber: 1,
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    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) {
      item[index] = item[index].trim();
    },
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // this.deleteOptionOne(this.index);
        console.log(this.deleteOptionOne());
      });
    },
    //   修改正确答案
    changeIsAnswer(type) {
      this.changAnswer(this.index, type);
    },
    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));
    },
    //添加答案
    addAnswer() {
      let leg = this.curQueItem.answer.length;
      let last = this.curQueItem.answer[leg - 1];
      if (!last) {
        this.$message.warning("请先填写完整");
        return;
      }
      this.curQueItem.answer.push("");
    },
    delAnswer(ansIndex) {
      this.curQueItem.answer.splice(ansIndex, 1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.curQueItem);
    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: center;
    margin-top: 10px;
    .deleteOptionBox {
      width: 40px;
      height: 33px;
      display: flex;
      justify-content: center;
      align-items: center;
      .close {
        width: 24px;
        cursor: pointer;
      }
    }
  }
  &-mp3 {
    margin-top: 6px;
    span {
      width: 50px;
    }
  }
  &-img {
    span {
      width: 50px;
    }
  }
}
.NPC-sentence-input-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.NPC-sentence-input-box {
  .NPC-sentence-input {
    margin-right: 10px;
  }
  > i {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
</style>