fix:bug

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

@@ -10,10 +10,11 @@
             :src="props.playLoading ? staticImg.trumptGif : staticImg.trumptPng" 
           />
         </view>
-        <view class="tip ">
+        <view class="tip " :key="props.cardDesc">
           <scroll-view
             scroll-y
-            :style="{height: '72rpx'}"
+            :style="{height: '88rpx',
+            }"
           >
             {{props.cardDesc ? props.cardDesc : "加載中"}}
           </scroll-view>
@@ -34,21 +35,22 @@
       class="mark-button" 
       :style="{ 
         width: 357 * rate + 'rpx', 
-        height: 466 * rate + 'rpx', 
+        height: 466 * rate + 'rpx',
         top: 102 * rate + 'rpx',
-        left: '50%', transform: 'translateX(-50%)'
+        left: '50%', 
+        transform: 'translateX(-50%)'
      }" 
     >
       <view
         v-for="item in props.board.buttons"
         class="movable-image" 
         :style="{
-          willChange: 'transform', 
           top: Number(item.y) * rate + 'rpx', 
           left: Number(item.x) * rate + 'rpx',
           width: 46 * rate + 'rpx', 
           height: 46 * rate + 'rpx',
-          backgroundColor: item.color,
+          backgroundColor: colorMap.get(item.color),
+          scale: 0.7,
           borderRadius: '50%'
         }"  
       />
@@ -105,7 +107,8 @@
 import { defineProps, reactive, ref, computed, getCurrentInstance, defineEmits } from 'vue'
 import { useStaticImg, useSchedulerOnce, useQueryElInfo, useAdaptationIpadAndPhone } from '@/hooks/index'
 import type { CardModeEnum } from '@/enum/constant';
