fix: rive效果

src/components/luojigou-board/luojigou-board.vue

@@ -239,20 +239,15 @@ const touchend = (ev: TouchEvent, item: Buttons) => {
 
   const { x: itemX, y: itemY } = TPos(ev.changedTouches[0].pageX, ev.changedTouches[0].pageY)
 
-  console.log("itemY:", itemY);
-  
-
   // 返回原点 (没有放在答案区， 按钮回到初始位置)
   if (itemX < quesRef.value?.width! || itemY > ansRef.value?.height! ) {
     disPatchButtonGoInitPos(item.id)
   } else  {
   
-    const index = getButtonIndex(itemY)
+    const index = getButtonIndex(itemY <= 0 ? 0 : itemY)
 
-    console.log('index:', index);
-    
-    
     const { x: targetX, y: targetY } = getButtonPosByIndex(index)
+    console.log(item.x , targetX , item.y, targetY);
     
     //  直接点击答案区的按钮，答案区按钮回到初始位置
     if (item.x == targetX && item.y == targetY) {

src/components/navbar/navbar.vue

@@ -5,14 +5,14 @@
         <view class="level-count">
           <view
             class="level-dot"
-            v-for="item in state.levelCount"
+            v-for="item in props.levelCount"
             :key="item"
-            :style="{backgroundColor: item <= state.progress ? '#1191E7' : '#FFCC6A' }"
+            :style="{backgroundColor: item <= props.progress ? '#1191E7' : '#FFCC6A' }"
           />
         </view>
         <view class="countdown" >
           <image :src="staticImg.clock" />
-          {{state.countdownTotal}}
+          {{props.countdownTotal}}
         </view>
       </view>
     </view>
@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts" setup name="navbar" >
-import { reactive, defineProps } from "vue"
-import { useNavbarInfo, useScheduler, useStaticImg } from '@/hooks/index';
-import { CardModeEnum } from "@/enum/constant";
+import { defineProps } from "vue"
+import { useNavbarInfo, useStaticImg } from '@/hooks/index';
+import type { CardModeEnum } from "@/enum/constant";
 
 const navbarInfo = useNavbarInfo()
 
@@ -35,29 +35,8 @@ interface IPorps {
   countdownTotal: number // 倒计时总时间
 }
 
-const initProps: IPorps = reactive({
-  levelCount: 5,
-  progress: 1,
-  countdownTotal: 60,
-  mode: CardModeEnum.PREVIEW
-})
-
 const props = defineProps<IPorps>()
 
-const state = reactive<IPorps>(props)
-
-const stx = useScheduler(() => {
-  state.countdownTotal--
-  if (state.countdownTotal <= 0) {
-    stx.stop()
-  }
-}, 1000)
-
-
-if (state.mode === CardModeEnum.OPRA) {
-  stx.start()
-}
-
 const contentStyles = {
   height: navbarInfo.contentHeight,
   top: navbarInfo.top,

src/components/rive-ani/rive-ani.vue

@@ -4,9 +4,9 @@
       <view class="coin-logo" id="coin-logo" :animation="state.heartbeatAni" >
         <img :src="staticImg.coinTotal" alt="">
       </view>
-      <span>{{userStore.wisdomCoin}}</span>
+      <span>{{wisdomCoinStore.total}}</span>
     </view>
-    <view class="coin-ani" id="coin-ani"  v-show="state.visible"  >
+    <view class="coin-ani" id="coin-ani"  v-if="state.visible"  >
       <view
         class="coin-item"
         v-for="item in state.cointCount"
@@ -26,7 +26,7 @@
 import { onMounted, ref, reactive, getCurrentInstance, defineExpose, nextTick} from 'vue'
 import { Rive } from "@rive-app/canvas"
 import { useStaticImg, useQueryElInfo, useSchedulerOnce } from '@/hooks/index'
-import { useUserStore } from '@/store'
+import { useWisdomCoinStore } from '@/store'
 
 enum AniEnum {
   'one',
@@ -44,11 +44,6 @@ enum AniEnum {
  * 3. 出现金币 +n 的字样
  * 4. 金币飞到右上角金币框
  */
-
-const staticImg = useStaticImg()
-
-const userStore = useUserStore()
-
 interface State {
   rive: Rive,
   animation: any, 
@@ -66,6 +61,10 @@ const state = reactive<Partial<State>>({
   comVisable: false
 })
 
+const staticImg = useStaticImg()
+
+const wisdomCoinStore = useWisdomCoinStore()
+
 const emit = defineEmits(['onEnd'])
 
 const coinLoginRef = ref()
@@ -116,9 +115,10 @@ const initRive = () => {
       fadeOutRive()
       useSchedulerOnce(() => {
         state.visible = true
-        goBezier()
+        useSchedulerOnce(() => document.getElementById('coin-count')!.style.display = 'none', 800)
+        useSchedulerOnce(() => goBezier(), 1000)
       }, 1000)
-      useSchedulerOnce(() => document.getElementById('coin-count')!.style.display = 'none', 500)
+      
     }
   });
 
@@ -129,6 +129,7 @@ const createAnimationStep = (animation: UniApp.Animation, count: number) => {
   for (let i = 0; i < count; i++) {
     state.animation.push(animation.step({duration: 1000 + i * 600}).export())
     useSchedulerOnce(() => {
+      wisdomCoinStore.total ++
       document.getElementById(`coin-item-${i + 1}`)!.style.display = 'none'
       state.heartbeatAni = initHeartbeatAni()
     }, 1000 + i * 600)
@@ -159,8 +160,10 @@ const goBezier = () => {
 
   useSchedulerOnce(() => {
     console.log('触发emit');
-    _resolve(2)
+    _resolve()
     state.comVisable = false
+    state.visible = false
+    document.getElementById('coin-count')!.style.display = 'block'
   }, 1200 + state.cointCount! * 600)
 
 }

src/pages/GameView/index.vue

@@ -39,7 +39,7 @@ import { reactive, onMounted } from 'vue'
 import { getCardDetailById, submitlearnPortAns } from '@/api/card'
 import { getCollectionDetailById } from '@/api/collection'
 import { useAudioMange, useScheduler } from '@/hooks/index'
-import { usePracticeStore, useOpraRecordStore, useGameCountdownStore, useCalcQuantityStore } from '@/store'
+import { usePracticeStore, useOpraRecordStore, useGameCountdownStore, useCalcQuantityStore, useWisdomCoinStore } from '@/store'
 import riveAni from '@/components/rive-ani/rive-ani.vue';
 import { ref } from 'vue';
 
@@ -71,6 +71,8 @@ const gameCountdownStore = useGameCountdownStore()
 
 const calcQuantityStore = useCalcQuantityStore()
 
+const wisdomCoinStore = useWisdomCoinStore()
+
 onLoad(query => {
   const options = query as QueryParams
   state.mode = options.mode
@@ -121,15 +123,19 @@ const gameStart = () => {
 
 // 提交单张题卡数据
 const onSubmitCard = async () => {
+  
+  stx.stop()
 
   // 触发做题完成的动画
   await riveAniRef.value.start(3)
-  
+
+  wisdomCoinStore.itemCoin += 3
+
   // 保存做题记录
   opraRecordStore.push(calcQuantityStore)
 
   // 保存做题时间
-  gameCountdownStore.sum(navbarState.countdownTotal)
+  gameCountdownStore.sum(60 - navbarState.countdownTotal)
 
   // 触发游戏结束
   if (opraRecordStore.length == 5) {
@@ -140,8 +146,6 @@ const onSubmitCard = async () => {
   navbarState.progress++
 
   state.cardId = state.cardIds[navbarState.progress - 1]
-  console.log("state.cardId:", state.cardId);
-  console.log('触发接口');
 
   GetCardDetailById()
 
@@ -156,9 +160,9 @@ const gameCompleted = async () => {
       "recordId": ""
     },
     "data": {
-      "correctQuantity": 0,
-      "gameDuration": 0,
-      "totalQuantity": 0,
+      "correctQuantity": opraRecordStore.totalCorrectQuantity,
+      "gameDuration": gameCountdownStore.get(),
+      "totalQuantity": opraRecordStore.totalQuantity,
       "userCardAnswerList": opraRecordStore.get(),
       "winWisdomCoin": gameCountdownStore.get()
     }

src/store/counter.ts

@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia'
-import { constantStore } from './constant';
-
-
-
-export const useCounterStore = defineStore(constantStore.count, {
-  state: () => {
-    return { count: 0 };
-  }
-})
-
-

src/store/gameTool.ts

@@ -65,3 +65,23 @@ export const useCalcQuantityStore = defineStore(ConstantStore.QUANTITY, () => {
 })
 
 
+
+
+export const useWisdomCoinStore = defineStore(ConstantStore.WISDOMCOIN, () => {
+
+  // WisdomCoin
+  const state = reactive({
+    total: 0,  //  总的智慧币
+    itemCoin: 0 // 单次玩的智慧币
+  })
+
+  const _set = (record: number) => state.total = record
+
+  return {
+    ...state,
+    set: _set,
+  }
+
+})
+
+

src/store/index.ts

@@ -4,4 +4,9 @@ export { useUserStore } from './user'
 
 export { useOpraRecordStore } from './opraRecords'
 
-export { useGameCountdownStore, useCalcStartStore, useCalcQuantityStore } from './gameTool'
+export {
+  useGameCountdownStore,
+  useCalcStartStore,
+  useCalcQuantityStore,
+  useWisdomCoinStore
+} from './gameTool'

src/store/opraRecords.ts

@@ -16,10 +16,16 @@ export const useOpraRecordStore = defineStore(ConstantStore.OPRARECORDS, () => {
 
   const _get = () => state.value
 
+  const _correctQuantityTotal = state.value?.map( item => item.correctQuantity).reduce( (pre, next) => pre + next )
+
+  const _totalQuantity =  state.value?.map( item => item.totalQuantity).reduce( (pre, next) => pre + next )
+ 
   return {
     push: _push,
     get: _get,
     clear: _clear,
+    totalCorrectQuantity: _correctQuantityTotal,
+    totalQuantity: _totalQuantity,
     length: state.value?.length
   }
 

src/utils/constant.ts

@@ -15,5 +15,6 @@ export enum ConstantStore {
   'OPRARECORDS' = 'OPRARECORDS',
   'COUNTDOWN' = 'COUNTDOWN',
   'STAR' = 'STAR',
-  'QUANTITY' = 'QUANTITY'
+  'QUANTITY' = 'QUANTITY',
+  'WISDOMCOIN' = 'WISDOMCOIN'
 }