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

<!--  -->
<template>
  <div class="Big-Book-ligatureModule">
    <div class="Big-Book-content m">
      <div class="Big-Book-con-main">
        <div class="adult-book-input-item" v-if="type == 'audio_control_easy'">
          <span class="adult-book-lable">序号：</span>
          <el-input
            type="textarea"
            class="adult-book-input"
            :autosize="{ minRows: 2 }"
            placeholder="请输入序号"
            v-model="curQueItem.Number"
          ></el-input>
          <img
            @click="romveoptionCon"
            class="close"
            src="../../../assets/adult/del-close.png"
            alt=""
          />
          <div class="adult-book-input-item">
            <Upload
              :changeFillId="changeMp3"
              :datafileList="curQueItem.mp3_list"
              :filleNumber="mp3Number"
              :uploadType="'mp3'"
            />
          </div>
        </div>
      </div>
      <div v-if="curQue.ChildType == 'record_control_mini'">
        <img src="../../../assets/adult/mini.png" alt="" />
      </div>
      <div v-if="curQue.ChildType == 'record_control_normal'">
        <img src="../../../assets/adult/normal.png" alt="" />
      </div>
      <div v-if="curQue.ChildType == 'record_control_pro'">
        <img src="../../../assets/adult/pro.png" alt="" />
      </div>
      <div v-if="curQue.ChildType == 'record_control_promax'">
        <img src="../../../assets/adult/pro-max.png" alt="" />
      </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", "deleteOptionOne", "type", "curQue"],
  data() {
    return {
      imgNumber: 1,
      mp3Number: 1,
      fileCon: {
        img_list: [],
        mp3_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    //   删除当前选项
    romveoptionCon() {
      this.$confirm(`确定要删除此音频吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteOptionOne(this.index);
      });
    },
    changeMp3(fileList) {
      console.log(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));
    },
  },
  //生命周期 - 创建完成（可以访问当前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-ligatureModule {
  .Big-Book-content {
    .Big-Book-con {
      display: flex;
      align-items: center;
    }
    .Big-Book-title {
      font-size: 16px;
      line-height: 40px;
      color: #000;
      margin-right: 15px;
    }
    .Big-Book-con-main {
      > div {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        img {
          width: 24px;
          height: 24px;
        }
        .close {
          cursor: pointer;
        }
      }
    }
  }
}
</style>