update

src/components/student/studyStudent.vue

@@ -377,6 +377,98 @@
         </div>
       </div>
     </div>
+    <div class="pButton" @click="(pzDialog = true), selectPz()" v-if="tType == 4">
+      <!-- 批 -->
+      <img src="../../assets/pzBtn2.png" style="width: 25px" alt="" />
+    </div>
+    <div v-if="pzDialog == true" class="newDialogCss">
+      <div class="pzTop2">
+        <!-- <div>批注</div>
+        <div @click="pzDialog = false">
+          <img src="../assets/close1.png" alt="" />
+        </div> -->
+        <div class="checkbox">
+          <div class="check" style="font-size: 25px">评课笔记</div>
+          <img src="../../assets/pzBtn.png" @click="pzDialog = false" alt="" />
+        </div>
+      </div>
+      <div :class="pzList && pzList.length ? 'pzBox' : 'noPzBox'">
+        <div class="pzListBox" v-if="pzList && pzList.length">
+          <div class="pzList" v-for="(pz, pzIndex) in pzList" :key="pzIndex">
+            <div class="pzNavTop">
+              <div>批</div>
+              <div>
+                {{
+                  pz.username.length > 5
+                    ? pz.username.substring(0, 5) + "..."
+                    : pz.username
+                }}的批注
+              </div>
+              <div class="pzDelete" v-if="pz.userid == userid" @click="deletePz(pz.id)">
+                删除
+              </div>
+            </div>
+            <div class="pzContent cont" v-html="pz.content" v-if="pz.type == '1'">
+              <!-- {{ }} -->
+            </div>
+            <div class="pzContent" v-if="pz.type == '2'">
+              <audio :src="pz.content" controls="controls" ref="audio">
+                Your browser does not support the audio element.
+              </audio>
+            </div>
+            <div class="pzContent" v-if="pz.type == '3'">
+              <img :src="pz.content" style="width: 90%; margin: 0 auto; display: block"
+                @click="previewImg(pz.content)" />
+            </div>
+            <div class="time">
+              {{ pz.time }}
+            </div>
+          </div>
+        </div>
+        <div class="noPz" v-else>
+          <img src="../../assets/icon/noPz.png" alt="" />
+        </div>
+        <div class="addPzButton">
+          <div class="addPz" @click="(addPzDialog = true), (pzType = 1)">
+            添加批注
+          </div>
+          <div class="img1">
+            <div @click="(addPzDialog = true), (pzType = 2)">
+              <img src="../../assets/audio.png" /><span>音频</span>
+            </div>
+            <!-- <img src="../assets/picture.png" @click="addPzDialog = true,pzType = 3" /> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="addPzDialog == true" class="addDialogCss">
+      <div class="pzTop">
+        <div class="teacherPz">
+          <div class="teacherPzImg">
+            <img src="../../assets/icon/teacherPz.png" alt="" />
+          </div>
+          <div style="margin-left: 10px; height: 25px">教师批注</div>
+        </div>
+        <div @click="addPzDialog = false">
+          <img src="../../assets/close1.png" alt="" />
+        </div>
+      </div>
+      <div class="addPzBox">
+        <div class="addPzCheck">
+          <span :class="{ isChooseActive: pzType == 1 }" @click="pzType = 1">文本</span>
+          <span :class="{ isChooseActive: pzType == 2 }" @click="pzType = 2">音频</span>
+        </div>
+        <div style="height: calc(100% - 95px)">
+
+          <editor-bar class="binfo_input pzConText" style="width: 100% !important" placeholder="请输入任务描述"
+            v-model="pzConText" @change="change" v-if="pzType == 1"></editor-bar>
+          <Audio @addPz="addPz" class="pzAudioClass" v-if="pzType == 2"></Audio>
+        </div>
+        <div class="addTextCss" @click="addPz('1')" v-if="pzType == 1">
+          确定
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -717,6 +809,80 @@ export default {
           console.error(err);
         });
     },
+    addPz(type, content) {
+      if (type == "1" && this.pzConText == "") {
+        this.$message.error("批注不能为空！");
+        return;
+      }
+      let params = [
+        {
+          cid: this.id,
+          uid: this.userid,
+          s: this.courseType,
+          t: this.taskCount,
+          c: type == "1" ? this.pzConText.replaceAll(/%/g, "%25") : content,
+          type: type,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addPz2", params)
+        .then((res) => {
+          this.$message({
+            message: "添加成功",
+            type: "success",
+          });
+          this.pzConText = "";
+          this.addPzDialog = false;
+          this.selectPz();
+        })
+        .catch((err) => {
+          this.$message.error("添加失败");
+          console.error(err);
+        });
+    },
+    deletePz(id) {
+      this.$confirm("确定删除此批注吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          let params = [
+            {
+              id: id,
+            },
+          ];
+          this.ajax
+            .post(this.$store.state.api + "deletePz", params)
+            .then((res) => {
+              this.$message({
+                message: "删除成功",
+                type: "success",
+              });
+              this.selectPz();
+            })
+            .catch((err) => {
+              this.$message.error("网络异常");
+              console.error(err);
+            });
+        })
+        .catch(() => { });
+    },
+    selectPz() {
+      let params = {
+        cid: this.id,
+        s: this.courseType,
+        t: this.taskCount,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectPzList", params)
+        .then((res) => {
+          this.pzList = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
     allScrell() {
       window.parent.postMessage({ allScreen: this.screenType+'s' }, "*");
     },
@@ -847,6 +1013,7 @@ export default {
       ]),
         (this.radio = []);
       this.isClickNav = "";
+      this.selectPz();
       this.getCourseDetail();
       this.$forceUpdate();
     },
@@ -1002,6 +1169,9 @@ export default {
 
           _this.timer = setInterval(function () {
             _this.getCourseDetail(2);
+            if (_this.tType == 4) {
+              _this.selectPz();
+            }
           }, 5000);
         })
         .catch((err) => {
@@ -1619,6 +1789,10 @@ export default {
       window.parent.postMessage({ allScreen: 6 }, "*");
     }
     this.getCourseDetail();
+    if (this.tType == 4) {
+      this.pzDialog = true;
+      this.selectPz();
+    }
     this.selectCount();
   },
 };