From 145fbcf834a4d022f14a9a90027650001325e0f0 Mon Sep 17 00:00:00 2001
From: dengtongyu <dengtongyu123@163.com>
Date: Sun, 16 Apr 2023 14:46:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                          |   7 +-
 src/components/bottomView/balanceView.vue |   6 +-
 src/components/buyGiftPop/index.js        |   7 +
 src/components/buyGiftPop/main.vue        | 168 ++++++++++++++++++++++
 src/components/luckyGridView/main.vue     | 101 +++++++++----
 src/lib/tool.js                           |   2 +-
 src/main.js                               |   6 +-
 src/store/index.js                        | 103 ++++++++++++-
 src/views/Home.vue                        |  50 ++++++-
 src/views/recharge.vue                    | 108 +++++---------
 10 files changed, 439 insertions(+), 119 deletions(-)
 create mode 100644 src/components/buyGiftPop/index.js
 create mode 100644 src/components/buyGiftPop/main.vue

diff --git a/src/api/index.js b/src/api/index.js
index ebaf282..58d5b0b 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -57,6 +57,10 @@ const buyPack = param => {
   return ajax.post(`${HOST}/buyPack`, stringify(param));
 };
 
+const buyAndLottery = param => {
+  return ajax.post(`${HOST}/lottery`, stringify(param));
+};
+
 export {
   queryPrizeInfo,
   queryTicketNum,
@@ -68,5 +72,6 @@ export {
   rateList,
   getRulePic,
   queryPackList,
-  buyPack
+  buyPack,
+  buyAndLottery
 };
diff --git a/src/components/bottomView/balanceView.vue b/src/components/bottomView/balanceView.vue
index 235dc1f..ea13f62 100644
--- a/src/components/bottomView/balanceView.vue
+++ b/src/components/bottomView/balanceView.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { money } from "@/config";
+import { unit } from "@/config";
 import eventBus from "@/lib/eventBus";
 export default {
   name: "BalanceView",
@@ -25,7 +25,7 @@ export default {
   },
   data() {
     return {
-      money
+      unit
     };
   },
   computed: {
@@ -34,7 +34,7 @@ export default {
       return "balance-view-hh";
     },
     moneyStr() {
-      return `${money}余额：`;
+      return `${unit}余额：`;
     }
   },
   methods: {
diff --git a/src/components/buyGiftPop/index.js b/src/components/buyGiftPop/index.js
new file mode 100644
index 0000000..a309cea
--- /dev/null
+++ b/src/components/buyGiftPop/index.js
@@ -0,0 +1,7 @@
+import BuyGiftPop from "./main";
+
+BuyGiftPop.install = function(Vue) {
+  Vue.component(BuyGiftPop.name, BuyGiftPop);
+};
+
+export default BuyGiftPop;
diff --git a/src/components/buyGiftPop/main.vue b/src/components/buyGiftPop/main.vue
new file mode 100644
index 0000000..ba213b7
--- /dev/null
+++ b/src/components/buyGiftPop/main.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="buy-Gift-pop">
+    <h3>购买限定装扮</h3>
+    <div class="buy-Gift-pop-main">
+      <div class="buy-Gift-pop-main-gift">
+        <div class="buy-Gift-pop-main-gift-image">
+          <img :src="giftUrl" />
+        </div>
+        <div class="buy-Gift-pop-main-gift-info">
+          <p>{{ giftName }}</p>
+          <p>{{ giftPrize }}</p>
+          <p>赠送{{ needNumber }}门票</p>
+        </div>
+      </div>
+      <div class="buy-Gift-pop-main-checkbox">
+        <van-checkbox
+          class="never-notice-checkbox"
+          v-model="neverNotice"
+          checked-color="#FFEF30"
+          >以后不再提示</van-checkbox
+        >
+      </div>
+      <div class="buy-Gift-pop-main-btn">
+        <van-button
+          class="buy-Gift-pop-main-btn-buy"
+          type="default"
+          color="#FFEF30"
+          round
+          block
+          @click="buyHandler"
+          >立即购买</van-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+import { money } from "@/config";
+import eventBus from "@/lib/eventBus";
+export default {
+  name: "BuyGiftPop",
+  components: {},
+  props: {
+    needNumber: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      defaultShowImg: require("@/assets/images/logo.jpg"),
+      neverNotice: false
+    };
+  },
+  computed: {
+    ...mapGetters([
+      "happyGiftList",
+      "curHappyGift",
+      "curHappyGiftSellingPrice",
+      "curHappyGiftUrl"
+    ]),
+    giftUrl() {
+      if (this.curHappyGiftUrl) return this.curHappyGiftUrl;
+      return this.defaultShowImg;
+    },
+    giftName() {
+      if (this.curHappyGift && this.curHappyGift.name)
+        return this.curHappyGift.name;
+      return "";
+    },
+    giftPrize() {
+      if (this.curHappyGift && this.curHappyGiftSellingPrice)
+        return `${this.curHappyGiftSellingPrice * this.needNumber}${money}/${
+          this.needNumber
+        }天`;
+      return "";
+    }
+  },
+  watch: {},
+  created() {
+    if (this.happyGiftList.length === 0) this.loadPackList();
+  },
+  mounted() {},
+
+  methods: {
+    ...mapActions(["loadPackList", "buyAndLottery"]),
+    buyHandler() {
+      if (this.neverNotice)
+        localStorage.setItem("_toupaipaidui_never_notice_", true);
+      //   this.buyAndLottery({ packNum: this.needNumber });
+      eventBus.$emit("buyAndLotteryEvent", this.needNumber);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.buy-Gift-pop {
+  padding: 30px 60px;
+  & > h3 {
+    font-size: 36px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    color: #222222;
+    line-height: 72px;
+    text-align: center;
+  }
+  &-main {
+    margin-top: 36px;
+    &-gift {
+      //   height: 188px;
+      width: 100%;
+      display: flex;
+      background: linear-gradient(90deg, #d782ff 0%, #a457f4 100%);
+      border-radius: 30px;
+      padding: 24px 20px;
+      box-sizing: border-box;
+      align-items: center;
+      &-image {
+        width: 140px;
+        height: 140px;
+        background: rgba(121, 30, 188, 0.2);
+        border-radius: 24px;
+        padding: 10px;
+        box-sizing: border-box;
+        & > img {
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        }
+      }
+
+      &-info {
+        padding-left: 36px;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 36px;
+        & > :first-child {
+          font-size: 30px;
+          line-height: 46px;
+        }
+      }
+    }
+    &-checkbox {
+      display: flex;
+      justify-content: center;
+      margin-top: 60px;
+    }
+    &-btn {
+      width: 320px;
+      height: 10px;
+      margin: 50px auto 0;
+      &-buy {
+        color: #222 !important;
+      }
+    }
+  }
+}
+.never-notice-checkbox {
+  :deep(.van-checkbox__icon--checked .van-icon) {
+    color: #222 !important;
+  }
+}
+</style>
diff --git a/src/components/luckyGridView/main.vue b/src/components/luckyGridView/main.vue
index 2333e31..2205107 100644
--- a/src/components/luckyGridView/main.vue
+++ b/src/components/luckyGridView/main.vue
@@ -21,9 +21,10 @@
 </template>
 
 <script>
-import { LuckyGrid } from "vue-luck-draw";
-import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
 import { mapMutations, mapGetters, mapActions } from "vuex";
+import { LuckyGrid } from "vue-luck-draw";
+import { Dialog } from "vant";
+import lotteryPrizesDialog from "@/components/lotteryPrizesDialog";
 import eventBus from "@/lib/eventBus";
 export default {
   name: "LuckyGridView",
@@ -74,7 +75,9 @@ export default {
       defaultImage: require("@/assets/images/logo_tm.png"),
       showDialog: false,
       timeout: false,
-      request: false
+      request: false,
+      LotteryError: false,
+      LotteryErrorMsg: ""
     };
   },
   computed: {
@@ -130,13 +133,15 @@ export default {
     }
   },
   created() {
-    eventBus.$on("eventLottery", this.startLottery);
-  },
-  mounted() {
     this.queryPrizeInfo();
   },
-  destroyed() {
+  mounted() {
+    eventBus.$on("eventLottery", this.startLottery);
+    eventBus.$on("buyAndLotteryEvent", this.buyAndLottery);
+  },
+  beforeDestroy() {
     eventBus.$off("eventLottery", this.startLottery);
+    eventBus.$off("buyAndLotteryEvent", this.buyAndLottery);
   },
   methods: {
     ...mapMutations([
@@ -144,39 +149,42 @@ export default {
       "SetCanLottery"
       // "SetPrizeItemList"
     ]),
-    ...mapActions(["getQueryPrizeInfo", "runLottery"]),
+    ...mapActions(["getQueryPrizeInfo", "runLottery", "postBuyPack"]),
     queryPrizeInfo() {
       this.getQueryPrizeInfo().then(list => {
         this.prizes = this.configPrizes(list);
       });
     },
     postDoLottery() {
-      if (
-        this.remainTicketNum === 0 ||
-        this.remainTicketNum < this.curTicketRuleValue
-      ) {
-        this.$toast.fail("余额不足！");
-        this.SetCanLottery(true);
-        return;
-      }
-
       this.timeout = false;
       this.request = false;
       this.$refs.LuckDraw.play();
 
-      this.runLottery().then(res => {
-        const { code } = res;
-        if (code === 200) {
+      this.runLottery()
+        .then(res => {
           this.request = true;
-          if (this.timeout && this.request)
-            this.stopLuckDraw(this.maxVauePrizeIndex);
-        }
-      });
+          const { code, message } = res;
+          if (code === 200) {
+            this.LotteryError = false;
+            if (this.timeout && this.request)
+              this.stopLuckDraw(this.maxVauePrizeIndex);
+          } else {
+            this.LotteryError = true;
+            this.LotteryErrorMsg = message;
+          }
+        })
+        .catch(() => {
+          this.request = true;
+          this.LotteryError = true;
+          this.LotteryErrorMsg = "抽奖发生意外错误！";
+        });
 
       setTimeout(() => {
         this.timeout = true;
-        if (this.timeout && this.request)
-          this.stopLuckDraw(this.maxVauePrizeIndex);
+        if (this.timeout && this.request) {
+          const stopIndex = this.LotteryError ? 0 : this.maxVauePrizeIndex;
+          this.stopLuckDraw(stopIndex);
+        }
       }, this.runTime);
     },
     configPrizes(prizeInfo) {
@@ -209,8 +217,36 @@ export default {
       return prizes;
     },
     startLottery() {
+      const localNoticeStatus = localStorage.getItem(
+        "_toupaipaidui_never_notice_"
+      );
+      if (
+        this.remainTicketNum === 0 ||
+        this.remainTicketNum < this.curTicketRuleValue
+      ) {
+        // this.$toast.fail("余额不足！");
+        const dValue = this.curTicketRuleValue - this.remainTicketNum;
+        if (localNoticeStatus) {
+          this.buyAndLottery(dValue);
+          return;
+        } else {
+          eventBus.$emit("noTickets", dValue);
+          this.SetCanLottery(true);
+          return;
+        }
+      }
+
       this.postDoLottery();
     },
+    buyAndLottery(dValue) {
+      this.postBuyPack({ packNum: dValue })
+        .then(() => {
+          this.postDoLottery();
+        })
+        .catch(() => {
+          this.SetCanLottery(true);
+        });
+    },
     stopLuckDraw(index) {
       this.$refs.LuckDraw.stop(index);
     },
@@ -226,8 +262,19 @@ export default {
       return num;
     },
     endCallBack() {
-      this.showDialog = true;
       this.SetCanLottery(true);
+      if (this.LotteryError) {
+        Dialog.alert({
+          message: this.LotteryErrorMsg,
+          confirmButtonColor: "#9E98FF"
+        }).then(() => {
+          // on close
+          this.LotteryError = false;
+          this.LotteryErrorMsg = "";
+        });
+      } else {
+        this.showDialog = true;
+      }
       // this.SetPrizeItemList(this.prizeItemList);
     }
   }
diff --git a/src/lib/tool.js b/src/lib/tool.js
index 8e3770f..940bdaa 100644
--- a/src/lib/tool.js
+++ b/src/lib/tool.js
@@ -219,7 +219,7 @@ const getMsgFromDevice = function() {
       location.hostname === "localhost"
     ) {
       window.info.roomUid = 904860;
-      window.info.uid = 1000002;
+      window.info.uid = 1000009;
       window.info.deviceId = "afhksafhksajhfs1kjahsfkjsf0000aaaaaaaacaa";
       window.info.ticket =
         "eyJhbGciOiJIUzI1NiJ9.eyJ0aWNrZXRfdHlwZSI6bnVsbCwidWlkIjo5MTMzOSwidGlja2V0X2lkIjoiOGJmMTdlYmQtMTY4ZC00NTliLWI0NzUtMDU3M2Y1ZmM4MDQzIiwiZXhwIjozNjAwLCJjbGllbnRfaWQiOiJlcmJhbi1jbGllbnQifQ.MnKGEc6bSkyOkCbx26lib6J0koFDA2uiKnbwkhdk3MU";
diff --git a/src/main.js b/src/main.js
index 885105b..3189db0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,9 @@ import {
   Empty,
   Icon,
   PullRefresh,
-  Button
+  Button,
+  Checkbox,
+  CheckboxGroup
 } from "vant";
 
 Vue.config.productionTip = false;
@@ -29,6 +31,8 @@ Vue.use(Empty);
 Vue.use(Icon);
 Vue.use(PullRefresh);
 Vue.use(Button);
+Vue.use(Checkbox);
+Vue.use(CheckboxGroup);
 
 new Vue({
   router,
diff --git a/src/store/index.js b/src/store/index.js
index 31bdd64..e8e486b 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,7 +6,9 @@ import {
   queryTicketRule,
   doLottery,
   saveLog,
-  queryTicketNum
+  queryTicketNum,
+  queryPackList,
+  buyPack
 } from "@/api";
 import { getMsgFromDevice, getQueryString } from "@/lib/tool";
 import { unit } from "@/config";
@@ -27,6 +29,7 @@ export default new Vuex.Store({
     ruleType: "one",
     remainTicketNum: 0,
     goldNum: 0,
+    happyGiftList: [],
     ticketRule: null,
     canLottery: true,
     lotteryRecordRateVo: {},
@@ -80,12 +83,28 @@ export default new Vuex.Store({
     goldNum: state => {
       return state.goldNum;
     },
+    happyGiftList: state => {
+      return state.happyGiftList;
+    },
+    curHappyGift: (state, getters) => {
+      return getters.happyGiftList[0] || null;
+    },
+    curHappyGiftSellingPrice: (state, getters) => {
+      if (getters.curHappyGift && getters.curHappyGift.sellingPrice)
+        return getters.curHappyGift.sellingPrice;
+      return 0;
+    },
+    curHappyGiftUrl: (state, getters) => {
+      if (getters.curHappyGift && getters.curHappyGift.imgUrl)
+        return getters.curHappyGift.imgUrl;
+      return "";
+    },
     ticketRule: state => {
       return state.ticketRule;
     },
     curTicketRuleValue: state => {
       if (!state.ticketRule) return 0;
-      return state.ticketRule[state.ruleType];
+      return state.ticketRule[state.ruleType].times;
     },
     canLottery: state => {
       return state.canLottery;
@@ -183,6 +202,9 @@ export default new Vuex.Store({
     SetGoldNum(state, payload) {
       state.goldNum = payload;
     },
+    SetHappyGiftList(state, payload) {
+      state.happyGiftList = payload;
+    },
     SetTicketRule(state, payload) {
       state.ticketRule = payload;
     },
@@ -243,7 +265,7 @@ export default new Vuex.Store({
           Toast.fail("获取规则次数失败！");
         });
     },
-    runLottery({ state, commit }) {
+    runLottery({ state, commit, dispatch }) {
       if (!locateObj.actId) {
         Toast.fail("获取活动信息失败！");
         return;
@@ -266,18 +288,19 @@ export default new Vuex.Store({
           deviceId: info.deviceId
         })
           .then(res => {
-            const { code, data, message } = res;
+            const { code, data } = res;
             if (code === 200) {
-              commit("SetRemainTicketNum", data.remainTicketNum || 0);
+              // commit("SetRemainTicketNum", data.remainTicketNum || 0);
               commit("SetLotteryData", data);
               // dispatch("postSaveLog", option);
+              dispatch("getQueryTicketNum");
             } else {
-              Toast.fail(message);
+              // Toast.fail(message);
             }
             resolve(res);
           })
           .catch(err => {
-            Toast.fail("抽奖发生意外错误！");
+            // Toast.fail("抽奖发生意外错误！");
             reject(err);
           });
       });
@@ -305,6 +328,72 @@ export default new Vuex.Store({
         .catch(() => {
           Toast.fail("获取余额失败！");
         });
+    },
+    loadPackList({ commit }) {
+      queryPackList({ actId: locateObj.actId })
+        .then(res => {
+          const { code, data, message } = res;
+          if (code === 200 && data && data.length) {
+            // this.getHappyGiftObj = data[0];
+            commit("SetHappyGiftList", data);
+          } else {
+            Toast.fail(message || "获取礼包失败！");
+          }
+        })
+        .catch(() => {
+          Toast.fail("获取礼包出现意外！");
+        });
+    },
+    postBuyPack({ commit, getters }, option) {
+      return new Promise((resolve, reject) => {
+        if (!getters.curHappyGift) {
+          Toast.fail("未获取到礼包信息！");
+          reject("未获取到礼包信息！");
+          return;
+        }
+        if (!getters.curHappyGift.id) {
+          Toast.fail("未获取到礼包信息！");
+          reject("未获取到礼包信息！");
+          return;
+        }
+        Toast.loading({
+          message: "加载中...",
+          forbidClick: true,
+          duration: 0
+        });
+        buyPack({
+          packId: getters.curHappyGift.id,
+          packNum: option.packNum
+        })
+          .then(res => {
+            Toast.clear();
+            const { code, message, data } = res;
+            if (code === 200) {
+              // console.log(this.goldNum, data, this.goldNum + data);
+              let prize = getters.curHappyGiftSellingPrice * option.packNum;
+              commit("SetRemainTicketNum", getters.remainTicketNum + data);
+              commit("SetGoldNum", getters.goldNum - prize);
+              const localNoticeStatus = localStorage.getItem(
+                "_toupaipaidui_never_notice_"
+              );
+              if (!localNoticeStatus) Toast.success("购买成功");
+              resolve(res);
+            } else {
+              Toast.fail(message || "购买礼包失败！");
+              reject(res);
+            }
+          })
+          .catch(err => {
+            Toast.clear();
+            Toast.fail("购买礼包出现意外错误！");
+            reject(err);
+          });
+      });
+    },
+    buyAndLottery({ dispatch }, option) {
+      dispatch("postBuyPack", option).then(() => {
+        dispatch("runLottery");
+      });
     }
   },
   modules: {}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index a181637..9d1b103 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -38,6 +38,17 @@
       <!-- <prizes-view></prizes-view> -->
       <component :is="curComponentsName"></component>
     </van-popup>
+
+    <van-popup
+      v-model="buyGiftVisible"
+      :style="{ width: '80%', height: '82vw' }"
+      :close-on-click-overlay="false"
+      closeable
+      round
+      get-container="#app"
+    >
+      <buyGiftPop :needNumber="needNumber" />
+    </van-popup>
   </div>
 </template>
 
@@ -46,8 +57,8 @@ import topButton from "@/components/topButton";
 import ballContent from "@/components/ballContent";
 import enterView from "@/components/enterView";
 import bottomView from "@/components/bottomView";
-// import prizesView from "./prizesView.vue";
-import { mapMutations, mapGetters } from "vuex";
+import buyGiftPop from "@/components/buyGiftPop";
+import { mapMutations, mapGetters, mapActions } from "vuex";
 import { tools } from "@/lib/tool";
 import eventBus from "@/lib/eventBus";
 
@@ -58,7 +69,7 @@ export default {
     ballContent,
     enterView,
     bottomView,
-    // prizesView
+    buyGiftPop,
     prizesView: resolve => require(["./prizesView.vue"], resolve),
     ruleView: resolve => require(["./ruleView.vue"], resolve),
     recordView: resolve => require(["./recordView.vue"], resolve),
@@ -69,6 +80,7 @@ export default {
   data() {
     return {
       show: false,
+      buyGiftVisible: false,
       curBtnText: "",
       componentsName: {
         排行: "rank-view",
@@ -77,11 +89,13 @@ export default {
         记录: "record-view",
         数据: "data-view",
         充值: "recharge-view"
-      }
+      },
+      localNoticeStatus: false,
+      needNumber: 0
     };
   },
   computed: {
-    ...mapGetters(["drawType"]),
+    ...mapGetters(["drawType", "happyGiftList"]),
     curComponentsName() {
       return this.componentsName[this.curBtnText];
     },
@@ -94,11 +108,25 @@ export default {
   //     console.log("this.show", this.show);
   //   }
   // },
+  created() {
+    this.localNoticeStatus = localStorage.getItem(
+      "_toupaipaidui_never_notice_"
+    );
+    if (this.happyGiftList.length === 0) this.loadPackList();
+  },
   mounted() {
     eventBus.$on("rechargeView", this.showRechargeView);
+    eventBus.$on("noTickets", this.noTicketsHander);
+    eventBus.$on("buyAndLotteryEvent", this.closeBuyAndLotteryPopHandler);
+  },
+  beforeDestroy() {
+    eventBus.$off("rechargeView", this.showRechargeView);
+    eventBus.$off("noTickets", this.noTicketsHander);
+    eventBus.$off("buyAndLotteryEvent", this.closeBuyAndLotteryPopHandler);
   },
   methods: {
     ...mapMutations(["SetDrawType"]),
+    ...mapActions(["loadPackList"]),
     clickTopButton(index) {
       this.SetDrawType(index);
       // console.log("active", index);
@@ -119,6 +147,18 @@ export default {
     showRechargeView() {
       this.curBtnText = "充值";
       this.show = true;
+    },
+    noTicketsHander(dValue) {
+      this.needNumber = dValue;
+      this.localNoticeStatus = localStorage.getItem(
+        "_toupaipaidui_never_notice_"
+      );
+      if (!this.localNoticeStatus) {
+        this.buyGiftVisible = true;
+      }
+    },
+    closeBuyAndLotteryPopHandler() {
+      this.buyGiftVisible = false;
     }
   }
 };
diff --git a/src/views/recharge.vue b/src/views/recharge.vue
index 6df7c01..4aaa3ce 100644
--- a/src/views/recharge.vue
+++ b/src/views/recharge.vue
@@ -18,7 +18,7 @@
             @click="selectHandler(item)"
           >
             <p class="list-day-item">{{ item.packNum }}天</p>
-            <p>{{ item.money }}{{ money }}</p>
+            <p>{{ item.prize }}{{ money }}</p>
           </div>
         </div>
         <div class="recharge-view-content-button">
@@ -34,11 +34,12 @@
       </div>
       <div class="recharge-view-footer">
         <div class="surplus-itme">
-          <span>剩余欢乐券：</span
+          <span>剩余{{ unit }}：</span
           ><span class="light">{{ this.remainTicketNum }}</span>
         </div>
         <div class="surplus-itme">
-          <span>剩余金币：</span><span class="light">{{ this.goldNum }}</span>
+          <span>剩余{{ money }}：</span
+          ><span class="light">{{ this.goldNum }}</span>
         </div>
       </div>
     </div>
@@ -46,8 +47,7 @@
 </template>
 
 <script>
-import { queryPackList, buyPack } from "@/api";
-import { mapGetters, mapMutations } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 import { money, unit } from "@/config";
 export default {
   name: "rechargeView",
@@ -56,63 +56,49 @@ export default {
     return {
       money,
       unit,
-      getHappyGiftObj: null,
       defaultShowImg: require("@/assets/images/logo.jpg"),
-      selectOption: [
-        {
-          packNum: 1,
-          money: 20
-        },
-        {
-          packNum: 10,
-          money: 200
-        },
-        {
-          packNum: 100,
-          money: 2000
-        },
-        {
-          packNum: 1000,
-          money: 20000
-        }
-      ],
       curSelect: null
     };
   },
   computed: {
-    ...mapGetters(["goldNum", "remainTicketNum"]),
+    ...mapGetters([
+      "goldNum",
+      "remainTicketNum",
+      "happyGiftList",
+      "curHappyGift",
+      "curHappyGiftSellingPrice",
+      "curHappyGiftUrl",
+      "curTicketRuleValue"
+    ]),
     actId() {
       return this.$route.query.actId;
     },
     showImg() {
-      if (this.getHappyGiftObj && this.getHappyGiftObj.imgUrl)
-        return this.getHappyGiftObj.imgUrl;
+      if (this.curHappyGiftUrl) return this.curHappyGiftUrl;
       return this.defaultShowImg;
     },
     dialogText() {
-      return `确定花费${this.curSelect.money}${this.money}购买${this.curSelect.packNum}天${this.getHappyGiftObj.name}吗？`;
+      return `确定花费${this.curSelect.prize}${this.money}购买${this.curSelect.packNum}天${this.curHappyGift.name}吗？`;
+    },
+    selectOption() {
+      const arr = [1, 10, 100, 1000];
+      const list = [];
+      for (let index = 0; index < arr.length; index++) {
+        const element = arr[index];
+        list.push({
+          packNum: element,
+          prize: this.curHappyGiftSellingPrice * element
+        });
+      }
+      return list;
     }
   },
   created() {
     this.curSelect = this.selectOption[0];
-    this.loadPackList();
+    if (this.happyGiftList.length === 0) this.loadPackList();
   },
   methods: {
-    ...mapMutations(["SetRemainTicketNum", "SetGoldNum"]),
-    loadPackList() {
-      queryPackList({ actId: this.actId })
-        .then(res => {
-          const { code, data, message } = res;
-          if (code === 200 && data && data.length) {
-            this.getHappyGiftObj = data[0];
-          } else {
-            this.$toast.fail(message || "获取礼包失败！");
-          }
-        })
-        .catch(() => {
-          this.$toast.fail("获取礼包出现意外！");
-        });
-    },
+    ...mapActions(["loadPackList", "postBuyPack"]),
     selectHandler(item) {
       this.curSelect = item;
     },
@@ -122,47 +108,21 @@ export default {
       return "";
     },
     openDialog() {
-      if (!this.getHappyGiftObj) return;
-      if (!this.getHappyGiftObj.id) return;
+      if (!this.curHappyGift) return;
+      if (!this.curHappyGift.id) return;
       this.$dialog
         .confirm({
           title: "提示",
+          confirmButtonColor: "#9E98FF",
           message: this.dialogText
         })
         .then(() => {
           // on confirm
-          this.postBuyPack();
+          this.postBuyPack({ packNum: this.curSelect.packNum });
         })
         .catch(() => {
           // on cancel
         });
-    },
-    postBuyPack() {
-      this.$toast.loading({
-        message: "加载中...",
-        forbidClick: true,
-        duration: 0
-      });
-      buyPack({
-        packId: this.getHappyGiftObj.id,
-        packNum: this.curSelect.packNum
-      })
-        .then(res => {
-          this.$toast.clear();
-          const { code, message, data } = res;
-          if (code === 200) {
-            // console.log(this.goldNum, data, this.goldNum + data);
-            this.SetRemainTicketNum(this.remainTicketNum + data);
-            this.SetGoldNum(this.goldNum - this.curSelect.money);
-            this.$toast.success("购买成功");
-          } else {
-            this.$toast.fail(message || "购买礼包失败！");
-          }
-        })
-        .catch(() => {
-          this.$toast.clear();
-          this.$toast.fail("购买礼包出现意外错误！");
-        });
     }
   }
 };