首页-接口联调

components/banner.vue

 <template>
-    <div class="banner" style="width:100%;height: 400px;">
+    <div class="banner">
         <div class="box">
             <ul>
                 <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
-                    <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+                    <img :src= "item.cover" style="width:100%;" :alt="item.title"/>
                 </li>
             </ul>
             <div class="status">
             <span class="name-t" v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''"
                   @mouseenter="changeBanner(index)"
                   @mouseleave="startLoop"
-            >{{item.name}}
+            >{{item.title}}
         </span>
             </div>
             <!--<div class="btn">-->
@@ -152,7 +152,7 @@
     }
     .box{
         position:relative;
-        height:100%;
+        height:500px;
     }
     span{
         display:block;
@@ -177,8 +177,7 @@
         transform: translateY(-50%);
     }
     .banner{
-        width:400px;
-        height:200px;
-        overflow:hidden;
+        width:100%;
+        max-height:500px;
     }
 </style>

components/bannerActivity.vue

@@ -3,14 +3,14 @@
     <div class="box">
       <ul>
         <li v-for="(item, index) in list" :key="item.id" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
-          <img :src= "item.image_url" style="width:100%;" :alt="item.name"/>
+          <img :src= "item.banner" style="width:100%;height: auto" :alt="item.title"/>
         </li>
       </ul>
       <div class="status">
             <div class="name-t" v-for="(item, index) in list" :key="item.id">
-              <div class="ft-20" v-if="index === current">{{item.name}}</div>
-              <div class="ft-14" v-if="index === current">活动时间：{{item.desc}}</div>
-              <div class="ft-14" v-if="index === current">活动地点：{{item.desc}}</div>
+              <div class="ft-20" v-if="index === current">{{item.title}}</div>
+              <div class="ft-14" v-if="index === current">活动时间：{{item.startTime}}至{{item.endTime}}</div>
+              <div class="ft-14" v-if="index === current">活动地点：{{item.province}}{{item.city}}{{item.town}}{{item.address}}</div>
         </div>
       </div>
       <div class="btn">
@@ -112,20 +112,21 @@
     position:absolute;
     left:0;
     width:100%;
-    height:100%;
+    height:auto;
     font-size:inherit;
     color:#fff;
     font-size:80px;
     text-align:center;
     opacity:0;
     transition: all 1.5s;
+    list-style: none;
   }
   .active{
     opacity:1;
     transition: all 1.5s;
   }
   ul{
-    height:100%;
+    height:auto;
   }
   .name-t div{
     /*font-size: 14px;*/
@@ -170,7 +171,7 @@
   }
   .banner-active{
     width: 1200px;
-    height: 250px;
-    overflow:hidden;
+    height: 312px;
+    /*overflow:hidden;*/
   }
 </style>

components/footer.vue

@@ -9,7 +9,7 @@
             <p class="ft-12 tc">欣新房车微信公众号</p>
           </div>
           <div class="footer-scan">
-            <img src="../assets/images/1566894441.png" alt="欣新房车，让生活更美好"/>
+            <img src="../assets/images/xxfczs.jpg" alt="欣新房车，让生活更美好"/>
             <p class="ft-12 tc">欣新房车助手小程序</p>
           </div>
           <div class="footer-scan">

nuxt.config.js

