superstar-dice/_src/components/game/tenBet.vue

<template>
  <div class="pub-modal">
    <div class="mask"></div>
    <div class="modal">
      <i class="close-icon" @click="$emit('update:visible')"></i>
      <div class="title">
        <span>{{$t('k3.tenResult')}}</span>
      </div>
      <div class="content">
        <div class="ten-list-item">
          {{$t('k3.income')}}: <span>{{result.income / 10000}} <i class="game-eos-icon"></i></span>
        </div>
        <div class="ten-list-item">
          {{$t('game.resultTip.win')}}: <span>{{result.gt_amount_int / 10000}} <i class="game-gt-icon"></i></span>
        </div>
        <div class="ten-list-item">
          {{$t('k3.betContent')}}: <span>{{getType(result.offertype)}}</span>
        </div>
        <div class="ten-list-item">
          {{$t('k3.bet')}}: <span>{{result.offerall_int / 1000}} <i class="game-eos-icon"></i></span>
        </div>
        <div class="ten-tips-wrap">
          <i class="light-icon" :class="{'active': isChecked}" @click="nextBet"></i>
          <p class="tips"><em>{{countTime}}</em>{{$t('k3.countTime')}}</p>
          <i class="game-help-icon" @click="tipShow = !tipShow"></i>
        </div>
        <transition name="msgbox-fade">
          <div class="ten-bottom-msg" v-show="tipShow">
            <i class="arrow-up-icon" @click="tipShow = false"></i>
            {{$t('k3.tenTips')}}
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'gameMain',
  data () {
    return {
      isChecked: false,
      tipShow: false,
      countTime: 5
    }
  },
  props: ['result'],
  methods: {
    getType (code) {
      let codeArr = code.split('|')
      let typeMap = {
        '0': this.$t('game.small.title'),
        '1': this.$t('game.big.title'),
        '2': this.$t('game.double.title'),
        '3': this.$t('game.single.title')
      }
      codeArr.map((v, i) => {
        if (v < 4) {
          codeArr[i] = typeMap[v]
        } else {
          codeArr[i]--
        }
      })
      return codeArr.join(',')
    },
    nextBet () {
      this.isChecked = !this.isChecked
      if (this.isChecked) {
        localStorage.setItem('ten_ben_checked', 1)
        this.countDown()
      } else {
        localStorage.removeItem('ten_ben_checked')
        if (this.timer) {
          clearInterval(this.timer)
          this.countTime = 5
        }
      }
    },
    countDown () {
      this.timer = setInterval(() => {
        this.countTime--
        if (this.countTime === 0) {
          this.$emit('nextbet')
          clearInterval(this.timer)
        }
      }, 1000)
    }
  },
  created () {
    let isChecked = localStorage.getItem('ten_ben_checked')
    if (isChecked) {
      this.isChecked = true
      this.countDown()
    }
  }
}
</script>
<style lang="scss">
.ten-list-item{
  height: px2rem(40);
  line-height: px2rem(40);
  font-size: px2rem(20);
  padding: 0 px2rem(14);
  box-sizing: border-box;
  color: #ffffff;
  background-color: #345981;
  border-radius: 6px;
  margin-bottom: px2rem(10);
  span{
    float: right;
    >i{
      margin-left: px2rem(6);
    }
  }
  .game-gt-icon{
    width: px2rem(18);
    height: px2rem(18);
    transform: scale(1.4);
  }
}
.ten-tips-wrap{
  font-size: px2rem(20);
  color: #789dba;
  .light-icon{
    display: inline-block;
    vertical-align: text-top;
    background: url('./img/icon_choice_b.png') top center no-repeat;
    background-size: 100%;
    width: px2rem(28);
    height: px2rem(30);
    cursor: pointer;
    &.active{
      position: relative;
      &::after{
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        background-color: #26ff82;
        width: px2rem(12);
        height: px2rem(12);
        margin-left: -px2rem(6);
        margin-top: -px2rem(7);
        border-radius: 50%;
      }
    }
  }
  .tips{
    display: inline-block;
    margin-left: px2rem(14);
    user-select: none;
    em{
      color: #f0ff9a;
      display: inline-block;
      margin-right: px2rem(4);
    }
  }
  .game-help-icon{
    float: right;
    margin: px2rem(6) px2rem(6) 0;
  }
}
.ten-bottom-msg{
  background-color: #1e334b;
  font-size: px2rem(16);
  padding: px2rem(12) px2rem(48);
  color: #789dba;
  width: px2rem(370);
  box-sizing: border-box;
  margin: px2rem(14) auto 0;
  line-height: 1.6;
  border-radius: 6px;
  position: relative;
  .arrow-up-icon{
    cursor: pointer;
    position: absolute;
    background: url('./img/icon_closed_u.png') no-repeat;
    background-size: 100%;
    width: px2rem(17);
    height: px2rem(16);
    top: px2rem(8);
    right: px2rem(12);
  }
}
@media #{$phone} {
  .ten-list-item{
    height: px2rem(80);
    line-height: px2rem(80);
    font-size: px2rem(28);
    padding: 0 px2rem(20);
    .game-eos-icon{
      transform: scale(1.4);
    }
    .game-gt-icon{
      transform: scale(2);
    }
  }
  .ten-tips-wrap{
    .light-icon{
      width: px2rem(40);
      height: px2rem(40);
      vertical-align: middle;
    }
    .tips{
      font-size: px2rem(28);
      line-height: px2rem(40);
      height: px2rem(40);
    }
    .game-help-icon{
      width: px2rem(38);
      height: px2rem(38);
    }
  }
  .ten-bottom-msg{
    margin: px2rem(20) 0 0;
    width: 100%;
    font-size: px2rem(26);
  }
}
</style>