开奖活动

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

src/views/HomeView/AnswerGame/Kaijiang.vue

@@ -5,19 +5,22 @@
                 <div class="gameBox">
                     <div class="home">
                         <div :class="{ 'dim': 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;">当前拥有抽奖券:{{ top }}张</span>
+                            <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;">当前拥有抽奖券:{{ top }}张</span>
+                                </div>
+                                <img class="answer" src="@/assets/image/answerGame/kaijiang/answer.png" alt="兑换抽奖券" @click="clickAnswer">
+                                <img class="exit" src="@/assets/image/answerGame/kaijiang/exit.png" alt="退出活动" @click="getOut">
                             </div>
-                            <img class="answer" src="@/assets/image/answerGame/kaijiang/answer.png" alt="答题按钮" @click="clickAnswer">
-                            <img class="exit" src="@/assets/image/answerGame/kaijiang/exit.png" alt="退出互动" @click="getOut">
+                            
                         </div>
                         
                     </div>
                     <div class="ruleWrapper" v-if="isRuleWrapper">
                         <el-card class="box-card">
                             <div slot="header" class="clearfix">
-                                <span>互动规则</span>
+                                <span>活动规则</span>
                                 <span style="float: right; font-size: 20px;cursor: pointer;" @click="closeRuleWrapper">
                                     <i class="el-icon-close"></i>
                                 </span>
@@ -25,7 +28,13 @@
                             <div v-html="rule"></div>
                         </el-card>
                     </div>
-                    <div class="confirmWrapper" v-if="isConfirmWrapper" @click="getOut">
+                    <div class="confirmWrapper" v-if="isConfirmWrapper">
+                        <img class="homeBtn" src="@/assets/image/answerGame/kaijiang/homeBtn.png" alt="返回主界面" @click="refresh">
+                        <img class="iPay" src="@/assets/image/answerGame/kaijiang/iPay.png" alt="前往充值" @click="clickIpay">
+                        <img class="confirm" src="@/assets/image/answerGame/kaijiang/confirm.png" alt="确认兑换" @click="clickConfirm">
+                    </div>
+                    <div class="closeWrapper" v-if="isCloseWrapper">
+                        <img class="goHome" src="@/assets/image/answerGame/kaijiang/goHome.png" alt="关闭" @click="refresh">
                     </div>
                 </div>
             </div>
@@ -46,6 +55,7 @@ export default{
         rule:'',
         top:'1',
         isConfirmWrapper:false,
+        isCloseWrapper:false,
         isRuleWrapper: false,
         isDim:false,
     };
@@ -54,6 +64,9 @@ export default{
     this.getHomeData();
   },
   methods:{
+    refresh() {
+        location.reload();
+    },
     getOut(){
         this.$router.push({
                 path: '/home/festiveEvents',
@@ -63,16 +76,25 @@ export default{
         homeData({actId:this.actId}).then(response=>{
                 console.log(response.data.data);
                 this.rule = response.data.data.rule;
-            }).catch(err => {
-                console.log(err)
+                this.top = response.data.data.top;
             })
     },
     clickAnswer(){
+        this.isDim = true;
+        this.isConfirmWrapper = true;
+    },
+    clickConfirm(){
         MidAutumnSignIn({actId:this.actId}).then(response=>{
+            this.isConfirmWrapper = false;
             this.isDim = true;
-            this.isConfirmWrapper = true;
+            this.isCloseWrapper = true;
         })
     },
+    clickIpay(){
+        this.$router.push({
+                path: '/ipay',
+            });
+    },
     clickRuleWrapper(){
         this.isDim = true;
         this.isRuleWrapper = true;
@@ -307,30 +329,42 @@ export default{
   .confirmWrapper{
     cursor: pointer;
     position: absolute;
-    background: url(@/assets/image/answerGame/kaijiang/finish.png) no-repeat;
+    background: url(@/assets/image/answerGame/kaijiang/isConfirm.png) no-repeat;
     background-size: 100% 100%;
-    width: 271px;
-    height: 326px;
+    width: 291px;
+    height: 179px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 12;
     display: flex;
-    justify-content: center;
+    justify-content:space-evenly;
     align-items: flex-end;
   }
-  .confirmWrapper .goHome{
+  .confirmWrapper .homeBtn{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 53px;
+  }
+  .confirmWrapper .iPay{
     cursor: pointer;
-    width: 112px;
-    height: 55px;
+    width: 92px;
+    margin-bottom: 10px;
+  }
+  .confirmWrapper .confirm{
+    cursor: pointer;
+    width: 92px;
+    margin-bottom: 10px;
   }
 
-  .failWrapper{
+
+  .closeWrapper{
     position: absolute;
-    background: url(@/assets/image/answerGame/item/fail.png) no-repeat;
+    background: url(@/assets/image/answerGame/kaijiang/finish.png) no-repeat;
     background-size: 100% 100%;
-    width: 240px;
-    height: 208.5px;
+    width: 258px;
+    height: 258px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -339,7 +373,7 @@ export default{
     justify-content: center;
     align-items: flex-end;
   }
-  .failWrapper .goHome{
+  .closeWrapper .goHome{
     cursor: pointer;
     width: 112px;
     height: 55px;