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

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { formatNumber } from '~/utils/helpers'
import MaleIconSvg from '~/assets/icons/male.svg'
import FemaleIconSvg from '~/assets/icons/female.svg'
import { statusPlaymateKeyMap, type OrderStatus } from '~/types/order'

type Gender = 0 | 1 | 2 // 0=unknown, 1=male, 2=female

const props = withDefaults(
  defineProps<{
    orderNo: string
    orderTime: string
    statusText: OrderStatus
    gameName: string
    gameIcon: string
    coins: number
    quantity: number
    unit: string
    total: number

    avatar: string
    nickname: string
    gender: Gender

    customerRemark?: string
    refundApply?: boolean
    showActions?: boolean
    actionLoading?: boolean
  }>(),
  {
    customerRemark: '',
    refundApply: false,
    showActions: true,
    actionLoading: false,
  },
)

const emit = defineEmits<{
  (e: 'accept' | 'refuse' | 'startService' | 'finishService' | 'submitProof', payload: typeof props): void
}>()

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

const handleRefuse = () => emit('refuse', props)
const handleAccept = () => emit('accept', props)
const handleStartService = () => emit('startService', props)
const handleFinishService = () => emit('finishService', props)
const handleSubmitProof = () => emit('submitProof', props)

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

<template>
  <article class="playmate-record-card">
    <header class="playmate-record-card__header">
      <p class="playmate-record-card__no">
        {{ orderTime }}
      </p>
      <p
        v-if="!refundApply"
        :class="['playmate-record-card__status', `playmate-record-card__status--${statusText}`]"
      >
        {{ t(statusPlaymateKeyMap[statusText]) }}
      </p>
      <p
        v-else
        class="playmate-record-card__status playmate-record-card__status--refunding"
      >
        {{ t('order.refundPlaymate.refunding') }}
      </p>
    </header>

    <div class="playmate-record-card__divider" />

    <section class="playmate-record-card__body">
      <div class="playmate-record-card__game">
        <div
          class="playmate-record-card__game-icon"
          aria-hidden="true"
        >
          <NuxtImg
            v-if="gameIcon"
            :src="gameIcon"
            :alt="gameName"
            loading="lazy"
            :placeholder="img('/placeholder.png')"
          />
        </div>
        <div class="playmate-record-card__game-info">
          <p class="playmate-record-card__game-name">
            {{ gameName }}
          </p>
          <p class="playmate-record-card__game-id">
            {{ orderNo }}
          </p>
        </div>
      </div>

      <div class="playmate-record-card__price">
        <div class="playmate-record-card__price-row">
          <div
            v-if="isDiscount"
            class="playmate-record-card__discount-tag"
          >
            <span>{{ t('order.detail.discount') }}</span>
          </div>
          <span
            class="playmate-record-card__coin"
            aria-hidden="true"
          />
          <span class="playmate-record-card__amount">
            {{ formatNumber(total) }}
          </span>
        </div>
        <p class="playmate-record-card__unit">
          {{ unit }} x{{ quantity }}
        </p>
      </div>
    </section>

    <section class="playmate-record-card__request">
      <div class="playmate-record-card__user-row">
        <div class="playmate-record-card__avatar">
          <NuxtImg
            :src="avatar"
            :alt="nickname"
            loading="lazy"
            :placeholder="img('/avatar.png')"
          />
        </div>

        <div class="playmate-record-card__user-meta">
          <p class="playmate-record-card__nickname">
            {{ nickname }}
          </p>
          <template v-if="gender">
            <MaleIconSvg
              v-if="gender === 1"
            />
            <FemaleIconSvg
              v-if="gender === 2"
            />
          </template>
        </div>
      </div>

      <template v-if="customerRemark">
        <div class="playmate-record-card__request-divider" />

        <div class="playmate-record-card__request-content">
          <p class="playmate-record-card__request-title">
            {{ t('order.playmateRecord.requestTitle') }}
          </p>
          <p class="playmate-record-card__request-text">
            {{ customerRemark }}
          </p>
        </div>
      </template>
    </section>

    <footer
      v-if="showActions"
      class="playmate-record-card__footer"
    >
      <div class="playmate-record-card__actions">
        <button
          v-if="refundApply"
          type="button"
          class="playmate-record-card__btn playmate-record-card__btn--outline playmate-record-card__btn--refund"
          :disabled="actionLoading"
          @click.stop="handleSubmitProof"
        >
          {{ t('order.refundPlaymate.entry') }}
        </button>
        <button
          v-if="statusText === 'pending'"
          type="button"
          class="playmate-record-card__btn playmate-record-card__btn--outline"
          :disabled="actionLoading"
          @click.stop="handleRefuse"
        >
          {{ t('order.playmateRecord.refuse') }}
        </button>
        <button
          v-if="statusText === 'pending'"
          type="button"
          class="playmate-record-card__btn playmate-record-card__btn--primary"
          :disabled="actionLoading"
          @click.stop="handleAccept"
        >
          {{ t('order.playmateRecord.acceptOrders') }}
        </button>

        <button
          v-if="statusText === 'accepted'"
          type="button"
          class="playmate-record-card__btn playmate-record-card__btn--primary"
          :disabled="actionLoading"
          @click.stop="handleStartService"
        >
          {{ t('order.playmateRecord.startService') }}
        </button>

        <button
          v-if="statusText === 'processing'"
          type="button"
          class="playmate-record-card__btn playmate-record-card__btn--primary"
          :disabled="actionLoading"
          @click.stop="handleFinishService"
        >
          {{ t('order.playmateRecord.finishService') }}
        </button>
      </div>
    </footer>
  </article>