-import { useCalcStartStore, useCalcQuantityStore } from '@/store/index';
+import { useCalcQuantityStore } from '@/store/index';
+import { AudioController } from '@/controller/AudioController';
 
 interface Buttons {
   id: number,
@@ -131,8 +134,6 @@ interface IProps {
 
 const staticImg = useStaticImg()
 
-const calcStartStore = useCalcStartStore()
-
 const adaptatio = useAdaptationIpadAndPhone()
 
 const calcQuantityStore = useCalcQuantityStore()
@@ -148,10 +149,17 @@ const state = reactive({
   totalQuantity: 0 // 总数量 （移动按钮数量)
 })
 
+const colorMap = new Map([
+  ['red', '#FF0002'],
+  ['blue', '#0061B4'],
+  ['purple', '#A764AB'],
+  ['yellow', '#FFD800'],
+  ['green', '#008D46'],
+  ['orange', '#FF7F00'],
+])
 
-const boardUrl = props.cardType == 1 ? staticImg.boardSix : staticImg.boardFour
 
-calcStartStore.total = props.cardType == 1 ? 6 : 4
+const boardUrl = props.cardType == 1 ? staticImg.boardSix : staticImg.boardFour
 
 const ansRef = ref<UniApp.NodeInfo>()
 const quesRef = ref<UniApp.NodeInfo>()
@@ -188,14 +196,17 @@ const getButtonPosByIndex = (index: number) => {
   return { x, y }
 }
 
+
 // 几钮模板
 const copies = props.cardType === 0 ? 4 : 6
 
-const VSpace = props.cardType === 0 ? 23 * rate * unit + 46 * rate * unit : 6 * rate * unit + 46 * rate * unit
+const buttonWidth = 46 * windowWidth / 375 * baseRatio
+
+const VSpace = props.cardType === 0 ?Math.floor(windowWidth / 375 * 26) * baseRatio + buttonWidth : Math.floor(windowWidth / 375 * 8) * baseRatio + buttonWidth
 
 const Y = 435 * rate
 
-const getX = (index: number) => index * VSpace + 13 * rate * unit
+const getX = (index: number) => index * VSpace + Math.floor(windowWidth / 375 * 11) * baseRatio
 
 // 注意一下四钮 用哪几个颜色的按钮
 let buttons = reactive<Buttons[]>([
@@ -293,9 +304,11 @@ const checkAns = (index: number, itemData: Buttons) => {
   if (targetData[index].ans === itemData.color) {
     itemData.ans = targetData[index].color
     calcQuantityStore.correctQuantity++
+    AudioController.playCorrect()
   } else { // 移动到了錯誤位置
 
-    calcStartStore.wrongCount++
+    AudioController.playWrong()
+    calcQuantityStore.wrongCount++
 
     itemData.ans = null
 
@@ -445,6 +458,7 @@ const checkAns = (index: number, itemData: Buttons) => {
     position: absolute;
     top: 0px;
     left: 0px;
+    z-index: 29;
     .movable-image {
       position: absolute;
       width: 92rpx;
@@ -462,9 +476,9 @@ const checkAns = (index: number, itemData: Buttons) => {
     top: 192rpx;
     left: 50%;
     transform: translateX(-50%);
+    z-index: 30;
     touch-action: none;
     left: 0px;
-    z-index: 30;
     -moz-transform: none;
     -webkit-transform: none;
     -o-transform: none;
@@ -528,4 +542,10 @@ const checkAns = (index: number, itemData: Buttons) => {
   }
 }
 
+
+/deep/ .uni-scroll-view-content {
+  display: flex;
+  align-items: center;
+}
+
 </style>

src/components/navbar/navbar.vue

@@ -1,7 +1,10 @@
 <template>
-  <view class="navbar" :style="{height: navbarInfo.height}" >
+  <view class="navbar" :style="{height: navbarInfo.height}"  >
     <view class="deco" >
       <view class="content" :style="contentStyles" >
+        <view class="back-icon" @click="goback">
+          <img :src="staticImg.arowLeft" alt="">
+        </view>
         <view class="level-count">
           <view
             class="level-dot"
@@ -37,12 +40,18 @@ interface IPorps {
 
 const props = defineProps<IPorps>()
 
+console.log(navbarInfo.height);
+
 const contentStyles = {
   height: navbarInfo.contentHeight,
   top: navbarInfo.top,
   left: navbarInfo.left
 }
 
+const emit = defineEmits(['goback'])
+
+const goback = () => emit('goback')
+
 
 </script>
 
@@ -61,12 +70,22 @@ const contentStyles = {
       display: flex;
       align-items: center;
       position: absolute;
+      .back-icon {
+        width: 24rpx;
+        height: 40rpx;
+        margin-right: 13px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
       .level-count {
         background: #FAA400;
         box-shadow: inset 0px 2rpx 6rpx 0px rgba(162,76,0,0.25);
         border-radius: 200rpx;
         padding: 16rpx 20rpx;
-        display: inline-block;
+        display: flex;
+        align-items: center;
         box-sizing: border-box;
         margin-right: 52rpx;
       .level-dot {

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

@@ -1,22 +1,22 @@
 <template>
   <view class="rive-ani" id="rive-ani" v-if="state.comVisable" >
-    <view class="coin-total" >
+    <view class="coin-total" :style="{top: navbarInfo.top }" >
+      <span>{{wisdomCoinStore.total || 0}}</span>
       <view class="coin-logo" id="coin-logo" :animation="state.heartbeatAni" >
         <img :src="staticImg.coinTotal" alt="">
       </view>
-      <span>{{wisdomCoinStore.total}}</span>
     </view>
-    <view class="coin-ani" id="coin-ani"  v-if="state.visible"  >
-      <view
-        class="coin-item"
-        v-for="item in state.cointCount"
-        :key="item"
-        :animation="state.animation[item - 1]"
-        :id="`coin-item-${item}`"
-      >
-        <img  :src="staticImg.coinAni" alt=""   >
-      </view>
-      <view class="coin-count" id="coin-count" >+ {{state.cointCount}}</view>
+    <view class="coin-ani" id="coin-ani" v-if="state.visible"  >
+        <view
+          class="coin-item"
+          v-for="item in state.cointCount" 
+          :key="item"
+          :animation="state.animation[item - 1]"
+          :id="`coin-item-${item}`"
+        >
+          <img  :src="staticImg.coinAni" alt=""   >
+        </view>
+      <view class="coin-count" id="coin-count"   >+ {{state.cointCount}}</view>
     </view>
   </view>
 </template>
@@ -25,8 +25,9 @@
 <script setup lang="ts" name="rive " >
 import { onMounted, ref, reactive, getCurrentInstance, defineExpose, nextTick} from 'vue'
 import { Rive } from "@rive-app/canvas"
-import { useStaticImg, useQueryElInfo, useSchedulerOnce } from '@/hooks/index'
+import { useStaticImg, useQueryElInfo, useSchedulerOnce, useNavbarInfo } from '@/hooks/index'
 import { useWisdomCoinStore } from '@/store'
+import { AudioController } from '@/controller/AudioController';
 
 enum AniEnum {
   'one',
@@ -50,7 +51,8 @@ interface State {
   visible: boolean,
   heartbeatAni: any,
   cointCount: number,
-  comVisable: boolean
+  comVisable: boolean,
+  cardType: 0 | 1
 }
 
 const state = reactive<Partial<State>>({
@@ -58,13 +60,16 @@ const state = reactive<Partial<State>>({
   visible: false,
   heartbeatAni: null,
   cointCount: 0,
-  comVisable: false
+  comVisable: false,
+  cardType: 0
 })
 
 const staticImg = useStaticImg()
 
 const wisdomCoinStore = useWisdomCoinStore()
 
+const navbarInfo = useNavbarInfo()
+
 const emit = defineEmits(['onEnd'])
 
 const coinLoginRef = ref()
@@ -89,34 +94,35 @@ const initRive = () => {
 
   const canvas = document.createElement('canvas')
 
-  canvas.width = 1000
-  canvas.height = 1000
+  canvas.width = 375
+  canvas.height = 375
 
   canvas.id = 'rive-canvas'
 
   canvas.style.position = 'absolute'
-  canvas.style.top = '50%'
-  canvas.style.left = '45%'
-  canvas.style.transform = 'translate(-50%, -50%)'
   
   document.getElementById('rive-ani')?.appendChild(canvas)
   
   rive = new Rive({
-    src: "https://res-game.luojigou.vip/coin1.riv",
+    src: "https://res-game.luojigou.vip/coin1234.riv",
     canvas: canvas,
     autoplay: false,
     stateMachines: "bumpy",
-    artboard: 'six-xing',
+    artboard: state.cardType === 0 ? 'si-xing' : 'six-xing',
     onLoad: () => {
+      
       rive.resizeToCanvas()
-      rive.play(AniEnum[state.cointCount!])
+      rive.play(AniEnum[state.cointCount! - 1])
+      
+      // AudioController.playCoinLight()
+      
     },
     onStop: () => {
       fadeOutRive()
       useSchedulerOnce(() => {
         state.visible = true
-        useSchedulerOnce(() => document.getElementById('coin-count')!.style.display = 'none', 800)
-        useSchedulerOnce(() => goBezier(), 1000)
+        useSchedulerOnce(() => document.getElementById('coin-count')!.style.display = 'none', 1200)
+        useSchedulerOnce(() => goBezier(), 1400)
       }, 1000)
       
     }
@@ -127,12 +133,12 @@ const initRive = () => {
 const createAnimationStep = (animation: UniApp.Animation, count: number) => {
 
   for (let i = 0; i < count; i++) {
-    state.animation.push(animation.step({duration: 1000 + i * 600}).export())
+    state.animation.push(animation.step({duration: 400 + i * 200}).export())
     useSchedulerOnce(() => {
       wisdomCoinStore.total ++
       document.getElementById(`coin-item-${i + 1}`)!.style.display = 'none'
       state.heartbeatAni = initHeartbeatAni()
-    }, 1000 + i * 600)
+    }, 400 + i * 200)
   }
 
 }
@@ -152,7 +158,7 @@ const goBezier = () => {
   });
 
   animation
-  .top(coinLoginRef.value.top)
+  .top(coinLoginRef.value.top )
   .left(coinLoginRef.value.left)
   .scale(0.25, 0.25)
 
@@ -167,9 +173,17 @@ const goBezier = () => {
 
 }
 
-const start = (starCount: number) => {
+const start = (starCount: number, cardType: 0 | 1) => {
+
   state.comVisable = true
   state.cointCount = starCount
+  state.cardType = cardType
+
+  if (cardType === 0) {
+    starCount <= 2 ? AudioController.playFail() : AudioController.playPass() 
+  } else {
+    starCount <= 3 ? AudioController.playFail() : AudioController.playPass() 
+  }
   useSchedulerOnce(initRive)
   
   nextTick(() => useQueryElInfo('#coin-logo', (res) => coinLoginRef.value = res, getCurrentInstance()!, false))
@@ -186,8 +200,6 @@ defineExpose({
 
 onMounted(() => {
 
-  
-
 })
 
 
@@ -203,7 +215,7 @@ onMounted(() => {
   top: 0;
   left: 0;
   z-index: 200;
-  background-color: rgba(0,0,0,.2);
+  background-color: rgba(0,0,0, .6);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -212,13 +224,13 @@ onMounted(() => {
     background: #414141;
     border-radius: 19px;
     position: absolute;
-    top: 18px;
     right: 26px;
     display: flex;
     align-items: center;
     padding: 0 8px;
     box-sizing: border-box;
     .coin-logo {
+      margin-left: 6px;
       img {
         width: 20px;
         height: 20px;
@@ -231,7 +243,7 @@ onMounted(() => {
       font-family: PingFangSC-Semibold, PingFang SC;
       font-weight: 600;
       color: #FEFBFB;
-      margin-left: 6px;
+      
       display: block;
     }
   }
@@ -249,6 +261,16 @@ onMounted(() => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      animation: jelly 0.5s;
+      transform-origin: top center;
+    }
+    @keyframes jelly {
+      0% {
+        scale: 0;
+      }
+      100% {
+        scale: 1;
+      }      
     }
     img {
       width: 152rpx;

src/controller/AudioController.ts

@@ -0,0 +1,37 @@
+import { useAudioMange } from '@/hooks/index'
+
+const audioMange = useAudioMange()
+
+export class AudioController {
+
+  static wrongUrl = `https://res-game.luojigou.vip/wrong.mp3`
+
+  static correntUrl = 'https://res-game.luojigou.vip/correct.mp3'
+
+  static coinLight = 'https://res-game.luojigou.vip/coin-light.mp3'
+
+  static pass = 'https://res-game.luojigou.vip/pass.MP3'
+
+  static fail = 'https://res-game.luojigou.vip/fail.MP3'
+
+  static playCorrect () {
+    audioMange.play(AudioController.correntUrl)
+  }
+
+  static playWrong () {
+    audioMange.play(AudioController.wrongUrl)
+  }
+
+  static playCoinLight () {
+    audioMange.play(AudioController.coinLight)
+  }
+
+  static playPass () {
+    audioMange.play(AudioController.pass)
+  }
+
+  static playFail () {
+    audioMange.play(AudioController.fail)
+  }
+
+}

src/global.d.ts

@@ -12,7 +12,9 @@ declare global {
     getToken: {
       postMessage: (params?: string) => void,
     },
-    returnToken: (token: string) => void
+    returnToken: (token: string) => void,
+    statusBarHeight: number,
+    navigatorBarHeight: number
   }
 }
 

src/hooks/app.ts

@@ -10,7 +10,7 @@ export const useAppBridge = () => {
 
   const _push = (path: string) => window.navAppPage.postMessage(JSON.stringify({ route: path }))
 
-  const _back = (path: string) => window.popPage.postMessage(path)
+  const _back = (path: string = '') => window.popPage.postMessage(path)
   
   const _getToken = () => {
     window.returnToken = token => useUserStore().token = token

src/hooks/index.ts

@@ -80,14 +80,18 @@ export const useSchedulerOnce = (
 export const useNavbarInfo = () => {
 
   const { uniPlatform, safeArea , ...systemInfo} = uni.getSystemInfoSync()
+
+  console.log(uniPlatform,  window['navigatorBarHeight'], window['statusBarHeight']);
   
   if (uniPlatform == "web") {
-
+    const statusBarHeight = window['statusBarHeight'] ? window['statusBarHeight'] * 2 : 33
     return {
-      height: "140rpx",
+      height: 140 + statusBarHeight  + "rpx",
       contentHeight: '64rpx',
-      top: '38rpx',
-      left: '40rpx'
+      top: 38 + statusBarHeight + 'rpx',
+      left: '40rpx',
+      safeAreaTop: statusBarHeight + 'rpx',
+      statusBarHeight: statusBarHeight
     }
   
   } else {
@@ -99,7 +103,9 @@ export const useNavbarInfo = () => {
       height: 104 + 'px',
       contentHeight: bounding.height + (bounding.top - systemInfo.statusBarHeight!) * 2 + "px",
       top: systemInfo.statusBarHeight!  + "px",
-      left: '20px'
+      left: '20px',
+      safeAreaTop: 0 + 'rpx',
+      statusBarHeight: 0
     }
   }
 
@@ -143,6 +149,10 @@ export const useAudioMange = (src?: string) => {
 
   const destroy = () => audioInstance.value?.stop()
 
+  const repeat = () => {
+    
+  }
+
   const play = (src: string) => {
     audioInstance.value!.src = src
     audioInstance.value?.play()
@@ -157,7 +167,7 @@ export const useAudioMange = (src?: string) => {
   const atx = {
     destroy,
     play,
-    onplayend
+    onplayend,
   }
 
   return atx
@@ -189,10 +199,10 @@ export const useAdaptationIpadAndPhone = () => {
 
   const rate = windowWidth / windowHeight
   
-  if ( rate > 0.6 ) {
+  if ( rate > 0.6 ) { // 大于0.6 说明是平板
     return 667 / ( windowHeight )
   } else {
-    return 1 
+    return 1
   }
 
 }

src/pages/GameView/index.vue

@@ -4,7 +4,8 @@
     id="game-view"
     :style="`pointer-events: ${state.mode === CardModeEnum.PREVIEW ? 'none' : 'all'}`"
   >
-    <navbar 
+    <navbar
+      @goback="goback"
       :="{
         ...navbarState,
         levelCount: state.cardIds.length
@@ -26,7 +27,7 @@
 
     </view>
 
-    <rive-ani ref="riveAniRef" />
+    <rive-ani ref="riveAniRef" :key="navbarState.progress" />
 
   </view>
 </template>
@@ -38,10 +39,11 @@ import { onLoad } from '@dcloudio/uni-app';
 import { reactive, onMounted } from 'vue'
 import { getCardDetailById, submitlearnPortAns } from '@/api/card'
 import { getCollectionDetailById } from '@/api/collection'
-import { useAudioMange, useScheduler, useBase64, useSchedulerOnce } from '@/hooks/index'
+import { useAudioMange, useScheduler, useBase64, useSchedulerOnce, usePlatform } from '@/hooks/index'
 import { usePracticeStore, useOpraRecordStore, useGameCountdownStore, useCalcQuantityStore, useWisdomCoinStore } from '@/store'
 import riveAni from '@/components/rive-ani/rive-ani.vue';
 import { ref } from 'vue';
+import { useAppBridge } from '@/hooks/app';
 
 
 
@@ -74,7 +76,6 @@ const gameCountdownStore = useGameCountdownStore()
 const calcQuantityStore = useCalcQuantityStore()
 
 const wisdomCoinStore = useWisdomCoinStore()
-
 const base64 = useBase64()
 
 onLoad(query => {
@@ -82,10 +83,13 @@ onLoad(query => {
   let options
   if (import.meta.env.MODE !== "development") {
     state.queryParams = base64.decode<API.P>(query!.p)
+    state.opraMode = state.queryParams.data.opraMode
     options = state.queryParams.data
   } else {
-    state.queryParams = base64.decode<API.P>(query!.p)
-    options = state.queryParams.data
+    // state.queryParams = base64.decode<API.P>(query!.p)
+    console.log(query);
+    
+    options = query!
   }
   console.log(state.queryParams);
   
@@ -96,8 +100,6 @@ onLoad(query => {
   wisdomCoinStore.total = options.userWisdomCoin
   wisdomCoinStore.remainderWisdomCoin = options.remainderWisdomCoin
 
-
-
 })
 
 const riveAniRef = ref()
@@ -137,7 +139,7 @@ const stx = useScheduler(() => {
 
 // 控制游戏开始
 const gameStart = () => {
-  navbarState.countdownTotal = 5
+  navbarState.countdownTotal = 10
   stx.start()
   playAudio()
 }
@@ -146,28 +148,21 @@ const gameStart = () => {
 const onSubmitCard = async () => {
   
   stx.stop()
-
+  
   // 触发做题完成的动画
-  await riveAniRef.value.start(3)
+  await riveAniRef.value.start(calcQuantityStore.getStar(), state.card?.cardType)
 
-  wisdomCoinStore.itemCoin += 3
-  console.log({
-    correctQuantity: calcQuantityStore.correctQuantity,
-    totalQuantity: calcQuantityStore.totalQuantity,
-    capability: state.card?.cardAble
-  });
+  wisdomCoinStore.itemCoin += calcQuantityStore.getStar()
   
   // 保存做题记录
   opraRecordStore.push({
-    ...calcQuantityStore,
+    correctQuantity: calcQuantityStore.correctQuantity,
+    totalQuantity: calcQuantityStore.totalQuantity,
     capability: state.card?.cardAble
   })
 
   // 保存做题时间
-  gameCountdownStore.sum(60 - navbarState.countdownTotal)
-
-  console.log("opraRecordStore:", opraRecordStore, navbarState.progress);
-  
+  gameCountdownStore.sum(navbarState.countdownTotal - navbarState.countdownTotal)
 
   // 触发游戏结束
   if (navbarState.progress == state.cardIds.length) {
@@ -183,13 +178,15 @@ const onSubmitCard = async () => {
   if (state.opraMode == OpraModeEnum.PRACTICE) {
 
     // state.cardId
-
+ 
   } else {
     navbarState.progress++
 
     state.cardId = state.cardIds[navbarState.progress - 1]
   }
 
+  calcQuantityStore.clear()
+  
   GetCardDetailById()
 }
 
@@ -202,9 +199,9 @@ const gameCompleted = async () => {
       "recordId": state.queryParams?.attach.recordId
     },
     "data": {
-      "correctQuantity": opraRecordStore.totalCorrectQuantity,
+      "correctQuantity": opraRecordStore.totalCorrectQuantity(),
       "gameDuration": gameCountdownStore.get(),
-      "totalQuantity": opraRecordStore.totalQuantity,
+      "totalQuantity": opraRecordStore.totalQuantity(),
       "userCardAnswerList": opraRecordStore.get(),
       "winWisdomCoin": gameCountdownStore.get()
     }
@@ -212,11 +209,12 @@ const gameCompleted = async () => {
 
   const data = await submitlearnPortAns($par, state.queryParams?.submitUrl!)
 
+  
   opraRecordStore.clear()
   // 如果opraMode 的是learn 则跳转到app-web页面
-  // if (state.opraMode == OpraModeEnum.LEARN) {
-  window.location.href = `https://nginx.test.luojigou.vip/app_web/learn-plan.html#/?from='exercise'`
-  // }
+  if (state.opraMode == OpraModeEnum.LEARN) {
+    window.location.href = `https://nginx.test.luojigou.vip/app_web/learn-plan.html#/?from='exercise'`
+  }
   
 }
 
@@ -252,6 +250,16 @@ const GetCardDetailById = async () => {
 }
 
 
+// 返回上一级菜单 学习计划是返回 app 大赛是返回上一级路由
+const goback = () => {
+  if (usePlatform() == 'web') {
+    useAppBridge().back()
+  } else {
+    // 返回上一级路由
+  }
+}
+
+
 onMounted(async () => {
 
   if (state.mode === 'preview') {
@@ -282,6 +290,7 @@ onMounted(async () => {
     padding-top: 23px;
     display: flex;
     justify-content: center;
+    
   }
 }
 </style>

src/store/gameTool.ts

@@ -1,10 +1,12 @@
 import { ConstantLocalStorage } from '@/utils/constant'
 import { ConstantStore } from '@/utils/constant'
 import { defineStore } from 'pinia'
+import { toRefs } from 'vue'
 import { reactive } from 'vue'
 import { useSessionStorageState } from 'vue-hooks-plus'
 
 
+
 /**
  * 计算时间的store
  */
@@ -40,12 +42,20 @@ export const useCalcStartStore = defineStore(ConstantStore.STAR, () => {
 
   const _get = () => {
     const r = state.total - state.wrongCount
+    console.log("state.wrongCountP:", state.wrongCount);
+    
     return r <= 0 ? 1 : r
   }
 
+  function _clear () {
+    state.wrongCount = 0
+    state.total = 0
+  }
+
   return {
-    ...state,
-    get: _get
+    ...toRefs(state),
+    get: _get,
+    clear: _clear
   }
 
 })
@@ -55,11 +65,25 @@ export const useCalcQuantityStore = defineStore(ConstantStore.QUANTITY, () => {
 
   const state = reactive({
     correctQuantity: 0,
-    totalQuantity: 0
+    totalQuantity: 0,
+    wrongCount: 0
   })
 
+  const _getStar = () => {
+    const r = state.totalQuantity - state.wrongCount
+    console.log("state.wrongCountP:", state.wrongCount);
+    return r <= 0 ? 1 : r
+  }
+
+
   return {
-    ...state
+    ...toRefs(state),
+    getStar: _getStar,
+    clear: () => {
+      state.correctQuantity = 0
+      state.totalQuantity = 0
+      state.wrongCount = 0
+    }
   }
 
 })
@@ -78,8 +102,10 @@ export const useWisdomCoinStore = defineStore(ConstantStore.WISDOMCOIN, () => {
 
   const _set = (record: number) => state.total = record
 
-  // 增加智慧币， 按照错误与正确的规则增加
-  const _add = ( ) => {}
+  // 增加智慧币, 按照错误与正确的规则增加
+  const _add = ( ) => {
+
+  }
 
   return {
     ...state,

src/store/opraRecords.ts

@@ -16,9 +16,15 @@ export const useOpraRecordStore = defineStore(ConstantStore.OPRARECORDS, () => {
 
   const _get = () => state.value
 
-  const _correctQuantityTotal = state.value?.length && state.value?.map( item => item.correctQuantity).reduce( (pre, next) => pre + next )
+  const _correctQuantityTotal = () => {
 
-  const _totalQuantity =  state.value?.length && state.value?.map( item => item.totalQuantity).reduce( (pre, next) => pre + next )
+    console.log("state.value?.length:", state.value?.length);
+    
+
+    return state.value?.length && state.value?.map( item => item.correctQuantity).reduce( (pre, next) => pre + next )
+  }
+
+  const _totalQuantity = () => state.value?.length && state.value?.map( item => item.totalQuantity).reduce( (pre, next) => pre + next )
  
   return {
     push: _push,

src/utils/static.ts

@@ -17,6 +17,8 @@ import step5 from '@/assets/9-12.png'
 import coinTotal from '@/assets/coin-total.png'
 import coinAni from '@/assets/coin-ani.png'
 import successFlag from '@/assets/success-flag.png'
+import arowRight from '@/assets/arow_right.png'
+import arowLeft from '@/assets/arowLeft.png'
 
 
 
@@ -63,7 +65,9 @@ export interface StaticImg {
   patternBg: string,
   coinTotal: string,
   coinAni: string,
-  successFlag: string
+  successFlag: string,
+  arowRight: string,
+  arowLeft: string
 }
 
 let staticImg: Partial<StaticImg> = {
@@ -89,7 +93,9 @@ let staticImg: Partial<StaticImg> = {
   trumptDog: "https://app-resources-luojigou.luojigou.vip/Fgh59QZy8NO8qG9f8sXMU4Xv4SKW",
   coinTotal,
   coinAni,
-  successFlag
+  successFlag,
+  arowRight,
+  arowLeft
 }