Merge branch 'master' of http://192.168.0.115:3000/chenzimin2/ZGZQBWG

game/README.md

@@ -11,18 +11,12 @@ https://sit-cnzhengquan.4dage.com/game/index.html#/
 ## 还缺资源：
 
 ## todo
-拿到游戏规则后才能跳转到游戏界面
+积分达到上限时的提示文字样式，每个游戏都要改，而且新增积分始终为0。
 
-积分达到上限时的提示文字样式
-
-
-
-score随时更新到localstorage
 
 
 游戏规则
 
-题目列表
 
 
 
@@ -37,32 +31,3 @@ score随时更新到localstorage
 
 
 
-接入unity游戏
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

game/src/App.vue

@@ -9,6 +9,7 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import { checkLoginStatusAndProcess, getGameRuleList, getScoreLimit } from '@/api.js'
+
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,

game/src/api.js

@@ -6,7 +6,7 @@ import router from "@/router"
 
 axios.interceptors.response.use(function (response) {
   // 2xx 范围内的状态码都会触发该函数。
-  if (response.data.code === 5001 || response === 5002) {
+  if (response.data.code === 5001 || response.data.code === 5002) {
     store.commit('logoutCallback')
     router.push({ name: 'HomeView' })
     return Promise.reject('登录态过期')
@@ -40,6 +40,7 @@ export async function login(account, password) {
     },
   })
   if (res.data.code !== 0) {
+    store.commit('setLoginStatus', false)
     throw (`登录失败：${res.data.msg}`)
   } else {
     store.commit('setLoginStatus', true)
@@ -199,3 +200,15 @@ export async function addScore(score) {
     return res.data.data
   }
 }
+
+export async function getExamQuestionList() {
+  const res = await axios({
+    method: 'get',
+    url: `${process.env.VUE_APP_API_PREFIX}/api/show/question/getList`,
+  })
+  if (res.data.code !== 0) {
+    throw (`获取答题列表失败：${res.data.msg}`)
+  } else {
+    return res.data.data
+  }
+}

game/src/main.js

@@ -10,6 +10,7 @@ import mitt from "mitt"
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
 // import { showDialog  } from 'vant';
+import { Loading } from 'vant'
 import 'vant/lib/index.css'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
@@ -76,6 +77,7 @@ app.use(store)
   .use(router)
   .use(clickOutside)
   .use(VueViewer)
+  .use(Loading)
   // .use(showDialog )
   // .component('HotSpot', HotSpot)
   .mount('#app')

game/src/router/index.js

@@ -75,11 +75,11 @@ const router = createRouter({
   routes
 })
 
-// router.beforeEach((to, from) => {
-//   // 生产环境下强制每次都从首页进入
-//   if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView') {
-//     return '/'
-//   }
-// })
+router.beforeEach((to, from) => {
+  // 生产环境下强制每次都从首页进入
+  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView') {
+    return '/'
+  }
+})
 
 export default router

game/src/store/index.js

@@ -2,7 +2,7 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    loginStatus: false,
+    loginStatus: undefined,
     token: '',
     userInfo: {
       // createTime: "2024-01-08 17:04:43"
@@ -35,9 +35,9 @@ export default createStore({
       // updateTime: "2024-01-08 19:28:35",
       // }
     ],
-    score: null,
-    ifScoreLimitReached: false,
-    scoreLimit: null,
+    score: undefined,
+    ifScoreLimitReached: undefined,
+    scoreLimit: undefined,
   },
   getters: {
   },

game/src/views/ExamPaper2.vue

@@ -15,7 +15,10 @@
       <button class="game-rule" />
     </div>
 
-    <div class="question-inner">
+    <div
+      v-if="!isShowLoading"
+      class="question-inner"
+    >
       <p class="question">
         {{ questionList[currentQuestionIdx].question }}
       </p>
@@ -96,6 +99,11 @@
     >
       下一题
     </button>
+    <van-loading
+      v-show="isShowLoading"
+      class="loading"
+      type="spinner"
+    />
   </div>
 </template>
 
@@ -106,7 +114,7 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import dayjs from 'dayjs'
 import { shuffle } from 'lodash'
-import { addScore, getScore } from '@/api.js'
+import { addScore, getScore, getExamQuestionList } from '@/api.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -117,6 +125,41 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(390, 752)
 
+const isShowLoading = ref(true)
+getExamQuestionList().then((res) => {
+  questionList.value = res.map((questionItem) => {
+    const optionsAndAnswer = JSON.parse(questionItem.answer)
+    console.log(optionsAndAnswer)
+    const ret = {
+      question: questionItem.question,
+      answerOptions: optionsAndAnswer.answer.map((answerItem) => {
+        return answerItem.name
+      }),
+      rightOptionIdx: optionsAndAnswer.answer.findIndex((answerItem) => {
+        return answerItem.val === optionsAndAnswer.correct
+      }),
+      desc: questionItem.description
+    }
+    return ret
+  })
+
+  isShowLoading.value = false
+
+  timeCountIntervalId = setInterval(() => {
+    timeCount.value--
+    if (timeCount.value === 0) {
+      clearInterval(timeCountIntervalId)
+      router.replace({
+        name: 'ExamPaper3',
+        query: {
+          correntCount: correntCount.value,
+          bonusPoint: bonusPoint.value,
+        }
+      })
+    }
+  }, 1000)
+})
+
 function onClickReturnHome() {
   router.push({
     name: 'HomeView',
@@ -128,19 +171,6 @@ function onClickReturnHome() {
  */
 const timeCount = ref(store.state.gameRuleList[1].second)
 let timeCountIntervalId = null
-timeCountIntervalId = setInterval(() => {
-  timeCount.value--
-  if (timeCount.value === 0) {
-    clearInterval(timeCountIntervalId)
-    router.replace({
-      name: 'ExamPaper3',
-      query: {
-        correntCount: correntCount.value,
-        bonusPoint: bonusPoint.value,
-      }
-    })
-  }
-}, 1000)
 onBeforeUnmount(() => {
   clearInterval(timeCountIntervalId)
 })
@@ -165,33 +195,33 @@ const correntCount = ref(0)
  */
 const selectedIdx = ref(null)
 const questionList = ref([
-  {
-    question: '你是sb吗？',
-    answerOptions: [
-      '是',
-      '不是',
-    ],
-    rightOptionIdx: 0,
-    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
-  },
-  {
-    question: '你是sb吗？',
-    answerOptions: [
-      '是',
-      '不是',
-    ],
-    rightOptionIdx: 0,
-    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
-  },
-  {
-    question: '你是sb吗？',
-    answerOptions: [
-      '是',
-      '不是',
-    ],
-    rightOptionIdx: 0,
-    desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
-  },
+  // {
+  //   question: '你是sb吗？',
+  //   answerOptions: [
+  //     '是',
+  //     '不是',
+  //   ],
+  //   rightOptionIdx: 0,
+  //   desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  // },
+  // {
+  //   question: '你是sb吗？',
+  //   answerOptions: [
+  //     '是',
+  //     '不是',
+  //   ],
+  //   rightOptionIdx: 0,
+  //   desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  // },
+  // {
+  //   question: '你是sb吗？',
+  //   answerOptions: [
+  //     '是',
+  //     '不是',
+  //   ],
+  //   rightOptionIdx: 0,
+  //   desc: '这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本',
+  // },
 ])
 const currentQuestionIdx = ref(0)
 const isSubmitted = computed(() => {

game/src/views/GameByUnity.vue

@@ -22,7 +22,10 @@ if (store.state.loginStatus) {
   gameUrlQuery = `?userId=${store.state.userInfo.id}&token=${store.state.token}`
 }
 const gameUrlMap = {
+  AntibodyBattle: `https://app.4dage.com/test/rc/VirusWar/index.html`,
   DisasterRelief: `http://app.4dage.com/test/rc/Build/index.html`,
+  EnviromentProtection: `https://app.4dage.com/test/rc/EcologicalProtection/index.html`,
+  LostChildren: `https://app.4dage.com/WebGLTestyhz/MiniGame/H5Game-ChinaSecuritiesMuseumMaze/index.html`,
 }
 
 const gameUrl = gameUrlMap[route.query.gameName] + gameUrlQuery

game/src/views/HomeView.vue

@@ -120,7 +120,10 @@
         >
       </button>
       <!-- 抗体大作战 -->
-      <button class="game-entry antibody-battle-entry">
+      <button
+        class="game-entry antibody-battle-entry"
+        @click="onClickGameEntry(3)"
+      >
         <img
           class=""
           src="@/assets/images/antibody-battle-entry.png"
@@ -141,7 +144,10 @@
         >
       </button>
       <!-- 生态保护 -->
-      <button class="game-entry enviroment-protection">
+      <button
+        class="game-entry enviroment-protection"
+        @click="onClickGameEntry(5)"
+      >
         <img
           class=""
           src="@/assets/images/enviroment-protection.png"
@@ -150,7 +156,10 @@
         >
       </button>
       <!-- 找回走失儿童 -->
-      <button class="game-entry lost-children-entry">
+      <button
+        class="game-entry lost-children-entry"
+        @click="onClickGameEntry(6)"
+      >
         <img
           class=""
           src="@/assets/images/lost-children-entry.png"
@@ -195,11 +204,17 @@
       @visitor="onLoginChoiceVisitor"
       @close="onLoginChoiceClose"
     />
+
+    <van-loading
+      v-show="isShowLoading"
+      class="loading"
+      type="spinner"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from "vue"
+import { ref, computed, watch, onMounted, onUnmounted, watchEffect } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import ClipboardJS from 'clipboard'
@@ -219,8 +234,21 @@ const {
 const loginStatus = computed(() => {
   return store.state.loginStatus
 })
-watch(loginStatus, () => {
-  if (loginStatus.value) {
+const gameRuleList = computed(() => {
+  return store.state.gameRuleList
+})
+const score = computed(() => {
+  return store.state.score
+})
+const ifScoreLimitReached = computed(() => {
+  return store.state.ifScoreLimitReached
+})
+const scoreLimit = computed(() => {
+  return store.state.scoreLimit
+})
+
+watch(loginStatus, (vNew) => {
+  if (vNew) {
     getScore().then((res) => {
       store.commit('setScore', res.total)
       store.commit('setIfScoreLimitReached', res.hasOver)
@@ -230,6 +258,20 @@ watch(loginStatus, () => {
   immediate: true,
 })
 
+const isShowLoading = ref(true)
+let hideLoadingCallback = null
+watchEffect(() => {
+  if (
+    (loginStatus.value === false && gameRuleList.value.length > 0) ||
+    (loginStatus.value === true && gameRuleList.value.length > 0 && score.value !== undefined && ifScoreLimitReached.value !== undefined && !scoreLimit.value !== undefined)
+  ) {
+    isShowLoading.value = false
+    if (hideLoadingCallback) {
+      hideLoadingCallback()
+    }
+  }
+})
+
 
 function onClickLogin() {
   router.push({
@@ -282,7 +324,12 @@ const entryFunctionList = [
     })
   },
   function () {
-
+    router.push({
+      name: 'GameByUnity',
+      query: {
+        gameName: 'AntibodyBattle'
+      },
+    })
   },
   function () {
     router.push({
@@ -293,10 +340,20 @@ const entryFunctionList = [
     })
   },
   function () {
-
+    router.push({
+      name: 'GameByUnity',
+      query: {
+        gameName: 'EnviromentProtection'
+      },
+    })
   },
   function () {
-
+    router.push({
+      name: 'GameByUnity',
+      query: {
+        gameName: 'LostChildren'
+      },
+    })
   },
 ]
 const isShowLoginChoice = ref(false)
@@ -334,7 +391,13 @@ if (route.query.gameIdx) {
   router.replace({
     name: route.name
   })
-  onClickGameEntry(gameIdx)
+  if (isShowLoading.value) {
+    hideLoadingCallback = () => {
+      onClickGameEntry(gameIdx)
+    }
+  } else {
+    onClickGameEntry(gameIdx)
+  }
 }
 </script>
 
@@ -477,5 +540,16 @@ if (route.query.gameIdx) {
       }
     }
   }
+  >.loading{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 </style>