app_web/src/pages/LearnPlan/views/TPage/index.vue

<template>
  
  <div class="t-page-v t-page" v-if="dire == 'V'" :style="{background: `url(${staticImg.bgV})`}" >
    <div class="back-icon" >
      <img :src="staticImg.backIcon" alt="" @click="backAppPage" >
    </div>
    <div id="rive-ani"><canvas width="375" height="375"  id="rive-canvas" style="scale: 0.6;" ></canvas></div>
    <div class="countdown-container" >
      <div class="countdown" >{{countDown}}s</div>
      <div class="desc" >即将进入下一个环节</div>
    </div>
    <div class="opra" >
      <learn-plan-button :goPage="pageInfo().reload" title="再來一次" style="margin-bottom: 27px;" type="normal" />
      <learn-plan-button :goPage="pageInfo().next" :title="pageInfo().title" type="forward" />
    </div>
  </div>
  <div v-else class="t-page-h t-page" :style="{background: `url(${staticImg.bgH})`}">
    <div class="back-icon" >
      <img :src="staticImg.backIcon" alt="" @click="backAppPage" >
    </div>
    <div id="rive-ani" >
      <canvas width="200" height="200"  id="rive-canvas" style="scale: 1;" ></canvas>
    </div>
    <div class="countdown-container" >
      <div class="countdown" >{{countDown}}s</div>
      <div class="desc" >即将进入下一个环节</div>
    </div>
    <div class="opra" >
      <learn-plan-button :goPage="pageInfo().reload" style="margin-right: 25px;" title="再來一次" type="normal" />
      <learn-plan-button :goPage="pageInfo().next" :title="pageInfo().title"  type="forward" />
    </div>
  </div>
</template>

<script setup lang="ts" name="Rive">
import { ref } from 'vue'
import LearnPlanButton from '../../components/LearnPlanButton.vue'
import { useAppRouter } from '@/hook/appHook'
import { useDeviceDire, useScheduler, useSchedulerOnce } from '@/hook/index'
import { onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router"
import { Rive } from "@rive-app/canvas"
// console.log('Rive:', Rive);
// console.log(rive);

const staticImg = {
  backIcon: require('@LP/assets/back-icon.png'),
  bgH: require('@LP/assets/TPage-bg-h.png'),
  bgV: require('@LP/assets/TPage-bg-v.png')
}

const route = useRoute()

let {from} = route.query



// 来自动画游戏的 进入学一学
// 来自学一学的 进入讲一讲
// 来自讲一讲的 进入学习报告
/**  
 * {
 *  from: 'ani' | 'exercise' | 'audio' | 'report'
 * }
 */
enum FromEnum  {
  'ani' = 'ani',
  'exercise' = 'exercise',
  'audio' = 'audio',
  'report' = 'report'
}

console.log("from:", from);

if (!from) {
  from = FromEnum.ani
}

const appRouter = useAppRouter()

const [direChange] = useDeviceDire()

const dire = ref<'H' | 'V'>('V')

const countDown = ref(5)

// 1. 初始化rive动画
const initRive = () => {
console.log(document.getElementById('rive-canvas'));

const a = new Rive({
  src: "https://res-game.luojigou.vip/qiqiu2.riv",
  canvas: document.getElementById('rive-canvas'),
  autoplay: false,
  stateMachines: "bumpy",
  artboard:'reqiqiu-dog',
  onLoad: () => {
    a.resizeToCanvas()
    a.play('idle')
  },
});

}

direChange((_dire) => {
  console.log('触发了方向')
  document.documentElement.style.fontSize = '37.5px'
  dire.value = _dire
})

const [stx] = useScheduler({
  cb: () => {
    countDown.value--
    if (countDown.value <= 1) {
      stx.pause()
    }
  },
  delay: 1000
})

stx.start()

const backAppPage = () => {
  appRouter.back()
}

// 跳转

const pageInfo = () => {

  let _reload, _next, _title;
// navigateExercise
// navigateRecord
  switch (from) {
    case FromEnum.ani:
      _reload = () => appRouter.push("reloadGame")
      _next = () => appRouter.push("navigateExercise")
      _title = '练一练'
      break;
    case FromEnum.exercise:
      _reload = () => appRouter.push("reloadGame")
      _next = () => appRouter.push("navigateRecord")
      _title = '讲一讲'
      break;
    default:
      _reload = () => appRouter.push("reloadGame")
      _next = () => appRouter.push("navigateRecord")
      _title = '讲一讲'
      break;
  }



  return {
    reload: _reload,
    next: _next,
    title: _title
  }
}

onMounted(() => {
  useSchedulerOnce({cb: initRive, delay: 4})
})


</script>

<style scoped  lang="scss" >

.t-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .back-icon {
    img {
      width: 38px;
      height: 36px;
    }
  }
  .countdown-container {
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ED5D00;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .countdown {
      font-size: 24px;
    }
    .desc {
      font-size: 16px;
    }
  }
}

#rive-ani {
  width: 100vw;
  // height: 300px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}

.t-page-v {

  .back-icon {
    position: fixed;
    top: 50px;
    left: 27px;
  }

  .countdown-container {
    position: fixed;
    top: 324px;
    left: 50%;
    transform: translateX(-50%);
  }

  .opra {
    position: fixed;
    top: 421px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
  }
}

.t-page-h {
  .back-icon {
    position: fixed;
    top: 17px;
    left: 42px;
  }
  .countdown-container {
    position: fixed;
    top: 216px;
    left: 50%;
    transform: translateX(-50%);
  }
  .opra {
    position: fixed;
    top: 284px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }

}
</style>