designer-hub/packages/app/src/pages/mine/orders/detail/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "订单详情", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { cancelOrder, getPointsOrder } from '../../../../core/libs/requests'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import dayjs from 'dayjs'
import { requestToast } from '../../../../core/utils/common'

const id = ref()
const status = ref({ '0': '已报名', '1': '已完成', '2': '未核销', '3': '已取消', '4': '待交付' })
const payTypes = ref({ 0: '积分支付', 1: '现金支付' })
const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
const handleSubmit = async () => {
  await requestToast(() => cancelOrder(id.value), { success: true, successTitle: '取消成功' })
  await setData()
}
onLoad((query: { id: string }) => {
  id.value = query.id
  setData()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 px-3.5 bg-white">
    <div class="h-8.5 flex items-center justify-center mx--3.5 box-border bg-[#ffecec]">
      <div
        class="text-right text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-normal"
      >
        {{ status[data.orderStatus] }}
      </div>
    </div>
    <div class="flex gap-4 border-b border-b-solid border-b-[#f2f2f2] pb-5">
      <wd-img
        width="94"
        height="94"
        custom-class="rounded-2xl overflow-hidden"
        :src="data.orderImgUrl"
      />
      <div class="flex flex-col flex-1">
        <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
          {{ data.projectName }}
        </div>
        <div
          class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          x{{ data.orderQuantity }}
        </div>
        <div class="flex-1"></div>
        <div
          class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          {{ data.points }}积分
        </div>
      </div>
      <div>
        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
          <!-- 已完成 -->
          {{ status[data.orderStatus] }}
        </div>
      </div>
    </div>
    <SectionHeading
      v-if="data.orderMoney"
      title="订单金额"
      size="sm"
      :end-text="`¥ ${data.orderMoney}`"
    ></SectionHeading>
    <SectionHeading title="总积分" size="sm" :end-text="`${data.points}`"></SectionHeading>
    <SectionHeading title="实际支付积分" size="sm" :end-text="`${data.payPoints}`"></SectionHeading>
    <SectionHeading title="订单号" size="sm" :end-text="data.orderNo"></SectionHeading>
    <SectionHeading
      title="支付时间"
      size="sm"
      :end-text="dayjs(data.createTime).format('YYYY-MM-DD hh:mm')"
    ></SectionHeading>
    <SectionHeading title="支付方式" size="sm" :end-text="payTypes[data.payType]"></SectionHeading>
    <div class="flex-1"></div>
    <BottomAppBar fixed>
      <div>
        <wd-button :round="false" block v-if="data.orderStatus === '0'" @click="handleSubmit">
          取消订单
        </wd-button>
      </div>
    </BottomAppBar>
  </div>
</template>