日常答题完成

src/api/allApi.js

@@ -1,5 +1,31 @@
 import request from '@/utils/request'
 
+// 每日问答-首页数据
+export function homeData(query) {
+  return request({
+    url: '/answer/top',
+    method: 'get',
+    params:query
+  })
+}
+
+// 每日问答-获取题目
+export function questionList(query) {
+  return request({
+    url: '/answer/room',
+    method: 'get',
+    params:query
+  })
+}
+
+// 每日问答-提交答案
+export function submitAnswer(data) {
+  return request({
+    url: '/answer/submit',
+    method: 'post',
+    data
+  })
+}
 // 字典列表
 export function dictList(query) {
   return request({

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

src/utils/request.js

@@ -6,9 +6,9 @@ import { getToken } from '@/utils/auth'
 
 let prodBaseURL = 'http://47.103.79.143:9085/admin';//阿里云地址
 
-// let devBaseURL = 'http://192.168.100.208:9083/admin';//测试地址
+let devBaseURL = 'http://192.168.100.208:9083/admin';//测试地址
 
-let devBaseURL = 'http://47.103.79.143:9085/admin';//阿里云地址
+// let devBaseURL = 'http://47.103.79.143:9085/admin';//阿里云地址
 // create an axios instance
 const service = axios.create({
   baseURL: process.env.NODE_ENV === 'production' ? prodBaseURL : devBaseURL,// api 的 base_url

src/views/HomeView/AnswerGame/AnswerGame.vue

@@ -5,7 +5,7 @@
                 <div class="gameBox">
                     <div class="item" :class="{ 'dim': isDim }" v-if="isShowItem==true">
                         <div class="integralBox">
-                            <div class="integral">125000</div>
+                            <div class="integral">{{ userInfo.surplusIntegral }}</div>
                         </div>
                         <div class="timer">
                             <div class="second">{{ countdown }}</div>
@@ -13,12 +13,12 @@
                         <div class="topicNum">
                             <div class="topic">{{itemNum+1}}/5</div>
                         </div>
-                        <div class="questionBox">
+                        <div class="questionBox" v-if="questions.length>0">
                             <div class="title animated zoomIn">
-                                <span style="text-align: center;">{{ question[itemNum].ask }}</span>
+                                <span style="text-align: center;">{{ questions[itemNum].ask }}</span>
                             </div>
                             <div class="content animated" :class="animate_showChoice" v-if="animate_showChoice">
-                                <div v-for="(item,index) in question[itemNum].answer" :key="index"  class="answerItem" :class="index == clickIndex ? answerColor : ''" @click="answer(item,index)">
+                                <div v-for="(item,index) in questions[itemNum].answers" :key="index"  class="answerItem" :class="index == clickIndex ? answerColor : ''" @click="answer(item,index)">
                                     <span>{{ item.answer }}</span>
                                     <img v-if="index == clickIndex&&answerColor=='error'" class="invisible" src="@/assets/image/answerGame/item/error.png" alt="错误">
                                     <img v-if="index == clickIndex&&answerColor=='right'" class="invisible" style="width: 25px;" src="@/assets/image/answerGame/item/right.png" alt="正确">
@@ -32,8 +32,11 @@
                     </div>
                     <div class="home" :class="{ 'dim': isDim }" v-else>
                         <img class="rules" src="@/assets/image/answerGame/home/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/home/answer.png" alt="答题按钮" @click="clickAnswer">
-                        <img class="exit" src="@/assets/image/answerGame/home/exit.png" alt="答题按钮">
+                        <img class="exit" src="@/assets/image/answerGame/home/exit.png" alt="退出互动" @click="getOut">
                     </div>
                     <div class="ruleWrapper" v-if="isRuleWrapper">
                         <el-card class="box-card">
@@ -43,9 +46,7 @@
                                     <i class="el-icon-close"></i>
                                 </span>
                             </div>
-                            <div v-for="o in 4" :key="o">
-                                {{'列表内容 ' + o }}
-                            </div>
+                            <div v-html="rule"></div>
                         </el-card>
                     </div>
                     <div class="confirmWrapper" v-if="isConfirmWrapper">
@@ -61,13 +62,19 @@
     </div>
 </template>
 <script>
-import SiderInfo from '@/components/SiderInfo.vue'
+import { homeData,questionList,submitAnswer } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue';
+import { mapGetters } from 'vuex';
 export default{
   components: {
     SiderInfo
   },
   data() {
     return {
+        actId:this.$route.query.actId,
+        roomId:'',
+        rule:'',
+        top:'',
         isConfirmWrapper:false,
         isFailWrapper:false,
         animate_showChoice:'zoomIn',
@@ -77,58 +84,7 @@ export default{
         isShowItem:false,
         isRuleWrapper: false,
         isDim:false,
-        question:[
-            {
-                id: 1,
-                sortId: 1,
-                ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？1111",
-                answer: [
-                    {right: false, answer: "南北朝时期11"}, 
-                    {right: false, answer: "春秋时期11"}, 
-                    {right: true, answer: "晋代11"}, 
-                    {right: false, answer: "周商时期11"}],
-            },
-            {
-                id: 2,
-                sortId: 2,
-                ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？2222",
-                answer: [
-                    {right: false, answer: "南北朝时期22"}, 
-                    {right: false, answer: "春秋时期22"}, 
-                    {right: true, answer: "晋代22"}, 
-                    {right: false, answer: "周商时期22"}],
-            },
-            {
-                id: 3,
-                sortId: 3,
-                ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？333",
-                answer: [
-                    {right: false, answer: "南北朝时期33"}, 
-                    {right: false, answer: "春秋时期33"}, 
-                    {right: true, answer: "晋代33"}, 
-                    {right: false, answer: "周商时期33"}],
-            },
-            {
-                id: 4,
-                sortId: 4,
-                ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？4444",
-                answer: [
-                    {right: false, answer: "南北朝时期44"}, 
-                    {right: false, answer: "春秋时期44"}, 
-                    {right: true, answer: "晋代44"}, 
-                    {right: false, answer: "周商时期44"}],
-            },
-            {
-                id: 5,
-                sortId: 5,
-                ask: "最早的粽子并不是端午节的特产，那粽子是什么时期被正式定为端午节食品的？5555",
-                answer: [
-                    {right: false, answer: "南北朝时期55"}, 
-                    {right: false, answer: "春秋时期55"}, 
-                    {right: true, answer: "晋代55"}, 
-                    {right: false, answer: "周商时期55"}],
-            }
-        ],
+        questions:[],
         chooseStr: '',
         itemNum: 0,
         result: [],
@@ -136,13 +92,49 @@ export default{
         countdown:60,
     };
   },
-  created(){},
+  computed: {
+        // 将 getter 映射到当前组件的计算属性
+        ...mapGetters(['userInfo'])
+    },
+  created(){
+    this.getHomeData();
+  },
   methods:{
+    getOut(){
+        this.$router.push({
+                path: '/home/festiveEvents',
+            });
+    },
+    saveAnswer(){
+        submitAnswer({answers:this.result,roomId:this.roomId}).then(response=>{
+                console.log(response.data.data);
+                this.result = [];
+            })
+    },
+    getQuestionList(){
+        questionList({}).then(response=>{
+                console.log(response.data.data);
+                this.questions = response.data.data.questions;
+                this.roomId = response.data.data.roomId;
+            })
+    },
+    getHomeData(){
+        homeData({actId:this.actId}).then(response=>{
+                console.log(response.data.data);
+                this.rule = response.data.data.rule;
+                this.top = response.data.data.top;
+            })
+    },
     clickGoHome(){
+        this.getHomeData();
         this.isFailWrapper = false;
         this.isConfirmWrapper = false;
         this.isDim = false;
         this.isShowItem = false;
+        this.countdown = 60;
+        this.itemNum = 0;
+        this.animate_showChoice = 'fadeIn';
+        this.localClick = false;
     },
     timerCountdown(){
             this.timer  = setInterval(() => {
@@ -155,7 +147,7 @@ export default{
                     }
                     this.isDim = true;
                     this.isFailWrapper = true;
-                    this.countdown = 60;
+                    this.saveAnswer();
                     console.log(this.result);
                 }
             }, 1000)
@@ -180,23 +172,32 @@ export default{
                     this.localClick = true;
                     this.isDim = true;
                     this.isConfirmWrapper = true;
-                    this.countdown = 60;
+                    this.saveAnswer();
                     console.log(this.result);
                 }else{
                     this.itemNum++
-                    this.localClick = false;
                     setTimeout(() => {
                         this.animate_showChoice = 'fadeIn';
-                    }, 1500)
+                        this.localClick = false;
+                    }, 1000)
                 }
                 
-            }, 1500)
+            }, 1000)
         }
         
     },
     clickAnswer(){
-        this.isShowItem = true;
-        this.timerCountdown();
+        if(this.top){
+            this.$message({
+                message: '今日已答题！',
+                type: 'warning'
+            });
+            return;
+        }else{
+            this.getQuestionList();
+            this.isShowItem = true;
+            this.timerCountdown();
+        } 
     },
     clickRuleWrapper(){
         this.isDim = true;
@@ -211,7 +212,7 @@ export default{
 </script>
 <style scoped>
 .animated {
-  animation-duration: 1s;
+  animation-duration: 0.5s;
   animation-fill-mode: forwards;
 }
 @keyframes zoomIn {
@@ -409,6 +410,16 @@ export default{
     top: 32%;
     left: 5%;
 }
+.home .top{
+    position: absolute;
+    bottom: 23%;
+    left: 0;
+    right: 0;
+    margin:auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
 .home .answer{
     cursor: pointer;
     position: absolute;
@@ -472,7 +483,7 @@ export default{
     z-index: 12;
     display: flex;
     justify-content: center;
-    align-items: end;
+    align-items: flex-end;
   }
   .confirmWrapper .goHome{
     cursor: pointer;
@@ -492,7 +503,7 @@ export default{
     z-index: 12;
     display: flex;
     justify-content: center;
-    align-items: end;
+    align-items: flex-end;
   }
   .failWrapper .goHome{
     cursor: pointer;

src/views/HomeView/FestiveEvents.vue

@@ -76,6 +76,9 @@ export default {
             
             this.$router.push({
                 path: '/home/festiveEvents/answerGame',
+                query: {
+                    actId:val.actId
+                }
             });
             // this.$router.push({
             //     path: '/home/festiveEvents/game',

src/views/HomeView/SignIn.vue

@@ -9,15 +9,15 @@
           <div class="content-body">
             <div class="figures">
               <div class="figure-card">
-                <div class="figure" style="color: #1e80ff;">{{ signDays }}</div>
+                <div class="figure">{{ signDays }}</div>
                 <div class="attention">
-                  <span class="text">本月连续签到天数</span>
+                  <span class="text">本月累计签到天数</span>
                 </div>
               </div>
               <div class="figure-card">
-                <div class="figure">{{ signDays }}</div>
+                <div class="figure" style="color: #1e80ff;">{{ continuousSignCount }}</div>
                 <div class="attention">
-                  <span class="text">本月累计签到天数</span>
+                  <span class="text">本月连续签到天数</span>
                 </div>
               </div>
               <div class="figure-card">
@@ -123,6 +123,7 @@ export default {
           this.markDate = response.data.data.signDays;
           this.integral = response.data.data.integral;
           this.signDays = response.data.data.signDays.length;
+          this.continuousSignCount = response.data.data.continuousSignCount;
       });
     },
     signIn() {

vue.config.js

@@ -14,7 +14,7 @@ const cdn = {
 };
 module.exports = defineConfig({
   devServer:{
-    host: '192.168.100.185',
+    host: '192.168.100.73',
     open:true
   },
   transpileDependencies: true,