feat:更新

src/components/luckyGridView/main.vue

@@ -0,0 +1,184 @@
+<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"
+      @start="startCallBack"
+      @end="endCallBack"
+    />
+  </div>
+</template>
+
+<script>
+import { LuckyGrid } from "vue-luck-draw";
+import { queryPrizeInfo } from "@/api";
+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]
+      ]
+    };
+  },
+  computed: {
+    drawType() {
+      if (this.mode === "blue") return "turntable1";
+      return "turntable2";
+    }
+  },
+  mounted() {
+    this.getQueryPrizeInfo();
+  },
+  methods: {
+    getQueryPrizeInfo() {
+      queryPrizeInfo({ drawType: this.drawType }).then(res => {
+        const { code, data } = res;
+        if (code === 200) {
+          this.prizes = this.configPrizes(data);
+        }
+      });
+    },
+    configPrizes(prizeInfo) {
+      const data = [
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        },
+        {
+          img: [
+            require("@/assets/images/ball_02.png"),
+            require("@/assets/images/ball_01.png")
+          ]
+        }
+      ];
+      const prizes = [];
+      this.luckyNum = 1;
+      for (let i = 0; i < 8; i++) {
+        let item = data[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: item.img[0], width: "80%", top: "10%" },
+            { src: prizeItem.prizeImgUrl, width: "50%", top: "30%" },
+            { src: item.img[1], width: "80%", top: "10%" }
+          ]
+        });
+      }
+      return prizes;
+    },
+    unitFunc(num, unit) {
+      console.log(num, unit);
+      if (unit === "vw") {
+        return (window.innerWidth / 100) * num;
+      }
+    },
+    startCallBack() {
+      if (!this.luckyNum) return alert("还剩0次抽奖机会");
+      this.$refs.LuckDraw.play();
+      setTimeout(() => {
+        this.$refs.LuckDraw.stop((Math.random() * 7) >> 0);
+      }, 2000);
+    },
+    endCallBack(prize) {
+      alert(`恭喜你获得大奖: ${prize.fonts[0].text}`);
+      this.luckyNum--;
+    },
+    clickHander() {
+      this.startCallBack();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.lucky-grid-view {
+  width: 660px;
+  height: 330px;
+  margin: 0 auto;
+  .lucky-grid {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>