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

<!--  -->
<template>
  <div class="Big-Book-single">
    <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
            style="width: 100px; margin-right: 5px"
            :autosize="{ minRows: 2 }"
            type="textarea"
            placeholder="请输入选项序号"
            v-model="curQueItem.number"
            @blur="curQueItem.number = curQueItem.number.trim()"
            maxlength="200"
            show-word-limit
          ></el-input>
          <el-input
            class="adult-book-input"
            :autosize="{ minRows: 2 }"
            type="textarea"
            placeholder="请输入内容"
            v-model="curQueItem.con"
            @blur="curQueItem.con = curQueItem.con.trim()"
            maxlength="200"
            show-word-limit
          ></el-input>
          <template
            v-if="type == 'single_chs' || type == 'listen_record_single_chs'"
          >
            <el-radio
              style="margin-left: 7px"
              @change="changeIsAnswer"
              v-model="curQueItem.isAnswer"
              :label="index"
              >答案</el-radio
            >
          </template>
          <template v-if="type == 'checkbox_chs'">
            <el-checkbox
              style="margin-left: 7px"
              @change="changeIsAnswer"
              v-model="curQueItem.isAnswer"
              :label="index"
              >答案</el-checkbox
            >
          </template>
          <!-- <div class=""></div> -->
          <img
            @click="deleteOption"
            class="close"
            src="../../../assets/adult/del-close.png"
            alt=""
          />
        </div>
        <div class="adult-book-input-item">
          <span class="adult-book-lable">选项字体：</span>
          <el-radio-group v-model="curQueItem.font">
            <el-radio label="cn">中文字体</el-radio>
            <el-radio label="en">英文字体</el-radio>
            <el-radio label="py">拼音字体</el-radio>
          </el-radio-group>
        </div>
        <div
          class="adult-book-input-item"
          v-if="type == 'single_chs' || type == 'checkbox_chs'"
        >
          <span class="adult-book-lable">选项图片：</span>
          <Upload
            :changeFillId="changeImage"
            :datafileList="fileCon.img_list"
            :filleNumber="imgNumber"
            :uploadType="'image'"
          />
        </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>
    </div>
  </div>
</template>

<script>
import Upload from "./Upload.vue";
import "@/utils/pinyin_dict_withtone";
import "@/utils/pinyinUtil";
export default {
  components: {
    Upload,
  },
  props: [
    "curQueItem",
    "index",
    "toIndex",
    "changAnswer",
    "deleteOptionOne",
    "type",
  ],
  data() {
    return {
      imgNumber: 10,
      mp3Number: 10,
      fileCon: {
        timu_img_list: [],
        timu_mp3_list: [],
        img_list: [],
        mp3_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   删除当前选项
    deleteOption() {
      this.$confirm("确定要删除此选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index, this.toIndex);
      });
    },
    //   修改正确答案
    changeIsAnswer() {
      this.changAnswer(this.index);
    },
    // 点击生成拼音
    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.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-single {
  .Big-Book-content {
    &.m {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .Big-Book-con {
      display: flex;
      align-items: center;
    }
    .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: relative;
        top: -4px;
        cursor: pointer;
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>