课程商城记住筛选项和页面高度

src/App.vue

 <template>
-  <div id="app">
+  <div id="app" @scroll="parentScroll" ref="scrollContainer">
     <router-view />
   </div>
 </template>
@@ -11,13 +11,36 @@ export default {
   name: 'App',
   data() {
     return {
-      timeout: null
+      timeout: null,
+      routerPath: ''
+    }
+  },
+  // 监听,当路由发生变化的时候执行
+  watch: {
+    $route: {
+      immediate: true, // 加这个就可以在刷新时也监听到相应页面的路由
+
+      handler(val) {
+        this.routerPath = val.path
+        if (this.routerPath === '/courseResources/courseMall/index') {
+          this.$refs.scrollContainer.scrollTop = 1400
+        }
+      },
+      // 深度观察监听
+      deep: true
     }
   },
   mounted() {
     this.setupAutoLogoutTimer() // 页面加载时启动监控用户操作
   },
   methods: {
+    parentScroll(event) {
+      // 获取滚动高度
+      const scrollHeight = event.target.scrollTop
+      if (this.routerPath === '/courseResources/courseMall/index') {
+        this.$store.dispatch('app/setTopE', scrollHeight)
+      }
+    },
     /** 页面加载时启动监控用户操作*/
     setupAutoLogoutTimer() {
       // 监听用户操作事件

src/store/getters.js

@@ -22,5 +22,6 @@ const getters = {
   groups: state => state.props.groups,
   businessId: state => state.user.businessId,
   unitUser: state => state.props.unitUser,
+  topE: state => state.app.topE
 }
 export default getters

src/store/modules/app.js

@@ -6,7 +6,8 @@ const state = {
     withoutAnimation: false
   },
   device: 'desktop',
-  loadingCount: 0
+  loadingCount: 0,
+  topE: null
 }
 
 const mutations = {
@@ -29,6 +30,9 @@ const mutations = {
   },
   SET_LOADING_COUNT: (state, countNum) => {
     state.loadingCount = countNum
+  },
+  SET_TOP_E: (state, e) => {
+    state.topE = e
   }
 }
 
@@ -44,6 +48,9 @@ const actions = {
   },
   setLoadingCount({ commit }, countNum) {
     commit('SET_LOADING_COUNT', countNum)
+  },
+  setTopE({ commit }, e) {
+    commit('SET_TOP_E', e)
   }
 }
 

src/views/courseResources/courseDetails/index.vue

@@ -3,6 +3,7 @@
   <div>
     <nav-list :list="navList" :current-menu="'/courseResources/index'" />
     <div v-loading="loading" class="courseDetails-content">
+      <el-button type="primary" @click="handleGoBack">返回</el-button>
       <div class="courseCard">
         <img v-if="courseDetails.availableTrialTime === 0" class="guoqiPathClass" :src="guoqiPath" alt="">
         <div class="coursePicture">
@@ -143,7 +144,7 @@
             <div v-if="courseDetails.lessonPrice !== 0 && courseDetails.lessonIsPay === 1 " class="priceLine" />
             <span
               v-if="userToken && $store.getters.roles[0].roleKey === 'unit_admin'
-                && courseDetails.lessonPrice !== 0  &&  courseDetails.tryout !== '1'"
+                && courseDetails.lessonPrice !== 0 && courseDetails.tryout !== '1'"
               :class="courseDetails.lessonIsPay === 1 ? 'buyStatus' : 'buyStatusNo'"
             >
               {{ courseDetails.lessonIsPay === 1 ? '（已购买）' : '（未购买）' }}</span>
@@ -213,7 +214,7 @@
               <div class="tag-page">
                 <div v-for="(chap, key1) in courseCatalogue.chapterList" :key="key1" class="chapter">
                   <span class="chapter-title" :title="chap.chapterName">第{{
-                      key1 + 1
+                    key1 + 1
                   }}章:&nbsp;&nbsp;{{ chap.chapterName }}</span>
                   <div
                     v-for="(sec, key2) in chap.childList"
@@ -505,6 +506,16 @@ export default {
     this.getRecommendCourse()
     next()
   },
+  beforeRouteEnter(to, from, next) {
+    console.log('from',from)
+    next(vm => {
+      if (from.path === '/courseResources/courseMall/index') {
+        localStorage.setItem('backType', '1')
+      } else if (from.path !== '/') {
+        localStorage.setItem('backType', '2')
+      }
+    })
+  },
   mounted() {
     const periodElement = this.$refs.period
     if (periodElement) {
@@ -581,7 +592,7 @@ export default {
             this.lessonId = data.lessonId
             this.dialogVisible = true
           }
-        }  else {
+        } else {
           this.$router.push('/login')
         }
       } else {
@@ -792,6 +803,22 @@ export default {
       } else {
         this.$message.success('取消收藏成功')
       }
+    },
+    /** 返回按钮  backType:  返回类型，1：返回到课程列表页面，并带参。2：直接go-1*/
+    handleGoBack() {
+      console.log('33333', this.$route.query)
+      console.log('44444', localStorage.getItem('backType'))
+      const backType = localStorage.getItem('backType')
+      if (backType === '1') {
+        this.$router.push({
+          path: '/courseResources/courseMall/index?mallIdentityType=' + this.$route.query.mallIdentityType,
+          query: {
+            params: this.$route.query
+          }
+        })
+      } else {
+        this.$router.go(-1)
+      }
     }
   }
 }

