gami-web/app/pages/order/detail.vue

<script setup lang="ts">
import dayjs from 'dayjs'
import CancelSvg from '~/assets/icons/order/cancelled.svg'
import ProcessingSvg from '~/assets/icons/order/processing.svg'
import CompletedSvg from '~/assets/icons/order/completed.svg'
import AcceptedSvg from '~/assets/icons/order/accepted.svg'
import { useI18n } from 'vue-i18n'
import { showToast } from 'vant'
import { useApi } from '~/composables/useApi'
import { skillApi } from '~/api/skill'
import type { SkillOrderInfoDetailVo } from '~/types/api'
import type { FileAttachment } from '~/types/api/skill'
import { mapApiStatus, statusKeyMap, type OrderStatus } from '~/types/order'
import StarRating from '~/components/common/StarRating.vue'
import ConfirmDialog from '~/components/common/ConfirmDialog.vue'

definePageMeta({
  auth: true,
})

interface OrderDetail {
  id: string
  status: OrderStatus
  avatar: string
  name: string
  productType: string
  unitPrice: number
  unit: string
  quantity: number
  orderNo: string
  time: string
  total: number
  star?: number
  refundApply: boolean
  refundReason: string
  refundAttachments: FileAttachment[]
  customerRemark: string
}

const route = useRoute()
const router = useRouter()
const { t } = useI18n()
const img = useImage()
const { request } = useApi()
const firstOrderDiscountStore = useFirstOrderDiscountStore()
const detail = ref<OrderDetail | null>(null)

const showRatingPopup = ref(false)
const ratingScore = ref(0)
const isRated = computed<boolean>(() => !!detail.value?.star && detail.value.star > 0)
const refundAttachments = computed<FileAttachment[]>(() => {
  return (detail.value?.refundAttachments || []).filter(a => !!a?.attachmentUrl)
})

type OrderDetailActionType = 'complete' | 'refund' | 'delete' | 'cancel' | null

const confirmDialogVisible = ref(false)
const pendingAction = ref<OrderDetailActionType>(null)

const confirmTexts = computed(() => {
  const type = pendingAction.value

  if (!type) {
    return {
      title: '',
      confirm: '',
      cancel: '',
    }
  }

  return {
    title: t(`order.confirm.${type}.title`),
    confirm: t(`order.confirm.${type}.confirm`),
    cancel: t(`order.confirm.${type}.cancel`),
  }
})

const formatOrderTime = (timestamp: number) => {
  return dayjs(timestamp).tz().format('YYYY/MM/DD HH:mm:ss')
}

const hasDiscount = computed(() => {
  const d = detail.value
  if (!d)
    return false
  return d.total < d.unitPrice * d.quantity
})

const orderDiscountText = computed(() => {
  const d = detail.value
  if (!d)
    return '-'
  const originalTotal = d.unitPrice * d.quantity
  if (d.total < originalTotal) {
    const discount = originalTotal - d.total
    return `-${discount.toLocaleString()}`
  }
  return '-'
})

const loadOrderDetail = async () => {
  const id = route.query.id as string | undefined
  if (!id)
    return

  const res = await request<SkillOrderInfoDetailVo>(() => skillApi.orderDetail({ id }))

  if (!res)
    return

  const order = res.orderInfo
  if (!order)
    return

  detail.value = {
    id: order.orderId,
    status: mapApiStatus(order.status),
    avatar: order.avatar,
    name: order.nickname,
    productType: order.bizCategoryName,
    unitPrice: order.price,
    unit: order.unit || '',
    quantity: order.purchaseQty,
    orderNo: order.orderId,
    time: formatOrderTime(order.createTime),
    total: order.totalAmount,
    star: order.star,
    refundApply: order.refundApply,
    refundReason: res.reason || '',
    refundAttachments: res.attachments || [],
    customerRemark: order.customerRemark ?? '',
  }
}

const openConfirmDialog = (action: Exclude<OrderDetailActionType, null>) => {
  if (!detail.value)
    return

  resetConfirmState()

  pendingAction.value = action
  confirmDialogVisible.value = true
}

const handleCompleteOrder = () => {
  openConfirmDialog('complete')
}

