feat(timing): 定时抽奖更新

7ca4ae2c · 赖慧粮 · 4682927e · 7ca4ae2c · 7ca4ae2c · 7ca4ae2c
Commit 7ca4ae2c authored Sep 15, 2021 by 赖慧粮
Showing with 35 additions and 96 deletions

assets/images/lottery/smile.png
+0 -0

components/Lottery/Instant/MiniMain.vue
+2 -7

components/Lottery/Timing/JoinButton.vue
+19 -81

components/Lottery/Timing/Main.vue
+4 -8

utils/constant.js
+10 -0

No files found.
--- a/assets/images/lottery/smile.png
+++ b/assets/images/lottery/smile.png
--- a/components/Lottery/Instant/MiniMain.vue
+++ b/components/Lottery/Instant/MiniMain.vue
@@ -61,7 +61,7 @@
                </div>
                <div class="lottery-instant__prize-img">
                  <img v-if="rows.id" src="@/assets/images/lottery/gift.png" alt="">
-                  <img v-else src="@/assets/images/lottery/free.png" alt="" />
+                  <img v-else src="@/assets/images/lottery/smile.png" alt="" />
                </div>
              </div>
            </template>
@@ -193,11 +193,6 @@ export default {
    },
    // 开始抽奖
    startLottery() {
-      this.isLottering = !this.isLottering
-      if (this.isLogin) {
-        return
-      }
      // 抽奖不在活动日期内
      if (this.isNotStart) {
        this.$toast(`抽奖活动${LOTTERY_STATUS_TXT[+this.lotteryInfo.status].label}`)
@@ -279,7 +274,7 @@ export default {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
-  padding: 18px 15px 22px;
+  padding: 0px 15px 22px;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  &__layout-grid {

--- a/components/Lottery/Timing/JoinButton.vue
+++ b/components/Lottery/Timing/JoinButton.vue
 <template>
  <section class="join-button">
    <div class="btn-box">
-      <template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.teaser">
+      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.teaser">
        <button v-if="lotteryInfo.condition === 1" class="join-btn pre">未开始</button>
        <button v-if="lotteryInfo.condition === 2" class="join-btn pre countdown">
          <template v-if="hours > 0">{{ hours | filterNum }}:</template>
          {{ minutes | filterNum }}:{{ seconds | filterNum }}后开始
        </button>
      </template>
-      <template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.start">
+      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.start">
        <template v-if="lotteryInfo.userTimes === 0 && lotteryInfo.isDraw">
          <button class="join-btn pre">待开奖</button>
        </template>
@@ -17,27 +17,15 @@
          <button class="join-btn" @click="lottery">点击参加</button>
        </template>
      </template>
-      <template v-if="parseInt(lotteryInfo.status, 10) === LOTTERY_STATUS.end">
+      <template v-if="+lotteryInfo.status === LOTTERY_STATUS.end">
        <template v-if="isLogin && lotteryInfo.isDraw && lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">恭喜您中奖！</p>
-            <a v-if="isBindPhone" class="blue-text" @click="jumpToBinding">
-              点击绑定手机号
-              <i class="iconfont icon-zhankai"></i>
-            </a>
-            <span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
-              查看中奖名单
-              <i class="iconfont icon-zhankai"></i>
-            </span>
          </div>
        </template>
        <template v-if="isLogin && lotteryInfo.isDraw && !lotteryInfo.isWin">
          <div class="win-result-box">
            <p class="win-result">很遗憾，您没有中奖</p>
-            <span v-if="lotteryInfo.showResult" class="blue-text win-list" @click="$emit('openWiner')">
-              查看中奖名单
-              <i class="iconfont icon-zhankai"></i>
-            </span>
          </div>
        </template>
        <template v-if="!isLogin || !lotteryInfo.isDraw">
@@ -45,16 +33,13 @@
        </template>
      </template>
    </div>
-    <div
+    <div v-if="+lotteryInfo.status !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw" class="join-num">
-      v-if="parseInt(lotteryInfo.status, 10) !== LOTTERY_STATUS.end ? true : !isLogin || !lotteryInfo.isDraw"
-      class="join-num"
-    >
      已有 {{ lotteryInfo.activeNum }} 人参与
    </div>
  </section>
 </template>
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
 import { LOTTERY_STATUS } from '@/utils/constant'
 // 倒计时逻辑处理
 import CountDown from '@/mixins/CountDown'
@@ -75,8 +60,7 @@ export default {
  computed: {
    ...mapGetters({
      isLogin: 'users/isLogin',
-      lotteryInfo: 'lottery/lotteryInfo',
+      lotteryInfo: 'lottery/lotteryInfo'
-      isBindPhone: 'users/isBindPhone'
    })
  },
  watch: {
@@ -91,7 +75,6 @@ export default {
    this.dateInit()
  },
  methods: {
-    ...mapActions({ jumpToBinding: 'users/jumpToBinding' }),
    dateInit() {
      // 倒计时开始
      if (this.lotteryInfo.status === 0) {
@@ -112,6 +95,9 @@ export default {
 }
 </script>
 <style lang="less">
+@--box-width: 100px;
+@--box-height: @--box-width;
 @keyframes wave {
  0% {
    opacity: 0.5;
@@ -131,7 +117,8 @@ export default {
 }
 .join-button {
  .btn-box {
-    width: 158px;
+    width: @--box-width;
+    min-height: @--box-height;
    height: 100%;
    margin: 0 auto;
    display: flex;
@@ -148,8 +135,8 @@ export default {
      bottom: 0;
      right: 0;
      margin: auto;
-      width: 142px;
+      width: @--box-width - 16px;
-      height: 142px;
+      height: @--box-height - 16px;
      &::before {
        content: '';
        border-radius: 50%;
@@ -169,8 +156,8 @@ export default {
        position: absolute;
        top: 0;
        left: 0;
-        width: 142px;
+        width: @--box-width - 16px;
-        height: 142px;
+        height: @--box-height - 16px;
        background-color: #fbaca6;
        transform: scale(1.1);
        animation: wavetwo 1s ease-out infinite;
@@ -183,9 +170,9 @@ export default {
      color: #fff;
      font-size: 18px;
      text-align: center;
-      width: 142px;
+      width: @--box-width - 16px;
-      height: 142px;
+      height: @--box-height - 16px;
-      line-height: 142px;
+      line-height: @--box-height - 16px;
      border-radius: 50%;
      background-color: #e85c52;
      outline: none;
@@ -198,7 +185,7 @@ export default {
        background-color: #999;
      }
      &.countdown {
-        font-size: 16px;
+        font-size: 12px;
      }
    }
    .win-result-box {
@@ -231,54 +218,5 @@ export default {
    line-height: 20px;
    text-align: center;
  }
-  // .test {
-  //     opacity: 1;
-  //     display: block;
-  //     background: none;
-  //     position: relative;
-  //     border-radius: 50%;
-  //     width: 24px;
-  //     height: 24px;
-  //     margin: 0 0 0 80px !important;
-  //     background: rgba(255, 255, 255, 0.1);
-  //     transition: 0.6s;
-  //     &::before {
-  //         position: absolute;
-  //         width: 18px;
-  //         height: 18px;
-  //         border-radius: 50%;
-  //         content: "";
-  //         border: 1px solid #fff;
-  //         left: 50%;
-  //         top: 50%;
-  //         transition: 0.4s;
-  //         transform: translate(-50%, -50%);
-  //     }
-  //     &:after {
-  //         position: absolute;
-  //         width: 8px;
-  //         height: 8px;
-  //         border-radius: 50%;
-  //         content: "";
-  //         background: #fff;
-  //         left: 50%;
-  //         top: 50%;
-  //         transition: 0.5s;
-  //         transform: translate(-50%, -50%);
-  //     }
-  //     &:hover {
-  //         &:before {
-  //             background: #fff;
-  //             width: 10px;
-  //             height: 10px;
-  //             border: 0px solid #00c0ff;
-  //         }
-  //         &:after {
-  //             width: 24px;
-  //             height: 24px;
-  //             background: none;
-  //         }
-  //     }
-  // }
 }
 </style>
--- a/components/Lottery/Timing/Main.vue
+++ b/components/Lottery/Timing/Main.vue
@@ -9,9 +9,9 @@
      </p>
    </div>
    <TimingStatus class="timing-status-box"></TimingStatus>
-    <JoinButton class="join-button-box" @lottery="lotteryCallback" @openWiner="isShowWinner = true"></JoinButton>
+    <JoinButton class="join-button-box" @lottery="lotteryCallback"></JoinButton>
    <BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
-    <WinnersPopup v-model="isShowWinner"></WinnersPopup>
+    <Records></Records>
  </section>
 </template>
 <script>
@@ -26,8 +26,6 @@ import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
 import JoinButton from '@/components/Lottery/Timing/JoinButton'
 // 返回直播间按钮
 import BackButton from '@/components/Lottery/Timing/BackButton'
-// 中奖名单
-import WinnersPopup from '@/components/Common/WinnersPopup'
 export default {
  components: {
@@ -35,12 +33,11 @@ export default {
    TimingStatus,
    JoinButton,
    BackButton,
-    WinnersPopup
+    Records: () => import('@/components/Lottery/Instant/Records'),
  },
  data() {
    return {
      isBtnLoading: false,
-      isShowWinner: false,
      id: this.$route.query.id,
      playId: this.$route.query.sessionId
    }
@@ -123,7 +120,7 @@ export default {
  height: 100%;
  position: relative;
  .timing-banner {
-    padding-top: 9 / 16 * 100%;
+    padding-top: 115 / 330 * 100%;
    position: relative;
  }
  .prize-info {
@@ -158,7 +155,6 @@ export default {
  }
  .join-button-box {
    margin-top: 50px;
-    min-height: 158px;
  }
  .back-box {
    position: absolute;

--- a/utils/constant.js
+++ b/utils/constant.js
@@ -46,6 +46,16 @@ export const LOTTERY_STYLE_TXT = {
  [LOTTERY_STYLE.wheel]: '大转盘'
 }
+/* 定时抽奖 场次开奖条件 */
+export const LOTTERY_INSTANT_RULES = {
+  time: 1,
+  people: 2
+}
+export const LOTTERY_INSTANT_RULES_TXT = {
+  [LOTTERY_INSTANT_RULES.time]: '倒计时',
+  [LOTTERY_INSTANT_RULES.people]: '参与人数'
+}
 /* 留言抽奖兑换方式 */
 export const LOTTERY_EXCHANGE_TYPE = {
  offline: 1,