feat: 更新

src/components/ballContent/main.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="ball-content" :class="modeClass">
     <div class="ball-content-main">
+      <div class="ball-content-main-notice">
+        <notice :mode="mode" :gifts="prizeItemList"></notice>
+      </div>
       <div class="ball-content-main-grid">
         <lucky-grid-view :mode="mode"></lucky-grid-view>
       </div>
@@ -9,10 +12,13 @@
 </template>
 
 <script>
+import notice from "./notice";
 import luckyGridView from "@/components/luckyGridView";
+import { mapGetters } from "vuex";
 export default {
   name: "BallContent",
   components: {
+    notice,
     luckyGridView
   },
   props: {
@@ -22,6 +28,7 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(["prizeItemList"]),
     modeClass() {
       if (this.mode === "blue") return "ball-xy";
       return "ball-hh";
@@ -41,8 +48,12 @@ export default {
   &-main {
     height: 414px;
     padding: 8px;
+    &-notice {
+      height: 64px;
+      padding-top: 20px;
+    }
     &-grid {
-      padding-top: 78px;
+      // padding-top: 78px;
       width: 92%;
       margin: 0 auto;
     }

src/components/ballContent/notice.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="notice" :class="modeClass">
+    <div class="notice-content" v-if="gifts.length > 0">
+      <label>{{ name }}</label>
+      <span>在{{ modeName }}获得了</span>
+      <label>{{ giftsText }}</label>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Notice",
+  props: {
+    mode: {
+      type: String,
+      default: "blue"
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    gifts: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    modeClass() {
+      if (this.mode === "blue") return "notice-xy";
+      return "notice-hh";
+    },
+    modeName() {
+      if (this.mode === "blue") return "幸运扭扭蛋";
+      return "豪华扭扭蛋";
+    },
+    giftsText() {
+      const list = [];
+      for (let index = 0; index < this.gifts.length; index++) {
+        const element = this.gifts[index];
+        list.push(`${element.prizeName}x${element.prizeNum}`);
+      }
+      return list.join("、");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.notice {
+  width: 618px;
+  height: 64px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  margin: 0 auto;
+  &-content {
+    margin: 0 30px;
+    text-align: center;
+    line-height: 64px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    & > label {
+      color: #ffe26c;
+    }
+    & > span {
+      color: #fff;
+    }
+  }
+}
+.notice-xy {
+  background-image: url(../../assets/images/tz_bg.png);
+}
+.notice-hh {
+  background-image: url(../../assets/images/tz_bg_g.png);
+}
+</style>

src/components/bottomView/balanceView.vue

@@ -4,7 +4,7 @@
       <label>鱼券：</label>
       <span>{{ value }}</span>
     </div>
-    <div class="balance-view-btn"></div>
+    <div class="balance-view-btn" @touchstart="() => {}"></div>
   </div>
 </template>
 
@@ -53,10 +53,16 @@ export default {
     }
   }
   &-btn {
-    width: 60px;
-    height: 60px;
+    width: 100px;
+    height: 100px;
     border-radius: 50%;
-    margin-right: 14px;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url(../../assets/images/cz_bth.png);
+    &:active {
+      background-image: url(../../assets/images/cz_bth_a.png);
+    }
   }
 }
 .balance-view-xy {

src/components/bottomView/lotteryBtn.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lottery-btn" :class="modeClass" @click="clickLottery"></div>
+  <div class="lottery-btn" :class="modeClass" @touchend="clickLottery"></div>
 </template>
 
 <script>
@@ -43,8 +43,14 @@ export default {
 }
 .lottery-btn-xy {
   background-image: url(../../assets/images/cj_btn.png);
+  &:active {
+    background-image: url(../../assets/images/cj_btn_a.png);
+  }
 }
 .lottery-btn-hh {
   background-image: url(../../assets/images/cj_btn_g.png);
+  &:active {
+    background-image: url(../../assets/images/cj_btn_g_a.png);
+  }
 }
 </style>

src/components/luckyGridView/main.vue

@@ -62,7 +62,7 @@ export default {
       },
       defaultStyle: {},
       activeStyle: {
-        background: "linear-gradient(270deg, #FFDCB8, #FDC689)",
+        background: "none",
         shadow: ""
       },
       axis: [
@@ -83,6 +83,8 @@ export default {
         require("@/assets/images/ball_02_g.png"),
         require("@/assets/images/ball_01_g.png")
       ],
+      opImages: require("@/assets/images/hig_p.png"),
+      heightLineImages: require("@/assets/images/hig.png"),
       showDialog: false,
       lotteryData: null,
       timeout: false,
@@ -152,7 +154,12 @@ export default {
     eventBus.$off("eventLottery", this.startLottery);
   },
   methods: {
-    ...mapMutations(["SetPrizeInfo", "SetRemainTicketNum", "SetCanLottery"]),
+    ...mapMutations([
+      "SetPrizeInfo",
+      "SetRemainTicketNum",
+      "SetCanLottery",
+      "SetPrizeItemList"
+    ]),
     getQueryPrizeInfo() {
       queryPrizeInfo({ drawType: this.drawType })
         .then(res => {
@@ -227,9 +234,15 @@ export default {
           y: this.axis[i][1],
           // fonts: [{ text: item.name, top: "70%" }],
           imgs: [
-            { src: this.prizesImages[0], width: "86%", top: "6%" },
+            { src: this.prizesImages[0], width: "100%", top: "8%" },
             { src: prizeItem.prizeImgUrl, width: "70%", top: "20%" },
-            { src: this.prizesImages[1], width: "86%", top: "6%" }
+            {
+              src: this.opImages,
+              activeSrc: this.heightLineImages,
+              width: "100%",
+              top: "8%"
+            },
+            { src: this.prizesImages[1], width: "100%", top: "8%" }
           ]
         });
       }
@@ -255,6 +268,7 @@ export default {
     endCallBack() {
       this.showDialog = true;
       this.SetCanLottery(true);
+      this.SetPrizeItemList(this.prizeItemList);
     }
   }
 };

src/store/index.js

@@ -6,6 +6,7 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     prizeInfo: [],
+    prizeItemList: [],
     ruleType: "one",
     remainTicketNum: 0,
     ticketRule: null,
@@ -15,6 +16,9 @@ export default new Vuex.Store({
     prizeInfo: state => {
       return state.prizeInfo;
     },
+    prizeItemList: state => {
+      return state.prizeItemList;
+    },
     prizeIdList: state => {
       const { prizeInfo } = state;
       const list = [];
@@ -45,6 +49,9 @@ export default new Vuex.Store({
     SetPrizeInfo(state, payload) {
       state.prizeInfo = payload;
     },
+    SetPrizeItemList(state, payload) {
+      state.prizeItemList = payload;
+    },
     SetRuleType(state, payload) {
       state.ruleType = payload;
     },

src/styles/global.scss

@@ -1,14 +1,35 @@
-html,body,#app {
+html,
+body,
+#app {
   width: 100%;
   height: 100%;
   margin: 0;
 }
-h1,h2,h3,h4,h5,p,dl,dt,dd,ol,ul,li {
+h1,
+h2,
+h3,
+h4,
+h5,
+p,
+dl,
+dt,
+dd,
+ol,
+ul,
+li {
   padding: 0;
-  margin: 0
+  margin: 0;
+}
+body {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 #app {
-  font-family: "Helvetica","Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+  font-family: "Helvetica", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
@@ -18,9 +39,9 @@ h1,h2,h3,h4,h5,p,dl,dt,dd,ol,ul,li {
 @svg 1px-border {
   height: 2px;
   @rect {
-      fill: var(--color, black);
-      width: 100%;
-      height: 50%;
+    fill: var(--color, black);
+    width: 100%;
+    height: 50%;
   }
 }
 .border-1px {