静态页面

src/pages/KaiJiangZhanShi/LanQiu/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/icon6.png" class="centerLabel contain" alt="">
           </div>
-          <span>20200815</span>
-          <span>星期五</span>
+          <span>{{ToolClass.FormatDate(NewstRes.createDate, 'yyyy-MM-dd')}}</span>
+          <span>{{NewstRes.matchWeek}}</span>
         </div>
 
         <div class="flex-item">
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩篮球投注</a>
+                  <router-link :to="{ name: 'LanQiu' }">竞彩篮球投注</router-link>
                 </div>
               </div>
 
                         <span>{{item.awayTeamName}}</span>
                       </div>
                       <div class="flex-item">
-                        <span class="Small">{{item.diffScore > 0 ? '胜' : '负'}}</span>
+                        <span class="Small">{{item.diffScore > item.spreadPoints ? `让胜（${item.spreadPoints}）` : `让负（${item.spreadPoints}）`}}</span>
                         <span class="Big">{{item.wholeScore}}</span>
                       </div>
                       <div class="flex-item">
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩篮球投注</a>
+                  <router-link :to="{ name: 'LanQiu' }">竞彩篮球投注</router-link>
                 </div>
               </div>
 
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩篮球投注</a>
+                  <router-link :to="{ name: 'LanQiu' }">竞彩篮球投注</router-link>
                 </div>
               </div>
 
                   </li>
                 </ul>
                 <div>
-                  <a>竞彩篮球投注</a>
+                  <router-link :to="{ name: 'LanQiu' }">竞彩篮球投注</router-link>
                 </div>
               </div>
 
   name: '',
   data () {
     return {
+      NewstRes: null,
       NavList: [ // nav数据
         { name: '胜负', id: 1 },
         { name: '让分胜负', id: 2 },
       'GetNewstSportsRes'
     ]),
     Init () {
-      this.GetNewstSportsRes()
+      this.GetNewstSportsRes().then(() => {
+        this.NewstSportsRes.map((item) => {
+          if (item.lotteryId === 'basketball') {
+            this.NewstRes = { ...item }
+          }
+        })
+      })
     },
     TabChange (e) { // nav切换
 

src/pages/KaiJiangZhanShi/LanQiu/page.scss

                     &.Small {
                       font-size: 0.1rem;
                       color: #ff5200;
+                      white-space: nowrap;
                       &.active {
                         color: #3f63e5;
                       }

src/pages/index/DaLeTou/index.vue

   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="大乐透">
       <div class="PageContainer flex-v">
-        <div class="Top">
+        <div class="Top" v-if="NewstRes !== null">
           <div class="PrevRes flex-h">
-            <span>077期</span>
+            <span>{{NewstRes.issueNo}}期</span>
             <div class="flex-item">
               <div>
-                <span>01</span>
-                <span>02</span>
-                <span>03</span>
-                <span>04</span>
-                <span>05</span>
-                <span class="active">06</span>
-                <span class="active">07</span>
+                <span v-for="(item, index) in NewstRes.firstResult.split(',')" :key="`First-${index}`">{{item}}</span>
+                <span class="active" v-for="(item, index) in NewstRes.secondResult.split(',')" :key="`Sec-${index}`">{{item}}</span>
               </div>
             </div>
           </div>
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
 export default {
   name: '',
   data () {
     return {
+      NewstRes: null, // 最新开奖结果
       TotalResNum: 0, // 总注数
       FastSelectIndex: null, // 快速选取索引值
       CanCreateRes: false, // 选取结果是否合法
     }
   },
   computed: {
+    ...mapIndexState({
+      NewstLotteryRes: x => x.NewstLotteryRes // 最新数字彩开奖结果列表
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    this.Init()
     this.CreatNumList() // 创建号码池数据
   },
   mounted () {
     ...mapUserMutations([
       'AddDaLeTouCart' // 新增大乐透购物车
     ]),
+    ...mapIndexActions([
+      'GetNewstLotteryRes'
+    ]),
+    Init () {
+      if (!this.NewstLotteryRes.length) { // 最新数字彩开奖数据为空时，请求开奖结果
+        this.GetNewstLotteryRes().then(() => {
+          this.NewstLotteryRes.map((item) => {
+            if (item.lotteryId === 'lottery') {
+              this.NewstRes = { ...item }
+            }
+          })
+        })
+      } else {
+        this.NewstLotteryRes.map((item) => {
+          if (item.lotteryId === 'lottery') {
+            this.NewstRes = { ...item }
+          }
+        })
+      }
+    },
     AddToCart () { // 加入选号
       if (this.DataLock || !this.CanCreateRes) return
       this.DataLock = true

src/pages/index/ShuangSeQiu/index.vue

   <div class="Page">
     <MainPageContainer :ShowMainHeader="true" :ShowMainHeaderBack="true" MainHeaderTitle="双色球">
       <div class="PageContainer flex-v">
-        <div class="Top">
+        <div class="Top" v-if="NewstRes !== null">
           <div class="PrevRes flex-h">
-            <span>077期</span>
+            <span>{{NewstRes.issueNo}}期</span>
             <div class="flex-item">
               <div>
-                <span>01</span>
-                <span>02</span>
-                <span>03</span>
-                <span>04</span>
-                <span>05</span>
-                <span class="active">06</span>
+                <span v-for="(item, index) in NewstRes.firstResult.split(',')" :key="`First-${index}`">{{item}}</span>
+                <span class="active" v-for="(item, index) in NewstRes.secondResult.split(',')" :key="`Sec-${index}`">{{item}}</span>
               </div>
             </div>
           </div>
 import MainPageContainer from '../../../components/common/MainPageContainer'
 import { createNamespacedHelpers } from 'vuex'
 const { mapMutations: mapUserMutations } = createNamespacedHelpers('user')
+const { mapState: mapIndexState, mapActions: mapIndexActions } = createNamespacedHelpers('index')
 export default {
   name: '',
   data () {
     return {
+      NewstRes: null, // 最新开奖结果
       TotalResNum: 0, // 总注数
       FastSelectIndex: null, // 快速选取索引值
       CanCreateRes: false, // 选取结果是否合法
     }
   },
   computed: {
+    ...mapIndexState({
+      NewstLotteryRes: x => x.NewstLotteryRes // 最新数字彩开奖结果列表
+    })
   },
   components: {
     MainPageContainer
   },
   created () {
+    this.Init()
     this.CreatNumList() // 创建号码池数据
   },
   mounted () {
     ...mapUserMutations([
       'AddShuangSeQiuCart' // 新增双色球购物车
     ]),
+    ...mapIndexActions([
+      'GetNewstLotteryRes'
+    ]),
+    Init () {
+      if (!this.NewstLotteryRes.length) { // 最新数字彩开奖数据为空时，请求开奖结果
+        this.GetNewstLotteryRes().then(() => {
+          this.NewstLotteryRes.map((item) => {
+            if (item.lotteryId === 'double-color') {
+              this.NewstRes = { ...item }
+            }
+          })
+        })
+      } else {
+        this.NewstLotteryRes.map((item) => {
+          if (item.lotteryId === 'double-color') {
+            this.NewstRes = { ...item }
+          }
+        })
+      }
+    },
     AddToCart () { // 加入选号
       if (this.DataLock || !this.CanCreateRes) return
       this.DataLock = true