静态页面

src/components/common/TabSwiper/index.vue

 export default {
   name: 'TabSwiper',
   props: {
+    InfiniteStatus: {
+      default: false
+    },
     List: {
       default: () => {
         return []
       this.$emit('Refresh', { done, id: this.NavActiveId })
     },
     Infinite (done) { // 页面上拉加载
-      this.$emit('Infinite', { done, id: this.NavActiveId })
+      if (this.InfiniteStatus) {
+        this.$emit('Infinite', { done, id: this.NavActiveId })
+      } else {
+        done()
+      }
     }
   }
 }

src/pages/KaiJiangZhanShi/LanQiu/index.vue

           <div>
 
             <!-- nav -->
-            <TabSwiper :List="NavList" @Refresh="Refresh" @Infinite="Infinite" @Change="TabChange">
+            <TabSwiper :List="NavList" :InfiniteStatus="true" @Refresh="Refresh" @Infinite="Infinite" @Change="TabChange">
 
               <!-- 胜负 -->
               <div slot="SwiperItem-1" class="Item">

src/pages/KaiJiangZhanShi/ZuQiu/index.vue

     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="足球开奖">
       <div class="PageContainer flex-v">
         <!-- 开奖日期 -->
-        <div class="Time">
+        <!-- <div class="Time" v-if="NewstRes !== null">
           <div class="Icon">
-            <img src="../../../assets/img/icon3.png" class="centerLabel contain" alt="">
+            <img src="../../../assets/img/icon6.png" class="centerLabel contain" alt="">
           </div>
-          <span>20200815</span>
-          <span>星期五</span>
-        </div>
+          <span>{{ToolClass.FormatDate(NewstRes.createDate, 'yyyy-MM-dd')}}</span>
+          <span>{{NewstRes.matchWeek}}</span>
+        </div> -->
 
         <div class="flex-item">
           <div>
 
             <!-- nav -->
-            <TabSwiper :List="NavList" @Refresh="Refresh" @Change="TabChange">
+            <TabSwiper :List="NavList" :InfiniteStatus="true" @Refresh="Refresh" @Infinite="Infinite" @Change="TabChange">
 
               <!-- 胜负 -->
               <div slot="SwiperItem-1" class="Item">
                 <ul>
-                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['ft-wdl'] !== undefined" class="flex-h">
                     <div class="From">
-                      <span>NBA</span>
-                      <span>301</span>
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
                     </div>
                     <div class="flex-item flex-h">
                       <div class="flex-item">
-                        <span>掘金</span>
+                        <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">胜</span>
-                        <span class="Big">109:117</span>
+                        <span class="Small">{{!item.playOdds['ft-wdl'][0].isWinning ? '胜' : '负'}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
-                        <span>猛龙</span>
+                        <span>{{item.homeTeamName}}</span>
                       </div>
                     </div>
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩足球投注</a>
+                  <router-link :to="{ name: 'ZuQiu' }">竞彩足球投注</router-link>
                 </div>
               </div>
 
               <!-- 让分胜负 -->
               <div slot="SwiperItem-2" class="Item">
                 <ul>
-                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['ft-wdls'] !== undefined" class="flex-h">
                     <div class="From">
-                      <span>NBA</span>
-                      <span>301</span>
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
                     </div>
                     <div class="flex-item flex-h">
                       <div class="flex-item">
-                        <span>掘金</span>
+                        <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">胜</span>
-                        <span class="Big">109:117</span>
+                        <span class="Small">{{!item.playOdds['ft-wdls'][0].isWinning ? `让胜（${item.spreadPoints}）` : `让负（${item.spreadPoints}）`}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
-                        <span>猛龙</span>
+                        <span>{{item.homeTeamName}}</span>
                       </div>
                     </div>
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩足球投注</a>
+                  <router-link :to="{ name: 'ZuQiu' }">竞彩足球投注</router-link>
                 </div>
               </div>
 
               <!-- 胜分差 -->
               <div slot="SwiperItem-3" class="Item">
                 <ul>
-                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['ft-points'] !== undefined" class="flex-h">
                     <div class="From">
-                      <span>NBA</span>
-                      <span>301</span>
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
                     </div>
                     <div class="flex-item flex-h">
                       <div class="flex-item">
-                        <span>掘金</span>
+                        <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">胜</span>
-                        <span class="Big">109:117</span>
+                        <span class="Small" v-for="(subItem, subIndex) in item.playOdds['ft-points']" :key="subIndex" v-if="subItem.isWinning">{{subItem.name.substring(0, 1) === '胜' ? '负' : '胜'}}{{subItem.name.substring(1)}}</span>
+                        <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
-                        <span>猛龙</span>
+                        <span>{{item.homeTeamName}}</span>
                       </div>
                     </div>
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩足球投注</a>
+                  <router-link :to="{ name: 'ZuQiu' }">竞彩足球投注</router-link>
                 </div>
               </div>
 
               <!-- 大小分 -->
               <div slot="SwiperItem-4" class="Item">
                 <ul>
-                  <li v-for="(item, index) in 5" :key="index" class="flex-h">
+                  <li v-for="(item, index) in LotterySportRes" :key="index" v-if="item.playOdds['ft-score'] !== undefined" class="flex-h">
                     <div class="From">
-                      <span>NBA</span>
-                      <span>301</span>
+                      <span>{{item.leagueName}}</span>
+                      <span>{{item.matchWeek}}</span>
                     </div>
                     <div class="flex-item flex-h">
                       <div class="flex-item">
-                        <span>掘金</span>
+                        <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">胜</span>
-                        <span class="Big">109:117</span>
+                        <span class="Small" v-for="(subItem, subIndex) in item.playOdds['ft-score']" :key="subIndex" v-if="subItem.isWinning">{{subItem.name}}({{item.spreadPoints}})</span>
+                        <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
-                        <span>猛龙</span>
+                        <span>{{item.homeTeamName}}</span>
                       </div>
                     </div>
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩足球投注</a>
+                  <router-link :to="{ name: 'ZuQiu' }">竞彩足球投注</router-link>
                 </div>
               </div>
 
 
 <script>
 import MainPageContainer from '../../../components/common/MainPageContainer'
+import { createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
+const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
   name: '',
   data () {
     return {
+      PageData: {
+        pageNum: 0,
+        pageSize: 15
+      },
+      HasNextPage: true,
+      DataLock: false,
+      NewstRes: null,
       NavList: [ // nav数据
         { name: '胜负', id: 1 },
         { name: '让分胜负', id: 2 },
     }
   },
   computed: {
+    ...mapIndexState({
+      LotterySportRes: x => x.LotterySportRes // 最新竞彩开奖结果列表
+    })
   },
   components: {
     MainPageContainer,
     TabSwiper
   },
   created () {
+    this.Init()
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    ...mapIndexActions([
+      'GetLotterySportRes'
+    ]),
+    ...mapIndexMutations([
+      'EmptyLotterySportRes'
+    ]),
+    Init (done = () => { }) {
+      this.EmptyLotterySportRes()
+      this.PageData.pageNum = 0
+      this.HasNextPage = true
+    },
+    ToGetLotterySportRes (done = () => { }, num = null) {
+      if (!this.HasNextPage && this.DataLock) return
+      this.DataLock = true
+      if (num !== null) {
+        this.PageData.pageNum += num
+      }
+      this.GetLotterySportRes({ queryData: { lotteryId: 'football', ...this.PageData } }).then((res) => {
+        this.HasNextPage = res.data.data.pages > this.PageData.pageNum
+        this.DataLock = false
+        done()
+      }).catch(() => {
+        this.DataLock = false
+        done()
+      })
+    },
     TabChange (e) { // nav切换
 
     },
     Refresh (e) { // 页面下拉刷新
-      window.setTimeout(() => {
+      this.Init(e.done)
+    },
+    Infinite (e) { // 页面上拉加载
+      if (this.HasNextPage && !this.DataLock) {
+        this.ToGetLotterySportRes(e.done, 1)
+      } else {
         e.done()
-      }, 1000)
+      }
     }
   }
 }

src/pages/KaiJiangZhanShi/ZuQiu/page.scss

               border-bottom: 0.01rem solid #f7f7f7;
               padding: 0.15rem 0;
               > .From {
-                margin-right: 0.5rem;
+                margin-right: 0.1rem;
                 > span {
                   display: block;
                   text-align: center;