gami-web/app/components/order/OrderCard.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { formatNumber } from '~/utils/helpers'
import { statusKeyMap, type OrderStatus } from '~/types/order'

type OrderCardProps = {
  orderNo: string
  statusText: OrderStatus
  game: string
  coins: number
  quantity: number
  total: number
  star?: number
  avatar: string
  nickname: string
  refundApply: boolean
  orderTime: string
}

const props = defineProps<OrderCardProps>()

const { t } = useI18n()
const img = useImage()

const emit = defineEmits<{
  (e: 'complete' | 'refund' | 'review' | 'cancel', payload: typeof props): void
}>()

const handleCompleteClick = () => emit('complete', props)
const handleReviewClick = () => emit('review', props)
// const handleRefundClick = () => emit('refund', props)
const handleCancelClick = () => emit('cancel', props)

const isDiscount = computed(() => {
  return props.total < props.coins * props.quantity
})
</script>

<template>
  <article class="order-card">
    <!-- 顶部：订单号 + 状态标签 -->
    <header class="order-card__header">
      <p class="order-card__no">
        <!-- {{ t('order.detail.orderNo') }}：{{ orderNo }} -->
        {{ orderTime }}
      </p>

      <div
        v-if="!refundApply"
        class="order-card__status"
        :class="`order-card__status--${statusText}`"
      >
        <span>{{ t(statusKeyMap[statusText]) }}</span>
      </div>
      <div
        v-else
        class="order-card__status order-card__status--refunding"
      >
        {{ t('order.refund.refunding') }}
      </div>
    </header>

    <div class="order-card__divider" />

    <!-- 中部：服务信息 -->
    <section class="order-card__body">
      <div class="order-card__avatar">
        <NuxtImg
          :src="avatar"
          :alt="nickname"
          loading="lazy"
          :placeholder="img('/avatar.png')"
        />
      </div>

      <div class="order-card__info">
        <p class="order-card__title">
          {{ nickname }}
        </p>
        <p class="order-card__game">
          {{ game }}
        </p>
      </div>

      <div class="order-card__price">
        <div class="order-card__price-row">
          <span
            class="order-card__coin order-card__coin--small"
            aria-hidden="true"
          />
          <span class="order-card__price-text">
            {{ formatNumber(coins) }}
          </span>
        </div>
        <p class="order-card__quantity">
          x{{ quantity }}
        </p>
      </div>
    </section>

    <!-- 底部：操作按钮 + 合计 -->
    <footer class="order-card__footer">
      <div
        v-if="statusText === 'pending' || statusText === 'processed' || statusText === 'completed'"
        class="order-card__actions"
      >
        <button
          v-if="statusText === 'pending'"
          type="button"
          class="order-card__btn order-card__btn--outline-gray"
          @click.stop="handleCancelClick"
        >
          {{ t('order.detail.cancel') }}
        </button>
        <!-- <button
          v-else-if="statusText === 'processing'"
          type="button"
          class="order-card__btn order-card__btn--outline-gray"
          :class="{ 'order-card__btn--disabled': refundApply }"
          :disabled="refundApply"
          @click.stop="handleRefundClick"
        >
          {{ t('order.detail.refund') }}
        </button> -->
        <button
          v-if="statusText === 'processed'"
          type="button"
          class="order-card__btn order-card__btn--primary"
          @click.stop="handleCompleteClick"
        >
          {{ t('order.detail.completeOrder') }}
        </button>
        <button
          v-else-if="statusText === 'completed' && star === 0"
          type="button"
          class="order-card__btn order-card__btn--outline-primary"
          @click.stop="handleReviewClick"
        >
          {{ t('order.detail.review') }}
        </button>
        <!-- <button
          v-else-if="statusText === 'cancelled'"
          type="button"
          class="order-card__btn order-card__btn--outline-gray"
          @click.stop="handlePrimaryClick"
        >
          {{ t('order.detail.delete') }}
        </button> -->
      </div>

      <template v-else-if="statusText === 'refunded'">
        <p class="order-card__refundlabel">
          {{ t('order.refund.refundedTip') }}
        </p>
      </template>
      <p
        v-else-if="refundApply"
        class="order-card__refundlabel"
      >
        {{ t('order.refund.refundingTip') }}
      </p>
      <div v-else />

      <div class="order-card__total">
        <div
          v-if="isDiscount"
          class="order-card__discount-tag"
        >
          <span>{{ t('order.detail.discount') }}</span>
        </div>
        <div class="order-card__total-label">
          <span>{{ t('order.detail.totalLabel') }}</span>
          <span
            class="order-card__coin order-card__coin--large"
            aria-hidden="true"
          />
        </div>
        <p class="order-card__total-value">
          {{ formatNumber(total) }}
        </p>
      </div>
    </footer>
  </article>
</template>

<style scoped lang="scss">
.order-card {
  width: 100%;
  margin: 0 auto;
  padding: 10px 12px 6px 12px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #fff;
}

.order-card__header {
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-card__no {
  font-size: 11px;
  line-height: 14px;
  color: #86909C;
}

.order-card__status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #86909C;

  &--refunding,
  &--pending {
    color: #FFB836;
  }

  &--completed {
    color: #3FBFBD;
  }

  &--accepted {
    color: #3FBFBD;
  }

  &--processing,
  &--processed {
    color: #FFB836;
  }

  &--refused,
  &--cancelled,
  &--refunded {
    color: #86909C;
  }
}

.order-card__body {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.order-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

.order-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.order-card__title {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: #1d2129;
}

.order-card__game {
  font-size: 14px;
  line-height: 14px;
  color: #1d2129;
}

.order-card__price {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.order-card__price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.order-card__price-text {
  font-size: 12px;
  line-height: 16px;
  color: #1d2129;
}

.order-card__quantity {
  font-size: 11px;
  line-height: 16px;
  color: #1d2129;
}

.order-card__footer {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.order-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.order-card__refundlabel {
  font-size: 12px;
  color: #86909C;
}

.order-card__btn {
  min-width: 48px;
  height: 30px;
  padding: 4px 10px;
  border-radius: 200px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

.order-card__btn--primary {
  border: none;
  background: linear-gradient(90deg, #2F95FF 28.37%, #50FFD8 100%);
  color: #fff;
}

.order-card__btn--outline-primary {
  border-color: #4ed2ff;
  color: #3fbfbd;
  background: #fff;
}

.order-card__btn--outline-gray {
  border-color: #86909c;
  color: #86909c;
  background: #fff;
}

.order-card__total {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.order-card__total-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: #1d2129;
}

.order-card__total-value {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  line-height: 18px;
}

.order-card__discount-tag {
  height: 20px;
  padding: 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: #ff6f32;
  margin-right: 3px;

  span {
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
  }
}

.order-card__coin {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  @include bg('~/assets/images/common/coin.png');

  &--small {
    @include size(14px);
  }

  &--large {
    @include size(16px);
  }
}

.order-card__divider {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 1px;
  background: #F2F3F5;
  margin: 10px 0;
}
</style>