city-gather/src/subPack-charge/chargeOrderDetail/chargeOrderDetail.vue

<script setup lang="ts">
import { chargeOrderStatus } from '../utils/index'
import router from '@/router'
import { StaticUrl } from '@/config'

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())

definePage({
  name: 'charge-order-detail',
  islogin: true,
  style: {
    navigationBarTitleText: '订单详情',
    navigationStyle: 'custom',
  },
})

const orderNo = ref('')
onLoad((options: any) => {
  console.log(options, '页面数据')
  orderNo.value = options.orderNo
})

onMounted(() => {
  getOrderDetail()
})

const chargeOrderDetail = ref<Api.chargeOrderDetail>()
async function getOrderDetail() {
  const res = await Apis.charge.orderDetail({ data: { orderNumber: orderNo.value } })
  chargeOrderDetail.value = res.data
}
</script>

<template>
  <view class="min-h-screen bg-[linear-gradient(90deg,#F1FECC_0%,#EAFEFA_100%)]">
    <wd-navbar
      title="订单详情" custom-style="background: linear-gradient(90deg, #F1FECC 0%, #EAFEFA 100%);"
      :bordered="false" :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <view class="box-border px24rpx">
      <view class="rounded-16rpx bg-#FFF p-24rpx">
        <view class="flex items-center gap-8rpx">
          <view>
            <image
              class="h-40rpx w-40rpx"
              :src="`${StaticUrl}/charge-order-number.png`"
            />
          </view>
          <view class="mb-10rpx text-28rpx">
            充电度数
          </view>
        </view>
        <view class="mt-20rpx text-28rpx text-#9ED605 font-bold">
          {{ chargeOrderDetail?.totalCharge }}度电
        </view>
      </view>
      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
        <view>
          <view class="text-24rpx text-#AAA">
            起始时间
          </view>
          <view class="mt-20rpx text-32rpx font-bold">
            {{ chargeOrderDetail?.startTime }}
          </view>
        </view>
        <view class="mt-28rpx">
          <view class="text-24rpx text-#AAA">
            终止时间
          </view>
          <view class="mt-20rpx text-32rpx font-bold">
            {{ chargeOrderDetail?.endTime }}
          </view>
        </view>
        <view class="mt-28rpx">
          <view class="text-24rpx text-#AAA">
            终止方式
          </view>
          <view class="mt-20rpx text-32rpx font-bold">
            {{ '--' }}
          </view>
        </view>
      </view>
      <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
        <view class="flex items-center justify-between">
          <view class="text-28rpx font-500">
            订单状态
          </view>
          <view class="text-28rpx text-#AAA">
            {{ chargeOrderStatus(chargeOrderDetail?.status).text || '--' }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            订单编号
          </view>
          <view class="text-28rpx text-#AAA">
            {{ chargeOrderDetail?.chargeOrderNo }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            订单时间
          </view>
          <view class="text-28rpx text-#AAA">
            {{ chargeOrderDetail?.chargeTime }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            充电电站
          </view>
          <view class="text-28rpx text-#AAA">
            {{ chargeOrderDetail?.powerStationName }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            终端编号
          </view>
          <view class="text-28rpx text-#AAA">
            {{ '--' }}
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            电费
          </view>
          <view class="text-28rpx text-#AAA">
            {{ '--' }}元
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            服务费
          </view>
          <view class="text-28rpx text-#AAA">
            {{ chargeOrderDetail?.realServiceCost }}元
          </view>
        </view>
        <wd-divider />
        <!-- <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            新用户首单立减
          </view>
          <view class="text-28rpx text-#F44033">
            0.71元
          </view>
        </view>
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            优惠立减
          </view>
          <view class="text-28rpx text-#F44033">
            0.71元
          </view>
        </view> -->
        <view class="mt-28rpx flex items-center justify-between">
          <view class="text-28rpx font-500">
            实际结算费用
          </view>
          <view class="text-28rpx text-#F44033">
            {{ chargeOrderDetail?.realCost }}元
          </view>
        </view>
      </view>
      <view class="mt-20rpx flex items-center gap-12rpx rounded-8rpx bg-[rgba(158_214_5_0.4)] p-[12rpx_24rpx_12rpx_24rpx]">
        <view class="h-28rpx w-28rpx rounded-50% bg-#9ED605 text-center text-18rpx text-#FFF line-height-[28rpx]">
          !
        </view>
        <view class="text-24rpx">
          本次充电费用已从您的“账户余额”中抵扣结算
        </view>
      </view>
    </view>
  </view>
</template>

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