|
|
@@ -0,0 +1,395 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes sentenceSort" v-if="curQue">
|
|
|
+ <h2>{{ curQue.title }}</h2>
|
|
|
+ <div class="item-box" v-for="(item, index) in curQue.option" :key="index">
|
|
|
+ <div class="item-right">
|
|
|
+ <b>{{ index + 1 }}</b>
|
|
|
+ <draggable
|
|
|
+ v-model="item.detail.wordsList"
|
|
|
+ animation="300"
|
|
|
+ @start="onStart($event, index)"
|
|
|
+ @end="onEnd($event, index)"
|
|
|
+ :move="onMove"
|
|
|
+ :options="{
|
|
|
+ group: { name: 'itxst' + index, pull: 'clone' },
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <transition-group>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'item',
|
|
|
+ JSON.stringify(SortArr[index]).indexOf(itemNode.index) != -1
|
|
|
+ ? 'select'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ v-for="(itemNode, indexNode) in item.detail.wordsList"
|
|
|
+ :key="indexNode"
|
|
|
+ >
|
|
|
+ <p>
|
|
|
+ {{ itemNode.pinyin }}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ {{ itemNode.chs }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ <div class="item-right_bottom">
|
|
|
+ <!--
|
|
|
+ :style="{
|
|
|
+ width:
|
|
|
+ item.detail.wordsList.length * 82 +
|
|
|
+ item.detail.wordsList.length * 2 +
|
|
|
+ 'px',
|
|
|
+ }"
|
|
|
+ -->
|
|
|
+ <!--
|
|
|
+ :options="{ group: { name: 'itxst' + index, pull: false } }"
|
|
|
+ -->
|
|
|
+ <draggable
|
|
|
+ v-model="SortArr[index]"
|
|
|
+ :group="'itxst' + index"
|
|
|
+ animation="300"
|
|
|
+ @start="onStart2($event, index)"
|
|
|
+ @end="onEnd2($event, index)"
|
|
|
+ :move="onMove"
|
|
|
+ >
|
|
|
+ <transition-group
|
|
|
+ :style="{
|
|
|
+ display: SortArr[index].length > 0 ? '-webkit-box' : 'flex',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="item"
|
|
|
+ v-for="(itemNode, indexNode) in SortArr[index]"
|
|
|
+ :key="indexNode"
|
|
|
+ >
|
|
|
+ <p v-if="itemNode.pinyin">
|
|
|
+ {{ itemNode.pinyin }}
|
|
|
+ </p>
|
|
|
+ <p v-if="itemNode.chs">
|
|
|
+ {{ itemNode.chs }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+ </draggable>
|
|
|
+ <div class="fw">
|
|
|
+ <img
|
|
|
+ v-if="SortArr[index].length > 0"
|
|
|
+ src="../../../assets/NPC/fw.png"
|
|
|
+ alt=""
|
|
|
+ @click="removeCurrentSortArr(index)"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="NOremove"
|
|
|
+ v-else
|
|
|
+ src="../../../assets/NPC/fw-no.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import draggable from "vuedraggable";
|
|
|
+export default {
|
|
|
+ components: { draggable },
|
|
|
+ props: ["curQue"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userList: [],
|
|
|
+ drag: false,
|
|
|
+ SortArr: [],
|
|
|
+ moveId: null,
|
|
|
+ dragData: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ // 每个里面的第一个字母大写
|
|
|
+ SortArr(newval, oldval) {
|
|
|
+ this.SortArr.forEach((item) => {
|
|
|
+ item.forEach((it, i) => {
|
|
|
+ if (it.pinyin) {
|
|
|
+ if (i == 0) {
|
|
|
+ let str = it.pinyin[0];
|
|
|
+ str = str.toUpperCase();
|
|
|
+ it.pinyin = this.changeStr(it.pinyin, 0, str);
|
|
|
+ } else {
|
|
|
+ let str = it.pinyin[0];
|
|
|
+ str = str.toLowerCase();
|
|
|
+ it.pinyin = this.changeStr(it.pinyin, 0, str);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ changeStr(str, index, changeStr) {
|
|
|
+ return (
|
|
|
+ str.substr(0, index) + changeStr + str.substr(index + changeStr.length)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 清空当前选中的文字
|
|
|
+ removeCurrentSortArr(index) {
|
|
|
+ this.$set(this.SortArr, index, []);
|
|
|
+ },
|
|
|
+ NOremove() {
|
|
|
+ this.$message.warning("当前没有可清空的数据");
|
|
|
+ return;
|
|
|
+ },
|
|
|
+ onStart(e, index) {
|
|
|
+ this.drag = true;
|
|
|
+ this.dragData = JSON.parse(
|
|
|
+ JSON.stringify(this.curQue.option[index].detail.wordsList)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //拖拽结束事件
|
|
|
+ onEnd(e, index) {
|
|
|
+ let _this = this;
|
|
|
+ _this.drag = false;
|
|
|
+ let newarr = [
|
|
|
+ ...new Set(this.SortArr[index].map((item) => JSON.stringify(item))),
|
|
|
+ ];
|
|
|
+ let arr = newarr.map((item) => JSON.parse(item));
|
|
|
+ this.curQue.option[index].detail.wordsList = JSON.parse(
|
|
|
+ JSON.stringify(this.dragData)
|
|
|
+ );
|
|
|
+ //如果左边
|
|
|
+ if (arr.length == this.SortArr[index].length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.SortArr[index].splice(e.newDraggableIndex, 1);
|
|
|
+ },
|
|
|
+ onStart2(e, index) {
|
|
|
+ this.drag = true;
|
|
|
+ this.dragData = JSON.parse(JSON.stringify(this.SortArr[index]));
|
|
|
+ },
|
|
|
+ //拖拽结束事件
|
|
|
+ onEnd2(e, index) {
|
|
|
+ this.drag = false;
|
|
|
+ // 不再删除
|
|
|
+ this.SortArr[index] = this.dragData;
|
|
|
+ let newarr = [
|
|
|
+ ...new Set(
|
|
|
+ this.curQue.option[index].detail.wordsList.map((item) =>
|
|
|
+ JSON.stringify(item)
|
|
|
+ )
|
|
|
+ ),
|
|
|
+ ];
|
|
|
+ let arr = newarr.map((item) => JSON.parse(item));
|
|
|
+ //如果左边
|
|
|
+ if (arr.length == this.curQue.option[index].detail.wordsList.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curQue.option[index].detail.wordsList.splice(e.newDraggableIndex, 1);
|
|
|
+ },
|
|
|
+ onMove(e) {
|
|
|
+ // this.moveId = e.relatedContext.element.id;
|
|
|
+ },
|
|
|
+ audioPlay(e) {
|
|
|
+ let url = e.target.src;
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach((item) => {
|
|
|
+ if (item.src == url) {
|
|
|
+ item.play();
|
|
|
+ } else {
|
|
|
+ item.pause();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.curQue.option.forEach((item) => {
|
|
|
+ let arr = [];
|
|
|
+ this.SortArr.push(arr);
|
|
|
+ item.detail.wordsList.forEach((it, i) => {
|
|
|
+ it.index = it.chs + it.pinyin + i;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.sentenceSort {
|
|
|
+ width: 100%;
|
|
|
+ // background: #f7f7f7;
|
|
|
+ // background: rgba(0, 0, 0, 0.04);
|
|
|
+ // padding: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ h2 {
|
|
|
+ color: #000000;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 19px;
|
|
|
+ margin: 0;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ .item-box {
|
|
|
+ margin: 8px 0 24px 0;
|
|
|
+ b {
|
|
|
+ background: #de4444;
|
|
|
+ text-align: center;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: "robot";
|
|
|
+ line-height: 32px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ > :nth-child(2) {
|
|
|
+ width: 100%;
|
|
|
+ > :nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item {
|
|
|
+ // width: 82px;
|
|
|
+ // height: 70px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 2px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: end;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 150%;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item:hover {
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.65);
|
|
|
+ }
|
|
|
+ .select {
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-right_bottom {
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
+ margin-top: 10px;
|
|
|
+ min-height: 74px;
|
|
|
+ // max-height: 103px;
|
|
|
+ border-radius: 8px;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 56px;
|
|
|
+ margin-left: 34px;
|
|
|
+ > :nth-child(1) {
|
|
|
+ > :nth-child(1) {
|
|
|
+ display: flex;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ padding-top: 4px;
|
|
|
+ max-height: 103px;
|
|
|
+ min-height: 74px;
|
|
|
+ overflow-x: auto;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ // width: 82px;
|
|
|
+ // height: 70px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 4px;
|
|
|
+ color: #000000;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: end;
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ line-height: 150%;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > :nth-child(1) {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ > :nth-child(2) {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fw {
|
|
|
+ height: 100%;
|
|
|
+ width: 56px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ top: 29px;
|
|
|
+ right: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .sentenceSort {
|
|
|
+ .item-box {
|
|
|
+ b {
|
|
|
+ background: #24b99e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .sentenceSort {
|
|
|
+ .item-box {
|
|
|
+ b {
|
|
|
+ background: #bd8865;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
guanchunjie