luckyrun/src/components/luckyGridView/main.vue

<template>
  <div class="lucky-grid-view">
    <LuckyGrid
      class="lucky-grid"
      ref="LuckDraw"
      rows="2"
      cols="4"
      :prizes="prizes"
      :blocks="blocks"
      :default-config="defaultConfig"
      :default-style="defaultStyle"
      :active-style="activeStyle"
      @end="endCallBack"
    />

    <van-dialog v-model="showDialog" title="恭喜您获得奖品">
      <div class="lucky-grid-prize">
        <div
          class="lucky-grid-prize-item"
          v-for="item in prizeItemList"
          :key="`lucky_grid_prize_item_${item.prizeId}`"
        >
          <div class="lucky-grid-prize-item-img">
            <img :src="item.prizeImgUrl" :alt="item.prizeName" />
          </div>
          <div class="lucky-grid-prize-item-name">{{ item.prizeName }}</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { LuckyGrid } from "vue-luck-draw";
import { queryPrizeInfo, doLottery, saveLog } from "@/api";
import { mapMutations, mapGetters } from "vuex";
import eventBus from "@/lib/eventBus";
export default {
  name: "LuckyGridView",
  components: {
    LuckyGrid
  },
  props: {
    mode: {
      type: String,
      default: "blue"
    }
  },
  data() {
    return {
      luckyNum: 0,
      prizes: [],
      blocks: [
        // { padding: "15px", background: "#ffc27a", borderRadius: 28 },
        // { padding: "4px", background: "#ff4a4c", borderRadius: 23 },
        // { padding: "4px", background: "#ff625b", borderRadius: 20 }
      ],
      defaultConfig: {
        gutter: 5
      },
      defaultStyle: {},
      activeStyle: {
        background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
        shadow: ""
      },
      axis: [
        [0, 0],
        [1, 0],
        [2, 0],
        [3, 0],
        [3, 1],
        [2, 1],
        [1, 1],
        [0, 1]
      ],
      blueImages: [
        require("@/assets/images/ball_02.png"),
        require("@/assets/images/ball_01.png")
      ],
      goldImages: [
        require("@/assets/images/ball_02_g.png"),
        require("@/assets/images/ball_01_g.png")
      ],
      showDialog: false,
      lotteryData: null,
      timeout: false,
      request: false
    };
  },
  computed: {
    ...mapGetters(["ruleType", "prizeIdList", "remainTicketNum"]),
    drawType() {
      if (this.mode === "blue") return "turntable1";
      return "turntable2";
    },
    prizesImages() {
      if (this.mode === "blue") return this.blueImages;
      return this.goldImages;
    },
    uid() {
      return this.$route.query.uid;
    },
    roomUid() {
      return this.$route.query.roomUid;
    },
    prizeItemList() {
      if (!this.lotteryData) return null;
      return this.lotteryData.prizeItemList;
    },
    prizeids() {
      if (!this.lotteryData) return null;
      return this.lotteryData.prizeIdList;
    },
    maxPrizeVaue() {
      let list = [];
      for (let index = 0; index < this.prizeItemList.length; index++) {
        const element = this.prizeItemList[index];
        list.push(element.platformValue);
      }
      let max = Math.max(...list);
      return max;
    },
    maxVauePrizeId() {
      let id = 0;
      for (let index = 0; index < this.prizeItemList.length; index++) {
        const element = this.prizeItemList[index];
        if (this.maxPrizeVaue === element.platformValue) {
          id = element.prizeId;
          break;
        }
      }
      return id;
    },
    maxVauePrizeIndex() {
      return this.getPrizeIndex(this.maxVauePrizeId);
    }
  },
  watch: {
    mode() {
      this.getQueryPrizeInfo();
    }
  },
  created() {
    eventBus.$on("eventLottery", this.startLottery);
  },
  mounted() {
    this.getQueryPrizeInfo();
  },
  destroyed() {
    eventBus.$off("eventLottery", this.startLottery);
  },
  methods: {
    ...mapMutations(["SetPrizeInfo", "SetRemainTicketNum"]),
    getQueryPrizeInfo() {
      queryPrizeInfo({ drawType: this.drawType })
        .then(res => {
          const { code, data, msg } = res;
          if (code === 200) {
            this.SetPrizeInfo(data);
            this.prizes = this.configPrizes(data);
          } else {
            this.$toast.fail(msg);
          }
        })
        .catch(() => {
          this.$toast.fail("获取抽奖奖品信息失败！");
        });
    },
    postDoLottery() {
      if (
        this.remainTicketNum === 0 ||
        this.remainTicketNum < this.curTicketRuleValue
      ) {
        this.$toast.fail("余额不足！");
        return;
      }

      this.timeout = false;
      this.request = false;
      this.$refs.LuckDraw.play();
      doLottery({
        uid: this.uid,
        roomUid: this.roomUid,
        drawType: this.drawType,
        sendMessage: true,
        deviceId: "abc",
        ruleType: this.ruleType
      }).then(res => {
        const { code, data, msg } = res;
        if (code === 200) {
          this.request = true;
          this.lotteryData = data;
          this.SetRemainTicketNum(data.remainTicketNum || 0);
          if (this.timeout && this.request)
            this.stopLuckDraw(this.maxVauePrizeIndex);
          this.postSaveLog();
        } else {
          this.$toast.fail(msg);
        }
      });

      setTimeout(() => {
        this.timeout = true;
        if (this.timeout && this.request)
          this.stopLuckDraw(this.maxVauePrizeIndex);
      }, 2000);
    },
    postSaveLog() {
      saveLog({
        uid: this.uid,
        prizeids: JSON.stringify(this.prizeids),
        prizeIndex: this.maxVauePrizeIndex,
        createdTime: this.prizeItemList[0].createTime,
        prizeIdList: JSON.stringify(this.prizeIdList)
      });
    },
    configPrizes(prizeInfo) {
      const prizes = [];
      this.luckyNum = 1;
      for (let i = 0; i < 8; i++) {
        let prizeItem = prizeInfo[i];
        prizes.push({
          index: i,
          x: this.axis[i][0],
          y: this.axis[i][1],
          // fonts: [{ text: item.name, top: "70%" }],
          imgs: [
            { src: this.prizesImages[0], width: "86%", top: "6%" },
            { src: prizeItem.prizeImgUrl, width: "50%", top: "30%" },
            { src: this.prizesImages[1], width: "86%", top: "6%" }
          ]
        });
      }
      return prizes;
    },
    startLottery() {
      this.postDoLottery();
    },
    stopLuckDraw(index) {
      this.$refs.LuckDraw.stop(index);
    },
    getPrizeIndex(id) {
      let num = null;
      for (let index = 0; index < this.prizeIdList.length; index++) {
        const element = this.prizeIdList[index];
        if (element === id) {
          num = index;
          break;
        }
      }
      return num;
    },
    endCallBack() {
      this.showDialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.lucky-grid-view {
  width: 100%;
  height: 330px;
  margin: 0 auto;
  .lucky-grid {
    width: 100%;
    height: 100%;
  }
}
.lucky-grid-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  &-item {
    width: 150px;
    &-img {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    &-name {
      text-align: center;
      color: #666;
      font-size: 24px;
    }
  }
}
</style>