feat:更新

babel.config.js

@@ -1,3 +1,14 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"]
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "vant",
+        libraryDirectory: "es",
+        style: true
+      },
+      "vant"
+    ]
+  ]
 };

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "qs": "^6.10.1",
     "vant": "^2.12.26",
     "vue": "^2.6.11",
     "vue-luck-draw": "^3.4.6",
@@ -25,6 +26,7 @@
     "@vue/cli-service": "~4.3.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-import": "^1.13.3",
     "cross-env": "^7.0.2",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",

src/api/index.js

@@ -1,5 +1,6 @@
 import ajax from "@/lib/ajax";
 import config from "@/config";
+import { stringify } from "qs";
 
 // host
 const HOST = config.host("/api", "/act");
@@ -9,4 +10,24 @@ const queryPrizeInfo = param => {
   return ajax.get(`${HOST}/queryPrizeInfo`, param);
 };
 
-export { queryPrizeInfo };
+// 获取余额
+const queryTicketNum = param => {
+  return ajax.get(`${HOST}/queryTicketNum`, param);
+};
+
+// 获取抽奖规则次数
+const queryTicketRule = param => {
+  return ajax.get(`${HOST}/queryTicketRule`, param);
+};
+
+// 抽奖
+const doLottery = param => {
+  return ajax.post(`${HOST}/doLottery`, stringify(param), "form");
+};
+
+// 保存抽奖结果
+const saveLog = param => {
+  return ajax.post(`${HOST}/saveLog`, stringify(param), "form");
+};
+
+export { queryPrizeInfo, queryTicketNum, queryTicketRule, doLottery, saveLog };

src/components/bottomView/lotteryBtn.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="lottery-btn" :class="modeClass"></div>
+  <div class="lottery-btn" :class="modeClass" @click="clickLottery"></div>
 </template>
 
 <script>
+import eventBus from "@/lib/eventBus";
 export default {
   name: "LotteryBtn",
   props: {
@@ -16,6 +17,11 @@ export default {
       if (this.mode === "blue") return "lottery-btn-xy";
       return "lottery-btn-hh";
     }
+  },
+  methods: {
+    clickLottery() {
+      eventBus.$emit("eventLottery");
+    }
   }
 };
 </script>

src/components/bottomView/main.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="bottom-view" :class="modeClass">
     <div class="bottom-view-top">
-      <balance-view :mode="mode"></balance-view>
+      <balance-view :mode="mode" :value="remainTicketNum"></balance-view>
       <lottery-btn :mode="mode"></lottery-btn>
     </div>
     <div class="bottom-view-bottom">
       <ticket-view
-        v-for="(item, key) in list"
+        v-for="(item, key) in ticketRuleList"
         :key="`ticket_view_${key}`"
         :label="item.label"
         :desc="item.desc"
         :active="active === key"
         :mode="mode"
+        @click.native="clickTicketView(item, key)"
       ></ticket-view>
     </div>
   </div>
@@ -21,6 +22,8 @@
 import balanceView from "./balanceView.vue";
 import lotteryBtn from "./lotteryBtn.vue";
 import ticketView from "./ticketView.vue";
