YY_MP_REFACTOR/src/pages-task/task-detail/components/TaskDetailSummary.vue

<template>
  <view class="task-detail-summary">
    <text class="task-detail-summary__score">+{{ scoreText }} 积分</text>
    <view class="task-detail-summary__title">{{ taskTitle }}</view>
    <view class="task-detail-summary__number">任务编号：{{ taskNumber }}</view>
    <view class="task-detail-summary__time">提交时间：{{ submitTime }}</view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import type { TaskDetailResponse } from '@/services/modules/task/taskDetail/type'

import { normalizeText } from '../utils'

const props = defineProps<{
  taskDetail: TaskDetailResponse
}>()

const taskTitle = computed(() => {
  return normalizeText(
    props.taskDetail.taskInfo.taskTypeId ??
      props.taskDetail.taskInfo.taskTypeName ??
      props.taskDetail.taskType,
    '任务详情'
  )
})

const taskNumber = computed(() => {
  return normalizeText(props.taskDetail.taskInfo.taskNumber ?? props.taskDetail.taskInfo.id)
})

const submitTime = computed(() => normalizeText(props.taskDetail.taskInfo.createTime))

const scoreText = computed(() => {
  const score =
    'score' in props.taskDetail ? props.taskDetail.score : props.taskDetail.taskInfo.score

  return normalizeText(score, '0')
})
</script>

<style lang="scss" scoped>
.task-detail-summary {
  position: relative;
  padding: 32rpx;
  color: #fff;
  background: linear-gradient(135deg, #42b6f5 0%, #267ae8 100%);
  border-radius: 24rpx;
  box-shadow: 0 14rpx 34rpx rgba(47, 140, 247, 0.22);
}

.task-detail-summary__score {
  position: absolute;
  top: 32rpx;
  right: 32rpx;
  color: #fff4bd;
  font-size: 26rpx;
  font-weight: 650;
  line-height: 42rpx;
}

.task-detail-summary__title {
  min-height: 42rpx;
  padding-right: 190rpx;
  font-size: 38rpx;
  font-weight: 700;
  line-height: 52rpx;
  word-break: break-all;
}

.task-detail-summary__number,
.task-detail-summary__time {
  margin-top: 10rpx;
  font-size: 23rpx;
  line-height: 34rpx;
  opacity: 0.78;
  word-break: break-all;
}

.task-detail-summary__time {
  margin-top: 4rpx;
}
</style>