const handleRefundOrder = () => {
  if (!detail.value)
    return

  router.push(`/order/refund?id=${detail.value.id}`)
}

const handleCancelOrder = () => {
  openConfirmDialog('cancel')
}

// const handleDeleteOrder = () => {
//   openConfirmDialog('delete')
// }

const handleOpenRating = () => {
  showRatingPopup.value = true
}

const handleSubmitRating = async (score: number) => {
  const current = detail.value
  if (!current || !score)
    return

  const payload = {
    orderId: current.id,
    star: score,
  }

  const res = await request(() => skillApi.orderStar(payload))

  if (res !== null) {
    ratingScore.value = score
    showRatingPopup.value = false
    showToast(t('profile.toast.thanksForRating'))
    await loadOrderDetail()
  }
}

const resetConfirmState = () => {
  confirmDialogVisible.value = false
  pendingAction.value = null
}

const handleConfirmAction = async () => {
  const current = detail.value
  const action = pendingAction.value

  if (!current || !action)
    return

  if (action === 'complete') {
    const res = await request(() => skillApi.orderFinish({ id: current.id }))
    if (res !== null) {
      await loadOrderDetail()
      await firstOrderDiscountStore.fetchChance()
    }
  }
  else if (action === 'cancel') {
    const res = await request(() => skillApi.orderCancel({ id: current.id }))
    if (res !== null) {
      showToast(t('order.toast.cancelSuccess'))
      await loadOrderDetail()
      await firstOrderDiscountStore.fetchChance()
    }
  }
  else if (action === 'delete') {
    const res = await request(() => skillApi.orderDelete({ id: current.id }))
    if (res !== null) {
      await firstOrderDiscountStore.fetchChance()
      router.back()
    }
  }

  confirmDialogVisible.value = false
}

const handleCancelAction = () => {
  confirmDialogVisible.value = false
}

onMounted(() => {
  loadOrderDetail()
})
</script>

