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

<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>