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'
const data = ref([{}, {}, {}])
</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"
      >
        已完成
      </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="https://via.placeholder.com/94x94"
      />
      <div class="flex flex-col flex-1">
        <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
          方晓峰
        </div>
        <div
          class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          x1
        </div>
        <div class="flex-1"></div>
        <div
          class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          1600积分
        </div>
      </div>
      <div>
        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
          已完成
        </div>
      </div>
    </div>
    <SectionHeading title="订单金额" size="sm" end-text="¥ 200"></SectionHeading>
    <SectionHeading title="总积分" size="sm" end-text="¥ 200"></SectionHeading>
    <SectionHeading title="实际支付积分" size="sm" end-text="¥ 200"></SectionHeading>
    <SectionHeading title="订单号" size="sm" end-text="¥ 200"></SectionHeading>
    <SectionHeading title="支付时间" size="sm" end-text="¥ 200"></SectionHeading>
    <SectionHeading title="支付方式" size="sm" end-text="¥ 200"></SectionHeading>
    <div class="flex-1"></div>
    <div><wd-button :round="false" block>取消订单</wd-button></div>
  </div>
</template>