静态页面

src/components/index/ZqgghhtzBiFen/index.vue

+<template>
+  <div class="components ZqgghhtzBiFen">
+    <span><em>单</em>比分</span>
+    <table>
+      <tr>
+        <td rowspan="3">
+          <span>主胜</span>
+        </td>
+        <td v-for="(item, index) in PageScoreData.slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageScoreData.slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageScoreData.slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <span>平</span>
+        </td>
+        <td v-for="(item, index) in PageScoreData.slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td rowspan="3">
+          <span>主负</span>
+        </td>
+        <td v-for="(item, index) in PageScoreData.slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageScoreData.slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+      <tr>
+        <td v-for="(item, index) in PageScoreData.slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-score')">
+          <span>{{item.name}}</span>
+          <span>{{item.odds}}</span>
+        </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzBiFen',
+  props: {
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    ScoreData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageScoreData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.ScoreData.map((item) => {
+      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/ZqgghhtzBiFen/page.scss

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

src/components/index/ZqgghhtzShengPingFu/index.vue

+<template>
+  <div class="components ZqgghhtzShengPingFu flex-h">
+    <span>{{Id}}</span>
+    <div class="flex-item flex-h">
+      <div class="flex-item">
+        <div class="flex-h">
+          <span>0</span>
+          <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 class="flex-h">
+          <span>{{SpreadPoints > 0 ? `+${SpreadPoints}` : SpreadPoints}}</span>
+          <a class="flex-item" v-for="(item, index) in PageWdlsData" :key="index" :class="{'active': item.Active}" @click="SelectItem(item, index, 'ft-wdls')">{{`${item.name} ${item.odds}`}}</a>
+        </div>
+      </div>
+      <a @click="$emit('ShowMore', Index)">更多<br />选项</a>
+    </div>
+  </div>
+</template>
+
+<script>
+/*
+  页面名称：
+*/
+export default {
+  name: 'ZqgghhtzShengPingFu',
+  props: {
+    SpreadPoints: {
+      default: null
+    },
+    Id: {
+      default: null
+    },
+    Index: {
+      default: null
+    },
+    WdlData: {
+      default: []
+    },
+    WdlsData: {
+      default: []
+    }
+  },
+  data () {
+    return {
+      PageWdlData: [],
+      PageWdlsData: []
+    }
+  },
+  computed: {
+  },
+  components: {
+  },
+  created () {
+    this.WdlData.map((item) => {
+      this.PageWdlData.push({ ...item, Active: false })
+    })
+    this.WdlsData.map((item) => {
+      this.PageWdlsData.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/ZqgghhtzShengPingFu/page.scss

+.components.ZqgghhtzShengPingFu {
+  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/ZuQiuGuoGuanHunHeTouZhu/index.vue

 <template>
   <div class="components ZuQiuGuoGuanHunHeTouZhu">
     <ul>
-      <li v-for="(item, index) in Data" :key="index" v-if="item.playOdds[`ft-wdl`] !== undefined && item.playOdds[`ft-wdls`] !== undefined">
+      <li v-for="(item, index) in PageData" :key="index" v-if="item.playOdds[`ft-wdl`] !== undefined && item.playOdds[`ft-wdls`] !== undefined">
         <div class="Title flex-h">
           <div class="flex-item">
             <div>
           </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">
-              <div class="flex-h">
-                <span>0</span>
-                <a class="flex-item">胜{{item.playOdds[`ft-wdl`][0].odds}}</a>
-                <a class="flex-item">平{{item.playOdds[`ft-wdl`][1].odds}}</a>
-                <a class="flex-item">负{{item.playOdds[`ft-wdl`][2].odds}}</a>
-              </div>
-              <div class="flex-h">
-                <span>{{item.spreadPoints > 0 ? `+${item.spreadPoints}` : item.spreadPoints}}</span>
-                <a class="flex-item">胜{{item.playOdds[`ft-wdls`][0].odds}}</a>
-                <a class="flex-item">平{{item.playOdds[`ft-wdls`][1].odds}}</a>
-                <a class="flex-item">负{{item.playOdds[`ft-wdls`][2].odds}}</a>
-              </div>
-            </div>
-            <a @click="CurrentTarget = item; ShowMore = true">更多<br />选项</a>
-          </div>
+        <div class="Detail">
+          <ZqgghhtzShengPingFu :Id="item.matchId" :Index="index" :SpreadPoints="item.spreadPoints" :WdlData="item.playOdds['ft-wdl']" :WdlsData="item.playOdds['ft-wdls']" @SelectItem="SelectItem" @ShowMore="ToShowMore"></ZqgghhtzShengPingFu>
         </div>
       </li>
     </ul>
         <div>
           <span>{{CurrentTarget.homeTeamName}} VS {{CurrentTarget.awayTeamName}}</span>
           <ul>
-            <li>
+            <!-- <li>
               <span>胜平负/让球</span>
               <table>
                 <tr v-if="CurrentTarget.playOdds[`ft-wdl`] !== undefined">
                   </td>
                 </tr>
               </table>
-            </li>
+            </li> -->
 
             <li v-if="CurrentTarget.playOdds[`ft-score`] !== undefined">
-              <span><em>单</em>比分</span>
+              <ZqgghhtzBiFen :Id="CurrentTarget.matchId" :Index="CurrentIndex" :ScoreData="CurrentTarget.playOdds['ft-score']" @SelectItem="SelectItem"></ZqgghhtzBiFen>
+              <!-- <span><em>单</em>比分</span>
               <table>
                 <tr>
                   <td rowspan="3">
                     <span>主胜</span>
                   </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(0, 5)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(0, 5)" :key="index" :data="`${item.Active}`" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(5, 10)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(5, 10)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(10, 13)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                   <td>
                     <span>平</span>
                   </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(13, 18)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(13, 18)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                   <td rowspan="3">
                     <span>主负</span>
                   </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(18, 23)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(18, 23)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(23, 28)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(23, 28)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-score`].slice(28, 31)" :colspan="index === 2 ? 3 : 1" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-score')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
-              </table>
+              </table> -->
             </li>
 
             <li v-if="CurrentTarget.playOdds[`ft-points`] !== undefined">
                   <td rowspan="2">
                     <span>进球数</span>
                   </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(0, 4)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(0, 4)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(4, 8)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-points`].slice(4, 8)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-points')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                   <td rowspan="3">
                     <span>半全场</span>
                   </td>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(0, 3)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(0, 3)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(3, 6)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(3, 6)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
                 </tr>
                 <tr>
-                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(6, 9)" :key="index">
+                  <td v-for="(item, index) in CurrentTarget.playOdds[`ft-double`].slice(6, 9)" :key="index" :class="{'active': item.Active}" @click="SelectMoreItem(item, index, 'ft-double')">
                     <span>{{item.name}}</span>
                     <span>{{item.odds}}</span>
                   </td>
 /*
   页面名称：足球-过关-混合投注
 */
+import ZqgghhtzShengPingFu from '../ZqgghhtzShengPingFu'
+import ZqgghhtzBiFen from '../ZqgghhtzBiFen'
 export default {
   name: 'ZuQiuGuoGuanHunHeTouZhu',
   props: {
   },
   data () {
     return {
+      PageData: [...this.Data],
       ShowMore: false,
-      CurrentTarget: null
+      CurrentTarget: null,
+      CurrentIndex: null,
+      ResList: []
     }
   },
   computed: {
   },
   components: {
+    ZqgghhtzShengPingFu,
+    ZqgghhtzBiFen
   },
   created () {
   },
     })
   },
   methods: {
+    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 = false
+        })
+      }
+      this.ShowMore = true
+    },
+    // SelectMoreItem (e) { // 更多选项-选择投注
+    //   item.Active = !item.Active
+    //   this.PageData[this.CurrentIndex].playOdds[key][index].Active = item.Active
+    //   this.TriggerRes(this.CurrentIndex, index, key, item.Active, item, this.CurrentTarget.matchId)
+    // },
+    SelectItem (e) { // 选择投注
+      this.TriggerRes(e.pIndex, e.cIndex, e.key, e.value, e.target, e.id)
+    },
+    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)
+              }
+              return false
+            }
+          })
+        })
+      }
+      console.log(this.ResList)
+    }
   }
 }
 </script>

src/components/index/ZuQiuGuoGuanHunHeTouZhu/page.scss

         }
       }
       > .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;
-          }
-        }
+        position: relative;
       }
     }
   }
           > 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 {