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

<script setup lang="ts">
import { navTabTypeList } from '../utils/order-data'
import { chargeOrderStatus } from '../utils/index'
import router from '@/router'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
import { StaticUrl } from '@/config'

const navActiveTab = ref(0)
const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
definePage({
  name: 'charge-order-list',
  islogin: false,
  style: {
    navigationBarTitleText: '充电订单',
    navigationStyle: 'custom',
  },
})
const { data: orderList, refresh, isLastPage, page, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
  businessType: 'CD',
  pageNum,
  pageSize,
  status: unref(navActiveTab) === 0 ? '' : unref(navActiveTab),
} }), {
  immediate: false,
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
})
onShow(() => {
  refresh()
})
onMounted(() => {
  opcity.value = 0
})

onPageScroll((e) => {
  const calculatedOpacity = e.scrollTop / 100
  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
function handleChangeTypeNav(value: number) {
  navActiveTab.value = value
  orderList.value = []
  reload()
  console.log(navActiveTab.value, '===============')
}

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

<template>
  <view class="min-h-screen bg-[linear-gradient(180deg,#F5FEDD_0%,#FCFFF3_22.46%,#FAFCFB_27.26%,#FBFDFC_45.2%,#FBFCFB_68.94%,#FBFCFB_100%)]">
    <wd-navbar
      title="充电订单" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`"
      :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="nav sticky top-0 z10 px24rpx">
      <view class="h80rpx flex items-center">
        <view
          v-for="item in navTabTypeList" :key="item.value" class="mr64rpx h-full flex flex-col items-center justify-center text-32rpx"
          :class="[navActiveTab == item.value ? 'font-semibold ' : 'text-#AAAAAA']"
          @click="handleChangeTypeNav(item.value)"
        >
          {{ item.name }}
          <view
            class="mt10rpx bg-[var(--them-color)] transition-all transition-duration-400 ease-in"
            :class="[navActiveTab == item.value ? 'w40rpx h8rpx rounded-4rpx' : '']"
          />
        </view>
      </view>
    </view>
    <view class="box-border px24rpx">
      <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.chargeOrder?.createTime || '未知' }}
            </view>
            <view class="mt-20rpx text-24rpx text-#AAA">
              终端编号：{{ item.chargeOrder?.connectorId || '未知' }}
            </view>
          </view>
          <view v-if="item.chargeOrder?.status" class="text-center text-28rpx text-#4EDC86">
            <image
              class="h-64rpx w-64rpx"
              :src="`${StaticUrl}/${chargeOrderStatus(item.chargeOrder?.status).icon}.png`"
            />
            <view :style="{ color: chargeOrderStatus(item.chargeOrder?.status).color }">
              {{ chargeOrderStatus(item.chargeOrder?.status).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>
      <StatusTip v-if="!orderList.length" tip="暂无内容" />
    </view>
  </view>
</template>

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