GamePortrait/src/components/RushVillage.vue

<template>
  <div class="village">
    <!-- 抢庄 -->
    <div
      class="rob-box bounceIn animated"
      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
    >
      <div class="countDown">
        <span class="time" v-html="countDown"></span>
        <div class="bg"></div>
      </div>
      <div
        v-if="thisData.rob_banker_id == 0"
        class="btn"
        @click="sendRob(true)"
        :style="`background-image:url(${require('../assets/images/nn/' +
          $lang[$Type].rob_button)})`"
      ></div>
      <div
        v-if="thisData.rob_banker_id != 0"
        class="btn unclick"
        @click="sendRob(false)"
        :style="`background-image:url(${require('../assets/images/nn/' +
          $lang[$Type].unrob_button)})`"
      ></div>
    </div>
    <!-- 抢庄成功 -->
    <div
      v-if="successRob"
      class="success-rob fadeInDown animated"
      :style="`background-image:url( ${require('../assets/images/nn/' +
        $lang[$Type].rob_result)})`"
    >
      <div class="name">{{ thisData.rob_banker_username }}</div>
    </div>
    <div
      class="mask"
      v-if="countDown && countDown > 0 && thisData.rob_time - 3 >= countDown"
    ></div>
    <div
      class="rob-result"
      v-if="
        countDown == 0 && rob_banker_username != '' && thisData.rob_status == 2
      "
    >
      <i
        :style="`background-image:url(${require('../assets/images/nn/' +
          $lang[$Type].rob_banker)})`"
      ></i>
      {{ rob_banker_username }}
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import { showToast } from "vant"
// showSuccessToast, showFailToast
export default {
  data() {
    return {
      countDown: 0,
      rob_banker_username: "",
      successRob: false
    }
  },
  methods: {
    sendRob(state) {
      if (state == true) {
        var toRobData = {
          connect: "client",
          mode: "toRob",
          table_id: this.thisData.id,
          number_tab_id: this.thisData.number_tab_id
        }
        this.$store.dispatch("socket/sendMsg", {
          ...toRobData
        })
      } else {
        if (this.$Type == "cn") {
          showToast("庄已被 " + this.thisData.rob_banker_username + " 抢了！")
        } else if (this.$Type == "tw") {
          showToast("莊已被 " + this.thisData.rob_banker_username + " 搶了！")
        } else if (this.$Type == "en") {
          showToast(
            "Zhuang has been robbed by " +
              this.thisData.rob_banker_username +
              "！"
          )
        }
      }
    }
  },
  computed: {
    ...mapState({
      $Type: (state) => state.config.$Type,
      $lang: (state) => state.config.$lang,
      userInfo: (state) => state.app.userInfo
    })
  },
  watch: {
    thisData: {
      handler: function (newData) {
        // console.log(newData)
        if (newData.game_id) {
          // 更新抢庄时间
          if (newData.sendMode == "startRobCountDown") {
            this.countDown = newData.rob_count_down
          } else if (
            newData.sendMode != "toRobResult" &&
            newData.sendMode != "toRob"
          ) {
            this.countDown = 0
          }

          // 判断是否系统抢庄
          if (this.countDown == 0) {
            if (newData.rob_banker_username) {
              this.rob_banker_username = newData.rob_banker_username
            } else {
              this.rob_banker_username = this.$lang[this.$Type].system
            }
          }
          // 判断抢庄提示
          if (
            newData.rob_banker_id == this.userInfo.uid &&
            newData.rob_status == 1
          ) {
            this.successRob = true
            setTimeout(() => {
              this.successRob = false
              newData.rob_status = 2
            }, 5000)
          } else {
            this.successRob = false
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  props: {
    thisData: Object
  }
}
</script>
<style scoped>
.village .mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 3;
  pointer-events: none;
  z-index: 90;
}
.village .rob-box {
  width: 4.5rem;
  height: 6.6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -3.3rem;
  margin-left: -2.25rem;
  z-index: 99;
}
.village .rob-box .countDown {
  width: 4rem;
  height: 4rem;
  position: relative;
  margin: 0 auto 0.6rem auto;
}
.village .rob-box .countDown .time {
  font-size: 1.4rem;
  display: block;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 4rem;
  font-weight: bold;
  background-color: #96813b;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#96813b),
    color-stop(50%, #f8eabc),
    to(#98833d)
  );
  background-image: linear-gradient(
    180deg,
    #96813b 0%,
    #f8eabc 50%,
    #98833d 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.village .rob-box .countDown .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("~@/assets/images/nn/rob_rotate.png") no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  animation: rotate 12000ms linear infinite;
}
.village .rob-box .btn {
  width: 4.2rem;
  height: 1.2rem;
  margin: 0 auto;
  background: url("~@/assets/images/nn/rob_button.png");
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  position: relative;
}

.village .rob-box .btn:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("~@/assets/images/nn/rob_button.png");
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  animation: cirZoom infinite linear 2s 0.5s;
  z-index: -1;
}

.village .rob-box .btn.unclick {
  background-image: url("~@/assets/images/nn/unrob_button.png");
}

.village .rob-box .btn.unclick:after {
  display: none;
}

.village .success-rob {
  position: absolute;
  width: 9rem;
  height: 5rem;
  left: 50%;
  top: 50%;
  margin-left: -4.5rem;
  margin-top: -2rem;
  z-index: 99;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
.village .success-rob:after {
  content: "";
  width: 4.5rem;
  height: 4.4rem;
  position: absolute;
  left: 50%;
  margin-left: -2.25rem;
  top: -1.9rem;
  background: url("~@/assets/images/nn/rob_logo.gif") center center no-repeat;
  -webkit-background-size: 100%;
  background-size: 100%;
}
.village .success-rob .name {
  color: #fff;
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  width: 8rem;
  margin-left: -4rem;
  text-align: center;
  line-height: 1rem;
  background: url("~@/assets/images/nn/rob_name_bg.png") center center no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

.village .rob-result {
  position: fixed;
  left: 50%;
  top: 50%;
  text-align: center;
  min-width: 1.2rem;
  color: #f8eabc;
  font-size: 0.35rem;
  font-weight: 500;
  height: 0.8rem;
  line-height: 0.8rem;
  padding-left: 0.75rem;
  padding-right: 0.35rem;
  margin-top: -0.8rem;
  margin-left: -1.2rem;
  background: url("~@/assets/images/nn/rob_banker_bg.png");
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  -webkit-animation-name: robZoom;
  animation-name: robZoom;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  z-index: 9999;
}
.village .rob-result i {
  content: "";
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  left: -0.3rem;
  top: 50%;
  margin-top: -0.48rem;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
@keyframes robZoom {
  0% {
    transform: translate(0, 0) scale(0, 0);
  }
  50% {
    transform: translate(-5.8rem, -1.8rem) scale(1.2, 1.2);
  }
  100% {
    transform: translate(-2.8rem, -4.95rem) scale(1, 1);
  }
}
</style>