2023.9.13

src/api/activity/drawPrize.js

@@ -9,11 +9,12 @@ export function index(params) {
 }
 
 
-export function drawLog(params) {
+export function drawLog(params,isLoading=true) {
   return request({
     method: 'get',
     url: '/api/admin/draw-prize/draw-log',
-    params
+    params,
+    isLoading
   })
 }
 

src/api/mdLotteryDraw/index.js

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

src/views/activity/components/addDrawPrize.vue

@@ -14,6 +14,16 @@
           </div>
         </div>
       </template>
+      <template v-slot:apply>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            赞助商
+          </div>
+          <div class="xy-table-item-content">
+            <el-input clearable placeholder="请填写赞助商" v-model="detail.apply" style="width: 300px;" />
+          </div>
+        </div>
+      </template>
       <template v-slot:rate>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -144,6 +154,7 @@
           activity_list_id: "",
           rate: 0,
           name: "",
+          apply: "",
           status: 1,
           image_id: "",
           total: 0,

src/views/activity/drawPrize.vue

@@ -34,6 +34,30 @@
       <template v-slot:btns v-if="type==0 ">
 
       </template>
+      <template v-slot:btns v-else>
+        <el-table-column fixed="right" header-align="center" label="操作" width="200">
+          <template #default="{ row }">
+            <Poptip :transfer="true" confirm placement="bottom" title="确认要删除吗"
+                    @on-ok="deleteitem(row)">
+              <Button ghost size="small" type="error">删除
+              </Button>
+            </Poptip>
+
+            <Button style="margin-left: 4px;" size="small" type="primary" ghost
+                    @click="$refs['addDrawPrize'].id = row.id,$refs['addDrawPrize'].isShow = true,$refs['addDrawPrize'].type = 'editor'">编辑
+            </Button>
+
+            <Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost
+                    @click="$router.push('/mdLotteryDraw/'+row.id)">抽奖
+            </Button>
+
+            <Button v-if="row.activity_list_id === 8" style="margin-left: 4px;" size="small" type="primary" ghost
+                    @click="$router.push('/mdLotteryDraw/'+row.id+'?result=1')">中奖结果
+            </Button>
+
+          </template>
+        </el-table-column>
+      </template>
     </xy-table>
     <addDrawPrize ref="addDrawPrize" :listActivity="listActivity" @refresh="load()"></addDrawPrize>
   </div>

src/views/page/MidAutumnLotteryDraw.vue

@@ -1,30 +1,56 @@
 <template>
-  <div id="lottery-draw" class="body" :style="{ 'background-image': 'url(' + bkg + ')' }">
+  <div
+    id="lottery-draw"
+    class="body"
+    :style="{ 'background-image': 'url(' + bkg + ')' }"
+  >
     <h3 class="title">
-      正在抽取三等奖
+      <span v-if="!$route.query.result">正在抽取</span>
+      {{ config.draw_prize.name }}
+      <span v-if="$route.query.result">中奖名单</span>
     </h3>
 
     <div class="container">
       <div class="left">
-        <el-image class="image" :src="config.draw_prize.image" fit="cover">
+        <el-image
+          class="image"
+          :src="
+            config.draw_prize.image_file ? config.draw_prize.image_file.url : ''
+          "
+          fit="cover"
+        >
         </el-image>
 
         <div class="info">
           <p>奖品： {{ config.draw_prize.name }}</p>
-          <p>赞助商 : 泽科信息科技（苏州）有限公司 </p>
+          <p>赞助商： {{ config.draw_prize.apply }}</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">
+          <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>
+    <el-image
+      v-if="$route.query.result != 1"
+      :lazy="false"
+      class="btn"
+      :src="require('@/assets/mdLotteryDraw/button.png')"
+      fit="cover"
+      @click="draw"
+    ></el-image>
   </div>
 </template>
 
@@ -32,16 +58,19 @@
 import bkg from "@/assets/mdLotteryDraw/bkg.png";
 import { draw, drawConfig } from "@/api/mdLotteryDraw";
 import { throttle } from "@/utils";
+import { drawLog } from "@/api/activity/drawPrize";
 export default {
   data() {
     return {
       bkg,
+      flag: false, //是否开始
+      timer: null,
       config: {
         draw_prize: {},
-        numbers_list: []
+        numbers_list: [],
       },
       resultNumbers: [],
-    }
+    };
   },
   methods: {
     init() {
@@ -52,35 +81,90 @@ export default {
     },
     async getConfig() {
       const res = await drawConfig({
-        id: this.$route.params.id
+        id: this.$route.params.id,
-      })
+      });
-      console.log(res)
+      this.config = res;
-      this.config = res
+    },
+    async getResult() {
+      const res = await drawLog(
+        {
+          page: 1,
+          page_size: 9999,
+          activity_list_id: 8,
+        },
+        false
+      );
+      console.log(res);
+
+      this.resultNumbers = res.data
+        .filter((i) => i.draw_prize_id == this.$route.params.id)
+        .map((i) => Number(i.mobile));
     },
-    draw: throttle(function () {
+
-      this.resultNumbers = [1,10,30,60]
+    draw: throttle(async function () {
+      if (!this.flag) {
+        console.log("开始抽奖");
+        try {
+          const result = await draw({
+            id: this.$route.params.id,
+          });
+          console.log(result);
+          this.flag = true;
+
+          this.timer = setInterval(() => {
+            let set = new Set();
+            while (set.size < result.draw_numbers.length) {
+              let num = Math.floor(
+                Math.random() * this.config.numbers_list.length
+              );
+              set.add(this.config.numbers_list[num]);
+            }
+
+            this.resultNumbers = Array.from(set);
+
+            if (!this.flag) {
+              clearInterval(this.timer);
+              setTimeout(() => {
+                this.resultNumbers = result.draw_numbers;
+              }, 500);
+            }
+          }, 500);
+        } catch (err) {
+          console.log(err);
+        }
+      } else {
+        this.flag = false;
+        console.log("结束抽奖");
+      }
     }),
   },
   computed: {
     numbers() {
+      if (this.$route.query.result) {
+        return this.resultNumbers;
+      }
       if (this.config.numbers_list) {
-        return this.config.numbers_list.sort(() => Math.random() - 0.5)
+        return this.config.numbers_list.sort(() => Math.random() - 0.5);
       } else {
-        return []
+        return [];
-      }
       }
     },
+  },
   created() {
-    this.getConfig()
+    this.getConfig();
+
+    if (this.$route.query.result == 1) {
+      this.getResult();
+    }
   },
   mounted() {
     this.init();
 
     window.onresize = () => {
       this.init();
-    }
+    };
-  }
+  },
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -89,15 +173,28 @@ export default {
   width: 100vw;
   background-size: cover;
   background-repeat: no-repeat;
+  overflow: hidden;
 
   padding-top: 17.31vh;
   .title {
+    letter-spacing: 2px;
     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);
+    background: linear-gradient(
+      to right,
+      #0000,
+      #dcbb78 8%,
+      #dcbb78 12%,
+      #dcbb78 34%,
+      #f1e2bb 40%,
+      #dcc68e 58%,
+      #dcc68e 66%,
+      #f5ecd0 92%,
+      #0000
+    );
   }
 
   .container {
@@ -106,12 +203,12 @@ export default {
     box-sizing: border-box;
     display: flex;
 
-    padding: 6.6em 7.71vw 0 7.71vw;
+    padding: 9.1vh 7.71vw 0 7.71vw;
 
     .left {
       font-size: 1em;
 
-      padding-top: 4em;
+      padding-top: 5.5vh;
       margin-right: 9.13em;
       .image {
         width: 30.75em;
@@ -119,40 +216,41 @@ export default {
       }
       .info {
         font-weight: 400;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 2.5em;
         font-size: 1.6em;
         font-family: FZZhengHeiS-M-GB, sans-serif;
 
-        margin-top: 2.73em;
+        margin-top: 3.8vh;
       }
     }
 
     .right {
       flex: 1;
-      max-height: 42vh;
+      max-height: 39.5vh;
       overflow-y: scroll;
 
       &::-webkit-scrollbar {
-        width: 4px;
+        width: 0px;
       }
 
       .numbers {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
         grid-column-gap: 2.8em;
-        grid-row-gap: .73em;
+        grid-row-gap: 0.93vh;
 
         &__item {
           color: #ebd1a8;
           text-align: center;
-          font-size: 3.44em;
+          font-size: 3.4em;
           font-family: PingFang SC, sans-serif;
           font-weight: 800;
           border-radius: 2.8em;
+          transition: all 0.2s ease-out;
 
           &--active {
-            animation: filter .2s ease-out forwards;
+            animation: filter 0.3s ease-out forwards;
           }
         }
       }
@@ -160,12 +258,19 @@ export default {
   }
   @keyframes filter {
     from {
-    filter: blur(5px);
+      filter: blur(6px);
     }
     to {
       filter: blur(0);
-    color: #A9262C;
+      color: #a9262c;
-    background: linear-gradient(264deg, #F8EACC, #E0C48A, #F5E0B8, #EDDDAC, #E1B872);
+      background: linear-gradient(
+        264deg,
+        #f8eacc,
+        #e0c48a,
+        #f5e0b8,
+        #edddac,
+        #e1b872
+      );
     }
   }
   .btn {
@@ -174,7 +279,7 @@ export default {
     display: flex;
     justify-content: center;
 
-    margin: 4.9em auto 0 auto;
+    margin: 4.5vh auto 0 auto;
   }
 }
 </style>