<template>
  <div class="order-detail-page bg-bg-primary">
    <CommonHeader :title="t('order.common.myOrders')" />

    <main class="order-detail-main">
      <section
        v-if="detail"
        class="order-detail-hero"
        :class="[`order-detail-hero--${detail.status}`, { 'order-detail-hero--refunding': detail.refundApply }]"
      >
        <div class="order-detail-hero__bg" />

        <div class="order-detail-hero__status-container">
          <StarRating
            v-if="detail.status === 'completed' && isRated"
            v-model="detail.star"
            mode="display"
            variant="bordered"
            :size="30"
            :gap="14"
          />
          <div
            v-if="!detail.refundApply"
            class="order-detail-hero__status"
          >
            <CancelSvg v-if="detail.status === 'cancelled' || detail.status === 'refused'" />
            <ProcessingSvg v-if="detail.status === 'processing' || detail.status === 'processed' || detail.status === 'pending'" />
            <CompletedSvg v-if="detail.status === 'completed' || detail.status === 'refunded'" />
            <AcceptedSvg v-if="detail.status === 'accepted'" />
            <span class="order-detail-hero__text">
              {{ t(statusKeyMap[detail.status]) }}
            </span>
          </div>
          <div
            v-else
            class="order-detail-hero__status"
          >
            <ProcessingSvg />
            <span class="order-detail-hero__text">
              {{ t('order.refund.refunding') }}
            </span>
          </div>
        </div>

        <article class="order-detail-card">
          <header class="order-detail-card__header">
            <div class="order-detail-card__avatar">
              <NuxtImg
                :src="detail.avatar"
                :alt="detail.name"
                loading="lazy"
                :placeholder="img('/avatar.png')"
              />
            </div>
            <div class="order-detail-card__info">
              <p class="order-detail-card__name">
                {{ detail.name }}
              </p>
            </div>
          </header>

          <div class="order-detail-card__divider" />

          <dl class="order-detail-card__rows">
            <div class="order-detail-card__row">
              <dt>{{ t('order.detail.productType') }}</dt>
              <dd>{{ detail.productType }}</dd>
            </div>
            <div class="order-detail-card__row">
              <dt>{{ t('order.detail.unitPrice') }}</dt>
              <dd>
                <span
                  class="order-detail-card__coin-sm"
                  aria-hidden="true"
                />
                {{ detail.unitPrice.toLocaleString() }}
              </dd>
            </div>
            <div class="order-detail-card__row">
              <dt>{{ t('order.detail.quantity') }}</dt>
              <dd>{{ detail.unit }} x{{ detail.quantity }}</dd>
            </div>
            <div
              v-if="hasDiscount"
              class="order-detail-card__row"
            >
              <dt>{{ t('order.detail.discount') }}</dt>
              <dd>
                <span
                  class="order-detail-card__coin-sm"
                  aria-hidden="true"
                />
                {{ orderDiscountText }}
              </dd>
            </div>
            <div
              v-if="detail.customerRemark"
              class="order-detail-card__row"
            >
              <dt>{{ t('order.detail.remark') }}</dt>
              <dd>{{ detail.customerRemark || t('order.detail.remarkEmpty') }}</dd>
            </div>
            <div class="order-detail-card__row">
              <dt>{{ t('order.detail.orderNo') }}</dt>
              <dd>{{ detail.orderNo }}</dd>
            </div>
            <div class="order-detail-card__row">
              <dt>{{ t('order.detail.purchaseTime') }}</dt>
              <dd>{{ detail.time }}</dd>
            </div>
          </dl>

          <div class="order-detail-card__divider" />

          <footer class="order-detail-card__footer">
            <div class="order-detail-card__total-label">
              <span>{{ t('order.detail.totalLabel') }}</span>
              <span
                class="order-detail-card__coin"
                aria-hidden="true"
              />
            </div>
            <p class="order-detail-card__total-value">
              {{ detail.total.toLocaleString() }}
            </p>
          </footer>

          <template v-if="detail.refundApply">
            <div class="order-detail-refund-card__section">
              <p class="order-detail-refund-card__title">
                {{ t('order.detail.refundReasonTitle') }}
              </p>
              <div class="order-detail-refund-card__box">
                <p class="order-detail-refund-card__text">
                  {{ detail.refundReason?.trim() || t('order.detail.refundReasonEmpty') }}
                </p>
              </div>
            </div>

            <div class="order-detail-refund-card__section">
              <p class="order-detail-refund-card__title">
                {{ t('order.detail.refundProofTitle') }}
              </p>
              <div
                v-if="refundAttachments.length"
                v-viewer="{
                  toolbar: false,
                  navbar: false,
                  title: false,
                  movable: true,
                  zoomable: true,
                  rotatable: false,
                  scalable: false,
                }"
                class="order-detail-refund-grid"
              >
                <div
                  v-for="(att, idx) in refundAttachments"
                  :key="`${att.attachmentUrl || idx}`"
                  class="order-detail-refund-grid__item"
                >
                  <NuxtImg
                    :src="att.attachmentUrl || ''"
                    :alt="att.fileName || `Proof ${idx + 1}`"
                    loading="lazy"
                    :placeholder="img('/placeholder.png')"
                  />
                </div>
              </div>
              <p
                v-else
                class="order-detail-refund-empty"
              >
                {{ t('order.detail.refundProofEmpty') }}
              </p>
            </div>
          </template>
        </article>
      </section>

      <section
        v-if="detail"
        class="order-detail-actions"
      >
        <template v-if="detail.status === 'pending'">
          <button
            type="button"
            class="order-detail-btn order-detail-btn--secondary"
            @click="handleCancelOrder"
          >
            {{ t('order.detail.cancel') }}
          </button>
        </template>

        <template v-if="detail.status === 'accepted' || detail.status === 'processing' || detail.status === 'processed'">
          <button
            type="button"
            class="order-detail-btn order-detail-btn--secondary"
            :class="{ 'order-detail-btn--disabled': detail.refundApply }"
            :disabled="detail.refundApply"
            @click="handleRefundOrder"
          >
            {{ t('order.detail.refund') }}
          </button>
        </template>

        <template v-if="detail.status === 'processed'">
          <button
            type="button"
            class="order-detail-btn order-detail-btn--primary"
            @click="handleCompleteOrder"
          >
            {{ t('order.detail.completeOrder') }}
          </button>
        </template>

        <template v-if="detail.status === 'completed'">
          <button
            v-if="!isRated"
            type="button"
            class="order-detail-btn order-detail-btn--evaluate"
            :class="{ 'order-detail-btn--disabled': isRated }"
            @click="handleOpenRating"
          >
            {{ isRated ? t('order.rating.rated') : t('order.detail.review') }}
          </button>
        </template>
        <!-- <template v-else-if="detail.status === 'cancelled'">
          <button
            type="button"
            class="order-detail-btn order-detail-btn--secondary"
            @click="handleDeleteOrder"
          >
            {{ t('order.detail.delete') }}
          </button>
        </template> -->
      </section>

      <PopupOrderRating
        v-if="detail"
        v-model:show="showRatingPopup"
        v-model="ratingScore"
        :avatar="detail.avatar"
        @submit="handleSubmitRating"
      />
      <ConfirmDialog
        v-if="detail"
        v-model:show="confirmDialogVisible"
        :title="confirmTexts.title"
        :confirm-text="confirmTexts.confirm"
        :cancel-text="confirmTexts.cancel"
        @confirm="handleConfirmAction"
        @cancel="handleCancelAction"
      />
    </main>
  </div>
