From f1986f778751577dfd6760df73b2e3cf9775f4d6 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 18 Sep 2023 14:58:35 +0800
Subject: [PATCH] 2023.9.18

---
 .../activity/components/addDrawPrize.vue      |  11 +
 src/views/activity/drawPrize.vue              | 419 +++++++++---------
 src/views/page/MidAutumnLotteryDraw.vue       | 123 +++--
 3 files changed, 303 insertions(+), 250 deletions(-)

diff --git a/src/views/activity/components/addDrawPrize.vue b/src/views/activity/components/addDrawPrize.vue
index 96c7f70..266dc86 100644
--- a/src/views/activity/components/addDrawPrize.vue
+++ b/src/views/activity/components/addDrawPrize.vue
@@ -15,6 +15,16 @@
           </div>
         </div>
       </template>
+      <template v-slot:price_item>
+        <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.price_item" style="width: 300px;" />
+          </div>
+        </div>
+      </template>
       <template v-slot:apply>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -169,6 +179,7 @@
           activity_list_id: "",
           rate: 0,
           name: "",
+          price_item: '',
           apply: "",
           status: 1,
           image_id: "",
diff --git a/src/views/activity/drawPrize.vue b/src/views/activity/drawPrize.vue
index cf3c810..0cbb37d 100644
--- a/src/views/activity/drawPrize.vue
+++ b/src/views/activity/drawPrize.vue
@@ -1,206 +1,213 @@
-<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;" v-show="!sysInfo">
-            <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="primary" @click="add">新增</Button>
-        </div>
-      </slot>
-    </lx-header>
-
-
-    <xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
-      :total="total" @delete="deleteitem"
-      @editor="(row)=>{$refs['addDrawPrize'].id = row.id;$refs['addDrawPrize'].isShow = true;$refs['addDrawPrize'].type = 'editor'}">
-      <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>
-</template>
-
-<script>
-  import {
-    index,
-    destroy,
-    show
-  } from "@/api/activity/drawPrize";
-  import {
-    index as activityIndex
-  } from "@/api/activity/index";
-
-
-  import addDrawPrize from '@/views/activity/components/addDrawPrize'
-  export default {
-    components: {
-      addDrawPrize
-    },
-    data() {
-      return {
-        sysInfo: null,
-        select: {
-          page: 1,
-          page_size: 20,
-          keyword: '',
-          activity_list_id: ""
-        },
-        listActivity: [],
-        total: 0,
-        list: [],
-        table: [{
-            prop: 'activity_list.name',
-            label: '项目名称',
-            fixed: 'left',
-            align: 'left'
-          }, {
-            prop: 'name',
-            label: '奖品名称',
-            align: 'left',
-
-
-          }, {
-            prop: 'total',
-            label: '总数',
-            align: 'right'
-          },
-          {
-            prop: 'rate',
-            label: '概率',
-            align: 'right'
-          }, {
-            prop: 'has_total',
-            label: '剩余数量',
-            align: 'right'
-          }, {
-            prop: 'sort',
-            label: '排序',
-            align: 'right'
-          }, {
-            prop: 'money',
-            label: '金额',
-            align: 'right'
-          },
-          {
-            prop: 'created_at',
-            label: '创建信息',
-            width: 190,
-            formatter: (v1, v2, value) => {
-              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
-            }
-          }
-        ],
-      }
-    },
-    methods: {
-
-      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['addDrawPrize'].isShow = true
-      },
-      pageSizeChange(e) {
-        this.select.page_size = e;
-        this.select.page = 1;
-        this.load();
-      },
-      async load() {
-        const res = await index(this.select)
-        this.total = res.total
-        this.list = res.data
-      },
-      deleteitem(row) {
-        destroy({
-          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;
-
-      let that = this;
-      let sysInfo = sessionStorage.getItem('sys_info');
-      console.log(sysInfo)
-      if (sysInfo && sysInfo != "") {
-        let _sys = JSON.parse(sysInfo);
-        that.select.activity_list_id = _sys.id;
-        that.sysInfo = _sys;
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .selects {
-    display: flex;
-    flex-wrap: wrap;
-
-    &>div {
-      margin-bottom: 6px;
-    }
-  }
-</style>
\ No newline at end of file
+<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;" v-show="!sysInfo">
+            <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="primary" @click="add">新增</Button>
+        </div>
+      </slot>
+    </lx-header>
+
+
+    <xy-table :list="list" :table-item="table" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
+      :total="total" @delete="deleteitem"
+      @editor="(row)=>{$refs['addDrawPrize'].id = row.id;$refs['addDrawPrize'].isShow = true;$refs['addDrawPrize'].type = 'editor'}">
+      <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 && (row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
+              @click="toDraw(1,row)">抽奖
+            </Button>
+
+            <Button v-if="row.activity_list_id === 8 && !(row.draw_logs_count < row.total)" style="margin-left: 4px;" size="small" type="primary" ghost
+              @click="toDraw(2,row)">中奖结果
+            </Button>
+
+          </template>
+        </el-table-column>
+      </template>
+    </xy-table>
+    <addDrawPrize ref="addDrawPrize" :listActivity="listActivity" @refresh="load()"></addDrawPrize>
+  </div>
+</template>
+
+<script>
+  import {
+    index,
+    destroy,
+    show
+  } from "@/api/activity/drawPrize";
+  import {
+    index as activityIndex
+  } from "@/api/activity/index";
+
+
+  import addDrawPrize from '@/views/activity/components/addDrawPrize'
+  export default {
+    components: {
+      addDrawPrize
+    },
+    data() {
+      return {
+        sysInfo: null,
+        select: {
+          page: 1,
+          page_size: 20,
+          keyword: '',
+          activity_list_id: ""
+        },
+        listActivity: [],
+        total: 0,
+        list: [],
+        table: [{
+            prop: 'activity_list.name',
+            label: '项目名称',
+            fixed: 'left',
+            align: 'left'
+          }, {
+            prop: 'name',
+            label: '奖品名称',
+            align: 'left',
+
+
+          }, {
+            prop: 'total',
+            label: '总数',
+            align: 'right'
+          },
+          {
+            prop: 'rate',
+            label: '概率',
+            align: 'right'
+          }, {
+            prop: 'has_total',
+            label: '剩余数量',
+            align: 'right'
+          }, {
+            prop: 'sort',
+            label: '排序',
+            align: 'right'
+          }, {
+            prop: 'money',
+            label: '金额',
+            align: 'right'
+          },
+          {
+            prop: 'created_at',
+            label: '创建信息',
+            width: 190,
+            formatter: (v1, v2, value) => {
+              return this.$moment(value).format("YYYY-MM-DD HH:mm:ss");
+            }
+          }
+        ],
+      }
+    },
+    methods: {
+      toDraw (type = 1, row) {
+        if (type === 1) {
+          window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id}).href,'_blank')
+        } else {
+          window.open(this.$router.resolve({path: '/mdLotteryDraw/'+row.id+'?result=1'}).href,'_blank')
+        }
+      },
+
+      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['addDrawPrize'].isShow = true
+      },
+      pageSizeChange(e) {
+        this.select.page_size = e;
+        this.select.page = 1;
+        this.load();
+      },
+      async load() {
+        const res = await index(this.select)
+        this.total = res.total
+        this.list = res.data
+      },
+      deleteitem(row) {
+        destroy({
+          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;
+
+      let that = this;
+      let sysInfo = sessionStorage.getItem('sys_info');
+      console.log(sysInfo)
+      if (sysInfo && sysInfo != "") {
+        let _sys = JSON.parse(sysInfo);
+        that.select.activity_list_id = _sys.id;
+        that.sysInfo = _sys;
+      }
+    }
+  }
+</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 c53a018..2f8aff9 100644
--- a/src/views/page/MidAutumnLotteryDraw.vue
+++ b/src/views/page/MidAutumnLotteryDraw.vue
@@ -6,8 +6,8 @@
   >
     <h3 class="title">
       <span v-if="!$route.query.result">正在抽取</span>
-      {{ config.draw_prize.name }}
       <span v-if="$route.query.result">中奖名单</span>
+      {{ config.draw_prize.price_item }}
     </h3>
 
     <div class="container">
@@ -22,20 +22,24 @@
         </el-image>
 
         <div class="info">
-          <p>
-            奖品： {{ config.draw_prize.name }}
-          </p>
+          <p>奖品： {{ config.draw_prize.price_item }}</p>
           <p>本次抽取： {{ config.draw_prize.total }} 个</p>
           <p>赞助商： {{ config.draw_prize.apply }}</p>
         </div>
       </div>
 
-      <div class="right" :style="{ 'height': maxHeight }">
-        <div class="numbers" :class="{ 'numbers-active': !isEnd }" ref="numbers">
+      <div class="right" :style="{ height: maxHeight }">
+        <div
+          class="numbers"
+          :class="{
+            'numbers-active': !isEnd,
+          }"
+          ref="numbers"
+        >
           <div
             class="numbers__item"
             :style="{
-              'animation-timing-function': flag ? '' : 'ease-out'
+              'animation-timing-function': flag ? '' : 'ease-out',
             }"
             :class="{
               'numbers__item--active': !isEnd
@@ -45,16 +49,15 @@
             v-for="(item, index) in numbers"
             :key="$route.query.result ? index : item"
           >
-            <span>{{
-              item
-            }}</span>
+            <span>{{ item }}</span>
           </div>
 
           <div
+            v-if="!$route.query.result"
             v-show="!isEnd"
             class="numbers__item"
             :style="{
-              'animation-timing-function': flag ? '' : 'ease-out'
+              'animation-timing-function': flag ? '' : 'ease-out',
             }"
             :class="{
               'numbers__item--active': !isEnd
@@ -72,21 +75,24 @@
       </div>
     </div>
 
-    <button class="btn" :disabled="isOver"
-         :style="{ filter: isOver ? 'grayscale(90%)' : '' }"
-         v-if="$route.query.result != 1"
-         @click="draw">
-      <strong>{{ (flag || isOver) ? '结束抽奖' : '开始抽奖' }}</strong>
+    <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>-->
+    <!--    <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>
 
@@ -98,11 +104,11 @@ import { drawLog } from "@/api/activity/drawPrize";
 export default {
   data() {
     return {
-      maxHeight: '40vh',
+      maxHeight: "40vh",
       bkg,
       flag: false, //是否开始
       isEnd: true, //视图结束
-      isOver: false,//抽奖是否结束
+      isOver: false, //抽奖是否结束
       timer: null,
       config: {
         draw_prize: {},
@@ -120,19 +126,23 @@ export default {
       dom.style.fontSize = baseSize * Math.min(scale, 2) + "px";
 
       this.$nextTick(() => {
-        this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
-      })
+        this.maxHeight =
+          this.$refs["numbers"].getBoundingClientRect().height + "px";
+      });
     },
     async getConfig() {
       const res = await drawConfig({
         id: this.$route.params.id,
       });
-      res.numbers_list = res.numbers_list.map(i => i.toString().padStart(3,'0'))
+      res.numbers_list = res.numbers_list.map((i) =>
+        i.toString().padStart(3, "0")
+      );
       this.config = res;
 
       this.$nextTick(() => {
-        this.maxHeight = this.$refs['numbers'].getBoundingClientRect().height + 'px'
-      })
+        this.maxHeight =
+          this.$refs["numbers"].getBoundingClientRect().height + "px";
+      });
     },
     async getResult() {
       const res = await drawLog(
@@ -148,10 +158,15 @@ export default {
       this.resultNumbers = res.data
         .filter((i) => i.draw_prize_id == this.$route.params.id)
         .map((i) => i.mobile.padStart(3, "0"));
+
+      this.$nextTick(() => {
+        this.maxHeight =
+          this.$refs["numbers"].getBoundingClientRect().height + "px";
+      });
     },
 
     draw: throttle(async function () {
-      if (this.isOver) return
+      if (this.isOver) return;
       if (!this.flag) {
         console.log("开始抽奖");
         try {
@@ -186,12 +201,10 @@ export default {
               }, 150);
             }
           }, 150);
-
         } catch (err) {
           console.log(err);
         }
       } else {
-
         this.flag = false;
         console.log("结束抽奖");
       }
@@ -210,7 +223,9 @@ export default {
             set.add(
               this.config.numbers_list[
                 Math.floor(Math.random() * this.config.numbers_list.length)
-              ].toString().padStart(3,'0')
+              ]
+                .toString()
+                .padStart(3, "0")
             );
           }
 
@@ -219,8 +234,8 @@ export default {
 
         let temp = this.config.numbers_list
           .sort(() => Math.random() - 0.5)
-          .slice(0, 36)
-        console.log(temp)
+          .slice(0, 36);
+        console.log(temp);
         return temp;
       } else {
         return [];
@@ -251,6 +266,7 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
   overflow: hidden;
+  transform-style: preserve-3d;
 
   padding-top: 17.31vh;
   .title {
@@ -306,13 +322,21 @@ export default {
       flex: 1;
       overflow: hidden;
 
+      position: relative;
       .numbers {
         display: grid;
         grid-template-columns: repeat(6, 1fr);
-        grid-template-rows: repeat(6, 1fr);
+        //grid-template-rows: repeat(6, 1fr);
         grid-column-gap: 2.8em;
         grid-row-gap: 0.93vh;
+        justify-content: center;
+        align-content: center;
 
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
         &-active {
           & > div:nth-child(2n + 1) {
             animation: blur 0.15s infinite linear;
@@ -324,11 +348,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);
+            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);
+            filter: blur(1.5px) drop-shadow(0 0 4px #00000055)
+              drop-shadow(0 0 8px #00000033);
             transform: translateY(-200%);
           }
         }
@@ -388,7 +414,7 @@ export default {
     }
   }
   .btn {
-    border-width: 0 2px 2px 0;
+    border-width: 0;
     display: block;
     cursor: pointer;
     text-align: center;
@@ -396,13 +422,22 @@ export default {
     width: 46.67%;
     font-weight: 900;
     transition: all 0.2s;
-    background: linear-gradient(to bottom,rgb(242, 172, 106),rgb(247, 232, 203));
+    background: linear-gradient(
+      to bottom,
+        rgb(241, 170, 102) 20%,
+        rgb(234, 219, 188)
+    );
     border-radius: 6px;
     color: rgb(152, 50, 22);
-    box-shadow: 1px 4px 10px 6px #00000055;
+    box-shadow: 1px 4px 10px 6px #00000088;
+    transform: translateZ(0);
 
     margin: 4.2vh auto 0 auto;
     padding: 10px 0;
+
+    &:active {
+      transform: perspective(100px) translateZ(-5px);
+    }
   }
 }
 </style>