app_web/src/pages/LearnPlan/components/LearnPlanButton.vue

<template>
  <div class="learn-plan-button" @click="goPage" :style="styles" >
    <div class="icon" >
      <img :src="icon" alt="">
    </div>
    <div class="name" >
      <span style="" >{{title}} </span>
      <span v-if="props.type == 'forward'">{{countDown}}s </span>
    </div>
  </div>
</template>

<script lang="ts" setup >

import { defineProps, ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useScheduler } from '@/hook/index'

const staticImg = {
  forward: require('@LP/assets/forward.png'),
  reload: require('@LP/assets/reload.png')
}

interface IProps {
  title: string,
  type: 'normal' | 'forward',
  goPage: () => void
}

const router = useRouter()

const props = defineProps<IProps>()

const emit = defineEmits(['click'])

const title = ref<string>('')

const countDown = ref<number>(5)

const icon = ref<string>('')

const styles = props.type === 'normal' ? { background: '#fff', color: '#FF8A3F' } : { background: '#FF8A3F', color: '#fff' }

onMounted(() => {
  console.log('onMounted')
  title.value = props.title

  if (props.type === 'normal') {
    icon.value = staticImg.reload
  } else {
    icon.value = staticImg.forward
    countDownFn()
  }
})

onUnmounted(() => {
  console.log('onUnmounted')
})

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

  stx.start()
}

const goPage = () => props.goPage()

</script>

<style scoped lang="scss" >
.learn-plan-button {
  width: 159px;
  height: 50px;
  border-radius: 15px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 29px;
  .icon {
    margin-right: 8px;
    img {
      width: 26px;
      height: 29px;
      display: block;
    }
  }
}
</style>