营地、旅游列表分类

pages/activity.vue

@@ -48,7 +48,7 @@
       class="loading">加载中……</p>
     <p
       v-if="touchend"
-      class="empty_data">——共{{ totalCount }}个活动——</p>
+      class="empty_data">——共{{ totalCount?totalCount:0 }}个活动——</p>
     <go-top/>
     <Footer v-if="touchend"/>
   </div>

pages/campsite.vue

@@ -13,6 +13,18 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
+    <div>
+      <nav
+        id="nav"
+        :class="searchBarFixed == true ? 'isFixed' :''">
+        <p
+          v-for="(item, index) in dataType"
+          :key="index"
+          :class="listQuery.type == item.id?'active':''"
+          @click="chooseSelect(item)">{{ item.name }}</p>
+      </nav>
+    </div>
+    <div style="padding-top: 0;border-top: 1px solid #dfdfdf;height: 17px;"/>
     <ul
       v-if="dataDetail.length"
       id="scroll-area"
@@ -37,9 +49,10 @@
     <p
       v-if="preventRepeatReuqest"
       class="loading">加载中……</p>
+    <p id="empty"/>
     <p
       v-if="touchend"
-      class="empty_data">—— 共{{ totalCount }}个房车营地——</p>
+      class="empty_data">—— 共{{ totalCount?totalCount:0 }}个房车营地——</p>
     <go-top/>
     <Footer v-if="touchend"/>
   </div>
