页眉

src/components/Adult/Preview.vue

@@ -96,8 +96,8 @@
         </div>
       </div>
       <div class="NNPE-operate" v-if="isShowTitle">
-        <a class="btn-prev" @click="handleNNPEprev" />
-        <a class="btn-next" @click="handleNNPEnext" />
+        <a class="btn-prev" :class="[preClick?'':'btn-prev-disabled']" @click="handleNNPEprev" />
+        <a class="btn-next" :class="[nextClick?'':'btn-next-disabled']" @click="handleNNPEnext" />
       </div>
     </div>
     <div
@@ -476,6 +476,14 @@
         </div>
       </div>
     </div>
+    <div class="NNPE-title NNPE-title-gray" v-if="isShowSave||isShowTitle">
+      <!-- 页眉 -->
+      <a class="submitAnswer" v-if="isShowSave" @click="submitUserAnswerNPC">提交</a>
+      <div class="NNPE-operate" v-if="isShowTitle">
+        <a class="btn-prev" :class="[preClick?'':'btn-prev-disabled']" @click="handleNNPEprev" />
+        <a class="btn-next" :class="[nextClick?'':'btn-next-disabled']" @click="handleNNPEnext" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -559,6 +567,7 @@ export default {
     "isShowTitle",
     "bookAnswerContent",
     "TaskModel",
+    "isShowSave"
   ],
   data() {
     return {
@@ -600,6 +609,8 @@ export default {
       idArr: [], //当前的pid
       oldCurrentTreeID: "",
       refresh: true,
+      preClick: false, // 上一页是否可点
+      nextClick: false, // 下一页是否可点
     };
   },
   computed: {},
@@ -617,6 +628,22 @@ export default {
             });
           }
           _this.handleTitleData();
+          if (_this.queIndex == _this.queTotal - 1) {
+            this.idArr.forEach((item, i) => {
+                if (item == _this.currentTreeID) {
+                    if(i==0){
+                        _this.preClick = false
+                        _this.nextClick = true
+                    }else if (i == this.idArr.length - 1) {
+                        _this.nextClick = false
+                        _this.preClick = true
+                    } else {
+                        _this.nextClick = true
+                        _this.preClick = true
+                    }
+                }
+            });
+          }
           _this.$nextTick(() => {
             // 重新渲染组件
             _this.refresh = true;
@@ -641,6 +668,22 @@ export default {
       _this.FatherTreeData.forEach((item, itemIndex) => {
         this.seekCurrentTree(item);
       });
+      if (_this.queIndex == _this.queTotal - 1) {
+        this.idArr.forEach((item, i) => {
+            if (item == _this.currentTreeID) {
+                if(i==0){
+                    _this.preClick = false
+                    _this.nextClick = true
+                }else if (i == this.idArr.length - 1) {
+                    _this.nextClick = false
+                    _this.preClick = true
+                } else {
+                    _this.nextClick = true
+                    _this.preClick = true
+                }
+            }
+        });
+      }
     }
   },
   beforeCreate() {}, // 生命周期 - 创建之前
@@ -716,7 +759,8 @@ export default {
                   itemss.data.option
                 );
               }
-              let Bookanswer = localStorage.getItem("Bookanswer");
+            //   let Bookanswer = localStorage.getItem("Bookanswer");
+            let Bookanswer = this.bookAnswerContent
               //if (_this.TaskModel == "lookAnswer" && _this.bookAnswerContent) {
               if (Bookanswer) {
                 // let answerData = JSON.parse(_this.bookAnswerContent);
@@ -747,12 +791,12 @@ export default {
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == 0) {
-              this.$message({
-                message: "已经是第一题",
-                type: "success",
-              });
+                _this.preClick = false
+                _this.nextClick = true
             } else {
               _this.changeId(this.idArr[i - 1]);
+              _this.preClick = true
+              _this.nextClick = true
             }
           }
         });
@@ -796,12 +840,12 @@ export default {
         this.idArr.forEach((item, i) => {
           if (item == _this.currentTreeID) {
             if (i == this.idArr.length - 1) {
-              this.$message({
-                message: "已经是最后一题",
-                type: "success",
-              });
+                _this.nextClick = false
+                _this.preClick = true
             } else {
               _this.changeId(this.idArr[i + 1]);
+              _this.nextClick = true
+              _this.preClick = true
             }
           }
         });
@@ -811,7 +855,7 @@ export default {
         _this.cur = _this.queList[_this.queIndex];
       }
     },
-    saveAnswer() {
+    submitUserAnswerNPC() {
       let contextData = JSON.parse(JSON.stringify(this.contextData));
       let result = [];
       contextData.cur_fn_data.forEach((item, index) => {
@@ -837,8 +881,7 @@ export default {
           });
         });
       });
