车型tab定位

assets/styles/base.scss

@@ -33,6 +33,9 @@ input[disabled] {
   display: flex;
   justify-content: space-between;
 }
+.flex{
+  display: flex;
+}
 
 .flex-aic-jcc-fdc{
   display: flex;
@@ -40,11 +43,16 @@ input[disabled] {
   justify-content: center;
   flex-direction: column;
 }
+.flex-jcb-fdc{
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}
 .header-top{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 1.87733rem;
+  height: px2rem(88px);
   position: fixed;
   z-index: 999;
   top: 0;
@@ -64,6 +72,15 @@ input[disabled] {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+.loading{
+  padding: 10px;
+  text-align: center;
+  color: #666;
+}
+
+.total-div{
+  font-size: px2rem(30px);
+}
 
 .main-padding{
   padding: 0.7rem 0.4rem;
@@ -131,10 +148,20 @@ a:active {
 body,
 html {
   @include wh(100%, 100%);
-  background-color: $fill-base;
+  background-color: #fff;
 }
 
 img {
   display: block;
   max-width: 100%;
 }
+.isFixed {
+  position: fixed;
+  width: 100%;
+  top: px2rem(88px);
+  background: #fff;
+  z-index: 999;
+}
+.bt-line{
+  border-bottom: 1px solid #dfdfdf;
+}

pages/activity.vue

@@ -36,9 +36,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -89,6 +93,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {

pages/campsite.vue

@@ -33,9 +33,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -87,6 +91,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getType();
       this.getAll();
     },
@@ -121,6 +126,7 @@
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
       getType() {

pages/news.vue

@@ -3,6 +3,7 @@
     <Head/>
     <ul
       v-if="dataDetail.length"
+      id="scroll-area"
       type="1"
       class="main-padding">
       <router-link
@@ -11,17 +12,22 @@
         :key="item.id"
         class="flex-jcb news-item">
         <img
-          :src="item.cover"
+          :src="item.coverImage"
           class="tour-img-home">
         <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
+          <div class="ellipsis2">{{ item.title }}</div>
+          <div class="ellipsis2 epitome">导语：{{ item.epitome }}</div>
+          <div class="epitome">{{ item.addTime.substring(0, 10) }}</div>
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
-    <Footer/>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -67,23 +73,51 @@
       ...mapGetters(["userInfo"])
     },
     created() {
+      this.preventRepeatReuqest = true;
+      window.addEventListener('scroll', this.handleScroll);
       this.getAll();
     },
     methods: {
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        // 设备/屏幕高度
+        let scrollObj = document.getElementById("scroll-area"); // 滚动区域
+        if(scrollObj){
+          let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
+          //滚动条到底部的条件
+          if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
+            if (this.touchend) {
+              return;
+            }
+            //防止重复请求
+            if (this.preventRepeatReuqest) {
+              return;
+            }
+            this.preventRepeatReuqest = true;
+            //数据的定位加20位
+            this.listQuery.page = this.currentPage + 1;
+            this.getAll();
+          }
+        }
+      },
       getAll() {
         let t = this;
         axios.get('/api/uccn/article/app/unauth/list?type=1&page='+this.listQuery.page+'&limit='+this.listQuery.limit)
           .then(function(response) {
             t.totalCount = response.data.data.total;
-            t.dataDetail = response.data.data.list;
+            let list = response.data.data.list;
+            t.dataDetail = [...t.dataDetail, ...list];
+            t.currentPage = response.data.data.pageNum;
             if (response.data.data.total < t.listQuery.limit*t.listQuery.page) {
               t.touchend = true;
             }
+            t.preventRepeatReuqest = false;
           });
       },
     },

pages/tour.vue

@@ -13,7 +13,7 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
-    <div class="main-padding"> 共{{ totalCount }}个旅行路线</div>
+    <div class="main-padding total-div"> 共{{ totalCount }}个旅行路线</div>
     <ul
       v-if="dataDetail.length"
       id="scroll-area"
@@ -33,9 +33,13 @@
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -88,6 +92,7 @@
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
       this.getType();
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {
@@ -121,6 +126,7 @@
       chooseSelect(e) {
         console.log(e.target.value);
         this.listQuery.tagId = e.target.value;
+        this.preventRepeatReuqest = true;
         this.getAll();
       },
       getType() {

pages/vehicle.vue

@@ -24,19 +24,43 @@
         v-for="item in dataDetail"
         :to="{ path: 'vehicleDetail', query:{id: item.id, name:item.name }}"
         :key="item.id"
-        class="flex-jcb news-item">
+        class="news-item flex">
         <img
           :src="item.coverPic"
           :alt = "item.name"
-          class="tour-img-home">
-        <div class="tour-home-r">
-          <div class="ellipsis2">{{ item.name }}</div>
+          class="vehicle-img-list">
+        <div class="vehicle-list flex-jcb-fdc">
+          <div class="ellipsis2 vehicle-img-list-name">{{ item.name }}</div>
+          <div class="flex-aic-jcb">
+            <span
+              v-for="(iitem,iindex) in item.uccnCataList"
+              :key="iitem.id"
+              class="flex-aic config">
+              <img
+                v-if="iindex==0"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg==">
+              <img
+                v-if="iindex==1"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII=">
+              <img
+                v-if="iindex==2"
+                style="margin-right: 5px;"
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC">
+              {{ iitem.name }}
+            </span>
+          </div>
         </div>
       </router-link>
     </ul>
+    <p
+      v-if="preventRepeatReuqest"
+      class="loading">加载中……</p>
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <Footer v-if="touchend"/>
   </div>
 </template>
 
@@ -87,6 +111,7 @@
     created() {
       // handleScroll为页面滚动的监听回调
       window.addEventListener('scroll', this.handleScroll);
+      this.preventRepeatReuqest = true;
       this.getAll();
     },
     async asyncData() {
@@ -162,10 +187,24 @@
   .tour-home-r, .news-home-r{
     width: 58%;
   }
-  .tour-img-home, .news-home-img{
-    width: px2rem(300px);
-    height: px2rem(150px);
+  .vehicle-img-list-name{
+    font-size:px2rem(24px);
+    font-weight: 700;
+  }
+  .vehicle-img-list{
+    width: px2rem(277px);
+    height: px2rem(225px);
+  }
+  .vehicle-list{
+    border-bottom: 1px solid #dfdfdf;
+    margin-left: px2rem(20px);
+    width: 100%;
+    padding: px2rem(20px);
+    .config{
+      color: #999;
     }
+  }
+
   .order-page {
     padding: px2rem(88px) 0 3px 0;