+import { queryTicketNum, queryTicketRule } from "@/api";
+import { mapMutations, mapGetters } from "vuex";
 export default {
   name: "BottomView",
   components: {
@@ -35,32 +38,103 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(["remainTicketNum"]),
     modeClass() {
       if (this.mode === "blue") return "bottom-view-xy";
       return "bottom-view-hh";
+    },
+    uid() {
+      return this.$route.query.uid;
+    },
+    roomUid() {
+      return this.$route.query.roomUid;
+    },
+    drawType() {
+      if (this.mode === "blue") return "turntable1";
+      return "turntable2";
+    },
+    ticketRuleList() {
+      const list = [];
+      if (!this.ticketRule) return list;
+      for (let index = 0; index < this.ticketRuleConfig.length; index++) {
+        const element = this.ticketRuleConfig[index];
+        const val = this.ticketRule[element.ruleType];
+        list.push({
+          label: element.name,
+          desc: `${val}张鱼券`,
+          value: val,
+          ruleType: element.ruleType
+        });
+      }
+      return list;
+    }
+  },
+  watch: {
+    mode() {
+      this.active = 0;
+    },
+    active() {
+      this.SetRuleType(this.ticketRuleConfig[this.active].ruleType);
     }
   },
   data() {
     return {
       active: 0,
-      list: [
+      ticketRule: null,
+      ticketRuleConfig: [
         {
-          label: "1次",
+          ruleType: "one",
-          desc: "1张鱼券",
+          name: "1次",
-          value: 1
+          index: 0
         },
         {
-          label: "10次",
+          ruleType: "ten",
-          desc: "10张鱼券",
+          name: "10次",
-          value: 1
+          index: 1
         },
         {
-          label: "100次",
+          ruleType: "hundred",
-          desc: "100张鱼券",
+          name: "100次",
-          value: 1
+          index: 2
         }
       ]
     };
+  },
+  created() {
+    this.getQueryTicketNum();
+    this.getqueryTicketRule();
+  },
+  methods: {
+    ...mapMutations(["SetRuleType", "SetRemainTicketNum"]),
+    getQueryTicketNum() {
+      queryTicketNum({ uid: this.uid })
+        .then(res => {
+          const { code, data } = res;
+          if (code === 200) {
+            this.SetRemainTicketNum(data.num || 0);
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取余额失败！");
+        });
+    },
+    getqueryTicketRule() {
+      queryTicketRule({ drawType: this.drawType })
+        .then(res => {
+          const { code, data } = res;
+          if (code === 200) {
+            this.ticketRule = data || null;
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取规则次数失败！");
+        });
+    },
+    clickTicketView(item, index) {
+      console.log(item, index);
+      this.active = index;
+      // this.SetRuleType(item.ruleType);
+    }
   }
 };
 </script>

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) {
+    startLottery() {
-      console.log(num, unit);
+      this.postDoLottery();
-      if (unit === "vw") {
+    },
-        return (window.innerWidth / 100) * num;
+    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() {
+    endCallBack() {
-      if (!this.luckyNum) return alert("还剩0次抽奖机会");
+      this.showDialog = true;
-      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();
     }
   }
 };
@@ -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>

src/components/topButton/main.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="top-button">
-    <large-top-button :mode="mode"></large-top-button>
+    <top-btn-view
-
+      :mode="mode"
-    <small-top-button :mode="mode"></small-top-button>
+      :active="active === 0"
+      @click.native="clickBtnView(0)"
+    ></top-btn-view>
+    <top-btn-view
+      :mode="mode"
+      :active="active === 1"
+      @click.native="clickBtnView(1)"
+    ></top-btn-view>
   </div>
 </template>
 
 <script>
-import largeTopButton from "./large.vue";
+import topBtnView from "./topBtnView.vue";
-import smallTopButton from "./small.vue";
 export default {
   name: "TopButton",
   components: {
-    largeTopButton,
+    topBtnView
-    smallTopButton
   },
   props: {
     mode: {
@@ -21,7 +26,18 @@ export default {
       default: "blue"
     }
   },
-  computed: {}
+  computed: {
+    active() {
+      if (this.mode === "blue") return 0;
+      if (this.mode === "gold") return 1;
+      return 0;
+    }
+  },
+  methods: {
+    clickBtnView(index) {
+      this.$emit("clickTopButton", index);
+    }
+  }
 };
 </script>
 

src/components/topButton/topBtnView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <large-top-button :mode="mode" v-if="active"></large-top-button>
+    <small-top-button :mode="mode" v-else></small-top-button>
+  </div>
+</template>
+
+<script>
+import largeTopButton from "./large.vue";
+import smallTopButton from "./small.vue";
+export default {
+  name: "TopBtnView",
+  components: {
+    largeTopButton,
+    smallTopButton
+  },
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    active(val) {
+      console.log("watch", val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/lib/eventBus.js

@@ -0,0 +1,2 @@
+import Vue from "vue";
+export default new Vue();

src/main.js

@@ -2,9 +2,13 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import { Toast, Dialog } from "vant";
 
 Vue.config.productionTip = false;
 
+Vue.use(Toast);
+Vue.use(Dialog);
+
 new Vue({
   router,
   store,

src/store/index.js

@@ -4,8 +4,42 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: {
-  mutations: {},
+    prizeInfo: [],
+    ruleType: "one",
+    remainTicketNum: 0
+  },
+  getters: {
+    prizeInfo: state => {
+      return state.prizeInfo;
+    },
+    prizeIdList: state => {
+      const { prizeInfo } = state;
+      const list = [];
+      for (let index = 0; index < prizeInfo.length; index++) {
+        const element = prizeInfo[index];
+        list.push(element.prizeId);
+      }
+      return list;
+    },
+    ruleType: state => {
+      return state.ruleType;
+    },
+    remainTicketNum: state => {
+      return state.remainTicketNum;
+    }
+  },
+  mutations: {
+    SetPrizeInfo(state, payload) {
+      state.prizeInfo = payload;
+    },
+    SetRuleType(state, payload) {
+      state.ruleType = payload;
+    },
+    SetRemainTicketNum(state, payload) {
+      state.remainTicketNum = payload;
+    }
+  },
   actions: {},
   modules: {}
 });

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div class="top-btn-and-box">
       <div class="top-btn-box">
-        <top-button :mode="mode"></top-button>
+        <top-button :mode="mode" @clickTopButton="clickTopButton"></top-button>
       </div>
       <div class="top-ball-box">
         <ball-content :mode="mode"></ball-content>
@@ -33,12 +33,23 @@ export default {
   },
   data() {
     return {
-      mode: "gold" // blue  gold
+      active: 0
     };
   },
-  computed: {},
+  computed: {
+    mode() {
+      if (this.active === 0) return "blue";
+      if (this.active === 1) return "gold";
+      return "blue";
+    }
+  },
   mounted() {},
-  methods: {}
+  methods: {
+    clickTopButton(index) {
+      this.active = index;
+      console.log("active", index);
+    }
+  }
 };
 </script>