feat: mini新增banner

9cc97d2f · Lays-lzq · dce2fdbc · 9cc97d2f · 9cc97d2f · 9cc97d2f
Commit 9cc97d2f authored Sep 27, 2023 by Lays-lzq
9 changed files
--- a/components/Lottery/Instant/Banner.vue
+++ b/components/Lottery/Instant/Banner.vue
@@ -41,7 +41,7 @@ export default {
    display: block;
    width: 100%;
    height: 0;
-    padding-top: 115 / 330 * 100%;
+    padding-top: 110 / 330 * 100%;
    position: relative;
  }
  &__content {

--- a/components/Lottery/Instant/MiniMain.vue
+++ b/components/Lottery/Instant/MiniMain.vue
@@ -59,6 +59,7 @@
      v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid || +lotteryInfo.showType === LOTTERY_STYLE.wheel"
      class="lottery-instant"
    >
+      <Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
      <div v-if="+lotteryInfo.showType === LOTTERY_STYLE.grid" class="lottery-instant__layout-grid">
        <div class="lottery-instant__content-grid">
          <CountdownBar class="lottery-instant__countdown"></CountdownBar>
@@ -172,6 +173,7 @@ import Bus from '@/utils/Bus'
 export default {
  name: 'MiniMain',
  components: {
+    Banner: () => import('@/components/Lottery/Instant/Banner'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    Records: () => import('@/components/Lottery/Instant/Records'),
    IntroductionPopup: () => import('@/components/Lottery/Instant/IntroductionPopup'),
@@ -219,7 +221,8 @@ export default {
        id: 0, // 中奖等级
        name: '谢谢参与' // 中奖等级
      }, // 中奖信息
-      randomType: Math.floor(Math.random() * (2 - 1 + 1)) + 1 // 部分抽奖类型随机进1或2
+      randomType: Math.floor(Math.random() * (2 - 1 + 1)) + 1, // 部分抽奖类型随机进1或2
+      isShowBanner: true
    }
  },
  computed: {
@@ -412,7 +415,7 @@ export default {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
-  padding: 0px 15px 22px;
+  padding: 12px 15px 22px;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  &__layout-grid {
@@ -434,7 +437,7 @@ export default {
    height: 100%;
  }
  &__countdown {
-    padding-top: 18px;
+    padding-top: 8px;
  }
  &__times {
    margin: 65px 0 5px;

--- a/components/Lottery/Instant/type/TypeGashaponMini.vue
+++ b/components/Lottery/Instant/type/TypeGashaponMini.vue
 <template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
+      <Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
      <CountdownBar class="lottery-instant__countdown"></CountdownBar>
      <div class="lottery-instant__layout-gashapon">
        <div class="content-main">
@@ -51,6 +52,7 @@ import { ballListGashapon } from './config'
 export default {
  components: {
+    Banner: () => import('@/components/Lottery/Instant/Banner'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
@@ -90,7 +92,8 @@ export default {
      playId: this.$route.query.sessionId || null, // 场次id
      sid: this.$route.query.sid || null, // 引用id
      stype: this.$route.query.stype || null, // 引用类型
-      ballListGashapon // 扭蛋球图片
+      ballListGashapon, // 扭蛋球图片
+      isShowBanner: true
    }
  },
  computed: {
@@ -155,6 +158,10 @@ export default {
  padding: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
+  &__banner {
+    margin-top: 10px;
+    padding: 0 25px;
+  }
  &__countdown {
    padding-top: 18px;
  }

--- a/components/Lottery/Instant/type/TypeGuessMini.vue
+++ b/components/Lottery/Instant/type/TypeGuessMini.vue
 <template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
+      <Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
      <img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
      <CountdownBar class="lottery-instant__countdown"></CountdownBar>
      <div class="lottery-instant__layout-guess">
@@ -55,6 +56,7 @@ import { blindBoxListGuess, starConfig } from './config'
 export default {
  components: {
+    Banner: () => import('@/components/Lottery/Instant/Banner'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    PrizeGuess,
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
@@ -97,7 +99,8 @@ export default {
      chooseIndex: 0,
      timer: null,
      blindBoxList: blindBoxListGuess,
-      starConfig
+      starConfig,
+      isShowBanner: true
    }
  },
  computed: {
@@ -162,6 +165,10 @@ export default {
  &__main {
    text-align: center;
  }
+  &__banner {
+    margin-top: 10px;
+    padding: 0 10px;
+  }
  &__title {
    width: 66.7%;
    object-fit: cover;

--- a/components/Lottery/Instant/type/TypeGuessMini2.vue
+++ b/components/Lottery/Instant/type/TypeGuessMini2.vue
 <template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
+      <Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
      <img class="lottery-instant__title" src="@/assets/images/lottery/guess/game-title.png" />
      <CountdownBar class="lottery-instant__countdown"></CountdownBar>
      <div class="lottery-instant__layout-guess">
@@ -55,6 +56,7 @@ import { blindBoxListGuess2 as blindBoxListGuess, starConfig } from './config'
 export default {
  components: {
+    Banner: () => import('@/components/Lottery/Instant/Banner'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    PrizeGuess,
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
@@ -97,7 +99,8 @@ export default {
      chooseIndex: 0,
      timer: null,
      blindBoxList: blindBoxListGuess,
-      starConfig
+      starConfig,
+      isShowBanner: true
    }
  },
  computed: {
@@ -164,19 +167,23 @@ export default {
  &__main {
    text-align: center;
  }
+  &__banner {
+    margin-top: 10px;
+    padding: 0 10px;
+  }
  &__title {
    width: 66.7%;
    object-fit: cover;
-    margin-top: 28px;
+    margin-top: 6px;
  }
  &__countdown {
-    padding-top: 6px;
+    padding-top: 0px;
  }
  &__layout-guess {
    .content-img {
      position: relative;
      width: 218px;
-      height: 205px;
+      height: 200px;
      margin: -10px auto 0 auto;
      img {
        width: 100%;
@@ -193,7 +200,7 @@ export default {
      width: 100%;
      height: 0;
      padding-top: 156 / 367 * 100%;
-      margin-top: 16px;
+      margin-top: 6px;
      &-box {
        position: absolute;
        bottom: 20%;

--- a/components/Lottery/Instant/type/TypeScratchMini.vue
+++ b/components/Lottery/Instant/type/TypeScratchMini.vue
 <template>
  <section class="lottery-instant">
    <div class="lottery-instant__main">
+      <Banner v-if="isShowBanner" class="lottery-instant__banner"></Banner>
      <CountdownBar class="lottery-instant__countdown"></CountdownBar>
      <div class="lottery-instant__layout-scratch">
        <div class="lottery-instant__content-scratch">
@@ -77,6 +78,7 @@ import Bus from '@/utils/Bus'
 export default {
  components: {
+    Banner: () => import('@/components/Lottery/Instant/Banner'),
    WinPopup: () => import('@/components/Lottery/Instant/WinPopup'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    Records: () => import('@/components/Lottery/Instant/Records'),
@@ -116,7 +118,8 @@ export default {
      id: this.$route.query.id || null, // 抽奖id
      playId: this.$route.query.sessionId || null, // 场次id
      sid: this.$route.query.sid || null, // 引用id
-      stype: this.$route.query.stype || null // 引用类型
+      stype: this.$route.query.stype || null, // 引用类型
+      isShowBanner: true
    }
  },
  computed: {
@@ -201,6 +204,10 @@ export default {
  &__main {
    padding: 0 0.13rem;
  }
+  &__banner {
+    margin-top: 10px;
+    padding: 0 15px;
+  }
  &__layout-scratch {
    position: relative;
    background-image: url('~@/assets/images/lottery/scratch/game-bg.png');

--- a/components/Lottery/Timing/Banner.vue
+++ b/components/Lottery/Timing/Banner.vue
+<template>
+  <section v-if="isShowBanner" class="banner">
+    <a class="banner__wrap" target="_blank" :href="bannerLink">
+      <div class="banner__content" :style="`background-image:url('${bannerImg}')`"></div>
+    </a>
+  </section>
+</template>
+<script>
+// 默认背景图
+import CONFIG from '@/config'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'Banner',
+  computed: {
+    ...mapGetters({
+      lotteryInfo: 'lottery/lotteryInfo'
+    }),
+    isShowBanner() {
+      const { isShowBanner } = this.lotteryInfo
+      return !!isShowBanner
+    },
+    bannerImg() {
+      const { banner } = this.lotteryInfo
+      const img = banner || CONFIG.defBanner
+      return `${img}${CONFIG.ossImageServe}`
+    },
+    bannerLink() {
+      return this.lotteryInfo.url || false
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.banner {
+  width: 100%;
+  display: flex;
+  &__wrap {
+    display: block;
+    width: 100%;
+    height: 0;
+    padding-top: 110 / 330 * 100%;
+    position: relative;
+  }
+  &__content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    background-size: cover;
+    background-position: center;
+    font-size: 0;
+  }
+}
+</style>
--- a/components/Lottery/Timing/type/LuckyBag.vue
+++ b/components/Lottery/Timing/type/LuckyBag.vue
 <template>
-  <section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
+  <section class="main-timing" :style="{ backgroundPosition: isMini ? isShowBanner ? isIframe ? '0 100px' : '0 120px' : '0 0' : '' }">
    <div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
+    <Banner v-show="isShowBanner"></Banner>
    <TimingStatus class="timing-status-box"></TimingStatus>
    <JoinButton
      class="join-button-box"
-      :style="{ bottom: isMini ? '26%' : '51%' }"
+      :style="{ bottom: isMini ? isShowBanner ? isIframe ? '20%' : '35%' : '26%' : '51%' }"
      @lottery="lotteryCallback"
    ></JoinButton>
    <Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '40.5vh' }" class="reward-box"></Rewards>
@@ -30,6 +31,8 @@ import Rewards from '@/components/Lottery/Timing/Rewards'
 import BackButton from '@/components/Lottery/Timing/BackButton'
 // 中奖弹窗
 import WinPopup from '@/components/Lottery/Timing/WinPopup'
+// banner
+import Banner from '../Banner.vue'
 export default {
@@ -40,6 +43,7 @@ export default {
    Rewards,
    BackButton,
    WinPopup,
+    Banner,
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
    Records: () => import('@/components/Lottery/Instant/Records')
@@ -74,6 +78,7 @@ export default {
  },
  data() {
    return {
+      isShowBanner: true
    }
  },
  computed: {
@@ -92,6 +97,9 @@ export default {
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
+    },
+    isIframe() {
+      return self !== top
    }
  },
  methods: {
@@ -109,9 +117,10 @@ export default {
 .main-timing {
  height: 100%;
  position: relative;
-  padding-top: 20px;
+  padding: 20px 24px 0;
  background: url(../img/background-luckybag.png) no-repeat center;
  background-size: cover;
+  background-color: #FD6F3C;
  .main-link {
    width: 24px;
    height: 74px;
@@ -131,7 +140,7 @@ export default {
  }
  .timing-status-box {
    // padding-left: 16px;
-    // margin-top: 10px;
+    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;

--- a/components/Lottery/Timing/type/Treasure.vue
+++ b/components/Lottery/Timing/type/Treasure.vue
 <template>
-  <section class="main-timing" :style="{ backgroundPosition: isMini ? '0 0' : '' }">
+  <section class="main-timing" :style="{ backgroundPosition: isMini ? isShowBanner ? isIframe ?  '0 -190%' : '0 140px' : '0 30px' : '' }">
    <div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
+    <Banner v-show="isShowBanner"></Banner>
    <TimingStatus class="timing-status-box"></TimingStatus>
    <JoinButton
      class="join-button-box"
-      :style="{ bottom: isMini ? '32%' : '49%' }"
+      :style="{ bottom: isMini ? isShowBanner ? isIframe ? '22%' : '32%' : '26%' : '49%' }"
      @lottery="lotteryCallback"
    ></JoinButton>
    <Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '46.5vh' }" class="reward-box"></Rewards>
@@ -30,6 +31,8 @@ import Rewards from '@/components/Lottery/Timing/Rewards'
 import BackButton from '@/components/Lottery/Timing/BackButton'
 // 中奖弹窗
 import WinPopup from '@/components/Lottery/Timing/WinPopup'
+// banner
+import Banner from '../Banner.vue'
 export default {
  components: {
@@ -39,6 +42,7 @@ export default {
    Rewards,
    BackButton,
    WinPopup,
+    Banner,
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
    Records: () => import('@/components/Lottery/Instant/Records')
@@ -73,6 +77,7 @@ export default {
  },
  data() {
    return {
+      isShowBanner: true
    }
  },
  computed: {
@@ -91,6 +96,9 @@ export default {
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
+    },
+    isIframe() {
+      return self !== top
    }
  },
  methods: {
@@ -107,9 +115,10 @@ export default {
 .main-timing {
  height: 100%;
  position: relative;
-  padding-top: 20px;
+  padding: 20px 24px 0;
  background: url(../img/background-treasure.png) no-repeat center;
  background-size: cover;
+  background-color: #FD2216;
  .main-link {
    width: 24px;
    height: 74px;
@@ -129,7 +138,7 @@ export default {
  }
  .timing-status-box {
    // padding-left: 16px;
-    // margin-top: 10px;
+    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;