sport_mobile/.svn/pristine/3b/3b0dd2135172ac065999490b646d47d8ed53cb31.svn-base

<template>
  <div>
    <div v-if="data.length >0 ">
    <div class="bettingTable" :class="data?'':'dataNo row center'">
      <div class="list" v-for="(item,index) in data" :key="item.id">
        <div style="padding-bottom:.1rem;">
          <div class="list-header row item-center allAlignment">
            <p
              class="br05 row center"
              style="height:.24rem;background:#F00;padding:0 .1rem;"
            >{{item.playName}}</p>
            <p
              @click="deleteList(index,item.id,item.p_code)"
              class="row center"
              style="width:.26rem;height:.26rem; border-radius:50%;background:#F76649;"
            >
              <img src="@/assets/st-imges/del.png">
            </p>
          </div>
          <div class="list-body">
            <div class="condition row item-center">
              <span>{{item.name}}</span>
              <p style="padding-left:.1rem;">
                @
                <span style="color:#F76649">{{item.odds}}</span>
              </p>
            </div>
            <div class="duel row item-center">
              <p>{{item.home_team}}</p>
              <span style="color:#F76649;font-size:.12rem;">&emsp;vs&emsp;</span>
              <p>{{item.guest_team}}</p>&nbsp;
            </div>
          </div>
        </div>
      </div>


      <!-- <div v-if="(i+1)>2"> -->
      <div v-for="(item,index) in ThroughPlay" :key="index">
          <div style="width:100%;height:.4rem;padding:0 .2rem;"
            class="row item-center" >
            <span>{{item.title}}</span>
            <span>X{{item.index}}</span>
          </div>
          <div class="list-input row item-center allAlignment" style="padding:0 .2rem;">
            <div
              class="br05"
              style="border:.01rem solid #F76649;position: relative;"
              @click="getKeys(index)"
            >
              <input type="text" placeholder="投注额" class="bettingall" oncopy="return false" v-model="item.money"
                onpaste="return false" @keyup="keyMatch($event,index)"
              >
              <img
                @click="clearBettingMoney(index)"
                style="position: absolute;width:.2rem;height:.2rem;right:.1rem;top:.05rem;"
                src="@/assets/st-imges/delbetting.png"
              >
            </div>
            <div
              class="br05 row item-center"
              style="border:.01rem solid #BFE2B3;background:#E7FFDA;padding-left: .05rem;"
            > {{item.money ? (item.money * item.odds).toFixed(2) : '可赢额'}}</div>
          </div>
          <div class="key" :style="keys == index?'':'display:none;'">
            <div>
              <div class="row average item-center">
                <p @click="moneyClick(100,index)">+100</p>
                <p @click="moneyClick(500,index)">+500</p>
                <p @click="moneyClick(1000,index)">+1000</p>
              </div>
              <div class="row average item-center">
                <p @click="moneyClick(5000,index)">+5000</p>
                <p @click="moneyClick(10000,index)">+10000</p>
                <p @click="moneyClick(50000,index)">+50000</p>
              </div>
            </div>
          </div>
        </div>
      <!-- </div> -->
      <div class="statistics">
        <div>
          <div class="statistics-list">
            <p class="row allAlignment">
              <span>
                <i style="color:#F76649">{{ThroughPlay.length > 0 ? ThroughPlay.length  :0}}</i>&emsp;所有投注：
              </span>
              <span>{{bettingMoney ? bettingMoney :'0.00'}} RMB</span>
            </p>
            <p class="row allAlignment">
              <span>可赢金额：</span>
              <span style="color:#F76649;font-size:.16rem;">{{canWin ? canWin :'0.00'}}RMB</span>
            </p>
          </div>
          <!-- <div
            style="height:.5rem;background:#A83131;padding-left:.2rem;margin-top:.2rem;"
            class="row item-center"
          >
            <img style="width:.17rem;height:.15rem;" src="@/assets/st-imges/warning.png">&nbsp;
            <p style="color:#fff;font-size:.14rem;">您的余额不足。 请您先进行存款</p>
          </div>
          <div
            class="row center"
            style="height:.5rem;background:rgb(247, 102, 73);color:#fff;margin-top:.2rem;font-size:.14rem;"
          >赔率信息已更改，请重新投注</div> -->
          <div class="statistics-btn">
            <div class="row center" style="font-size:.16rem;'color:#666'" v-if="!logins">请先登录再进去投注</div>
            <div class="row center submit" style="background:#F76649;color:#fff;" v-else @click="submit()">投注</div>
            <div class="row center" style="background:#CCC;color:#666;" @click="cancel()">取消</div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import "@/css/index.css";
