menduner/src/views/recruit/personal/PersonalCenter/memberBenefits/taskCenter/components/suggest.vue

<!-- 推荐任务 -->
<template>
  <div>
    <div class="d-flex align-center justify-space-between">
      <div class="resume-title my-5">{{ $t('taskCenter.suggestTask') }}</div>
      <v-btn prepend-icon="mdi-refresh" color="primary" variant="text" class="mr-4" @click="getRecommendTaskList">刷新</v-btn>
    </div>
    <div v-if="list.length">
      <v-progress-linear v-if="loading" color="primary" height="6" indeterminate rounded></v-progress-linear>
      <div v-for="(item, index) in list" :key="'suggest' + index">
        <div class="d-flex ml-2 my-5">
          <div class="ellipsis" style="width: 50%;">{{ item.title }}</div>
          <div class="ellipsis d-flex" style="width: calc(50% - 88px);">
            <svg-icon class="mx-1" name="integral" size="24"></svg-icon>
            <span style="color: #10897bad;">{{ item.point }}</span>
          </div>
          <v-chip label :color="item.complete ? 'success' : 'error'">{{ item.complete ? '已完成' : '未完成' }}</v-chip>
        </div>
      </div>
    </div>
    <Empty v-else :elevation="false"></Empty>
  </div>
</template>

<script setup>
defineOptions({name: 'personal-taskCenter-suggest'})
import { ref } from 'vue'
import { getTaskList } from '@/api/integral'

const loading = ref(false)
const list = ref([])

// 推荐任务列表
const getRecommendTaskList = async () => {
  loading.value = true
  try {
    const data = await getTaskList({ mark: '推荐任务', type: 0 })
    list.value = data
  } finally {
    loading.value = false
  }
}
getRecommendTaskList()
</script>

<style lang="scss" scoped>
</style>