city-gather/src/subPack-smqjh/components/charge-orderList/charge-orderList.vue

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

defineProps<{
  orderList: Api.xsbOrderList[]
}>()

function handleItemClick(item: Api.xsbOrderList) {
  const orderNumber = item.orderNumber
  if (orderNumber) {
    if (item.hbOrderStatus !== 80) {
      router.push({
        name: 'chargeing',
        params: { orderNo: orderNumber },
      })
    }
    else {
      router.push({
        name: 'charge-order-detail',
        params: { orderNo: orderNumber },
      })
    }
  }
  else {
    console.warn('订单号不存在，无法跳转到详情页')
  }
}
</script>

<template>
  <view class="">
    <view v-for="item in orderList" :key="item.orderNumber" class="mt-20rpx mt20rpx rounded-16rpx bg-#FFF p-24rpx" @click="handleItemClick(item)">
      <view class="flex items-center justify-between">
        <view>
          <view class="text-28rpx font-bold">
            {{ item.chargeOrder?.powerStationName }}
          </view>
          <view class="mt-20rpx text-24rpx text-#AAA">
            订单时间：{{ item.createTime || '未知' }}
          </view>
          <view class="mt-20rpx text-24rpx text-#AAA">
            终端编号：{{ item.chargeOrder?.connectorId || '未知' }}
          </view>
        </view>
        <view class="text-center text-28rpx">
          <image
            class="h-64rpx w-64rpx"
            :src="`${StaticUrl}/${chargeOrderStatus(item.hbOrderStatus).icon}.png`"
          />
          <view :style="{ color: chargeOrderStatus(item.hbOrderStatus).color }">
            {{ chargeOrderStatus(item.hbOrderStatus).text }}
          </view>
        </view>
      </view>
      <view class="my-20rpx h-2rpx w-full bg-#F0F0F0" />
      <view class="flex items-center justify-between">
        <view class="text-28rpx">
          充电费用：
        </view>
        <view class="text-32rpx text-#FF6464 font-800">
          <text class="text-18rpx">
            ￥
          </text>
          {{ item.chargeOrder?.realCost }}
        </view>
      </view>
    </view>
  </view>
</template>

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