city-gather/src/subPack-videoRights/components/StatusDisplay.vue

<script setup lang="ts">
interface Props {
  status: number
  staticUrl: string
}

const props = defineProps<Props>()

const statusConfig = computed(() => {
  const statusMap = {
    1: { text: '处理中', color: 'text-#ff9300', icon: null },
    2: { text: '充值成功', color: 'text-#52C41A', icon: 'videoRight-right.png' },
    3: { text: '充值失败', color: 'text-#FF4D3A', icon: 'videoRight-err.png' },
  }

  return statusMap[props.status as keyof typeof statusMap] || { text: '', color: '', icon: null }
})
</script>

<template>
  <view class="flex items-center justify-center gap-16rpx">
    <image
      v-if="statusConfig.icon"
      class="h-40rpx w-40rpx"
      :src="`${staticUrl}/${statusConfig.icon}`"
    />
    <view
      class="text-32rpx font-bold"
      :class="statusConfig.color"
    >
      {{ statusConfig.text }}
    </view>
  </view>
</template>