积分达到上限时的提示方式修改

game/README.md

@@ -11,8 +11,4 @@ https://sit-cnzhengquan.4dage.com/game/index.html#/
 ## 还缺资源：
 
 ## todo
-unity的4个游戏不用限制竖屏，有适配PC宽屏任一存(任一存)
-
-积分达到上限时的提示文字样式，每个游戏都要改
-
-积分达到上限时新增积分始终为0。
+unity的4个游戏不用限制竖屏，有适配PC宽屏任一存(任一存)

game/src/components/NotifyBonusPointReachedLimit.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="notify-bonus-point-reached-limit">
+    已达本日上限
+  </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)
+
+</script>
+
+<style lang="less" scoped>
+.notify-bonus-point-reached-limit{
+  position: absolute;
+  left: 50%;
+  top: 25%;
+  transform: translate(-50%, -50%);
+  width: calc(302 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  height: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  background: linear-gradient(90deg, rgba(197,161,108,0) 0%, rgba(147,123,88,0.4) 25%, rgba(147,123,88,0.8) 52%, rgba(147,123,88,0.4) 75%, rgba(197,161,108,0) 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  font-family: Source Han Sans SC, Source Han Sans SC;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+</style>

game/src/views/ExamPaper2.vue

@@ -85,7 +85,7 @@
           alt=""
           draggable="false"
         >
-        <span class="number">{{ bonusPointForShow }}</span>
+        <span class="number">{{ bonusPoint }}</span>
       </div>
       <div class="info-item time-count">
         <img
@@ -103,11 +103,17 @@
     >
       下一题
     </button>
+
     <van-loading
       v-show="isShowLoading"
       class="loading"
       type="spinner"
     />
+
+    <transition name="fade-out">
+      <NotifyBonusPointReachedLimit v-if="isShowNotifyBonusPointReachedLimit" />
+    </transition>
+
     <GameRule
       v-show="isShowRule"
       game-title="助农课堂"
@@ -126,6 +132,7 @@ import dayjs from 'dayjs'
 import { shuffle } from 'lodash'
 import { addScore, getScore, getExamQuestionList } from '@/api.js'
 import GameRule from '@/components/GameRule.vue'
+import NotifyBonusPointReachedLimit from '@/components/NotifyBonusPointReachedLimit.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -196,13 +203,7 @@ const timeCountForShow = computed(() => {
 
 // 积分
 const bonusPoint = ref(0)
-const bonusPointForShow = computed(() => {
-  if (!store.state.ifScoreLimitReached) {
-    return bonusPoint.value
-  } else {
-    return `已达本日上限${store.state.scoreLimit}分`
-  }
-})
+
 // 答对计数
 const correntCount = ref(0)
 
@@ -243,13 +244,10 @@ const currentQuestionIdx = ref(0)
 const isSubmitted = computed(() => {
   return selectedIdx.value !== null
 })
-const isCorrect = computed(() => {
-  return true
-})
 function onClickOption(idx) {
   selectedIdx.value = idx
   if (selectedIdx.value === questionList.value[currentQuestionIdx.value].rightOptionIdx) {
-    if (store.state.loginStatus) {
+    if (store.state.loginStatus && !store.state.ifScoreLimitReached) {
       bonusPoint.value += store.state.gameRuleList[1].score
     }
     correntCount.value++
@@ -277,6 +275,14 @@ function onClickNext() {
     })
   }
 }
+
+const isShowNotifyBonusPointReachedLimit = ref(false)
+if (store.state.ifScoreLimitReached) {
+  isShowNotifyBonusPointReachedLimit.value = true
+  setTimeout(() => {
+    isShowNotifyBonusPointReachedLimit.value = false
+  }, 2000)
+}
 </script>
 
 <style lang="less" scoped>

game/src/views/GameByUnity.vue

@@ -23,6 +23,11 @@
         @click="isShowRule = true"
       />
     </div>
+
+    <transition name="fade-out">
+      <NotifyBonusPointReachedLimit v-if="isShowNotifyBonusPointReachedLimit" />
+    </transition>
+
     <GameRule
       v-show="isShowRule"
       :game-title="gameRuleConfig.title"
@@ -37,6 +42,7 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import GameRule from '@/components/GameRule.vue'
+import NotifyBonusPointReachedLimit from '@/components/NotifyBonusPointReachedLimit.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -96,6 +102,13 @@ const gameRuleConfigMap = {
 const gameRuleConfig = gameRuleConfigMap[route.query.gameName]
 const isShowRule = ref(false)
 
+const isShowNotifyBonusPointReachedLimit = ref(false)
+if (store.state.ifScoreLimitReached) {
+  isShowNotifyBonusPointReachedLimit.value = true
+  setTimeout(() => {
+    isShowNotifyBonusPointReachedLimit.value = false
+  }, 2000)
+}
 </script>
 
 <style lang="less" scoped>

game/src/views/PairUp.vue

@@ -73,7 +73,7 @@
           alt=""
           draggable="false"
         >
-        <span class="number">{{ bonusPointForShow }}</span>
+        <span class="number">{{ bonusPoint }}</span>
       </div>
       <div class="info-item time-count">
         <img
@@ -85,12 +85,18 @@
         <span class="number">{{ timeCountForShow }}</span>
       </div>
     </div>
+
     <PairUpOver
       v-show="isOver"
       :corp-count="recognizedCorpList.length"
       :bonus-count="bonusPoint"
       @replay="replay"
     />
+
+    <transition name="fade-out">
+      <NotifyBonusPointReachedLimit v-if="isShowNotifyBonusPointReachedLimit" />
+    </transition>
+
     <GameRule
       v-show="isShowRule"
       game-title="企业翻翻看"
@@ -110,6 +116,7 @@ import { shuffle } from 'lodash'
 import PairUpOver from '@/components/PairUpOver.vue'
 import { addScore, getScore } from '@/api.js'
 import GameRule from '@/components/GameRule.vue'
+import NotifyBonusPointReachedLimit from '@/components/NotifyBonusPointReachedLimit.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -156,13 +163,7 @@ const timeCountForShow = computed(() => {
  * 本次游戏积分
  */
 const bonusPoint = ref(0)
-const bonusPointForShow = computed(() => {
-  if (!store.state.ifScoreLimitReached) {
-    return bonusPoint.value
-  } else {
-    return `已达本日上限${store.state.scoreLimit}分`
-  }
-})
+
 /**
  * 本次游戏识别企业数
  */
@@ -297,7 +298,7 @@ function onClickCard(card, cardIdx) {
         if (cardList.value.every((item) => {
           return item.isDone
         })) {
-          if (store.state.loginStatus) {
+          if (store.state.loginStatus && !store.state.ifScoreLimitReached) {
             bonusPoint.value += store.state.gameRuleList[2].score
           }
           setCardList()
@@ -319,6 +320,14 @@ function onClickCard(card, cardIdx) {
     }, 400)
   }
 }
+
+const isShowNotifyBonusPointReachedLimit = ref(false)
+if (store.state.ifScoreLimitReached && !isOver.value) {
+  isShowNotifyBonusPointReachedLimit.value = true
+  setTimeout(() => {
+    isShowNotifyBonusPointReachedLimit.value = false
+  }, 2000)
+}
 </script>
 
 <style lang="less" scoped>

game/src/views/PlantTree.vue

@@ -130,9 +130,14 @@
           alt=""
           draggable="false"
         >
-        <span class="number">{{ bonusPointForShow }}</span>
+        <span class="number">{{ bonusPoint }}</span>
       </div>
     </div>
+
+    <transition name="fade-out">
+      <NotifyBonusPointReachedLimit v-if="isShowNotifyBonusPointReachedLimit" />
+    </transition>
+
     <GameRule
       v-show="isShowRule"
       game-title="乡村林场"
@@ -152,6 +157,7 @@ import { showDialog } from 'vant'
 import { shuffle } from 'lodash'
 import { addScore, getScore } from '@/api.js'
 import GameRule from '@/components/GameRule.vue'
+import NotifyBonusPointReachedLimit from '@/components/NotifyBonusPointReachedLimit.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -174,13 +180,7 @@ const isShowRule = ref(false)
  * 游戏逻辑
  */
 const bonusPoint = ref(0)
-const bonusPointForShow = computed(() => {
-  if (!store.state.ifScoreLimitReached) {
-    return bonusPoint.value
-  } else {
-    return `已达本日上限${store.state.scoreLimit}分`
-  }
-})
+
 const toolList = ref([
   {
     toolIdx: 0,
@@ -277,12 +277,20 @@ function onClickTool(toolIdx) {
   } else {
     if (currentStepIdx.value < stepList.length - 1) {
       currentStepIdx.value++
-      if (store.state.loginStatus) {
+      if (store.state.loginStatus && !store.state.ifScoreLimitReached) {
         bonusPoint.value += store.state.gameRuleList[0].score
       }
     }
   }
 }
+
+const isShowNotifyBonusPointReachedLimit = ref(false)
+if (store.state.ifScoreLimitReached && !isOver.value) {
+  isShowNotifyBonusPointReachedLimit.value = true
+  setTimeout(() => {
+    isShowNotifyBonusPointReachedLimit.value = false
+  }, 2000)
+}
 </script>
 
 <style lang="less" scoped>