superstar-dice/_src/components/popup/validate/validate.vue

<template>
  <transition name="msgbox-fade">
    <div class="pub-modal"  v-if="visible">
      <div class="mask"></div>
      <div class="modal validate-modal">
        <i class="close-icon" @click="visible = false"></i>
        <div class="title">
          <span>{{$t('validate.title')}}</span>
        </div>
        <div class="content">
            <div class="validate-dice-wrapper">
              <div class="dice-item" :class="`dice-${resultData.num1}`"></div>
              <div class="dice-item" :class="`dice-${resultData.num2}`"></div>
              <div class="dice-item" :class="`dice-${resultData.num3}`"></div>
            </div>
            <div class="validate-result">
              <span class="text">{{$t('validate.text10')}}</span>
              <p class="num-box" v-if="resultData.transfer_block_num">
                <a target="_blank" :href="createLink" class="num-item block-num">{{resultData.transfer_block_num}}</a>
              </p>
            </div>
            <div class="validate-result">
              <span class="text">{{$t('validate.text8')}}</span>
              <p class="num-box" v-if="resultData.result_block_num">
                <a target="_blank" :href="resultLink" class="num-item block-num">{{resultData.result_block_num}}</a>
                <a target="_blank" :href="resultLink" class="num-item block-hash" v-html="hashSource"></a>
              </p>
            </div>
            <div class="validate-tips">{{$t('validate.text6')}}</div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'validatePopup',
  computed: {
    hashSource () {
      if (this.resultData.result_block_id) {
        let hash = this.resultData.result_block_id
        let diceNum = [this.resultData.num1, this.resultData.num2, this.resultData.num3]
        let subHash = hash.substring(hash.length - 32, hash.length)
        let hashArr = subHash.split('')
        let resultLen = diceNum.length
        let k = 0
        for (let i = hashArr.length - 1; i >= 0; i--) {
          let char = hashArr[i]
          if (diceNum.indexOf(char) > -1 && k < resultLen) {
            let newChar = `<span class="yellow">${char}</span>`
            hashArr.splice(i, 1, newChar)
            k++
          }
        }
        return '...' + hashArr.join('')
      } else {
        return ''
      }
    },
    createLink () {
      return `https://eospark.com/tx/${this.resultData.transfer_trx_id}`
    },
    resultLink () {
      return `https://eospark.com/block/${this.resultData.result_block_num}`
    }
  }
}
</script>

<style lang="scss">
.validate-modal{
  width: px2rem(900);
  .validate-dice-wrapper{
    text-align: center;
    font-size: 0;
    margin: px2rem(50) 0;
  }
  .dice-item{
    display: inline-block;
    width: px2rem(62);
    height: px2rem(62);
    margin: 0 px2rem(40);
  }
  .validate-result{
    color: #ffffff;
    font-size: 0;
    display: flex;
    margin-bottom: px2rem(20);
    .text{
      display: inline-block;
      font-size: px2rem(20);
      line-height: px2rem(32);
      min-width: px2rem(100);
      text-align: left;
    }
  }
  .num-item{
    display: inline-block;
    margin-right: px2rem(20);
    .yellow{
      color: #ffeb00;
    }
  }
  .num-box{
    flex: 1;
    background-color: #1e334b;
    height: px2rem(32);
    line-height: px2rem(32);
    padding: 0 px2rem(10);
    border-radius: 4px;
    font-size: px2rem(24);
  }
  .validate-tips{
    color: #82a8c6;
    line-height: px2rem(32);
    font-size: px2rem(20);
    text-align: center;
  }
  a{
    text-decoration: none;
    color: #ffffff;
  }
  @media #{$phone} {
    width: 98% !important;
    padding-left: px2rem(10) !important;
    padding-right: px2rem(10) !important;
    .num-item{
      margin-right: px2rem(4);
    }
  }
}
</style>