@@ -20,7 +20,9 @@ module.exports = {
     loading: '~/components/loading.vue',
 
     plugins: [
-        { src: '~plugins/muse-ui.js', ssr: true }
+      { src: '~plugins/muse-ui.js', ssr: true },
+      { src: '~plugins/loadMore.js', ssr: false },
+      { src: '~plugins/dateFormattor.js', ssr: false }
     ],
     build: {
 

package.json

@@ -21,6 +21,8 @@
     "multer": "^1.3.0",
     "muse-ui": "^2.1.0",
     "swiper": "^4.0.7",
+    "vue-infinite-loading": "^2.4.4",
+    "vue-infinite-scroll": "^2.0.2",
     "nuxt": "^1.0.0"
   },
   "devDependencies": {

pages/index.vue

 <template>
   <div class="container">
     <menu-modal></menu-modal>
+
     <div class="main-container">
       <banner
         v-if="showBanner"
-        :list = "list"
+        :list = "bannerList"
         :looptime="looptime"
         :width="width"
         :height="height"
@@ -17,30 +18,31 @@
         @click="bannerClick"
         class="mb-50">
       </banner>
-      <div class="flex-fdc-jcc">
+      <div class="flex-fdc-jcc video-container">
         <div class="tc title">3分钟了解欣新房车</div>
         <div class="flex-aic-jcb" style="margin-bottom: 25px;">
           <div style="width: 1100px;text-align: center">
             <div class="line-title"></div>
           </div>
         </div>
-        <video width="320" height="240" controls autoplay="autoplay" muted>
+        <img src="../assets/images/tv.png"/>
+        <video class="video-play" width="320" height="240" controls autoplay="autoplay" muted>
           <source src="https://www.runoob.com/try/demo_source/movie.mp4"  type="video/mp4">
           <source src="https://www.runoob.com/try/demo_source/movie.ogg"  type="video/ogg">
           您的浏览器不支持 HTML5 video 标签。
         </video>
       </div>
 
-      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
+      <div class="flex-fdc-jcc activity-container" style="padding: 30px 0;">
         <div class="tc title">最新活动 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 从这里启程</div>
-        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+        <div class="flex-aic-jcb more-container">
           <div style="width: 1100px;text-align: center">
             <div class="line-title"></div>
           </div>
           <nuxt-link to="/activity"><div>MORE</div></nuxt-link>
         </div>
         <banner-activity
-          :list = "list1"
+          :list = "activityList"
           :looptime="looptime"
           :width="width"
           :height="height"
@@ -54,7 +56,6 @@
           class="mb-50">
         </banner-activity>
       </div>
-
       <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
         <div class="tc title">精选房车游 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 说走就走的房车之旅</div>
         <div class="flex-aic-jcb" style="margin-bottom: 25px;">
@@ -63,10 +64,9 @@
           </div>
         </div>
       </div>
-
-      <div class="flex-fdc-jcc" style="padding: 30px 0;">
+      <div class="flex-fdc-jcc vehicle-container" style="padding: 30px 0;">
         <div class="tc title">热门房车 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 多款房车任你选择</div>
-        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+        <div class="flex-aic-jcb more-container">
           <div style="width: 1100px;text-align: center">
             <div class="line-title"></div>
           </div>
@@ -170,38 +170,21 @@
           </div>
         </div>
       </div>
-
       <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
         <div class="tc title">新闻动态 <span style="font-size: 20px;margin: 0 5px;color: #666;">●</span> 最新资讯与你分享</div>
-        <div class="flex-aic-jcb" style="margin-bottom: 25px;">
+        <div class="flex-aic-jcb more-container">
           <div style="width: 1100px;text-align: center">
             <div class="line-title"></div>
           </div>
           <nuxt-link to="/news"><div>MORE</div></nuxt-link>
         </div>
         <div class="flex-aic-jcb-warp min-win">
-          <div class="item-c flex-aic">
-            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
-            <div class="item-c-r">
-              <div class="ellipsis2">标题标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更</div>
-              <div class="desc ellipsis2">标题</div>
-              <div>2018-02-09</div>
-            </div>
-          </div>
-          <div class="item-c flex-aic">
-            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
+          <div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
+            <img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
             <div class="item-c-r">
-              <div class="ellipsis2">标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好</div>
-              <div class="desc ellipsis2">标题</div>
-              <div>2018-02-09</div>
-            </div>
-          </div>
-          <div class="item-c flex-aic">
-            <img src="../assets/images/1566894441.png" class="item-c-img" alt="欣新房车，让生活更美好"/>
-            <div class="item-c-r">
-              <div class="ellipsis2">标题欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好</div>
-              <div class="ellipsis2 desc">标题欣新房车，让生活车，让生活车，让生活车，让生活车，让生活更美好欣新房车，让生活更美好欣新房车，让生活更美好欣新房车，让生活标题让生活标题</div>
-              <div>2018-02-09</div>
+              <div class="ellipsis2">{{item.title}}</div>
+              <div class="desc ellipsis2">{{item.epitome}}</div>
+              <div>{{item.addTime}}</div>
             </div>
           </div>
         </div>
@@ -210,73 +193,7 @@
     <footer-modal></footer-modal>
   </div>
 </template>
-<style>
-  .v-type-active{
-    background: #1bbb9f;
-    color: #fff;
-  }
-  .v-type{
-    padding: 10px;
-    display: inline-block;
-    cursor: pointer;
-  }
-  .v-type-ul{
-    width: 600px;
-    margin: 0 auto 20px auto;
-    justify-content: space-between;
-    display: flex;
-  }
-  .item-c{
-    /*width: 600px;*/
-    height: 150px;
-    padding: 0 10px;
-  }
-  .title{
-    width: 1200px;
-    padding: 10px;
-    font-size: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .item-c-img{
-    width: 100px;
-    height: 100px;
-    margin-right: 20px;
-  }
-  .item-c-r{
-    width: 400px;
-  }
-  .item-c-r .desc{
-    font-size: 14px;
-  }
-  .line-title{
-    background: #1bbb9f;
-    width: 30px;
-    height: 5px;
-    margin: 0 auto;
-  }
-  .swiper-container {
-    width: 1200px;
-    height: auto;
-  }
-  .gallery-top img{
-    width: 100%;
-  }
-  .swiper-wrapper-thu{
-    /*max-width: 293px;*/
-    margin: 0 !important;
-  }
-  .swiper-wrapper-thu img{
-    width: 100%;
-    border: 2px solid #fff;
-  }
-  .swiper-wrapper-thu img.active{
-    border: 2px solid #1bbb9f;
-    padding: 5px;
-  }
 
-</style>
 <script>
 import axios from 'axios'
 import banner from "../components/banner"
@@ -289,6 +206,7 @@ import 'swiper/dist/css/swiper.min.css';
 
 export default {
   transition: 'bounce',
+
   components: {
     menuModal,
     footerModal,
@@ -345,6 +263,53 @@ export default {
   },
   created(){
 
+  },
+  async asyncData({ env }) {
+    function formatDate(date, fmt) {
+      if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+      }
+      let o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+      }
+      for (let k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+          let str = o[k] + ''
+          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+        }
+      }
+      return fmt
+    }
+    function padLeftZero(str) {
+      return ('00' + str).substr(str.length)
+    }
+    function timestamp2Date(timestamp) {
+      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
+    }
+    function timestamp2DateNoTime(timestamp) {
+      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+      return formatDate(date, 'yyyy-MM-dd');
+    }
+
+    // 首页活动
+    const { data } = await axios.get( env.host + '/api/uccn/summitActivity/app/unauth/home');
+    let cc = data.data;
+    cc.map(function(item){
+      item.startTime = timestamp2DateNoTime(item.startTime);
+      item.endTime = timestamp2DateNoTime(item.endTime);
+    });
+    //首页banner
+    let tempBannerData = await axios.get( env.host + '/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
+    let banner = tempBannerData.data.data;
+    //首页新闻
+    let newsData = await axios.get('https://xxtest.upyuns.com/api/uccn/article/app/unauth/homePage/1');
+    let news = newsData.data.data;
+    return { activityList: cc, bannerList: banner, newsList: news}
   },
   methods: {
     /**
@@ -438,12 +403,109 @@ export default {
         swiper: galleryThumbs
       }
     });
-  },
-  async asyncData() {
-//    const { data } = await axios.get('https://xxtest.upyuns.com/api/app/cofig/app/unauth/types?types=1');
-//    let cc = data.data;
-//    return { users: cc}
-  },
-
+  }
 }
 </script>
+<style>
+  .video-container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background:url("../assets/images/1.jpg") no-repeat;
+  }
+  .video-play{
+    position: absolute;
+  }
+  .activity-container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background:url("../assets/images/2.jpg") no-repeat;
+  }
+  .vehicle-container{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background:url("../assets/images/3.jpg") no-repeat;
+  }
+  .more-container{
+    position: relative;
+    margin-bottom: 25px;
+  }
+  .more-container a{
+    position: absolute;
+    right:0;
+    color: #999;
+    text-decoration: none;
+  }
+  .more-container a:hover{
+    right: 5px;
+    color: #1bbb9f;
+    box-shadow: 5px 5px 5px #888888;
+  }
+  .v-type-active{
+    background: #1bbb9f;
+    color: #fff;
+  }
+  .v-type{
+    padding: 10px;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .v-type-ul{
+    width: 600px;
+    margin: 0 auto 20px auto;
+    justify-content: space-between;
+    display: flex;
+  }
+  .item-c{
+    /*width: 600px;*/
+    height: 150px;
+    padding: 0 10px;
+  }
+  .title{
+    width: 1200px;
+    padding: 10px;
+    font-size: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .item-c-img{
+    width: 100px;
+    height: 100px;
+    margin-right: 20px;
+  }
+  .item-c-r{
+    width: 400px;
+  }
+  .item-c-r .desc{
+    font-size: 14px;
+  }
+  .line-title{
+    background: #1bbb9f;
+    width: 30px;
+    height: 5px;
+    margin: 0 auto;
+  }
+  .swiper-container {
+    width: 1200px;
+    height: auto;
+  }
+  .gallery-top img{
+    width: 100%;
+  }
+  .swiper-wrapper-thu{
+    /*max-width: 293px;*/
+    margin: 0 !important;
+  }
+  .swiper-wrapper-thu img{
+    width: 100%;
+    border: 2px solid #fff;
+  }
+  .swiper-wrapper-thu img.active{
+    border: 2px solid #1bbb9f;
+    padding: 5px;
+  }
+
+</style>