YY_MP_REFACTOR/src/pages-task/task-detail/components/sign-task-detail/SignEvaluation.vue

<template>
  <view class="sign-evaluation">
    <view class="sign-evaluation__title">拜访评价</view>
    <view v-for="row in rows" :key="row.label" class="sign-evaluation__item">
      <text>{{ row.label }}</text>
      <text
        class="sign-evaluation__result"
        :class="row.value ? 'sign-evaluation__result--yes' : 'sign-evaluation__result--no'"
      >
        {{ row.value ? '是' : '否' }}
      </text>
    </view>
  </view>
</template>

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

import type { VisitEvaluationDetail } from '@/services/modules/task/taskVisit/type'

const props = defineProps<{
  evaluation: VisitEvaluationDetail
}>()

const rows = computed(() => [
  { label: '是否针对了正确的 HCP', value: props.evaluation.rightHcp },
  { label: '是否传递了正确的信息', value: props.evaluation.rightInfo },
  { label: '活动形式和频率是否正确', value: props.evaluation.rightActivity },
])
</script>

<style lang="scss" scoped>
.sign-evaluation {
  margin: 16rpx 0 10rpx;
  padding: 18rpx 0;
  border-top: 1rpx solid #e8edf3;
  border-bottom: 1rpx solid #e8edf3;
}

.sign-evaluation__title {
  margin-bottom: 8rpx;
  color: #3f5167;
  font-size: 26rpx;
  font-weight: 650;
}

.sign-evaluation__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20rpx;
  padding: 8rpx 0;
  color: #526278;
  font-size: 24rpx;
  line-height: 36rpx;
}

.sign-evaluation__result {
  flex-shrink: 0;
  font-weight: 650;
}

.sign-evaluation__result--yes {
  color: #16a36a;
}

.sign-evaluation__result--no {
  color: #dc6262;
}
</style>