</template>

<style scoped lang="scss">
.order-detail-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.order-detail-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

.order-detail-refund-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;

  &:not(:last-child) {
    margin-bottom: 16px;
  }
}

.order-detail-refund-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
}

.order-detail-refund-card__box {
  background: #f9fafb;
  border-radius: 12px;
  padding: 8px 12px;
}

.order-detail-refund-card__text {
  font-size: 14px;
  line-height: 16px;
  color: #1d2129;
  white-space: pre-wrap;
}

.order-detail-refund-grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: 100px;
  gap: 4px;
}

.order-detail-refund-grid__item {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;

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

.order-detail-refund-empty {
  font-size: 12px;
  color: #86909c;
}

.order-detail-hero {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;

  .order-detail-hero__bg {
    @include size(100%, 193px);
    @include bg('~/assets/images/order/bg-normal.png', 100% 193px);
    position: absolute;
    inset: 0;
    z-index: 0;
  }
}

.order-detail-hero--refused,
.order-detail-hero--refunding,
.order-detail-hero--refunded,
.order-detail-hero--cancelled {
  .order-detail-hero__bg {
    @include bg('~/assets/images/order/bg-cancel.png', 100% 193px);
  }
}

.order-detail-hero__status-container {
  margin-top: 44px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.order-detail-hero__status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
}

.order-detail-hero__text {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 600;
}

.order-detail-card {
  width: 100%;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.02);
  padding: 8px 0;
  margin-top: 34px;
  z-index: 1;
}

.order-detail-card__header {
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.order-detail-card__avatar {
  @include size(40px);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;

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

.order-detail-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.order-detail-card__divider {
  width: calc(100% - 24px);
  height: 1px;
  background: #F2F3F5;
  margin: 10px auto;
}

.order-detail-card__rows {
  padding: 0 12px;
}

.order-detail-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  font-size: 12px;
  color: #1d2129;
}

.order-detail-card__footer {
  padding: 0 12px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

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

.order-detail-card__coin {
  @include size(18px);
  @include bg('~/assets/images/common/coin.png');
}

.order-detail-card__coin-sm {
  @include size(14px);
  @include bg('~/assets/images/common/coin.png');
  display: inline-block;
}

.order-detail-card__total-value {
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.order-detail-actions {
  width: 100%;
  position: fixed;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
}

.order-detail-btn {
  flex: 1;
  height: 48px;
  padding: 0 32px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;

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

.order-detail-btn--secondary {
  min-width: 100px;
  border: 1px solid #86909c;
  color: #4e5969;
}

.order-detail-btn--primary {
  flex: 3;
  border: none;
  background: linear-gradient(90deg, #2f95ff 28.365%, #50ffd8 100%);
  color: #fff;
}

.order-detail-btn--evaluate {
  flex: 1;
  width: 100%;
  border-radius: 100px;
  border: 1px solid #4ed2ff;
  background: rgba(255, 255, 255, 0.7);
  color: #3fbfbd;
}

dd {
  display: flex;
  align-items: center;
  gap: 2px;
}
</style>