zkxw/mobile-h5/components/OaTaskCard.vue

<template>
  <view class="oa-task-card" :class="'tone-' + normalizedTone">
    <view class="oa-task-card__body" @click="$emit('open')">
      <view class="oa-task-card__top">
        <view class="oa-task-card__title-row">
          <view v-if="unread" class="oa-task-card__unread" aria-hidden="true" />
          <text class="oa-task-card__title">{{ title }}</text>
        </view>
        <text
          v-if="statusText"
          class="oa-task-card__status"
          :class="'is-' + normalizedTone"
        >
          {{ statusText }}
        </text>
      </view>

      <view v-if="metaLines && metaLines.length" class="oa-task-card__meta">
        <view
          v-for="(line, idx) in metaLines"
          :key="idx"
          class="oa-task-card__meta-line"
        >
          <text class="oa-task-card__meta-label">{{ line.label }}</text>
          <text class="oa-task-card__meta-value">{{ line.value }}</text>
        </view>
      </view>
    </view>

    <view v-if="actions && actions.length" class="oa-task-card__footer">
      <view
        v-for="act in actions"
        :key="act.key"
        class="oa-task-card__btn"
        :class="{
          'is-primary': !!act.primary,
          'is-danger': !!act.danger && !act.primary
        }"
        @click.stop="$emit('action', act)"
      >
        {{ act.label }}
      </view>
    </view>
  </view>
</template>

<script>
  const TONES = ['warn', 'success', 'danger', 'info']

  export default {
    name: 'OaTaskCard',
    props: {
      title: { type: String, default: '' },
      statusText: { type: String, default: '' },
      statusTone: { type: String, default: 'info' },
      metaLines: { type: Array, default: () => [] },
      unread: { type: Boolean, default: false },
      actions: { type: Array, default: () => [] }
    },
    emits: ['open', 'action'],
    computed: {
      normalizedTone() {
        const t = String(this.statusTone || 'info').toLowerCase()
        return TONES.includes(t) ? t : 'info'
      }
    }
  }
</script>