feat:暂存

babel.config.js

@@ -6,7 +6,7 @@ module.exports = {
       {
         libraryName: "vant",
         libraryDirectory: "es",
-        style: true
+        style: name => `${name}/style/less`
       },
       "vant"
     ]

package.json

@@ -34,12 +34,13 @@
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-vue": "^6.2.2",
+    "less": "^4.1.1",
+    "less-loader": "^7.3.0",
     "postcss-design-convert": "^1.1.3",
     "postcss-px-to-viewport": "^1.1.1",
     "postcss-write-svg": "^3.0.1",
     "prettier": "^1.19.1",
-    "sass": "^1.26.3",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^10.2.0",
     "vue-template-compiler": "^2.6.11"
   }
 }

src/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<style lang="scss">
+<style lang="less">
 @import "@/styles";
 
 #app {

src/api/index.js

@@ -35,11 +35,22 @@ const queryPrizeMsg = param => {
   return ajax.get(`${HOST}/queryPrizeMsg`, param);
 };
 
+// 规则
+const getRuleTip = param => {
+  return ajax.get(`${HOST}/getRuleTip`, param);
+};
+
+// 抽奖记录
+const drawRecord = param => {
+  return ajax.get(`${HOST}/drawRecord`, param);
+};
 export {
   queryPrizeInfo,
   queryTicketNum,
   queryTicketRule,
   doLottery,
   saveLog,
-  queryPrizeMsg
+  queryPrizeMsg,
+  getRuleTip,
+  drawRecord
 };

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,39 +169,32 @@ 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;
+    ...mapActions(["getQueryPrizeInfo"]),
+    queryPrizeInfo() {
+      this.getQueryPrizeInfo().then(res => {
+        const { code, data } = res;
         if (code === 200) {
-            this.SetPrizeInfo(data);
           this.prizes = this.configPrizes(data);
-          } else {
-            this.$toast.fail(msg);
         }
-        })
-        .catch(() => {
-          this.$toast.fail("获取抽奖奖品信息失败！");
       });
     },
     postDoLottery() {
@@ -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>

src/main.js

@@ -2,12 +2,17 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { Toast, Dialog } from "vant";
+import { Toast, Dialog, Tab, Tabs, Popup, Image as VanImage, List } from "vant";
 
 Vue.config.productionTip = false;
 
 Vue.use(Toast);
 Vue.use(Dialog);
+Vue.use(Tab);
+Vue.use(Tabs);
+Vue.use(Popup);
+Vue.use(VanImage);
+Vue.use(List);
 
 new Vue({
   router,

src/router/index.js

@@ -9,16 +9,13 @@ const routes = [
     path: "/",
     name: "Home",
     component: Home
-  },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue")
   }
+  // {
+  //   path: "/about",
+  //   name: "About",
+  //   component: () =>
+  //     import(/* webpackChunkName: "about" */ "../views/About.vue")
+  // }
 ];
 
 const router = new VueRouter({

src/store/index.js

@@ -1,29 +1,42 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { Toast } from "vant";
+import { queryPrizeInfo } from "@/api";
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    prizeInfo: [],
+    drawType: "turntable1",
+    prizeInfo: {
+      turntable1: [],
+      turntable2: []
+    },
     prizeItemList: [],
     ruleType: "one",
     remainTicketNum: 0,
     ticketRule: null,
-    canLottery: true
+    canLottery: true,
+    lotteryRecordRateVo: {}
   },
   getters: {
+    drawType: state => {
+      return state.drawType;
+    },
     prizeInfo: state => {
       return state.prizeInfo;
     },
+    curDrawTypePrizeInfo: state => {
+      return state.prizeInfo[state.drawType];
+    },
     prizeItemList: state => {
       return state.prizeItemList;
     },
-    prizeIdList: state => {
-      const { prizeInfo } = state;
+    prizeIdList: (state, getters) => {
+      const { curDrawTypePrizeInfo } = getters;
       const list = [];
-      for (let index = 0; index < prizeInfo.length; index++) {
-        const element = prizeInfo[index];
+      for (let index = 0; index < curDrawTypePrizeInfo.length; index++) {
+        const element = curDrawTypePrizeInfo[index];
         list.push(element.prizeId);
       }
       return list;
@@ -43,11 +56,18 @@ export default new Vuex.Store({
     },
     canLottery: state => {
       return state.canLottery;
+    },
+    lotteryRecordRateVo: state => {
+      return state.lotteryRecordRateVo;
     }
   },
   mutations: {
-    SetPrizeInfo(state, payload) {
-      state.prizeInfo = payload;
+    SetDrawType(state, payload) {
+      state.drawType = payload;
+    },
+    SetDrawTypePrizeInfo(state, payload) {
+      const { drawType, list } = payload;
+      state.prizeInfo[drawType || state.drawType] = list;
     },
     SetPrizeItemList(state, payload) {
       state.prizeItemList = payload;
@@ -63,8 +83,30 @@ export default new Vuex.Store({
     },
     SetCanLottery(state, payload) {
       state.canLottery = payload;
+    },
+    SetLotteryRecordRateVo(state, payload) {
+      state.lotteryRecordRateVo = payload;
+    }
+  },
+  actions: {
+    getQueryPrizeInfo({ state, commit }, drawType) {
+      return new Promise((resolve, reject) => {
+        queryPrizeInfo({ drawType: drawType || state.drawType })
+          .then(res => {
+            const { code, data, msg } = res;
+            if (code === 200) {
+              commit("SetDrawTypePrizeInfo", { drawType, list: data });
+            } else {
+              Toast.fail(msg);
+            }
+            resolve(res);
+          })
+          .catch(err => {
+            Toast.fail("获取抽奖奖品信息失败！");
+            reject(err);
+          });
+      });
     }
   },
-  actions: {},
   modules: {}
 });

src/styles/cover.less

@@ -0,0 +1,4 @@
+@tab-text-color: #AFAAFF;
+@tab-active-text-color: #DBCFFF;
+@tabs-nav-background-color: none;
+@tabs-bottom-bar-color: #DBCFFF;

src/styles/global.less

@@ -29,22 +29,22 @@ body {
   user-select: none;
 }
 #app {
-  font-family: "Helvetica", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+  font-family: "PingFang SC", "Helvetica", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   font-size: 14px;
 }
 
-@svg 1px-border {
-  height: 2px;
-  @rect {
-    fill: var(--color, black);
-    width: 100%;
-    height: 50%;
-  }
-}
-.border-1px {
-  border: 1px solid transparent;
-  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
-}
+// @svg 1px-border {
+//   height: 2px;
+//   @rect {
+//     fill: var(--color, black);
+//     width: 100%;
+//     height: 50%;
+//   }
+// }
+// .border-1px {
+//   border: 1px solid transparent;
+//   border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
+// }

src/styles/index.less

@@ -0,0 +1,11 @@
+@import "./global.less";
+
+.prizes-view-content-tableft {
+    margin-left: 130px;
+    font-size: 32px;
+}
+
+.prizes-view-content-tabright {
+    margin-right: 130px;
+    font-size: 32px;
+}

src/styles/index.scss

@@ -1,2 +0,0 @@
-
-@import "./global.scss";

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -2,18 +2,38 @@
   <div class="home">
     <div class="top-btn-and-box">
       <div class="top-btn-box">
-        <top-button :mode="mode" @clickTopButton="clickTopButton"></top-button>
+        <top-button
+          :drawType="drawType"
+          @clickTopButton="clickTopButton"
+        ></top-button>
       </div>
       <div class="top-ball-box">
-        <ball-content :mode="mode"></ball-content>
+        <ball-content></ball-content>
       </div>
     </div>
     <div>
-      <enter-view :mode="mode"></enter-view>
+      <enter-view
+        :drawType="drawType"
+        @clickEntryBtn="clickEntryBtn"
+      ></enter-view>
     </div>
     <div>
-      <bottom-view :mode="mode"></bottom-view>
+      <bottom-view :drawType="drawType"></bottom-view>
     </div>
+
+    <van-popup
+      v-model="show"
+      position="left"
+      :style="{ height: '100%', width: '100%' }"
+      :close-on-click-overlay="false"
+      close-icon="arrow-left"
+      closeable
+      close-icon-position="top-left"
+      get-container="#app"
+    >
+      <!-- <prizes-view></prizes-view> -->
+      <component :is="curComponentsName"></component>
+    </van-popup>
   </div>
 </template>
 
@@ -22,6 +42,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";
 
 export default {
   name: "Home",
@@ -29,31 +51,55 @@ export default {
     topButton,
     ballContent,
     enterView,
-    bottomView
+    bottomView,
+    // prizesView
+    prizesView: resolve => require(["./prizesView.vue"], resolve),
+    ruleView: resolve => require(["./ruleView.vue"], resolve),
+    recordView: resolve => require(["./recordView.vue"], resolve)
   },
   data() {
     return {
-      active: 0
+      show: false,
+      curBtnText: "",
+      componentsName: {
+        规则: "rule-view",
+        奖品: "prizes-view",
+        排行: "record-view",
+        记录: "record-view"
+      }
     };
   },
   computed: {
-    mode() {
-      if (this.active === 0) return "blue";
-      if (this.active === 1) return "gold";
-      return "blue";
+    ...mapGetters(["drawType"]),
+    curComponentsName() {
+      return this.componentsName[this.curBtnText];
+    },
+    showPopup() {
+      return this.show && this.curBtnText && this.curComponentsName;
+    }
+  },
+  watch: {
+    show() {
+      console.log("this.show", this.show);
     }
   },
   mounted() {},
   methods: {
+    ...mapMutations(["SetDrawType"]),
     clickTopButton(index) {
-      this.active = index;
-      console.log("active", index);
+      this.SetDrawType(index);
+      // console.log("active", index);
+    },
+    clickEntryBtn(val) {
+      // console.log("clickEntryBtn", val);
+      this.curBtnText = val;
+      this.show = true;
     }
   }
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
 .home {
   padding: 20px 25px;
   height: 100%;

src/views/prizesView.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="prizes-view">
+    <div class="prizes-view-content">
+      <van-tabs v-model="active" animated>
+        <van-tab
+          title="幸运扭扭蛋"
+          name="turntable1"
+          title-class="prizes-view-content-tableft"
+        >
+          <div class="prizes-view-content-pane">
+            <prizes-list drawType="turntable1"></prizes-list>
+          </div>
+        </van-tab>
+        <van-tab
+          title="豪华扭扭蛋"
+          name="turntable2"
+          title-class="prizes-view-content-tabright"
+        >
+          <div class="prizes-view-content-pane">
+            <prizes-list drawType="turntable2"></prizes-list>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import prizesList from "@/components/prizesList";
+export default {
+  name: "PrizesView",
+  components: {
+    prizesList
+  },
+  data() {
+    return {
+      active: "turntable1"
+    };
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.prizes-view {
+  height: 100%;
+  background-color: #150832;
+  &-content {
+    padding-top: 10px;
+    &-pane {
+      margin: 20px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}
+</style>

src/views/recordView.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="record-view">
+    <div class="record-view-title">
+      <h3>抽奖记录</h3>
+      <p>今日投入产出比：{{ rate }}</p>
+    </div>
+    <div class="record-view-content">
+      <van-tabs v-model="active" animated>
+        <van-tab title="时间" name="time">
+          <div class="record-view-content-pane">
+            <record-list sortType="time"></record-list>
+          </div>
+        </van-tab>
+        <van-tab title="价值" name="worth">
+          <div class="record-view-content-pane">
+            <record-list sortType="worth"></record-list>
+          </div>
+        </van-tab>
+      </van-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import recordList from "@/components/recordList";
+import { mapGetters } from "vuex";
+export default {
+  name: "RecordView",
+  components: {
+    recordList
+  },
+  data() {
+    return {
+      active: "time"
+    };
+  },
+  computed: {
+    ...mapGetters(["lotteryRecordRateVo"]),
+    rate() {
+      return this.lotteryRecordRateVo.rate;
+    }
+  },
+  created() {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+.record-view {
+  height: 100%;
+  background-color: #150832;
+  color: #dbcfff;
+  padding-top: 20px;
+  box-sizing: border-box;
+  &-title {
+    text-align: center;
+    & > h3 {
+      font-size: 32px;
+      font-weight: bold;
+      color: #dbcfff;
+      line-height: 72px;
+    }
+    & > p {
+      font-size: 20px;
+      font-weight: bold;
+      color: #dbcfff;
+      line-height: 50px;
+      opacity: 0.4;
+    }
+  }
+  &-content {
+    &-pane {
+      height: calc(100vh - 20px - 72px - 50px - 11.734vw);
+      overflow-y: auto;
+    }
+  }
+}
+</style>

src/views/ruleView.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="rule-view">
+    <div class="rule-view-padding">
+      <h3 class="rule-view-title">活动规则</h3>
+      <div class="rule-view-content">
+        <p v-for="(text, index) in ruleContent" :key="`rule_text_${index}`">
+          {{ text }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRuleTip } from "@/api";
+export default {
+  name: "RuleView",
+  data() {
+    return {
+      ruleContent: []
+    };
+  },
+  created() {
+    this.ruleTip();
+  },
+  methods: {
+    ruleTip() {
+      getRuleTip()
+        .then(res => {
+          const { code, data, msg } = res;
+          if (code === 200) {
+            this.ruleContent = data;
+          } else {
+            this.$toast.fail(msg);
+          }
+        })
+        .catch(() => {
+          this.$toast.fail("获取抽奖规则失败！");
+        });
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.rule-view {
+  height: 100%;
+  background-color: #150832;
+  color: #dbcfff;
+  &-padding {
+    padding: 20px 30px;
+  }
+  &-title {
+    text-align: center;
+    color: #dbcfff;
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 72px;
+  }
+  &-content {
+    margin-top: 50px;
+    line-height: 54px;
+    font-size: 26px;
+    font-weight: 400;
+  }
+}
+</style>

vue.config.js

@@ -26,7 +26,15 @@ module.exports = {
   },
   css: {
     loaderOptions: {
-      postcss: {}
+      postcss: {},
+      less: {
+        lessOptions: {
+          modifyVars: {
+            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+            hack: `true; @import "@/styles/cover.less";`
+          }
+        }
+      }
     }
   }
 };