静态页面

src/components/index/ZqgghhtzBanQuanChang/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="components ZqgghhtzBanQuanChang">
+    <span><em>单</em>半全场</span>
+    <table>
+      <tr>
+        <td rowspan="3">
+          <span>半全场</span>
+        </td>
+        <td v-for="(item, index) in PageDoubleData" v-if="index < 3" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageDoubleData" v-if="index >= 3 && index < 6" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageDoubleData" v-if="index >= 6 && index < 9" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzBanQuanChang',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    DoubleData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageDoubleData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.DoubleData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageDoubleData.push({ ...item })
+      } else {
+        this.PageDoubleData.push({ ...item, Active: false })
+      }
+    })
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    SelectItem (item, index, key) { // 选择投注
+      item.Active = !item.Active
+      this.$emit('SelectItem', { pIndex: this.Index, value: item.Active, key, cIndex: index, id: this.Id, target: item })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/ZqgghhtzBanQuanChang/page.scss

@@ -0,0 +1,45 @@
+.components.ZqgghhtzBanQuanChang {
+  > span {
+    font-size: 0.12rem;
+    line-height: 0.2rem;
+    color: #999;
+    display: block;
+    > em {
+      font-size: 0.12rem;
+      width: 0.16rem;
+      line-height: 0.16rem;
+      text-align: center;
+      background: #ff5100;
+      color: #fff;
+      margin-right: 0.05rem;
+      display: inline-block;
+    }
+  }
+  > table {
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.05rem;
+    border: 0.01rem solid #f7f7f7;
+    > tr {
+      > td {
+        border: 0.01rem solid #f7f7f7;
+        padding: 0.05rem 0;
+        &.active {
+          background: #ff5100;
+          > span {
+            color: #fff;
+          }
+        }
+        > span {
+          display: block;
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.16rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}

src/components/index/ZqgghhtzBiFen/index.vue

@@ -6,19 +6,19 @@
         <td rowspan="3">
           <span>主胜</span>
         </td>
-        <td v-for="(item, index) in PageScoreData.slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index < 5" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
       </tr>
       <tr>
-        <td v-for="(item, index) in PageScoreData.slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 5 && index < 10" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
       </tr>
       <tr>
-        <td v-for="(item, index) in PageScoreData.slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 10 && index < 13" :colspan="index === 12 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
@@ -27,7 +27,7 @@
         <td>
           <span>平</span>
         </td>
-        <td v-for="(item, index) in PageScoreData.slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 13 && index < 18" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
@@ -36,19 +36,19 @@
         <td rowspan="3">
           <span>主负</span>
         </td>
-        <td v-for="(item, index) in PageScoreData.slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 18 && index < 23" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
       </tr>
       <tr>
-        <td v-for="(item, index) in PageScoreData.slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 23 && index < 28" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
       </tr>
       <tr>
-        <td v-for="(item, index) in PageScoreData.slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+        <td v-for="(item, index) in PageScoreData" v-if="index >= 28" :colspan="index === 30 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
           <span>{{item.name}}</span>
           <span>{{item.odds}}</span>
         </td>
@@ -85,7 +85,11 @@ export default {
   },
   created () {
     this.ScoreData.map((item) => {
-      this.PageScoreData.push({ ...item, Active: false })
+      if (item.Active !== undefined) {
+        this.PageScoreData.push({ ...item })
+      } else {
+        this.PageScoreData.push({ ...item, Active: false })
+      }
     })
   },
   mounted () {

src/components/index/ZqgghhtzJinQiuShu/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="components ZqgghhtzJinQiuShu">
+    <span><em>单</em>进球数</span>
+    <table>
+      <tr>
+        <td rowspan="2">
+          <span>进球数</span>
+        </td>
+        <td v-for="(item, index) in PagePointsData.slice(0, 4)" v-if="index < 4" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PagePointsData.slice(4, 8)" v-if="index >= 4 && index < 8" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzJinQiuShu',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    PointsData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PagePointsData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.PointsData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PagePointsData.push({ ...item })
+      } else {
+        this.PagePointsData.push({ ...item, Active: false })
+      }
+    })
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    SelectItem (item, index, key) { // 选择投注
+      item.Active = !item.Active
+      this.$emit('SelectItem', { pIndex: this.Index, value: item.Active, key, cIndex: index, id: this.Id, target: item })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/ZqgghhtzJinQiuShu/page.scss

@@ -0,0 +1,45 @@
+.components.ZqgghhtzJinQiuShu {
+  > span {
+    font-size: 0.12rem;
+    line-height: 0.2rem;
+    color: #999;
+    display: block;
+    > em {
+      font-size: 0.12rem;
+      width: 0.16rem;
+      line-height: 0.16rem;
+      text-align: center;
+      background: #ff5100;
+      color: #fff;
+      margin-right: 0.05rem;
+      display: inline-block;
+    }
+  }
+  > table {
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.05rem;
+    border: 0.01rem solid #f7f7f7;
+    > tr {
+      > td {
+        border: 0.01rem solid #f7f7f7;
+        padding: 0.05rem 0;
+        &.active {
+          background: #ff5100;
+          > span {
+            color: #fff;
+          }
+        }
+        > span {
+          display: block;
+          text-align: center;
+          font-size: 0.12rem;
+          line-height: 0.16rem;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}

src/components/index/ZqgghhtzShengPingFu/index.vue

@@ -12,7 +12,7 @@
           <a class="flex-item" v-for="(item, index) in PageWdlsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-wdls')">{{`${item.name} ${item.odds}`}}</a>
         </div>
       </div>
-      <a @click="$emit('ShowMore', Index)">更多<br />选项</a>
+      <a @click="$emit('ShowMore', Index)" :class="{'active': MoreSelect}">更多<br />选项</a>
     </div>
   </div>
 </template>
@@ -24,6 +24,9 @@
 export default {
   name: 'ZqgghhtzShengPingFu',
   props: {
+    MoreSelect: {
+      default: false
+    },
     SpreadPoints: {
       default: null
     },
@@ -52,10 +55,18 @@ export default {
   },
   created () {
     this.WdlData.map((item) => {
-      this.PageWdlData.push({ ...item, Active: false })
+      if (item.Active !== undefined) {
+        this.PageWdlData.push({ ...item })
+      } else {
+        this.PageWdlData.push({ ...item, Active: false })
+      }
     })
     this.WdlsData.map((item) => {
-      this.PageWdlsData.push({ ...item, Active: false })
+      if (item.Active !== undefined) {
+        this.PageWdlsData.push({ ...item })
+      } else {
+        this.PageWdlsData.push({ ...item, Active: false })
+      }
     })
   },
   mounted () {

src/components/index/ZqgghhtzShengPingFu/page.scss

@@ -61,6 +61,11 @@
       padding: 0 0.02rem;
       padding-top: 0.04rem;
       margin-right: 0.2rem;
+      &.active {
+        background: #ff5100;
+        border-color: #ff5100;
+        color: #fff;
+      }
     }
   }
 }

src/components/index/ZuQiuGuoGuanHunHeTouZhu/index.vue

@@ -11,7 +11,7 @@
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
         <div class="Detail">
-          <ZqgghhtzShengPingFu :Id="item.matchId" :Index="index" :SpreadPoints="item.spreadPoints" :WdlData="item.playOdds['ft-wdl']" :WdlsData="item.playOdds['ft-wdls']" @SelectItem="SelectItem" @ShowMore="ToShowMore"></ZqgghhtzShengPingFu>
+          <ZqgghhtzShengPingFu :MoreSelect="item.MoreSelect" :Id="item.matchId" :Index="index" :SpreadPoints="item.spreadPoints" :WdlData="item.playOdds['ft-wdl']" :WdlsData="item.playOdds['ft-wdls']" @SelectItem="SelectItem" @ShowMore="ToShowMore"></ZqgghhtzShengPingFu>
         </div>
       </li>
     </ul>
@@ -44,114 +44,20 @@
 
             <li v-if="CurrentTarget.playOdds[`ft-score`] !== undefined">
               <ZqgghhtzBiFen :Id="CurrentTarget.matchId" :Index="CurrentIndex" :ScoreData="CurrentTarget.playOdds['ft-score']" @SelectItem="SelectItem"></ZqgghhtzBiFen>
-              <!-- <span><em>单</em>比分</span>
-              <table>
-                <tr>
-                  <td rowspan="3">
-                    <span>主胜</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td>
-                    <span>平</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td rowspan="3">
-                    <span>主负</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-              </table> -->
             </li>
 
             <li v-if="CurrentTarget.playOdds[`ft-points`] !== undefined">
-              <span><em>单</em>进球数</span>
-              <table>
-                <tr>
-                  <td rowspan="2">
-                    <span>进球数</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(0, 4)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(4, 8)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-              </table>
+              <ZqgghhtzJinQiuShu :Id="CurrentTarget.matchId" :Index="CurrentIndex" :PointsData="CurrentTarget.playOdds['ft-points']" @SelectItem="SelectItem"></ZqgghhtzJinQiuShu>
             </li>
 
             <li v-if="CurrentTarget.playOdds[`ft-double`] !== undefined">
-              <span><em>单</em>半全场</span>
-              <table>
-                <tr>
-                  <td rowspan="3">
-                    <span>半全场</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(0, 3)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(3, 6)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-                <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(6, 9)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-              </table>
+              <ZqgghhtzBanQuanChang :Id="CurrentTarget.matchId" :Index="CurrentIndex" :DoubleData="CurrentTarget.playOdds['ft-double']" @SelectItem="SelectItem"></ZqgghhtzBanQuanChang>
             </li>
 
           </ul>
           <div class="flex-h">
             <a class="flex-item" @click="ShowMore = false">取消</a>
-            <a class="flex-item">确认</a>
+            <a class="flex-item" @click="ShowMore = false">确认</a>
           </div>
         </div>
       </div>
@@ -165,6 +71,8 @@
 */
 import ZqgghhtzShengPingFu from '../ZqgghhtzShengPingFu'
 import ZqgghhtzBiFen from '../ZqgghhtzBiFen'
+import ZqgghhtzJinQiuShu from '../ZqgghhtzJinQiuShu'
+import ZqgghhtzBanQuanChang from '../ZqgghhtzBanQuanChang'
 export default {
   name: 'ZuQiuGuoGuanHunHeTouZhu',
   props: {
@@ -174,7 +82,7 @@ export default {
   },
   data () {
     return {
-      PageData: [...this.Data],
+      PageData: [],
       ShowMore: false,
       CurrentTarget: null,
       CurrentIndex: null,
@@ -185,9 +93,14 @@ export default {
   },
   components: {
     ZqgghhtzShengPingFu,
-    ZqgghhtzBiFen
+    ZqgghhtzBiFen,
+    ZqgghhtzJinQiuShu,
+    ZqgghhtzBanQuanChang
   },
   created () {
+    this.Data.map((item) => {
+      this.PageData.push({ ...item, MoreSelect: false })
+    })
   },
   mounted () {
     this.$nextTick(() => {
@@ -199,18 +112,16 @@ export default {
       this.CurrentTarget = { ...this.PageData[e] }
       for (let key in this.CurrentTarget.playOdds) {
         this.CurrentTarget.playOdds[key].map((item) => {
-          item.Active = false
+          item.Active = item.Active !== undefined ? item.Active : false
         })
       }
       this.ShowMore = true
     },
-    // SelectMoreItem (e) { // 更多选项-选择投注
-    //   item.Active = !item.Active
-    //   this.PageData[this.CurrentIndex].playOdds[key][index].Active = item.Active
-    //   this.TriggerRes(this.CurrentIndex, index, key, item.Active, item, this.CurrentTarget.matchId)
-    // },
     SelectItem (e) { // 选择投注
       this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    CalcResData () { // 计算投注数据
+
     },
     TriggerRes (pIndex, cIndex, key, value, target, id) {
       this.PageData[pIndex].playOdds[key][cIndex].Active = value
@@ -227,20 +138,36 @@ export default {
           this.ResList.push({ id: id, list: [] })
           this.ResList[this.ResList.length - 1].list.push({ ...target })
         }
+        if (key !== 'ft-wdl' && key !== 'ft-wdls') {
+          this.PageData[pIndex].MoreSelect = true
+        }
       } else { // 删除投注
         this.ResList.map((item, index) => {
+          let MarkBool = true
           item.list.map((subItem, subIndex) => {
             if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              MarkBool = false
               item.list.splice(subIndex, 1)
               if (!item.list.length) {
                 this.ResList.splice(index, 1)
               }
-              return false
             }
           })
+          if (!MarkBool) { // 删除投注时检测更多选项有无选中投注，更新更多选项按钮状态
+            let SubMarkBool = true
+            item.list.map((subItem) => {
+              if (subItem.ruleCode !== 'ft-wdl' && subItem.ruleCode !== 'ft-wdls') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
         })
       }
-      console.log(this.ResList)
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
     }
   }
 }

src/pages/index/LanQiu/index.vue

@@ -39,7 +39,7 @@
 
             <!-- 过关-混合投注 -->
             <div class="GuoGuanHunHeTouZhu" v-if="SelectType === 1">
-              <LanQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanHunHeTouZhu>
+              <LanQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanHunHeTouZhu>
             </div>
 
             <!-- 过关-胜负 -->
@@ -91,7 +91,7 @@
     <div class="Bottom flex-h">
       <a class="iconfont iconjian"></a>
       <div class="flex-item"></div>
-      <span>非单关至少选两场比赛</span>
+      <span>{{ResList.length ? `已选择${ResList.length}场比赛` : '非单关至少选两场比赛'}}</span>
       <a class="Btn">投注</a>
     </div>
 
@@ -135,6 +135,7 @@ export default {
           ]
         }
       },
+      ResList: [], // 投注结果数据
       MixData: [], // 混合数据
       SelectType: 2, // 选法，对应SelectTypeData中id值
       ShowSelectTypeNav: false // 显隐选法列表
@@ -182,6 +183,9 @@ export default {
         this.MixData = res.data.data || []
       })
     },
+    ResChange (e) { // 投注结果更新
+      this.ResList = e
+    },
     CutSelectType (item) { // 切换选法
       this.SelectType = item.Id
       this.EditMainItemData({ name: 'MainHeaderTitle', value: item.Name })

src/pages/index/ZuQiu/index.vue

@@ -39,7 +39,7 @@
 
             <!-- 过关-混合投注 -->
             <div class="GuoGuanHunHeTouZhu" v-if="SelectType === 1">
-              <ZuQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData"></ZuQiuGuoGuanHunHeTouZhu>
+              <ZuQiuGuoGuanHunHeTouZhu v-if="MixData.length" :Data="MixData" @Change="ResChange"></ZuQiuGuoGuanHunHeTouZhu>
             </div>
 
             <!-- 过关-胜平负 -->
@@ -91,7 +91,7 @@
     <div class="Bottom flex-h">
       <a class="iconfont iconjian"></a>
       <div class="flex-item"></div>
-      <span>非单关至少选两场比赛</span>
+      <span>{{ResList.length ? `已选择${ResList.length}场比赛` : '非单关至少选两场比赛'}}</span>
       <a class="Btn">投注</a>
     </div>
 
@@ -135,6 +135,7 @@ export default {
           ]
         }
       },
+      ResList: [], // 投注结果数据
       MixData: [], // 混合数据
       SelectType: 1, // 选法，对应SelectTypeData中id值
       ShowSelectTypeNav: false // 显隐选法列表
@@ -182,6 +183,9 @@ export default {
         this.MixData = res.data.data || []
       })
     },
+    ResChange (e) { // 投注结果更新
+      this.ResList = e
+    },
     CutSelectType (item) { // 切换选法
       this.SelectType = item.Id
       this.EditMainItemData({ name: 'MainHeaderTitle', value: item.Name })