feat：抽奖效果

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
+    "vue-luck-draw": "^3.4.6",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
   },

src/App.vue

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view />
   </div>
 </template>

src/views/Home.vue

@@ -1,18 +1,165 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <LuckyGrid
+      ref="LuckDraw"
+      width="400px"
+      height="200px"
+      rows="2"
+      cols="4"
+      :prizes="prizes"
+      :blocks="blocks"
+      :default-config="defaultConfig"
+      :default-style="defaultStyle"
+      :active-style="activeStyle"
+      @start="startCallBack"
+      @end="endCallBack"
+    />
+
+    <button @click="clickHander">抽奖</button>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import { LuckyGrid } from "vue-luck-draw";
 
 export default {
   name: "Home",
   components: {
-    HelloWorld
+    LuckyGrid
+  },
+  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: {
+        borderRadius: 15,
+        fontColor: "#DF424B",
+        fontSize: "14px",
+        textAlign: "center",
+        background: "#fff",
+        shadow: "0 5 1 #ebf1f4"
+      },
+      activeStyle: {
+        background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
+        shadow: ""
+      }
+    };
+  },
+  computed: {
+    // buttons() {
+    //   return [
+    //     {
+    //       x: 1,
+    //       y: 1,
+    //       background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
+    //       shadow: "0 5 1 #e89b4f",
+    //       fonts: [
+    //         {
+    //           text: `${this.luckyNum} 次`,
+    //           fontColor: "#fff",
+    //           top: "73%",
+    //           fontSize: "11px"
+    //         }
+    //       ]
+    //       imgs: [
+    //         { src: require("./img/button.png"), width: "65%", top: "13%" },
+    //         { src: require("./img/btn.png"), width: "50%", top: "73%" }
+    //       ]
+    //     }
+    //   ];
+    // }
+  },
+  mounted() {
+    this.getPrizeList();
+  },
+  methods: {
+    getPrizeList() {
+      // 模拟接口请求奖品列表
+      setTimeout(() => {
+        const data = [
+          {
+            name: "1元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "100元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "0.5元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "2元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "10元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "50元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "0.3元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          },
+          {
+            name: "5元红包",
+            img: [require("@/assets/logo.png"), require("@/assets/avatar.jpg")]
+          }
+        ];
+        const prizes = [];
+        this.luckyNum = 1;
+        let axis = [
+          [0, 0],
+          [1, 0],
+          [2, 0],
+          [3, 0],
+          [3, 1],
+          [2, 1],
+          [1, 1],
+          [0, 1]
+        ];
+        for (let i = 0; i < 8; i++) {
+          let item = data[i];
+          prizes.push({
+            index: i,
+            x: axis[i][0],
+            y: axis[i][1],
+            fonts: [{ text: item.name, top: "70%" }],
+            imgs: [
+              { src: item.img[0], width: "55%", top: "8%" },
+              { src: item.img[1], width: "70%" }
+            ]
+          });
+        }
+        this.prizes = prizes;
+      }, 0);
+    },
+    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>