静态页面

src/components/index/ZqdghhtzShengPingFu/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="components ZqdghhtzShengPingFu 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 PageWdlData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-wdl')">{{`${item.name} ${item.odds}`}}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqdghhtzShengPingFu',
+  props: {
+    MoreSelect: {
+      default: false
+    },
+    SpreadPoints: {
+      default: null
+    },
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    WdlData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageWdlData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.WdlData.map((item) => {
+      if (item.Active !== undefined) {
+        this.PageWdlData.push({ ...item })
+      } else {
+        this.PageWdlData.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/ZqdghhtzShengPingFu/page.scss

@@ -0,0 +1,66 @@
+.components.ZqdghhtzShengPingFu {
+  align-items: center;
+  margin-top: 0.05rem;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > div.flex-h {
+        margin-top: 0.05rem;
+        align-items: center;
+        &:first-child {
+          margin-top: 0;
+        }
+        > span {
+          font-size: 0.1rem;
+          width: 0.16rem;
+          line-height: 0.16rem;
+          text-align: center;
+          border: 0.01rem solid #999;
+          color: #999;
+          border-radius: 100%;
+          margin-right: 0.1rem;
+          &.Yellow {
+            color: #fff;
+            background: #ff5100;
+            border-color: #ff5100;
+          }
+          &.Blue {
+            color: #fff;
+            background: #3f63e5;
+            border-color: #3f63e5;
+          }
+        }
+        > a {
+          text-align: center;
+          border: 0.01rem solid #999;
+          margin-left: 0.05rem;
+          font-size: 0.13rem;
+          line-height: 0.22rem;
+          &.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;
+    }
+  }
+}

src/components/index/ZqgghhtzBanQuanChangItem/index.vue

@@ -10,13 +10,13 @@
           </a>
         </div>
         <div class="flex-h">
-          <a class="flex-item" v-for="(item, index) in PageDoubleData.slice(3, 6)" v-if="index >= 3 && index < 6" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
+          <a class="flex-item" 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>
           </a>
         </div>
         <div class="flex-h">
-          <a class="flex-item" v-for="(item, index) in PageDoubleData.slice(6, 9)" v-if="index >= 6" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
+          <a class="flex-item" v-for="(item, index) in PageDoubleData" v-if="index >= 6" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-double')">
             <span>{{item.name}}</span>
             <span>{{item.odds}}</span>
           </a>

src/components/index/ZqgghhtzBiFenItem/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="components ZqgghhtzBiFenItem">
+    <a v-for="(item, index) in PagePlayOdds" v-if="index >= Min && index < Max" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">{{item.name}}</a>
+    <a @click="SelectAll(Min, Max)">全选</a>
+    <a @click="Empty(Min, Max)">清除</a>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzBiFenItem',
+  props: {
+    Min: {
+      default: 0
+    },
+    Max: {
+      default: 0
+    },
+    PlayOdds: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PagePlayOdds: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.PlayOdds.map((item) => {
+      if (item.Active !== undefined) {
+        this.PagePlayOdds.push({ ...item })
+      } else {
+        this.PagePlayOdds.push({ ...item, Active: false })
+      }
+    })
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  },
+  methods: {
+    SelectAll (min, max) { // 全选
+      this.PagePlayOdds.map((item, index) => {
+        if (index >= min && index < max) {
+          if (!item.Active) {
+            this.SelectItem(item, index, 'ft-score')
+          }
+        }
+      })
+    },
+    Empty (min, max) { // 清除
+      this.PagePlayOdds.map((item, index) => {
+        if (index >= min && index < max) {
+          if (item.Active) {
+            this.SelectItem(item, index, 'ft-score')
+          }
+        }
+      })
+    },
+    SelectItem (item, index, key) { // 选择投注
+      item.Active = !item.Active
+      this.$emit('SelectItem', { value: item.Active, key, cIndex: index, target: item })
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import "page.scss";
+</style>

src/components/index/ZqgghhtzBiFenItem/page.scss

@@ -0,0 +1,21 @@
+.components.ZqgghhtzBiFenItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  font-size: 0;
+  > a {
+    display: inline-block;
+    font-size: 0.12rem;
+    width: 0.7rem;
+    text-align: center;
+    border: 0.01rem solid #ccc;
+    margin-top: 0.05rem;
+    margin-left: 0.05rem;
+    line-height: 0.24rem;
+    &.active {
+      background: #ff5100;
+      border-color: #ff5100;
+      color: #fff;
+    }
+  }
+}

src/components/index/ZqgghhtzJinQiuShuItem/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="components ZqgghhtzJinQiuShuItem 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 PagePointsData" v-if="index < 4" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-points')">
+            <span>{{item.name}}</span>
+            <span>{{item.odds}}</span>
+          </a>
+        </div>
+        <div class="flex-h">
+          <a class="flex-item" v-for="(item, index) in PagePointsData" v-if="index >= 4" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-points')">
+            <span>{{item.name}}</span>
+            <span>{{item.odds}}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzJinQiuShuItem',
+  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/ZqgghhtzJinQiuShuItem/page.scss

@@ -0,0 +1,73 @@
+.components.ZqgghhtzJinQiuShuItem {
+  align-items: center;
+  margin-top: 0.05rem;
+  > span {
+    font-size: 0.1rem;
+    color: #999;
+    margin-right: 0.4rem;
+  }
+  > div.flex-item {
+    > div.flex-item {
+      position: relative;
+      overflow: hidden;
+      > div.flex-h {
+        margin-top: 0.05rem;
+        align-items: center;
+        &:first-child {
+          margin-top: 0;
+        }
+        > span {
+          font-size: 0.1rem;
+          width: 0.16rem;
+          line-height: 0.16rem;
+          text-align: center;
+          border: 0.01rem solid #999;
+          color: #999;
+          border-radius: 100%;
+          margin-right: 0.1rem;
+          &.Yellow {
+            color: #fff;
+            background: #ff5100;
+            border-color: #ff5100;
+          }
+          &.Blue {
+            color: #fff;
+            background: #3f63e5;
+            border-color: #3f63e5;
+          }
+        }
+        > a {
+          text-align: center;
+          border: 0.01rem solid #999;
+          margin-left: 0.05rem;
+          &.active {
+            color: #fff;
+            background: #ff5100;
+            border-color: #ff5100;
+            > span {
+              color: #fff;
+            }
+          }
+          > span {
+            display: block;
+            font-size: 0.1rem;
+            line-height: 0.16rem;
+            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/ZuQiuDanGuanBanQuanChang/index.vue

@@ -10,30 +10,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <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-double'].slice(0, 3)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds['ft-double'].slice(3, 6)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds['ft-double'].slice(6, 9)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-            </div>
-          </div>
+        <div class="Detail">
+          <ZqgghhtzBanQuanChangItem :Id="item.matchId" :Index="index" :DoubleData="item.playOdds['ft-double']" @SelectItem="SelectItem"></ZqgghhtzBanQuanChangItem>
         </div>
       </li>
     </ul>
@@ -45,6 +23,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzBanQuanChangItem from '../ZqgghhtzBanQuanChangItem'
 export default {
   name: 'ZuQiuDanGuanBanQuanChang',
   props: {
@@ -54,11 +33,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzBanQuanChangItem
   },
   created () {
   },
@@ -67,6 +49,55 @@ 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 })
+        }
+        if (key !== 'ft-double') {
+          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 !== 'ft-double') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuDanGuanBanQuanChang/page.scss

@@ -41,74 +41,74 @@
         }
       }
       > .Detail {
-        align-items: center;
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.1rem;
-                  line-height: 0.16rem;
-                  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;
-          }
-        }
+        // align-items: center;
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > div.flex-h {
+        //       margin-top: 0.05rem;
+        //       align-items: center;
+        //       &:first-child {
+        //         margin-top: 0;
+        //       }
+        //       > span {
+        //         font-size: 0.1rem;
+        //         width: 0.16rem;
+        //         line-height: 0.16rem;
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         color: #999;
+        //         border-radius: 100%;
+        //         margin-right: 0.1rem;
+        //         &.Yellow {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         &.Blue {
+        //           color: #fff;
+        //           background: #3f63e5;
+        //           border-color: #3f63e5;
+        //         }
+        //       }
+        //       > a {
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         margin-left: 0.05rem;
+        //         &.active {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         > span {
+        //           display: block;
+        //           font-size: 0.1rem;
+        //           line-height: 0.16rem;
+        //           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/ZuQiuDanGuanBiFen/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components ZuQiuDanGuanBiFen">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['ft-score'] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds['ft-score'] !== 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>
@@ -39,24 +36,18 @@
           </nav>
           <div class="Content">
             <div v-show="NavActiveIndex === 0">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(0, 13)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="0" :Max="13" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </div>
             <div v-show="NavActiveIndex === 1">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(13, 18)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="13" :Max="18" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </div>
             <div v-show="NavActiveIndex === 2">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(18, 31)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="18" :Max="31" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </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; NavActiveIndex = 0;">确认</a>
           </div>
         </div>
       </div>
@@ -69,6 +60,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzBiFenItem from '../ZqgghhtzBiFenItem'
 export default {
   name: 'ZuQiuDanGuanBiFen',
   props: {
@@ -78,22 +70,96 @@ export default {
   },
   data () {
     return {
+      PagePlayOdds: [],
       CurrentTarget: null,
+      CurrentIndex: null,
       ShowMore: false,
-      NavActiveIndex: 0
+      NavActiveIndex: 0,
+      PageData: [],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzBiFenItem
   },
   created () {
+    let Arr = []
+    this.Data.map((item) => {
+      Arr.push({ ...item, ResList: [] })
+    })
+    Arr.map((item) => {
+      if (item.playOdds['ft-score'] !== undefined) {
+        item.playOdds['ft-score'].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.PagePlayOdds = [...this.CurrentTarget.playOdds['ft-score']]
+      this.ShowMore = true
+    },
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(this.CurrentIndex, e.cIndex, e.key, e.value, e.target, 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 })
+        }
+        if (key !== 'ft-score') {
+          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 !== 'ft-score') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuDanGuanBiFen/page.scss

@@ -150,25 +150,32 @@
           }
         }
         > .Content {
-          padding: 0.15rem;
-          position: relative;
-          overflow: hidden;
           > div {
-            width: 100%;
+            padding: 0.15rem;
             position: relative;
             overflow: hidden;
-            font-size: 0;
-            > a {
-              display: inline-block;
-              font-size: 0.12rem;
-              width: 0.7rem;
-              text-align: center;
-              border: 0.01rem solid #ccc;
-              margin-top: 0.05rem;
-              margin-left: 0.05rem;
-              line-height: 0.24rem;
-            }
           }
+          // > div {
+          //   width: 100%;
+          //   position: relative;
+          //   overflow: hidden;
+          //   font-size: 0;
+          //   > a {
+          //     display: inline-block;
+          //     font-size: 0.12rem;
+          //     width: 0.7rem;
+          //     text-align: center;
+          //     border: 0.01rem solid #ccc;
+          //     margin-top: 0.05rem;
+          //     margin-left: 0.05rem;
+          //     line-height: 0.24rem;
+          //     &.active {
+          //       background: #ff5100;
+          //       border-color: #ff5100;
+          //       color: #fff;
+          //     }
+          //   }
+          // }
         }
         > div.flex-h {
           border-top: 0.01rem solid #f7f7f7;

src/components/index/ZuQiuDanGuanJinQiuShu/index.vue

@@ -10,24 +10,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <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-points'].slice(0, 4)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds['ft-points'].slice(4, 8)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-            </div>
-          </div>
+        <div class="Detail">
+          <ZqgghhtzJinQiuShuItem :Id="item.matchId" :Index="index" :PointsData="item.playOdds['ft-points']" @SelectItem="SelectItem"></ZqgghhtzJinQiuShuItem>
         </div>
       </li>
     </ul>
@@ -39,6 +23,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzJinQiuShuItem from '../ZqgghhtzJinQiuShuItem'
 export default {
   name: 'ZuQiuDanGuanJinQiuShu',
   props: {
@@ -48,11 +33,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzJinQiuShuItem
   },
   created () {
   },
@@ -61,6 +49,55 @@ 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 })
+        }
+        if (key !== 'ft-double') {
+          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 !== 'ft-double') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuDanGuanJinQiuShu/page.scss

@@ -41,74 +41,74 @@
         }
       }
       > .Detail {
-        align-items: center;
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.1rem;
-                  line-height: 0.16rem;
-                  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;
-          }
-        }
+        // align-items: center;
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > div.flex-h {
+        //       margin-top: 0.05rem;
+        //       align-items: center;
+        //       &:first-child {
+        //         margin-top: 0;
+        //       }
+        //       > span {
+        //         font-size: 0.1rem;
+        //         width: 0.16rem;
+        //         line-height: 0.16rem;
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         color: #999;
+        //         border-radius: 100%;
+        //         margin-right: 0.1rem;
+        //         &.Yellow {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         &.Blue {
+        //           color: #fff;
+        //           background: #3f63e5;
+        //           border-color: #3f63e5;
+        //         }
+        //       }
+        //       > a {
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         margin-left: 0.05rem;
+        //         &.active {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         > span {
+        //           display: block;
+        //           font-size: 0.1rem;
+        //           line-height: 0.16rem;
+        //           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/ZuQiuDanGuanShengPingFu/index.vue

@@ -10,15 +10,16 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <span>{{item.awayTeamId}}</span>
+        <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> -->
         </div>
       </li>
     </ul>
@@ -30,6 +31,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqdghhtzShengPingFu from '../ZqdghhtzShengPingFu'
 export default {
   name: 'ZuQiuDanGuanShengPingFu',
   props: {
@@ -46,6 +48,7 @@ export default {
   computed: {
   },
   components: {
+    ZqdghhtzShengPingFu
   },
   created () {
   },
@@ -54,6 +57,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/ZuQiuDanGuanShengPingFu/page.scss

@@ -41,70 +41,70 @@
         }
       }
       > .Detail {
-        align-items: center;
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                font-size: 0.13rem;
-                line-height: 0.22rem;
-                &.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;
-          }
-        }
+        // align-items: center;
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > div.flex-h {
+        //       margin-top: 0.05rem;
+        //       align-items: center;
+        //       &:first-child {
+        //         margin-top: 0;
+        //       }
+        //       > span {
+        //         font-size: 0.1rem;
+        //         width: 0.16rem;
+        //         line-height: 0.16rem;
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         color: #999;
+        //         border-radius: 100%;
+        //         margin-right: 0.1rem;
+        //         &.Yellow {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         &.Blue {
+        //           color: #fff;
+        //           background: #3f63e5;
+        //           border-color: #3f63e5;
+        //         }
+        //       }
+        //       > a {
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         margin-left: 0.05rem;
+        //         font-size: 0.13rem;
+        //         line-height: 0.22rem;
+        //         &.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;
+        //   }
+        // }
       }
     }
   }

src/components/index/ZuQiuGuoGuanBanQuanChang/index.vue

@@ -67,7 +67,7 @@ export default {
           this.ResList.push({ id: id, list: [] })
           this.ResList[this.ResList.length - 1].list.push({ ...target })
         }
-        if (key !== 'double') {
+        if (key !== 'ft-double') {
           this.PageData[pIndex].MoreSelect = true
         }
       } else { // 删除投注
@@ -85,7 +85,7 @@ export default {
           if (!MarkBool) { // 删除投注时检测更多选项有无选中投注，更新更多选项按钮状态
             let SubMarkBool = true
             item.list.map((subItem) => {
-              if (subItem.ruleCode !== 'double') {
+              if (subItem.wayCode !== 'ft-double') {
                 SubMarkBool = false
               }
             })

src/components/index/ZuQiuGuoGuanBiFen/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components ZuQiuGuoGuanBiFen">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds['ft-score'] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds['ft-score'] !== 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>
@@ -39,24 +36,18 @@
           </nav>
           <div class="Content">
             <div v-show="NavActiveIndex === 0">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(0, 13)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="0" :Max="13" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </div>
             <div v-show="NavActiveIndex === 1">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(13, 18)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="13" :Max="18" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </div>
             <div v-show="NavActiveIndex === 2">
-              <a v-for="(item, index) in CurrentTarget.playOdds['ft-score'].slice(18, 31)" :key="index">{{item.name}}</a>
-              <a>全选</a>
-              <a>清除</a>
+              <ZqgghhtzBiFenItem :Min="18" :Max="31" :PlayOdds="PagePlayOdds" @SelectItem="SelectItem"></ZqgghhtzBiFenItem>
             </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; NavActiveIndex = 0;">确认</a>
           </div>
         </div>
       </div>
@@ -69,6 +60,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzBiFenItem from '../ZqgghhtzBiFenItem'
 export default {
   name: 'ZuQiuGuoGuanBiFen',
   props: {
@@ -78,22 +70,96 @@ export default {
   },
   data () {
     return {
+      PagePlayOdds: [],
       CurrentTarget: null,
+      CurrentIndex: null,
       ShowMore: false,
-      NavActiveIndex: 0
+      NavActiveIndex: 0,
+      PageData: [],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzBiFenItem
   },
   created () {
+    let Arr = []
+    this.Data.map((item) => {
+      Arr.push({ ...item, ResList: [] })
+    })
+    Arr.map((item) => {
+      if (item.playOdds['ft-score'] !== undefined) {
+        item.playOdds['ft-score'].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.PagePlayOdds = [...this.CurrentTarget.playOdds['ft-score']]
+      this.ShowMore = true
+    },
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(this.CurrentIndex, e.cIndex, e.key, e.value, e.target, 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 })
+        }
+        if (key !== 'ft-score') {
+          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 !== 'ft-score') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuGuoGuanBiFen/page.scss

@@ -150,25 +150,32 @@
           }
         }
         > .Content {
-          padding: 0.15rem;
-          position: relative;
-          overflow: hidden;
           > div {
-            width: 100%;
+            padding: 0.15rem;
             position: relative;
             overflow: hidden;
-            font-size: 0;
-            > a {
-              display: inline-block;
-              font-size: 0.12rem;
-              width: 0.7rem;
-              text-align: center;
-              border: 0.01rem solid #ccc;
-              margin-top: 0.05rem;
-              margin-left: 0.05rem;
-              line-height: 0.24rem;
-            }
           }
+          // > div {
+          //   width: 100%;
+          //   position: relative;
+          //   overflow: hidden;
+          //   font-size: 0;
+          //   > a {
+          //     display: inline-block;
+          //     font-size: 0.12rem;
+          //     width: 0.7rem;
+          //     text-align: center;
+          //     border: 0.01rem solid #ccc;
+          //     margin-top: 0.05rem;
+          //     margin-left: 0.05rem;
+          //     line-height: 0.24rem;
+          //     &.active {
+          //       background: #ff5100;
+          //       border-color: #ff5100;
+          //       color: #fff;
+          //     }
+          //   }
+          // }
         }
         > div.flex-h {
           border-top: 0.01rem solid #f7f7f7;

src/components/index/ZuQiuGuoGuanHunHeTouZhu/index.vue

@@ -153,7 +153,7 @@ export default {
           if (!MarkBool) { // 删除投注时检测更多选项有无选中投注，更新更多选项按钮状态
             let SubMarkBool = true
             item.list.map((subItem) => {
-              if (subItem.ruleCode !== 'ft-wdl' && subItem.ruleCode !== 'ft-wdls') {
+              if (subItem.wayCode !== 'ft-wdl' && subItem.wayCode !== 'ft-wdls') {
                 SubMarkBool = false
               }
             })

src/components/index/ZuQiuGuoGuanJinQiuShu/index.vue

@@ -10,24 +10,8 @@
           </div>
           <span>{{item.leagueName}}<em>{{item.matchTime}}(截)</em></span>
         </div>
-        <div class="Detail flex-h">
-          <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-points'].slice(0, 4)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-              <div class="flex-h">
-                <a class="flex-item" v-for="(subItem, subIndex) in item.playOdds['ft-points'].slice(4, 8)" :key="subIndex">
-                  <span>{{subItem.name}}</span>
-                  <span>{{subItem.odds}}</span>
-                </a>
-              </div>
-            </div>
-          </div>
+        <div class="Detail">
+          <ZqgghhtzJinQiuShuItem :Id="item.matchId" :Index="index" :PointsData="item.playOdds['ft-points']" @SelectItem="SelectItem"></ZqgghhtzJinQiuShuItem>
         </div>
       </li>
     </ul>
@@ -39,6 +23,7 @@
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzJinQiuShuItem from '../ZqgghhtzJinQiuShuItem'
 export default {
   name: 'ZuQiuGuoGuanJinQiuShu',
   props: {
@@ -48,11 +33,14 @@ export default {
   },
   data () {
     return {
+      PageData: [...this.Data],
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzJinQiuShuItem
   },
   created () {
   },
@@ -61,6 +49,55 @@ 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 })
+        }
+        if (key !== 'ft-double') {
+          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 !== 'ft-double') {
+                SubMarkBool = false
+              }
+            })
+            if (!SubMarkBool) {
+              this.PageData[pIndex].MoreSelect = false
+            }
+          }
+        })
+      }
+      this.$emit('Change', this.ResList)
+      // console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuGuoGuanJinQiuShu/page.scss

@@ -41,74 +41,74 @@
         }
       }
       > .Detail {
-        align-items: center;
-        margin-top: 0.05rem;
-        > span {
-          font-size: 0.1rem;
-          color: #999;
-          margin-right: 0.4rem;
-        }
-        > div.flex-item {
-          > div.flex-item {
-            position: relative;
-            overflow: hidden;
-            > div.flex-h {
-              margin-top: 0.05rem;
-              align-items: center;
-              &:first-child {
-                margin-top: 0;
-              }
-              > span {
-                font-size: 0.1rem;
-                width: 0.16rem;
-                line-height: 0.16rem;
-                text-align: center;
-                border: 0.01rem solid #999;
-                color: #999;
-                border-radius: 100%;
-                margin-right: 0.1rem;
-                &.Yellow {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                &.Blue {
-                  color: #fff;
-                  background: #3f63e5;
-                  border-color: #3f63e5;
-                }
-              }
-              > a {
-                text-align: center;
-                border: 0.01rem solid #999;
-                margin-left: 0.05rem;
-                &.active {
-                  color: #fff;
-                  background: #ff5100;
-                  border-color: #ff5100;
-                }
-                > span {
-                  display: block;
-                  font-size: 0.1rem;
-                  line-height: 0.16rem;
-                  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;
-          }
-        }
+        // align-items: center;
+        // margin-top: 0.05rem;
+        // > span {
+        //   font-size: 0.1rem;
+        //   color: #999;
+        //   margin-right: 0.4rem;
+        // }
+        // > div.flex-item {
+        //   > div.flex-item {
+        //     position: relative;
+        //     overflow: hidden;
+        //     > div.flex-h {
+        //       margin-top: 0.05rem;
+        //       align-items: center;
+        //       &:first-child {
+        //         margin-top: 0;
+        //       }
+        //       > span {
+        //         font-size: 0.1rem;
+        //         width: 0.16rem;
+        //         line-height: 0.16rem;
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         color: #999;
+        //         border-radius: 100%;
+        //         margin-right: 0.1rem;
+        //         &.Yellow {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         &.Blue {
+        //           color: #fff;
+        //           background: #3f63e5;
+        //           border-color: #3f63e5;
+        //         }
+        //       }
+        //       > a {
+        //         text-align: center;
+        //         border: 0.01rem solid #999;
+        //         margin-left: 0.05rem;
+        //         &.active {
+        //           color: #fff;
+        //           background: #ff5100;
+        //           border-color: #ff5100;
+        //         }
+        //         > span {
+        //           display: block;
+        //           font-size: 0.1rem;
+        //           line-height: 0.16rem;
+        //           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/ZuQiuGuoGuanShengPingFu/index.vue

@@ -67,32 +67,16 @@ 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)
               }
             }
           })
-          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
-            }
-          }
         })
       }
       this.$emit('Change', this.ResList)

src/pages/index/PaiLie5DingDan/index.vue

@@ -210,7 +210,7 @@ export default {
       this.PaiLie5Cart.map((item) => {
         let ItemArr = []
         for (let key in item) {
-          if (key !== 'Count' && key !== 'Type') {
+          if (key !== 'ft-Count' && key !== 'Type') {
             ItemArr.push(item[key])
           }
         }

src/pages/index/ZuQiu/index.vue

@@ -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: 4, // 选法，对应SelectTypeData中id值
+      SelectType: 1, // 选法，对应SelectTypeData中id值
       ShowSelectTypeNav: false // 显隐选法列表
     }
   },
@@ -186,10 +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.ResList = []
+      this.EmptyAllData() // 清除数据
       this.ShowSelectTypeNav = false
     },
     MainTitleClick () {