```

refactor(subPack-smqjh): 重构订单列表组件结构

移除旧的orderList.vue组件，引入新的OrderRenderer.vue组件来统
一处理不同类型的订单渲染逻辑。通过createFilteredList函数优
化订单列表的过滤计算逻辑，并将原有的订单渲染逻辑抽离到专门
的渲染器组件中，提高代码的可维护性和复用性。
```

src/subPack-smqjh/components/orderList.vue

@@ -1,158 +0,0 @@
-<script setup lang="ts">
-import { StaticUrl } from '@/config'
-import router from '@/router'
-
-const props = defineProps<{
-  orderList: Api.xsbOrderList[]
-  type: 'XSB' | 'CHARGE'
-  subPackOrder?: typeof import('@/subPack-xsb/utils/order-data')
-  subPackConfirm?: typeof import('@/subPack-xsb/utils/confirm-order')
-}>()
-
-const _emit = defineEmits<{
-  'cancel': [order: Api.xsbOrderList]
-  'pay': [orderNumber: string]
-  'submit': [order: Api.xsbOrderList]
-  'del': [order: Api.xsbOrderList]
-  'after-sale': [item: Api.xsbOrderList]
-  'refresh': []
-}>()
-
-function handleClick(no: string) {
-  if (props.type === 'XSB') {
-    router.push({ name: 'xsb-orderDetaile', params: { id: no } })
-  }
-  else {
-    router.push({ name: 'charge-order-detail' })
-  }
-}
-</script>
-
-<template>
-  <view v-for="item in orderList" :key="item.orderNumber" class="mt20rpx rounded-16rpx bg-white p24rpx">
-    <!-- 通用头部 -->
-    <view class="flex items-center justify-between">
-      <view class="flex items-center">
-        <image :src="`${StaticUrl}/order-icon.png`" class="h36rpx w36rpx" />
-        <view class="ml20rpx text-32rpx font-semibold">
-          {{ item.shopName }}
-        </view>
-      </view>
-      <view class="text-24rpx" :class="props.type === 'XSB' ? 'text-#FF4D3A' : 'text-#4EDC86'">
-        <template v-if="props.type === 'XSB' && item.hbOrderStatus !== props.subPackOrder?.OrderStatus.PaddingPay">
-          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
-        </template>
-        <template v-else-if="props.type === 'XSB'">
-          <view class="flex items-center">
-            待支付( 还剩 <wd-count-down :time="props.subPackOrder?.handleCommonOrderStatusText(item)" @finish="$emit('refresh')" /> )
-          </view>
-        </template>
-        <template v-else>
-          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
-        </template>
-      </view>
-    </view>
-    <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
-
-    <!-- XSB 特定内容 -->
-    <template v-if="props.type === 'XSB'">
-      <view
-        class="box-border h176rpx w-full flex items-center justify-between rounded-16rpx bg-#F9F9F9"
-        @click="handleClick(item.orderNumber as string)"
-      >
-        <view class="box-border h-full w480rpx py28rpx pl20rpx">
-          <scroll-view scroll-x class="h-full w-full whitespace-nowrap">
-            <view class="flex items-center">
-              <view v-for="goods in item.orderItemList" :key="goods.skuId" class="mr50rpx">
-                <image :src="goods.pic" class="h120rpx w120rpx" />
-              </view>
-            </view>
-          </scroll-view>
-        </view>
-        <view class="box-shadow box-border h-full flex-1 flex-shrink-0 px14rpx py40rpx">
-          <view class="text-center text-32rpx text-#FF4D3A font-semibold">
-            ￥{{ item.actualTotal }}
-          </view>
-          <view class="text-center text-28rpx text-#AAAAAA">
-            共{{ item.goodsTotal }}件
-          </view>
-        </view>
-      </view>
-    </template>
-
-    <!-- CHARGE 特定内容 -->
-    <template v-else>
-      <view class="flex items-center justify-between" @click="handleClick(item.orderNumber as string)">
-        <view>
-          <view class="text-28rpx font-bold">
-            {{ item.shopName }}
-          </view>
-          <view class="mt-20rpx text-24rpx text-#AAA">
-            订单时间：{{ item.createTime || '未知' }}
-          </view>
-          <view class="mt-20rpx text-24rpx text-#AAA">
-            终端名称：{{ item.orderItemList?.[0]?.goodsName || '未知' }}
-          </view>
-        </view>
-        <view class="text-28rpx text-#4EDC86">
-          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
-        </view>
-      </view>
-      <wd-divider />
-      <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.actualTotal }}
-        </view>
-      </view>
-    </template>
-
-    <!-- XSB 按钮 -->
-    <view v-if="props.type === 'XSB'" class="my24rpx flex items-center justify-end">
-      <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.PaddingPay">
-        <view class="mr20rpx">
-          <wd-button size="small" plain type="info" @click.stop="$emit('cancel', item)">
-            取消订单
-          </wd-button>
-        </view>
-        <view class="mr20rpx">
-          <wd-button size="small" plain type="error" @click.stop="$emit('pay', item.orderNumber as string)">
-            付款
-          </wd-button>
-        </view>
-      </template>
-      <template v-if="[props.subPackOrder?.OrderStatus.OrderCancel, props.subPackOrder?.OrderStatus.OrderCompleted].includes(item.hbOrderStatus)">
-        <view class="mr20rpx">
-          <wd-button size="small" plain type="info" @click.stop="$emit('del', item)">
-            删除订单
-          </wd-button>
-        </view>
-      </template>
-      <template v-if="item.hbOrderStatus === props.subPackOrder?.OrderStatus.OrderArrived">
-        <view class="mr20rpx">
-          <wd-button size="small" plain type="info" @click.stop="$emit('submit', item)">
-            确认收货
-          </wd-button>
-        </view>
-      </template>
-      <template v-if="item.refundStatus != 2 || [props.subPackOrder?.OrderStatus.OrderCompleted, props.subPackOrder?.OrderStatus.OrderWaitDelivery, props.subPackOrder?.OrderStatus.OrderAccepted].includes(item.hbOrderStatus)">
-        <view class="mr20rpx">
-          <wd-button size="small" plain type="info" @click.stop="$emit('after-sale', item)">
-            申请售后
-          </wd-button>
-        </view>
-      </template>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.box-shadow {
-  box-shadow: -6rpx 0rpx 6rpx 2rpx rgba(0, 0, 0, 0.04);
-}
-</style>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import chargeList from '../../components/charge-orderList/charge-orderList.vue'
+import xsbList from '../../components/xsb-orderList/xsb-orderList.vue'
+
+interface Props {
+  orderList: Api.xsbOrderList[]
+  navActiveTab: string
+  subPackOrder: any
+  subPackConfirm: any
+}
+
+defineProps<Props>()
+defineEmits<{
+  'cancel': [order: Api.xsbOrderList]
+  'pay': [orderNumber: string]
+  'submit': [order: Api.xsbOrderList]
+  'del': [order: Api.xsbOrderList]
+  'after-sale': [item: Api.xsbOrderList]
+  'refresh': []
+}>()
+</script>
+
+<template>
+  <template v-if="navActiveTab === 'all'">
+    <template v-for="order in orderList" :key="order.orderNumber">
+      <xsbList
+        v-if="order.businessType === 'XSB'"
+        :order-list="[order]"
+        :sub-pack-order="subPackOrder"
+        :sub-pack-confirm="subPackConfirm"
+        @cancel="$emit('cancel', $event)"
+        @pay="$emit('pay', $event)"
+        @submit="$emit('submit', $event)"
+        @del="$emit('del', $event)"
+        @after-sale="$emit('after-sale', $event)"
+        @refresh="$emit('refresh')"
+      />
+      <chargeList
+        v-else-if="order.businessType === 'CD'"
+        :order-list="[order]"
+        :sub-pack-order="subPackOrder"
+      />
+    </template>
+  </template>
+  <xsbList
+    v-else-if="navActiveTab === 'XSB'"
+    :order-list="orderList"
+    :sub-pack-order="subPackOrder"
+    :sub-pack-confirm="subPackConfirm"
+    @cancel="$emit('cancel', $event)"
+    @pay="$emit('pay', $event)"
+    @submit="$emit('submit', $event)"
+    @del="$emit('del', $event)"
+    @after-sale="$emit('after-sale', $event)"
+    @refresh="$emit('refresh')"
+  />
+  <chargeList
+    v-else-if="navActiveTab === 'CHARGE'"
+    :order-list="orderList"
+    :sub-pack-order="subPackOrder"
+  />
+</template>

