feat:更新

src/components/luckyGridView/main.vue

@@ -10,15 +10,31 @@
       :default-config="defaultConfig"
       :default-style="defaultStyle"
       :active-style="activeStyle"
-      @start="startCallBack"
       @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 } from "@/api";
+import { queryPrizeInfo, doLottery, saveLog } from "@/api";
+import { mapMutations, mapGetters } from "vuex";
+import eventBus from "@/lib/eventBus";
 export default {
   name: "LuckyGridView",
   components: {
@@ -64,10 +80,15 @@ export default {
       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"]),
     drawType() {
       if (this.mode === "blue") return "turntable1";
       return "turntable2";
@@ -75,19 +96,111 @@ export default {
     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 => {
+      queryPrizeInfo({ drawType: this.drawType })
+        .then(res => {
+          const { code, data } = res;
+          if (code === 200) {
+            this.SetPrizeInfo(data);
+            this.prizes = this.configPrizes(data);
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取抽奖奖品信息失败！");
+        });
+    },
+    postDoLottery() {
+      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 } = res;
         if (code === 200) {
-          this.prizes = this.configPrizes(data);
+          this.request = true;
+          this.lotteryData = data;
+          this.SetRemainTicketNum(data.remainTicketNum || 0);
+          if (this.timeout && this.request)
+            this.stopLuckDraw(this.maxVauePrizeIndex);
+          this.postSaveLog();
         }
       });
+
+      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 = [];
@@ -108,25 +221,25 @@ export default {
       }
       return prizes;
     },
-    unitFunc(num, unit) {
-      console.log(num, unit);
-      if (unit === "vw") {
-        return (window.innerWidth / 100) * num;
+    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;
     },
-    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();
+    endCallBack() {
+      this.showDialog = true;
     }
   }
 };
@@ -142,4 +255,27 @@ export default {
     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>