sports_wap/vue_sports/.svn/pristine/d8/d89b10bf0483d0a8eefe6769534a3c4039a152b8.svn-base

<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 style="font-size:.24rem">{{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="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">
              <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" @click="activekey(index)" >
          <div class="inputBox row allAlignment">
            <input type @click.stop="go()" v-bind:value="bettingNumberMgs" placeholder="投注额" @click="activekey(index)">
            <span @click="ClearData">
              <img style="width:.2rem;height:.2rem" :src="img" alt>
            </span>
          </div>
          <div class>
            <span>可赢额</span>
          </div>
        </div>

        <div class="bottonBox" v-show="item.isclick==true">
          <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
            <div>+100</div>
            <div>+1000</div>
            <div>+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)">
                <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)">
                <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>
            </div>
          </div>
        </div>
      </div>
     
      <div class="showNumber" @click.stop="ISclick()">
      <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="inputBox row allAlignment">
            <input type @click="go()" v-bind:value="bettingNumberMgs" placeholder="投注额">
            <span @click="ClearData">x</span>
          </div>
          <div class>
            <span>可赢额</span>
          </div>
        </div>
        <div class="bottonBox" v-if="Isclick">
          <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
            <div>+100</div>
            <div>+1000</div>
            <div>+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)">
                <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)">
                <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>
            </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,
      Isclick: false
    };
  },
  methods: {
    /*---------------------------------- */
    go: function() {
      document.activeElement.blur();
    },
    /*---------------------------------- */
    updateNumber: function(val) {
      this.bettingNumber += val;
    },
    /*---------------------------------- */
    delNumder: function() {
      let Str = this.bettingNumber;
      this.bettingNumber = Str.substring(0, Str.length - 1);
    },
    /*---------------------------------- */
    ClearData: function() {
      this.bettingNumber = "";
    },
    /*---------------------------------- */
    // 删除所有投注
    alldel() {
      let betting = this.$store.getters.getBetting;
      betting.forEach(e=>{
        e.data=[]
      })
      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)      
    },
    /*---------------------------------- */
    // 删除指定的投注
    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.$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);
    },

    /*---------------------------------- */
    //激活单注的小键盘
    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 = [];
      if (betting) {
        betting.forEach(e => {
          e.data.forEach(res => {
            array.push(res);
          });
        });
        this.dataList = array;
        // 查看是否还有数据确定是否要关闭窗口
      }
      if(array==false){
             this.$public.setCache("box_size", 2);
              this.$store.dispatch("ISBETTING", false);
      }
      return this.dataList;
    },
    //获取投注金额
    bettingNumberMgs: function() {
      return this.bettingNumber;
    },

    /*------------------------------*/
    //获取投注框放大缩小状态

    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: 0 0.22rem;
}
input {
  border: 0;
}
.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.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  color: #ebebeb;
  background: #a1a1a1;
}
.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>