静态页面

src/pages/KaiJiangZhanShi/DaLeTou/index.vue

@@ -8,7 +8,7 @@
       <div slot="SwiperItem-1" class="Item">
 
         <!-- 开奖信息 -->
-        <div class="PrizeInfo">
+        <div class="PrizeInfo" v-if="LotteryRes.length">
           <div class="flex-h">
             <div class="Icon">
               <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
@@ -16,17 +16,12 @@
             <span>大乐透</span>
             <div class="flex-item">
               <div class="Time">
-                <span>开奖日期：2020-08-14</span>
-                <span>第202076期</span>
+                <span>开奖日期：{{LotteryRes[0].openingDate}}</span>
+                <span>第{{LotteryRes[0].issueNo}}期</span>
               </div>
               <ul class="Num">
-                <li>02</li>
-                <li>04</li>
-                <li>52</li>
-                <li>44</li>
-                <li>57</li>
-                <li class="active">54</li>
-                <li class="active">12</li>
+                <li v-for="(item, index) in LotteryRes[0].firstResult.split(',')" :key="`First-${index}`">{{item}}</li>
+                <li v-for="(item, index) in LotteryRes[0].secondResult.split(',')" :key="`Second-${index}`" class="active">{{item}}</li>
               </ul>
             </div>
           </div>
@@ -75,7 +70,7 @@
             </li>
           </ul>
           <div class="Btn">
-            <a>大乐透投注</a>
+            <router-link :to="{ name: 'DaLeTou' }">大乐透投注</router-link>
           </div>
         </div>
 
@@ -87,24 +82,19 @@
       <!-- 开奖历史 -->
       <div slot="SwiperItem-3" class="Item">
         <ul class="HistoryList">
-          <router-link tag="li" v-for="(item, index) in 10" :key="index" :to="{ name: 'DaLeTouXiangQing' }" class="flex-h">
+          <router-link tag="li" v-for="(item, index) in LotteryRes" :key="index" :to="{ name: 'DaLeTouXiangQing', query: { serialNo: item.serialNo, lotteryId: 'lottery', issueNo: item.issueNo } }" class="flex-h">
             <div class="Icon">
               <img src="../../../assets/img/icon4.png" class="centerLabel cover" alt="">
             </div>
             <span>大乐透</span>
             <div class="flex-item">
               <div class="Time">
-                <span>开奖日期：2020-08-14</span>
-                <span>第202076期</span>
+                <span>开奖日期：{{item.openingDate}}</span>
+                <span>第{{item.issueNo}}期</span>
               </div>
               <ul class="Num">
-                <li>02</li>
-                <li>04</li>
-                <li>52</li>
-                <li>44</li>
-                <li>57</li>
-                <li class="active">54</li>
-                <li class="active">12</li>
+                <li v-for="(subItem, subIndex) in item.firstResult.split(',')" :key="`First-${subIndex}`">{{subItem}}</li>
+                <li v-for="(subItem, subIndex) in item.secondResult.split(',')" :key="`Second-${subIndex}`" class="active">{{subItem}}</li>
               </ul>
             </div>
           </router-link>
@@ -117,20 +107,30 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
+import { mapMutations, createNamespacedHelpers } from 'vuex'
 import TabSwiper from '../../../components/common/TabSwiper'
+const { mapState: mapIndexState, mapActions: mapIndexActions, mapMutations: mapIndexMutations } = createNamespacedHelpers('index')
 export default {
   name: '',
   data () {
     return {
       NavList: [ // nav数据
         { name: '最新开奖', id: 1 },
-        { name: '走势图', id: 2 },
+        // { name: '走势图', id: 2 },
         { name: '开奖历史', id: 3 }
-      ]
+      ],
+      PageData: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      Total: 1,
+      DataLock: false
     }
   },
   computed: {
+    ...mapIndexState({
+      LotteryRes: x => x.LotteryRes // 数字彩开奖结果列表
+    })
   },
   components: {
     TabSwiper
@@ -141,6 +141,7 @@ export default {
       { name: 'MainHeaderTitle', value: '大乐透开奖' },
       { name: 'ShowMainHeaderBack', value: true }
     ])
