|  | @@ -1,48 +1,146 @@
 | 
	
		
			
				|  |  |  <!--  -->
 | 
	
		
			
				|  |  |  <template>
 | 
	
		
			
				|  |  | -  <div class="Big-Book-MatrixSingle">
 | 
	
		
			
				|  |  | -    <div
 | 
	
		
			
				|  |  | -      class="Big-Book-MatrixSingle-content"
 | 
	
		
			
				|  |  | -      style=" margin-top: 20px"
 | 
	
		
			
				|  |  | -    >
 | 
	
		
			
				|  |  | -      <div class="Big-Book-MatrixSingle-main">
 | 
	
		
			
				|  |  | -        <span style="margin-right:10px">选择上传类型</span>
 | 
	
		
			
				|  |  | -        <el-radio-group v-model="curQue.uploadType">
 | 
	
		
			
				|  |  | -          <el-radio v-for="(item,i) in curQue.list" :key="i" :label="item.name">{{item.name}}</el-radio>
 | 
	
		
			
				|  |  | -        </el-radio-group>
 | 
	
		
			
				|  |  | +  <div class="Big-Book-prev-Textdes Tinydemo" v-if="curQue">
 | 
	
		
			
				|  |  | +    <UploadView
 | 
	
		
			
				|  |  | +      :changeFillId="changeFillId"
 | 
	
		
			
				|  |  | +      :accept="accept"
 | 
	
		
			
				|  |  | +      :filleNumber="1"
 | 
	
		
			
				|  |  | +      :fileList="fileList"
 | 
	
		
			
				|  |  | +    />
 | 
	
		
			
				|  |  | +    <div class="dv">
 | 
	
		
			
				|  |  | +      <div class="main">
 | 
	
		
			
				|  |  | +        <div class="content">
 | 
	
		
			
				|  |  | +          <template v-if="curQue.data">
 | 
	
		
			
				|  |  | +            <template
 | 
	
		
			
				|  |  | +              v-if="
 | 
	
		
			
				|  |  | +                curQue.data.file_name.indexOf('png') != -1 ||
 | 
	
		
			
				|  |  | +                curQue.data.file_name.indexOf('jpg') != -1
 | 
	
		
			
				|  |  | +              "
 | 
	
		
			
				|  |  | +            >
 | 
	
		
			
				|  |  | +              <img :src="curQue.data.file_url" alt="" />
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +            <template v-else-if="curQue.data.file_name.indexOf('pdf') != -1">
 | 
	
		
			
				|  |  | +              <pdf
 | 
	
		
			
				|  |  | +                ref="pdf"
 | 
	
		
			
				|  |  | +                :src="curQue.data.fileRelativePath"
 | 
	
		
			
				|  |  | +                v-for="i in numPages"
 | 
	
		
			
				|  |  | +                :key="i"
 | 
	
		
			
				|  |  | +                :page="i"
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +              </pdf>
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +            <template v-else>
 | 
	
		
			
				|  |  | +              <iframe
 | 
	
		
			
				|  |  | +                :src="
 | 
	
		
			
				|  |  | +                  'https://view.officeapps.live.com/op/view.aspx?src=' +
 | 
	
		
			
				|  |  | +                  `${curQue.data.file_url}`
 | 
	
		
			
				|  |  | +                "
 | 
	
		
			
				|  |  | +                width="100%"
 | 
	
		
			
				|  |  | +                height="1000px"
 | 
	
		
			
				|  |  | +                id="if"
 | 
	
		
			
				|  |  | +              >
 | 
	
		
			
				|  |  | +              </iframe>
 | 
	
		
			
				|  |  | +            </template>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <div class="remove" @click="remove">
 | 
	
		
			
				|  |  | +        <img src="../../../assets/adult/red_remove.png" alt="" />
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |    </div>
 | 
	
		
			
				|  |  |  </template>
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  <script>
 | 
	
		
			
				|  |  | +import UploadView from "../common/UploadView.vue";
 | 
	
		
			
				|  |  | +import pdf from "vue-pdf";
 | 
	
		
			
				|  |  |  export default {
 | 
	
		
			
				|  |  | -  name: "Single",
 | 
	
		
			
				|  |  | -  props: ["curQue", "fn_data"],
 | 
	
		
			
				|  |  | -  components: {},
 | 
	
		
			
				|  |  | +  components: {
 | 
	
		
			
				|  |  | +    UploadView,
 | 
	
		
			
				|  |  | +    pdf,
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  props: ["curQue", "changeCurQue"],
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
		
			
				|  |  | -      form: {
 | 
	
		
			
				|  |  | -        stem: {
 | 
	
		
			
				|  |  | -          con: "",
 | 
	
		
			
				|  |  | -          pinyin: "",
 | 
	
		
			
				|  |  | -          english: "",
 | 
	
		
			
				|  |  | -          highlight: "",
 | 
	
		
			
				|  |  | -          underline: "",
 | 
	
		
			
				|  |  | -          img_url: [],
 | 
	
		
			
				|  |  | -          mp3_url: [],
 | 
	
		
			
				|  |  | -        },
 | 
	
		
			
				|  |  | +      uploadType: "",
 | 
	
		
			
				|  |  | +      fileList: [],
 | 
	
		
			
				|  |  | +      data: null,
 | 
	
		
			
				|  |  | +      numPages: null,
 | 
	
		
			
				|  |  | +      accept: ".png,.jpg,.pdf",
 | 
	
		
			
				|  |  | +      data_structure: {
 | 
	
		
			
				|  |  | +        type: "recordHZ_inputPY_chs",
 | 
	
		
			
				|  |  | +        name: "读汉字写拼音",
 | 
	
		
			
				|  |  | +        title: "",
 | 
	
		
			
				|  |  | +        option: [
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            number: "",
 | 
	
		
			
				|  |  | +            con: "",
 | 
	
		
			
				|  |  | +            answer: "",
 | 
	
		
			
				|  |  | +          },
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  |        },
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    computed: {},
 | 
	
		
			
				|  |  |    watch: {},
 | 
	
		
			
				|  |  |    //方法集合
 | 
	
		
			
				|  |  | -  methods: {},
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    remove() {
 | 
	
		
			
				|  |  | +      this.data = null;
 | 
	
		
			
				|  |  | +      tis.curQue.data = null;
 | 
	
		
			
				|  |  | +      this.fileList = [];
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    changeFillId(fileList, item, index) {
 | 
	
		
			
				|  |  | +      this.fileList = fileList;
 | 
	
		
			
				|  |  | +      this.curQue.data = this.fileList[0].response.file_info_list[0];
 | 
	
		
			
				|  |  | +      if (this.curQue.data.file_name.indexOf("pdf" != -1)) {
 | 
	
		
			
				|  |  | +        this.curQue.data.fileRelativePath =
 | 
	
		
			
				|  |  | +          process.env.VUE_APP_BASE_API + this.curQue.data.file_relative_path;
 | 
	
		
			
				|  |  | +        this.curQue.data = this.fileList[0].response.file_info_list[0];
 | 
	
		
			
				|  |  | +        this.getNumPages();
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 获取pdf的页数
 | 
	
		
			
				|  |  | +    getNumPages() {
 | 
	
		
			
				|  |  | +      let _this = this;
 | 
	
		
			
				|  |  | +      let loadingTask = pdf.createLoadingTask(
 | 
	
		
			
				|  |  | +        _this.curQue.data.fileRelativePath
 | 
	
		
			
				|  |  | +      );
 | 
	
		
			
				|  |  | +      loadingTask.promise
 | 
	
		
			
				|  |  | +        .then((pdf) => {
 | 
	
		
			
				|  |  | +          _this.numPages = pdf.numPages;
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .catch((err) => {
 | 
	
		
			
				|  |  | +          console.error("pdf 加载失败", err);
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    initcurQue() {
 | 
	
		
			
				|  |  | +      let data = JSON.parse(JSON.stringify(this.data_structure));
 | 
	
		
			
				|  |  | +      this.changeCurQue(data);
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  |    //生命周期 - 创建完成(可以访问当前this实例)
 | 
	
		
			
				|  |  | -  created() {},
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +    if (!this.curQue) {
 | 
	
		
			
				|  |  | +      this.initcurQue();
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  |    //生命周期 - 挂载完成(可以访问DOM元素)
 | 
	
		
			
				|  |  | -  mounted() {},
 | 
	
		
			
				|  |  | +  mounted() {
 | 
	
		
			
				|  |  | +    if (this.curQue.data && this.curQue.data.file_name.indexOf("pdf") != -1) {
 | 
	
		
			
				|  |  | +      let _this = this;
 | 
	
		
			
				|  |  | +      let loadingTask = pdf.createLoadingTask(
 | 
	
		
			
				|  |  | +        _this.curQue.data.fileRelativePath
 | 
	
		
			
				|  |  | +      );
 | 
	
		
			
				|  |  | +      loadingTask.promise
 | 
	
		
			
				|  |  | +        .then((pdf) => {
 | 
	
		
			
				|  |  | +          _this.numPages = pdf.numPages;
 | 
	
		
			
				|  |  | +        })
 | 
	
		
			
				|  |  | +        .catch((err) => {
 | 
	
		
			
				|  |  | +          console.error("pdf 加载失败", err);
 | 
	
		
			
				|  |  | +        });
 | 
	
		
			
				|  |  | +    }
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  |    beforeCreate() {}, //生命周期 - 创建之前
 | 
	
		
			
				|  |  |    beforeMount() {}, //生命周期 - 挂载之前
 | 
	
		
			
				|  |  |    beforeUpdate() {}, //生命周期 - 更新之前
 | 
	
	
		
			
				|  | @@ -52,56 +150,56 @@ export default {
 | 
	
		
			
				|  |  |    activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  </script>
 | 
	
		
			
				|  |  | -<style lang='scss' scope>
 | 
	
		
			
				|  |  | +<style lang='scss' scoped>
 | 
	
		
			
				|  |  |  //@import url(); 引入公共css类
 | 
	
		
			
				|  |  | -.Big-Book-MatrixSingle {
 | 
	
		
			
				|  |  | -  &-content {
 | 
	
		
			
				|  |  | -    .Big-Book-MatrixSingle-main {
 | 
	
		
			
				|  |  | -      display: flex;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    .answer {
 | 
	
		
			
				|  |  | -      margin-left: 40px;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    .add {
 | 
	
		
			
				|  |  | -      width: 78%;
 | 
	
		
			
				|  |  | -      margin: 0 auto;
 | 
	
		
			
				|  |  | -      height: 40px;
 | 
	
		
			
				|  |  | -      text-align: center;
 | 
	
		
			
				|  |  | -      line-height: 40px;
 | 
	
		
			
				|  |  | -      background: #f3f3f3;
 | 
	
		
			
				|  |  | -      border: 1px dashed rgba(0, 0, 0, 0.15);
 | 
	
		
			
				|  |  | +.Big-Book-prev-Textdes {
 | 
	
		
			
				|  |  | +  padding: 24px 0 24px 24px;
 | 
	
		
			
				|  |  | +  background: #f7f7f7;
 | 
	
		
			
				|  |  | +  border: 1px solid rgba(0, 0, 0, 0.1);
 | 
	
		
			
				|  |  | +  .dv {
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    align-items: center;
 | 
	
		
			
				|  |  | +    .remove {
 | 
	
		
			
				|  |  | +      width: 40px;
 | 
	
		
			
				|  |  | +      height: 39px;
 | 
	
		
			
				|  |  | +      background: #ffffff;
 | 
	
		
			
				|  |  | +      border: 1px solid rgba(0, 0, 0, 0.1);
 | 
	
		
			
				|  |  |        box-sizing: border-box;
 | 
	
		
			
				|  |  | -      border-radius: 4px;
 | 
	
		
			
				|  |  | -      margin-top: 8px;
 | 
	
		
			
				|  |  | +      border-radius: 8px;
 | 
	
		
			
				|  |  | +      display: flex;
 | 
	
		
			
				|  |  | +      align-items: center;
 | 
	
		
			
				|  |  | +      justify-content: center;
 | 
	
		
			
				|  |  | +      margin-left: 32px;
 | 
	
		
			
				|  |  |        cursor: pointer;
 | 
	
		
			
				|  |  | +      img {
 | 
	
		
			
				|  |  | +        width: 24px;
 | 
	
		
			
				|  |  | +        height: 24px;
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  | -  .Big-Book-divide {
 | 
	
		
			
				|  |  | -    > div {
 | 
	
		
			
				|  |  | -      width: 100%;
 | 
	
		
			
				|  |  | -    }
 | 
	
		
			
				|  |  | -    .answerList {
 | 
	
		
			
				|  |  | -      > div {
 | 
	
		
			
				|  |  | -        margin-top: 16px;
 | 
	
		
			
				|  |  | -        display: flex;
 | 
	
		
			
				|  |  | -        align-items: center;
 | 
	
		
			
				|  |  | -        > :nth-child(1) {
 | 
	
		
			
				|  |  | -          display: inline-block;
 | 
	
		
			
				|  |  | -          width: 100px;
 | 
	
		
			
				|  |  | -          margin-right: 10px;
 | 
	
		
			
				|  |  | -          word-break: break-all;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .checkbox-group {
 | 
	
		
			
				|  |  | -          > :not(:nth-child(1)) {
 | 
	
		
			
				|  |  | -            display: inline-block;
 | 
	
		
			
				|  |  | -            margin-left: 29px;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +  .main {
 | 
	
		
			
				|  |  | +    margin-top: 23px;
 | 
	
		
			
				|  |  | +    width: 477px;
 | 
	
		
			
				|  |  | +    height: 292px;
 | 
	
		
			
				|  |  | +    background: #ffffff;
 | 
	
		
			
				|  |  | +    border: 1px solid rgba(0, 0, 0, 0.1);
 | 
	
		
			
				|  |  | +    box-sizing: border-box;
 | 
	
		
			
				|  |  | +    border-radius: 8px;
 | 
	
		
			
				|  |  | +    display: flex;
 | 
	
		
			
				|  |  | +    align-items: center;
 | 
	
		
			
				|  |  | +    justify-content: center;
 | 
	
		
			
				|  |  | +    .content {
 | 
	
		
			
				|  |  | +      width: 445px;
 | 
	
		
			
				|  |  | +      height: 260px;
 | 
	
		
			
				|  |  | +      border-radius: 4px;
 | 
	
		
			
				|  |  | +      box-sizing: border-box;
 | 
	
		
			
				|  |  | +      background: linear-gradient(0deg, #ebebeb, #ebebeb);
 | 
	
		
			
				|  |  | +      overflow-y: scroll;
 | 
	
		
			
				|  |  | +      img {
 | 
	
		
			
				|  |  | +        max-width: 100%;
 | 
	
		
			
				|  |  | +        max-height: 100%;
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  </style>
 | 
	
		
			
				|  |  | -<style lang="scss">
 | 
	
		
			
				|  |  | -</style>
 |