静态页面

src/components/index/LanQiuDanGuanDaXiaoFen/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuDanGuanDaXiaoFen">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-score`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzDaXiaoFenItem :Id="item.matchId" :Index="index" :ScoreData="item.playOdds['bst-score']" @SelectItem="SelectItem"></LqgghhtzDaXiaoFenItem>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzDaXiaoFenItem from '../LqgghhtzDaXiaoFenItem'
 export default {
   name: 'LanQiuDanGuanDaXiaoFen',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzDaXiaoFenItem
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuDanGuanRangFenShengFu/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuDanGuanRangFenShengFu">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wls`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzRangFenShengFu :Id="item.matchId" :Index="index" :WlsData="item.playOdds['bst-wls']" @SelectItem="SelectItem"></LqgghhtzRangFenShengFu>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzRangFenShengFu from '../LqgghhtzRangFenShengFu'
 export default {
   name: 'LanQiuDanGuanRangFenShengFu',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzRangFenShengFu
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuDanGuanRangFenShengFu/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // align-items: center;
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }

src/components/index/LanQiuDanGuanShengFenCha/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="components LanQiuGuoGuanShengFenCha">
+  <div class="components LanQiuDanGuanShengFenCha">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -14,12 +14,9 @@
           <span>{{item.awayTeamId}}</span>
           <div class="flex-item flex-h">
             <div class="flex-item">
-              <div>
-                <a @click="CurrentTarget = item; ShowMore = true">点击选择投注选项</a>
-                <span>2:1</span>
-                <span>2:1</span>
-                <span>2:1</span>
-                <span>2:1</span>
+              <div @click="SelectPoints(item, index)">
+                <a v-if="!item.ResList.length">点击选择投注选项</a>
+                <span v-for="(subItem, subIndex) in item.ResList" :key="subIndex">{{subItem.name}}</span>
               </div>
             </div>
           </div>
@@ -34,7 +31,7 @@
           <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
           <div class="Content">
             <div>
-              <a v-for="(item, index) in CurrentTarget.playOdds['bst-points']" :key="index">
+              <a v-for="(item, index) in PointsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
                 <span>{{item.name}}</span>
                 <span>{{item.odds}}</span>
               </a>
@@ -43,8 +40,8 @@
             </div>
           </div>
           <div class="flex-h">
-            <a class="flex-item" @click="ShowMore = false; NavActiveIndex = 0;">取消</a>
-            <a class="flex-item">确认</a>
+            <a class="flex-item" @click="ShowMore = false">取消</a>
+            <a class="flex-item" @click="ShowMore = false">确认</a>
           </div>
         </div>
       </div>
@@ -58,7 +55,7 @@
   页面名称：足球-过关-混合投注
 */
 export default {
-  name: 'LanQiuGuoGuanShengFenCha',
+  name: 'LanQiuDanGuanShengFenCha',
   props: {
     Data: {
       default: []
@@ -66,9 +63,13 @@ export default {
   },
   data () {
     return {
+      PointsData: [],
       CurrentTarget: null,
+      CurrentIndex: null,
       ShowMore: false,
-      NavActiveIndex: 0
+      NavActiveIndex: 0,
+      PageData: [],
+      ResList: []
     }
   },
   computed: {
@@ -76,12 +77,75 @@ export default {
   components: {
   },
   created () {
+    let Arr = []
+    this.Data.map((item) => {
+      Arr.push({ ...item, ResList: [] })
+    })
+    Arr.map((item) => {
+      if (item.playOdds['bst-points'] !== undefined) {
+        item.playOdds['bst-points'].map((subItem) => {
+          if (subItem.Active === undefined) {
+            subItem.Active = false
+          }
+        })
+      }
+    })
+    this.PageData = [...Arr]
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    SelectPoints (item, index) { // 打开选择弹窗
+      this.CurrentTarget = item
+      this.CurrentIndex = index
+      this.PointsData = []
+      if (this.CurrentTarget.playOdds['bst-points'] !== undefined) {
+        this.CurrentTarget.playOdds['bst-points'].map((item) => {
+          if (item.Active === undefined) {
+            this.PointsData.push({ ...item, Active: false })
+          } else {
+            this.PointsData.push({ ...item })
+          }
+        })
+      }
+      this.ShowMore = true
+    },
+    SelectItem (item, index, key) { // 选择投注
+      item.Active = !item.Active
+      this.TriggerRes(this.CurrentIndex, index, key, item.Active, item, this.CurrentTarget.matchId)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuDanGuanShengFenCha/page.scss

@@ -1,4 +1,4 @@
-.components.LanQiuGuoGuanShengFenCha {
+.components.LanQiuDanGuanShengFenCha {
   padding: 0 0.15rem;
   position: relative;
   overflow: hidden;
@@ -171,6 +171,13 @@
                 text-align: center;
                 line-height: 0.16rem;
               }
+              &.active {
+                background: #ff5100;
+                border-color: #ff5100;
+                > span {
+                  color: #fff;
+                }
+              }
             }
           }
         }

src/components/index/LanQiuDanGuanShengFu/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuDanGuanShengFu">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzShengFuItem :Id="item.matchId" :Index="index" :WlData="item.playOdds['bst-wl']" @SelectItem="SelectItem"></LqgghhtzShengFuItem>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzShengFuItem from '../LqgghhtzShengFuItem'
 export default {
   name: 'LanQiuDanGuanShengFu',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzShengFuItem
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuDanGuanShengFu/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // align-items: center;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }

src/components/index/LanQiuGuoGuanDaXiaoFen/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuGuoGuanDaXiaoFen">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-score`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-score`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzDaXiaoFenItem :Id="item.matchId" :Index="index" :ScoreData="item.playOdds['bst-score']" @SelectItem="SelectItem"></LqgghhtzDaXiaoFenItem>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzDaXiaoFenItem from '../LqgghhtzDaXiaoFenItem'
 export default {
   name: 'LanQiuGuoGuanDaXiaoFen',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzDaXiaoFenItem
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuGuoGuanDaXiaoFen/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // align-items: center;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }

src/components/index/LanQiuGuoGuanHunHeTouZhu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components LanQiuGuoGuanHunHeTouZhu">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined && item.playOdds[`bst-wls`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined && item.playOdds[`bst-wls`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -10,17 +10,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-            <a @click="CurrentTarget = item; CalcShengFu(); ShowMore = true">更多<br />选项</a>
-          </div>
+        <div class="Detail">
+          <LqgghhtzShengFu :MoreSelect="item.MoreSelect" :Id="item.matchId" :Index="index" :WlData="item.playOdds['bst-wl']" :WlsData="item.playOdds['bst-wls']" @SelectItem="SelectItem" @ShowMore="ToShowMore"></LqgghhtzShengFu>
         </div>
       </li>
     </ul>
@@ -31,7 +22,7 @@
         <div>
           <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
           <ul>
-            <li>
+            <!-- <li>
               <span>胜负/让分胜负</span>
               <table>
                 <tr v-if="CurrentTarget.playOdds[`bst-wl`] !== undefined">
@@ -41,51 +32,20 @@
                   </td>
                 </tr>
               </table>
-            </li>
+            </li> -->
 
             <li v-if="CurrentTarget.playOdds[`bst-score`] !== undefined">
-              <span><em>单</em>大小分</span>
-              <table>
-                <tr>
-                  <td>
-                    <span>大小</span>
-                  </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`bst-score`]" :key="index">
-                    <span>{{item.name}}</span>
-                    <span>{{item.odds}}</span>
-                  </td>
-                </tr>
-              </table>
+              <LqgghhtzDaXiaoFen :Id="CurrentTarget.matchId" :Index="CurrentIndex" :ScoreData="CurrentTarget.playOdds['bst-score']" @SelectItem="SelectItem"></LqgghhtzDaXiaoFen>
             </li>
 
             <li v-if="CurrentTarget.playOdds[`bst-points`] !== undefined">
-              <span><em>单</em>胜分差</span>
-              <table>
-                <tr v-for="(item, index) in ShengArr" :key="index">
-                  <td v-if="index === 0" :rowspan="ShengArr.length">
-                    <span>主胜</span>
-                  </td>
-                  <td v-for="(subItem, subIndex) in item" :key="`Zhu-${subIndex}`">
-                    <span>{{subItem.name}}</span>
-                    <span>{{subItem.odds}}</span>
-                  </td>
-                </tr>
-                <tr v-for="(item, index) in FuArr" :key="index">
-                  <td v-if="index === 0" :rowspan="FuArr.length">
-                    <span>客胜</span>
-                  </td>
-                  <td v-for="(subItem, subIndex) in item" :key="`Ke-${subIndex}`">
-                    <span>{{subItem.name}}</span>
-                    <span>{{subItem.odds}}</span>
-                  </td>
-                </tr>
-              </table>
+              <LqgghhtzShengFenCha :Id="CurrentTarget.matchId" :Index="CurrentIndex" :PointsData="CurrentTarget.playOdds['bst-points']" @SelectItem="SelectItem"></LqgghhtzShengFenCha>
             </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>
@@ -97,6 +57,9 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzShengFu from '../LqgghhtzShengFu'
+import LqgghhtzDaXiaoFen from '../LqgghhtzDaXiaoFen'
+import LqgghhtzShengFenCha from '../LqgghhtzShengFenCha'
 export default {
   name: 'LanQiuGuoGuanHunHeTouZhu',
   props: {
@@ -106,49 +69,94 @@ export default {
   },
   data () {
     return {
+      PageData: [],
+      ResList: [],
       ShengNum: 0,
       ShengArr: [],
       FuArr: [],
       ShowMore: false,
-      CurrentTarget: null
+      CurrentTarget: null,
+      CurrentIndex: null
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzShengFu,
+    LqgghhtzDaXiaoFen,
+    LqgghhtzShengFenCha
   },
   created () {
-    this.CalcShengFu()
+    this.Data.map((item) => {
+      this.PageData.push({ ...item, MoreSelect: false })
+    })
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
-    CalcShengFu () { // 计算胜负数据
-      if (this.CurrentTarget !== null) {
-        let ShengArr = []
-        let FuArr = []
-        this.CurrentTarget.playOdds['bst-points'].map((item) => {
-          if (item.name.indexOf('胜') > -1) {
-            ShengArr.push(item)
-          } else {
-            FuArr.push(item)
-          }
+    ToShowMore (e) { // 显示更多
+      this.CurrentIndex = e
+      this.CurrentTarget = { ...this.PageData[e] }
+      for (let key in this.CurrentTarget.playOdds) {
+        this.CurrentTarget.playOdds[key].map((item) => {
+          item.Active = item.Active !== undefined ? item.Active : false
         })
-        this.ShengArr = this.Return3Arr(ShengArr)
-        this.FuArr = this.Return3Arr(FuArr)
       }
+      this.ShowMore = true
+    },
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
     },
-    Return3Arr (arr) { // 返回3个一组数组
-      let aArr = []
-      for (let n = 0; n < Math.ceil(arr.length / 3); n++) {
-        aArr.push([])
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+        if (key !== 'bst-wl' && key !== 'bst-wls') {
+          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)
+              }
+            }
+          })
+          if (!MarkBool) { // 删除投注时检测更多选项有无选中投注，更新更多选项按钮状态
+            let SubMarkBool = true
+            item.list.map((subItem) => {
+              if (subItem.wayCode !== 'bst-wl' && subItem.wayCode !== 'bst-wls') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+            if (!item.list.length) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
       }
-      arr.map((item, index) => {
-        aArr[Math.floor(index / 3)].push(item)
-      })
-      return aArr || []
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
     }
   }
 }

src/components/index/LanQiuGuoGuanHunHeTouZhu/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // align-items: center;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }
@@ -112,49 +112,49 @@
           > li {
             margin-top: 0.1rem;
             padding: 0 0.15rem;
-            > 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;
-                  }
-                }
-              }
-            }
+            // > 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;
+            //       }
+            //     }
+            //   }
+            // }
           }
         }
         > div {

src/components/index/LanQiuGuoGuanRangFenShengFu/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuGuoGuanRangFenShengFu">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-wls`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wls`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzRangFenShengFu :Id="item.matchId" :Index="index" :WlsData="item.playOdds['bst-wls']" @SelectItem="SelectItem"></LqgghhtzRangFenShengFu>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzRangFenShengFu from '../LqgghhtzRangFenShengFu'
 export default {
   name: 'LanQiuGuoGuanRangFenShengFu',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzRangFenShengFu
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuGuoGuanRangFenShengFu/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // align-items: center;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }

src/components/index/LanQiuGuoGuanShengFenCha/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components LanQiuGuoGuanShengFenCha">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds['bst-points'] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -14,12 +14,9 @@
           <span>{{item.awayTeamId}}</span>
           <div class="flex-item flex-h">
             <div class="flex-item">
-              <div>
-                <a @click="CurrentTarget = item; ShowMore = true">点击选择投注选项</a>
-                <span>2:1</span>
-                <span>2:1</span>
-                <span>2:1</span>
-                <span>2:1</span>
+              <div @click="SelectPoints(item, index)">
+                <a v-if="!item.ResList.length">点击选择投注选项</a>
+                <span v-for="(subItem, subIndex) in item.ResList" :key="subIndex">{{subItem.name}}</span>
               </div>
             </div>
           </div>
@@ -34,7 +31,7 @@
           <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
           <div class="Content">
             <div>
-              <a v-for="(item, index) in CurrentTarget.playOdds['bst-points']" :key="index">
+              <a v-for="(item, index) in PointsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
                 <span>{{item.name}}</span>
                 <span>{{item.odds}}</span>
               </a>
@@ -43,8 +40,8 @@
             </div>
           </div>
           <div class="flex-h">
-            <a class="flex-item" @click="ShowMore = false; NavActiveIndex = 0;">取消</a>
-            <a class="flex-item">确认</a>
+            <a class="flex-item" @click="ShowMore = false">取消</a>
+            <a class="flex-item" @click="ShowMore = false">确认</a>
           </div>
         </div>
       </div>
@@ -66,9 +63,13 @@ export default {
   },
   data () {
     return {
+      PointsData: [],
       CurrentTarget: null,
+      CurrentIndex: null,
       ShowMore: false,
-      NavActiveIndex: 0
+      NavActiveIndex: 0,
+      PageData: [],
+      ResList: []
     }
   },
   computed: {
@@ -76,12 +77,75 @@ export default {
   components: {
   },
   created () {
+    let Arr = []
+    this.Data.map((item) => {
+      Arr.push({ ...item, ResList: [] })
+    })
+    Arr.map((item) => {
+      if (item.playOdds['bst-points'] !== undefined) {
+        item.playOdds['bst-points'].map((subItem) => {
+          if (subItem.Active === undefined) {
+            subItem.Active = false
+          }
+        })
+      }
+    })
+    this.PageData = [...Arr]
   },
   mounted () {
     this.$nextTick(() => {
     })
   },
   methods: {
+    SelectPoints (item, index) { // 打开选择弹窗
+      this.CurrentTarget = item
+      this.CurrentIndex = index
+      this.PointsData = []
+      if (this.CurrentTarget.playOdds['bst-points'] !== undefined) {
+        this.CurrentTarget.playOdds['bst-points'].map((item) => {
+          if (item.Active === undefined) {
+            this.PointsData.push({ ...item, Active: false })
+          } else {
+            this.PointsData.push({ ...item })
+          }
+        })
+      }
+      this.ShowMore = true
+    },
+    SelectItem (item, index, key) { // 选择投注
+      item.Active = !item.Active
+      this.TriggerRes(this.CurrentIndex, index, key, item.Active, item, this.CurrentTarget.matchId)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuGuoGuanShengFenCha/page.scss

@@ -171,6 +171,13 @@
                 text-align: center;
                 line-height: 0.16rem;
               }
+              &.active {
+                background: #ff5100;
+                border-color: #ff5100;
+                > span {
+                  color: #fff;
+                }
+              }
             }
           }
         }

src/components/index/LanQiuGuoGuanShengFu/index.vue

@@ -2,7 +2,7 @@
   <div class="components LanQiuGuoGuanShengFu">
 
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`bst-wl`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
@@ -11,16 +11,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.matchId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item flex-h">
-              <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds[`bst-wl`]" :key="subIndex">
-                <span>{{subItem.name}}</span>
-                <span>{{subItem.odds}}</span>
-              </a>
-            </div>
-          </div>
+        <div class="Detail">
+          <LqgghhtzShengFuItem :Id="item.matchId" :Index="index" :WlData="item.playOdds['bst-wl']" @SelectItem="SelectItem"></LqgghhtzShengFuItem>
         </div>
       </li>
     </ul>
@@ -32,6 +24,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import LqgghhtzShengFuItem from '../LqgghhtzShengFuItem'
 export default {
   name: 'LanQiuGuoGuanShengFu',
   props: {
@@ -41,11 +34,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    LqgghhtzShengFuItem
   },
   created () {
   },
@@ -54,6 +50,39 @@ export default {
     })
   },
   methods: {
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    TriggerRes (pIndex, cIndex, key, value, target, id) {
+      this.PageData[pIndex].playOdds[key][cIndex].Active = value
+      if (value) { // 新增投注
+        let Bool = false
+        this.ResList.map((item) => {
+          if (item.id === id) {
+            Bool = true
+            item.list.push({ ...target })
+            return false
+          }
+        })
+        if (!Bool) {
+          this.ResList.push({ id: id, list: [] })
+          this.ResList[this.ResList.length - 1].list.push({ ...target })
+        }
+      } else { // 删除投注
+        this.ResList.map((item, index) => {
+          item.list.map((subItem, subIndex) => {
+            if (subItem.ruleCode === target.ruleCode && subItem.name === target.name) {
+              item.list.splice(subIndex, 1)
+              if (!item.list.length) {
+                this.ResList.splice(index, 1)
+              }
+            }
+          })
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/LanQiuGuoGuanShengFu/page.scss

@@ -41,43 +41,43 @@
         }
       }
       > .Detail {
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        align-items: center;
-        > div.flex-item {
-          align-items: center;
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > a {
-              border: 0.01rem solid #999;
-              box-sizing: border-box;
-              margin-right: 0.05rem;
-              > span {
-                display: block;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                text-align: center;
-              }
-            }
-          }
-          > a {
-            font-size: 0.1rem;
-            color: #ff5100;
-            line-height: 0.2rem;
-            border: 0.01rem solid #999;
-            margin-left: 0.05rem;
-            position: relative;
-            overflow: hidden;
-            padding: 0 0.02rem;
-            padding-top: 0.04rem;
-            margin-right: 0.2rem;
-          }
-        }
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // align-items: center;
+        // > div.flex-item {
+        //   align-items: center;
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > a {
+        //       border: 0.01rem solid #999;
+        //       box-sizing: border-box;
+        //       margin-right: 0.05rem;
+        //       > span {
+        //         display: block;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         text-align: center;
+        //       }
+        //     }
+        //   }
+        //   > a {
+        //     font-size: 0.1rem;
+        //     color: #ff5100;
+        //     line-height: 0.2rem;
+        //     border: 0.01rem solid #999;
+        //     margin-left: 0.05rem;
+        //     position: relative;
+        //     overflow: hidden;
+        //     padding: 0 0.02rem;
+        //     padding-top: 0.04rem;
+        //     margin-right: 0.2rem;
+        //   }
+        // }
       }
     }
   }

src/components/index/LqgghhtzDaXiaoFen/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="components LqgghhtzDaXiaoFen">
+    <span><em>单</em>大小分</span>
+    <table>
+      <tr>
+        <td>
+          <span>大小</span>
+        </td>
+        <td v-for="(item, index) in PageScoreData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzDaXiaoFen',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    ScoreData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageScoreData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.ScoreData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageScoreData.push({ ...item })
+      } else {
+        this.PageScoreData.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/LqgghhtzDaXiaoFen/page.scss

@@ -0,0 +1,45 @@
+.components.LqgghhtzDaXiaoFen {
+  > 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/LqgghhtzDaXiaoFenItem/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="components LqgghhtzDaXiaoFenItem flex-h">
+    <span>{{Id}}</span>
+    <div class="flex-item flex-h">
+      <div class="flex-item flex-h">
+        <a class="flex-item" v-for="(item, index) in PageScoreData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzDaXiaoFenItem',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    ScoreData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageScoreData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.ScoreData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageScoreData.push({ ...item })
+      } else {
+        this.PageScoreData.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/LqgghhtzDaXiaoFenItem/page.scss

@@ -0,0 +1,46 @@
+.components.LqgghhtzDaXiaoFenItem {
+  margin-top: 0.05rem;
+  align-items: center;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    align-items: center;
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > a {
+        border: 0.01rem solid #999;
+        box-sizing: border-box;
+        margin-right: 0.05rem;
+        > span {
+          display: block;
+          font-size: 0.13rem;
+          line-height: 0.22rem;
+          text-align: center;
+        }
+        &.active {
+          background: #ff5100;
+          border-color: #ff5100;
+          > span {
+            color: #fff;
+          }
+        }
+      }
+    }
+    > a {
+      font-size: 0.1rem;
+      color: #ff5100;
+      line-height: 0.2rem;
+      border: 0.01rem solid #999;
+      margin-left: 0.05rem;
+      position: relative;
+      overflow: hidden;
+      padding: 0 0.02rem;
+      padding-top: 0.04rem;
+      margin-right: 0.2rem;
+    }
+  }
+}

src/components/index/LqgghhtzRangFenShengFu/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="components LqgghhtzRangFenShengFu flex-h">
+    <span>{{Id}}</span>
+    <div class="flex-item flex-h">
+      <div class="flex-item flex-h">
+        <a class="flex-item" v-for="(item, index) in PageWlsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-wls')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzRangFenShengFu',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    WlsData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageWlsData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.WlsData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageWlsData.push({ ...item })
+      } else {
+        this.PageWlsData.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/LqgghhtzRangFenShengFu/page.scss

@@ -0,0 +1,46 @@
+.components.LqgghhtzRangFenShengFu {
+  margin-top: 0.05rem;
+  align-items: center;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    align-items: center;
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > a {
+        border: 0.01rem solid #999;
+        box-sizing: border-box;
+        margin-right: 0.05rem;
+        > span {
+          display: block;
+          font-size: 0.13rem;
+          line-height: 0.22rem;
+          text-align: center;
+        }
+        &.active {
+          background: #ff5100;
+          border-color: #ff5100;
+          > span {
+            color: #fff;
+          }
+        }
+      }
+    }
+    > a {
+      font-size: 0.1rem;
+      color: #ff5100;
+      line-height: 0.2rem;
+      border: 0.01rem solid #999;
+      margin-left: 0.05rem;
+      position: relative;
+      overflow: hidden;
+      padding: 0 0.02rem;
+      padding-top: 0.04rem;
+      margin-right: 0.2rem;
+    }
+  }
+}

src/components/index/LqgghhtzShengFenCha/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="components LqgghhtzShengFenCha">
+    <span><em>单</em>胜分差</span>
+    <table>
+      <tr>
+        <td :rowspan="Math.ceil(ShengLength / 3)">
+          <span>主胜</span>
+        </td>
+        <td v-for="(item, index) in PagePointsData" :key="index" v-if="item.name.indexOf('胜') > -1 && index < 3" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PagePointsData" :key="index" v-if="item.name.indexOf('胜') > -1 && index >= 3" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td :rowspan="Math.ceil(FuLength / 3)">
+          <span>客胜</span>
+        </td>
+        <td v-for="(item, index) in PagePointsData" :key="index" v-if="item.name.indexOf('负') > -1 && index < ShengLength + 3" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PagePointsData" :key="index" v-if="item.name.indexOf('负') > -1 && index >= ShengLength + 3" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-points')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzShengFenCha',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    PointsData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      ShengLength: 0,
+      FuLength: 0,
+      PagePointsData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.ShengLength = 0
+    this.FuLength = 0
+    this.PointsData.map((item) => {
+      if (item.name.indexOf('胜') > -1) {
+        this.ShengLength += 1
+      } else {
+        this.FuLength += 1
+      }
+      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/LqgghhtzShengFenCha/page.scss

@@ -0,0 +1,45 @@
+.components.LqgghhtzShengFenCha {
+  > 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/LqgghhtzShengFu/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="components LqgghhtzShengFu flex-h">
+    <span>{{Id}}</span>
+    <div class="flex-item flex-h">
+      <div class="flex-item">
+        <div class="flex-h">
+          <a class="flex-item" v-for="(item, index) in PageWlData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-wl')">{{`${item.name} ${item.odds}`}}</a>
+        </div>
+        <div class="flex-h">
+          <a class="flex-item" v-for="(item, index) in PageWlsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-wls')">{{`让${item.name} ${item.odds}`}}</a>
+        </div>
+      </div>
+      <a @click="$emit('ShowMore', Index)" :class="{'active': MoreSelect}">更多<br />选项</a>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzShengFu',
+  props: {
+    MoreSelect: {
+      default: false
+    },
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    WlData: {
+      default: []
+    },
+    WlsData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageWlData: [],
+      PageWlsData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.WlData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageWlData.push({ ...item })
+      } else {
+        this.PageWlData.push({ ...item, Active: false })
+      }
+    })
+    this.WlsData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageWlsData.push({ ...item })
+      } else {
+        this.PageWlsData.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/LqgghhtzShengFu/page.scss

@@ -0,0 +1,51 @@
+.components.LqgghhtzShengFu {
+  margin-top: 0.05rem;
+  align-items: center;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > div {
+        margin-top: 0.05rem;
+        &:first-child {
+          margin-top: 0;
+        }
+        > a {
+          border: 0.01rem solid #999;
+          box-sizing: border-box;
+          margin-right: 0.05rem;
+          font-size: 0.13rem;
+          line-height: 0.22rem;
+          text-align: center;
+          &.active {
+            color: #fff;
+            background: #ff5100;
+            border-color: #ff5100;
+          }
+        }
+      }
+    }
+    > a {
+      font-size: 0.1rem;
+      color: #ff5100;
+      line-height: 0.2rem;
+      border: 0.01rem solid #999;
+      margin-left: 0.05rem;
+      position: relative;
+      overflow: hidden;
+      padding: 0 0.02rem;
+      padding-top: 0.04rem;
+      margin-right: 0.2rem;
+      &.active {
+        background: #ff5100;
+        border-color: #ff5100;
+        color: #fff;
+      }
+    }
+  }
+}

src/components/index/LqgghhtzShengFuItem/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="components LqgghhtzShengFuItem flex-h">
+    <span>{{Id}}</span>
+    <div class="flex-item flex-h">
+      <div class="flex-item flex-h">
+        <a class="flex-item" v-for="(item, index) in PageWlData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'bst-wl')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'LqgghhtzShengFuItem',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    WlData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageWlData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.WlData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageWlData.push({ ...item })
+      } else {
+        this.PageWlData.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/LqgghhtzShengFuItem/page.scss

@@ -0,0 +1,46 @@
+.components.LqgghhtzShengFuItem {
+  margin-top: 0.05rem;
+  align-items: center;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    align-items: center;
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > a {
+        border: 0.01rem solid #999;
+        box-sizing: border-box;
+        margin-right: 0.05rem;
+        > span {
+          display: block;
+          font-size: 0.13rem;
+          line-height: 0.22rem;
+          text-align: center;
+        }
+        &.active {
+          background: #ff5100;
+          border-color: #ff5100;
+          > span {
+            color: #fff;
+          }
+        }
+      }
+    }
+    > a {
+      font-size: 0.1rem;
+      color: #ff5100;
+      line-height: 0.2rem;
+      border: 0.01rem solid #999;
+      margin-left: 0.05rem;
+      position: relative;
+      overflow: hidden;
+      padding: 0 0.02rem;
+      padding-top: 0.04rem;
+      margin-right: 0.2rem;
+    }
+  }
+}

src/components/index/ZuQiuDanGuanShengPingFu/index.vue

@@ -12,14 +12,6 @@
         </div>
         <div class="Detail">
           <ZqdghhtzShengPingFu :Id="item.matchId" :Index="index" :WdlData="item.playOdds['ft-wdl']" @SelectItem="SelectItem"></ZqdghhtzShengPingFu>
-          <!-- <span>{{item.awayTeamId}}</span>
-          <div class="flex-item flex-h">
-            <div class="flex-item">
-              <div class="flex-h">
-                <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds['ft-wdl']" :key="subIndex">{{subIndex === 0 ? '胜' : subIndex === 1 ? '平' : '负'}} {{subItem.odds}}</a>
-              </div>
-            </div>
-          </div> -->
         </div>
       </li>
     </ul>

src/components/index/ZuQiuGuoGuanHunHeTouZhu/index.vue

@@ -160,11 +160,14 @@ export default {
             if (!SubMarkBool) {
               this.PageData[pIndex].MoreSelect = false
             }
+            if (!item.list.length) {
+              this.PageData[pIndex].MoreSelect = false
+            }
           }
         })
       }
       this.$emit('Change', this.ResList)
