feat(refueling): 新增加油订单详情及列表组件

- 新增 OmsOrderOilVO 类型，支持加油订单相关字段
- 添加加油订单详情页，显示订单状态、支付倒计时及详细信息
- 实现加油订单列表项组件，支持订单状态展示及页面跳转
- 配置路由及页面信息，支持加油订单详情访问
- 在订单渲染器中添加加油订单类型支持
- 修改订单类型菜单，新增“加油”分类
- 完善订单金额、支付、退款等多状态显示逻辑
- 增加订单编号复制功能和支付倒计时显示样式调整

src/api/api.type.d.ts

@@ -740,6 +740,102 @@ namespace Api {
      *
      */
     djkOrderAttachInfo?: OmsDjkOrderAttach
+    omsOrderOilVO?: OmsOrderOilVO
+
+  }
+  interface OmsOrderOilVO {
+  /**
+   * 小桔订单号
+   */
+    xjOrderId?: string
+    /**
+     * 门店ID
+     */
+    storeId?: string
+    /**
+     * 门店名称
+     */
+    storeName?: string
+    /**
+     * 城市名称
+     */
+    cityName?: string
+    /**
+     * 枪号
+     */
+    gunNo?: string
+    /**
+     * 商品名称（油品名称）
+     */
+    itemName?: string
+    /**
+     * 油号id
+     */
+    itemId?: number
+    /**
+     * 商品升数
+     */
+    quantity?: number
+    /**
+     * 订单金额（单位：分）
+     */
+    totalMoney?: number
+    /**
+     * 实付金额（单位：分）
+     */
+    realMoney?: number
+    /**
+     * 订单状态：1-待支付，2-已支付，6-已退款，9-已取消
+     */
+    orderStatus?: number
+    /**
+     * 支付时间
+     */
+    payTime?: string
+    /**
+     * 退款时间
+     */
+    refundTime?: string
+    /**
+     * 服务费
+     */
+    serviceFee?: number
+    /**
+     * 优惠减免金额
+     */
+    promotionAmount?: number
+    /**
+     * 发改委价格、国标价
+     */
+    cityPrice?: number
+    /**
+     * 门店价、油枪价、油机价
+     */
+    storePrice?: number
+    /**
+     * 品牌名称
+     */
+    brandName?: string
+    /**
+     * 油站地址
+     */
+    address?: string
+    /**
+     * 优惠卷名称
+     */
+    activityName?: string
+    /**
+     * 优惠卷id
+     */
+    allowanceId?: string
+    /**
+     * 小桔H5支付地址
+     */
+    payUrl?: string
+    /**
+     * 小桔价、折扣价、优惠价
+     */
+    vipPrice?: number
   }
   interface OmsDjkOrderAttach {
     /**

src/pages.json

@@ -588,6 +588,15 @@
             "navigationBarTitleText": "加油"
           }
         },
+        {
+          "path": "orderDetaile/index",
+          "name": "refueling-orderDetail",
+          "islogin": true,
+          "style": {
+            "navigationBarTitleText": "订单详情",
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "webView/index",
           "name": "refueling-webview",

src/subPack-refueling/orderDetaile/index.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import router from '@/router'
+
+definePage({
+  name: 'refueling-orderDetail',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '订单详情',
+    navigationStyle: 'custom',
+  },
+})
+
+const orderNo = ref('')
+const orderInfo = ref<Api.xsbOrderList>()
+const oilInfo = computed<Api.OmsOrderOilVO | undefined>(() => orderInfo.value?.omsOrderOilVO)
+// 状态映射
+const statusMap = new Map([
+  [1, '待支付'],
+  [2, '已支付'],
+  [6, '已退款'],
+  [9, '已取消'],
+])
+
+const { send } = useRequest(
+  (no: string) => Apis.xsb.orderInfo({ data: { orderNo: no } }),
+  { immediate: false },
+).onSuccess((res) => {
+  orderInfo.value = res.data.data
+})
+
+onLoad((options: any) => {
+  orderNo.value = options.orderNo || ''
+  if (orderNo.value) {
+    send(orderNo.value)
+  }
+})
+
+// 计算支付倒计时
+function getCountdownTime(): number {
+  if (!orderInfo.value?.expireTime)
+    return 0
+  const expireTime = new Date(orderInfo.value.expireTime).getTime()
+  const remaining = expireTime - Date.now()
+  return remaining > 0 ? remaining : 0
+}
+
+// 复制订单号
+function handleCopy(text?: string) {
+  if (!text)
+    return
+  uni.setClipboardData({
+    data: text,
+    success: () => {
+      useGlobalToast().show('复制成功')
+    },
+  })
+}
+
+// 取消订单（占位）
+// async function handleCancelOrder() {
+//   await useUserStore().handleCommonCancelOrder(orderInfo.value?.orderNumber as string)
+//   send(orderNo.value)
+// }
+
+// 立即支付（占位）
+// function handlePay() {
+//   useUserStore().handleCommonPath(oilInfo.value?.payUrl as string)
+// }
+
+// 跳转首页
+// function handleGoHome() {
+//   router.pushTab({ name: 'home' })
+//   useTabbar().setTabbarItemActive('home')
+// }
+// function handleContact() {
+//   window.location.href = `weixin://dl/business/?appid=wx43b5b906cc30ed0b&path=subPack-xsb/orderDetaile/index&query=${orderInfo.value?.orderNumber}&env_version=release`
+// }
+</script>
+
+<template>
+  <wd-navbar
+    title="订单详情" :bordered="false" :z-index="99" safe-area-inset-top left-arrow placeholder fixed
+    @click-left="router.back()"
+  />
+  <view v-if="orderInfo && oilInfo" class="bg-#f5f5f5 pb200rpx pt20rpx">
+    <!-- 订单状态头部 -->
+    <view class="mx24rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb16rpx text-32rpx font-semibold">
+        订单状态：{{ statusMap.get(orderInfo.oilOrderStatus as number) || '-' }}
+      </view>
+
+      <!-- 待支付 - 倒计时和按钮 -->
+      <template v-if="orderInfo.oilOrderStatus === 1">
+        <view class="mb20rpx flex items-center text-26rpx text-#FF4A39">
+          剩余支付时间：<wd-count-down :time="getCountdownTime()" format="mm分ss秒" />
+        </view>
+        <!-- <view class="flex items-center gap-24rpx">
+          <wd-button plain custom-class="flex-1 cancel-btn" @click="handleCancelOrder">
+            取消订单
+          </wd-button>
+          <wd-button custom-class="flex-1" @click="handlePay">
+            立即支付 ￥{{ oilInfo.realMoney }}
+          </wd-button>
+        </view> -->
+      </template>
+
+      <!-- 已退款 - 联系客服 -->
+      <template v-else-if="orderInfo.oilOrderStatus === 6 || orderInfo.oilOrderStatus === 2">
+        <view class="flex items-center gap-48rpx">
+          <view class="flex flex-col items-center">
+            <wd-icon name="chat" size="48rpx" color="#333" />
+            <Zcontact>
+              <view class="mt-40rpx text-28rpx">
+                联系客服
+              </view>
+            </Zcontact>
+          </view>
+        </view>
+      </template>
+
+      <!-- 已取消 - 取消原因 -->
+      <template v-else-if="orderInfo.oilOrderStatus === 9">
+        <view class="text-26rpx text-#999">
+          取消原因：{{ orderInfo.cancelReason || '未按时支付' }}
+        </view>
+      </template>
+    </view>
+
+    <!-- 重要提示（已支付） -->
+    <view v-if="orderInfo.oilOrderStatus === 2" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb16rpx flex items-center text-26rpx text-#ff4d3a">
+        <wd-icon name="info-circle" size="28rpx" color="#ff4d3a" class="mr8rpx" />
+        重要提示
+      </view>
+      <view class="text-26rpx text-#666">
+        如需加油站线下开票，请向油站工作人员提供以下订单号：
+      </view>
+      <view class="mt12rpx flex items-center text-26rpx">
+        我方订单号：{{ orderInfo.orderNumber }}
+        <wd-icon name="content-copy" size="28rpx" color="#999" class="ml12rpx" @click="handleCopy(orderInfo?.orderNumber)" />
+      </view>
+    </view>
+
+    <!-- 退款信息（已退款） -->
+    <view v-if="orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        退款信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>退款金额：￥{{ oilInfo.realMoney }}</view>
+        <view class="text-24rpx text-#999">
+          退还金额：￥{{ oilInfo.realMoney }} &nbsp; 退还积分：需联系客服处理
+        </view>
+        <view>退款时间：{{ oilInfo.refundTime || '-' }}</view>
+        <view>退款方式：原路返回</view>
+        <view>退款状态：退款成功</view>
+        <view>预计到账：1-3个工作日</view>
+      </view>
+    </view>
+
+    <!-- 订单编号 -->
+    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        订单编号
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>我方订单号：{{ orderInfo.orderNumber || '-' }}</view>
+        <view>小桔订单号：{{ oilInfo.xjOrderId || '-' }}</view>
+      </view>
+    </view>
+
+    <!-- 用户信息（已支付/已退款） -->
+    <view v-if="orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        用户信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>用户手机：{{ orderInfo.memberMobile || '-' }}</view>
+        <view>外部用户ID：{{ orderInfo.memberId || '-' }}</view>
+        <view>下单时间：{{ orderInfo.createTime || '-' }}</view>
+        <view>支付时间：{{ oilInfo.payTime || '-' }}</view>
+      </view>
+    </view>
+
+    <!-- 油站信息 -->
+    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        油站信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>油站名称：{{ oilInfo.brandName }}·{{ oilInfo.storeName }}</view>
+        <view>油站地址：{{ oilInfo.address || '-' }}</view>
+        <view>所在城市：{{ oilInfo.cityName || '-' }}</view>
+      </view>
+    </view>
+
+    <!-- 加油明细 -->
+    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        加油明细
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>油品名称：{{ oilInfo.itemName || '-' }}</view>
+        <view>枪号：{{ oilInfo.gunNo ? `${oilInfo.gunNo}号枪` : '-' }}</view>
+        <view>加油量：{{ oilInfo.quantity || '-' }}L</view>
+      </view>
+    </view>
+
+    <!-- 价格明细 -->
+    <view class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        价格明细
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>门店价：￥{{ oilInfo.storePrice || '-' }}/L</view>
+        <view>平台价：￥{{ oilInfo.vipPrice || '-' }}/L</view>
+        <view>订单金额：￥{{ oilInfo.totalMoney }}</view>
+        <view>抵扣金额：-￥{{ oilInfo.promotionAmount }}</view>
+        <view>服务费：+￥{{ oilInfo.serviceFee }}</view>
+        <view v-if="orderInfo.oilOrderStatus === 6">
+          实付金额：￥{{ oilInfo.realMoney }}
+        </view>
+        <view v-else-if="orderInfo.oilOrderStatus === 9">
+          应付金额：￥{{ oilInfo.realMoney }}
+        </view>
+        <view v-else>
+          需付金额：￥{{ oilInfo.realMoney }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 抵扣信息（已支付/已退款） -->
+    <view v-if="(orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6) && oilInfo.allowanceId" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        抵扣信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>抵扣券：{{ oilInfo.allowanceId || '-' }}</view>
+        <view>优惠描述：{{ oilInfo.activityName || '-' }}</view>
+      </view>
+    </view>
+
+    <!-- 支付信息（已支付/已退款） -->
+    <view v-if="orderInfo.oilOrderStatus === 2 || orderInfo.oilOrderStatus === 6" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        支付信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>支付方式：微信支付</view>
+        <view>支付状态：成功</view>
+        <view class="break-all">
+          支付流水号：{{ orderInfo.transactionId || '-' }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 开票信息（已支付） -->
+    <view v-if="orderInfo.oilOrderStatus === 2" class="mx24rpx mt20rpx rounded-16rpx bg-white px28rpx py32rpx">
+      <view class="mb20rpx text-30rpx font-semibold">
+        开票信息
+      </view>
+      <view class="text-26rpx text-#666 leading-48rpx">
+        <view>开票方式：线上自助开票</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+:deep(.cancel-btn) {
+  border-color: var(--them-color) !important;
+  color: var(--them-color) !important;
+}
+:deep(.wd-count-down){
+  color: #FF4A39 !important;
+}
+</style>

src/subPack-smqjh/components/refueling-order/index.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import router from '@/router'
+
+defineProps<{
+  order: Api.xsbOrderList
+}>()
+
+const _emit = defineEmits<{
+  refresh: []
+}>()
+// 订单状态映射
+const statusMap = new Map([
+  [1, '待支付'],
+  [2, '已支付'],
+  [6, '已退款'],
+  [9, '已取消'],
+])
+
+// 获取状态文字
+function getStatusText(status?: number) {
+  return statusMap.get(status as number) || ''
+}
+// 计算倒计时剩余毫秒数（30分钟）
+function getCountdownTime(expireTime?: string): number {
+  if (!expireTime)
+    return 0
+  const expire = new Date(expireTime).getTime()
+  const remaining = expire - Date.now()
+  return remaining > 0 ? remaining : 0
+}
+</script>
+
+<template>
+  <view class="mb-20rpx rounded-16rpx bg-white p-24rpx">
+    <view @click="router.push({ name: 'refueling-orderDetail', params: { orderNo: order.orderNumber as string } })">
+      <!-- 头部：油站名称 + 状态 -->
+      <view class="flex justify-between">
+        <view class="text-30rpx font-semibold">
+          {{ order.omsOrderOilVO?.brandName ? `${order.omsOrderOilVO?.brandName}·` : '' }}{{ order.omsOrderOilVO?.storeName }}
+        </view>
+        <!-- 待支付状态显示倒计时 -->
+        <view v-if="order?.oilOrderStatus === 1" class="w300rpx flex items-center justify-end text-24rpx text-#FF4D3A">
+          待支付(<wd-count-down :time="getCountdownTime(order?.expireTime)" format="还剩mm:ss" />)
+        </view>
+        <view v-else class="text-24rpx text-#666">
+          {{ getStatusText(order?.oilOrderStatus) }}
+        </view>
+      </view>
+
+      <!-- 油号 | 油枪 -->
+      <view class="mt16rpx text-26rpx text-#999">
+        {{ order.omsOrderOilVO?.itemName }} | {{ order.omsOrderOilVO?.gunNo }}号枪
+      </view>
+
+      <!-- 订单金额 -->
+      <view class="mt12rpx text-26rpx text-#999">
+        订单金额：<text class="text-#333">
+          ￥{{ order.omsOrderOilVO?.totalMoney }}
+        </text>
+      </view>
+
+      <!-- 根据状态显示不同金额 -->
+      <view v-if="order?.oilOrderStatus === 1" class="mt12rpx text-26rpx text-#999">
+        需付金额：<text class="text-#333">
+          ￥{{ order.omsOrderOilVO?.realMoney }}
+        </text>
+      </view>
+      <view v-else-if="order?.oilOrderStatus === 2" class="mt12rpx text-26rpx text-#999">
+        实付金额：<text class="text-#333">
+          ￥{{ order.omsOrderOilVO?.realMoney }}
+        </text>
+      </view>
+      <view v-else-if="order?.oilOrderStatus === 6" class="mt12rpx text-26rpx text-#999">
+        退款金额：<text class="text-#333">
+          ￥{{ order.omsOrderOilVO?.realMoney }}
+        </text>
+      </view>
+
+      <!-- 根据状态显示不同时间 -->
+      <view v-if="order?.oilOrderStatus === 1" class="mt12rpx text-26rpx text-#999">
+        下单时间：{{ order?.createTime }}
+      </view>
+      <view v-else-if="order?.oilOrderStatus === 2" class="mt12rpx text-26rpx text-#999">
+        支付时间：{{ order.omsOrderOilVO?.payTime }}
+      </view>
+      <view v-else-if="order?.oilOrderStatus === 6" class="mt12rpx text-26rpx text-#999">
+        退款时间：{{ order.omsOrderOilVO?.refundTime }}
+      </view>
+      <view v-else-if="order?.oilOrderStatus === 9" class="mt12rpx text-26rpx text-#999">
+        取消时间：{{ order?.cancelTime }}
+      </view>
+
+      <!-- 已支付显示合作方订单号 -->
+      <view v-if="order?.oilOrderStatus === 2 && order?.thirdOrderId" class="mt12rpx text-26rpx text-#999">
+        合作方订单号：{{ order?.thirdOrderId }}
+      </view>
+    </view>
+    <!-- 操作按钮 -->
+    <!-- <view v-if="order.oilOrderStatus === 1" class="mt20rpx flex items-center justify-end gap-20rpx">
+      <wd-button plain size="small" custom-class="action-btn" @click="handleCancelOrder(order)">
+        取消订单
+      </wd-button>
+      <wd-button plain size="small" custom-class="action-btn" @click="handlePay(order)">
+        付款
+      </wd-button>
+    </view>
+    <view v-else-if="order.oilOrderStatus === 2" class="mt20rpx flex items-center justify-end">
+      <wd-button plain size="small" custom-class="action-btn" @click="handleInvoice(order)">
+        申请开票
+      </wd-button>
+    </view> -->
+  </view>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

src/subPack-smqjh/order/components/OrderRenderer.vue

@@ -4,6 +4,7 @@ import xsbList from '../../components/xsb-orderList/xsb-orderList.vue'
 import filmList from '../../components/film-orderList/film-orderList.vue'
 import djkorder from '../../components/djk-order/index.vue'
 import videoRightsList from '../../components/videoRights-orderList/videoRights-orderList.vue'
+import Jy from '../../components/refueling-order/index.vue'
 
 interface Props {
   orderList: Api.xsbOrderList
@@ -32,5 +33,6 @@ defineEmits<{
       @refresh="$emit('refresh')"
     />
     <videoRightsList v-else-if="orderList.businessType === 'XNSP' || orderList.businessType === 'all'" :order="orderList" />
+    <Jy v-else-if="orderList.businessType === 'JY' || orderList.businessType === 'all'" :order="orderList" />
   </block>
 </template>

src/subPack-smqjh/order/order-data.ts

@@ -5,7 +5,7 @@ export const navTabTypeList = [
   { name: '电影演出', value: 'DYY' },
   { name: '视频权益', value: 'XNSP' },
   { name: '大健康', value: 'DJK' },
-  { name: '大牌点餐', value: 'SHOP' },
+  { name: '加油', value: 'JY' },
 ]
 
 export const orderStatusList = [

src/uni-pages.d.ts

@@ -56,6 +56,7 @@ interface NavigateToOptions {
        "/subPack-djk/shopinfo/index" |
        "/subPack-djk/welfare/index" |
        "/subPack-refueling/commonTab/index" |
+       "/subPack-refueling/orderDetaile/index" |
        "/subPack-refueling/webView/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}