designer-hub/packages/merchant/src/pages/scan_code/order_detail.vue

<route lang="yaml">
sstyle:
  navigationBarTitleText: 订单详情
  navigationBarBackgroundColor: '#fff'
</route>
<script lang="ts" setup>
import { desinTopBg } from '@designer-hub/assets/src/svgs'
const collapseValue = ref<string[]>(['item1'])
</script>

<template>
  <view>
    <div class="bg-white p-[20px]">
      <div class="flex mt-[19px] items-center">
        <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px]"></div>
        <div class="ml-[16px]">
          <div class="text-black text-base font-normal font-['PingFang SC'] leading-normal">
            阿芙佳朵
          </div>
          <div
            class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
          >
            数量x2
          </div>
          <div
            class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
          >
            600积分
          </div>
        </div>
      </div>
      <div style="height: 1px; background-color: #f2f2f2" class="mt-[16px]"></div>
      <div class="flex mt-[24px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          总积分
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          600积分
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          优惠券
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          -600积分
        </div>
      </div>
      <div class="bg-[#f8f8f8] rounded-lg flex items-center p-[16px] mt-[12px]">
        <img class="w-[43px] h-[34px]" src="https://via.placeholder.com/43x34" />

        <div class="ml-[20px]">
          <div class="text-black text-sm font-normal font-['PingFang SC'] leading-normal">
            GELATO咖啡兑换券
          </div>
          <div
            class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal mt-[5px]"
          >
            2024/04/01-2024/05/30
          </div>
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          实际支付积分
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          0积分
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          订单号
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          1245100000012
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          支付时间
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          2024-10-10 10:02
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          支付方式
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          积分支付
        </div>
      </div>
      <div style="height: 1px; background-color: #f2f2f2" class="mt-[16px]"></div>
      <div
        class="text-left text-black text-base font-normal font-['PingFang SC'] leading-normal mt-[24px]"
      >
        完成记录
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          核销时间
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          2024-10-10 10:02
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
          核销人
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
          李书福
        </div>
      </div>
    </div>
  </view>
</template>

<style lang="scss" scoped></style>