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

<!--  -->
<template>
  <div class="Big-Book-input">
    <div class="Big-Book-content m">
      <div class="Big-Book-main">
        <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.title"
            @blur="curQueItem.title = curQueItem.title.trim()"
          ></el-input>
        </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.con"
            @blur="curQueItem.con = curQueItem.con.trim()"
          ></el-input>
          <div class=""></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="curQueItem.pinyin = curQueItem.pinyin.trim()"
          ></el-input>
          <el-button @click="getPinyin(curQueItem)" type="text"
            >插入拼音</el-button
          >
        </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.english"
            @blur="curQueItem.english = curQueItem.english.trim()"
          ></el-input>
        </div>
        <div class="adult-book-input-item">
          <Upload
            :changeFillId="changeImage"
            :datafileList="fileCon.img_list"
            :filleNumber="imgNumber"
            :uploadType="'image'"
          />
        </div>
        <div class="adult-book-input-item">
          <Upload
            :changeFillId="changeMp3"
            :datafileList="fileCon.mp3_list"
            :filleNumber="mp3Number"
            :uploadType="'mp3'"
          />
        </div>
        <div>
          <el-radio
            @change="changeIsAnswer"
            v-model="curQueItem.judge"
            label="right"
            >正确</el-radio
          >
          <el-radio
            @change="changeIsAnswer"
            v-model="curQueItem.judge"
            label="error"
            >错误</el-radio
          >
          <el-radio
            @change="changeIsAnswer"
            v-model="curQueItem.judge"
            label="noSolution"
            >无解</el-radio
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {
    Upload,
  },
  props: ["curQueItem", "changAnswer"],
  data() {
    return {
      imgNumber: 10,
      mp3Number: 10,
      fileCon: {
        img_list: [],
        mp3_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此角色吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index);
      });
    },
    //   修改正确答案
    changeIsAnswer() {
      this.changAnswer();
    },
    // 点击生成拼音
    getPinyin(item) {
      let bool = false;
      let value = "";
      if (item.con == "") {
        this.$message.info("请先输入内容,再生成拼音");
        bool = true;
      } else {
        value = item.con;
      }
      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.articleImgList = articleImgRes;
      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));
    },
  },
  //生命周期 - 创建完成（可以访问当前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-input {
  .Big-Book-content {
    &.m {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .Big-Book-title {
      font-size: 16px;
      line-height: 40px;
      color: #000;
      margin-right: 15px;
    }
    .Big-Book-main {
      position: relative;
      width: 100%;
      > div {
        margin-bottom: 10px;
        &.Big-Book-pinyin,
        &.Big-Book-con,
        &.Big-Book-en {
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
      }
      .close {
        position: absolute;
        width: 24px;
        cursor: pointer;
        right: -30px;
        top: 3px;
      }
    }
  }
}
</style>