src/views/courseResources/courseMall/index.vue

@@ -107,28 +107,28 @@
         <div class="box-top">
           <div class="title">综合</div>
           <div class="search-box">
-<!--            <el-checkbox-->
-<!--              v-model="onlyTryToSee"-->
-<!--              size="medium"-->
-<!--              class="checkbox"-->
-<!--              @change="onlyTryToSeeChose"-->
-<!--            >只看试用-->
-<!--            </el-checkbox>-->
-<!--            <el-checkbox-->
-<!--              v-model="onlyFree"-->
-<!--              size="medium"-->
-<!--              class="checkbox"-->
-<!--              @change="onlyFreeChose"-->
-<!--            >只看免费-->
-<!--            </el-checkbox>-->
-<!--            <el-checkbox-->
-<!--              v-if="$store.getters.token"-->
-<!--              v-model="onlyPurchased"-->
-<!--              size="medium"-->
-<!--              class="checkbox"-->
-<!--              @change="onlyPurchasedChose"-->
-<!--            >只看已购-->
-<!--            </el-checkbox>-->
+            <!--            <el-checkbox-->
+            <!--              v-model="onlyTryToSee"-->
+            <!--              size="medium"-->
+            <!--              class="checkbox"-->
+            <!--              @change="onlyTryToSeeChose"-->
+            <!--            >只看试用-->
+            <!--            </el-checkbox>-->
+            <!--            <el-checkbox-->
+            <!--              v-model="onlyFree"-->
+            <!--              size="medium"-->
+            <!--              class="checkbox"-->
+            <!--              @change="onlyFreeChose"-->
+            <!--            >只看免费-->
+            <!--            </el-checkbox>-->
+            <!--            <el-checkbox-->
+            <!--              v-if="$store.getters.token"-->
+            <!--              v-model="onlyPurchased"-->
+            <!--              size="medium"-->
+            <!--              class="checkbox"-->
+            <!--              @change="onlyPurchasedChose"-->
+            <!--            >只看已购-->
+            <!--            </el-checkbox>-->
             <el-input
               v-model.trim="queryParams.lessonName"
               class="search"
@@ -352,7 +352,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['userId']),
+    ...mapGetters(['userId', 'topE']),
     // 是否展示考核相关按钮
     // 选择岗位能力准入 且 岗位分类 及难度等级均选择特定选项
     showExamBtns() {
@@ -389,6 +389,7 @@ export default {
     next()
   },
   created() {
+    console.log('createdcreatedcreatedcreatedcreatedcreated',this.queryParams)
     this.getCoursePlanOptions() // 获取企业和院校的课程方案
     this.handleToTop() // 一进入页面自动滚动到最顶部
     this.mallIdentityType = this.$route.query.mallIdentityType || ''
@@ -415,6 +416,17 @@ export default {
       })
     }
   },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      console.log('from', from)
+      if (from.path === '/courseResources/courseDetails/index') {
+        setTimeout(() => {
+          vm.queryParams = JSON.parse(from.query.params)
+          vm.getCourseByPagination()
+        }, 1000)
+      }
+    })
+  },
   methods: {
     /** 获取企业和院校的课程方案*/
     getCoursePlanOptions() {
@@ -620,10 +632,14 @@ export default {
     },
     // 跳转到课程详情
     toCourseDetails(param) {
+      console.log('this.scrollTop', this.topE)
       this.$router.push({
         path: '/courseResources/courseDetails/index',
         query: {
-          courseId: param.businessId
+          courseId: param.businessId,
+          params: JSON.stringify(this.queryParams),
+          height: this.topE,
+          mallIdentityType: this.mallIdentityType
         }
       })
     }

src/views/login/login.vue

@@ -370,7 +370,7 @@ export default {
         }
       }).catch(() => {
         this.loading = false
-        this.verify = true
+        this.verify = false
         if (this.captchaType === 'MATH' || this.captchaType === 'CHAR') {
           this.getCode()
         }