开奖修改

package.json

@@ -19,6 +19,7 @@
     "sass-loader": "11.1.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
+    "vue-seamless-scroll": "^1.1.23",
     "vuex": "3.0.1"
   },
   "devDependencies": {

src/api/KaijiangSpecial.js

@@ -24,4 +24,12 @@ export function queryWxPayStatus(data) {
       method: 'post',
       data
     })
+  }
+
+  export function involveRecord(query) {
+    return request({
+      url: '/mall-draw-prize/user/involveRecord',
+      method: 'get',
+      params:query
+    })
   }

src/components/SiderInfo.vue

@@ -10,13 +10,18 @@
                     <div class="second-line">点亮在商城的每一天</div>
                 </div>
                 <button class="btn signedin-btn">
-                    <span @click="goToSignIn" v-if="userInfo.signStatus==0" class="btn-text sign-text">去签到</span>
+                    <span @click="goToSignIn" v-if="userInfo.signStatus == 0" class="btn-text sign-text">去签到</span>
                     <span v-else class="btn-text signed-text">已签到</span>
                 </button>
             </div>
         </div>
-        <div class="sidebar-block signin-tip">
-            <div class="avatar">
+        <div class="sidebar-block">
+            <div class="awardTitle">中奖名单</div>
+            <div style="padding: 0px 5px 5px 5px;">
+                <list-scroll></list-scroll>
+            </div>
+
+            <!-- <div class="avatar">
                 <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
                 <span class="name">{{ userInfo.userName }}</span>
             </div>
@@ -29,76 +34,85 @@
                     <div class="item-title">积分：</div>
                     <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
                 </div>
-            </div>
+            </div> -->
         </div>
-        <div class="sidebar-block banner-block" v-for="(item,index) in activitykist" :key="index">
+        <div class="sidebar-block banner-block" v-for="(item, index) in activitykist" :key="index">
             <div class="banner banner">
                 <img :src="item.sideImgUrl" class="banner-image">
-                    <div class="ctrl-box">
-                        <!-- <div class="label">
+                <div class="ctrl-box">
+                    <!-- <div class="label">
                             <span>{{ item.title }}</span>
                         </div> -->
-                        <div class="status" v-if="item.title == '每日答题' && item.joinStatus==1" @click="goFestiveEvents(item)">
-                            <img width="88.5" height="21" src="../assets/image/day.png" alt="每日答题">
-                        </div>
-                        <div class="status" v-if="item.title == '每周竞技' && item.joinStatus==1" @click="goFestiveEvents(item)">
-                            <img width="88.5" height="21" src="../assets/image/week.png" alt="每周竞技">
-                        </div>
-                        <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus==1" @click="goFestiveEvents(item)">
-                            <img width="88.5" height="21" src="../assets/image/month.png" alt="每月抽奖">
-                        </div>
-                        <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus==1" @click="goFestiveEvents(item)">
-                            <img width="88.5" height="21" src="../assets/image/dayD.png" alt="每日抽奖">
-                        </div>
-                        <div class="status" v-if="item.joinStatus==0">
-                            <img width="88.5" height="21" src="../assets/image/weikaiqi.png" alt="未开启">
-                        </div>
-                        <div class="status" v-if="item.joinStatus==2">
-                            <img width="88.5" height="21" src="../assets/image/yicanyu.png" alt="已参与">
-                        </div>
+                    <div class="status" v-if="item.title == '每日答题' && item.joinStatus == 1"
+                        @click="goFestiveEvents(item)">
+                        <img width="88.5" height="21" src="../assets/image/day.png" alt="每日答题">
+                    </div>
+                    <div class="status" v-if="item.title == '每周竞技' && item.joinStatus == 1"
+                        @click="goFestiveEvents(item)">
+                        <img width="88.5" height="21" src="../assets/image/week.png" alt="每周竞技">
+                    </div>
+                    <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus == 1"
+                        @click="goFestiveEvents(item)">
+                        <img width="88.5" height="21" src="../assets/image/month.png" alt="每月抽奖">
+                    </div>
+                    <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus == 1"
+                        @click="goFestiveEvents(item)">
+                        <img width="88.5" height="21" src="../assets/image/dayD.png" alt="每日抽奖">
+                    </div>
+                    <div class="status" v-if="item.joinStatus == 0">
+                        <img width="88.5" height="21" src="../assets/image/weikaiqi.png" alt="未开启">
+                    </div>
+                    <div class="status" v-if="item.joinStatus == 2">
+                        <img width="88.5" height="21" src="../assets/image/yicanyu.png" alt="已参与">
                     </div>
                 </div>
