qn-ai-pc/src/views/task/components/NoviceTask/index.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { TaskList } from '../TaskList/index.ts'
import type { TaskType } from './index.d'
import { noviceTask } from '@/api/task/index'
import { useTaskListStore } from '@/store/moules/taskListStore'

const taskListStore = useTaskListStore()
const totalScore = ref(0)
const list = ref<TaskType[]>([])
const finishedTaskCount = ref(0)
function getTaskList() {
  noviceTask().then((res) => {
    list.value = res.taskCenterList
    totalScore.value = res.totalScore
    finishedTaskCount.value = res.finishedTaskCount
    taskListStore.changeNoviceTask(res.existFinishedTask)
  })
}
onMounted(() => {
  getTaskList()
})
</script>

<template>
  <TaskList title="新手任务" :list="list" :total-score="totalScore" :finished-task-count="finishedTaskCount" @update-list="getTaskList()" />
</template>

<style lang="scss" scoped>
.nvoice-task-box {
  width: 95%;
  .title {
    font-size: 14px;

    font-weight: bold;
    color: #000000;
    line-height: 22px;
    letter-spacing: 1px;
    margin: 16px 0;
  }
}
</style>