sports_wap/vue_sports/src/components/StBettingWindow.vue

<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;">余额:{{cash}}</span>
          <span style="font-size:0.28rem; color:#333333;font-weight:bold">投注单</span>
          <img style="width:.50rem;height:0.8rem" :src="img_size" alt  @click="shrink()">
          <!-- style="color:#33333;font-size:0.24rem;" -->
        </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-left:0.32rem">
            <span :style="item.repeat? 'background: #f76649;':'' ">{{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).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 class="cancel" @click.stop="ClearData('all')">
              <img style="width:.2rem;height:.2rem" :src="img" alt>
            </span>
            <!-- <span @click.stop="ClearData('all')">x</span> -->
          </div>
          <div class>
            <span v-if="arrNumber">{{(datamMoney).toFixed(2)}}</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','all')">0</button>
              <button @click="updateNumber('00','all')">00</button>
              <button @click="delNumder('all')"style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
            </div>
          </div>
        </div>
      </div>
      </div>

      <!-- 过关投注  && compound.length > 0 -->
      <div v-show="!repeat ">
        <div class="row allAlignment center " style="height: 0.8rem;background: #ccc;padding: 0 0.2rem;">
          <span>复式连串过关投注</span>
          <img  style="width:.4rem;height:.4rem" src="../assets/st-imges/xiangxia.png" alt="">
        </div>
   
        <div class="showNumber" v-for="(item,index) in compound"  @click.stop="activekey('through'+index)"  >
          <span v-if="dataList" style="font-size:.3rem">{{item.title}}</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('through')">x</span> -->
              <span class="cancel" @click.stop="ClearData('sss')">
                <img style="width:.2rem;height:.2rem" :src="img" alt>
              </span>
            </div>
            <div class>
              <span v-if="arrNumber">{{(datamMoney).toFixed(2)}}</span>
              <span v-else>可赢额</span>
            </div>
          </div>
          <div class="bottonBox" v-if="clickIndex=='through'+index">
            <div class="bottonBox-num row allAlignment" style="padding:0 .2rem">
              <div @click="additionFun(100,'through',index) ">+100</div>
              <div @click="additionFun(1000,'through',index)">+1000</div>
              <div @click="additionFun(10000,'through',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,'through',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,'through',index)">
                  <button>{{n+6}}</button>
                </div>
                <button @click="updateNumber('0','through',index)">0</button>
                <button @click="updateNumber('00','through',index)">00</button>
                <button @click="delNumder('through')"style="background:rgb(247, 102, 73);font-size:.4rem;line-height:.86rem;">x</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-show="repeat" class="row  center">
        <span>红色选项不可以结合进行过关投注</span>
      </div>

      <!-- 总数据展示 -->
      <div class="row allAlignment" style="padding:.1rem .2rem">
          <span v-if="dataNum" class="showNumberSpan">所有投注({{dataNum}}):</span>
          <span v-else class="showNumberSpan">所有投注:</span>
          <span v-if="dataNumbe" style="font-size:0.24rem">{{(dataNumbe)}}</span>
          <span v-else style="font-size:0.24rem">0.00</span>
        </div>
        <div class="row allAlignment" style="padding:0 .2rem">
          <span class="showNumberSpan">可赢金额:</span>
          <span v-if="datamMoney" style="font-size:0.24rem;color:#F76649;">{{(datamMoney).toFixed(2)}}</span>
          <span v-else style="font-size:0.24rem;color:#F76649;">0.00</span>
        </div>
        <div class="btn" style="background:#F76649;" @click="betOrder" v-if="isLogin">
          <span> 确认投注</span>
        </div>
        <div class="btn" style="background:#F76649;" @click="loginReg" v-else>
          <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 class="loading_box row center" >
        <div class="weui-loading"></div>
    </div> -->
    <div class="shrink" :style="newIsShrink?'':'display:none'" @click="show()">
      投注单--选项
      <span class="num">{{dataList?dataList.length:'0'}}</span>
    </div>

    <div v-if="isshow" class="login"><Login></Login></div>
    <div v-else-if="rgShow"  class="login" ><register></register></div>
  </div>
</template>
<script>
import "../css/index.css";
import Login from "@/pages/Login/index/StLogin";
import register from "@/pages/Login/index/register";
export default {
  data() {
    return {
      img: require("../assets/st-imges/del.png"),
      img_size: require("../assets/st-imges/narrow.png"),
      bettingNumber:[],
      balance: "",//余额
      bettingquantity: "",
      // 投注信息
      betting: "",
      dataList:[],
      arr: [],
      // 是否缩小
      isshrink: false,
      //小键盘显示位
      clickIndex:0,
      // money:0,//可赢金额
      arrNumber:'',//单注数量
      dataNum:0,//已投注数量
      dataNumbe:0,//总投数
      datamMoney:0,//可赢总金额
      isThrough:false,//触发过关玩法
      cash:0.00,//余额
      compound:[],//复合玩法
      repeat:false,//判断比赛数据是否有相同赛事
      isLogin:false,//是否登陆
      isshow:false,//登陆显示/隐藏
      rgShow:false,//注册显示/隐藏
    };
  },
  components:{
    Login,
    register
  },
  methods: {
    
    /*---------------------------------- */
    //阻止input框获取焦点
    go: function() {
      document.activeElement.blur();
    },

    /*---------------------------------- */
    //小键盘数字字符串拼接
    updateNumber: function(val,index) {
      // console.log(index);
      let temporaryData = '';
      let numbers = 0;
      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);
            console.log( this.bettingNumber[i]);
          }
        }else{  
          temporaryData = this.bettingNumber[i]*1 ? this.bettingNumber[i]+(val+''): val+'';
          this.bettingNumber.splice(i,1,temporaryData);
          //numbers += 

          this.arrNumber = temporaryData
        }
      })
      console.log(this.bettingNumber);
      //this.profitFun()
    },

    /*---------------------------------------------*/
    //投注加法
    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{
          let dataAdd  = 0;
          data = this.bettingNumber[i]*1 ? (this.bettingNumber[i]*1+val)+'': val+'';
          dataAdd +=data*1;
          this.bettingNumber.splice(i,1,data);
          this.arrNumber = data
        }
      })
      this.profitFun()
    },

    /*---------------------------------- */
    //删除投注数的一位数
    delNumder: function(index) {
      let Str = this.bettingNumber;
      let strVal='';
      if(index !='all'){
        Str.forEach((e,i)=>{
          if(i==index){
            strVal  = e;
            e= strVal.substring(0, strVal.length - 1);
            this.bettingNumber.splice(index,1,e);
          }
        })
      }else{
        Str.forEach((e,i)=>{
          strVal= e.substring(0, e.length - 1);
          console.log(strVal);
          this.bettingNumber.splice(i,1,strVal);
        })
        this.arrNumber = this.arrNumber.substring(0, this.arrNumber.length - 1) ;
      }
      this.profitFun()  
    },

    /*---------------------------------- */
    //清空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 = '';
        }
      })
      this.profitFun()
    },

    /*---------------------------------- */
    // 删除所有投注
    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');
      this.profitFun();
    },

    /*---------------------------------- */
    // 激活投注框的小键盘
    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)
      this.profitFun() 
    },

    /*---------------------------------- */
    //投注窗口放大
    shrink() {
      this.isshrink = true;
      this.$public.setCache("box_size", 1);
    },
    
    /*---------------------------------- */
    //计算可赢金额(总额)
    profitFun(){
      let dataNum = 0;
      let dataNumbe = 0;
      let datamMoney = 0;
      this.bettingNumber.forEach((e,i)=> {
        if(e){
          dataNum ++;
          dataNumbe += e*1 ;
          datamMoney += e*1*this.dataList[i].odds
        }
      })
      this.dataNum = dataNum;
      this.dataNumbe = dataNumbe+'';
      this.datamMoney = datamMoney;
    },

    /*---------------------------------- */
    //投注窗口缩小
    show() {
      this.isshrink = false;
      this.$public.setCache("box_size", 2);
    },

    /*---------------------------------- */
    //登陆
    loginReg(){
      let isShow = true;
      this.isshow =true;
      this.$store.dispatch("GET_ISSHOW",isShow);
      console.log( this.$store.getters.getIsShow);
    },
    /*------------------------------- */
    //投注确认提交
    betOrder(){
      let list = [],obj ={};
      console.log(this.bettingNumber);
      //
   
      this.dataList.forEach((res,index)=>{
        //console.log(res);
        if(this.bettingNumber[index]){
          obj ={
            type:'1',
            index:index,
            // odds_id :res.id,
            // odds : res.odds,
            // odds_only : res.odds_only,
            // odds_code:res.p_code,
            // condition : res.condition,
            bet_amount :this.bettingNumber[index],
            // match_id:res.match_id,
            // game_code:res.ballId,
          }
          list.push(obj);
        }
      })
        this.compound.forEach(e=>{
          obj ={
            type:e.title,
            odds:e.odds,
            bet_amount :'50',//e.amount
          }
          list.push(obj);
        })
      console.log(this.compound);
        if(this.compound.length > 0){
          list.push(this.dataList);
        }

      console.log(list);
      if(list.length >= 1){
        this.$http.post(this.$ports.betOrder.Bet,{data:list,token:this.$public.getItem('token')}).then(res=>{
            console.log('数据',res.data);
          if(res.data.status ==1){
            this.alldel();
            // this.cash = (this.cash - obj.bet_amount).toFixed(2);
            // let betting = this.$store.getters.getBetting;
            // betting.forEach(res => {
            //   res.data = []
            // })
            // this.dataList = [];
            // this.$store.dispatch("BETTING", []);
            // this.$store.dispatch("BETTING", betting);
            // this.$store.dispatch("ISBETTING", false);
          }
        })
      }else{
        alert('你还未进行投注');
      }
     
    },


    /*---------------------------------- */
    //投注页面数据处理
    getDataList:function(val){
      let arrays = [];
      this.dataList=[];
      if (val) {
        val.forEach(e => {
          e.data.forEach((res,index )=> {
            if(this.bettingNumber.length < e.data.length){
              this.bettingNumber.push('');
            }
            res.repeat =false;
            this.repeat =false;
            arrays.push(res);
            //判断比赛数据是否相同赛事
            if(arrays.length > 1){
              arrays.forEach((data,i)=>{
                if(res.match_id == data.match_id && index!= i){
                  arrays[i].repeat =true;
                  arrays[index].repeat =true;
                  this.repeat =true;
                }
              })
            }
          });
        });
        this.dataList = arrays;
  
      // 查看是否还有数据确定是否要关闭窗口
      }
      if(this.dataList.length == 0){
        this.$public.setCache("box_size", 2);
        this.$store.dispatch("ISBETTING", false);
      }
      //console.log('处理完成的数据',this.dataList);

      //判断是否有过关玩法
      if(this.dataList.length >= 3){
        this.compound.splice(0,this.compound.length);
        this.isThrough = true;
        this.dataList.forEach((res,index) =>{
          if(index  >= 2){
            //this.$public.betPlay(index+1,this.dataList)
            this.compound.push(this.$public.betPlay(index+1,this.dataList));
          }
        })
      }else{
        this.compound.splice(0,this.compound.length)
      }
    },

    /*---------------------------------- */
    //获取用户个人信息
    getUserInfo(){
      this.$http.post(this.$ports.login.getAgent,{token:this.$public.getItem('token')}).then(res=>{
        //console.log(res);
        if(res.data.status == 1 &&  res.data.data != null){
          this.cash = res.data.data.cash;
          this.isLogin =true;
        }
      })
    }
  },
  /**
   * 
   */
  computed: {
    //获取vuex投注数据
    getBetting: function() {
      return  this.$store.getters.getBetting;
    },
    /*------------------------------*/
    //获取投注框放大缩小状态
    newIsShrink() {
      return this.isshrink;
    },
    getRgShow(){
      return this.$store.getters.getRgShow;
    },
    getIsShow(){
       return this.$store.getters.getIsShow; 
    },
    getToken(){
      return this.$store.getters.getToken;
    }
  },
  /**
   * 
   */
  watch: {
    getIsShow(val) {
      this.isshow = val
    },
    getBetting(val) {
      console.log('数据变法没有',val);
      this.getDataList(val);
    },
    //显示注册页面
    getRgShow(val){
      this.rgShow = val;
      this.isshow  = val ? false :true;
      console.log(this.rgShow);
    },
    getToken(val){
      this.isLogin = true
    }
  },

  /**
   * 页面初始化完成进行挂载
   */
  mounted() {
    if (this.$public.getCache("box_size") == 1) {
      this.isshrink = true;
    }
    this.getDataList(this.$store.getters.getBetting);
    this.getUserInfo();
      //console.log('token',this.$public.getItem('token'));
    if(this.$public.getItem('token')){
      this.isLogin = true
    }
  }
  
};
</script>
<style scoped>
.login{
  z-index: 999999;
  position: fixed;
  top: 0;
}
.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;
  border-bottom: 1px solid #ebebeb;
}
.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-bottom: 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;
}
.loading_box{
  width: 3rem;
  height: 3rem;
  background:#ebebeb;
}
</style>