-      // console.log(this.ResList)
+      // console.log(JSON.stringify(this.ResList))
     }
   }
 }

src/pages/index/LanQiu/index.vue

@@ -44,42 +44,42 @@
 
             <!-- 过关-胜负 -->
             <div class="GuoGuanShengFu" v-if="SelectType === 2">
-              <LanQiuGuoGuanShengFu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanShengFu>
+              <LanQiuGuoGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFu>
             </div>
 
             <!-- 过关-让分胜负 -->
             <div class="GuoGuanRangFenShengFu" v-if="SelectType === 3">
-              <LanQiuGuoGuanRangFenShengFu v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanRangFenShengFu>
+              <LanQiuGuoGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanRangFenShengFu>
             </div>
 
             <!-- 过关-胜分差 -->
             <div class="GuoGuanShengFenCha" v-if="SelectType === 4">
-              <LanQiuGuoGuanShengFenCha v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanShengFenCha>
+              <LanQiuGuoGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanShengFenCha>
             </div>
 
             <!-- 过关-大小分 -->
             <div class="GuoGuanDaXiaoFen" v-if="SelectType === 5">
-              <LanQiuGuoGuanDaXiaoFen v-if="MixData.length" :Data="MixData"></LanQiuGuoGuanDaXiaoFen>
+              <LanQiuGuoGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuGuoGuanDaXiaoFen>
             </div>
 
             <!-- 单关-胜负 -->
             <div class="DanGuanShengFu" v-if="SelectType === 6">
