2023.9.12

src/api/mdLotteryDraw/index.js

@@ -0,0 +1,17 @@
+import request from "@/utils/request";
+const activity_list_id = 8
+export function drawConfig (params) {
+  return request({
+    url: '/api/admin/draw-prize/draw-config',
+    method: 'get',
+    params
+  })
+}
+
+export function draw (params) {
+  return request({
+    url: '/api/admin/draw-prize/draw',
+    method: 'get',
+    params
+  })
+}

src/router/index.js

@@ -41,7 +41,11 @@ export const constantRoutes = [{
     component: () => import('@/views/404'),
     hidden: true
   },
-
+  {
+    path: '/mdLotteryDraw/:id',
+    component:() => import('@/views/page/MidAutumnLotteryDraw.vue'),
+    hidden: true
+  },
   {
     path: '/info',
     component: Layout,

src/utils/index.js

@@ -115,3 +115,16 @@ export function param2Obj(url) {
   })
   return obj
 }
+
+
+export function throttle(fn, interval = 500) {
+  let last;
+  return function () {
+    let args = arguments;
+    let now = +new Date();
+    if (!last || now - last > interval) {
+      last = now;
+      fn.apply(this, args);
+    }
+  }
+}

src/views/page/MidAutumnLotteryDraw.vue

@@ -0,0 +1,180 @@
+<template>
+  <div id="lottery-draw" class="body" :style="{ 'background-image': 'url(' + bkg + ')' }">
+    <h3 class="title">
+      正在抽取三等奖
+    </h3>
+
+    <div class="container">
+      <div class="left">
+        <el-image class="image" :src="config.draw_prize.image" fit="cover">
+        </el-image>
+
+        <div class="info">
+          <p>奖品：{{ config.draw_prize.name }}</p>
+          <p>赞助商 : 泽科信息科技（苏州）有限公司 </p>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="numbers">
+          <div class="numbers__item" :class="{ 'numbers__item--active': !!resultNumbers.find(i => i === item) }" v-for="(item,index) in numbers" :key="item">
+            {{ item }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <el-image class="btn" :src="require('@/assets/mdLotteryDraw/button.png')" fit="cover" @click="draw"></el-image>
+  </div>
+</template>
+
+<script>
+import bkg from "@/assets/mdLotteryDraw/bkg.png";
+import { draw, drawConfig } from "@/api/mdLotteryDraw";
+import { throttle } from "@/utils";
+export default {
+  data() {
+    return {
+      bkg,
+      config: {
+        draw_prize: {},
+        numbers_list: []
+      },
+      resultNumbers: [],
+    }
+  },
+  methods: {
+    init() {
+      const baseSize = 15;
+      const dom = document.getElementById("lottery-draw");
+      const scale = document.documentElement.clientWidth / 1920;
+      dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
+    },
+    async getConfig () {
+      const res = await drawConfig({
+        id: this.$route.params.id
+      })
+      console.log(res)
+      this.config = res
+    },
+    draw: throttle(function () {
+      this.resultNumbers = [1,10,30,60]
+    }),
+  },
+  computed: {
+    numbers () {
+      if (this.config.numbers_list) {
+        return this.config.numbers_list.sort(() => Math.random() - 0.5)
+      } else {
+        return []
+      }
+    }
+  },
+  created() {
+    this.getConfig()
+  },
+  mounted() {
+    this.init();
+
+    window.onresize = () => {
+      this.init();
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.body {
+  height: 100vh;
+  width: 100vw;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  padding-top: 17.31vh;
+  .title {
+    font-size: 3.11em;
+    font-family: FZHanZhenGuangBiaoS-GB,sans-serif;
+    font-weight: 600;
+    color: #9e302e;
+    text-align: center;
+    background: linear-gradient(to right,#0000,#dcbb78 8%,#dcbb78 12%,#dcbb78 34%,#f1e2bb 40%,#dcc68e 58%,#dcc68e 66%,#f5ecd0 92%,#0000);
+  }
+
+  .container {
+    width: 100vw;
+    font-size: 1em;
+    box-sizing: border-box;
+    display: flex;
+
+    padding: 6.6em 7.71vw 0 7.71vw;
+
+    .left {
+      font-size: 1em;
+
+      padding-top: 4em;
+      margin-right: 9.13em;
+      .image {
+        width: 30.75em;
+        height: 17.03em;
+      }
+      .info {
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 2.5em;
+        font-size: 1.6em;
+        font-family: FZZhengHeiS-M-GB,sans-serif;
+
+        margin-top: 2.73em;
+      }
+    }
+
+    .right {
+      flex: 1;
+      max-height: 42vh;
+      overflow-y: scroll;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      .numbers {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        grid-column-gap: 2.8em;
+        grid-row-gap: .73em;
+
+        &__item {
+          color: #ebd1a8;
+          text-align: center;
+          font-size: 3.44em;
+          font-family: PingFang SC,sans-serif;
+          font-weight: 800;
+          border-radius: 2.8em;
+
+          &--active {
+            animation: filter .2s ease-out forwards;
+          }
+        }
+      }
+    }
+  }
+@keyframes filter {
+  from {
+    filter: blur(5px);
+  }
+  to {
+    filter: blur(0);
+    color: #A9262C;
+    background: linear-gradient(264deg, #F8EACC, #E0C48A, #F5E0B8, #EDDDAC, #E1B872);
+  }
+}
+  .btn {
+    cursor: pointer;
+    width: 46.67%;
+    display: flex;
+    justify-content: center;
+
+    margin: 4.9em auto 0 auto;
+  }
+}
+</style>