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

@@ -1,106 +1,110 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-
-Vue.use(Router)
-
-/* Layout */
-import Layout from '@/layout'
-
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
-export const constantRoutes = [{
-    path: '/login',
-    component: () => import('@/views/login/index'),
-    hidden: true
-  },
-
-  {
-    path: '/404',
-    component: () => import('@/views/404'),
-    hidden: true
-  },
-
-  {
-    path: '/info',
-    component: Layout,
-    children: [{
-      path: 'password',
-      component: () => import('@/views/system/password'),
-      name: '密码修改',
-      meta: {
-        title: '密码修改'
-      }
-    }],
-    hidden: true
-  },
-
-  {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'dashboard',
-      name: '系统首页',
-      component: () => import('@/views/dashboard/index'),
-      meta: {
-        title: '系统首页',
-        icon: 'dashboard'
-      }
-    }, ]
-  }
-]
-
-/**
- * asyncRoutes
- * the routes that need to be dynamically loaded based on user roles
- */
-export const asyncRoutes = [
-
-
-  // 404 page must be placed at the end !!!
-  {
-    path: '*',
-    redirect: '/404',
-    hidden: true
-  }
-]
-
-const createRouter = () => new Router({
-  // mode: 'history', // require service support
-  scrollBehavior: () => ({
-    y: 0
-  }),
-  routes: constantRoutes
-})
-
-const router = createRouter()
-
-// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
-export function resetRouter() {
-  const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
-}
-
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+/* Layout */
+import Layout from '@/layout'
+
+/**
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true               if set true, will always show the root menu
+ *                                if not set alwaysShow, when item has more than one children route,
+ *                                it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * meta : {
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
+  }
+ */
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [{
+    path: '/login',
+    component: () => import('@/views/login/index'),
+    hidden: true
+  },
+
+  {
+    path: '/404',
+    component: () => import('@/views/404'),
+    hidden: true
+  },
+  {
+    path: '/mdLotteryDraw/:id',
+    component:() => import('@/views/page/MidAutumnLotteryDraw.vue'),
+    hidden: true
+  },
+  {
+    path: '/info',
+    component: Layout,
+    children: [{
+      path: 'password',
+      component: () => import('@/views/system/password'),
+      name: '密码修改',
+      meta: {
+        title: '密码修改'
+      }
+    }],
+    hidden: true
+  },
+
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/dashboard',
+    children: [{
+      path: 'dashboard',
+      name: '系统首页',
+      component: () => import('@/views/dashboard/index'),
+      meta: {
+        title: '系统首页',
+        icon: 'dashboard'
+      }
+    }, ]
+  }
+]
+
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+ */
+export const asyncRoutes = [
+
+
+  // 404 page must be placed at the end !!!
+  {
+    path: '*',
+    redirect: '/404',
+    hidden: true
+  }
+]
+
+const createRouter = () => new Router({
+  // mode: 'history', // require service support
+  scrollBehavior: () => ({
+    y: 0
+  }),
+  routes: constantRoutes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
 export default router

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>