fix

src/api/index.js

@@ -32,5 +32,11 @@ export function gamePlay(templateId) {
   })
 }
 
-//继续游戏
-export function gameContinue() {}
+// 下一幕
+export function playNext(data) {
+  return request({
+    url: `game/play/next`,
+    method: 'post',
+    data: data
+  })
+}

src/utils/request.js

@@ -3,7 +3,7 @@ import { getToken } from './tokenStore'
 const service = axios.create({
   baseURL: 'http://hiyou.space/api',
   withCredentials: false,
-  timeout: 5000
+  timeout: 15000
 })
 
 // request拦截器 request interceptor

src/views/home/detail.vue

@@ -1,4 +1,5 @@
 <template>
+  <van-loading class="vanloading" v-if="loading" size="24px">加载中...</van-loading>
   <div class="detail-pane" :style="{ backgroundImage: `url(${data.coverImage1 || data.coverImage2})` }">
     <div class="return" @click="goHome"><img src="@/assets/images/return.png" alt="" /></div>
     <div class="detail-header">{{ data.name }}</div>
@@ -11,17 +12,26 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { setQuestion, getQuestion } from './index.js'
 import { gameTemplateDetail, gamePlay } from '@/api/index.js'
 const router = useRouter()
 const route = useRoute()
 const data = ref({})
+const loading = ref(false)
 
 function goGame() {
+  loading.value = true
   gamePlay(route.params.templateId).then(res => {
     console.log(res)
-    // router.push({
-    //   name: 'game'
-    // })
+    loading.value = false
+    setQuestion(route.params.templateId, res.data)
+
+    router.push({
+      name: 'game',
+      params: {
+        templateId: route.params.templateId
+      }
+    })
   })
 }
 
@@ -38,7 +48,17 @@ function getDetail() {
   })
 }
 onMounted(() => {
-  getDetail()
+  const data = getQuestion(route.params.templateId)
+  if (!data.text) {
+    getDetail()
+  } else {
+    router.push({
+      name: 'game',
+      params: {
+        templateId: route.params.templateId
+      }
+    })
+  }
 })
 </script>
 <style lang="scss" scoped>
@@ -151,4 +171,15 @@ onMounted(() => {
     opacity: 1;
   }
 }
+.vanloading {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.3);
+}
 </style>

src/views/home/game.vue

@@ -1,35 +1,67 @@
 <template>
-  <div class="detail-pane">
+  <van-loading class="vanloading" v-if="loading" size="24px">加载中...</van-loading>
+  <div class="detail-pane" :style="{ backgroundImage: `url(${gameData.screen})` }">
     <div class="return" @click="goHome"><img src="@/assets/images/return.png" alt="" /></div>
     <div class="content">
       <div class="question">
-        The sky is a deep blue, resembling a massive slab of blue jade, with the midsummer sun hanging high like a fiery
-        orb, suggesting it's around three in the afternoon. The sky is a deep blue, resembling a massive slab of blue
-        jade, with the midsummer sun hanging high like a fiery orb, suggesting it's around three in the afternoon.
+        {{ gameData.text }}
       </div>
-      <div style="margin-bottom: 20px">
+      <div style="margin-bottom: 20px; text-align: center">
         <span class="tips">Click on one of the following options or enter text</span>
       </div>
-
-      <div class="option">Looking around you notice some faintlight shini dgg through the cracks</div>
-      <div class="option">Looking around you notice some faintlight shini dgg through the cracks</div>
+      <div class="option" v-for="item in gameData.options" @click="submit(item)" :key="item">{{ item }}</div>
     </div>
 
     <div class="quiz">
-      <input type="text" placeholder="Type your message" class="quiz-input" />
-      <img class="submit-btn" src="@/assets/images/submit-btn.png" alt="" />
+      <input type="text" v-model="searchValue" placeholder="Type your message" class="quiz-input" />
+      <img class="submit-btn" src="@/assets/images/submit-btn.png" alt="" @click="submit(searchValue)" />
     </div>
   </div>
 </template>
 <script setup>
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import { playNext } from '@/api/index.js'
+import { getQuestion, setQuestion } from './index.js'
 const router = useRouter()
+const route = useRoute()
+const searchValue = ref('')
+const loading = ref(false)
+
+const gameData = ref({})
 
 function goHome() {
   router.push({
     name: 'home'
   })
 }
+
+function submit(val) {
+  loading.value = true
+  playNext({
+    templateId: route.params.templateId,
+    messages: [gameData.value.message],
+    option: val
+  }).then(res => {
+    loading.value = false
+    searchValue.value = ''
+    console.log(res)
+    gameData.value = res.data
+    setQuestion(route.params.templateId, gameData.value)
+  })
+}
+
+onMounted(() => {
+  const data = getQuestion(route.params.templateId)
+  if (!data.text) {
+    router.push({
+      name: 'home'
+    })
+  } else {
+    gameData.value = data
+    console.log('gameData.value', gameData.value)
+  }
+})
 </script>
 <style lang="scss" scoped>
 .detail-pane {
@@ -41,7 +73,7 @@ function goHome() {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding-bottom: 100px;
+  padding-bottom: 50px;
   padding-top: 200px;
 }
 
@@ -139,4 +171,15 @@ function goHome() {
   overflow: auto;
   margin-bottom: 20px;
 }
+.vanloading {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.3);
+}
 </style>

src/views/home/index.js

@@ -0,0 +1,10 @@
+export function getQuestion(templateId) {
+  const data = JSON.parse(window.localStorage.getItem('question')) || {}
+  return data[templateId] || {}
+}
+
+export function setQuestion(templateId, data) {
+  const _data = JSON.parse(window.localStorage.getItem('question')) || {}
+  _data[templateId] = data
+  window.localStorage.setItem('question', JSON.stringify(_data))
+}