sports_wap/vue_sports/.svn/pristine/23/23ac19e6cd963c14589a77c1c8c3e5dbf3de8494.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>{{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>