+            </div>
         </div>
         <div class="sticky-block">
-            <div class="sidebar-block signin-tip">
-            <div class="avatar">
-                <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
-                <span class="name">{{ userInfo.userName }}</span>
-            </div>
-            <div class="info">
-                <div class="info-item">
-                    <div class="item-title">部门：</div>
-                    <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ userInfo.deptName }}</div>
+            <!-- <div class="sidebar-block signin-tip">
+                <div class="avatar">
+                    <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
+                    <span class="name">{{ userInfo.userName }}</span>
                 </div>
-                <div class="info-item">
-                    <div class="item-title">积分：</div>
-                    <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
+                <div class="info">
+                    <div class="info-item">
+                        <div class="item-title">部门：</div>
+                        <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{
+                            userInfo.deptName }}</div>
+                    </div>
+                    <div class="info-item">
+                        <div class="item-title">积分：</div>
+                        <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
+                    </div>
                 </div>
-            </div>
-        </div>
-            <div class="sidebar-block banner-block" v-for="(item,index) in activitykist" :key="index">
+            </div> -->
+            <div class="sidebar-block banner-block" v-for="(item, index) in activitykist" :key="index">
                 <div class="banner banner">
                     <img :src="item.sideImgUrl" width="240" height="200" class="banner-image">
                     <div class="ctrl-box">
                         <!-- <div class="label">
                             <span>{{ item.title }}</span>
                         </div> -->
-                        <div class="status" v-if="item.title == '每日答题' && item.joinStatus==1" @click="goFestiveEvents(item)">
+                        <div class="status" v-if="item.title == '每日答题' && item.joinStatus == 1"
+                            @click="goFestiveEvents(item)">
                             <img width="88.5" height="21" src="../assets/image/day.png" alt="每日答题">
                         </div>
-                        <div class="status" v-if="item.title == '每周竞技' && item.joinStatus==1" @click="goFestiveEvents(item)">
+                        <div class="status" v-if="item.title == '每周竞技' && item.joinStatus == 1"
+                            @click="goFestiveEvents(item)">
                             <img width="88.5" height="21" src="../assets/image/week.png" alt="每周竞技">
                         </div>
-                        <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus==1" @click="goFestiveEvents(item)">
+                        <div class="status" v-if="item.title == '每月抽奖' && item.joinStatus == 1"
+                            @click="goFestiveEvents(item)">
                             <img width="88.5" height="21" src="../assets/image/month.png" alt="每月抽奖">
                         </div>
-                        <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus==1" @click="goFestiveEvents(item)">
+                        <div class="status" v-if="item.title == '每日抽奖' && item.joinStatus == 1"
+                            @click="goFestiveEvents(item)">
                             <img width="88.5" height="21" src="../assets/image/dayD.png" alt="每日抽奖">
                         </div>
-                        <div class="status" v-if="item.joinStatus==0">
+                        <div class="status" v-if="item.joinStatus == 0">
                             <img width="88.5" height="21" src="../assets/image/weikaiqi.png" alt="未开启">
                         </div>
-                        <div class="status" v-if="item.joinStatus==2">
+                        <div class="status" v-if="item.joinStatus == 2">
                             <img width="88.5" height="21" src="../assets/image/yicanyu.png" alt="已参与">
                         </div>
                     </div>
@@ -110,10 +124,20 @@
 <script>
 import { mapGetters } from 'vuex'
 import { indexList } from "@/api/allApi";