</template>

<style scoped lang="scss">
.playmate-record-card {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0 8px 0;
  border-radius: 12px;
  background: #fff;
}

.playmate-record-card__header {
  width: 100%;
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.playmate-record-card__no {
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-secondary, #4E5969);
}

.playmate-record-card__status {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  color: #86909C;

  &--pending {
    color: #FFB836;
  }

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

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

  &--processing {
    color: #FFB836;
  }

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

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

  &--refunding {
    color: #f23051;
  }
}

.playmate-record-card__divider {
  width: calc(100% - 24px);
  height: 1px;
  background: #F2F3F5;
}

.playmate-record-card__body {
  width: 100%;
  padding: 2px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.playmate-record-card__game {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.playmate-record-card__game-icon {
  @include size(50px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

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

.playmate-record-card__game-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.playmate-record-card__game-name {
  font-size: 14px;
  line-height: 17px;
  font-weight: 600;
  color: var(--color-text-primary, #1D2129);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playmate-record-card__game-id {
  font-size: 11px;
  line-height: 14px;
  color: #86909C;
}

.playmate-record-card__price {
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

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

.playmate-record-card__discount-tag {
  height: 18px;
  padding: 0 5px;
  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;
    white-space: nowrap;
  }
}

.playmate-record-card__coin {
  display: inline-block;
  @include bg('~/assets/images/common/coin.png', contain);
  @include size(18px);
}

.playmate-record-card__amount {
  font-family: 'Poppins';
  font-size: 16px;
  line-height: 17px;
  font-weight: 600;
  color: var(--color-text-primary, #1D2129);
  text-align: right;
  white-space: nowrap;
}

.playmate-record-card__unit {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-text-primary, #1D2129);
  text-align: right;
  white-space: nowrap;
}

.playmate-record-card__request {
  margin-top: 4px;
  width: calc(100% - 24px);
  padding: 8px;
  background: #F9FAFB;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.playmate-record-card__user-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.playmate-record-card__avatar {
  @include size(23px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

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

.playmate-record-card__user-meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.playmate-record-card__nickname {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--color-text-primary, #1D2129);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playmate-record-card__request-divider {
  width: 100%;
  height: 1px;
  background: #E5E6EB;
}

.playmate-record-card__request-content {
  color: var(--color-text-secondary, #4E5969);
}

.playmate-record-card__request-title {
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  margin-bottom: 2px;
}

.playmate-record-card__request-text {
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  text-align: justify;
  white-space: pre-wrap;
}

.playmate-record-card__footer {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}

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

.playmate-record-card__btn {
  height: 30px;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}

.playmate-record-card__btn--outline {
  border-color: #E5E6EB;
  color: #454A50;
  background: #fff;

  &.playmate-record-card__btn--refund {
    border-color: #4ED2FF;
    color: #3FBFBD;
  }
}

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

.playmate-record-card__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>