-              <LanQiuDanGuanShengFu v-if="MixData.length" :Data="MixData"></LanQiuDanGuanShengFu>
+              <LanQiuDanGuanShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFu>
             </div>
 
             <!-- 单关-让分胜负 -->
             <div class="DanGuanRangFenShengFu" v-if="SelectType === 7">
-              <LanQiuDanGuanRangFenShengFu v-if="MixData.length" :Data="MixData"></LanQiuDanGuanRangFenShengFu>
+              <LanQiuDanGuanRangFenShengFu v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanRangFenShengFu>
             </div>
 
             <!-- 单关-胜分差 -->
             <div class="DanGuanShengFenCha" v-if="SelectType === 8">
-              <LanQiuDanGuanShengFenCha v-if="MixData.length" :Data="MixData"></LanQiuDanGuanShengFenCha>
+              <LanQiuDanGuanShengFenCha v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanShengFenCha>
             </div>
 
             <!-- 单关-大小分 -->
             <div class="DanGuanDaXiaoFen" v-if="SelectType === 9">
-              <LanQiuDanGuanDaXiaoFen v-if="MixData.length" :Data="MixData"></LanQiuDanGuanDaXiaoFen>
+              <LanQiuDanGuanDaXiaoFen v-if="MixData.length" :Data="MixData" @Change="ResChange"></LanQiuDanGuanDaXiaoFen>
             </div>
 
           </div>