export default {
  name: "eventBettingTable",
  data() {
    return {
      keys: "",
      logins: false,
      bettingMoney: 0,//投注金额
      canWin:0,//可赢金额
      ThroughPlay:[],
      data: "",
    };
  },
  methods: {
    /*----------------------------------*/
    // 数据提交
    submit(){
      let dataList=[];
      let money = 0,isMoney=false;
      this.ThroughPlay.forEach(e =>{
        if(e.money*1 >= 1){
          isMoney = true;
          money += e.money;
          dataList.push({
              type:e.title,
              bet_amount:e.money,
          })
        }
      })
      dataList.push(this.data);
      //onsole.log(dataList)
      if (isMoney) {
        let token = localStorage.getItem("token");
        this.$http
          .post(this.$ports.betOrder.Bet, {
            data: dataList,
            token,
            bet_money:money
          })
          .then(res => {
            //console.log('数据',res.data);
            if (res.data.status == 1) {
              // this.alldel();
              this.$store.dispatch("SET_PASSBETTING",[]);
              this.cash = (this.cash - this.dataNumbe * 1).toFixed(2);
              this.$dialog.alert({ mes: "亲！你已经投注成功啦。" });
            } else if (res.data.status == "-4001") {
              this.isLogin = false;
              this.$dialog.alert({ mes: "亲！你的登陆已过期。" });
            } else if (res.data.status == "4204") {
              this.$dialog.alert({ mes: "亲！你的余额不足。" });
            }else if(res.data.status == '7027' ){
              this.$dialog.alert({ mes: "亲！赔率发生变法，请重新选择。" });
             // this.alldel();
              this.$store.dispatch("SET_PASSBETTING",[]);
            }else{
              this.$dialog.alert({ mes: "错误代码:"+res.data.status});
            }
            this.isSubmit = false;
          });
      } else {
        this.$dialog.alert({ mes: "亲！你还未输入投注金额啦。" });
        this.isSubmit = false;
      }
    },

    /*----------------------------------*/
    //激活键盘
    getKeys(index) {
      this.keys = index;
    },

    /*----------------------------------*/
    //投注金额处理
    moneyClick(num, index) {
      let money = this.ThroughPlay[index].money ? this.ThroughPlay[index].money *1 : 0;

      this.$set(this.ThroughPlay[index],'money',money+num > 999999999 ? 999999999: money+num  );
      this.calculationAmount()
      //console.log(money+num);
    },

    /*----------------------------------*/
    //计算投注金额
    calculationAmount(){
      let money = 0,profit = 0;
      this.ThroughPlay.forEach(e=>{
        if(e.money){
          money += e.money * e.index;
          profit += e.money * e.odds;
        }  
      })
      this.bettingMoney =money.toFixed(2);
      this.canWin = profit.toFixed(2);
    },

    /*------------------------------------*/
    //输入验证
    keyMatch(e, i) {
      e.currentTarget.value = e.currentTarget.value.replace(/[^0-9]/g, "");
      if(e.currentTarget.value.length > 9){
        e.currentTarget.value = 999999999
      }
      this.$set(this.ThroughPlay[i],'money',e.currentTarget.value)
      this.calculationAmount()
      //console.log(this.bettingMoney);
    },

    /*----------------------------------*/
    // 清除投注金额
    clearBettingMoney(index) {
     this.$set(this.ThroughPlay[index],'money','')
     this.calculationAmount()
    },

    /*----------------------------------*/
    //删除一条数据
    deleteList(index, id, code) {
      let betting = this.$store.getters.getPassBetting;
      for (let i = 0; i < betting.length; i++) {
        if (code == betting[i].title) {
          for (let j = 0; j < betting[i].data.length; j++) {
            if (id == betting[i].data[j].id) {
              this.data[index].money = "";
              betting[i].data.splice(j, 1);
              break;
            }
          }
          break;
        }
      }
      this.$store.dispatch("DEL_TYPE", id);
      this.$store.dispatch("SET_PASSBETTING", []);
      this.$store.dispatch("SET_PASSBETTING", betting);
    },

    /*----------------------------------*/
    // 取消
    cancel(){
      this.$store.dispatch("SET_PASSBETTING", []);
      
    }
  },
  computed: {
    getIsLogin() {
      return this.$public.getItem("token");
    },
    getPassBetting() {
      return this.$store.getters.getPassBetting;
    },

    // //计算可赢金额
    // canWin(){
    //   this.ThroughPlay
    // }
  },
  watch: {
    getIsLogin(val) {
      if (val) {
        this.logins = true;
      } else {
        this.logins = false;
      }
      //console.log(this.$public.getItem("token"), "token");
    },
    getPassBetting(val) {
      this.data = [];
      if (this.$store.getters.getPassLimit > 0) {
        val.forEach(e => {
          e.data.home_team = 
          this.data = this.data.concat(e.data);
          // if(this.$store.getters.getPassLimit > 10){
          //   this.$dialog.toast({ mes: "亲，超出表格上限啦。", timeout: 2000 });
          //   this.deleteList(this.data.length - 1,this.data[this.data.length-1].id,this.data[this.data.length-1].p_code);
          //   console.log(this.$store.getters.getBetting,'我的')
          // }
        });
        this.ThroughPlay =[];
        if(this.data.length >2){
          for(let i=3 ; i <= this.data.length ;i++ ){
            this.ThroughPlay.push(this.$public.betPlay(i,this.data));
          }
        }
        console.log( this.ThroughPlay);
        this.calculationAmount();
        //console.log('数据更新',this.data);
      }
    }
  },
  mounted() {
    if (this.$public.getItem("token")) {
      this.logins = true;
    }
    //
  }
};
</script>