@@ -64,6 +77,7 @@
     },
     data(){
       return{
+        searchBarFixed: false,
         showBanner: !0,
         looptime: 4000, // 循环时间
         touchend: false,////没有更多数据
@@ -105,9 +119,19 @@
     },
     methods: {
       handleScroll: function () {
+        let path = $nuxt.$route.path;
+        if(path == '/campsite'){
           let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-        // 设备/屏幕高度
           let scrollObj = document.getElementById("scroll-area"); // 滚动区域
+          let menuTop = document.querySelector('#nav').offsetTop;
+          let empty = document.querySelector('#empty').offsetTop;
+          if (scrollTop > menuTop-44 && empty > scrollObj.clientHeight) {
+            this.searchBarFixed = true;
+          }
+          if (scrollTop < 80) {
+            this.active = 'activity';
+            this.searchBarFixed = false;
+          }
           if(scrollObj) {
             let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
             //滚动条到底部的条件
@@ -125,18 +149,22 @@
               this.getAll();
             }
           }
+        }
       },
       chooseSelect(e) {
-        console.log(e.target.value);
-        this.listQuery.tagId = e.target.value;
+        this.listQuery.type = e.id;
         this.preventRepeatReuqest = true;
+        this.dataDetail = [];
+        this.listQuery.pageNo = 1;
+        document.documentElement.scrollTop = 0;
         this.getAll();
       },
       getType() {
         let t = this;
-        axios.get('/api/uccn/app/unauth/tour/tagList')
+        axios.get("/api/campsite/campsiteTag/app/unauth/tags")
           .then(function(response) {
-            t.dataType = response.data;
+            t.dataType = response.data.data;
+            t.dataType.unshift({id:"",name:'全部'})
           });
       },
       getAll() {
@@ -173,6 +201,36 @@
 <style lang="scss">
   @import "../assets/styles/mixin";
   .campsite-container{
+    nav{
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      overflow: auto;
+    }
+    nav.isFixed{
+      position: fixed;
+      top: 44px;
+      background: #fff;
+      width: 100%;
+      border-bottom: 1px solid #dfdfdf;
+    }
+    nav::-webkit-scrollbar { width: 0 !important }
+    p{
+      text-align: center;
+      font-size: 14px;
+      color: #999;
+      flex-shrink: 0;
+      margin: 27px 13px 0px 13px;
+      padding-bottom: 13px;
+    }
+    p.active{
+      border-bottom: 2px solid #1bbb9f;
+      font-size: 16px;
+      color: #333;
+    }
     .campsite-ul{
       padding-top: 0px;
       display: flex;

pages/news.vue

@@ -42,7 +42,7 @@
       class="loading">加载中……</p>
     <p
       v-if="touchend"
-      class="empty_data">——共{{ totalCount }}篇新闻资讯——</p>
+      class="empty_data">——共{{ totalCount?totalCount:0 }}篇新闻资讯——</p>
     <go-top/>
     <Footer v-if="touchend"/>
   </div>

pages/tour.vue

@@ -13,11 +13,23 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
+    <div
+      id="nav"
+      :class="searchBarFixed == true ? 'isFixed' :''"
+      class="nav-sec-menu">
+      <nav>
+        <p
+          v-for="(item, index) in dataType"
+          :key="index"
+          :class="listQuery.tagId == item.id?'active':''"
+          @click="chooseSelect(item)">{{ item.name }}</p>
+      </nav>
+    </div>
+    <div style="padding-top: 0;margin-top: -17px;border-top: 1px solid #dfdfdf;height: 17px;"/>
     <ul
       v-if="dataDetail.length"
       id="scroll-area"
-      type="1"
-      style="padding-top: 0;"
+      style="padding-top: 0;margin-top: -17px;"
       class="main-padding">
       <router-link
         v-for="item in dataDetail"
@@ -35,9 +47,10 @@
     <p
       v-if="preventRepeatReuqest"
       class="loading">加载中……</p>
+    <p id="empty"/>
     <p
       v-if="touchend"
-      class="empty_data">——共{{ totalCount }}个旅行路线——</p>
+      class="empty_data">——共{{ totalCount?totalCount:0 }}个旅行路线——</p>
     <go-top/>
     <Footer v-if="touchend"/>
   </div>
@@ -83,6 +96,7 @@
         dataNull:false,
         tourList: [],
         currentPage: 1,//当前加载页
+        searchBarFixed: false,
         preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
       };
     },
@@ -101,15 +115,42 @@
       let cc = data.data;
       return { bannerList: cc}
     },
+    mounted(){
+      let t = this;
+      let galleryTop = new Swiper('.gallery-top', {
+        spaceBetween: 10,
+        loop:true,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false,
+        },
+        on: {
+          slideChangeTransitionEnd: function () {
+            console.log(this.activeIndex);
+          },
+        },
+      });
+    },
     methods: {
       handleScroll: function () {
+        let path = $nuxt.$route.path;
+        if(path == '/tour') {
           let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
           // 设备/屏幕高度
           let scrollObj = document.getElementById("scroll-area"); // 滚动区域
-        if(scrollObj){
+          let menuTop = document.querySelector('#nav').offsetTop;
+          let empty = document.querySelector('#empty').offsetTop;
+          if (scrollTop > menuTop-44 && empty > scrollObj.clientHeight) {
+            this.searchBarFixed = true;
+          }
+          if (scrollTop < 80) {
+            this.active = 'activity';
+            this.searchBarFixed = false;
+          }
+          if (scrollObj) {
             let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
             //滚动条到底部的条件
-          if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
+            if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
               if (this.touchend) {
                 return;
               }
@@ -123,18 +164,23 @@
               this.getAll();
             }
           }
+        }
       },
+
       chooseSelect(e) {
-        console.log(e.target.value);
-        this.listQuery.tagId = e.target.value;
+        this.listQuery.tagId = e.id;
         this.preventRepeatReuqest = true;
+        this.dataDetail = [];
+        this.listQuery.page = 1;
+        document.documentElement.scrollTop = 0;
         this.getAll();
       },
       getType() {
         let t = this;
         axios.get('/api/uccn/app/unauth/tour/tagList')
           .then(function(response) {
-            t.dataType = response.data;
+            t.dataType = response.data.data;
+            t.dataType.unshift({id:"",name:'全部'})
         });
       },
       getAll() {
@@ -172,6 +218,41 @@
 <style lang="scss">
   @import "../assets/styles/mixin";
   .tour-container{
+    nav{
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      overflow: auto;
+    }
+    nav::-webkit-scrollbar { width: 0 !important }
+    .nav-sec-menu.isFixed{
+      position: fixed;
+      top: 44px;
+      background: #fff;
+      height: 64px;
+      width: 100%;
+      border-bottom: 1px solid #dfdfdf;
+    }
+    p{
+      text-align: center;
+      font-size: 14px;
+      color: #999;
+      flex-shrink: 0;
+      margin: 27px 13px 0px 13px;
+      padding-bottom: 13px;
+    }
+    p.active{
+      border-bottom: 2px solid #1bbb9f;
+      font-size: 16px;
+      color: #333;
+    }
+    .tyle-list-li{
+      padding-right:10px;
+      display: inline-block;
+    }
     .tour-item{
       margin: 17px 0;
     }

pages/vehicle.vue

@@ -58,7 +58,7 @@
       class="loading">加载中……</p>
     <p
       v-if="touchend"
-      class="empty_data">—— 共{{ totalCount }}款车型——</p>
+      class="empty_data">—— 共{{ totalCount?totalCount:0 }}款车型——</p>
     <go-top/>
     <Footer v-if="touchend"/>
   </div>