@@ -89,7 +89,7 @@
 
     <!-- 投注栏 -->
     <div class="Bottom flex-h">
-      <a class="iconfont iconjian"></a>
+      <a class="iconfont iconjian" @click="EmptyAllData"></a>
       <div class="flex-item"></div>
       <span>{{ResList.length ? `已选择${ResList.length}场比赛` : '非单关至少选两场比赛'}}</span>
       <a class="Btn">投注</a>
@@ -137,7 +137,7 @@ export default {
       },
       ResList: [], // 投注结果数据
       MixData: [], // 混合数据
-      SelectType: 2, // 选法，对应SelectTypeData中id值
+      SelectType: 1, // 选法，对应SelectTypeData中id值
       ShowSelectTypeNav: false // 显隐选法列表
     }
   },
@@ -186,9 +186,22 @@ export default {
     ResChange (e) { // 投注结果更新
       this.ResList = e
     },
+    EmptyAllData () { // 清除数据
+      this.ResList = []
+      this.MixData.map((item) => {
+        if (item.playOdds !== undefined) {
+          for (let key in item.playOdds) {
+            item.playOdds[key].map((subItem) => {
+              subItem.Active = false
+            })
+          }
+        }
+      })
+    },
     CutSelectType (item) { // 切换选法
       this.SelectType = item.Id
       this.EditMainItemData({ name: 'MainHeaderTitle', value: item.Name })
+      this.EmptyAllData() // 清除数据
       this.ShowSelectTypeNav = false
     },
     MainTitleClick () {