未登录时点击游戏入口，弹出登录引导窗；可通过首页的url参数自动进入游戏。

game/.env.mytest

@@ -1,4 +1,4 @@
 VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./
-VUE_APP_API_PREFIX=https://sit-cnzhengquan.4dage.com/
+VUE_APP_API_PREFIX=https://sit-cnzhengquan.4dage.com

game/README.md

@@ -1,7 +1,10 @@
 ## 部署测试环境
-文件存放位置：
 
-访问url：
+### 文件存放位置
+/Default/阿里云/项目节点/项目测试/阿里云-四维时代-项目测试服务器-8.135.106.227/data/data/game_zhongguo_zhengquan_data/game/
+
+### 访问url
+https://sit-cnzhengquan.4dage.com/game/index.html#/
 
 ## 笔记
 

game/src/components/LoginChoice.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="login-choice">
+    <div class="btn-wrapper">
+      <button @click="emit('login')">
+        <h3>登录</h3>
+        <span>登录后可获得积分，兑换奖品</span>
+      </button>
+      <button @click="emit('signUp')">
+        <h3>注册</h3>
+      </button>
+      <button @click="emit('visitor')">
+        <h3>游客</h3>
+        <span>游客模式下只能体验游戏<br>无法累积积分</span>
+      </button>
+    </div>
+    <button
+      class="close"
+      @click="emit('close')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+const emit = defineEmits(['login', 'signUp', 'visitor', 'close'])
+
+</script>
+
+<style lang="less" scoped>
+.login-choice{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+  >.btn-wrapper{
+    position: absolute;
+    left: 50%;
+    top: calc(152 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(336 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(401 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: #FFFFFF;
+    border-radius: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button{
+      position: relative;
+      width: calc(289 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(99 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >h3{
+        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        color: #C5A16C;
+        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >span{
+        font-size: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: 400;
+        color: #C5A16C;
+        line-height: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >button:nth-of-type(1) {
+      background-image: url(@/assets/images/btn-login-bg-2.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >h3{
+        position: absolute;
+        left: calc(122 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >span{
+        position: absolute;
+        left: calc(122 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >button:nth-of-type(2) {
+      background-image: url(@/assets/images/btn-sign-up-bg-2.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >h3{
+        position: absolute;
+        top: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        left: calc(122 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >button:nth-of-type(3) {
+      background-image: url(@/assets/images/btn-visitor-bg.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >h3{
+        position: absolute;
+        left: calc(122 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+      >span{
+        position: absolute;
+        left: calc(122 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        text-align: left;
+      }
+    }
+  }
+  >button.close{
+    position: absolute;
+    left: 50%;
+    top: calc(582 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(52 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/icon-close.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+  }
+}
+</style>

game/src/router/index.js

@@ -1,6 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import RedirectView from '../views/RedirectView.vue'
 import SignUp from '../views/SignUp.vue'
 import LoginView from '../views/LoginView.vue'
 import FindPassword from '../views/FindPassword.vue'
@@ -20,11 +19,6 @@ const routes = [
     component: HomeView,
   },
   {
-    path: '/redirect-view',
-    name: 'RedirectView',
-    component: RedirectView,
-  },
-  {
     path: '/sign-up',
     name: 'SignUp',
     component: SignUp,

game/src/store/index.js

@@ -17,7 +17,8 @@ export default createStore({
       // updateTime: "2024-01-08 17:04:43"
       // userName: "1020363151@qq.com"
     },
-    avatar: '',
+    // avatar: '',
+    gameToPlayIdx: null,
   },
   getters: {
   },
@@ -46,6 +47,9 @@ export default createStore({
     changeBonusPoint(state, delta) {
       state.avatar += delta
     },
+    setGameToPlayIdx(state, index) {
+      state.gameToPlayIdx = index
+    }
   },
   actions: {
   },

game/src/views/HomeView.vue

@@ -83,9 +83,7 @@
       <!-- 乡村林场 -->
       <button
         class="game-entry plant-tree-entry"
-        @click="router.push({
-          name: 'PlantTree',
-        })"
+        @click="onClickGameEntry(0)"
       >
         <img
           class=""
@@ -97,9 +95,7 @@
       <!-- 助农课堂 -->
       <button
         class="game-entry exam-paper-entry"
-        @click="router.push({
-          name: 'ExamPaper1',
-        })"
+        @click="onClickGameEntry(1)"
       >
         <img
           class=""
@@ -111,9 +107,7 @@
       <!-- 企业翻翻看 -->
       <button
         class="game-entry pair-up-entry"
-        @click="router.push({
-          name: 'PairUp',
-        })"
+        @click="onClickGameEntry(2)"
       >
         <img
           class=""
@@ -134,12 +128,7 @@
       <!-- 应急救灾 -->
       <button
         class="game-entry disaster-relief-entry"
-        @click="router.push({
-          name: 'GameByUnity',
-          query: {
-            gameName: 'DisasterRelief'
-          },
-        })"
+        @click="onClickGameEntry(4)"
       >
         <img
           class=""
@@ -193,6 +182,16 @@
         >
       </button>
     </div>
+
+    <!-- 让用户选择是否登录、注册 -->
+    <LoginChoice
+      v-show="isShowLoginChoice"
+      class="login-choice"
+      @login="onClickLogin"
+      @signUp="onClickSignUp"
+      @visitor="onLoginChoiceVisitor"
+      @close="onLoginChoiceClose"
+    />
   </div>
 </template>
 
@@ -203,6 +202,7 @@ import { useStore } from "vuex"
 import ClipboardJS from 'clipboard'
 import { showDialog } from 'vant'
 import { logout } from '@/api.js'
+import LoginChoice from '@/components/LoginChoice.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -246,6 +246,78 @@ clipboard.on('success', function(e) {
 onUnmounted(() => {
   clipboard.destroy()
 })
+
+const entryFunctionList = [
+  function () {
+    router.push({
+      name: 'PlantTree',
+    })
+  },
+  function () {
+    router.push({
+      name: 'ExamPaper1',
+    })
+  },
+  function () {
+    router.push({
+      name: 'PairUp',
+    })
+  },
+  function () {
+
+  },
+  function () {
+    router.push({
+      name: 'GameByUnity',
+      query: {
+        gameName: 'DisasterRelief'
+      },
+    })
+  },
+  function () {
+
+  },
+  function () {
+
+  },
+]
+const isShowLoginChoice = ref(false)
+
+function onClickGameEntry(idx) {
+  if (store.state.loginStatus) {
+    entryFunctionList[idx]()
+  } else {
+    store.commit('setGameToPlayIdx', idx)
+    isShowLoginChoice.value = true
+  }
+}
+
+function onLoginChoiceVisitor() {
+  const gameIdx = store.state.gameToPlayIdx
+  store.commit('setGameToPlayIdx', null)
+  isShowLoginChoice.value = false
+  entryFunctionList[gameIdx]()
+}
+function onLoginChoiceClose() {
+  store.commit('setGameToPlayIdx', null)
+  isShowLoginChoice.value = false
+}
+
+// 登录、注册完毕后回到首页，可能需要自动进入游戏页
+if (store.state.gameToPlayIdx !== null) {
+  const gameIdx = store.state.gameToPlayIdx
+  store.state.gameToPlayIdx = null
+  entryFunctionList[gameIdx]()
+}
+
+// 如果通过url要求自动进入游戏页
+if (route.query.gameIdx) {
+  const gameIdx = Number(route.query.gameIdx)
+  router.replace({
+    name: route.name
+  })
+  onClickGameEntry(gameIdx)
+}
 </script>
 
 <style lang="less" scoped>

game/src/views/RedirectView.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="redirect-view" />
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted } from "vue"
-import { useRoute, useRouter } from "vue-router"
-import { useStore } from "vuex"
-
-const route = useRoute()
-const router = useRouter()
-const store = useStore()
-
-console.log('sdfdsdf', route.query)
-switch (route.query.gameIdx) {
-case '0':
-  router.replace({
-    name: 'PlantTree',
-  })
-  break
-case '1':
-  router.replace({
-    name: 'ExamPaper1',
-  })
-  break
-case '2':
-  router.replace({
-    name: 'PairUp',
-  })
-  break
-case '3':
-  router.replace({
-    name: 'GameByUnity',
-    query: {
-      gameName: '',
-    }
-  })
-  break
-case '4':
-  router.replace({
-    name: 'GameByUnity',
-    query: {
-      gameName: 'DisasterRelief',
-    }
-  })
-  break
-case '5':
-  router.replace({
-    name: 'GameByUnity',
-    query: {
-      gameName: '',
-    }
-  })
-  break
-case '6':
-  router.replace({
-    name: 'GameByUnity',
-    query: {
-      gameName: '',
-    }
-  })
-  break
-default:
-  break
-}
-
-
-
-</script>
-
-<style lang="less" scoped>
-.redirect-view{
-
-}
-</style>