sports_wap/vue_sports/.svn/pristine/59/59f27e8ea6202421ce28773d0f12be595723317d.svn-base

<template>
  <div>
    <div v-if="isShow">
      <div v-for="(items,index) in list" :key="items.id" class="mg">
        <!-- <div v-for="items in list[index]" :key="items.id"> -->
        <div class="row allAlignment box center">
          <span>{{items.leagueName}}</span>
          <div class="row Match-title-num">
            <span>{{items.matchNum}}</span>
          </div>
        </div>
        <div class="Match-box">
          <div v-for="(item,index) in items.matchData" :key="item.id" class="Match-box">
            <div v-for="(itemList,index) in items.matchData[index]" :key="itemList.id">
              <div class="row allAlignment Match-box-top">
                <div class="Match-box-top-left">
                  <span>{{itemList.match_date}}</span>
                  <span>{{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">
                <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="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>
    <!-- 1x2 -->
    <div v-if="!isShow">
      <div v-for="(item,index) in list" :key="item.id">
        <div class="row allAlignment haderBox center">
          <span>{{item.leagueName}}</span>
          <div class="Match-title-num">
            <span>{{item.matchNum}}</span>
          </div>
        </div>
        <div v-for="(items,$index) in item.matchData" :key="items.id">
          <div v-for="itemList in item.matchData[$index]" :key="itemList.id">
            <div class="box">
              <div class="row allAlignment item-center top-box">
                <span>
                  <i>{{itemList.match_process}}</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 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 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="isclick(idx,1)"
                  >
                    <p style="color:#eb921e">{{odds.condition}}</p>
                    <p>{{odds.odds}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 独赢盘 -->
    
    <div v-if="noData">
      <NotOpend :title="this.info"/>
    </div>
  </div>
</template>

<script>
import "../css/index.css";
import Bus from "../assets/bus.js";
import NotOpend from "@/components/StNotOpend";
export default {
  props: ["gameCode", "name"],
  data() {
    return {
      isShow: true,
      list: "",
      data: {},
      data2: [],
      info: "没有相关比赛信息",
      noData: false
    };
  },
  components: {
    NotOpend
  },
  methods: {
    isclick(i, num) {
      this.$set(this.data.list[i], "istrue", (this.data.list[i].istrue = num));
    },
    // 点击事件确认选中
    isclick(index, num) {
      if (num == 1) {
        this.$set(
          this.data2[index],
          "istrueA",
          this.data2[index].istrueA == true ? false : true
        );
      } else if (num == 2) {
        this.$set(
          this.data2[index],
          "istrueB",
          this.data2[index].istrueB == true ? false : true
        );
      } else if (num == 3) {
        this.$set(
          this.data2[index],
          "istrueC",
          this.data2[index].istrueC == true ? false : true
        );
      }
    }
  },
  mounted() {
    this.$store.dispatch("GETSHOW", true);
    // 接收头部传过来的状态
    Bus.$on("show", data => {
      console.log("data", data);
      this.isShow = data;
    });
    this.$http
      .get(this.$ports.match.matchState, {
        game_code: this.gameCode,
        type_code: "StRollBall"
      })
      .then(res => {
        this.$store.dispatch("GETSHOW", false);
        if (res.status == 200 && res.data != [] && res.data != null) {
          this.list = res.data.data;
          console.log("list", this.list);
          Bus.$emit("val", this.name);
        } else {
          this.list = "";
          this.noData = true;
        }
      })
      .catch(res => {});
  }
};
</script>

<style scoped>
.box {
  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;
}
.Match-box {
  padding: 0 0.32rem;
}
.name-box {
  height: 1.76rem;
}
.Match-box-top {
  height: 0.44rem;
  line-height: 0.44rem;
  border-bottom: 1px solid #e4e4e4;
  font-size: 0.23rem;
}
.Match-box-top-num {
  width: 0.64rem;
  height: 0.44rem;
  background: #ebebeb;
  font-size: 0.24rem;
}

.Match-box {
  margin-top: 0.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;
}
/* 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;
}
</style>