评价页面

src/components/liveProjectDetail.vue

@@ -64,11 +64,12 @@
             position: relative;
           "
         >
-          <!-- <div
-            style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
+          <div
+            style="color: #bfbfbf; padding: 15px 0 15px 25px; font-size: 20px"
+            v-if="isBlock == 3"
           >
-            课堂实践
-          </div> -->
+            课堂评价
+          </div>
           <div
             style="
               margin-left: 25px;
@@ -153,23 +154,41 @@
             </div>
           </div>
           <div class="answerBox" style="height: 90%" v-if="isBlock == 2">
-            <div v-if="toolsList[0].tools.length == 1" style="height: 100%; width: 100%">
-              <div v-if="toolsList[0].tools[0] == 9" style="height: 90%; width: 100%">
+            <div
+              v-if="toolsList[0].tools.length == 1"
+              style="height: 100%; width: 100%"
+            >
+              <!-- <div v-if="toolsList[0].tools[0] == 9" style="height: 90%; width: 100%">
                 选择题
-              </div>
-              <div v-if="toolsList[0].tools[0] == 10" style="height: 90%; width: 100%">
+              </div> -->
+              <div
+                v-if="toolsList[0].tools[0] == 10"
+                style="height: 90%; width: 100%"
+              >
                 倒计时
               </div>
-              <div v-if="toolsList[0].tools[0] == 11" style="height: 90%; width: 100%">
+              <div
+                v-if="toolsList[0].tools[0] == 11"
+                style="height: 90%; width: 100%"
+              >
                 问答题
               </div>
-              <div v-if="toolsList[0].tools[0] == 12" style="height: 90%; width: 100%">
+              <div
+                v-if="toolsList[0].tools[0] == 12"
+                style="height: 90%; width: 100%"
+              >
                 选人回答
               </div>
-              <div v-if="toolsList[0].tools[0] == 13" style="height: 90%; width: 100%">
+              <div
+                v-if="toolsList[0].tools[0] == 13"
+                style="height: 90%; width: 100%"
+              >
                 分小组
               </div>
-              <div v-if="toolsList[0].tools[0] == 14" style="height: 90%; width: 100%">
+              <div
+                v-if="toolsList[0].tools[0] == 14"
+                style="height: 90%; width: 100%"
+              >
                 作业评价
               </div>
               <div class="nextStepOne" @click="isBlock = 0">关闭</div>
@@ -250,7 +269,10 @@
               >
                 <div>分小组</div>
               </div>
-              <div class="nextStepOne" @click="nextTool">下一步</div>
+              <div class="nextStepOne" @click="nextTool" v-if="isNext == true">
+                上一步
+              </div>
+              <div class="nextStepOne" @click="nextTool" v-else>下一步</div>
             </div>
             <!-- <div v-if="toolCount == 0" style="height: 100%">
               <iframe
@@ -304,6 +326,47 @@
             </div>-->
             <!-- <div class="nextStepOne" @click="nextTool">下一步</div> -->
           </div>
+          <div
+            class="answerBox"
+            v-if="isBlock == 3"
+            style="padding: 0 0 0 25px"
+          >
+            <div>
+              <div class="score_box">
+                <span>自我评价</span>
+                <el-rate v-model="rateList.ca"></el-rate>
+              </div>
+              <div class="score_box">
+                <span>他人评价</span>
+                <el-rate v-model="rateList.sia"></el-rate>
+              </div>
+            </div>
+            <div>
+              <div style="padding-bottom: 15px; sont-size: 14px">备注</div>
+              <div class="bz">
+                <el-input
+                  type="textarea"
+                  placeholder="请输入一些你想表达的"
+                  :rows="6"
+                  resize="none"
+                  v-model="rateList.content"
+                ></el-input>
+              </div>
+            </div>
+            <span
+              slot="footer"
+              class="dialog-footer sztFooter"
+              style="
+                padding: 0 0 30px 0px;
+                position: absolute;
+                right: 20px;
+                bottom: 0;
+              "
+            >
+              <el-button>取消</el-button>
+              <el-button type="primary">确定</el-button>
+            </span>
+          </div>
         </div>
       </div>
       <!-- <div v-if="steps == 3" style="width: 40%; height: 96%">
@@ -430,7 +493,9 @@
     <div class="blackBottomB"></div>
     <div v-if="proVisible" class="mask">
       <div class="progressBox">
-        <div class="lbox"><img src="../assets/loading.gif" />上传中，请稍后</div>
+        <div class="lbox">
+          <img src="../assets/loading.gif" />上传中，请稍后
+        </div>
         <el-progress
           :text-inside="true"
           :stroke-width="20"
@@ -502,6 +567,7 @@ export default {
       ],
       steps: 0,
       isBlock: 0,
+      isNext: false,
       isAnswer: false,
       upload: [
         {
@@ -531,6 +597,11 @@ export default {
         "", //查看作业
         //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
       ],
+      rateList: {
+        ca: 0,
+        sia: 0,
+        content: "",
+      },
     };
   },
   methods: {
@@ -566,11 +637,14 @@ export default {
     },
     //uuid生成
     guid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
     },
     time() {
       if (!this.now) {
@@ -601,8 +675,14 @@ export default {
     nextTool() {
       if (this.howTools < this.toolsList[0].tools.length - 1) {
         this.howTools++;
+        if (this.howTools == this.toolsList[0].tools.length - 1) {
+          this.isNext = true;
+        }
       } else if (this.howTools == this.toolsList[0].tools.length - 1) {
-        this.isBlock = 0;
+        if (this.isNext == true) {
+          this.howTools = this.howTools - 1;
+          this.isNext = false;
+        }
       }
       // if (this.toolCount < 2) {
       //   this.toolCount++;
@@ -791,15 +871,22 @@ export default {
     },
     search() {},
     howPage(page) {
-      this.isBlock = 2;
-      this.howTools = 0;
-      if (this.toolsList.length > 0) {
-        this.toolsList = [];
-        this.toolsList.push({ tools: this.tools[page - 1].tools });
+      if (page == this.pageTotal) {
+        this.isBlock = 3;
       } else {
-        this.toolsList.push({ tools: this.tools[page - 1].tools });
+        if (this.ppage > 3) {
+          this.isBlock = 2;
+        }
+        this.howTools = 0;
+        if (this.toolsList.length > 0) {
+          this.toolsList = [];
+          this.toolsList.push({ tools: this.tools[page - 1].tools });
+        } else {
+          this.toolsList.push({ tools: this.tools[page - 1].tools });
+        }
       }
     },
+
     setPage() {
       this.ajax
         .get(this.$store.state.api + "selectPptPage", "")
@@ -1196,4 +1283,18 @@ export default {
   width: 20px;
   cursor: pointer;
 }
+.score_box {
+  font-size: 14px;
+}
+.score_box >>> .el-rate {
+  margin: 10px 0 20px 0;
+}
+.score_box >>> .el-rate__icon {
+  font-size: 23px;
+}
+.bz >>> .el-textarea__inner {
+  width: 40%;
+  border: 1px solid;
+  border-radius: 0px;
+}
 </style>