|
|
@@ -0,0 +1,493 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-PurePreview" v-if="curQue">
|
|
|
+ <div
|
|
|
+ class="Big-Book-Single-content"
|
|
|
+ style="margin-left: 20px; margin-top: 20px"
|
|
|
+ >
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">标题：</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2 }"
|
|
|
+ placeholder="请输入标题"
|
|
|
+ v-model="curQue.title"
|
|
|
+ @blur="onBlur(curQue, 'title')"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">排列方式：</span>
|
|
|
+ <el-radio-group v-model="curQue.arrangeWay" @change="changearrangeWay">
|
|
|
+ <el-radio label="单列">单列</el-radio>
|
|
|
+ <el-radio label="双列">双列</el-radio>
|
|
|
+ <el-radio label="四列">四列</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">配置：</span>
|
|
|
+ <div class="xorl">
|
|
|
+ <el-switch v-model="curQue.Isnumber" active-text="序号"> </el-switch>
|
|
|
+ <el-switch v-model="curQue.IsRecord" active-text="录音"> </el-switch>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ v-for="(row, rowIndex) in curQue.option"
|
|
|
+ :key="'row' + rowIndex"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ width: `${
|
|
|
+ curQue.arrangeWay == '单列'
|
|
|
+ ? '732px'
|
|
|
+ : curQue.arrangeWay == '双列'
|
|
|
+ ? '362px'
|
|
|
+ : '177px'
|
|
|
+ }`,
|
|
|
+ }"
|
|
|
+ class="col"
|
|
|
+ v-for="(col, colIndex) in row"
|
|
|
+ :key="'col' + colIndex"
|
|
|
+ >
|
|
|
+ <div class="td">
|
|
|
+ <span>1</span>
|
|
|
+ <div></div>
|
|
|
+ <img src="../../../assets/adult/mini.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <p>
|
|
|
+ <span> 编辑 </span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="30%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <div class="Module" v-if="dialogData">
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <el-radio-group v-model="dialogData.type">
|
|
|
+ <el-radio label="英文">英文</el-radio>
|
|
|
+ <el-radio label="拼音+中文">拼音+中文</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, index) in dialogData.list" :key="'h' + index">
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">内容：</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2 }"
|
|
|
+ placeholder="请输入内容"
|
|
|
+ v-model="item.con"
|
|
|
+ @blur="onBlur(item, 'con')"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="adult-book-input-item"
|
|
|
+ v-if="dialogData.type == '拼音+中文'"
|
|
|
+ >
|
|
|
+ <span class="adult-book-lable">拼音：</span>
|
|
|
+ <el-input
|
|
|
+ class="adult-book-input"
|
|
|
+ type="textarea"
|
|
|
+ :autosize="{ minRows: 2 }"
|
|
|
+ placeholder="请输入拼音"
|
|
|
+ v-model="item.pinyin"
|
|
|
+ @blur="onBlur(item, 'pinyin')"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="addoption">增加</div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="handleClose">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Upload from "../common/Upload";
|
|
|
+import SentenceSegwordChs from "../common/SentenceSegwordChs/index.vue";
|
|
|
+export default {
|
|
|
+ name: "PurePreview",
|
|
|
+ props: ["curQue", "fn_data", "changeCurQue", "type"],
|
|
|
+ components: {
|
|
|
+ SentenceSegwordChs,
|
|
|
+ Upload,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checkList: [],
|
|
|
+ mp3Number: 1,
|
|
|
+ form: {
|
|
|
+ stem: {
|
|
|
+ con: "",
|
|
|
+ pinyin: "",
|
|
|
+ english: "",
|
|
|
+ highlight: "",
|
|
|
+ underline: "",
|
|
|
+ img_url: [],
|
|
|
+ mp3_url: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data_structure: {
|
|
|
+ type: "zi_transverse_line_chs",
|
|
|
+ name: "字+横线",
|
|
|
+ title: "",
|
|
|
+ arrangeWay: "单列", //排列方式
|
|
|
+ Isnumber: false, //需不需要 序号
|
|
|
+ IsRecord: false, //需不需要录音
|
|
|
+ option: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ type: "", //英文还是拼音+中文
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ con: "",
|
|
|
+ pinyin: "",
|
|
|
+ answer: [
|
|
|
+ {
|
|
|
+ con: "",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ numberList: {
|
|
|
+ type: "number",
|
|
|
+ name: "每行几个",
|
|
|
+ con: "2",
|
|
|
+ arr: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogData: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 关闭弹窗
|
|
|
+ handleClose() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ this.dialogData = null;
|
|
|
+ },
|
|
|
+ // 修改排列方式
|
|
|
+ changearrangeWay(value) {
|
|
|
+ let obj = this.data_structure.option[0][0];
|
|
|
+ if (value == "双列") {
|
|
|
+ this.curQue.option.forEach((row) => {
|
|
|
+ if (row.length > 1) {
|
|
|
+ row.splice(2, row.length - 1);
|
|
|
+ } else {
|
|
|
+ row.push(obj);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (value == "四列") {
|
|
|
+ this.curQue.option.forEach((row) => {
|
|
|
+ if (row.length >= 2) {
|
|
|
+ for (let i = 0; i < 2; i++) {
|
|
|
+ row.push(obj);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i < 3; i++) {
|
|
|
+ row.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (value == "单列") {
|
|
|
+ this.curQue.option.forEach((row) => {
|
|
|
+ row.splice(1, row.length - 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onBlur(item, field) {
|
|
|
+ item[field] = item[field] ? item[field].trim() : "";
|
|
|
+ },
|
|
|
+ // 增加拼音
|
|
|
+ addpinyin(index) {
|
|
|
+ let obj;
|
|
|
+ obj = JSON.parse(
|
|
|
+ JSON.stringify(this.data_structure.option[0].pinyinList[0])
|
|
|
+ );
|
|
|
+ this.curQue.option[index].pinyinList.push(obj);
|
|
|
+ },
|
|
|
+ // 删除拼音
|
|
|
+ deletepinyin(aindex, index) {
|
|
|
+ if (this.type == "zi_transverse_line_chs") {
|
|
|
+ if (this.curQue.option[index].pinyinList.length <= 1) {
|
|
|
+ this.$message.warning("至少要保留1个拼音");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option[index].pinyinList.splice(aindex, 1);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 增加答案
|
|
|
+ addanswer(index) {
|
|
|
+ let obj;
|
|
|
+ if (this.type == "zi_transverse_line_chs") {
|
|
|
+ obj = JSON.parse(
|
|
|
+ JSON.stringify(this.data_structure.option[0].answer[0])
|
|
|
+ );
|
|
|
+ this.curQue.option[index].answer.push(obj);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 删除答案
|
|
|
+ deleteanswer(aindex, index) {
|
|
|
+ if (this.curQue.option[index].answer.length <= 1) {
|
|
|
+ this.$message.warning("至少要保留1个答案");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option[index].answer.splice(aindex, 1);
|
|
|
+ },
|
|
|
+ // 删除其中一个选项
|
|
|
+ deleteOptionOne(index) {
|
|
|
+ if (this.curQue.option.length <= 1) {
|
|
|
+ this.$message.warning("至少要保留1个选项");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 新增选项
|
|
|
+ addOption() {
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.data_structure.option[0]));
|
|
|
+ this.curQue.option.push(obj);
|
|
|
+ },
|
|
|
+ initcurQue() {
|
|
|
+ let data = JSON.parse(JSON.stringify(this.data_structure));
|
|
|
+ this.changeCurQue(data);
|
|
|
+ },
|
|
|
+ // 选项的音频
|
|
|
+ changeMp3(fileList, item, index) {
|
|
|
+ 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.curQue.option[index].mp3_list = JSON.parse(
|
|
|
+ JSON.stringify(articleImgRes)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 题目的音频
|
|
|
+ timuchangeMp3(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.curQue.mp3_list = JSON.parse(JSON.stringify(articleImgRes));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ if (!this.curQue) {
|
|
|
+ this.initcurQue();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scope>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Big-Book-PurePreview {
|
|
|
+ &-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 {
|
|
|
+ > div {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &.Big-Book-pinyin {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .addoption {
|
|
|
+ width: 200px;
|
|
|
+ height: 40px;
|
|
|
+ left: 40px;
|
|
|
+ top: 304px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .Big-Book-addrole {
|
|
|
+ > div {
|
|
|
+ width: 300px;
|
|
|
+ height: 40px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: 1px dashed rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Big-Book-more {
|
|
|
+ .Big-Book-more-text {
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:before,
|
|
|
+ .Big-Book-more-text:after {
|
|
|
+ position: absolute;
|
|
|
+ background: #ccc;
|
|
|
+ content: "";
|
|
|
+ height: 1px;
|
|
|
+ top: 50%;
|
|
|
+ width: 45%;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:before {
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ .Big-Book-more-text:after {
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ .Big-Book-more-main {
|
|
|
+ display: flex;
|
|
|
+ > :not(:nth-child(1)) {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .Big-Book-con {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ width: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .xorl {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
+ > :nth-child(1) {
|
|
|
+ margin-right: 33px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 780px;
|
|
|
+ min-height: 251px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px 16px;
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ .col {
|
|
|
+ width: 732px;
|
|
|
+ margin: 0 4px;
|
|
|
+ .td {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ min-height: 48px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px;
|
|
|
+ > div {
|
|
|
+ margin: 0 8px;
|
|
|
+ width: 67%;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: white;
|
|
|
+ background: #de4444;
|
|
|
+ border-radius: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+</style>
|
秦鹏