+    this.Init()
   },
   mounted () {
     this.$nextTick(() => {
@@ -150,13 +151,37 @@ export default {
     ...mapMutations([
       'EditMainData' // 配置页面框架数据
     ]),
+    ...mapIndexActions([
+      'GetLotteryRes'
+    ]),
+    ...mapIndexMutations([
+      'EmptyLotteryRes'
+    ]),
+    Init () {
+      this.EmptyLotteryRes()
+      this.ToGetLotteryRes()
+    },
     TabChange (e) { // nav切换
 
+    },
+    ToGetLotteryRes (done = () => { }) { // 获取开奖列表
+      if (this.DataLock || this.LotteryRes.length >= this.Total) {
+        done()
+      } else {
+        this.DataLock = true
+        this.GetLotteryRes({ queryData: { ...this.PageData, lotteryId: 'lottery' } }).then((res) => {
+          this.Total = res.data.data.total > 1 ? res.data.data.total : this.LotteryRes.length
+          this.DataLock = false
+          done()
+        }).catch((res) => {
+          this.Toast(res.data.message)
+          this.DataLock = false
+          done()
+        })
+      }
     },
     Refresh (e) { // 页面下拉刷新
-      window.setTimeout(() => {
-        e.done()
-      }, 1000)
+      this.ToGetLotteryRes(e.done())
     }
   }
 }

src/pages/index/LanQiuDingDan/index.vue

@@ -46,7 +46,7 @@
       </div>
       <div class="Count">
         <span>
-          <em>{{AllParts.length}}</em>注
+          <em>{{AllPartsCounts}}</em>注
         </span>
         <span>金额：<em>{{TotalPrize * Multiple}}</em>元</span>
         <span>预计奖金：<em>0 ~ 0</em>元</span>
@@ -116,6 +116,7 @@ export default {
   name: '',
   data () {
     return {
+      AllPartsCounts: 0,
       AllParts: [], // 投注生成结果
       CurrentPassUnitNum: 0,
       CurrentPassAmount: 0,
@@ -213,7 +214,8 @@ export default {
           PassTarget = item
         }
       })
-      this.AllParts = GetAllParts([...ListData], PassTarget)
+      this.AllParts = GetAllParts([...ListData], PassTarget).allParts
+      this.AllPartsCounts = GetAllParts([...ListData], PassTarget).sum
     },
     CalcRes () { // 计算投注数、金额
       if (this.CurrentPassCode === null) {

src/pages/index/ShouYe/index.vue

@@ -112,7 +112,7 @@ export default {
         this.GetNewstLotteryRes().then(() => { // 获取最新数字彩开奖结果列表
           done()
         })
-        this.GetLotteryRes({ queryData: { pageNum: 1, pageSize: 10 } })
+        // this.GetLotteryRes({ queryData: { pageNum: 1, pageSize: 10 } })
         this.GetAllLotteryType({ queryData: { pageNum: 1, pageSize: 1000 } })
       })
     },

src/store/index/index.js

@@ -13,7 +13,14 @@ export default {
       state.Banner = data.records || []
     },
     UpdateLotteryRes (state, data) { // 更新数字彩开奖结果列表
-      state.LotteryRes = data.records || []
+      // state.LotteryRes = data.records || []
+      let Arr = data.records || []
+      Arr.map((item) => {
+        state.LotteryRes.push(item)
+      })
+    },
+    EmptyLotteryRes (state) { // 清空数字彩开奖结果列表
+      state.LotteryRes = []
     },
     UpdateNewstLotteryRes (state, data) { // 更新最新数字彩开奖结果列表
       state.NewstLotteryRes = data || []