1

src/components/headBar.vue

@@ -34,6 +34,7 @@ export default {
   background-image: url(../assets/images/course/head-back.png);
   position: fixed;
   top: 0;
+  z-index: 9;
   .back {
     width: 0.3rem;
     height: 0.3rem;

src/views/course/index.vue

@@ -11,59 +11,61 @@
         </div>
       </template>
     </head-bar>
-    <div class="course-box" ref="cBox">
-      <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
-      <course-content-list v-if="false"></course-content-list>
-      <div class="course-type-box">
-        <div class="type-nav">
-          <div class="type-nav-box" :class="{ active: type == 1 }" @click="setType(1)">
-            <img src="@/assets/images/course/pratice-acitve.png" v-if="type == 1" alt="" />
-            <img src="@/assets/images/course/pratice.png" v-else alt="" />
-            <span>练习</span>
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <div class="course-box" ref="cBox">
+        <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
+        <course-content-list v-if="false"></course-content-list>
+        <div class="course-type-box">
+          <div class="type-nav">
+            <div class="type-nav-box" :class="{ active: type == 1 }" @click="setType(1)">
+              <img src="@/assets/images/course/pratice-acitve.png" v-if="type == 1" alt="" />
+              <img src="@/assets/images/course/pratice.png" v-else alt="" />
+              <span>练习</span>
+            </div>
+            <div class="type-nav-box" :class="{ active: type == 2 }" @click="setType(2)">
+              <img src="@/assets/images/course/commmt-active.png" v-if="type == 2" alt="" />
+              <img src="@/assets/images/course/comment.png" v-else alt="" />
+              <span>评课</span>
+            </div>
           </div>
-          <div class="type-nav-box" :class="{ active: type == 2 }" @click="setType(2)">
-            <img src="@/assets/images/course/commmt-active.png" v-if="type == 2" alt="" />
-            <img src="@/assets/images/course/comment.png" v-else alt="" />
-            <span>评课</span>
-          </div>
-        </div>
-        <steps-box
-          v-show="type == 1"
-          :courseDetail="courseDetail"
-          :chapInfo="chapInfo"
-          :courseType="courseType"
-          :taskCount="taskCount"
-          :courseid="courseid"
-          :tcid="tcid"
-          :oid="oid"
-        ></steps-box>
-        <comment-box
-          v-show="type == 2"
-          :courseid="courseid"
-          :courseType="courseType"
-          :taskCount="taskCount"
-          ref="comment"
-        ></comment-box>
-      </div>
-      <div class="courseNavIcon">
-        <div class="nIcon" @click="navCheck">
-          <div class="iconImg"><img src="../../assets/images/home/mlIcon.png" alt="" /></div>
-          <div>目录</div>
-        </div>
-        <div class="nIcon" @click="nextOrpreSteps(0)">
-          <div class="iconImg"><img src="../../assets/images/home/lastStep.png" alt="" /></div>
-          <div>上一步</div>
-        </div>
-        <div class="nIcon" @click="nextOrpreSteps(1)">
-          <div class="iconImg"><img src="../../assets/images/home/nextStep.png" alt="" /></div>
-          <div>下一步</div>
+          <steps-box
+            v-show="type == 1"
+            :courseDetail="courseDetail"
+            :chapInfo="chapInfo"
+            :courseType="courseType"
+            :taskCount="taskCount"
+            :courseid="courseid"
+            :tcid="tcid"
+            :oid="oid"
+          ></steps-box>
+          <comment-box
+            v-show="type == 2"
+            :courseid="courseid"
+            :courseType="courseType"
+            :taskCount="taskCount"
+            ref="comment"
+          ></comment-box>
         </div>
-        <div class="nIcon" @click="setType(2, true)">
-          <div class="iconImg"><img src="../../assets/images/home/pk.png" alt="" /></div>
-          <div>评课</div>
+        <div class="courseNavIcon">
+          <div class="nIcon" @click="navCheck">
+            <div class="iconImg"><img src="../../assets/images/home/mlIcon.png" alt="" /></div>
+            <div>目录</div>
+          </div>
+          <div class="nIcon" @click="nextOrpreSteps(0)">
+            <div class="iconImg"><img src="../../assets/images/home/lastStep.png" alt="" /></div>
+            <div>上一步</div>
+          </div>
+          <div class="nIcon" @click="nextOrpreSteps(1)">
+            <div class="iconImg"><img src="../../assets/images/home/nextStep.png" alt="" /></div>
+            <div>下一步</div>
+          </div>
+          <div class="nIcon" @click="setType(2, true)">
+            <div class="iconImg"><img src="../../assets/images/home/pk.png" alt="" /></div>
+            <div>评课</div>
+          </div>
         </div>
       </div>
-    </div>
+    </van-pull-refresh>
     <nav-box
       ref="navbox"
       :navVisible.sync="navVisible"
@@ -106,7 +108,8 @@ export default {
       type: 1,
       tcid: '',
       tcid2: this.$route.query.tcid,
-      navVisible: false
+      navVisible: false,
+      isLoading: false
     }
   },
   methods: {
@@ -125,7 +128,7 @@ export default {
       }
       return commonElements
     },
-    getCourse() {
+    async getCourse() {
       const params = {
         courseId: this.courseid
       }
@@ -140,6 +143,7 @@ export default {
             this.tcid2 ? this.tcid2.split(',') : []
           ).join(',')
           console.log(res)
+          this.isLoading = false
         })
         .catch(err => {
           console.error(err)
@@ -161,7 +165,10 @@ export default {
     },
     back() {
       // eslint-disable-next-line prettier/prettier
-      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid }})
+      this.$router.push({ path: '/courseDetail', query: { courseid: this.courseid } })
+    },
+    onRefresh() {
+      this.getCourse()
     }
   },
   created() {