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

<template>
  <div class="game-main-wrap">
    <game-header></game-header>
    <div class="game-desktop">
      <div class="game-cell-wrap">
        <div class="game-desk-bg" :class="`${$i18n.locale}-lang-bg`"></div>
        <div class="game-cell-item"
        v-for="(item, key) in typeMap"
        :key="key"
        :class="[`game-cell-${key}`, {'checked': typeMap[key]['amount'].length, 'opened': openArray.includes(key)}]"
        @click="betSelect(key, $event)"
        >
          <div class="cell-counter"
          :class="`counter-${getColor(item.sum)}`"
          v-if="item.sum">
            {{item.sum}}
          </div>
        </div>
        <div class="moblie-rule-cell" @click="showRules">
          <i class="game-question-icon"></i>
        </div>
      </div>
      <game-bet
      @update:betNum="updateBetNum"
      @update:counter="changeCounter"
      @update:newgame="openGame"
      @clearbet="clearBet"
      :betArray="betArray"
      :betSum="betSum"
      ref="gamebet"
      ></game-bet>
      <div class="m-bet-sum">
        {{$t('gtTips')}} {{gtRate}}GT
        <i class="gt-times-icon" v-if="gtRate > 1">X{{gtRate}}</i>
        <i class="gt-help-icon" @click="showGtRules"></i>
        <div class="right">
          {{$t('game.confirmTip')}}：{{betSum}}<i class="game-eos-icon"></i>，{{$t('game.winGt')}} {{gtGet}}<i class="game-gt-icon"></i>
        </div>
      </div>
    </div>
    <div class="bet-sum">{{$t('game.confirmTip')}}：{{betSum}}<i class="game-eos-icon"></i>，{{$t('game.winGt')}} {{gtGet}}<i class="game-gt-icon"></i></div>
  </div>
</template>

<script>
import gameHeader from './gameHeader'
import gameBet from './gameBet'
import typeMap from './typeMap.js'
import NP from 'number-precision'
import Rules from '@/components/popup/rules'
import $ from 'jquery'
import { funParabola } from '@/util/util'
import { mapState } from 'vuex'

export default {
  name: 'gameDeskTop',
  data () {
    return {
      typeMap,
      openArray: [],
      betArray: [],
      betNum: 1,
      gtGet: 0,
      isCounter: false,
      tenBetShow: false,
      isOpening: false // 开奖中禁止点击
    }
  },
  components: {
    gameHeader,
    gameBet
  },
  computed: {
    ...mapState({
      account: state => state.account,
      gtRate: state => state.gtRate,
      newOpen: state => state.newOpen,
      newOffer: state => state.newOffer
    }),
    betSum () {
      if (this.betArray.length) {
        let sum = 0
        this.betArray.forEach(x => {
          sum = NP.plus(sum, x.bet)
        })
        return sum / 10000
      } else {
        return 0
      }
    }
  },
  watch: {
    newOpen (to, from) {
      this.openArray.splice(0, this.openArray.length)
      if (to.player === this.account.name) {
        this.openArray = to.result.split('|')
      }
    },
    newOffer (to, from) {
      if (to.player === this.account.name) {
        this.gtGet = NP.times(this.betSum, this.gtRate)
        // 开奖禁止点击
        this.isOpening = true
      }
    }
  },
  methods: {
    // 下注
    betSelect (code, event) {
      if (this.$refs['gamebet'].tenBeting || this.isOpening) {
        return
      }

      if (this.betSum + this.betNum > 100) {
        this.$showTips(this.$t('moreBet'))
        return
      }

      this.betArray.push({
        code,
        bet: this.betNum * 10000
      })

      let target = event.currentTarget
      let flyEl, $cloneEl
      if (this.isCounter) {
        let id = `counter${this.betNum * 10}`
        let dom = document.getElementById(id)
        $cloneEl = $(dom).clone().attr('style', '')
        $('.counter-target-wrap').append($cloneEl)
      } else {
        let id = `counter${this.getColor(this.betNum)}`
        let dom = document.getElementById(id)
        $cloneEl = $(dom).clone().attr('style', '')
        $('.animate-counter-wrap').append($cloneEl)
      }

      flyEl = $cloneEl[0]
      flyEl.style.visibility = 'visible'
      let self = this

      funParabola(flyEl, target, {
        speed: 1200,
        curvature: 0.001,
        complete () {
          $(flyEl).remove()
          // 计算总数
          let arr = self.typeMap[code]['amount']
          arr.push(self.betNum)
          let sum = arr.reduce((prev, next) => {
            return NP.plus(prev, next)
          })
          self.$set(self.typeMap, code, {
            amount: arr,
            sum
          })
        }
      }).position().move()
    },
    getColor (betNum) {
      var color
      if (betNum < 0.5) {
        color = 'red'
      } else if (betNum >= 0.5 && betNum < 1) {
        color = 'blue'
      } else if (betNum >= 1 && betNum < 5) {
        color = 'pur'
      } else if (betNum >= 5 && betNum < 10) {
        color = 'green'
      } else if (betNum >= 10 && betNum < 20) {
        color = 'yellow'
      } else if (betNum >= 20) {
        color = 'orange'
      }
      return color
    },
    updateBetNum (newval) {
      this.betNum = newval
    },
    changeCounter (flag) {
      this.isCounter = flag
    },
    // 清除按钮
    clearBet () {
      for (let k in this.typeMap) {
        this.$set(this.typeMap, k, {
          amount: [],
          sum: 0
        })
      }
      this.betArray.splice(0, this.betArray.length)
    },
    showGtRules () {
      Rules.showGTRules()
    },
    showRules () {
      Rules.showRules()
    },
    openGame () {
      this.gtGet = 0
      this.clearBet()
      this.openArray.splice(0, this.openArray.length)
      this.isOpening = false
    }
  },
  mounted () {
  }
}
</script>
<style lang="scss">
@import 'style.scss';
</style>