修改

src/api/weekKaijiang.js

@@ -0,0 +1,35 @@
+import request from '@/utils/request'
+
+export function homeData(query) {
+    return request({
+      url: '/mall-draw-prize/top',
+      method: 'get',
+      params:query
+    })
+  }
+
+  //获取微信支付二维码
+export function getWxPayCode(data) {
+    return request({
+      url: '/mall-draw-prize/getPayUrl',
+      method: 'post',
+      data
+    })
+  }
+
+  //查询微信支付状态
+export function queryWxPayStatus(data) {
+    return request({
+      url: '/wxPay/getOrderResult',
+      method: 'post',
+      data
+    })
+  }
+
+  export function involveRecord(query) {
+    return request({
+      url: '/mall-draw-prize/user/involveRecord',
+      method: 'get',
+      params:query
+    })
+  }

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('7c2bb8d0a0d39b58d5fd16bd5cc7758b');
+  setToken('d7aee0531a6594ae55368635c8aa2b18');
   const path = to.path;
   const Authorization = to.query.Authorization
   if (path.indexOf('auth') != -1 && Authorization) { 

src/views/HomeView/AnswerGame/Kaijiang.vue

@@ -331,8 +331,8 @@ export default{
     position: absolute;
     background: url(@/assets/image/answerGame/kaijiang/isConfirm.png) no-repeat;
     background-size: 100% 100%;
-    width: 291px;
-    height: 179px;
+    width: 177px;
+    height: 211px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -345,7 +345,7 @@ export default{
     position: absolute;
     right: 20px;
     top: 20px;
-    width: 53px;
+    width: 29px;
   }
   .confirmWrapper .iPay{
     cursor: pointer;
@@ -354,7 +354,7 @@ export default{
   }
   .confirmWrapper .confirm{
     cursor: pointer;
-    width: 92px;
+    width: 208px;
     margin-bottom: 10px;
   }
 

src/views/HomeView/AnswerGame/WeekKaijiang.vue

@@ -6,15 +6,17 @@
                     <div class="home">
                         <div :class="{ 'dim': isDim }">
                             <div v-if="!isDim">
-                                <img class="rules" src="@/assets/image/answerGame/kaijiang/rules.png" alt="互动规则"
+                                <img class="rules" src="@/assets/image/answerGame/WeekKaijiang/rules.png" alt="互动规则"
                                     @click="clickRuleWrapper">
+                                <img class="record" src="@/assets/image/answerGame/WeekKaijiang/record.png" alt="抽奖记录"
+                                    @click="clickRecordWrapper">
                                 <!-- <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="参与活动"
+                                <img class="answer" src="@/assets/image/answerGame/WeekKaijiang/join.png" alt="参与活动"
                                     @click="clickAnswer">
-                                <img class="exit" src="@/assets/image/answerGame/kaijiang/exit.png" alt="退出活动"
+                                <img class="exit" src="@/assets/image/answerGame/WeekKaijiang/exit.png" alt="退出活动"
                                     @click="getOut">
                             </div>
 
@@ -32,11 +34,18 @@
                             <div v-html="rule"></div>
                         </el-card>
                     </div>
+                    <div class="confirmWrapper" v-if="isConfirmWrapper">
+                        <img class="homeBtn" src="@/assets/image/answerGame/WeekKaijiang/homeBtn.png" alt="返回主界面"
+                            @click="goHome">
+                        <img class="confirm" src="@/assets/image/answerGame/WeekKaijiang/confirm.png" alt="确认兑换"
+                            @click="clickConfirm">
+                    </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">
+                                <span>开奖记录</span>
+                                <span style="float: right; font-size: 20px;cursor: pointer;"
+                                    @click="closeRecordWrapper">
                                     <i class="el-icon-close"></i>
                                 </span>
                             </div>
@@ -46,53 +55,66 @@
                                     <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>
+                                <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 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="关闭"
+                        <img class="goHome" src="@/assets/image/answerGame/WeekKaijiang/goHome.png" alt="关闭"
                             @click="refresh">
                     </div>
+                    <div class="ipayWrapper" v-show="recharge">
+                        <el-card class="box-card">
+                            <div slot="header" class="clearfix">
+                                <span>扫码参与</span>
+                                <span style="float: right; font-size: 20px;cursor: pointer;" @click="clickRecharge">
+                                    <i class="el-icon-close"></i>
+                                </span>
+                            </div>
+                            <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/WeekKaijiang/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-card>
+                    </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 { homeData, getWxPayCode, queryWxPayStatus, involveRecord } from "@/api/weekKaijiang";
 import SiderInfo from '@/components/SiderInfo.vue';
 export default {
     components: {
@@ -101,12 +123,13 @@ export default {
     data() {
         return {
             loading: false,
-            recordList:[],
+            recordList: [],
             page: 1,
             pageSize: 10,
             actId: this.$route.query.actId,
             rule: '',
             top: '',
+            isConfirmWrapper: false,
             isCloseWrapper: false,
             isRuleWrapper: false,
             isRecordWrapper: false,
@@ -122,7 +145,7 @@ export default {
             count: 1,
         };
     },
-    mounted () {
+    mounted() {
         // 获取指定元素
         const scrollview = this.$refs['scrollview']
         // 添加滚动监听，该滚动监听了拖拽滚动条
@@ -130,7 +153,7 @@ export default {
         scrollview.addEventListener('scroll', this.scrollChange, true)
     },
     // beforeDestroy 与 destroyed 里面移除都行
-    beforeDestroy () {
+    beforeDestroy() {
         // 获取指定元素
         const scrollview = this.$refs['scrollview']
         // 移除监听
@@ -141,29 +164,29 @@ export default {
         this.getInvolveRecord();
     },
     methods: {
-         // 滚动监听
-        scrollChange (e) {
+        // 滚动监听
+        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){
+            if ((scrollHeight - total) < 1) {
                 this.getInvolveRecord();
                 console.log("到底了")
             }
         },
-        getInvolveRecord(){
+        getInvolveRecord() {
             this.loading = true;
             involveRecord({
-                actId:this.actId,
-                page:this.page,
-                limit:this.pageSize
-            }).then(res=>{
+                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;
+                    this.recordList = list;
                 } else {
                     //如果不是则在后面追加数据
                     this.rankList.push(...list);
@@ -240,12 +263,14 @@ export default {
         refresh() {
             location.reload();
         },
-        getOut() {
+        clickRecordWrapper() {
             this.isDim = true;
             this.isRecordWrapper = true;
-            // this.$router.push({
-            //     path: '/home/festiveEvents',
-            // });
+        },
+        getOut() {
+            this.$router.push({
+                path: '/home/festiveEvents',
+            });
         },
         getHomeData() {
             homeData({ actId: this.actId }).then(response => {
@@ -255,15 +280,22 @@ export default {
             })
         },
         clickAnswer() {
+            this.isDim = true;
+            this.isConfirmWrapper = true;
+
+        },
+        clickConfirm() {
+            this.isDim = false;
+            this.isConfirmWrapper = false;
+            this.isDim = true;
             this.recharge = true;
             this.$nextTick(function () {
                 this.handlePayWxQRcode();
             })
         },
-        clickIpay() {
-            this.$router.push({
-                path: '/ipay',
-            });
+        goHome() {
+            this.isDim = false;
+            this.isConfirmWrapper = false;
         },
         clickRuleWrapper() {
             this.isDim = true;
@@ -276,31 +308,41 @@ export default {
         closeRecordWrapper() {
             this.isDim = false;
             this.isRecordWrapper = false;
+        },
+        clickRecharge(){
+            this.isDim = false;
+            this.recharge = 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;
-    }
+    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;
 }
@@ -461,7 +503,7 @@ export default {
 .gameBox .home {
     position: relative;
     z-index: 10;
-    background: url(@/assets/image/answerGame/kaijiang/homeBg.png) no-repeat;
+    background: url(@/assets/image/answerGame/WeekKaijiang/homeBg.jpg) no-repeat;
     background-size: 100% 100%;
     width: 375px;
     height: 667px;
@@ -470,11 +512,19 @@ export default {
 .home .rules {
     cursor: pointer;
     position: absolute;
-    width: 35px;
-    top: 35%;
+    width: 42px;
+    top: 25%;
     left: 5%;
 }
 
+.home .record {
+    cursor: pointer;
+    position: absolute;
+    width: 42px;
+    top: 25%;
+    right: 5%;
+}
+
 .home .top {
     position: absolute;
     bottom: 25%;
@@ -489,8 +539,8 @@ export default {
 .home .answer {
     cursor: pointer;
     position: absolute;
-    width: 280px;
-    bottom: 10%;
+    width: 175px;
+    bottom: 20%;
     left: 0;
     right: 0;
     margin: auto;
@@ -499,8 +549,8 @@ export default {
 .home .exit {
     cursor: pointer;
     position: absolute;
-    width: 280px;
-    bottom: 2%;
+    width: 175px;
+    bottom: 10%;
     left: 0;
     right: 0;
     margin: auto;
@@ -532,7 +582,9 @@ export default {
     clear: both
 }
 
-.ruleWrapper,.recordWrapper {
+.ruleWrapper,
+.recordWrapper,
+.ipayWrapper {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -547,10 +599,10 @@ export default {
 .confirmWrapper {
     cursor: pointer;
     position: absolute;
-    background: url(@/assets/image/answerGame/kaijiang/isConfirm.png) no-repeat;
+    background: url(@/assets/image/answerGame/WeekKaijiang/isConfirm.png) no-repeat;
     background-size: 100% 100%;
-    width: 291px;
-    height: 179px;
+    width: 265px;
+    height: 316px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -562,27 +614,20 @@ export default {
 
 .confirmWrapper .homeBtn {
     position: absolute;
-    right: 20px;
-    top: 20px;
-    width: 53px;
-}
-
-.confirmWrapper .iPay {
-    cursor: pointer;
-    width: 92px;
-    margin-bottom: 10px;
+    bottom: -40px;
+    width: 29px;
 }
 
 .confirmWrapper .confirm {
     cursor: pointer;
-    width: 92px;
-    margin-bottom: 10px;
+    width: 150px;
+    margin-bottom: 24px;
 }
 
 
 .closeWrapper {
     position: absolute;
-    background: url(@/assets/image/answerGame/kaijiang/finish.png) no-repeat;
+    background: url(@/assets/image/answerGame/WeekKaijiang/finish.png) no-repeat;
     background-size: 100% 100%;
     width: 258px;
     height: 258px;
@@ -610,7 +655,8 @@ export default {
     background-color: #f7f7f9;
     border-radius: 6px;
     padding: 12px;
-
+    flex-direction: column;
+    align-items: center;
 }
 
 .item-left {
@@ -623,7 +669,10 @@ export default {
 }
 
 .item-right {
-    margin-left: 12px;
+    /* margin-left: 12px; */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .up {
@@ -631,7 +680,7 @@ export default {
     align-items: flex-end;
     font-size: 18px;
     font-weight: 600;
-    height: 60px;
+    height: 30px;
 }
 
 .center {