feat:暂存

src/components/ballContent/main.vue

@@ -2,10 +2,10 @@
   <div class="ball-content" :class="modeClass">
     <div class="ball-content-main">
       <div class="ball-content-main-notice">
-        <notice :mode="mode" :gifts="prizeItemList"></notice>
+        <notice :drawType="drawType" :gifts="prizeItemList"></notice>
       </div>
       <div class="ball-content-main-grid">
-        <lucky-grid-view :mode="mode"></lucky-grid-view>
+        <lucky-grid-view></lucky-grid-view>
       </div>
     </div>
   </div>
@@ -21,23 +21,18 @@ export default {
     notice,
     luckyGridView
   },
-  props: {
-    mode: {
-      type: String,
-      default: "blue"
-    }
-  },
+  props: {},
   computed: {
-    ...mapGetters(["prizeItemList"]),
+    ...mapGetters(["prizeItemList", "drawType"]),
     modeClass() {
-      if (this.mode === "blue") return "ball-xy";
+      if (this.drawType === "turntable1") return "ball-xy";
       return "ball-hh";
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .ball-content {
   width: 676px;
   height: 430px;

src/components/ballContent/notice.vue

@@ -27,9 +27,9 @@ export default {
     SwiperSlide
   },
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     },
     name: {
       type: String,
@@ -52,11 +52,11 @@ export default {
   },
   computed: {
     modeClass() {
-      if (this.mode === "blue") return "notice-xy";
+      if (this.drawType === "turntable1") return "notice-xy";
       return "notice-hh";
     },
     modeName() {
-      if (this.mode === "blue") return "幸运扭扭蛋";
+      if (this.drawType === "turntable1") return "幸运扭扭蛋";
       return "豪华扭扭蛋";
     }
   },
@@ -84,7 +84,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 @import "~swiper/css/swiper.css";
 .notice {
   width: 618px;
@@ -92,10 +92,10 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0 auto;
-  overflow: hidden;
   &-swiper {
     width: 100%;
     height: 100%;
+    overflow: hidden;
     &-slide {
       width: 100%;
       height: 100%;
@@ -106,6 +106,7 @@ export default {
         white-space: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
+        font-size: 14px;
         & > label {
           color: #ffe26c;
         }

src/components/bottomView/balanceView.vue

@@ -12,9 +12,9 @@
 export default {
   name: "BalanceView",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     },
     value: {
       type: Number,
@@ -23,14 +23,14 @@ export default {
   },
   computed: {
     modeClass() {
-      if (this.mode === "blue") return "balance-view-xy";
+      if (this.drawType === "turntable1") return "balance-view-xy";
       return "balance-view-hh";
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .balance-view {
   width: 345px;
   height: 84px;

src/components/bottomView/lotteryBtn.vue

@@ -8,15 +8,15 @@ import { mapMutations, mapGetters } from "vuex";
 export default {
   name: "LotteryBtn",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     }
   },
   computed: {
     ...mapGetters(["canLottery"]),
     modeClass() {
-      if (this.mode === "blue") return "lottery-btn-xy";
+      if (this.drawType === "turntable1") return "lottery-btn-xy";
       return "lottery-btn-hh";
     }
   },
@@ -34,7 +34,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .lottery-btn {
   width: 262px;
   height: 115px;

src/components/bottomView/main.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="bottom-view" :class="modeClass">
     <div class="bottom-view-top">
-      <balance-view :mode="mode" :value="remainTicketNum"></balance-view>
-      <lottery-btn :mode="mode"></lottery-btn>
+      <balance-view
+        :drawType="drawType"
+        :value="remainTicketNum"
+      ></balance-view>
+      <lottery-btn :drawType="drawType"></lottery-btn>
     </div>
     <div class="bottom-view-bottom">
       <ticket-view
@@ -11,7 +14,7 @@
         :label="item.label"
         :desc="item.desc"
         :active="active === key"
-        :mode="mode"
+        :drawType="drawType"
         @click.native="clickTicketView(item, key)"
       ></ticket-view>
     </div>
@@ -32,15 +35,15 @@ export default {
     ticketView
   },
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     }
   },
   computed: {
     ...mapGetters(["remainTicketNum", "ticketRule"]),
     modeClass() {
-      if (this.mode === "blue") return "bottom-view-xy";
+      if (this.drawType === "turntable1") return "bottom-view-xy";
       return "bottom-view-hh";
     },
     uid() {
@@ -49,10 +52,6 @@ export default {
     roomUid() {
       return this.$route.query.roomUid;
     },
-    drawType() {
-      if (this.mode === "blue") return "turntable1";
-      return "turntable2";
-    },
     ticketRuleList() {
       const list = [];
       if (!this.ticketRule) return list;
@@ -70,7 +69,7 @@ export default {
     }
   },
   watch: {
-    mode() {
+    drawType() {
       this.active = 0;
       this.getqueryTicketRule();
     },
@@ -136,7 +135,6 @@ export default {
         });
     },
     clickTicketView(item, index) {
-      console.log(item, index);
       this.active = index;
       // this.SetRuleType(item.ruleType);
     }
@@ -144,7 +142,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .bottom-view {
   width: 694px;
   height: 300px;

src/components/bottomView/ticketView.vue

@@ -11,9 +11,9 @@
 export default {
   name: "TicketView",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     },
     active: {
       type: Boolean,
@@ -31,7 +31,7 @@ export default {
   computed: {
     modeClass() {
       let str = "";
-      if (this.mode === "blue") {
+      if (this.drawType === "turntable1") {
         str = "ticket-view-xy";
       } else {
         str = "ticket-view-hh";
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .ticket-view {
   width: 130px;
   height: 110px;

src/components/enterView/btnView.vue

@@ -8,9 +8,9 @@
 export default {
   name: "BtnView",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     },
     text: {
       type: String,
@@ -19,17 +19,19 @@ export default {
   },
   computed: {
     modeClass() {
-      if (this.mode === "blue") return "btn-view-xy";
+      if (this.drawType === "turntable1") return "btn-view-xy";
       return "btn-view-hh";
     }
   },
   methods: {
-    clickEntryBtn() {}
+    clickEntryBtn() {
+      this.$emit("clickEntryBtn", this.text);
+    }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .btn-view {
   width: 107px;
   height: 61px;

src/components/enterView/main.vue

@@ -5,7 +5,8 @@
         v-for="(item, key) in btnList"
         :key="`enter_view_list_${key}`"
         :text="item"
-        :mode="mode"
+        :drawType="drawType"
+        @clickEntryBtn="clickEntryBtn"
       ></btn-view>
     </div>
   </div>
@@ -19,14 +20,14 @@ export default {
     btnView
   },
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     }
   },
   computed: {
     modeClass() {
-      if (this.mode === "blue") return "enter-view-xy";
+      if (this.drawType === "turntable1") return "enter-view-xy";
       return "enter-view-hh";
     }
   },
@@ -34,11 +35,16 @@ export default {
     return {
       btnList: ["规则", "奖品", "排行", "记录"]
     };
+  },
+  methods: {
+    clickEntryBtn(text) {
+      this.$emit("clickEntryBtn", text);
+    }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .enter-view {
   width: 676px;
   height: 79px;

src/components/luckyGridView/main.vue

@@ -13,7 +13,11 @@
       @end="endCallBack"
     />
 
-    <van-dialog v-model="showDialog" title="恭喜您获得奖品">
+    <van-dialog
+      v-model="showDialog"
+      confirmButtonColor="#9E98FF"
+      title="恭喜您获得奖品"
+    >
       <div class="lucky-grid-prize">
         <div
           class="lucky-grid-prize-item"
@@ -34,20 +38,15 @@
 
 <script>
 import { LuckyGrid } from "vue-luck-draw";
-import { queryPrizeInfo, doLottery, saveLog } from "@/api";
-import { mapMutations, mapGetters } from "vuex";
+import { doLottery, saveLog } from "@/api";
+import { mapMutations, mapGetters, mapActions } from "vuex";
 import eventBus from "@/lib/eventBus";
 export default {
   name: "LuckyGridView",
   components: {
     LuckyGrid
   },
-  props: {
-    mode: {
-      type: String,
-      default: "blue"
-    }
-  },
+  props: {},
   data() {
     return {
       luckyNum: 0,
@@ -94,13 +93,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["ruleType", "prizeIdList", "remainTicketNum"]),
-    drawType() {
-      if (this.mode === "blue") return "turntable1";
-      return "turntable2";
-    },
+    ...mapGetters(["ruleType", "prizeIdList", "remainTicketNum", "drawType"]),
     prizesImages() {
-      if (this.mode === "blue") return this.blueImages;
+      if (this.drawType === "turntable1") return this.blueImages;
       return this.goldImages;
     },
     uid() {
@@ -174,40 +169,33 @@ export default {
     }
   },
   watch: {
-    mode() {
-      this.getQueryPrizeInfo();
+    drawType() {
+      this.queryPrizeInfo();
     }
   },
   created() {
     eventBus.$on("eventLottery", this.startLottery);
   },
   mounted() {
-    this.getQueryPrizeInfo();
+    this.queryPrizeInfo();
   },
   destroyed() {
     eventBus.$off("eventLottery", this.startLottery);
   },
   methods: {
     ...mapMutations([
-      "SetPrizeInfo",
       "SetRemainTicketNum",
       "SetCanLottery",
       "SetPrizeItemList"
     ]),
-    getQueryPrizeInfo() {
-      queryPrizeInfo({ drawType: this.drawType })
-        .then(res => {
-          const { code, data, msg } = res;
-          if (code === 200) {
-            this.SetPrizeInfo(data);
-            this.prizes = this.configPrizes(data);
-          } else {
-            this.$toast.fail(msg);
-          }
-        })
-        .catch(() => {
-          this.$toast.fail("获取抽奖奖品信息失败！");
-        });
+    ...mapActions(["getQueryPrizeInfo"]),
+    queryPrizeInfo() {
+      this.getQueryPrizeInfo().then(res => {
+        const { code, data } = res;
+        if (code === 200) {
+          this.prizes = this.configPrizes(data);
+        }
+      });
     },
     postDoLottery() {
       if (
@@ -242,7 +230,7 @@ export default {
         }
       });
 
-      console.log("runTime", this.runTime);
+      // console.log("runTime", this.runTime);
 
       setTimeout(() => {
         this.timeout = true;
@@ -310,7 +298,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .lucky-grid-view {
   width: 100%;
   height: 330px;

src/components/prizesList/index.js

@@ -0,0 +1,7 @@
+import PrizesList from "./main";
+
+PrizesList.install = function(Vue) {
+  Vue.component(PrizesList.name, PrizesList);
+};
+
+export default PrizesList;

src/components/prizesList/main.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="prizes-list">
+    <div class="prizes-list-item" v-for="item in curList" :key="item.prizeId">
+      <div class="prizes-list-item-image">
+        <van-image width="100%" height="100%" :src="item.prizeImgUrl" />
+      </div>
+      <div class="prizes-list-item-name">
+        <span>{{ item.prizeName }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+export default {
+  name: "PrizesList",
+  props: {
+    drawType: {
+      type: String,
+      default: "turntable1"
+    }
+  },
+  computed: {
+    ...mapGetters(["prizeInfo"]),
+    curList() {
+      return this.prizeInfo[this.drawType];
+    }
+  },
+  created() {
+    if (this.curList.length === 0) this.getQueryPrizeInfo(this.drawType);
+  },
+  mounted() {},
+  methods: {
+    ...mapActions(["getQueryPrizeInfo"])
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.prizes-list {
+  display: flex;
+  flex-wrap: wrap;
+  &-item {
+    width: 170px;
+    margin: 20px 33px;
+    &-image {
+      width: 170px;
+      height: 170px;
+      background: #26144d;
+      border-radius: 24px;
+    }
+    &-name {
+      text-align: center;
+      font-size: 28px;
+      font-weight: 500;
+      color: #dbcfff;
+      line-height: 48px;
+      margin-top: 20px;
+    }
+  }
+}
+</style>

src/components/recordList/index.js

@@ -0,0 +1,7 @@
+import RecordList from "./main";
+
+RecordList.install = function(Vue) {
+  Vue.component(RecordList.name, RecordList);
+};
+
+export default RecordList;

src/components/recordList/main.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="record-list">
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      :error.sync="error"
+      error-text="请求失败，点击重新加载"
+      @load="getDrawRecord"
+    >
+      <div
+        class="record-list-item"
+        v-for="(item, index) in recordList"
+        :key="`${item.prizeId}_${index}`"
+      >
+        <record-item
+          :img="item.prizeImgUrl"
+          :name="item.prizeName"
+          :dateTime="dateFormat(item.createTime)"
+        ></record-item>
+      </div>
+    </van-list>
+  </div>
+</template>
+
+<script>
+import { drawRecord } from "@/api";
+import recordItem from "./recordItem.vue";
+import { mapMutations } from "vuex";
+export default {
+  name: "RecordItem",
+  components: {
+    recordItem
+  },
+  props: {
+    sortType: {
+      type: String,
+      default: "time"
+    }
+  },
+  // filters: {
+  //   dateTimeFormat(value) {
+  //     return this.dateFormat(value);
+  //   }
+  // },
+  data() {
+    return {
+      loading: false,
+      finished: false,
+      recordList: [],
+      pageSize: 10,
+      page: 1,
+      error: false
+    };
+  },
+  computed: {
+    uid() {
+      return this.$route.query.uid;
+    }
+  },
+  created() {
+    // this.getDrawRecord();
+    // console.log("created");
+  },
+  methods: {
+    ...mapMutations(["SetLotteryRecordRateVo"]),
+    getDrawRecord() {
+      console.log("getDrawRecord");
+      this.loading = true;
+      drawRecord({
+        uid: this.uid,
+        sortType: this.sortType,
+        page: this.page,
+        pageSize: this.pageSize
+      })
+        .then(res => {
+          this.loading = false;
+          const { code, data, msg } = res;
+          if (code === 200) {
+            const { drawPrizeItemVos, lotteryRecordRateVo } = data;
+            this.recordList = this.recordList.concat(drawPrizeItemVos);
+            this.SetLotteryRecordRateVo(lotteryRecordRateVo);
+            if (drawPrizeItemVos.length < this.pageSize) this.finished = true;
+          } else {
+            this.$toast.fail(msg);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          this.$toast.fail("获取抽奖记录失败！");
+        });
+    },
+    dateFormat(datetime, fmt = "YYYY-mm-dd HH:MM") {
+      let ret;
+      const date = new Date(datetime);
+      const opt = {
+        "Y+": date.getFullYear().toString(), // 年
+        "m+": (date.getMonth() + 1).toString(), // 月
+        "d+": date.getDate().toString(), // 日
+        "H+": date.getHours().toString(), // 时
+        "M+": date.getMinutes().toString(), // 分
+        "S+": date.getSeconds().toString() // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+      };
+      for (let k in opt) {
+        ret = new RegExp("(" + k + ")").exec(fmt);
+        if (ret) {
+          fmt = fmt.replace(
+            ret[1],
+            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
+          );
+        }
+      }
+      return fmt;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.record-list {
+  padding: 20px 30px;
+  &-item {
+    margin-top: 40px;
+  }
+  &:first-child {
+    margin-top: 0;
+  }
+}
+</style>

src/components/recordList/recordItem.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="record-item">
+    <div class="record-item-left">
+      <div class="record-item-left-image">
+        <van-image width="100%" height="100%" :src="img" />
+      </div>
+      <div class="record-item-left-text">
+        <span>{{ name }}</span>
+      </div>
+    </div>
+    <div class="record-item-right">
+      <span>{{ dateTime }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "RecordItem",
+  props: {
+    img: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    dateTime: {
+      type: String,
+      default: ""
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.record-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &-left {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    &-image {
+      width: 100px;
+      height: 100px;
+      background: #26144d;
+      border-radius: 24px;
+      flex-shrink: 0;
+    }
+    &-text {
+      margin-left: 40px;
+      font-size: 32px;
+      font-weight: 500;
+      color: #dbcfff;
+    }
+  }
+  &-right {
+    width: 210px;
+    text-align: right;
+    & > span {
+      font-size: 24px;
+      font-weight: 500;
+      color: #dbcfff;
+      opacity: 0.8;
+    }
+  }
+}
+</style>

src/components/topButton/large.vue

@@ -8,21 +8,21 @@
 export default {
   name: "LargeTopButton",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     }
   },
   computed: {
     buttonClass() {
-      if (this.mode === "blue") return "top-button-xy";
+      if (this.drawType === "turntable1") return "top-button-xy";
       return "top-button-hh";
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .top-button-large {
   width: 276px;
   height: 107px;

src/components/topButton/main.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="top-button">
     <top-btn-view
-      :mode="mode"
-      :active="active === 0"
-      @click.native="clickBtnView(0)"
+      :drawType="drawType"
+      :active="drawType === 'turntable1'"
+      @click.native="clickBtnView('turntable1')"
     ></top-btn-view>
     <top-btn-view
-      :mode="mode"
-      :active="active === 1"
-      @click.native="clickBtnView(1)"
+      :drawType="drawType"
+      :active="drawType === 'turntable2'"
+      @click.native="clickBtnView('turntable2')"
     ></top-btn-view>
   </div>
 </template>
@@ -21,30 +21,24 @@ export default {
     topBtnView
   },
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
-    }
-  },
-  computed: {
-    active() {
-      if (this.mode === "blue") return 0;
-      if (this.mode === "gold") return 1;
-      return 0;
+      default: "turntable1"
     }
   },
+  computed: {},
   methods: {
-    clickBtnView(index) {
-      this.$emit("clickTopButton", index);
+    clickBtnView(drawType) {
+      this.$emit("clickTopButton", drawType);
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .top-button {
   display: flex;
-  width: 560px;
+  width: 540px;
   justify-content: space-between;
   align-items: flex-end;
   margin: 0 auto;

src/components/topButton/small.vue

@@ -8,21 +8,21 @@
 export default {
   name: "SmallTopButton",
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     }
   },
   computed: {
     buttonClass() {
-      if (this.mode === "blue") return "top-button-hh";
+      if (this.drawType === "turntable1") return "top-button-hh";
       return "top-button-xy";
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .top-button-small {
   width: 244px;
   height: 78px;

src/components/topButton/topBtnView.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <large-top-button :mode="mode" v-if="active"></large-top-button>
-    <small-top-button :mode="mode" v-else></small-top-button>
+    <large-top-button :drawType="drawType" v-if="active"></large-top-button>
+    <small-top-button :drawType="drawType" v-else></small-top-button>
   </div>
 </template>
 
@@ -15,9 +15,9 @@ export default {
     smallTopButton
   },
   props: {
-    mode: {
+    drawType: {
       type: String,
-      default: "blue"
+      default: "turntable1"
     },
     active: {
       type: Boolean,
@@ -25,11 +25,11 @@ export default {
     }
   },
   watch: {
-    active(val) {
-      console.log("watch", val);
-    }
+    // active(val) {
+    //   console.log("watch", val);
+    // }
   }
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped></style>