src/subPack-smqjh/order/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import chargeList from '../components/charge-orderList/charge-orderList.vue'
-import xsbList from '../components/xsb-orderList/xsb-orderList.vue'
+import OrderRenderer from './components/OrderRenderer.vue'
 import { navTabTypeList, orderStatusList } from './order-data'
 import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
 
@@ -35,22 +34,30 @@ const { data: orderList, refresh, isLastPage, page, reload } = usePagination((pa
   middleware: createGlobalLoadingMiddleware(),
 })
 
-const xsbOrderList = computed(() => {
+function createFilteredList(navTabValue: string, businessType: string) {
+  return computed(() => {
+    if (navActiveTab.value === 'all') {
+      return orderList.value.filter(order => order.businessType === businessType)
+    }
+    else if (navActiveTab.value === navTabValue) {
+      return orderList.value
+    }
+    return []
+  })
+}
+
+const xsbOrderList = createFilteredList('XSB', 'XSB')
+const chargeOrderList = createFilteredList('CHARGE', 'CD')
+
+const currentOrderList = computed(() => {
   if (navActiveTab.value === 'all') {
-    return orderList.value.filter(order => order.businessType === 'XSB')
-  }
-  else if (navActiveTab.value === 'XSB') {
     return orderList.value
   }
-  return []
-})
-
-const chargeOrderList = computed(() => {
-  if (navActiveTab.value === 'all') {
-    return orderList.value.filter(order => order.businessType === 'CD')
+  else if (navActiveTab.value === 'XSB') {
+    return xsbOrderList.value
   }
   else if (navActiveTab.value === 'CHARGE') {
-    return orderList.value
+    return chargeOrderList.value
   }
   return []
 })
@@ -143,15 +150,18 @@ async function handleAfterSale(item: Api.xsbOrderList) {
       </view>
     </view>
     <view class="px24rpx">
-      <view v-if="navActiveTab === 'all' || navActiveTab === 'XSB'">
-        <xsbList
-          :order-list="xsbOrderList" :sub-pack-order="subPackOrder" :sub-pack-confirm="subPackComfirm"
-          @cancel="handleCancel" @pay="handlePay" @submit="handleSubmitOrder" @del="handleDel" @after-sale="handleAfterSale" @refresh="refresh"
-        />
-      </view>
-      <view v-if="navActiveTab === 'all' || navActiveTab === 'CHARGE'">
-        <chargeList :order-list="chargeOrderList" :sub-pack-order="subPackOrder" />
-      </view>
+      <OrderRenderer
+        :order-list="currentOrderList"
+        :nav-active-tab="navActiveTab"
+        :sub-pack-order="subPackOrder"
+        :sub-pack-confirm="subPackComfirm"
+        @cancel="handleCancel"
+        @pay="handlePay"
+        @submit="handleSubmitOrder"
+        @del="handleDel"
+        @after-sale="handleAfterSale"
+        @refresh="refresh"
+      />
       <StatusTip v-if="!orderList.length" tip="暂无内容" />
     </view>
     <view class="h-20rpx" />