From c5f0bf3218e0517a54ba0af7fdd15fb9774dcb14 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Fri, 15 Sep 2023 13:52:58 +0800
Subject: [PATCH] 2023.9.15

---
 src/api/activity/drawPrize.js           |   1 -
 src/components/XyTable/index.vue        |   6 +-
 src/views/activity/drawPrizeLog.vue     | 432 +++++++++++++-----------
 src/views/page/MidAutumnLotteryDraw.vue |  88 +++--
 4 files changed, 290 insertions(+), 237 deletions(-)

diff --git a/src/api/activity/drawPrize.js b/src/api/activity/drawPrize.js
index f8b1c14..80e376f 100644
--- a/src/api/activity/drawPrize.js
+++ b/src/api/activity/drawPrize.js
@@ -29,7 +29,6 @@ export function destroyDrawLog(params) {
 
 
 
-
 export function save(data) {
   return request({
     url: '/api/admin/draw-prize/save',
diff --git a/src/components/XyTable/index.vue b/src/components/XyTable/index.vue
index 4838ba6..fe2cc3a 100644
--- a/src/components/XyTable/index.vue
+++ b/src/components/XyTable/index.vue
@@ -166,7 +166,10 @@ export default {
     },
     toggleAllSelection() {
       this.$refs.table.toggleAllSelection()
-    }
+    },
+    getSelection(){
+      return this.$refs.table?.store?.states?.selection ?? []
+    },
   },
   created() {
     this.initLoad()
@@ -310,6 +313,7 @@ export default {
                       prop={item.prop}
                       sortable={item.sortable ?? true}
                       type={item.type}
+                      reserve-selection={ item.type === 'selection' ? item.reserveSelection : false }
                       selectable={item.selectable}
                       scopedSlots={item.type === 'expand' ? {
                         default(props){
diff --git a/src/views/activity/drawPrizeLog.vue b/src/views/activity/drawPrizeLog.vue
index 50511bf..766c745 100644
--- a/src/views/activity/drawPrizeLog.vue
+++ b/src/views/activity/drawPrizeLog.vue
@@ -1,202 +1,232 @@
-<template>
-  <div>
-    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目抽奖日志">
-      <div slot="content"></div>
-      <slot>
-        <div class="selects">
-          <div style="display: flex;align-items: center;">
-            <span style="padding: 0 6px;word-break: keep-all;">
-              项目
-            </span>
-            <Select v-model="select.activity_list_id" style="width: 180px;">
-              <Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
-              </Option>
-            </Select>
-          </div>
-          <div>
-            <span style="padding: 0 6px;word-break: keep-all;">
-              关键字
-            </span>
-            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
-          </div>
-
-          <Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">重置
-          </Button>
-          <Button style="margin-left: 10px" type="primary" @click="doSearch">查询</Button>
-          <Button style="margin-left: 10px" type="error" @click="doExcel">导出</Button>
-          <Button style="margin-left: 10px" type="primary" @click="doGet">设置已领取</Button>
-          <Button style="margin-left: 10px" type="warning" @click="doNoGet">设置未领取</Button>
-        </div>
-      </slot>
-    </lx-header>
-
-
-    <xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
-      :total="total" @delete="deleteitem" @selectAllClick="handleSelectionChange">>
-      <template v-slot:btns>
-
-      </template>
-    </xy-table>
-  </div>
-</template>
-
-<script>
-  import {
-    drawLog,
-    destroyDrawLog
-  } from "@/api/activity/drawPrize";
-  import {
-    index as activityIndex
-  } from "@/api/activity/index";
-  import {
-    download
-  } from '@/utils/downloadRequest'
-  export default {
-    data() {
-      return {
-        select: {
-          page: 1,
-          page_size: 20,
-          keyword: '',
-          activity_list_id: "",
-          ids: []
-        },
-        listActivity: [],
-        total: 0,
-        list: [],
-        table: [{
-            width: 36,
-            sortable: false,
-            type: 'selection',
-            fixed: "left"
-          },
-          {
-            prop: 'activity_list.name',
-            label: '项目名称',
-            fixed: 'left',
-            align: 'left'
-          },
-          {
-            prop: 'mobile',
-            label: '手机号',
-            align: 'center',
-            width: "120px"
-          },
-          {
-            prop: 'user.name',
-            label: '用户名称',
-            align: 'center',
-            width: "120px"
-          }, {
-            prop: 'user.username',
-            label: '登录名',
-            align: 'center',
-            width: "120px"
-          }, {
-            prop: 'draw_prize.name',
-            label: '中奖信息',
-            align: 'center',
-            width: "200px"
-          }, {
-            prop: 'is_send',
-            label: '是否领奖',
-            align: 'center',
-            width: "120px",
-            formatter: (v1, v2, value) => {
-              return value == 1 ? "已领取" : "未领取";
-            }
-          },
-
-          {
-            prop: 'created_at',
-            label: '抽奖时间',
-            width: 190,
-            formatter: (v1, v2, value) => {
-              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
-            }
-          }
-        ],
-      }
-    },
-    methods: {
-      doGet() {
-
-      },
-      doNoGet() {
-
-      },
-      //选择列表
-      handleSelectionChange(val) {
-
-        this.select.ids = val
-
-      },
-
-
-      doExcel() {
-        download(
-          '/api/admin/draw-prize/draw-log',
-          'get', {
-            is_export: 1,
-            ...this.select
-          },
-          '中奖列表.xlsx')
-      },
-      async loadActivity() {
-        const res = await activityIndex({
-          page: 1,
-          page_size: 999
-        })
-        this.listActivity = res.data;
-      },
-      doSearch() {
-        this.select.page = 1;
-        this.load();
-      },
-      add() {
-        this.$refs['addActivityUser'].isShow = true
-      },
-      pageSizeChange(e) {
-        this.select.page_size = e;
-        this.select.page = 1;
-        this.load();
-      },
-      async load() {
-        const res = await drawLog(this.select)
-        this.total = res.total
-        this.list = res.data
-      },
-      deleteitem(row) {
-        destroyDrawLog({
-          id: row.id
-        }).then(res => {
-          this.load();
-          this.$Message.success("操作成功");
-        })
-      },
-      pageChange(e) {
-        this.select.page = e
-        this.load()
-      },
-    },
-    mounted() {
-      this.load();
-      this.loadActivity()
-    },
-    created() {
-      let type = parseInt(this.$route.path.split("_")[1]);
-      this.type = this.select.is_auth = type;
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .selects {
-    display: flex;
-    flex-wrap: wrap;
-
-    &>div {
-      margin-bottom: 6px;
-    }
-  }
+<template>
+  <div>
+    <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="项目抽奖日志">
+      <div slot="content"></div>
+      <slot>
+        <div class="selects">
+          <div style="display: flex;align-items: center;">
+            <span style="padding: 0 6px;word-break: keep-all;">
+              项目
+            </span>
+            <Select v-model="select.activity_list_id" style="width: 180px;">
+              <Option v-for="(item,index) of listActivity" :key="item.id" :value="item.id" :label="item.name">
+              </Option>
+            </Select>
+          </div>
+          <div>
+            <span style="padding: 0 6px;word-break: keep-all;">
+              关键字
+            </span>
+            <Input v-model="select.keyword" placeholder="请输入关键字" style="width: 180px"></Input>
+          </div>
+
+          <Button style="margin-left: 10px" type="primary" @click="select={page:1,keyword:''}">重置
+          </Button>
+          <Button style="margin-left: 10px" type="primary" @click="doSearch">查询</Button>
+          <Button style="margin-left: 10px" type="error" @click="doExcel">导出</Button>
+          <Button style="margin-left: 10px" type="primary" @click="doGet">设置已领取</Button>
+          <Button style="margin-left: 10px" type="warning" @click="doNoGet">设置未领取</Button>
+          <Button style="margin-left: 10px" type="warning" ghost @click="del">批量删除</Button>
+        </div>
+      </slot>
+    </lx-header>
+
+
+    <xy-table ref="table" :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
+      :total="total" @delete="deleteitem" @selectAllClick="handleSelectionChange">>
+      <template v-slot:btns>
+
+      </template>
+    </xy-table>
+  </div>
+</template>
+
+<script>
+  import {
+    drawLog,
+    destroyDrawLog
+  } from "@/api/activity/drawPrize";
+  import {
+    index as activityIndex
+  } from "@/api/activity/index";
+  import {
+    download
+  } from '@/utils/downloadRequest'
+  export default {
+    data() {
+      return {
+        select: {
+          page: 1,
+          page_size: 20,
+          keyword: '',
+          activity_list_id: "",
+          ids: []
+        },
+        listActivity: [],
+        total: 0,
+        list: [],
+        table: [{
+            width: 36,
+            sortable: false,
+            type: 'selection',
+            fixed: "left",
+            reserveSelection: true
+          },
+          {
+            prop: 'activity_list.name',
+            label: '项目名称',
+            fixed: 'left',
+            align: 'left'
+          },
+          {
+            prop: 'mobile',
+            label: '手机号',
+            align: 'center',
+            width: "120px"
+          },
+          {
+            prop: 'user.name',
+            label: '用户名称',
+            align: 'center',
+            width: "120px"
+          }, {
+            prop: 'user.username',
+            label: '登录名',
+            align: 'center',
+            width: "120px"
+          }, {
+            prop: 'draw_prize.name',
+            label: '中奖信息',
+            align: 'center',
+            width: "200px"
+          }, {
+            prop: 'is_send',
+            label: '是否领奖',
+            align: 'center',
+            width: "120px",
+            formatter: (v1, v2, value) => {
+              return value == 1 ? "已领取" : "未领取";
+            }
+          },
+
+          {
+            prop: 'created_at',
+            label: '抽奖时间',
+            width: 190,
+            formatter: (v1, v2, value) => {
+              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+            }
+          }
+        ],
+      }
+    },
+    methods: {
+      del () {
+        let that = this
+        this.$confirm("确认删除吗？",{
+          beforeClose(action,instance,done){
+            if (action === 'confirm') {
+              instance.confirmButtonLoading = true;
+              instance.confirmButtonText = '删除中..';
+
+              instance.confirmButtonLoading = false;
+              let option = {}
+              that.$refs['table'].getSelection().forEach((i,index) => {
+                option[`id[${index}]`] = i.id
+              })
+              destroyDrawLog(option).then(res => {
+                done()
+              })
+            } else {
+              done()
+            }
+          }
+        }).then(res => {
+          this.$message({
+            type: 'success',
+            message: '删除成功'
+          })
+          this.load()
+        })
+      },
+      doGet() {
+
+      },
+      doNoGet() {
+
+      },
+      //选择列表
+      handleSelectionChange(val) {
+
+        this.select.ids = val
+
+      },
+
+
+      doExcel() {
+        download(
+          '/api/admin/draw-prize/draw-log',
+          'get', {
+            is_export: 1,
+            ...this.select
+          },
+          '中奖列表.xlsx')
+      },
+      async loadActivity() {
+        const res = await activityIndex({
+          page: 1,
+          page_size: 999
+        })
+        this.listActivity = res.data;
+      },
+      doSearch() {
+        this.select.page = 1;
+        this.load();
+      },
+      add() {
+        this.$refs['addActivityUser'].isShow = true
+      },
+      pageSizeChange(e) {
+        this.select.page_size = e;
+        this.select.page = 1;
+        this.load();
+      },
+      async load() {
+        const res = await drawLog(this.select)
+        this.total = res.total
+        this.list = res.data
+      },
+      deleteitem(row) {
+        destroyDrawLog({
+          id: row.id
+        }).then(res => {
+          this.load();
+          this.$Message.success("操作成功");
+        })
+      },
+      pageChange(e) {
+        this.select.page = e
+        this.load()
+      },
+    },
+    mounted() {
+      this.load();
+      this.loadActivity()
+    },
+    created() {
+      let type = parseInt(this.$route.path.split("_")[1]);
+      this.type = this.select.is_auth = type;
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .selects {
+    display: flex;
+    flex-wrap: wrap;
+
+    &>div {
+      margin-bottom: 6px;
+    }
+  }
 </style>
diff --git a/src/views/page/MidAutumnLotteryDraw.vue b/src/views/page/MidAutumnLotteryDraw.vue
index 2b95767..0d5e23d 100644
--- a/src/views/page/MidAutumnLotteryDraw.vue
+++ b/src/views/page/MidAutumnLotteryDraw.vue
@@ -31,14 +31,14 @@
       </div>
 
       <div class="right" :style="{ 'height': maxHeight }">
-        <div class="numbers" :class="{ 'numbers-active': isEnd }" ref="numbers">
+        <div class="numbers" :class="{ 'numbers-active': !isEnd }" ref="numbers">
           <div
             class="numbers__item"
             :style="{
               'animation-timing-function': flag ? '' : 'ease-out'
             }"
             :class="{
-              'numbers__item--active': isEnd
+              'numbers__item--active': !isEnd
                 ? !!resultNumbers.find((i) => i === index)
                 : !!resultNumbers.find((i) => i === item),
             }"
@@ -51,13 +51,13 @@
           </div>
 
           <div
-            v-show="isEnd"
+            v-show="!isEnd"
             class="numbers__item"
             :style="{
               'animation-timing-function': flag ? '' : 'ease-out'
             }"
             :class="{
-              'numbers__item--active': isEnd
+              'numbers__item--active': !isEnd
                 ? !!resultNumbers.find((i) => i === index)
                 : !!resultNumbers.find((i) => i === item),
             }"
@@ -72,15 +72,21 @@
       </div>
     </div>
 
-    <el-image
-      :style="{ filter: flag ? 'grayscale(90%)' : '' }"
-      v-if="$route.query.result != 1"
-      :lazy="false"
-      class="btn"
-      :src="require('@/assets/mdLotteryDraw/button.png')"
-      fit="cover"
-      @click="draw"
-    ></el-image>
+    <button class="btn" :disabled="isOver"
+         :style="{ filter: isOver ? 'grayscale(90%)' : '' }"
+         v-if="$route.query.result != 1"
+         @click="draw">
+      <strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
+    </button>
+<!--    <el-image-->
+<!--      :style="{ filter: flag ? 'grayscale(90%)' : '' }"-->
+<!--      v-if="$route.query.result != 1"-->
+<!--      :lazy="false"-->
+<!--      class="btn"-->
+<!--      :src="require('@/assets/mdLotteryDraw/button.png')"-->
+<!--      fit="cover"-->
+<!--      @click="draw"-->
+<!--    ></el-image>-->
   </div>
 </template>
 
@@ -95,7 +101,8 @@ export default {
       maxHeight: '40vh',
       bkg,
       flag: false, //是否开始
-      isEnd: false, //视图结束
+      isEnd: true, //视图结束
+      isOver: false,//抽奖是否结束
       timer: null,
       config: {
         draw_prize: {},
@@ -144,6 +151,7 @@ export default {
     },
 
     draw: throttle(async function () {
+      if (this.isOver) return
       if (!this.flag) {
         console.log("开始抽奖");
         try {
@@ -156,35 +164,36 @@ export default {
           );
           this.result = result.draw_numbers;
           this.flag = true;
-          this.isEnd = true;
+          this.isEnd = false;
 
           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(num);
-            }
-
-            this.resultNumbers = Array.from(set);
+            // let set = new Set();
+            // while (set.size < result.draw_numbers.length) {
+            //   let num = Math.floor(
+            //     Math.random() * this.config.numbers_list.length
+            //   );
+            //   set.add(num);
+            // }
+            //
+            // this.resultNumbers = Array.from(set);
 
             if (!this.flag) {
               clearInterval(this.timer);
               setTimeout(() => {
                 this.resultNumbers = result.draw_numbers;
-                this.isEnd = false;
+                this.isEnd = true;
+                this.isOver = true;
               }, 150);
             }
           }, 150);
 
-          setTimeout(() => {
-            this.flag = false;
-            console.log("结束抽奖");
-          }, 3000);
         } catch (err) {
           console.log(err);
         }
+      } else {
+
+        this.flag = false;
+        console.log("结束抽奖");
       }
     }),
   },
@@ -201,12 +210,13 @@ export default {
             set.add(
               this.config.numbers_list[
                 Math.floor(Math.random() * this.config.numbers_list.length)
-              ]
+              ].toString().padStart(3,'0')
             );
           }
 
           return Array.from(set).sort(() => Math.random() - 0.5);
         }
+
         return this.config.numbers_list
           .sort(() => Math.random() - 0.5)
           .slice(0, 36);
@@ -311,11 +321,13 @@ export default {
         }
         @keyframes blur {
           from {
+            text-shadow: 2px 4px #00000066;
             filter: blur(1.5px)  drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
           }
           to {
+            text-shadow: 2px 4px #00000066;
             filter: blur(1.5px) drop-shadow(0 0 4px #00000055) drop-shadow(0 0 8px #00000033);
-            transform: translateY(-300%);
+            transform: translateY(-200%);
           }
         }
         &__item {
@@ -374,13 +386,21 @@ export default {
     }
   }
   .btn {
+    border-width: 0 2px 2px 0;
+    display: block;
     cursor: pointer;
+    text-align: center;
+    font-size: 2.6em;
     width: 46.67%;
-    display: flex;
-    justify-content: center;
+    font-weight: 900;
     transition: all 0.2s;
+    background: linear-gradient(to bottom,rgb(242, 172, 106),rgb(247, 232, 203));
+    border-radius: 6px;
+    color: rgb(152, 50, 22);
+    box-shadow: 1px 4px 10px 6px #00000055;
 
-    margin: 4.5vh auto 0 auto;
+    margin: 4.2vh auto 0 auto;
+    padding: 10px 0;
   }
 }
 </style>