-
-      return result;
+      this.$emit("finishTaskMaterial", JSON.stringify(result));
     },
   }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -858,6 +901,35 @@ export default {
     height: 64px;
     display: flex;
     align-items: center;
+    &.NNPE-title-gray{
+        background: #EEEEEE;
+        border-radius: 0;
+        margin-top: 24px;
+        .NNPE-operate {
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            a {
+                background: #fff url("../../assets/newImage/common/btn-pre-black.png")
+                center no-repeat;
+                background-size: 24px;
+                &.btn-next {
+                    background: #fff url("../../assets/newImage/common/btn-next-black.png")
+                        center no-repeat;
+                    background-size: 24px;
+                }
+                &:hover {
+                    background-color: #fff;
+                }
+                &:active {
+                    background-color: #fff;
+                }
+                &.btn-prev-disabled,&.btn-next-disabled{
+                    background-color: rgba(0, 0, 0, 0.25);
+                }
+            }
+        }
+    }
     h1 {
       color: #ffffff;
       font-weight: bold;
@@ -943,6 +1015,10 @@ export default {
         &:active {
           background-color: #d24444;
         }
+        &.btn-prev-disabled,&.btn-next-disabled{
+          background-color: rgba(0, 0, 0, 0.25);
+          cursor: not-allowed;
+        }
       }
     }
   }
@@ -1064,6 +1140,24 @@ export default {
       }
     }
   }
+  .submitAnswer{
+      width: 160px;
+      height: 44px;
+      border-radius: 4px;
+      font-size: 16px;
+      line-height: 44px;
+      text-align: center;
+      font-family: robot;
+      background: #e35454;
+      color: #fff;
+      margin-left: 16px;
+      &:hover {
+        background-color: #f76565;
+      }
+      &:active {
+        background-color: #d24444;
+      }
+  }
 }
 .NPC-Big-Book-preview-green {
   .NNPE-title {
@@ -1087,6 +1181,15 @@ export default {
       }
     }
   }
+  .submitAnswer{
+      background: #24b99e;
+      &:hover {
+        background-color: #3dd4b8;
+      }
+      &:active {
+        background-color: #1fa189;
+      }
+  }
   .classTopic-box {
     background: #24b99e;
   }
@@ -1125,6 +1228,15 @@ export default {
       }
     }
   }
+  .submitAnswer{
+      background: #bd8865;
+      &:hover {
+        background-color: #d6a687;
+      }
+      &:active {
+        background-color: #a37557;
+      }
+  }
   .classTopic-box {
     background: #bd8865;
   }

src/components/Adult/preview/SentenceInput.vue

@@ -415,6 +415,7 @@ export default {
             margin-right: 8px;
             min-width: 50px;
             border-bottom: 1px solid black;
+            min-height: 28px;
             height: auto;
           }
           .pinyin {

src/components/Adult/preview/components/Freewrite.vue

@@ -262,7 +262,7 @@ export default {
     left: 56px;
     z-index: 999999;
     background: rgba(0, 0, 0, 0.8);
-    border: 1px solid rgba(0, 0, 0);
+    border: 1px solid rgba(0, 0, 0, 1);
     color: #fff;
     padding: 0 20px;
     height: 40px;

src/views/adultInput.vue

@@ -759,7 +759,7 @@
         />
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="saveAnswer">保 存</el-button>
+        <!-- <el-button @click="saveAnswer">保 存</el-button> -->
         <el-button @click="handleClosePre">关 闭</el-button>
       </span>
     </el-dialog>

src/views/courseView.vue

@@ -22,9 +22,9 @@
         <!-- 显示答案按钮 -->
         <!-- <a v-if="chapterId" :class="['answerShow',isAnswerShow?'answerShowTrue':'']" @click="handleAnswerShow">显示答案</a> -->
         <!-- <a class="edit-btn" @click="handleEdit">编辑</a> -->
-        <a v-if="chapterId" :class="['answerShow']" @click="saveAnswer"
+        <!-- <a v-if="chapterId" :class="['answerShow']" @click="saveAnswer"
           >保存答案</a
-        >
+        > -->
         <div v-if="chapterId" class="title-box">
           <img
             v-if="!treeFlag"
@@ -56,6 +56,8 @@
           :isShowTitle="true"
           :bookAnswerContent="bookAnswerContent"
           :TaskModel="TaskModel"
+          :isShowSave="false"
+          @finishTaskMaterial="finishTaskMaterial"
         />
       </div>
       <a
@@ -107,7 +109,7 @@ export default {
           ],
         },
       ],
-      bookAnswerContent: "",
+      bookAnswerContent: '',
       TaskModel: "", //TEST 考试模式； PRACTICE 练习模式； ANSWER 查看答案模式； 空 预览模式
       category: "",
       FatherTreeData: null,
@@ -119,9 +121,9 @@ export default {
   created() {
     const _this = this;
     _this.bookId = this.$route.query.bookId;
-    if (localStorage.getItem("Bookanswer")) {
-      this.TaskModel = "ANSWER";
-    }
+    // if (localStorage.getItem("Bookanswer")) {
+    //   this.TaskModel = "ANSWER";
+    // }
   },
   methods: {
     changeTreeData(val) {
@@ -207,10 +209,6 @@ export default {
       this.isAnswerShow = !this.isAnswerShow;
       this.$refs.previewAnswer.bookAnswerShow(this.isAnswerShow);
     },
-    // 得到用户答题答案
-    handleBookUserAnswer(data) {
-      console.log(data);
-    },
     // 悬浮树隐藏显示
     chooseCourseware() {
       this.fullTree = !this.fullTree;
@@ -220,12 +218,9 @@ export default {
         document.getElementById("content-tree").style.display = "none";
       }
     },
-    saveAnswer() {
-      let answer = this.$refs.preview.saveAnswer();
+    finishTaskMaterial(data) {
       console.log("保存答案：");
-      console.log(answer);
-      let answerStr = JSON.stringify(answer);
-      localStorage.setItem("Bookanswer", answerStr);
+      console.log(data);
     },
   },
 };