+import listScroll from '@/components/list-scroll.vue';
 export default {
+    components: {
+        listScroll
+    },
     data() {
         return {
-            activitykist:[
+            noticeList: [
+                { id: 1, text: '放低姿态' },
+                { id: 2, text: '努力进取' },
+                { id: 3, text: '勇于探索' },
+                { id: 4, text: '乐于分享' }
+            ],
+            activitykist: [
                 // {
                 //     status:0,
                 //     statusName:'未参加',
@@ -133,53 +157,53 @@ export default {
                 //     img:'https://xiaoyou.dgtis.com/images/image/2024/08/23/xd5idemwj5itooa9t2ee.jpg'
                 // }
             ],
-            hoursTip:'你好！',
+            hoursTip: '你好！',
             isActive: false,
         };
     },
     computed: {
         // 将 getter 映射到当前组件的计算属性
-        ...mapGetters(['userInfo','avatar'])
+        ...mapGetters(['userInfo', 'avatar'])
     },
     created() {
         this.getHoursTip()
-        indexList().then(response=>{
+        indexList().then(response => {
             this.activitykist = response.data.data
         })
     },
     methods: {
-        goFestiveEvents(val){
-            
-            if(val.title=='每日答题'){
+        goFestiveEvents(val) {
+
+            if (val.title == '每日答题') {
                 this.$router.push({
                     path: '/home/festiveEvents/answerGame',
                     query: {
-                        actId:val.actId
+                        actId: val.actId
                     }
                 });
                 return;
             }
-            if(val.title=='每周竞技'){
+            if (val.title == '每周竞技') {
                 this.$router.push({
                     path: '/home/festiveEvents/game',
                     query: {
                         url: val.activityUrl,
-                        actId:val.actId
+                        actId: val.actId
                     }
                 });
                 return;
             }
-            if(val.title=='每月抽奖' || val.title=='每日抽奖'){
+            if (val.title == '每月抽奖' || val.title == '每日抽奖') {
                 this.$router.push({
                     path: '/home/festiveEvents/drawCarouselGame',
                     query: {
-                        actId:val.actId
+                        actId: val.actId
                     }
                 });
                 return;
             }
         },
-        goToSignIn(){
+        goToSignIn() {
             this.$router.push({
                 path: '/home/signIn',
             });
@@ -195,28 +219,37 @@ export default {
             }
         },
 
-     // 保存滚动值，这是兼容的写法
-     handleScroll() {
-        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-        if (scrollTop >= 950) {
-            this.isActive = true
-        } else {
-            this.isActive = false
-        }
+        // 保存滚动值，这是兼容的写法
+        handleScroll() {
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            if (scrollTop >= 950) {
+                this.isActive = true
+            } else {
+                this.isActive = false
+            }
+        },
     },
-},
 
-mounted() {
-    window.addEventListener('scroll', this.handleScroll)
-},
+    mounted() {
+        window.addEventListener('scroll', this.handleScroll)
+    },
 
-destroyed() {
-    // 离开该页面需要移除这个监听的事件，不然会报错
-    window.removeEventListener('scroll', this.handleScroll)
-}
+    destroyed() {
+        // 离开该页面需要移除这个监听的事件，不然会报错
+        window.removeEventListener('scroll', this.handleScroll)
+    }
 }
 </script>
 <style>
+.awardTitle {
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    font-size: 16px;
+    text-align: center;
+    border-bottom: 1px solid #dcdfe6;
+}
+
 .aside {
     position: absolute;
     top: 0;
@@ -285,9 +318,11 @@ destroyed() {
 .first-line .signed-text {
     color: #abcdff;
 }
+
 .first-line .sign-text {
     color: #1e80ff;
 }
+
 .first-line .btn-text {
     font-size: 14px;
     font-weight: 400;
@@ -338,7 +373,8 @@ destroyed() {
     justify-content: space-between;
     line-height: 1.5rem;
 }
-.info-item .item-title{
+
+.info-item .item-title {
     width: 62px;
 }
 
@@ -347,6 +383,7 @@ destroyed() {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
 .info-item .blue {
     color: #1e80ff;
 }
@@ -374,13 +411,16 @@ destroyed() {
     z-index: 5;
     pointer-events: all;
 }
+
 .el-avatar>img {
     width: 100%;
 }
-.sidebar-block.banner-block{
+
+.sidebar-block.banner-block {
     overflow: hidden;
 }
-.sidebar-block{
+
+.sidebar-block {
     background-color: #fff;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
     border-radius: 2px;
@@ -390,14 +430,17 @@ destroyed() {
     border-radius: 4px;
     color: #252933;
 }
-.sidebar-block.banner-block .banner{
+
+.sidebar-block.banner-block .banner {
     height: 120px;
 }
-.banner{
+
+.banner {
     position: relative;
     font-size: 0;
     cursor: pointer;
 }
+
 a {
     margin: initial;
     background-color: transparent;
@@ -405,11 +448,13 @@ a {
     cursor: pointer;
     color: #909090;
 }
-.banner .banner-image{
+
+.banner .banner-image {
     width: 100%;
     height: 100%;
 }
-.banner .ctrl-box .label{
+
+.banner .ctrl-box .label {
     position: absolute;
     left: 20px;
     top: 20px;
@@ -425,7 +470,8 @@ a {
     border-radius: 6px;
     font-weight: 500;
 }
-.banner .ctrl-box .status{
+
+.banner .ctrl-box .status {
     position: absolute;
     left: 10px;
     top: 80px;
@@ -441,6 +487,7 @@ a {
     border-radius: 6px;
     font-weight: 500; */
 }
+
 /* .banner .ctrl-box .label:hover {
     background-color: rgba(0, 0, 0, .4);
 }

src/components/list-scroll.vue

@@ -0,0 +1,102 @@
+<template>
+    <vue-seamless-scroll :data="listData" class="warp">
+      <ul class="item">
+        <li v-for="(item, index) in listData" :key="index">
+          <span class="name">{{ item.name }}</span>
+          <span class="title">{{ item.title }}</span>
+          <span class="date">{{ item.date }}</span>
+        </li>
+      </ul>
+    </vue-seamless-scroll>
+  </template>
+  
+  <script>
+    import vueSeamlessScroll from 'vue-seamless-scroll'
+  
+    export default {
+      name: 'Example01Basic',
+      components: {
+        vueSeamlessScroll
+      },
+      data () {
+        return {
+          listData: [{
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2024-09-10'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2017-12-16'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2017-12-16'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2017-12-16'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2024-09-10'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅qqqqqqqqqqqqqqqqqqqqqqqqqqqq',
+            'date': '2024-09-10'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2024-09-10'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2024-09-10'
+          }, {
+            'name':'刘伟',
+            'title': '积分抽奖 :空气炸锅',
+            'date': '2024-09-10'
+          }],
+        }
+      },
+    }
+  </script>
+  
+  <style lang="scss" scoped>
+    .warp {
+      height: 200px;
+      width: 100%;
+      margin: 0 auto;
+      overflow: hidden;
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        li{
+          display: block;
+          height: 50px;
+          display: flex;
+         align-items: center;
+          font-size: 12px;
+          font-weight: bold;
+          border-bottom: 1px solid #dcdfe6;
+          .name{
+            width: 15%;
+            text-align: center;
+          }
+          .title{
+            text-align: center;
+            width: 55%;
+            word-wrap:break-word; 
+            word-break:break-all; 
+            // overflow: hidden;/*这个参数根据需求来决定要不要*/
+
+          }
+          .data{
+            text-align: center;
+            width: 30%;
+          }
+        }
+      }
+    }
+  </style>

src/permission.js

@@ -4,7 +4,7 @@ import { getToken, setToken } from '@/utils/auth' // getToken from cookie
 import { lockStatus,unlock } from "@/api/allApi";
 //路由跳转之前
 router.beforeEach((to, _from, next) => {
-  setToken('4da7bb0ded671460e4783cd930b04209');
+  setToken('7c2bb8d0a0d39b58d5fd16bd5cc7758b');
   const path = to.path;
   const Authorization = to.query.Authorization
   if (path.indexOf('auth') != -1 && Authorization) { 

src/router/index.js

@@ -91,10 +91,13 @@ const routes = [
         component: () => import('@/views/HomeView/AnswerGame/ZhongQiuQianDao.vue')
       },
       {
-        path: '/home/festiveEvents/kaijiang',
-        // component: () => import('@/views/HomeView/AnswerGame/Kaijiang.vue')
+        path: '/home/festiveEvents/kaijiangSpecial',
         component: () => import('@/views/HomeView/AnswerGame/KaijiangSpecial.vue')
       },
+      {
+        path: '/home/festiveEvents/weekKaijiang',
+        component: () => import('@/views/HomeView/AnswerGame/WeekKaijiang.vue')
+      },
       {
         path: '/home/festiveEvents/answerGame',
         component: () => import('@/views/HomeView/AnswerGame/AnswerGame.vue')

src/views/HomeView/AnswerGame/WeekKaijiang.vue

@@ -0,0 +1,664 @@
+<template>
+    <div class="timeline-container">
+        <div class="timeline-content">
+            <div class="timeline-entry-list">
+                <div class="gameBox">
+                    <div class="home">
+                        <div :class="{ 'dim': isDim }">
+                            <div v-if="!isDim">
+                                <img class="rules" src="@/assets/image/answerGame/kaijiang/rules.png" alt="互动规则"
+                                    @click="clickRuleWrapper">
+                                <!-- <div class="top" v-if="top">
+                                    <span style="font-size: 18px;color: #fff;font-weight: 600;background-color: rgba(0, 0, 0, .5);border-radius: 6px;padding: 5px;">
+                                        当前拥有抽奖券:{{ top }}张</span>
+                                </div> -->
+                                <img class="answer" src="@/assets/image/answerGame/kaijiang/join.png" alt="参与活动"
+                                    @click="clickAnswer">
+                                <img class="exit" src="@/assets/image/answerGame/kaijiang/exit.png" alt="退出活动"
+                                    @click="getOut">
+                            </div>
+
+                        </div>
+
+                    </div>
+                    <div class="ruleWrapper" v-if="isRuleWrapper">
+                        <el-card class="box-card">
+                            <div slot="header" class="clearfix">
+                                <span>活动规则</span>
+                                <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRuleWrapper">
+                                    <i class="el-icon-close"></i>
+                                </span>
+                            </div>
+                            <div v-html="rule"></div>
+                        </el-card>
+                    </div>
+                    <div class="recordWrapper" v-show="isRecordWrapper">
+                        <el-card class="box-card">
+                            <div slot="header" class="clearfix">
+                                <span style="margin-left: 36%;">开奖记录</span>
+                                <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRecordWrapper">
+                                    <i class="el-icon-close"></i>
+                                </span>
+                            </div>
+                            <div class="recordListBox" ref="scrollview" @mousewheel="scrollChange" v-loading="loading">
+                                <div class="recordItem title">
+                                    <div style="width: 50%;text-align: center;">日期</div>
+                                    <div style="width: 25%;text-align: center;">奖券</div>
+                                    <div style="width: 25%;text-align: center;">状态</div>
+                                </div>
+                                <el-empty description="暂无数据" v-if="recordList.length==0" :image-size="20"></el-empty>
+                                <div class="recordItem" v-for="(item, index) in recordList">
+                                    <div style="width: 50%;text-align: center;">{{item.createTime}}</div>
+                                    <div style="width: 25%;text-align: center;">{{item.couponNumber}}</div>
+                                    <div style="width: 25%;text-align: center;">{{item.lotteryTicketStatus==0?'未开奖':item.lotteryTicketStatus==1?'未中奖':'已中奖'}}</div>
+                                </div>
+                            </div>
+                        </el-card>
+                    </div>
+                    <div class="closeWrapper" v-if="isCloseWrapper">
+                        <img class="goHome" src="@/assets/image/answerGame/kaijiang/goHome.png" alt="关闭"
+                            @click="refresh">
+                    </div>
+                </div>
+            </div>
+            <SiderInfo></SiderInfo>
+        </div>
+        <el-dialog title="扫码参与" :visible.sync="recharge" width="30%" :before-close="beforeClose">
+            <div class="payBox-way">
+                <div class="way-item">
+                    <div class="item-left">
+                        <div id="expCode" ref="expCodeRef"></div>
+                    </div>
+                    <div class="item-right">
+                        <div class="up">
+                            <div>应付金额</div>
+                            <div style="color: #fe2c55;margin-left: 8px;">¥ {{ money }}</div>
+                        </div>
+                        <div class="center">
+                            <img style="height: 18px;" src="../../../assets/image/answerGame/kaijiang/weixinPay.png"
+                                alt="weixinpay">
+                            <div class="textStyle">微信扫码支付</div>
+                        </div>
+                        <div class="down">
+                            <div>抽奖券：</div>
+                            <el-input-number @change="changeCount" size="mini" v-model="count" :step="1" :min="1"
+                                step-strictly></el-input-number>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import QRCode from 'qrcodejs2';
+import { homeData, getWxPayCode, queryWxPayStatus,involveRecord } from "@/api/KaijiangSpecial";
+import SiderInfo from '@/components/SiderInfo.vue';
+export default {
+    components: {
+        SiderInfo
+    },
+    data() {
+        return {
+            loading: false,
+            recordList:[],
+            page: 1,
+            pageSize: 10,
+            actId: this.$route.query.actId,
+            rule: '',
+            top: '',
+            isCloseWrapper: false,
+            isRuleWrapper: false,
+            isRecordWrapper: false,
+            isDim: false,
+            timerPayWxQRcode: null,
+            timer: null,
+            //充值二维码
+            payUrl: '',
+            //充值弹窗
+            recharge: false,
+            //充值金额
+            money: 2,
+            count: 1,
+        };
+    },
+    mounted () {
+        // 获取指定元素
+        const scrollview = this.$refs['scrollview']
+        // 添加滚动监听，该滚动监听了拖拽滚动条
+        // 尾部的 true 最好加上，我这边测试没加 true ，拖拽滚动条无法监听到滚动，加上则可以监听到拖拽滚动条滚动回调
+        scrollview.addEventListener('scroll', this.scrollChange, true)
+    },
+    // beforeDestroy 与 destroyed 里面移除都行
+    beforeDestroy () {
+        // 获取指定元素
+        const scrollview = this.$refs['scrollview']
+        // 移除监听
+        scrollview.removeEventListener('scroll', this.scrollChange, true)
+    },
+    created() {
+        this.getHomeData();
+        this.getInvolveRecord();
+    },
+    methods: {
+         // 滚动监听
+        scrollChange (e) {
+            const dom = e.target
+            var scrollTop = dom.scrollTop; //滑入屏幕上方的高度
+            var windowHeitht = dom.clientHeight; //能看到的页面的高度
+            var scrollHeight = dom.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
+            let total = scrollTop + windowHeitht
+            if((scrollHeight - total) < 1){
+                this.getInvolveRecord();
+                console.log("到底了")
+            }
+        },
+        getInvolveRecord(){
+            this.loading = true;
+            involveRecord({
+                actId:this.actId,
+                page:this.page,
+                limit:this.pageSize
+            }).then(res=>{
+                console.log(res);
+                let list = res.data.data.items;
+                if (this.page == 1) {
+                    this.recordList=list;
+                } else {
+                    //如果不是则在后面追加数据
+                    this.rankList.push(...list);
+                }
+                if (list.length == 10) {
+                    this.page += 1;
+                }
+                this.loading = false;
+            })
+        },
+        changeCount(val) {
+            this.money = 2 * val;
+            clearInterval(this.timer);
+            clearInterval(this.timerPayWxQRcode);
+            this.handlePayWxQRcode();
+        },
+        beforeClose(done) {
+            clearInterval(this.timer);
+            clearInterval(this.timerPayWxQRcode);
+            done();
+        },
+        handlePayWxQRcode() {  // 获取微信支付二维码
+            getWxPayCode({    // 这里根据不同的后端接口去修改
+                // integral: this.money * 10,
+                totalFee: this.money,
+                actId: this.actId,
+            }).then(res => {
+                let data = res.data.data;
+                this.qrcode(data.payUrl);    // 例如：data.payUrl 的值为 "weixin://wxpay/bizpayurl?pr=......"，根据这个值生成相对应的微信支付二维码
+                this.timer = setInterval(() => {    // 通过定时器每间隔一会去请求查询微信支付状态（具体参数根据项目需要而定）
+                    this.handleQueryWxPayStatus(data.orderNo);
+                }, 1000);
+                this.timerPayWxQRcode = setInterval(() => {    // 刷新微信支付二维码
+                    console.log('刷新微信支付二维码');
+                    clearInterval(this.timer);    // 清除定时器;   
+                    clearInterval(this.timerPayWxQRcode);
+                    this.handlePayWxQRcode();
+                }, 60000);
+            })
+        },
+        handleQueryWxPayStatus(orderNo) {  // 查询微信支付状态
+            queryWxPayStatus({    // 这里根据不同的后端接口去修改
+                orderNo: orderNo,
+            }).then(res => {
+                let data = res.data.data;
+                if (data == '支付成功') {    // 当查询到支付成功时
+                    this.money = 100;
+                    this.count = 1;
+                    this.recharge = false;
+                    clearInterval(this.timer);    // 清除定时器;   
+                    clearInterval(this.timerPayWxQRcode);
+                    this.isDim = true;
+                    this.isCloseWrapper = true;
+                }
+            }).catch(err => {
+                console.log(err)
+            })
+        },
+        // 清空二维码,避免生成多个二维码
+        delQrcode() {
+            this.$refs.expCodeRef.innerHTML = ""
+        },
+        // 前端根据 payUrl 生成微信支付二维码
+        qrcode(payUrl) {
+            this.delQrcode();
+            return new QRCode('expCode', {
+                width: 150,
+                height: 150,
+                text: payUrl,
+                colorDark: '#000',
+                colorLight: '#fff'
+            });
+        },
+        refresh() {
+            location.reload();
+        },
+        getOut() {
+            this.isDim = true;
+            this.isRecordWrapper = true;
+            // this.$router.push({
+            //     path: '/home/festiveEvents',
+            // });
+        },
+        getHomeData() {
+            homeData({ actId: this.actId }).then(response => {
+                console.log(response.data.data);
+                this.rule = response.data.data.rule;
+                this.top = response.data.data.top ? response.data.data.top : '0';
+            })
+        },
+        clickAnswer() {
+            this.recharge = true;
+            this.$nextTick(function () {
+                this.handlePayWxQRcode();
+            })
+        },
+        clickIpay() {
+            this.$router.push({
+                path: '/ipay',
+            });
+        },
+        clickRuleWrapper() {
+            this.isDim = true;
+            this.isRuleWrapper = true;
+        },
+        closeRuleWrapper() {
+            this.isDim = false;
+            this.isRuleWrapper = false;
+        },
+        closeRecordWrapper() {
+            this.isDim = false;
+            this.isRecordWrapper = false;
+        }
+    },
+}
+</script>
+<style scoped>
+.recordListBox::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
+.recordListBox{
+      max-height: 500px;
+      overflow: auto;
+      scrollbar-width: none; /* firefox */
+      -ms-overflow-style: none; /* IE 10+ */
+    }
+    .title{
+      font-size: 15px;
+      font-weight: 600;
+    }
+    .recordItem{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      margin: 10px 0;
+    }
+.timeline-container {
+    margin: 0 auto;
+}
+
+.timeline-entry-list {
+    margin-right: 17.5rem;
+    border-radius: 2px;
+    width: 720px;
+    position: relative;
+}
+
+.timeline-entry-list .gameBox {
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    padding: 2.667rem 0;
+    z-index: 1;
+    overflow: hidden;
+    background-color: #fff;
+    padding-left: 2.67rem;
+    padding-right: 2.67rem;
+    margin-bottom: 2rem;
+    box-sizing: border-box;
+    min-height: 280px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+}
+
+.gameBox .item {
+    position: relative;
+    z-index: 10;
+    background: url(@/assets/image/answerGame/item/itemBg.png) no-repeat;
+    background-size: 100% 100%;
+    width: 375px;
+    height: 667px;
+}
+
+.item .integralBox {
+    position: absolute;
+    top: 7.3%;
+    right: 8%;
+    width: 90px;
+    height: 35.2px;
+    /* background: greenyellow; */
+    display: flex;
+    justify-content: center;
+    line-height: 35.2px;
+}
+
+.integralBox .integral {
+    font-size: 16px;
+    color: orange;
+    font-weight: 600;
+}
+
+.item .timer {
+    position: absolute;
+    background: url(@/assets/image/answerGame/item/timer.png) no-repeat;
+    background-size: 100% 100%;
+    width: 80px;
+    height: 80px;
+    top: 15%;
+    right: 10%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.timer .second {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+}
+
+.item .topicNum {
+    position: absolute;
+    background: url(@/assets/image/answerGame/item/topicNum.png) no-repeat;
+    background-size: 100% 100%;
+    width: 120px;
+    height: 42px;
+    top: 25%;
+    left: 4.8%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.topicNum .topic {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 600;
+}
+
+.item .questionBox {
+    position: absolute;
+    width: 375px;
+    top: 28%;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.questionBox .title {
+    margin: auto 50px;
+    height: 180px;
+    font-size: 18px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* font-weight: 600; */
+}
+
+.content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.answerItem {
+    cursor: pointer;
+    margin: 10px 0;
+    color: #3883fa;
+    background: rgb(221, 218, 218);
+    border-radius: 20px;
+    width: 80%;
+    height: 40px;
+    line-height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.right {
+    /*选择正确的答案颜色*/
+    background: #3ede58;
+    color: #fff;
+}
+
+.error {
+    /*选择错误的答案颜色*/
+    background: #e53117;
+    color: #fff;
+}
+
+.invisible {
+    width: 25px;
+    position: absolute;
+    right: 15px;
+}
+
+.gameBox .home {
+    position: relative;
+    z-index: 10;
+    background: url(@/assets/image/answerGame/kaijiang/homeBg.png) no-repeat;
+    background-size: 100% 100%;
+    width: 375px;
+    height: 667px;
+}
+
+.home .rules {
+    cursor: pointer;
+    position: absolute;
+    width: 35px;
+    top: 35%;
+    left: 5%;
+}
+
+.home .top {
+    position: absolute;
+    bottom: 25%;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.home .answer {
+    cursor: pointer;
+    position: absolute;
+    width: 280px;
+    bottom: 10%;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+.home .exit {
+    cursor: pointer;
+    position: absolute;
+    width: 280px;
+    bottom: 2%;
+    left: 0;
+    right: 0;
+    margin: auto;
+}
+
+.hidden {
+    display: none;
+}
+
+.show {
+    display: block;
+}
+
+.dim {
+    /* opacity:0.6; */
+    height: 100%;
+    width: 100%;
+    background: rgba(0, 0, 0, .4);
+    pointer-events: none;
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: "";
+}
+
+.clearfix:after {
+    clear: both
+}
+
+.ruleWrapper,.recordWrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 12;
+}
+
+.box-card {
+    width: 350px;
+}
+
+.confirmWrapper {
+    cursor: pointer;
+    position: absolute;
+    background: url(@/assets/image/answerGame/kaijiang/isConfirm.png) no-repeat;
+    background-size: 100% 100%;
+    width: 291px;
+    height: 179px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 12;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: flex-end;
+}
+
+.confirmWrapper .homeBtn {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 53px;
+}
+
+.confirmWrapper .iPay {
+    cursor: pointer;
+    width: 92px;
+    margin-bottom: 10px;
+}
+
+.confirmWrapper .confirm {
+    cursor: pointer;
+    width: 92px;
+    margin-bottom: 10px;
+}
+
+
+.closeWrapper {
+    position: absolute;
+    background: url(@/assets/image/answerGame/kaijiang/finish.png) no-repeat;
+    background-size: 100% 100%;
+    width: 258px;
+    height: 258px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 12;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+.closeWrapper .goHome {
+    cursor: pointer;
+    width: 112px;
+    height: 55px;
+}
+
+.payBox-way {
+    margin-top: 16px;
+}
+
+.way-item {
+    display: flex;
+    background-color: #f7f7f9;
+    border-radius: 6px;
+    padding: 12px;
+
+}
+
+.item-left {
+    position: relative;
+    width: 150px;
+    height: 150px;
+    background-color: #fff;
+    border-radius: 6px;
+    padding: 7px;
+}
+
+.item-right {
+    margin-left: 12px;
+}
+
+.up {
+    display: flex;
+    align-items: flex-end;
+    font-size: 18px;
+    font-weight: 600;
+    height: 60px;
+}
+
+.center {
+    display: flex;
+    align-items: center;
+    margin-top: 6px;
+}
+
+.textStyle {
+    font-size: 16px;
+    font-weight: 400;
+    margin-left: 4px;
+    color: rgba(22, 24, 35, .34);
+}
+
+.down {
+    font-size: 16px;
+    color: rgba(22, 24, 35, .34);
+    margin-top: 16px;
+    display: flex;
+    -moz-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+}
+</style>
+<style>
+.el-card__header {
+    padding: 10px 20px !important;
+}
+</style>

src/views/HomeView/FestiveEvents.vue

@@ -171,7 +171,17 @@ export default {
                  //中秋节开奖
                  if(val.actId==35){
                     this.$router.push({
-                        path: '/home/festiveEvents/kaijiang',
+                        path: '/home/festiveEvents/kaijiangSpecial',
+                        query: {
+                            actId:val.actId
+                        }
+                    });
+                    return;
+                }
+                //每周开奖
+                if(val.actId==41){
+                    this.$router.push({
+                        path: '/home/festiveEvents/weekKaijiang',
                         query: {
                             actId:val.actId
                         }

yarn.lock

@@ -2522,6 +2522,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+comutils@^1.1.9:
+  version "1.1.19"
+  resolved "https://registry.yarnpkg.com/comutils/-/comutils-1.1.19.tgz#3e07f306abf48e83726511713a72b20565034443"
+  integrity sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -6988,6 +6993,13 @@ vue-router@^3.5.1:
   resolved "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
   integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==
 
+vue-seamless-scroll@^1.1.23:
+  version "1.1.23"
+  resolved "https://registry.yarnpkg.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz#dde81b3c79aa499791b3c3bffd0fdb22ff3e59a7"
+  integrity sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==
+  dependencies:
+    comutils "^1.1.9"
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"