各种必要的网络请求都结束后才能跳转到游戏界面

game/README.md

@@ -11,13 +11,11 @@ https://sit-cnzhengquan.4dage.com/game/index.html#/
 ## 还缺资源：
 
 ## todo
-拿到游戏规则后才能跳转到游戏界面
-
-积分达到上限时的提示文字样式
+接入unity游戏
 
+积分达到上限时的提示文字样式，每个游戏都要改，而且新增积分始终为0。
 
 
-score随时更新到localstorage
 
 
 游戏规则
@@ -37,7 +35,6 @@ 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)

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/HomeView.vue

@@ -195,11 +195,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 +225,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 +249,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({
@@ -334,7 +367,13 @@ if (route.query.gameIdx) {
   router.replace({
     name: route.name
   })
-  onClickGameEntry(gameIdx)
+  if (isShowLoading.value) {
+    hideLoadingCallback = () => {
+      onClickGameEntry(gameIdx)
+    }
+  } else {
+    onClickGameEntry(gameIdx)
+  }
 }
 </script>
 
@@ -477,5 +516,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>