<style scoped>
img {
  cursor: pointer;
}
.br05 {
  border-radius: 0.05rem;
}
.bettingTable {
  width: 100%;
  background: #e5e5e5;
}
.dataNo {
  background: #777;
}
.list {
  padding: 0 0.2rem;
  border-bottom: 0.02rem solid #999;
}

.list img {
  width: 0.15rem;
  height: 0.15rem;
}
.list-header {
  min-height: 0.5rem;
}
.list-header p {
  font-size: 0.14rem;
  color: #fff;
}
.list-body {
  min-height: 0.6rem;
}
.list-body > div {
  min-height: 0.3rem;
}
.condition {
  font-size: 0.16rem;
  font-weight: bold;
  color: #666;
}
.duel {
  font-size: 0.14rem;
  color: #666;
}
.list-input {
  min-height: 0.6rem;
}
.list-input > div {
  width: 48%;
  height: 0.34rem;
  color: #999;
  font-size: 0.14rem;
}
.list-input > div input {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0.05rem;
  background: #fff;
  padding-left: 0.05rem;
}
.key {
  min-height: 1rem;
  background: #ccc;
}
.key > div {
  width: 90%;
  margin: 0 auto;
}
.key > div > div {
  min-height: 0.5rem;
}
.key p {
  width: 30%;
  height: 0.34rem;
  background: #fff;
  border-radius: 0.05rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f76649;
  font-size: 0.14rem;
  cursor: pointer;
  box-shadow: .05rem .05rem .05rem rgba(0, 0, 0, .1)
}
.key p:active{
  background: #e9e9e9;
}
.statistics {
  width: 100%;
  background: #fff;
}
.statistics > div {
  width: 90%;
  margin: 0 auto;
  padding: 0.2rem 0;
}
.statistics-list {
  min-height: 0.6rem;
  font-size: 0.14rem;
}
.statistics-list > p {
  line-height: 0.3rem;
}
.statistics-btn > div {
  height: 0.35rem;
  border-radius: 0.05rem;
  margin-top: 0.1rem;
  cursor: pointer;
}
.submit:active{
  background: #F77649 !important;
   box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px -2px 5px 1px rgba(0, 0, 0, 0.05), 2px 0px 5px 1px rgba(0, 0, 0, 0.05),
    0px 2px 5px 1px rgba(0, 0, 0, 0.05);
}
</style>