19-4-16-2

vue_sports/.svn/pristine/13/13b4e2ce2cf8b15f0a506c8b14c522cf367059bd.svn-base

@@ -0,0 +1,566 @@
+<template>
+  <div>
+      <div v-if="noData">
+      <NotOpend :title="this.info"/>
+    </div>
+    <!-- 让球&大小 -->
+    <div class="match" v-if="isShow && rShow">
+      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
+        <!-- <div v-for="items in list[index]" :key="items.id"> -->
+        <div class="row allAlignment  haderBox center">
+          <span>{{items.leagueName}}</span>
+          <div class="row Match-title-num">
+            <span>{{items.matchNum}}</span>
+          </div>
+        </div>
+        <div class="Match-box">
+          <div v-for="(itemList,index) in items.matchData" :key="itemList.id"   @click="matchInfo(itemList.match_id)">
+          
+              <div class="row allAlignment Match-box-top">
+                <div class="Match-box-top-left">
+                  <span>{{itemList.match_date}}</span>
+                  <span class="texttop">{{itemList.match_time}}</span>
+                </div>
+                <div class="Match-box-top-right row">
+                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
+                  <span style="margin-right: .1rem;">让球</span>
+                  <span style="margin-right: .1rem;">大小</span>
+                </div>
+              </div>
+              <div class="row allAlignment center listbox">
+                <div class="column average name-box">
+                  <div>{{itemList.home_team}}</div>
+                  <div>{{itemList.guest_team}}</div>
+                </div>
+                <div class="Match-list-box row item-center average">
+                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
+                    <div
+                      @click.stop="isclick(index,i)"
+                      class="column center"
+                      :class="items.istrue == i ?'active':''"
+                    >
+                      <span style="color:#FD8F26">{{odds.condition}}</span>
+                      <span>{{odds.odds}}</span>
+                    </div>
+                  </div>
+                </div>
+      
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 1x2 -->
+    <div v-if="!isShow && !ishow && rShow">
+      <div v-for="(item,index) in letBallData" :key="item.id" @click="betting()">
+        <div class="row allAlignment haderBox center">
+          <span>{{item.leagueName}}</span>
+          <div class="Match-title-num">
+            <span>{{item.matchNum}}</span>
+          </div>
+        </div>
+        <div v-for="(itemList,$index) in item.matchData" :key="itemList.id"   @click="matchInfo(itemList.match_id)">
+ 
+            <div class="box">
+              <div class="row allAlignment item-center top-box">
+                <span>
+                  <i>{{itemList.match_date}}</i>
+                  <b style="color:#F76649;font-weight: normal;">{{itemList.match_time}}</b>
+                </span>
+                <span class="top-num">{{itemList.tag}}</span>
+              </div>
+            </div>
+            <div class="box-bottom">
+              <div class="box row item-center main-box">
+                <span v-if="itemList.home_score" class="num-box" style="color:#eb921e">{{itemList.home_score}}</span>
+                &nbsp;&nbsp;{{itemList.home_team}}
+              </div>
+              <div class="box row item-center main-box">
+                <span v-if="itemList.guest_score? itemList.guest_score:'0'" class="num-box" style="color:#eb921e">{{itemList.guest_score}}</span>
+                &nbsp;&nbsp;{{itemList.guest_team}}
+              </div>
+              <div class="footBox">
+                <div
+                  class="box row allAlignment bottom-box center"
+                  v-for="(odds,idx) in itemList.oddsData[1]"
+                  :key="odds.id"
+                >
+                  <div
+                    class="item-center bottom-num"
+                    :class="item.istrueA==true?'active':''"
+                    @click.stop="isClick(idx,1)"
+                  >
+                    <p style="color:#eb921e">{{odds.condition}}</p>
+                    <p>{{odds.odds}}</p>
+                  </div>
+                </div>
+       
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 独赢盘 -->
+      <div class="match" v-if="!isShow && ishow && rShow">
+        <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
+        <!-- <div v-for="items in list[index]" :key="items.id"> -->
+        <div class="row allAlignment letBallBox center">
+          <span>{{items.leagueName}}</span>
+          <div class="row Match-title-num">
+            <span>{{items.matchNum}}</span>
+          </div>
+        </div>
+        <div class="Match-box">
+          <div v-for="(itemList,index) in items.matchData" :key="itemList.id" class="Match-box"   @click="matchInfo(itemList.match_id)">
+        
+              <div class="row allAlignment Match-box-top">
+                <div class="Match-box-top-left">
+                  <span>{{itemList.match_date}}</span>
+                  <span class="texttop">{{itemList.match_time}}</span>
+                </div>
+                <div class="Match-box-top-right row">
+                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
+                  <!-- <span style="margin-right: .1rem;">让球</span> -->
+                  <span style="margin-right: .1rem;">独赢盘</span>
+                </div>
+              </div>
+              <div class="row allAlignment center listbox">
+                <div class="column average name-box">
+                  <div>{{itemList.home_team}}</div>
+                  <div>{{itemList.guest_team}}</div>
+                </div>
+                <div class="Match-list-box row item-center average">
+                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
+                    <div
+                      @click.stop="isclick(index,i)"
+                      class="column center"
+                      :class="items.istrue==i?'active':''"
+                    >
+                      <span style="color:#FD8F26">{{odds.condition}}</span>
+                      <span>{{odds.odds}}</span>
+                    </div>
+                  </div>
+         
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 如过是网球则显示 -->
+        <div class="match" v-if="isShow && !rShow">
+      <div v-for="(items,index) in letBallData" :key="items.id" class="mg">
+        <!-- <div v-for="items in list[index]" :key="items.id"> -->
+        <div class="row allAlignment letBallBox center">
+          <span>{{items.leagueName}}</span>
+          <div class="row Match-title-num">
+            <span>{{items.matchNum}}</span>
+          </div>
+        </div>
+        <div class="Match-box">
+          <div v-for="(itemList,index) in items.matchData" :key="itemList.id" class="Match-box"   @click="matchInfo(itemList.match_id)">
+        
+              <div class="row allAlignment Match-box-top">
+                <div class="Match-box-top-left">
+                  <span>{{itemList.match_date}}</span>
+                  <span class="texttop">{{itemList.match_time}}</span>
+                </div>
+                <div class="Match-box-top-right row">
+                  <span style="margin-right: .1rem;" class="Match-box-top-num">{{itemList.tag}}</span>
+                  <span style="margin-right: .1rem;">独赢盘</span>
+                  <span style="margin-right: .1rem;">让盘</span>
+                </div>
+              </div>
+              <div class="row allAlignment center listbox">
+                <div class="column average name-box">
+                  <div>{{itemList.home_team}}</div>
+                  <div>{{itemList.guest_team}}</div>
+                </div>
+                <div class="Match-list-box row item-center average">
+                  <div v-for="(odds,i) in itemList.oddsData[0]" :key="odds.id" class="match-list">
+                    <div
+                      @click.stop="isclick(index,i)"
+                      class="column center"
+                      :class="items.istrue ? 'active':''"
+                    >
+                      <span style="color:#FD8F26">{{odds.condition}}</span>
+                      <span>{{odds.odds}}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+    <div class="BettingWindow" v-if="isWindow">
+      <BettingWindow />
+    </div>
+
+  </div>
+</template>
+<script>
+import Bus from "../assets/bus.js";
+import NotOpend from "@/components/StNotOpend";
+import BettingWindow from '@/components/StBettingWindow';
+export default {
+  props: ["gameCode", "name",'ishow'],
+  components:{NotOpend,BettingWindow},
+  data() {
+    return {
+      show: false, //暂时状态
+      isShow: true,
+      noData: true, //显示暂无数据
+      rShow:true,//是否为棒球与网球，是则不显示
+      info: "没有相关比赛信息",
+      status: false,
+      isWindow :false,//投注组件隐藏
+      isAjax:false,//开关
+      list:[],
+      letBallData: "" ,//让球大小和1X2数据
+    };
+  },
+  /**
+   * 函数方法
+   */
+  methods: {
+    matchInfo(id){
+      this.$router.push({path:'/StRollBallBettingPage',query:{gameCode: this.$store.getters.getBallId,number:1,home:true}});
+      this.$store.dispatch("MACTH_ID",id);
+    },
+    //打开联赛投注页面
+    goMatchInfo: function(leagueId, sessionId) {
+      //console.log(leagueId, sessionId);
+      this.$store.dispatch("GETSHOW", true);
+      Bus.$on("show", data => {
+        this.isShow = data;
+      });
+    },
+    getAjax: function(game_code,type_code) {
+      this.$store.dispatch('GETSHOW',true);
+      if(!game_code || !type_code) return false;
+      this.$http
+        .get(this.$ports.match.matchState, { 
+          game_code,
+          type_code
+        })
+        .then(res => {
+          this.isAjax = true
+          if(res.data.status == 1 && res.data.data.length >0  && res.data != null){
+            this.letBallData = res.data.data;
+          // console.log('  this.letBallData',  this.letBallData)
+           this.noData = false;
+          }else{
+            //  是否显示组件
+            this.noData = true;
+            //console.log('data',this.noData)
+            // 每次更新数据没有数据时则置空。
+             this.letBallData = [];
+            
+          }
+          // 状态值数据更改
+          this.$store.dispatch('GETSHOW',false);
+        });
+    },
+    isClick() {
+    
+            if(this.$store.getters.getIsBetting==true){
+           return false
+       }
+      
+        this.$store.dispatch('ISBETTING',true)
+      // this.$set(this.letBallData.matchData[1].oddsData[1][i], "istrue", (this.letBallData.list[i].istrue = num));
+    },
+    betting(){
+      this.isWindow = true;
+    },
+    // 点击事件确认选中
+    isclick(index, num) {
+        console.log(this.letBallData)
+       if(this.$store.getters.getIsBetting==true){
+           return false
+       }
+      
+        this.$store.dispatch('ISBETTING',true)
+    }
+  },
+  /**
+   * 计算属性
+   */
+  computed: {
+    getInfo: function() {
+      // 监听vuex状态值的改变
+      this.goMatchInfo();
+ 
+      return {game_code: this.$store.getters.getBallId,type_code:this.$store.getters.getActivity}
+    },
+     IsWindow(){
+      return  this.$store.getters.getIsBetting
+    }
+  },
+  watch: {
+    getInfo(obj) {
+         if(this.$store.getters.getActivity == "StSoon" || this.$store.getters.getActivity == "StRollBall" ){
+        if(this.isAjax ){
+        this.getAjax(obj.game_code,obj.type_code);
+        }
+      }
+      if(obj.game_code == 'wq'){
+          this.rShow = false;
+      }else{
+        this.rShow = true;
+      }
+    },
+      IsWindow(val){
+       this.isWindow = val;
+    }
+  },
+  mounted(){
+    this.getAjax(this.$store.getters.getBallId,this.$store.getters.getActivity);
+  }
+};
+</script>
+<style scoped>
+.yd-cell-box .yd-cell {
+  z-index: 99;
+  border-radius: 0.2rem;
+}
+.matchBox {
+  background: #f9f9f9;
+  padding: 0.27rem 0.34rem 0 0.32rem;
+}
+.match .tit {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.32rem;
+  margin-bottom: 0.3rem;
+}
+.match .list {
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0.6, 0.2, 1);
+}
+.match .list div {
+  background: #dcdcdc;
+  width: 100%;
+  height: 0.88rem;
+  padding: 0.26rem 0.56rem 0.3rem 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 0.08rem;
+  margin-bottom: 0.12rem;
+}
+.match .list span {
+  color: #333333;
+  font-size: 0.28rem;
+}
+.match .list .num {
+  width: 0.4rem;
+  height: 0.4rem;
+  display: inline-block;
+  line-height: 0.4rem;
+  text-align: center;
+  color: #f5f5f5;
+  border-radius: 50%;
+  font-size: 0.2rem;
+  background: #f76649;
+}
+.yd-accordion {
+  background: transparent;
+}
+.match .list div:nth-last-child(1) {
+  margin-bottom: 0.34rem;
+}
+div /deep/ .yd-accordion-head,
+div /deep/ .yd-accordion-head-content,
+div /deep/ .yd-accordion-title,
+div /deep/ .yd-accordion-title-full {
+  height: 0.3rem;
+}
+div /deep/ .yd-accordion-title {
+  min-height: 0;
+  font-size: 0.28rem;
+}
+div /deep/ .yd-accordion-head {
+  margin-bottom: 0.3rem;
+  border: none;
+}
+.list-box {
+  border: 2px solid #cecece;
+  border-radius: 0.2rem;
+}
+div /deep/ .yd-accordion-head:after {
+  height: 0px;
+}
+div /deep/ .yd-accordion-head-arrow:after {
+  border: none;
+  width: 0.4rem;
+  height: 0.4rem;
+  background: url("../assets/st-imges/xiangxia.png") no-repeat;
+  background-size: 0.4rem 0.4rem;
+}
+/* 1x2 */
+.top-box {
+  height: 0.44rem;
+  font-size: 0.24rem;
+  background: #fff;
+  border-bottom: 1px solid #e4e4e4;
+}
+.box-bottom {
+  /* height: 2.9rem;  */
+}
+.top-num {
+  display: inline-block;
+  width: 0.64rem;
+  height: 0.44rem;
+  line-height: 0.44rem;
+  color: #000000;
+  text-align: center;
+  background: #ebebeb;
+  font-size: 0.24rem;
+}
+.box {
+  padding: 0 0.32rem;
+  background: #fff;
+}
+.Match-title-num {
+  width: 0.46rem;
+  height: 0.46rem;
+  line-height: 0.46rem;
+  text-align: center;
+  background: #f76649;
+  font-size: 0.26rem;
+  border-radius: 50%;
+  color: #e4e4e4;
+}
+.haderBox {
+  padding: 0 0.32rem;
+  height: 0.88rem;
+  font-size: 0.32rem;
+  background: #f8f8f8;
+}
+.main-box {
+  height: 0.9rem;
+  background: #fff;
+  font-size: 0.28rem;
+}
+.bottom-box {
+  height: 1.1rem;
+  background: #fff;
+  font-size: 0.24rem;
+}
+.bottom-box div {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 2px solid #cecece;
+  border-radius: 0.1rem;
+  font-size: 0.24rem;
+}
+.bottom-num {
+  padding: 0.1rem;
+  text-align: center;
+}
+.active {
+  background: #f76649;
+  border: 2px solid #f76649 !important;
+}
+.active > p {
+  color: #e4e4e4 !important;
+}
+.num-box {
+  width: 0.66rem;
+  height: 0.34rem;
+  background: #f76649;
+  border-radius: 0.17rem;
+  color: #f5f5f5 !important;
+  line-height: 0.34rem;
+  text-align: center;
+}
+.footBox {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.footBox .box {
+  width: 33%;
+  text-align: center;
+}
+/* 让球&大小 */
+.letBallBox {
+  padding: 0 0.32rem;
+  height: 0.88rem;
+  font-size: 0.28rem;
+  background: #f4f4f4;
+}
+
+.mg {
+  margin-bottom: 0.1rem;
+}
+.Match-title-num {
+  width: 0.46rem;
+  height: 0.46rem;
+  align-items: center;
+  justify-content: center;
+  line-height: 0.46rem;
+  text-align: center;
+  background: #f76649;
+  font-size: 0.2rem;
+  border-radius: 50%;
+  color: #f5f5f5;
+}
+
+.Match-box-top-right > span {
+  width: 1.07rem;
+  text-align: center;
+}
+.listbox{
+  padding: 0 .32rem;
+}
+.name-box {
+  height: 1.76rem;
+  width: 3.8rem;
+}
+.Match-box-top {
+  height: 0.44rem;
+  padding: 0 0.32rem;
+  line-height: 0.44rem;
+  background: #DCDCDC;
+  font-size: 0.23rem;
+}
+.Match-box-top-num {
+  width:0.64rem !important;
+  
+  height: 0.44rem;
+  background: #ebebeb;
+  font-size: 0.24rem;
+}
+.texttop{
+  color: #f76649
+}
+.Match-box {
+  padding-top: .12rem;
+  background: #f8f8f8;
+}
+.Match-list-box {
+  width: 35%;
+  height: 1.76rem;
+  flex-wrap: wrap;
+}
+.Match-list-box .match-list div {
+  width: 1.07rem;
+  height: 0.8rem;
+  border: 2px solid #cecece;
+  border-radius: 0.1rem;
+  flex-wrap: wrap;
+}
+.active {
+  background: #e4e4e4;
+}
+/* 模态框样式 */
+.BettingWindow{
+  z-index: 10000;
+  position:fixed;
+  top:0;
+  width: 100%;
+}
+
+</style>

vue_sports/.svn/pristine/1e/1e452285fb75ad50fc96cd23b55d39ae5b01ab0e.svn-base

@@ -0,0 +1,561 @@
+<template>
+  <div>
+    <div>
+      <div class="Serch row item-center">
+        <div class="Soccer-game row item-center">
+          <div
+            style=" display:flex;align-items:center;justify-content:center;"
+            class="Soccer-game-title"
+            @click="isreturn()"
+          >
+            <img class="box-img" src="../assets/st-imges/returnbox.png">
+            {{this.title}}
+          </div>
+        </div>
+
+        <div class="Serch-box row item-center">
+          <div class="Serch-box-home row item-center">
+            <img class="Serch-box-img" src="../assets/st-imges/sousuo.png">
+            <input
+              v-model="SerchValue"
+              @keydown="serchchange(SerchValue)"
+              @input="searchTeam(SerchValue)"
+              class="Serch-box-input"
+              type="text"
+              placeholder="请输入球队名称"
+            >
+            <img
+              class="Serch-box-del"
+              @click="delinputvalue()"
+              v-if="Serchchange==true"
+              src="../assets/st-imges/del.png"
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div v-for="items in data" :key="items.id">
+        <div class="row allAlignment box center">
+          <span>{{items.name_chinese}}</span>
+          <div class="Match-title-num">
+            <span>{{items.count}}</span>
+          </div>
+        </div>
+
+        <div v-for=" (item,index) in items.match_info" :key="index" class="Match-box">
+          <div class="row allAlignment Match-box-top">
+            <div class="Match-box-top-left">
+              <span>{{item.match_date}}</span>
+              <span>{{item.match_time}}</span>
+            </div>
+            <div class="Match-box-top-right row">
+              <span style="margin-right: .15rem;" class="Match-box-top-num">{{item.tag}}</span>
+              <span style="margin-right: .15rem;">让球</span>
+              <span style="margin-right: .15rem;">大小</span>
+            </div>
+          </div>
+          <div
+            class="row allAlignment center"
+            @click="matchInfo(item.match_id);"
+            style="padding:0 .32rem"
+          >
+            <div class="column average name-box">
+              <div>{{item.home_team}}</div>
+              <div>{{item.guest_team}}</div>
+            </div>
+            <div class="Match-bottom-right">
+              <!-- 主队 -->
+              <div class="row">
+                <div
+                  class="Match-list-left"
+                  v-for="(items,indexs) in item.oddsData.homeOdds"
+                  :key="indexs"
+                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.home_team,items.odds,items.condition,'size_home')"
+                >
+                  <div :class="{ 'active' :items.isTrue == true}" class="column center">
+                    <span style="color:#FD8F26">{{items.condition}}</span>
+                    <span>{{items.odds}}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- 客队 -->
+              <div class="row">
+                <div
+                  class="Match-list-right row"
+                  v-for="(items,indexs) in item.oddsData.guestOdds"
+                  :key="indexs"
+                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.guest_team,items.odds,items.condition,'size_guest')"
+                >
+                  <div :class="{'active':items.isTrue==true }" class="column center">
+                    <span style="color:#FD8F26">
+                      <i style="color:#AAAAAA">{{items.condition}}</i>
+                    </span>
+                    <span>{{items.odds}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <BettingWindow v-show="isWindow"/>
+  </div>
+</template>
+<script>
+import BettingWindow from "@/components/StBettingWindow";
+import NotOpend from "@/components/StNotOpend";
+import Loading from "@/components/StLoading";
+export default {
+  name: "entryForm",
+  data() {
+    return {
+      SerchValue: "",
+      Serchchange: false,
+      title: " ", //标题
+      data: "",
+      game_code: this.$route.query.game_code, //球的类型别名
+      leagueID: this.$route.query.leagueID, //获取联赛id
+      isWindow: false,
+      thisNum: 10000,
+      info: "没有相关联赛信息",
+      noData: false, //没有数据为true
+      betting: 10000 //vuex里面玩法投注数据
+    };
+  },
+  components: {
+    BettingWindow,
+    NotOpend,
+    Loading
+  },
+  methods: {
+    // 返回上一页
+    isreturn() {
+      history.go(-1);
+    },
+    getmatchInfo(search) {
+      // console.log('奔溃接口页面');
+      this.$store.dispatch("GETSHOW", true);
+      this.$http
+        .get(this.$ports.match.participateDtl, {
+          game_code: this.game_code,
+          code: this.$route.query.code,
+          search
+        })
+        .then(res => {
+          this.codeShow = false;
+          this.$store.dispatch("GETSHOW", false);
+          if (res.data.status == 1) {
+            // let odds = {};
+            // let homeOdds = [],
+            //   guestOdds = [];
+            console.log("参赛表单", res.data.data);
+            for (var i = 0; i < res.data.data.length; i++) {
+              this.dataGroup(res.data.data[i].match_info);
+            }
+            this.data = res.data.data;
+          } else {
+          }
+        });
+    },
+    //是否显示删除按钮
+    serchchange(val) {
+      if (val.length >= 1) {
+        this.Serchchange = true;
+      } else {
+        this.Serchchange = false;
+      }
+    },
+    /**
+     * 查询球队
+     */
+    searchTeam(val) {
+      let getActivity = this.$store.getters.getActivity;
+      let matchDate = this.$route.query.matchDate;
+      if (val.length >= 1) {
+        this.Serchchange = true;
+      } else {
+        this.Serchchange = false;
+      }
+      this.getmatchInfo(val);
+    },
+    //清空输入
+    delinputvalue() {
+      this.SerchValue = "";
+      this.Serchchange = false;
+      this.getmatchInfo("");
+    },
+    // // 添加、删除vuex投注数据公共方法
+    AddDelete: function(id, home, guest, name, odds, condition) {
+      let isAdd = true;
+      let bettingInfo = {
+        id,
+        home_team: home,
+        guest_team: guest,
+        name,
+        odds,
+        condition,
+        ganame: "concede_size",
+        score: this.score,
+        bettingTime: ""
+      };
+      let matchList = this.$store.getters.getBetting;
+      if (this.thisNum != 10000) {
+        //     //删除vuex投注数据
+        // console.log('123',matchList[this.thisNum].data,this.thisNum)
+        matchList[this.thisNum].data.forEach((res, index) => {
+          if (res.id == id) {
+            matchList[this.thisNum].data.splice(index, 1);
+            this.$store.dispatch("BETTING", matchList);
+            isAdd = false;
+          }
+        });
+        //     //添加vuex投注数据
+        if (isAdd) {
+          // console.log('我需要的',matchList[this.thisNum])
+          matchList[this.thisNum].data.push(bettingInfo);
+          this.$store.dispatch("BETTING", matchList);
+          if (this.$store.getters.getIsBetting) return false;
+          this.$store.dispatch("ISBETTING", true);
+        }
+      } else {
+        //添加新的玩法赔率数据
+        let obj = {
+          title: "concede_size",
+          data: [bettingInfo]
+        };
+        //判断vuex有误其它玩法数据
+        if (matchList) {
+          matchList.push(obj);
+        } else {
+          this.$store.dispatch("BETTING", [obj]);
+        }
+      }
+      if (this.$store.getters.getIsBetting) return false;
+      this.$store.dispatch("ISBETTING", true);
+    },
+    // //修改当前页面样式公共方法
+    modifyStyle: function(id, type) {
+      // 改变页面样式，循环data
+      this.data.every(e => {
+        let ret = false;
+        if (type == "size_home") {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == id) {
+                this.$set(k, "isTrue", k.isTrue ? false : true);
+                ret = true;
+                return false;
+              }
+              return true;
+            });
+          });
+        } else if (type == "size_guest") {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == id) {
+                this.$set(k, "isTrue", k.isTrue ? false : true);
+                ret = true;
+                return false;
+              }
+              return true;
+            });
+          });
+        }
+        if (ret) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    },
+    //修改投注样式
+    isBetting(id, home, guest, name, odds, condition, type) {
+      if (this.data) {
+        // 处理vuex 数据
+        this.AddDelete(id, home, guest, name, odds, condition);
+        // 处理当前页面样式
+        this.modifyStyle(id, type);
+      }
+    },
+    //跳转到赛事详情
+    matchInfo: function(id) {
+      this.$router.push({
+        path: "/StRollBallBettingPage",
+        query: { gameCode: this.game_code, home: 1 }
+      });
+      this.$store.dispatch("MACTH_ID", id);
+    },
+    /**
+     * 赛事赔率玩法数据组合方法
+     */
+    dataGroup: function(data) {
+      // console.log(this.data)
+      let homeOdds = [],
+        guestOdds = [];
+      let A, B, C, D;
+      data.forEach((column, index) => {
+        if (column.oddsData == null || column.oddsData.length == 0) {
+          column.oddsData = {
+            homeOdds: [{ status: -1 }, { status: -1 }],
+            guestOdds: [{ status: -1 }, { status: -1 }]
+          };
+        } else {
+          // console.log('123', column)
+          column.oddsData.forEach(val => {
+            if (this.betting != 10000) {
+              this.betting.forEach(e => {
+                if (val.id == e.id) {
+                  val.isTrue = true;
+                  //this.$set(val,'isTrue',true);
+                }
+              });
+            }
+            if (val.odds_code == "concede_home") {
+              A = val;
+            } else if (val.odds_code == "size_home") {
+              B = val;
+            } else if (val.odds_code == "concede_guest") {
+              C = val;
+            } else if (val.odds_code == "size_guest") {
+              D = val;
+            }
+          });
+          column.oddsData.homeOdds = [];
+          column.oddsData.homeOdds.push(A);
+          column.oddsData.homeOdds.push(B);
+          column.oddsData.guestOdds = [];
+          column.oddsData.guestOdds.push(C);
+          column.oddsData.guestOdds.push(D);
+        }
+      });
+      this.data = data;
+      // console.log('data',this.data)
+    }
+  },
+  /**
+   * 计算属性
+   */
+  computed: {
+    getBetting() {
+      return this.$store.getters.getBetting;
+    },
+    //获取投注框删除的投注信息
+    getDeleteType() {
+      return this.$store.getters.getDeleteType;
+    },
+    getIsBetting() {
+      return this.$store.getters.getIsBetting;
+    }
+  },
+  /**
+   * 监听器
+   */
+  watch: {
+    getIsBetting(val) {
+      this.isWindow = val;
+    },
+    // 监听删除投注
+    getDeleteType(val) {
+      let flag = true;
+      this.data.forEach(e => {
+        if (val == "all") {
+          e.match_info.forEach(data => {
+            data.oddsData.forEach((k, i) => {
+              this.$set(k, "isTrue", false);
+            });
+          });
+        } else {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == val) {
+                this.$set(k, "isTrue", false);
+                flag = true;
+                return false;
+              }
+              return true;
+            });
+          });
+        }
+      });
+    },
+    //获取已投注信息
+    getBetting(val) {
+      //获取vuex玩法已投注相对应的数据
+      val.forEach((e, index) => {
+        if ("concede_size" == e.title) {
+          this.thisNum = index;
+          this.betting = e.data;
+        }
+      });
+    }
+  },
+  mounted() {
+    // 是否展示投注框
+    if (this.$store.getters.getIsBetting) {
+      this.isWindow = true;
+    }
+    //获取vuex玩法已投注相对应的数据
+    let getBetting = this.$store.getters.getBetting;
+    if (getBetting) {
+      getBetting.forEach(e => {
+        if ("concede_size" == e.title) {
+          this.betting = e.data;
+        }
+      });
+    }
+    console.log("data", this.data);
+    /*-----------------------*/
+    this.getmatchInfo("");
+  }
+};
+</script>
+<style scoped>
+.Serch {
+  height: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #363636;
+  color: #fd8f26;
+  font-family: "PingFang-SC-Regular";
+  padding: 0 0.32rem;
+}
+.lock {
+  background: #f4f4f4;
+}
+.Serch-box-input {
+  width: 2rem;
+  border: none;
+  position: absolute;
+  left: 0.5rem;
+  top: 0.06rem;
+}
+/* .BettingWindow{
+  z-index: 10000;
+  position:fixed;
+  top:0;
+  width: 100%;
+} */
+
+.Serch-box-img {
+  width: 0.3rem;
+  height: 0.3rem;
+  position: absolute;
+  left: 0.1rem;
+  top: 0.06rem;
+}
+.Serch-box-del {
+  width: 0.2rem;
+  height: 0.2rem;
+  position: absolute;
+  right: 0.2rem;
+}
+.Serch-box-home {
+  height: 0.44rem;
+  width: 4.73rem;
+  background: #e4e4e4;
+  border-radius: 0.2rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-left: 0.1rem;
+  padding-right: 0.1rem;
+  position: relative;
+}
+.box-img {
+  width: 0.37rem;
+  height: 0.3rem;
+  margin-right: 0.18rem;
+}
+.Soccer-game-title {
+  display: flex;
+  color: #f76649;
+  align-items: center;
+  width: 1.3rem;
+  font-size: 0.3rem;
+}
+.Soccer-game-box {
+  display: flex;
+  left: -0.3rem;
+  top: 0.2rem;
+  background: #fff;
+  background: #626262;
+  color: #a6a6a6;
+  height: 0.7rem;
+  align-items: center;
+}
+.Soccer-game-src {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+.box {
+  padding: 0 0.32rem;
+  color: #e1e1df;
+  height: 0.88rem;
+  font-size: 0.32rem;
+  background: linear-gradient(to bottom, #999999, #6a6a6b);
+}
+.Match-title-num {
+  width: 0.46rem;
+  height: 0.46rem;
+  line-height: 0.46rem;
+  text-align: center;
+  background: #f76649;
+  font-size: 0.26rem;
+  border-radius: 50%;
+  color: #f5f5f5;
+}
+
+.Match-box-top-right > span {
+  width: 1.07rem;
+  text-align: center;
+}
+.Match-box {
+  height: 2.45rem;
+}
+.name-box {
+  height: 1.76rem;
+}
+.Match-box-top {
+  height: 0.45rem;
+  line-height: 0.45rem;
+  background: #dcdcdc;
+  font-size: 0.23rem;
+  padding: 0 0.32rem;
+}
+.Match-box-top-num {
+  width: 0.64rem !important;
+  height: 0.45rem;
+  background: #ebebeb;
+  font-size: 0.24rem;
+}
+.Match-box {
+  background: #f8f8f8;
+}
+.Match-bottom-right {
+  height: 2rem;
+  padding: 0.1rem 0.1rem 0 0.14rem;
+}
+.Match-list-left div {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 0.1rem;
+  padding: 0.1rem;
+  margin: 0.06rem 0.08rem;
+}
+.Match-list-right div {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 0.1rem;
+  margin: 0.06rem 0.08rem;
+}
+.active {
+  background: #f76649;
+  border: none;
+  color: #e1e1df !important;
+}
+</style>

vue_sports/.svn/pristine/23/23ac19e6cd963c14589a77c1c8c3e5dbf3de8494.svn-base

@@ -0,0 +1,482 @@
+<template>
+  <div class="head" :class="newIsShrink ?'hiddenbox':'bgcolor'">
+    <div class="baffleBox allBox" v-show="!newIsShrink">
+      <div class="box">
+        <div class="row allAlignment center">
+          <span style="color:#f8f8f8;font-size:0.24rem;">余额：0</span>
+          <span style="font-size:0.28rem; color:#333333;font-weight:bold">投注单</span>
+          <span style="color:#33333;font-size:0.24rem;" @click="shrink()">
+            <img style="width:.25rem;height:.25rem" :src="img" alt>
+          </span>
+        </div>
+      </div>
+
+      <!-- 数据列表 -->
+      <div class="titleBox" v-for="(item,index) in dataList" :key="index" @click="activekey(index)">
+        <div class="tilteMatch">
+          <div class="row item-center allAlignment" style="height:.5rem;padding:0 .32rem">
+            <span>{{item.ganame}}</span>
+            <span class="cancel" @click.stop="delarr(item.ganame,item.id)">
+              <img style="width:.25rem;height:.25rem" :src="img" alt>
+            </span>
+          </div>
+          <div class="tilteMatchDiv" style="height:1rem;padding:0 .32rem">
+            <div class="row item-center" style="height:50%">
+              <span>{{item.name}}</span>&emsp;
+              <span>{{item.condition}}</span>@
+              <span>{{item.odds}}</span>
+            </div>
+            <div class="row item-center" style="height:50%;font-size:.15rem">
+              <span>{{item.home_team}}</span>
+              <span style="color:#F76649">vs</span>
+              <span>{{item.guest_team}}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="bettingInput row item-center average"  >
+          <div class="inputBox row allAlignment" >
+            <input class="input_text " type  @click.stop="go()" v-model="bettingNumber[index]" placeholder="投注额" @click="activekey(index)">
+            <span style="padding:0 0.22rem;" @click.stop="ClearData(index)">
+              <img style="width:.2rem;height:.2rem" :src="img" alt>
+            </span>
+          </div>
+          <div class>
+            <span v-if="bettingNumber[index]">{{(bettingNumber[index]*item.odds%100*100).toFixed(2)}}</span>
+            <span v-else>可赢额</span>
+          </div>
+        </div>
+
+        <div class="bottonBox" v-show="clickIndex==index">
+          <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
+            <div @click="additionFun(100,index) ">+100</div>
+            <div @click="additionFun(1000,index) ">+1000</div>
+            <div @click="additionFun(10000,index) ">+10000</div>
+          </div>
+          <div style="margin-top:0.42rem;margin-bottom:0.42rem">
+            <div class="row allAlignment center">
+              <div v-for=" n in 6" @click="updateNumber(n,index)">
+                <button>{{n}}</button>
+              </div>
+            </div>
+
+            <div class="row allAlignment center" style="margin-top:0.17rem;">
+              <div v-for=" n in 3" @click="updateNumber(n+6,index)">
+                <button>{{n+6}}</button>
+              </div>
+              <button @click="updateNumber('0',index)">0</button>
+              <button @click="updateNumber('00',index)">00</button>
+              <button @click="delNumder(index)" style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
+            </div>
+          </div>
+        </div>
+      </div>
+     
+
+     <!-- 单注 -->
+      <div class="showNumber" @click.stop="activekey('all')">
+      <div v-if="dataList.length>1">
+        <span v-if="dataList" style="font-size:.3rem">单注</span>
+        <div class="bettingInput row item-center average">
+          <div class="inputBox row allAlignment">
+            <input type @click="go()" v-model="arrNumber" placeholder="投注额">
+            <span @click.stop="ClearData('all')">x</span>
+          </div>
+          <div class>
+            <span v-if="arrNumber">{{arrNumber*3}}</span>
+            <span v-else>可赢额</span>
+          </div>
+        </div>
+        <div class="bottonBox" v-if="clickIndex=='all'">
+          <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
+            <div @click="additionFun(100,'all') ">+100</div>
+            <div @click="additionFun(1000,'all')">+1000</div>
+            <div @click="additionFun(10000,'all')">+10000</div>
+          </div>
+          <div style="margin-top:0.42rem;margin-bottom:0.42rem">
+            <div class="row allAlignment center">
+              <div v-for=" n in 6" @click="updateNumber(n,'all')">
+                <button>{{n}}</button>
+              </div>
+            </div>
+
+            <div class="row allAlignment center" style="margin-top:0.17rem;">
+              <div v-for=" n in 3" @click="updateNumber(n+6,'all')">
+                <button>{{n+6}}</button>
+              </div>
+              <button @click="updateNumber('0',index)">0</button>
+              <button @click="updateNumber('00',index)">00</button>
+              <button @click="delNumder('all')"style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
+            </div>
+          </div>
+        </div>
+        <div class="row allAlignment" style="padding:.1rem .2rem">
+          <span class="showNumberSpan">所有投注:</span>
+          <span style="font-size:0.24rem">0.00</span>
+        </div>
+        <div class="row allAlignment" style="padding:0 .2rem">
+          <span class="showNumberSpan">可赢金额:</span>
+          <span style="font-size:0.24rem;color:#F76649;">0.00</span>
+        </div>
+      </div>
+
+
+        <!-- <span>红色选项不可以结合进行过关投注<span> -->
+        <div class="btn" style="background:#F76649;">
+          <span>投注</span>
+        </div>
+        <div class="btn" style="background:#A1A1A1;">
+          <span>添加更多的选择</span>
+        </div>
+        <div class="btn" style="background:#333;margin-bottom:.5rem;" @click.stop="alldel()">
+          <span>全删除</span>
+        </div>
+      </div>
+    </div>
+    <div class="shrink" :style="newIsShrink?'':'display:none'" @click="show()">
+      投注单--选项
+      <span class="num">{{dataList?dataList.length:'0'}}</span>
+    </div>
+  </div>
+</template>
+<script>
+import "../css/index.css";
+export default {
+  data() {
+    return {
+      img: require("../assets/st-imges/del.png"),
+      bettingNumber:[],
+      //余额
+      balance: "",
+      // 全部可赢金额
+      allmoney: "",
+      // 全部投注金额
+      allbetmoney: "",
+      // 参与投注的项目数目
+      bettingquantity: "",
+      // 投注信息
+      betting: "",
+      dataList:[],
+      arr: [],
+      // 是否缩小
+      isshrink: false,
+      //小键盘显示位
+      clickIndex:0,
+      money:0,//可赢金额
+      arrNumber:'',//单注数量
+    };
+  },
+  methods: {
+    
+    /*---------------------------------- */
+    //阻止input框获取焦点
+    go: function() {
+      document.activeElement.blur();
+    },
+
+    /*---------------------------------- */
+    //小键盘数字字符串拼接
+    updateNumber: function(val,index) {
+      // console.log(index);
+      let temporaryData = '';
+      this.dataList.forEach((e,i)=>{
+        if(index !='all'){
+          if(index==i){
+            temporaryData = this.bettingNumber[index]*1 ? this.bettingNumber[index]+(val+''): val+'';
+            this.bettingNumber.splice(index,1,temporaryData);
+          }
+        }else{  
+          temporaryData = this.bettingNumber[index]*1 ? this.bettingNumber[index]+(val+''): val+'';
+          this.bettingNumber.splice(index,1,temporaryData);
+          this.arrNumber = temporaryData
+        }
+      })
+    },
+
+    /*---------------------------------------------*/
+    //投注加法
+    additionFun:function(val,index){
+      let data = '';
+      this.dataList.forEach((e,i)=>{
+        if(index !='all'){
+          if(index==i){
+            data = this.bettingNumber[index]*1 ? (this.bettingNumber[index]*1+val)+'': val+'';
+            this.bettingNumber.splice(index,1,data);
+          }
+        }else{
+          console.log(index);
+          data = this.bettingNumber[i]*1 ? (this.bettingNumber[i]*1+val)+'': val+'';
+          this.bettingNumber.splice(i,1,data);
+          this.arrNumber = data
+        }
+      })
+    },
+
+    /*---------------------------------- */
+    //删除投注数据的一位数
+    delNumder: function(index) {
+      let Str = this.bettingNumber;
+      let strVal='';
+      Str.forEach((e,i)=>{
+        if(index !='all'){
+          if(i==index){
+            strVal  = e;
+            e= strVal.substring(0, strVal.length - 1);
+            this.bettingNumber.splice(index,1,e);
+          }
+        }else{
+          strVal= e.substring(0, e.length - 1);
+          this.bettingNumber.splice(i,1,strVal);
+          this.arrNumber = strVal ;
+        }
+      })
+    },
+
+    /*---------------------------------- */
+    //清空input框数据
+    ClearData: function(index) {
+      this.bettingNumber.forEach((e,i)=>{
+        if(index !='all'){
+          if(i==index){
+            this.bettingNumber.splice(index,1,'');
+          }
+        }else{
+          this.bettingNumber.splice(i,1,'');
+          this.arrNumber = '';
+        }
+      })
+    },
+
+    /*---------------------------------- */
+    // 删除所有投注
+    alldel() {
+    let betting = this.$store.getters.getBetting;
+      betting.forEach(e=>{
+        e.data=[]
+      })
+      this.bettingNumber = [];
+      this.$store.dispatch("BETTING", []);
+      this.$store.dispatch("BETTING", betting);
+      this.$public.setCache("box_size", 2);
+      this.$store.dispatch("ISBETTING", false);
+      this.$store.dispatch('DEL_TYPE','all');
+    },
+
+    /*---------------------------------- */
+    // 激活投注框的小键盘
+    activekey(index) {
+      this.clickIndex = index;   
+    },
+
+    /*---------------------------------- */
+    // 删除指定的投注
+    delarr(name, numid) {
+      let betting = this.$store.getters.getBetting;
+      betting.forEach(res => {
+        if (res.title == name) {
+          res.data.forEach((e, index) => {
+            if (e.id == numid) {
+              res.data.splice(index, 1);
+              //删除数据也要删除想对应的值
+              this.bettingNumber.splice(index,1)
+            }
+          });
+        }
+        this.$store.dispatch("BETTING", []);
+        this.$store.dispatch("BETTING", betting);
+      });
+       this.$store.dispatch('DEL_TYPE',numid)
+    },
+
+    /*---------------------------------- */
+    //投注窗口放大
+    shrink() {
+      this.isshrink = true;
+      this.$public.setCache("box_size", 1);
+    },
+
+    /*---------------------------------- */
+    //投注窗口缩小
+    show() {
+      this.isshrink = false;
+      this.$public.setCache("box_size", 2);
+    },
+  },
+  computed: {
+    //获取vuex投注数据
+    getBetting: function() {
+      let betting = this.$store.getters.getBetting;
+      let arrays = [];
+      if (betting) {
+        betting.forEach(e => {
+          e.data.forEach(res => {
+            this.bettingNumber.push('');
+            arrays.push(res);
+          });
+        });
+        this.dataList = arrays
+      // 查看是否还有数据确定是否要关闭窗口
+      }
+      if(this.dataList.length == 0){
+        this.$public.setCache("box_size", 2);
+        this.$store.dispatch("ISBETTING", false);
+      }
+    },
+
+    /*------------------------------*/
+    //获取投注框放大缩小状态
+
+    newIsShrink() {
+      return this.isshrink;
+    }
+  },
+  watch: {
+    Isshow(obj) {},
+    getBetting(val) {}
+  },
+  mounted() {
+    if (this.$public.getCache("box_size") == 1) {
+      this.isshrink = true;
+    }
+  }
+};
+</script>
+<style scoped>
+.num {
+  display: inline-block;
+  width: 0.46rem;
+  height: 0.46rem;
+  background: #dcdcdc;
+  border-radius: 50%;
+  line-height: 0.46rem;
+  text-align: center;
+  color: #f76649;
+}
+.bgcolor {
+  background: rgba(40, 40, 40, 0.75);
+  height: 55rem;
+}
+.hiddenbox {
+  height: 1rem;
+}
+.head {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 1000000;
+}
+.baffleBox {
+  position: fixed;
+  overflow-y: scroll;
+  top: 0;
+  left: 0.4rem;
+  width: 100%;
+  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  z-index: 29;
+  box-sizing: border-box;
+}
+.allBox {
+  margin-top: 1.04rem;
+  width: 90%;
+  height: 11.5rem;
+  overflow-y: auto;
+  background: #f8f8f8;
+  border-radius: 0.1rem 0.1rem;
+}
+.box {
+  background: #f76649;
+  border-radius: 0.1rem 0.1rem 0 0;
+  height: 1rem;
+  line-height: 1rem;
+  padding: 0 0.32rem 0 0.22rem;
+}
+.bottonBox {
+  margin-top: 0.1rem;
+  padding: 0.22rem;
+  background: #ccc;
+}
+.titleBox {
+  padding: 0.21rem 0.07rem;
+}
+.bettingInput {
+  height: 0.9rem;
+  margin-top: 0.1rem;
+}
+.inputBox {
+  width: 4.31rem;
+  height: 0.8rem;
+  border: 1px solid #f76649;
+  border-radius: 0.1rem;
+  line-height: 0.8rem;
+  padding-left:0.22rem;
+}
+input {
+  border: 0;
+  width: 4rem;
+}
+.tilteMatch {
+  height: 1.52rem;
+  background: #ebebeb;
+}
+.tilteMatchDiv {
+  margin-left: 0.13rem;
+}
+.cancel {
+  padding: 0 0.25rem;
+}
+button {
+  width: 0.96rem;
+  height: 0.88rem;
+  border: 0;
+  background: #a1a1a1;
+  border-radius: 0.1rem;
+  color: #f8f8f8;
+}
+.bottonBox-num > div {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 1.5rem;
+  height: 0.8rem;
+  border-radius: 0.2rem;
+  color: #ebebeb;
+  background: #a1a1a1;
+  margin-left: 0.2rem;
+}
+.showNumber {
+  margin-top: 0.36rem;
+  border-top: 1px solid #ebebeb;
+  padding-top: 0.2rem;
+  padding: 0.21rem 0.2rem;
+}
+.btn {
+  width: 100%;
+  height: 0.94rem;
+  border-radius: 0.1rem;
+  line-height: 0.94rem;
+  color: #f8f8f8;
+  text-align: center;
+  margin-top: 0.2rem;
+}
+.showNumberSpan {
+  color: #363636;
+  font-size: 0.28rem;
+}
+.shrink {
+  height: 1rem;
+  width: 100%;
+  background: #f76649;
+  color: #dcdcdc;
+  position: fixed;
+  bottom: 0rem;
+  line-height: 1rem;
+  text-align: center;
+  font-size: 0.3rem;
+}
+</style>
+
+

vue_sports/.svn/pristine/9c/9c812a0b40922d40d57cc48f494691e38f80b431.svn-base

@@ -0,0 +1,844 @@
+<template>
+  <div>
+    <div class="Serch row item-center">
+      <div class="Soccer-game row item-center">
+        <div
+          style=" display:flex;align-items:center;justify-content:center;"
+          class="Soccer-game-title"
+          @click="isreturn()"
+        >
+          <img class="box-img" src="../assets/st-imges/returnbox.png">
+          {{this.title}}
+        </div>
+      </div>
+      <div class="Serch-box row item-center" v-if="!championShow">
+        <div class="Serch-box-home row item-center">
+          <img class="Serch-box-img" src="../assets/st-imges/sousuo.png">
+          <input
+            v-model="SerchValue"
+            @keydown="serchchange(SerchValue)"
+            @change="serchchange(SerchValue)"
+            @input="searchTeam(SerchValue)"
+            class="Serch-box-input"
+            type="text"
+            placeholder="请输入球队名称"
+          >
+          <img
+            class="Serch-box-del"
+            @click="delinputvalue()"
+            v-if="Serchchange==true"
+            src="../assets/st-imges/del.png"
+          >
+        </div>
+      </div>
+    </div>
+    <div v-if="isShow && !championShow" class="row allAlignment box center">
+      <span>{{data.leagueName}}</span>
+      <div class="Match-title-num">
+        <span>{{data.matchNum}}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="!championShow"
+      v-for=" (item,index) in data.matchData"
+      :key="index"
+      class="Match-box"
+    >
+      <div class="row allAlignment Match-box-top">
+        <div class="Match-box-top-left">
+          <span>{{item.match_date}}</span>
+          <span>{{item.match_time}}</span>
+        </div>
+        <div class="Match-box-top-right row">
+          <span style="margin-right: .15rem;" class="Match-box-top-num">{{item.tag}}</span>
+          <span style="margin-right: .15rem;">让球</span>
+          <span style="margin-right: .15rem;">大小</span>
+        </div>
+      </div>
+      <div
+        class="row allAlignment center"
+        @click="matchInfo(item.match_id);"
+        style="padding:0 .32rem"
+      >
+        <div class="column average name-box">
+          <div>{{item.home_team}}</div>
+          <div>{{item.guest_team}}</div>
+        </div>
+        <div class="Match-bottom-right">
+          <!-- 主队 -->
+          <div class="row">
+            <div
+              class="Match-list-left"
+              v-for="(items,indexs) in item.oddsData.homeOdds"
+              :key="indexs"
+              @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.home_team,items.odds,items.condition,'homeOdds')"
+            >
+              <div :class="{ 'active' : items.isTrue == true}" class="column center">
+                <span style="color:#FD8F26">{{items.condition}}</span>
+                <span>{{items.odds}}</span>
+              </div>
+            </div>
+          </div>
+          <!-- 客队 -->
+          <div class="row">
+            <div
+              class="Match-list-right row"
+              v-for="(items,indexs) in item.oddsData.guestOdds"
+              :key="indexs"
+              @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.guest_team,items.odds,items.condition,'guestOdds')"
+            >
+              <div :class="{'active':items.isTrue==true}" class="column center">
+                <span>
+                  <i style="color:#FD8F26">{{items.condition}}</i>
+                </span>
+                <span>{{items.odds}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 冠军组件 -->
+   <div class="champion" v-if="championShow">
+      <div class="title">
+        <span>{{this.ChampionData.title}}</span>
+        <div class="time">
+          <span>2019年5月29日</span>
+          <span>15:00</span>
+        </div>
+      </div>
+      <div  v-for="(item,index) in ChampionData.dataList" :key="item.id">
+        <div class="chmpTit">{{item.name}}</div>
+      <div  v-for="items in ChampionData.dataList[index].data" :key="items.id">  
+        <div class="list">
+          <span class="chmName">{{items.team}}</span>
+          <span class="num">{{items.odds}}</span>
+        </div>
+      </div>
+      </div>
+    </div>
+    <div class="BettingWindow" v-show="isWindow">
+      <BettingWindow/>
+    </div>
+    <div v-if="noData">
+      <NotOpend :title="this.info"/>
+    </div>
+    <!-- <div class = "lod">
+      <Loading></Loading>
+    </div>-->
+  </div>
+</template>
+
+<script>
+import BettingWindow from "@/components/StBettingWindow";
+import NotOpend from "@/components/StNotOpend";
+import Loading from "@/components/StLoading";
+export default {
+  name: "SerchBox",
+  data() {
+    return {
+      SerchValue: "",
+      Serchchange: false,
+      title: " ", //标题
+      data: "",
+      isShow: true,
+      isAddData: false, //判断是否添加
+      game_code: this.$route.query.game_code, //球的类型别名
+      leagueID: this.$route.query.leagueID, //获取联赛id
+      isWindow: false,
+      score:'0',//比分
+      codeShow: false, // 如果是参赛表传值过来，则显示另一部分
+      info: "没有相关联赛信息",
+      noData: false, //没有数据为true
+      betting: 10000, //vuex里面玩法投注数据
+      thisNum: 10000, //vuex里面
+      championShow: false, //冠军组件显示
+      ChampionData:'',//冠军数据
+    };
+  },
+  components: {
+    BettingWindow,
+    NotOpend,
+    Loading
+  },
+  /**
+   *函数方法
+   */
+  methods: {
+
+    /*--------------------------------------------------------------------------------*/
+    // 返回上一页
+    isreturn() {
+      history.go(-1);
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 是否显示删除按钮
+    serchchange(val) {
+      if (val.length >= 1) {
+        this.Serchchange = true;
+      } else {
+        this.Serchchange = false;
+      }
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 查询球队
+    searchTeam(val) {
+      let getActivity = this.$store.getters.getActivity;
+      let matchDate = this.$route.query.matchDate;
+      if (val.length >= 1) {
+        this.Serchchange = true;
+      } else {
+        this.Serchchange = false;
+      }
+      if (this.$route.query.navBall) {
+        this.getMatchData(
+          this.$ports.match.matchState,
+          this.game_code,
+          "",
+          this.leagueID,
+          getActivity,
+          "",
+          matchDate,
+          val
+        );
+      } else {
+        this.getMatchData(
+          this.$ports.match.matchDetails,
+          this.game_code,
+          this.leagueID,
+          "",
+          "",
+          matchDate,
+          val
+        );
+      }
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 清空输入
+    delinputvalue() {
+      this.SerchValue = "";
+      this.Serchchange = false;
+      let matchDate = this.$route.query.matchDate;
+      if (this.$route.query.navBall) {
+        this.getMatchData(
+          this.$ports.match.matchState,
+          this.game_code,
+          "",
+          this.leagueID,
+          this.$store.getters.getActivity,
+          "",
+          matchDate,
+          ""
+        );
+      } else {
+        this.getMatchData(
+          this.$ports.match.matchDetails,
+          this.game_code,
+          this.leagueID,
+          "",
+          "",
+          matchDate,
+          ""
+        );
+      }
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 添加、删除vuex投注数据公共方法
+    AddDelete:function(id,home,guest,name,odds,condition){
+      let isAdd = true;
+      let bettingInfo = {
+        id,
+        home_team:home,
+        guest_team:guest,
+        name,
+        odds,
+        condition,
+        ganame:'concede_size',
+        score:this.score,
+        bettingTime:'',
+
+      }
+      let matchList = this.$store.getters.getBetting;
+      if (this.thisNum != 10000) {
+        //删除vuex投注数据
+          matchList[this.thisNum].data.forEach((res, index) => {
+            if (res.id == id) {
+              matchList[this.thisNum].data.splice(index, 1);
+              this.$store.dispatch("BETTING",matchList)
+              isAdd = false;
+            }
+          });
+          //添加vuex投注数据
+          if (isAdd) {
+            matchList[this.thisNum].data.push(bettingInfo);
+            this.$store.dispatch("BETTING",[])
+            this.$store.dispatch("BETTING",matchList)
+            if(this.$store.getters.getIsBetting) return false
+            this.$store.dispatch("ISBETTING",true)
+          }
+      } else {
+        //添加新的玩法赔率数据
+        let obj = {
+            title:'concede_size',
+            data: [bettingInfo]
+          };
+          //判断vuex有误其它玩法数据
+        if(matchList){
+          matchList.push(obj);
+        }else{
+          this.$store.dispatch("BETTING",[obj])
+        }
+      }
+      console.log(this.$store.getters.getIsBetting);
+      if(this.$store.getters.getIsBetting) return false
+      this.$store.dispatch("ISBETTING",true)
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    //修改当前页面样式公共方法
+    modifyStyle:function(id,type){
+      console.log(id,type);
+      this.data.matchData.every(e => {
+        let ret = false;
+        if(type == "homeOdds"){
+          e.oddsData.homeOdds.every((res, index) => {
+            if (res.id == id) {
+                this.$set( e.oddsData.homeOdds[index],"isTrue",res.isTrue ? false : true);
+                ret = true;
+                return false;
+              }
+              return true;
+          });
+        }else if(type == "guestOdds"){
+            e.oddsData.guestOdds.every((res, index) => {
+              if (res.id == id) {
+                  this.$set( e.oddsData.guestOdds[index],"isTrue",res.isTrue ? false : true);
+                  ret = true;
+                  return false;
+                }
+                return true;
+            });
+        }
+        if (ret) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    
+    },
+    /*--------------------------------------------------------------------------------*/
+    // 修改投注样式
+    isBetting(id,home,guest,name,odds,condition,type) {
+      // console.log(id, type)
+      if (this.data) {
+        //处理vuex里面数据
+        this.AddDelete(id,home,guest,name,odds,condition);
+        //处理当前页面样式
+        this.modifyStyle(id, type);
+      }
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    //跳转到赛事详情
+    matchInfo: function(id) {
+      this.$router.push({
+        path: "/StRollBallBettingPage",
+        query: { gameCode: this.game_code, home: 1 }
+      });
+      this.$store.dispatch("MACTH_ID", id);
+    },
+
+    /*--------------------------------------------------------------------------------*/
+     // url : 地址, game_code 球类 leagueID lg_id 	联赛id   type_code 状态 matchDate match_date 赛事日期 search 搜索 str_type 选项类型
+    //获取联赛比赛列表
+    getMatchData: function(
+      url,
+      game_code,
+      leagueID,
+      lg_id,
+      type_code,
+      matchDate,
+      match_date,
+      search,
+      str_type,
+      // code
+    ) {
+      //“concede_home”: 主队全场让球,“concede_guest”: 客队全场让球,“size_home”: 主队大小,“size_guest”: 客队大小
+      this.$http
+        .get(url, {
+          game_code,
+          leagueID,
+          lg_id,
+          type_code,
+          matchDate,
+          match_date,
+          search,
+          str_type,
+          // code
+        })
+        .then(res => {
+          this.codeShow = true;
+          if (res.data.status == 1 && res.data.data != null) {
+            if((this.$store.getters.getActivity == "StStringScene" && this.$route.query.strType == 2) || (this.$store.getters.getActivity == "StChampion" && this.$route.query.strType != undefined)){
+              this.ChampionData = res.data.data;
+              console.log('data',this.ChampionData);
+              // 处理冠军数据
+              let champion = {},arrays=[],title='';
+              title = Object.keys(res.data.data);
+              champion.title = title[0];
+              let val = Object.values(res.data.data)
+              let name = Object.keys(val[0]);
+              let data = Object.values(val[0]);
+              data.forEach((e,index)=>{
+                  arrays.push({   
+                    name:name[index],
+                    data:e
+                  });
+              })
+              champion.dataList = arrays;
+              this.ChampionData = champion;
+              // champion.leaguename = championKey;
+              // if()
+              // console.log('0', championKey
+
+            }else if(this.$route.query.champion != undefined){
+                console.log('冠军截断')
+            }
+            if (res.data.data.matchData && res.data.data.matchData.length < 1) {
+             
+              this.isShow = false;
+              this.noData = true;
+            } else if(res.data.data.matchData &&  res.data.data.matchData.length > 0) {
+              this.isShow = true;
+              this.noData = false;
+              this.dataGroup(res.data.data);
+              //
+            }
+          }
+        });
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 赛事赔率玩法数据组合方法
+  
+    dataGroup: function(data) {
+      let homeOdds = [],
+        guestOdds = [];
+      let A, B, C, D;
+      data.matchData.forEach((column, index) => {
+        if (column.oddsData == null || column.oddsData.length == 0) {
+          column.oddsData = {
+            homeOdds: [{ status: -1 }, { status: -1 }],
+            guestOdds: [{ status: -1 }, { status: -1 }]
+          };
+        } else {
+          column.oddsData.forEach(val => {
+            if (this.betting != 10000) {
+              this.betting.forEach(e => {
+
+                if (val.id == e.id) {
+                  val.isTrue = true;
+                  //this.$set(val,'isTrue',true);
+                } 
+              });
+            }
+            if (val.odds_code == "concede_home") {
+              A = val;
+            } else if (val.odds_code == "size_home") {
+              B = val;
+            } else if (val.odds_code == "concede_guest") {
+              C = val;
+            } else if (val.odds_code == "size_guest") {
+              D = val;
+            }
+          });
+          column.oddsData = {};
+          column.oddsData.homeOdds = [];
+          column.oddsData.homeOdds.push(A);
+          column.oddsData.homeOdds.push(B);
+          column.oddsData.guestOdds = [];
+          column.oddsData.guestOdds.push(C);
+          column.oddsData.guestOdds.push(D);
+        }
+      });
+      this.data = data;
+      console.log(this.data);
+    }
+  },
+
+
+  /**
+   * 计算属性
+   */
+  computed: {
+    getBetting() {
+      return this.$store.getters.getBetting;
+    },
+    IsWindow() {
+      return this.$store.getters.getIsBetting;
+    },
+         //获取投注框删除的投注信息
+    getDeleteType(){
+      return this.$store.getters.getDeleteType;
+    },
+  },
+  /**
+   * 监听器
+   */
+  watch: {
+     getDeleteType(val){
+       let flag=true;
+      this.data.matchData.forEach(e =>{
+          if(val =='all'){
+                e.oddsData.guestOdds.forEach(data=>{
+                    this.$set(data, "isTrue", false);
+                })
+                e.oddsData.homeOdds.forEach(data=>{
+                    this.$set(data, "isTrue", false);
+                })
+          
+          }else{
+            let showData =true;
+                e.oddsData.guestOdds.forEach(data=>{
+                    if(data.id == val){
+                      this.$set(data, "isTrue", false);
+                      showData =false;
+                    }
+                })
+                if(showData){
+                  e.oddsData.homeOdds.forEach(data=>{
+                      if(data.id == val){
+                        this.$set(data, "isTrue", false);
+                      }
+                  })
+                }
+    
+          }
+      })
+    },
+    /*--------------------------------------------------------------------------------*/
+    //获取已投注信息
+    getBetting(val) {
+      //获取vuex玩法已投注相对应的数据
+      if (val) {
+        val.forEach((e, index) => {
+          if ("concede_size" == e.title) {
+            this.thisNum = index;
+            this.betting = e.data;
+          }
+        });
+      }
+    },
+
+    /*--------------------------------------------------------------------------------*/
+    // 监听投注框开关
+    IsWindow(val) {
+      this.isWindow = val;
+    },
+  },
+  /***
+   * 页面加载完成触发事件
+   */
+  mounted() {
+
+    //是否展示投注框
+    if(this.$store.getters.getIsBetting){
+      this.isWindow = true;
+    }
+    //获取vuex玩法已投注相对应的数据
+    let getBetting = this.$store.getters.getBetting;
+    if (getBetting) {
+      getBetting.forEach((e, index) => {
+        if ("concede_size" == e.title) {
+          this.thisNum = index;
+          this.betting = e.data;
+        }
+      });
+    }
+    let { game_code, leagueID, name } = this.$route.query;
+    this.title = name;
+    this.game_code = game_code;
+
+    if (
+       this.$route.query.navBall &&
+      this.$route.query.strType != undefined &&
+      this.$route.query.code != undefined
+    ) {
+      if (this.$store.getters.getActivity == "StChampion") {
+        this.championShow = true;
+      } else {
+        this.championShow = false;
+      }
+      this.getMatchData(
+        this.$ports.match.matchState,
+        game_code,
+        "",
+        leagueID,
+        this.$store.getters.getActivity,
+        "",
+        this.$route.query.matchDate
+      );
+    } else if (this.$route.query.strType != undefined) {
+      if (this.$store.getters.getActivity != "StChampion") {
+        if (this.$route.query.strType == 2) {
+          this.championShow = true;
+        } else {
+          this.championShow = false;
+        }
+        this.getMatchData(
+          this.$ports.match.matchState,
+          this.$store.getters.getBallId,
+          "",
+          leagueID,
+          this.$store.getters.getActivity,
+          "",
+          this.$route.query.matchDate,
+          "",
+          this.$route.query.strType
+        );
+      } else {
+        this.championShow = true;
+        this.getMatchData(
+          this.$ports.match.matchState,
+          game_code,
+          "",
+          leagueID,
+          this.$store.getters.getActivity,
+          "",
+          this.$route.query.matchDate,
+          ""
+        );
+      }
+    }
+    // 新增
+    else if(this.$route.query.champion != undefined){
+      console.log("123")
+    this.getMatchData(
+        this.$ports.match.matchState,
+        game_code,
+        // leagueID,
+        "",
+        "",
+        "StRollBall"
+      );
+    }
+    else {
+      this.getMatchData(
+        this.$ports.match.matchDetails,
+        game_code,
+        leagueID,
+        "",
+        "",
+        this.$route.query.matchDate
+      );
+    }
+
+    // if(this.$public.getCache("box_size")){
+    //   this.isWindow=true
+    // }
+  },
+ 
+};
+</script>
+
+<style scoped>
+.Serch {
+  height: 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #363636;
+  color: #fd8f26;
+  font-family: "PingFang-SC-Regular";
+  padding: 0 0.32rem;
+}
+.lock {
+  background: #f4f4f4;
+}
+.Serch-box-input {
+  width: 2rem;
+  border: none;
+  position: absolute;
+  left: 0.5rem;
+  top: 0.06rem;
+}
+/* .BettingWindow{
+  z-index: 10000;
+  position:fixed;
+  top:0;
+  width: 100%;
+} */
+
+.Serch-box-img {
+  width: 0.3rem;
+  height: 0.3rem;
+  position: absolute;
+  left: 0.1rem;
+  top: 0.06rem;
+}
+.Serch-box-del {
+  width: 0.2rem;
+  height: 0.2rem;
+  position: absolute;
+  right: 0.2rem;
+}
+.Serch-box-home {
+  height: 0.44rem;
+  width: 4.73rem;
+  background: #e4e4e4;
+  border-radius: 0.2rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding-left: 0.1rem;
+  padding-right: 0.1rem;
+  position: relative;
+}
+.box-img {
+  width: 0.37rem;
+  height: 0.3rem;
+  margin-right: 0.18rem;
+}
+.Soccer-game-title {
+  display: flex;
+  color: #f76649;
+  align-items: center;
+  width: 1.5rem;
+  height: .75rem;
+  font-size: 0.3rem;
+}
+.Soccer-game-box {
+  display: flex;
+  left: -0.3rem;
+  top: 0.2rem;
+  background: #fff;
+  background: #626262;
+  color: #a6a6a6;
+  height: 0.7rem;
+  align-items: center;
+}
+.Soccer-game-src {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+.box {
+  padding: 0 0.32rem;
+  color: #e1e1df;
+  height: 0.88rem;
+  font-size: 0.32rem;
+  background: linear-gradient(to bottom, #999999, #6a6a6b);
+}
+.Match-title-num {
+  width: 0.46rem;
+  height: 0.46rem;
+  line-height: 0.46rem;
+  text-align: center;
+  background: #f76649;
+  font-size: 0.26rem;
+  border-radius: 50%;
+  color: #f5f5f5;
+}
+
+.Match-box-top-right > span {
+  width: 1.07rem;
+  text-align: center;
+}
+.Match-box {
+  height: 2.45rem;
+}
+.name-box {
+  height: 1.76rem;
+}
+.Match-box-top {
+  height: 0.45rem;
+  line-height: 0.45rem;
+  background: #dcdcdc;
+  font-size: 0.23rem;
+  padding: 0 0.32rem;
+}
+.Match-box-top-num {
+  width: 0.64rem !important;
+  height: 0.45rem;
+  background: #ebebeb;
+  font-size: 0.24rem;
+}
+.Match-box {
+  background: #f8f8f8;
+}
+.Match-bottom-right {
+  height: 2rem;
+  padding: 0.1rem 0.1rem 0 0.14rem;
+}
+.Match-list-left div {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 0.1rem;
+  padding: 0.1rem;
+  margin: 0.06rem 0.08rem;
+}
+.Match-list-right div {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 0.1rem;
+  margin: 0.06rem 0.08rem;
+}
+.active {
+  background: #f76649;
+  border: none;
+  color: #e1e1df !important;
+}
+/* 冠军 */
+.champion .title {
+  height: 1rem;
+  padding: 0.15rem 0.2rem;
+  background-color: #626262;
+}
+.champion .title span {
+  font-size: 0.28rem;
+  font-weight: bold;
+  color: #e1e1df;
+}
+.champion .title .time span:nth-child(2) {
+  color: #f76649;
+}
+.chmpTit {
+  height: 0.7rem;
+  line-height: 0.7rem;
+  padding: 0 0.2rem;
+  background: #e4e4e4;
+}
+.champion .list {
+  height: 1rem;
+  line-height: 0.6rem;
+  padding: 0.1rem 0.2rem;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  border-bottom: 1px solid #aaa;
+  font-size: 0.28rem;
+  background: #ffffff;
+}
+.champion .list span:nth-child(1) {
+  margin-top: 0.1rem;
+}
+.champion .list .num {
+  width: 1.07rem;
+  height: 0.76rem;
+  border: 1px solid #e4e4e4;
+  border-radius: 0.1rem;
+  padding: 0.1rem;
+  text-align: center;
+}
+</style>

vue_sports/src/components/StBettingWindow.vue

@@ -11,26 +11,22 @@
         </div>
       </div>
 
-      <div
-        class="titleBox"
-        v-for="(item,index) in dataList"
-        :key="index"
-         @click="activekey(index)"
-      >
+      <!-- 数据列表 -->
+      <div class="titleBox" v-for="(item,index) in dataList" :key="index" @click="activekey(index)">
         <div class="tilteMatch">
           <div class="row item-center allAlignment" style="height:.5rem;padding:0 .32rem">
-            <span style="font-size:.24rem">{{item.ganame}}</span>
+            <span>{{item.ganame}}</span>
             <span class="cancel" @click.stop="delarr(item.ganame,item.id)">
               <img style="width:.25rem;height:.25rem" :src="img" alt>
             </span>
           </div>
-          <div class="tilteMatchDiv" style="height:1rem;padding:0 .32rem;font-size:.26rem">
+          <div class="tilteMatchDiv" style="height:1rem;padding:0 .32rem">
             <div class="row item-center" style="height:50%">
               <span>{{item.name}}</span>&emsp;
               <span>{{item.condition}}</span>@
               <span>{{item.odds}}</span>
             </div>
-            <div class="row item-center" style="height:50%;font-size:.24rem">
+            <div class="row item-center" style="height:50%;font-size:.15rem">
               <span>{{item.home_team}}</span>
               <span style="color:#F76649">vs</span>
               <span>{{item.guest_team}}</span>
@@ -38,81 +34,79 @@
           </div>
         </div>
 
-        <div class="bettingInput row item-center average" @click="activekey(index)" >
-          <div class="inputBox row allAlignment">
-            <input type @click.stop="go()" v-bind:value="bettingNumberMgs" placeholder="投注额" @click="activekey(index)">
-            <span @click="ClearData">
+        <div class="bettingInput row item-center average"  >
+          <div class="inputBox row allAlignment" >
+            <input class="input_text " type  @click.stop="go()" v-model="bettingNumber[index]" placeholder="投注额" @click="activekey(index)">
+            <span style="padding:0 0.22rem;" @click.stop="ClearData(index)">
               <img style="width:.2rem;height:.2rem" :src="img" alt>
             </span>
           </div>
           <div class>
-            <span>可赢额</span>
+            <span v-if="bettingNumber[index]">{{(bettingNumber[index]*item.odds%100*100).toFixed(2)}}</span>
+            <span v-else>可赢额</span>
           </div>
         </div>
 
-        <div class="bottonBox" v-show="item.isclick==true">
+        <div class="bottonBox" v-show="clickIndex==index">
           <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
-            <div>+100</div>
-            <div>+1000</div>
-            <div>+10000</div>
+            <div @click="additionFun(100,index) ">+100</div>
+            <div @click="additionFun(1000,index) ">+1000</div>
+            <div @click="additionFun(10000,index) ">+10000</div>
           </div>
           <div style="margin-top:0.42rem;margin-bottom:0.42rem">
             <div class="row allAlignment center">
-              <div v-for=" n in 6" @click="updateNumber(n)">
+              <div v-for=" n in 6" @click="updateNumber(n,index)">
                 <button>{{n}}</button>
               </div>
             </div>
 
             <div class="row allAlignment center" style="margin-top:0.17rem;">
-              <div v-for=" n in 3" @click="updateNumber(n+6)">
+              <div v-for=" n in 3" @click="updateNumber(n+6,index)">
                 <button>{{n+6}}</button>
               </div>
-              <button @click="updateNumber('0')">0</button>
-              <button @click="updateNumber('00')">00</button>
-              <button
-                @click="delNumder()"
-                style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;"
-              >x</button>
+              <button @click="updateNumber('0',index)">0</button>
+              <button @click="updateNumber('00',index)">00</button>
+              <button @click="delNumder(index)" style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
             </div>
           </div>
         </div>
       </div>
      
-      <div class="showNumber" @click.stop="ISclick()">
+
+     <!-- 单注 -->
+      <div class="showNumber" @click.stop="activekey('all')">
       <div v-if="dataList.length>1">
         <span v-if="dataList" style="font-size:.3rem">单注</span>
-        <div class="bettingInput row item-center average" v-if="dataList">
+        <div class="bettingInput row item-center average">
           <div class="inputBox row allAlignment">
-            <input type @click="go()" v-bind:value="bettingNumberMgs" placeholder="投注额">
-            <span @click="ClearData">x</span>
+            <input type @click="go()" v-model="arrNumber" placeholder="投注额">
+            <span @click.stop="ClearData('all')">x</span>
           </div>
           <div class>
-            <span>可赢额</span>
+            <span v-if="arrNumber">{{arrNumber*3}}</span>
+            <span v-else>可赢额</span>
           </div>
         </div>
-        <div class="bottonBox" v-if="Isclick">
+        <div class="bottonBox" v-if="clickIndex=='all'">
           <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
-            <div>+100</div>
-            <div>+1000</div>
-            <div>+10000</div>
+            <div @click="additionFun(100,'all') ">+100</div>
+            <div @click="additionFun(1000,'all')">+1000</div>
+            <div @click="additionFun(10000,'all')">+10000</div>
           </div>
           <div style="margin-top:0.42rem;margin-bottom:0.42rem">
             <div class="row allAlignment center">
-              <div v-for=" n in 6" @click="updateNumber(n)">
+              <div v-for=" n in 6" @click="updateNumber(n,'all')">
                 <button>{{n}}</button>
               </div>
             </div>
 
             <div class="row allAlignment center" style="margin-top:0.17rem;">
-              <div v-for=" n in 3" @click="updateNumber(n+6)">
+              <div v-for=" n in 3" @click="updateNumber(n+6,'all')">
                 <button>{{n+6}}</button>
               </div>
-              <button @click="updateNumber('0')">0</button>
-              <button @click="updateNumber('00')">00</button>
-              <button
-                @click="delNumder()"
-                style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;"
-              >x</button>
+              <button @click="updateNumber('0',index)">0</button>
+              <button @click="updateNumber('00',index)">00</button>
+              <button @click="delNumder('all')"style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
             </div>
           </div>
         </div>
@@ -125,6 +119,8 @@
           <span style="font-size:0.24rem;color:#F76649;">0.00</span>
         </div>
       </div>
+
+
         <!-- <span>红色选项不可以结合进行过关投注<span> -->
         <div class="btn" style="background:#F76649;">
           <span>投注</span>
@@ -149,7 +145,7 @@ export default {
   data() {
     return {
       img: require("../assets/st-imges/del.png"),
-      bettingNumber: "",
+      bettingNumber:[],
       //余额
       balance: "",
       // 全部可赢金额
@@ -160,53 +156,118 @@ export default {
       bettingquantity: "",
       // 投注信息
       betting: "",
-      dataList: [],
+      dataList:[],
       arr: [],
       // 是否缩小
       isshrink: false,
-      Isclick: false
+      //小键盘显示位
+      clickIndex:0,
+      money:0,//可赢金额
+      arrNumber:'',//单注数量
     };
   },
   methods: {
+    
     /*---------------------------------- */
+    //阻止input框获取焦点
     go: function() {
       document.activeElement.blur();
     },
+
     /*---------------------------------- */
-    updateNumber: function(val) {
-      this.bettingNumber += val;
+    //小键盘数字字符串拼接
+    updateNumber: function(val,index) {
+      // console.log(index);
+      let temporaryData = '';
+      this.dataList.forEach((e,i)=>{
+        if(index !='all'){
+          if(index==i){
+            temporaryData = this.bettingNumber[index]*1 ? this.bettingNumber[index]+(val+''): val+'';
+            this.bettingNumber.splice(index,1,temporaryData);
+          }
+        }else{  
+          temporaryData = this.bettingNumber[index]*1 ? this.bettingNumber[index]+(val+''): val+'';
+          this.bettingNumber.splice(index,1,temporaryData);
+          this.arrNumber = temporaryData
+        }
+      })
     },
+
+    /*---------------------------------------------*/
+    //投注加法
+    additionFun:function(val,index){
+      let data = '';
+      this.dataList.forEach((e,i)=>{
+        if(index !='all'){
+          if(index==i){
+            data = this.bettingNumber[index]*1 ? (this.bettingNumber[index]*1+val)+'': val+'';
+            this.bettingNumber.splice(index,1,data);
+          }
+        }else{
+          console.log(index);
+          data = this.bettingNumber[i]*1 ? (this.bettingNumber[i]*1+val)+'': val+'';
+          this.bettingNumber.splice(i,1,data);
+          this.arrNumber = data
+        }
+      })
+    },
+
     /*---------------------------------- */
-    delNumder: function() {
+    //删除投注数据的一位数
+    delNumder: function(index) {
       let Str = this.bettingNumber;
-      this.bettingNumber = Str.substring(0, Str.length - 1);
+      let strVal='';
+      Str.forEach((e,i)=>{
+        if(index !='all'){
+          if(i==index){
+            strVal  = e;
+            e= strVal.substring(0, strVal.length - 1);
+            this.bettingNumber.splice(index,1,e);
+          }
+        }else{
+          strVal= e.substring(0, e.length - 1);
+          this.bettingNumber.splice(i,1,strVal);
+          this.arrNumber = strVal ;
+        }
+      })
     },
+
     /*---------------------------------- */
-    ClearData: function() {
-      this.bettingNumber = "";
+    //清空input框数据
+    ClearData: function(index) {
+      this.bettingNumber.forEach((e,i)=>{
+        if(index !='all'){
+          if(i==index){
+            this.bettingNumber.splice(index,1,'');
+          }
+        }else{
+          this.bettingNumber.splice(i,1,'');
+          this.arrNumber = '';
+        }
+      })
     },
+
     /*---------------------------------- */
     // 删除所有投注
     alldel() {
-      let betting = this.$store.getters.getBetting;
+    let betting = this.$store.getters.getBetting;
       betting.forEach(e=>{
         e.data=[]
       })
+      this.bettingNumber = [];
       this.$store.dispatch("BETTING", []);
       this.$store.dispatch("BETTING", betting);
       this.$public.setCache("box_size", 2);
       this.$store.dispatch("ISBETTING", false);
       this.$store.dispatch('DEL_TYPE','all');
     },
+
     /*---------------------------------- */
     // 激活投注框的小键盘
     activekey(index) {
-         this.dataList.forEach((e,i)=>{
-              this.Isclick=false
-              this.$set(this.dataList[i],'isclick',false)  
-         })
-          this.$set(this.dataList[index],'isclick',true)      
+      this.clickIndex = index;   
     },
+
     /*---------------------------------- */
     // 删除指定的投注
     delarr(name, numid) {
@@ -216,6 +277,8 @@ export default {
           res.data.forEach((e, index) => {
             if (e.id == numid) {
               res.data.splice(index, 1);
+              //删除数据也要删除想对应的值
+              this.bettingNumber.splice(index,1)
             }
           });
         }
@@ -224,53 +287,40 @@ export default {
       });
        this.$store.dispatch('DEL_TYPE',numid)
     },
+
     /*---------------------------------- */
     //投注窗口放大
     shrink() {
       this.isshrink = true;
       this.$public.setCache("box_size", 1);
     },
+
     /*---------------------------------- */
     //投注窗口缩小
     show() {
       this.isshrink = false;
       this.$public.setCache("box_size", 2);
     },
-
-    /*---------------------------------- */
-    //激活单注的小键盘
-    ISclick() {
-        this.dataList.forEach((e,i)=>{
-              this.Isclick=false
-              this.$set(this.dataList[i],'isclick',false)  
-         })
-        this.Isclick = true;
-    
-    }
   },
   computed: {
     //获取vuex投注数据
     getBetting: function() {
       let betting = this.$store.getters.getBetting;
-      let array = [];
+      let arrays = [];
       if (betting) {
         betting.forEach(e => {
           e.data.forEach(res => {
-            array.push(res);
+            this.bettingNumber.push('');
+            arrays.push(res);
           });
         });
-        this.dataList = array;
-        // 查看是否还有数据确定是否要关闭窗口
+        this.dataList = arrays
+      // 查看是否还有数据确定是否要关闭窗口
       }
-      if(array==false){
-             this.$public.setCache("box_size", 2);
-              this.$store.dispatch("ISBETTING", false);
+      if(this.dataList.length == 0){
+        this.$public.setCache("box_size", 2);
+        this.$store.dispatch("ISBETTING", false);
       }
-      return this.dataList;
-    },
-    //获取投注金额
-    bettingNumberMgs: function() {
-      return this.bettingNumber;
     },
 
     /*------------------------------*/
@@ -362,10 +412,11 @@ export default {
   border: 1px solid #f76649;
   border-radius: 0.1rem;
   line-height: 0.8rem;
-  padding: 0 0.22rem;
+  padding-left:0.22rem;
 }
 input {
   border: 0;
+  width: 4rem;
 }
 .tilteMatch {
   height: 1.52rem;
@@ -389,11 +440,12 @@ button {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  width: 1.8rem;
+  width: 1.5rem;
   height: 0.8rem;
   border-radius: 0.2rem;
   color: #ebebeb;
   background: #a1a1a1;
+  margin-left: 0.2rem;
 }
 .showNumber {
   margin-top: 0.36rem;

vue_sports/src/components/StEntryForm.vue

@@ -71,7 +71,7 @@
                   class="Match-list-left"
                   v-for="(items,indexs) in item.oddsData.homeOdds"
                   :key="indexs"
-                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.home_team,items.odds,items.condition,'homeOdds')"
+                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.home_team,items.odds,items.condition,'size_home')"
                 >
                   <div :class="{ 'active' :items.isTrue == true}" class="column center">
                     <span style="color:#FD8F26">{{items.condition}}</span>
@@ -85,7 +85,7 @@
                   class="Match-list-right row"
                   v-for="(items,indexs) in item.oddsData.guestOdds"
                   :key="indexs"
-                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.guest_team,items.odds,items.condition,'guestOdds')"
+                  @click.stop="isBetting(items.id,item.home_team,item.guest_team,item.guest_team,items.odds,items.condition,'size_guest')"
                 >
                   <div :class="{'active':items.isTrue==true }" class="column center">
                     <span style="color:#FD8F26">
@@ -100,6 +100,7 @@
         </div>
       </div>
     </div>
+    <BettingWindow v-show="isWindow"/>
   </div>
 </template>
 <script>
@@ -117,6 +118,7 @@ export default {
       game_code: this.$route.query.game_code, //球的类型别名
       leagueID: this.$route.query.leagueID, //获取联赛id
       isWindow: false,
+      thisNum: 10000,
       info: "没有相关联赛信息",
       noData: false, //没有数据为true
       betting: 10000 //vuex里面玩法投注数据
@@ -149,9 +151,9 @@ export default {
             // let homeOdds = [],
             //   guestOdds = [];
             console.log("参赛表单", res.data.data);
-            // for (var i = 0; i < res.data.data.length; i++) {
-            //   this.dataGroup(res.data.data[i].match_info);
-            // }
+            for (var i = 0; i < res.data.data.length; i++) {
+              this.dataGroup(res.data.data[i].match_info);
+            }
             this.data = res.data.data;
           } else {
           }
@@ -184,77 +186,82 @@ export default {
       this.Serchchange = false;
       this.getmatchInfo("");
     },
-     // 添加、删除vuex投注数据公共方法
-    AddDelete:function(id,home,guest,name,odds,condition){
+    // // 添加、删除vuex投注数据公共方法
+    AddDelete: function(id, home, guest, name, odds, condition) {
       let isAdd = true;
       let bettingInfo = {
         id,
-        home_team:home,
-        guest_team:guest,
+        home_team: home,
+        guest_team: guest,
         name,
         odds,
         condition,
-        ganame:'concede_size',
-        score:this.score,
-        bettingTime:'',
-
-      }
+        ganame: "concede_size",
+        score: this.score,
+        bettingTime: ""
+      };
       let matchList = this.$store.getters.getBetting;
       if (this.thisNum != 10000) {
-        //删除vuex投注数据
-          matchList[this.thisNum].data.forEach((res, index) => {
-            if (res.id == id) {
-              matchList[this.thisNum].data.splice(index, 1);
-              this.$store.dispatch("BETTING",matchList)
-              isAdd = false;
-            }
-          });
-          //添加vuex投注数据
-          if (isAdd) {
-            matchList[this.thisNum].data.push(bettingInfo);
-            this.$store.dispatch("BETTING",matchList)
-            if(this.$store.getters.getIsBetting) return false
-            this.$store.dispatch("ISBETTING",true)
+        //     //删除vuex投注数据
+        // console.log('123',matchList[this.thisNum].data,this.thisNum)
+        matchList[this.thisNum].data.forEach((res, index) => {
+          if (res.id == id) {
+            matchList[this.thisNum].data.splice(index, 1);
+            this.$store.dispatch("BETTING", matchList);
+            isAdd = false;
           }
+        });
+        //     //添加vuex投注数据
+        if (isAdd) {
+          // console.log('我需要的',matchList[this.thisNum])
+          matchList[this.thisNum].data.push(bettingInfo);
+          this.$store.dispatch("BETTING", matchList);
+          if (this.$store.getters.getIsBetting) return false;
+          this.$store.dispatch("ISBETTING", true);
+        }
       } else {
         //添加新的玩法赔率数据
         let obj = {
-            title:'concede_size',
-            data: [bettingInfo]
-          };
-          //判断vuex有误其它玩法数据
-        if(matchList){
+          title: "concede_size",
+          data: [bettingInfo]
+        };
+        //判断vuex有误其它玩法数据
+        if (matchList) {
           matchList.push(obj);
-        }else{
-          this.$store.dispatch("BETTING",[obj])
+        } else {
+          this.$store.dispatch("BETTING", [obj]);
         }
       }
-      if(this.$store.getters.getIsBetting) return false
-      this.$store.dispatch("ISBETTING",true)
+      if (this.$store.getters.getIsBetting) return false;
+      this.$store.dispatch("ISBETTING", true);
     },
-       //修改当前页面样式公共方法
-    modifyStyle:function(id,type){
-      console.log(id,type);
-      this.data.matchData.every(e => {
+    // //修改当前页面样式公共方法
+    modifyStyle: function(id, type) {
+      // 改变页面样式，循环data
+      this.data.every(e => {
         let ret = false;
-        if(type == "homeOdds"){
-          e.oddsData.homeOdds.every((res, index) => {
-            if (res.id == id) {
-                this.$set( e.oddsData.homeOdds[index],"isTrue",res.isTrue ? false : true);
+        if (type == "size_home") {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == id) {
+                this.$set(k, "isTrue", k.isTrue ? false : true);
                 ret = true;
                 return false;
               }
               return true;
+            });
           });
-        }else if(type == "guestOdds"){
-            e.oddsData.guestOdds.every((res, index) => {
-              if (res.id == id) {
-                  this.$set( e.oddsData.guestOdds[index],"isTrue",res.isTrue ? false : true);
-                  ret = true;
-                  return false;
-                }
-                return true;
+        } else if (type == "size_guest") {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == id) {
+                this.$set(k, "isTrue", k.isTrue ? false : true);
+                ret = true;
+                return false;
+              }
+              return true;
             });
+          });
         }
         if (ret) {
           return false;
@@ -262,15 +269,14 @@ export default {
           return true;
         }
       });
-    
     },
     //修改投注样式
-    isBetting(id,home,guest,name,odds,condition,type) {
-      if(this.data){
+    isBetting(id, home, guest, name, odds, condition, type) {
+      if (this.data) {
         // 处理vuex 数据
-        this.AddDelete(id,home,guest,name,odds,condition);
+        this.AddDelete(id, home, guest, name, odds, condition);
         // 处理当前页面样式
-         this.modifyStyle(id, type);
+        this.modifyStyle(id, type);
       }
     },
     //跳转到赛事详情
@@ -285,25 +291,24 @@ export default {
      * 赛事赔率玩法数据组合方法
      */
     dataGroup: function(data) {
+      // console.log(this.data)
       let homeOdds = [],
         guestOdds = [];
       let A, B, C, D;
-      data.matchData.forEach((column, index) => {
+      data.forEach((column, index) => {
         if (column.oddsData == null || column.oddsData.length == 0) {
-          // column.oddsData = {
-          //   homeOdds: [{ status: -1 }, { status: -1 }],
-          //   guestOdds: [{ status: -1 }, { status: -1 }]
-          // };
+          column.oddsData = {
+            homeOdds: [{ status: -1 }, { status: -1 }],
+            guestOdds: [{ status: -1 }, { status: -1 }]
+          };
         } else {
+          // console.log('123', column)
           column.oddsData.forEach(val => {
             if (this.betting != 10000) {
               this.betting.forEach(e => {
-                if (val.id == e) {
+                if (val.id == e.id) {
                   val.isTrue = true;
                   //this.$set(val,'isTrue',true);
-                } else {
-                  //this.$set(val,'isTrue',false);
-                  //val.isTrue =false
                 }
               });
             }
@@ -326,6 +331,7 @@ export default {
         }
       });
       this.data = data;
+      // console.log('data',this.data)
     }
   },
   /**
@@ -335,56 +341,61 @@ export default {
     getBetting() {
       return this.$store.getters.getBetting;
     },
-             //获取投注框删除的投注信息
-    getDeleteType(){
+    //获取投注框删除的投注信息
+    getDeleteType() {
       return this.$store.getters.getDeleteType;
     },
+    getIsBetting() {
+      return this.$store.getters.getIsBetting;
+    }
   },
   /**
    * 监听器
    */
   watch: {
-      getDeleteType(val){
-       let flag=true;
-      this.data.matchData.forEach(e =>{
-          if(val =='all'){
-                e.oddsData.guestOdds.forEach(data=>{
-                    this.$set(data, "isTrue", false);
-                })
-                e.oddsData.homeOdds.forEach(data=>{
-                    this.$set(data, "isTrue", false);
-                })
-          
-          }else{
-            let showData =true;
-                e.oddsData.guestOdds.forEach(data=>{
-                    if(data.id == val){
-                      this.$set(data, "isTrue", false);
-                      showData =false;
-                    }
-                })
-                if(showData){
-                  e.oddsData.homeOdds.forEach(data=>{
-                      if(data.id == val){
-                        this.$set(data, "isTrue", false);
-                      }
-                  })
-                }
-    
-          }
-      })
+    getIsBetting(val) {
+      this.isWindow = val;
+    },
+    // 监听删除投注
+    getDeleteType(val) {
+      let flag = true;
+      this.data.forEach(e => {
+        if (val == "all") {
+          e.match_info.forEach(data => {
+            data.oddsData.forEach((k, i) => {
+              this.$set(k, "isTrue", false);
+            });
+          });
+        } else {
+          e.match_info.forEach((res, index) => {
+            res.oddsData.every((k, i) => {
+              if (k.id == val) {
+                this.$set(k, "isTrue", false);
+                flag = true;
+                return false;
+              }
+              return true;
+            });
+          });
+        }
+      });
     },
     //获取已投注信息
     getBetting(val) {
       //获取vuex玩法已投注相对应的数据
-      val.forEach(e => {
+      val.forEach((e, index) => {
         if ("concede_size" == e.title) {
+          this.thisNum = index;
           this.betting = e.data;
         }
       });
     }
   },
   mounted() {
+    // 是否展示投注框
+    if (this.$store.getters.getIsBetting) {
+      this.isWindow = true;
+    }
     //获取vuex玩法已投注相对应的数据
     let getBetting = this.$store.getters.getBetting;
     if (getBetting) {
@@ -394,6 +405,7 @@ export default {
         }
       });
     }
+    console.log("data", this.data);
     /*-----------------------*/
     this.getmatchInfo("");
   }

vue_sports/src/components/StMatch.vue

@@ -76,8 +76,7 @@
                   {{itemList.home_team}}
               </div>
               <div class="box row item-center main-box">
-                <span v-if="itemList.guest_score" class="num-box" style="color:#eb921e">{{itemList.guest_score}}</span>
-                <!-- <span v-if="itemList.guest_score? itemList.guest_score:'0'" class="num-box" style="color:#eb921e">{{itemList.guest_score}}</span> -->
+                <span v-if="itemList.guest_score? itemList.guest_score:'0'" class="num-box" style="color:#eb921e">{{itemList.guest_score}}</span>
                 &nbsp;&nbsp;{{itemList.guest_team}}
               </div>
               <div class="footBox">
@@ -264,6 +263,7 @@ export default {
         });
     },
     isClick() {
+    
             if(this.$store.getters.getIsBetting==true){
            return false
        }
@@ -276,6 +276,7 @@ export default {
     },
     // 点击事件确认选中
     isclick(index, num) {
+        console.log(this.letBallData)
        if(this.$store.getters.getIsBetting==true){
            return false
        }

vue_sports/src/components/StSerchBox.vue

@@ -3,7 +3,7 @@
     <div class="Serch row item-center">
       <div class="Soccer-game row item-center">
         <div
-          style="display:flex;align-items:center;justify-content:center;"
+          style=" display:flex;align-items:center;justify-content:center;"
           class="Soccer-game-title"
           @click="isreturn()"
         >