feature

1. 暂存刮刮乐测试

components/Lottery/Instant/Introduction.vue

 <template>
   <div class="introduction">
-    <div class="introduction__sec-title"></div>
-    <div class="introduction__wrap">
-      <div class="introduction__content">
-        <p class="introduction__intro">{{ lotteryInfo.intro }}</p>
+    <div class="introduction__sec-title" :style="titleStyle"></div>
+    <div class="introduction__wrap" :style="wrapStyle">
+      <div class="introduction__content" :style="contentStyle">
+        <p v-if="rulePosition === 'top'" class="introduction__intro">{{ lotteryInfo.intro }}</p>
         <template v-if="!!lotteryInfo.isShowPrize">
           <div class="introduction__title">本场活动奖品：</div>
           <div class="introduction__prize">
@@ -19,6 +19,10 @@
             </ul>
           </div>
         </template>
+        <div v-if="rulePosition === 'bottom'" class="introduction__intro">
+          <p class="introduction__intro-rule">活动规则</p>
+          <p>{{ lotteryInfo.intro }}</p>
+        </div>
       </div>
     </div>
   </div>
@@ -30,6 +34,24 @@ import img from '@/assets/images/lottery/gift.png'
 
 export default {
   name: 'Introduction',
+  props: {
+    rulePosition: {
+      type: String,
+      default: 'top'
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    wrapStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    contentStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
   data() {
     return {
       img
@@ -79,6 +101,11 @@ export default {
     font-size: 12px;
     line-height: 18px;
     white-space: pre-line;
+
+    &-rule {
+      text-align: center;
+      margin-top: 30px;
+    }
   }
   &__title {
     margin: 14px 0 10px;

components/Lottery/Instant/type/TypeScratch.vue

+<template>
+  <section class="lottery-instant">
+    <div class="lottery-instant__main">
+      <CountdownBar class="lottery-instant__countdown"></CountdownBar>
+      <div class="lottery-instant__layout-scratch">
+        <div class="lottery-instant__content-scratch">
+          <img class="content-title" src="@/assets/images/lottery/scratch/scratch-game-title.png" alt="" />
+          <div>
+            <PrizeScratch :width="300" :height="150">
+              <!-- eslint-disable-next-line vue/no-unused-vars -->
+              <template #item="{ rows }">
+                <div class="content-prize">
+                  奖品
+                </div>
+              </template>
+            </PrizeScratch>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Introduction
+      class="lottery-instant__intro"
+      :rule-position="'bottom'"
+      :title-style="scratchIntroductionTitleStyle"
+      :wrap-style="scratchIntroductionWrapStyle"
+      :content-style="scratchIntroductionContentStyle"
+    ></Introduction>
+  </section>
+</template>
+
+<script>
+import scratchIntroductionTitleImg from '@/assets/images/lottery/scratch/scratch-introduction.png'
+import { PrizeScratch } from 'lotteries'
+
+export default {
+  components: {
+    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
+    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
+    PrizeScratch
+  },
+  computed: {
+    scratchIntroductionTitleStyle() {
+      return {
+        backgroundImage: `url(${scratchIntroductionTitleImg})`,
+        width: '38%',
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }
+    },
+    scratchIntroductionWrapStyle() {
+      return {
+        backgroundColor: '#0000001a'
+      }
+    },
+    scratchIntroductionContentStyle() {
+      return {
+        backgroundColor: 'transparent'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lottery-instant {
+  position: relative;
+  height: 100%;
+  background-color: #83d4fd;
+  // background-image: url('~@/assets/images/lottery/index_bg.png');
+  background-size: cover;
+  background-position: top center;
+  background-repeat: no-repeat;
+  padding: 18px 15px 22px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &__main {
+  }
+  &__layout-scratch {
+    position: relative;
+    background-image: url('~@/assets/images/lottery/scratch/scratch-game-bg.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 0;
+    padding-top: 363 / 355 * 100%;
+    margin-top: 7px;
+  }
+  &__content-scratch {
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding: 90px 20px 30px 20px;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    .content-title {
+      width: 74%;
+      object-fit: cover;
+    }
+    .content-prize {
+      font-size: 12px;
+    }
+  }
+}
+</style>

package.json

@@ -52,7 +52,6 @@
     "alife-logger": "1.8.6",
     "core-js": "^3.15.1",
     "dayjs": "^1.10.6",
-    "lotteries": "^1.1.2",
     "normalize.css": "^8.0.1",
     "nuxt": "^2.15.7",
     "qrcode": "^1.4.4",

utils/constant.js

@@ -39,11 +39,13 @@ export const SESSION_STATUS_TXT = {
 /* 抽奖样式 */
 export const LOTTERY_STYLE = {
   grid: 1,
-  wheel: 2
+  wheel: 2,
+  scratch: 3
 }
 export const LOTTERY_STYLE_TXT = {
   [LOTTERY_STYLE.grid]: '九宫格',
-  [LOTTERY_STYLE.wheel]: '大转盘'
+  [LOTTERY_STYLE.wheel]: '大转盘',
+  [LOTTERY_STYLE.scratch]: '刮刮乐'
 }
 
 /* 定时抽奖 场次开奖条件 */

yarn.lock

@@ -5749,14 +5749,6 @@ lodash@^4.15.0, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-lotteries@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/lotteries/-/lotteries-1.1.2.tgz#d6dc307f32891d7491215ea9d39446f78859092b"
-  integrity sha512-+iK96Bwyma2g+bfLnFoNIgehidw1xhRzGBcjMpJ109H06SWjjadbKSZ5D+/psASEb0u9G17tcYiOR5TUtt6vWg==
-  dependencies:
-    core-js "^3.6.5"
-    vue "^2.6.11"
-
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"