sports_wap/vue_sports/.svn/pristine/68/689a954d28c15c6f05ea7b497b3ba505614b0c31.svn-base

<template>
  <div>
    <div class="Serch">
      <div class="Soccer-game row center">
        <div class="Soccer-game-title row center">
          <img class="returnimg" :src="img.searchreturn" @click="isreturn()">
          <span class="tit">{{title}}</span>
          
        </div>
        <div
          class="row center"
          style="height:0.88rem;padding-left:0.1rem;"
          @click="IsSoccerGameClick(isSoccerGameClick)"
        >
          <img
            :class="isSoccerGameClick==true?'Soccer-game-src act':'Soccer-game-src return'"
            :src="img.Soccerimg1"
          >
        </div>
      </div>
      <div class="Serch-box">
        <div class="Serch-box-home">
          <img class="Serch-box-img" :src="img.Serchimg">
          <input
            v-model="SerchValue"
            @input="serchchange(SerchValue)"
            class="Serch-box-input"
            type="text"
            placeholder="请输入联赛名称"
          >
          <img
            class="Serch-box-del"
            @click="delinputvalue()"
            v-if="Serchchange==true"
            :src="img.Serchdel"
          >
        </div>
      </div>
    </div>
    <div class="Soccer-game-box row" v-if="isSoccerGameClick==true">
      <p
        class="row item-center"
        v-for="(i,index) in Regulations.list"
        @click="listActive(i.id,i.name,i.num)"
        :key="index"
        :class="listnum==i.id?'active':''"
      >
        {{i.name}}
        <span
          class="Soccer-game-num"
          v-if="i.name!='冠军盘口'"
          :class="listnum==i.id?'active':''"
        >
          <!--Soccer 导航数字  -->
          {{i.num}}
        </span>
      </p>
    </div>
    <div
      v-if="isShow"
      class="event_prompt row item-center"
    >目前暂无可适用的{{event_prompt_name==''?'':event_prompt_name}}赛事</div>
    <div v-else class='ChampionsCup_content' >
      <div v-if="listnum==1">
            
      </div>
      <div v-if="listnum==2">

      </div>
      <div v-if="listnum==3">
        <div
      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,items.odds_only,'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,items.odds_only,'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>
      <div v-show="listnum==4">
        <!-- 冠军组件 -->
    <div class="champion">
      <div v-for="item in ChampionData" :key="item.id">
        <div class="title">
          <span>{{item.name}}</span>
          <div class="time">
            <!-- <span>2019年5月29日</span> -->
            <span>{{item.last_time}}</span>
          </div>
        </div>
      <div v-for="(items) in item.data" :key="items.id">
        <div class="chmpTit">{{items.title}}</div>
        <div v-for="itemList in items.datas" :key="itemList.id">
          <div class="list">
            <span class="chmName">{{itemList.team}}</span>
            <span class="num">{{itemList.odds}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div> -->
    </div>
      </div>
    </div>
        <div class="BettingWindow" v-show="isWindow">
      <BettingWindow/>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
import BettingWindow from "@/components/StBettingWindow";
export default {
  name: "ChampionsCup",
  components:{BettingWindow},
  data() {
    return {
        title:'',
      // 日期时间数组
      arr: [],
      // 本页面的数据
      data: "",
      isShow : true, //显示无数据
      //冠军盘口提示显示隐藏
      event_prompt: false,
      scorll: "", //背景滚动
      //冠军盘口提示区分盘口名
      event_prompt_name: "",
      isSoccerGameClick: true,
      Serchchange: false,
      listnum: 2, //赛事类型
      SerchValue: "",
      betting: 10000, //vuex里面玩法投注数据
      thisNum: 10000, //vuex里面
      ChampionData :'', //冠军数据
      isWindow:false,
      img: {
        Soccerimg1: require("@/assets/st-imges/soccer1.png"),
        Soccerimg2: require("@/assets/st-imges/soccer1.png"),
        Serchimg: require("@/assets/st-imges/sousuo.png"),
        Serchdel: require("@/assets/st-imges/del.png"),
        searchreturn: require("@/assets/st-imges/returnbox.png")
      },
      Regulations: {
        title: " ",
        list: [
          { id: 1, name: "滚球", num:''},
          { id: 2, name: "今日", num:''},
          { id: 3, name: "早盘", num:''},
          { id: 4, name: "冠军盘口" }
        ]
      }
    };
  },
  created() {
    this.fun_date();
  },
  methods: {
    //   获取一周赛事
    fun_date: function() {
      let date = new Date();
      let date2 = new Date(date);
      for (let i = 1; i < 7; i++) {
        date2.setDate(date.getDate() + i);
        let years = date2.getFullYear();
        let month =
          date2.getMonth() + 1 < 10
            ? "0" + (date2.getMonth() + 1)
            : date2.getMonth() + 1;
        let day =
          date2.getDate() < 10 ? "0" + date2.getDate() : date2.getDate();
        let time2 = {};
        time2.id = years + "-" + month + "-" + day;
        time2.title = years + "-" + month + "-" + day;
        this.arr.push(time2);
        if (i == 6) {
          this.arr.push({ id: "morning", title: "早盘" });
        }
      }
    },
    //切换赛事类型
    listActive(id, name, num) {
      let time;
      this.listnum = id;
      this.event_prompt_name = name;
      if (num == 0) {
        this.event_prompt = true;
        time = setTimeout(() => {
          this.event_prompt = false;
          clearTimeout(time);
        }, 1500);
      }
      clearTimeout(time);
      if (this.listnum == id) return false;
      this.SerchValue = "";
      this.listnum = id;
    },
    //删除搜索框数据
    delinputvalue() {
      this.SerchValue = "";
      this.Serchchange = false;
    },
    toggle: function(index, id) {
      this.active = index;
      this.datetimeNum = id;
      console.log("id", this.datetimeNum);
      this.SerchValue = "";
    },
    // 返回上一层页面
    isreturn() {
      history.go(-1);
    },
    //获取input输入的值查询数据
    serchchange(val) {
      if (val.length >= 1) {
        this.Serchchange = true;
      } else {
        this.Serchchange = false;
      }
    },
    //显示隐藏赛事类型
    IsSoccerGameClick(isclick) {
      this.isSoccerGameClick = !isclick;
    },
    
    getAjax(){
      this.$store.dispatch('GETSHOW',true);
       this.$http.get(this.$ports.match.ChampionsCup).then(res => {
      if (res.data.data && res.data.status == 1) {
        console.log('res', res.data.data.StMorningPlate)
        this.Regulations.list.forEach(e => {
          if (e.id == 1) {
            this.$set(e, "name", res.data.data.StRollBall.typeName);
            this.$set(e, "num", res.data.data.StRollBall.matchNum);
          } else if (e.id == 2) {
            this.$set(e, "name", res.data.data.StToday.typeName);
            this.$set(e, "num", (e.num = res.data.data.StToday.matchNum));
          } else if (e.id == 3) {
            this.$set(e, "name", res.data.data.StMorningPlate.typeName);
            this.$set(e, "num", res.data.data.StMorningPlate.matchNum);
          } else if (e.id == 4) {
            this.$set(e, "name", res.data.data.StChampion.typeName);
            this.$set(e, "num", res.data.data.StChampion.matchNum);
          }
        });
        console.log('list',this.Regulations)
        if(this.listnum == 1){
            this.data = res.data.data.StRollBall;
        }else if(this.listnum == 2){
            this.data = res.data.data.StToday;
        }else if(this.listnum == 3){
            this.data = res.data.data.StMorningPlate;
        }else {
           this.data = res.data.data.StChampion;
            let champion = {},
                title = "",
                stiTime='',
                //matchData = [],
                chamData = [];
              title = Object.keys(this.data.matchData);
              let val = Object.values(this.data.matchData);
              title.forEach((e,index) =>{
                  chamData.push({
                    name:e,
                    data:val[index],
                  })
                
              })
              chamData.forEach((res)=>{
                res.last_time =res.data.last_time;
                let resData =  Object.values(res.data);
                let resTitle =  Object.keys(res.data);
                res.data = [];
                resTitle.forEach((e,index)=>{
                  if(e !=='last_time'){
                   res.data.push({
                      title:e,
                      datas:resData[index]
                    })
                  }
                })
              })
                    this.ChampionData =chamData;
               console.log(this.ChampionData);
        }
        // 取值出来进行判定
        if(this.data.matchData && this.data.matchData.length < 1){
              this.isShow = true;
            }else if (
              this.data.matchData &&
              this.data.matchData.length > 0
            ){
              this.isShow = false;
              // console.log('dtaa',this.data)
               console.log('找不到',this.data)
                 this.dataGroup(this.data);
            }
            if(this.listnum == 4){
                if(this.data.matchData == null){
              this.isShow = true;
            }else {
              this.isShow = false;
            }
            }
          
      }
      this.title=res.data.data.leagueName
      this.$store.dispatch('GETSHOW',false);
     
    });
    },
       /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(id, home, guest, name, odds, condition, odds_only) {
      let isAdd = true;
      let bettingInfo = {
        id,
        home_team: home,
        guest_team: guest,
        name,
        odds,
        condition,
        ganame: "concede_size",
        score: this.score,
        bettingTime: "",
        odds_only
      };
      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);
    },
        /*--------------------------------------------------------------------------------*/
    // 添加、删除vuex投注数据公共方法
    AddDelete: function(id, home, guest, name, odds, condition, odds_only) {
      let isAdd = true;
      let bettingInfo = {
        id,
        home_team: home,
        guest_team: guest,
        name,
        odds,
        condition,
        ganame: "concede_size",
        score: this.score,
        bettingTime: "",
        odds_only
      };
      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, odds_only, type) {
      console.log(this.data);
      if (this.data) {
        //处理vuex里面数据
        this.AddDelete(id, home, guest, name, odds, condition, odds_only);
        //处理当前页面样式
        this.modifyStyle(id, type);
      }
    },
      /*--------------------------------------------------------------------------------*/
    // 赛事赔率玩法数据组合方法

    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);
                }
              });
            }else{
                 val.isTrue = false;
            }
            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 = [];
          if(A != undefined){
            column.oddsData.homeOdds.push(A);
          }
          if(B != undefined){
            column.oddsData.homeOdds.push(B);
            
            }
          column.oddsData.guestOdds = [];
          if(C != undefined){
            column.oddsData.guestOdds.push(C);
          }
          if(D != undefined){
            column.oddsData.guestOdds.push(D);
          }
        }
      });
      this.data = data;
      console.log('data`````', this.data);
    }
  },
  mounted() {
    // 默认选中数据
    this.listnum = 3; 
        // 获取是否滑动信息
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    //是否展示投注框
    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) {
          console.log('数据源',e);
          this.thisNum = index;
          if(e.data.length > 0){

            this.betting = e.data;
          }
        }
      });
    }
    this.getAjax();
  },
  computed:{
    changeData:function(){
        
      return this.listnum
    },
        getBetting() {
      return this.$store.getters.getBetting;
    },
    IsWindow() {
      return this.$store.getters.getIsBetting;
    },
    //获取投注框删除的投注信息
    getDeleteType() {
      return this.$store.getters.getDeleteType;
    }
  },
  watch:{
    changeData(val){
      console.log(val)
      // 监听改变状态修改值。
       this.getAjax();
  
    },
      // 监听滚动状态变化赋值滚动
    getscorllcode(val) {
      console.log(val);
      this.scorll = val;
    },
    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;
    }
  }
};
</script>

<style scoped>
.event_prompt {
  height: 0.88rem;
  background: #737373;
  color: #a6a6a6;
  padding-left: 0.3rem;
}
.Soccer-game-num {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: #a6a6a6;
  color: #626262;
  margin-left: 0.1rem;
  line-height: 0.4rem;
  text-align: center;
}
.Soccer-game-num.active {
  background: #f76649;
  color: #f8f8f8;
}
.act {
  transform: rotate(180deg);
  transition: 0.2s;
}
.return {
  transform: rotate(0deg);
  transition: 0.2s;
}
.Serch {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #6a6a6a, #565656);
  color: #f76649;
  font-family: "PingFang-SC-Regular";
  padding: 0 0.33rem;
}
.returnimg {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.1rem;
}
.Serch-box {
  display: flex;
  align-items: center;
}
.Serch-box-input {
  width: 3.8rem;
  border: none;
  position: absolute;
  height: 0.44rem;
  line-height: 0.44rem;
  left: 0.5rem;
  color: #aaa;
}
.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.45rem;
  line-height: 0.45rem;
  width: 4.2rem;
  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;
}
.Soccer-game-title {
  height: 0.88rem;
  font-size: 0.23rem;
}
.Soccer-game-title .tit{
  font-size: 0.3rem;
}
.Soccer-game-box {
  height: 0.88rem;
  background-color: #626262;
}
.Soccer-game-box > p {
  margin-left: 0.3rem;
  color: #a6a6a6;
}
.Soccer-game-box p.active {
  color: #f76649;
}
.Soccer-game-src {
  width: 0.25rem;
  height: 0.15rem;
  /* margin-left: .3rem */
}

.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;
}
/* 冠军 */
.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>