Просмотр исходного кода

```
feat(charge): 新增充电订单详情页面并优化搜索列表功能

- 新增 chargeOrderDetail 页面用于显示充电订单详情
- 在 pages.json 中注册 chargeOrderDetail 页面路由
- 更新 uni-pages.d.ts 类型定义文件
- 移除 chargeMap 页面中的返回按钮图标
- 将搜索历史逻辑迁移到 charge store 中统一管理
- 实现搜索历史点击重新搜索功能
- 清理搜索历史时使用 store 方法替代本地存储操作
```

zouzexu 3 дней назад
Родитель
Сommit
9dd8461bb0

+ 10 - 0
src/pages.json

@@ -340,6 +340,16 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "chargeOrderDetail/chargeOrderDetail",
+          "type": "page",
+          "name": "charge-order-detail",
+          "islogin": true,
+          "style": {
+            "navigationBarTitleText": "订单详情",
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "chargeSearchList/chargeSearchList",
           "type": "page",

+ 2 - 2
src/subPack-charge/chargeMap/chargeMap.vue

@@ -48,11 +48,11 @@ function openMarkerTap(item: any) {
   <view class="map-page min-h-screen bg-#F6FAFF">
     <wd-navbar
       title="" custom-style="background:linear-gradient( 180deg, #E2FF91 0%, rgba(158,214,5,0) 100%)"
-      :bordered="false" :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
+      :bordered="false" :z-index="99" safe-area-inset-top fixed
     >
       <template #left>
         <view class="flex items-center">
-          <wd-icon name="arrow-left" size="22px" color="#000" />
+          <!-- <wd-icon name="arrow-left" size="22px" color="#000" /> -->
           <view class="relative z-10 h62rpx w-full w180rpx opacity-100">
             <image class="absolute left-0 top-0 h62rpx w180rpx" :src="`${StaticUrl}/charge-logo.png`" />
           </view>

+ 172 - 0
src/subPack-charge/chargeOrderDetail/chargeOrderDetail.vue

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import router from '@/router'
+
+const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
+
+definePage({
+  name: 'charge-order-detail',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '订单详情',
+    navigationStyle: 'custom',
+  },
+})
+</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-20rpx">
+          <view>icon</view>
+          <view class="text-28rpx">
+            充电度数
+          </view>
+        </view>
+        <view class="mt-20rpx text-28rpx text-#9ED605 font-bold">
+          60.800度电
+        </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">
+            2024-07-02  23:10:05
+          </view>
+        </view>
+        <view class="mt-28rpx">
+          <view class="text-24rpx text-#AAA">
+            终止时间
+          </view>
+          <view class="mt-20rpx text-32rpx font-bold">
+            2024-07-02  23:10:05
+          </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">
+            已完成
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx font-500">
+            订单编号
+          </view>
+          <view class="text-28rpx text-#AAA">
+            5215564861554994
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx font-500">
+            订单时间
+          </view>
+          <view class="text-28rpx text-#AAA">
+            2024-07-07 23:13:12
+          </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">
+            402号直流快充
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx font-500">
+            终端编号
+          </view>
+          <view class="text-28rpx text-#AAA">
+            52155648615
+          </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">
+            2.82元
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center justify-between">
+          <view class="text-28rpx font-500">
+            服务费
+          </view>
+          <view class="text-28rpx text-#AAA">
+            0.71元
+          </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">
+            0.71元
+          </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>

+ 13 - 14
src/subPack-charge/chargeSearchList/chargeSearchList.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import router from '@/router'
+import { useSysChargeStore } from '@/subPack-charge/store-charge/sys'
 
 const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
 const { Location } = storeToRefs(useAddressStore())
+const sysChargeStore = useSysChargeStore()
+const { searchHistory } = storeToRefs(sysChargeStore)
 definePage({
   name: 'cahrge-search-list',
   islogin: false,
@@ -12,11 +15,10 @@ definePage({
   },
 })
 const keyword = ref('')
-const searchHistory = ref<string[]>([])
 
 onMounted(() => {
   opcity.value = 0
-  searchHistory.value = uni.getStorageSync('searchHistory') || []
+  // 搜索历史由 persistPlugin 自动恢复
 })
 onPageScroll((e) => {
   const calculatedOpacity = e.scrollTop / 100
@@ -33,15 +35,13 @@ async function searchData() {
   const res = await Apis.charge.search({ data: { keyword: keyword.value, longitude: Location.value?.longitude, latitude: Location.value?.latitude } })
   searchList.value = res.data
   useGlobalLoading().close()
-
   // 添加到搜索历史
-  if (keyword.value && !searchHistory.value.includes(keyword.value)) {
-    searchHistory.value.unshift(keyword.value)
-    if (searchHistory.value.length > 10) {
-      searchHistory.value = searchHistory.value.slice(0, 10)
-    }
-    uni.setStorageSync('searchHistory', searchHistory.value)
-  }
+  sysChargeStore.addToSearchHistory(keyword.value)
+}
+
+function reSearch(e: string) {
+  keyword.value = e
+  searchData()
 }
 
 function clearHistory() {
@@ -49,8 +49,7 @@ function clearHistory() {
     msg: '确认清空搜索历史吗?',
     cancelButtonText: '取消',
     success: () => {
-      searchHistory.value = []
-      uni.removeStorageSync('searchHistory')
+      sysChargeStore.clearSearchHistory()
     },
   })
 }
@@ -86,7 +85,7 @@ function clearHistory() {
           </view>
         </view>
         <view class="mt-10rpx w-702rpx flex flex-wrap items-center gap-14rpx">
-          <view v-for="item in searchHistory" :key="item" class="rounded-30rpx bg-#FFF p-[10rpx_20rpx_10rpx_20rpx] text-24rpx">
+          <view v-for="item in searchHistory" :key="item" class="rounded-30rpx bg-#FFF p-[10rpx_20rpx_10rpx_20rpx] text-24rpx" @click="reSearch(item)">
             {{ item }}
           </view>
         </view>
@@ -100,7 +99,7 @@ function clearHistory() {
             共计{{ searchList.length }}条
           </view>
         </view>
-        <view v-for="item in searchList" :key="item.stationId" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx">
+        <view v-for="item in searchList" :key="item.stationId" class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
           <view class="text-32rpx font-bold">
             {{ item.stationName }}
           </view>

+ 84 - 74
src/subPack-charge/index/index.vue

@@ -18,6 +18,7 @@ definePage({
   },
 })
 const activeFilter = ref<number>(1)
+const loading = ref(true)
 const filterOptions = [
   { key: 1, label: '离我最近', widthClass: 'w-152rpx' },
   { key: 2, label: '空闲最多', widthClass: '' },
@@ -29,19 +30,26 @@ const filterOptions = [
  */
 const { data: stationList, isLastPage, page, refresh, reload } = usePagination((pageNum, pageSize) =>
   Apis.charge.getStationInfoPage({ data: { pageNum, pageSize, sortType: activeFilter.value, longitude: Location.value.longitude || 106.620256, latitude: Location.value.latitude || 26.648327, userId: userInfo.value.id } }), {
-  data: resp => resp.data?.list,
+  data: (resp) => {
+    return resp.data?.list
+  },
   initialData: [],
   initialPage: 1,
   initialPageSize: 10,
   append: true,
   immediate: true,
   middleware: createGlobalLoadingMiddleware(),
+}).onSuccess(() => {
+  loading.value = false
 })
 onMounted(() => {
   getUserAccountInfo()
   opcity.value = 0
 })
-onShow(() => refresh())
+onShow(() => {
+  refresh()
+  getUserAccountInfo()
+})
 onPageScroll((e) => {
   const calculatedOpacity = e.scrollTop / 100
   opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
@@ -123,7 +131,7 @@ function handleFilterClick(filterKey: number) {
               </view>
             </view>
           </view>
-          <view class="flex items-center gap-20rpx bg-#F3FFD1 p-24rpx">
+          <view class="flex items-center gap-20rpx bg-#F3FFD1 p-24rpx" @click="router.push({ name: 'smqjh-order' })">
             <view>
               <view class="text-28rpx font-bold">
                 充电订单
@@ -152,88 +160,90 @@ function handleFilterClick(filterKey: number) {
           {{ option.label }}
         </view>
       </view>
-      <view>
-        <view v-for="item in stationList" :key="item.stationId" class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
-          <image
-            class="absolute right-0 top-0 h-52rpx w-186rpx"
-            :src="`${StaticUrl}/charge-firm-tag.png`"
-          />
-          <view class="text-32rpx text-#2B303A font-bold">
-            {{ item.stationName }}
-          </view>
-          <view class="mt-20rpx text-24rpx text-#aaa">
-            {{ item.tips || '暂无提示' }}
-          </view>
-          <view class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx">
-            <view class="flex items-center gap-16rpx">
-              <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
-                快
-              </view>
-              <view class="flex items-center">
-                <text class="text-32rpx font-bold">
-                  {{ item.fastCharging }}
-                </text>
-              </view>
+      <view :class="[loading ? 'pt-24rpx' : '']">
+        <wd-skeleton theme="paragraph" animation="gradient" :loading="loading" :row-col="[{ height: '100px', width: '100%' }, { height: '100px', width: '100%' }, { height: '100px', width: '100%' }]">
+          <view v-for="item in stationList" :key="item.stationId" class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
+            <image
+              class="absolute right-0 top-0 h-52rpx w-186rpx"
+              :src="`${StaticUrl}/charge-firm-tag.png`"
+            />
+            <view class="text-32rpx text-#2B303A font-bold">
+              {{ item.stationName }}
             </view>
-            <view class="ml-40rpx flex items-center gap-16rpx">
-              <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
-                慢
-              </view>
-              <view class="flex items-center">
-                <text class="text-32rpx font-bold">
-                  {{ item.slowCharging }}
-                </text>
-              </view>
+            <view class="mt-20rpx text-24rpx text-#aaa">
+              {{ item.tips || '暂无提示' }}
             </view>
-            <view class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]">
-              <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#3EB6F8 text-center">
-                <wd-icon name="location" size="16px" color="#FFF" />
+            <view class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx">
+              <view class="flex items-center gap-16rpx">
+                <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
+                  快
+                </view>
+                <view class="flex items-center">
+                  <text class="text-32rpx font-bold">
+                    {{ item.fastCharging }}
+                  </text>
+                </view>
               </view>
-              <view class="text-24rpx text-#3EB6F8">
-                {{ item.distance }}km
+              <view class="ml-40rpx flex items-center gap-16rpx">
+                <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
+                  慢
+                </view>
+                <view class="flex items-center">
+                  <text class="text-32rpx font-bold">
+                    {{ item.slowCharging }}
+                  </text>
+                </view>
               </view>
-            </view>
-          </view>
-          <view v-if="!item.enterprisePrice" class="mt-28rpx flex items-center justify-between">
-            <view class="relative flex">
-              <view class="absolute left-30rpx z-10 flex items-center -top-26rpx">
-                <text class="text-40rpx text-#FF6464 font-bold">
-                  {{ item.platformPrice }}
-                </text>
-                <text class="w-100rpx text-24rpx">
-                  元/度
-                </text>
+              <view class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]">
+                <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#3EB6F8 text-center">
+                  <wd-icon name="location" size="16px" color="#FFF" />
+                </view>
+                <view class="text-24rpx text-#3EB6F8">
+                  {{ item.distance }}km
+                </view>
               </view>
-              <image
-                class="absolute h-60rpx w-365rpx -top-30rpx"
-                :src="`${StaticUrl}/to-charge-tag.png`"
-              />
-            </view>
-            <view class="text-24rpx text-#2B303A">
-              {{ item.peakValue }}:{{ item.peakTime }}
             </view>
-          </view>
-          <view v-else class="mt-20rpx flex items-center justify-between">
-            <view class="flex items-center">
-              <view class="flex items-center -mt-10rpx">
-                <text class="text-40rpx text-#FF6464 font-bold">
-                  {{ item.platformPrice }}
-                </text>
-                <text class="w-100rpx text-24rpx">
-                  元/度
-                </text>
+            <view v-if="!item.enterprisePrice" class="mt-28rpx flex items-center justify-between">
+              <view class="relative flex">
+                <view class="absolute left-30rpx z-10 flex items-center -top-26rpx">
+                  <text class="text-40rpx text-#FF6464 font-bold">
+                    {{ item.platformPrice }}
+                  </text>
+                  <text class="w-100rpx text-24rpx">
+                    元/度
+                  </text>
+                </view>
+                <image
+                  class="absolute h-60rpx w-365rpx -top-30rpx"
+                  :src="`${StaticUrl}/to-charge-tag.png`"
+                />
               </view>
-              <view class="h-52rpx w-212rpx text-center" :style="{ backgroundImage: `url(${StaticUrl}/charge-firm.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
-                <text class="ml-70rpx text-28rpx text-#FF6464">
-                  {{ item.enterprisePrice }}
-                </text>
+              <view class="text-24rpx text-#2B303A">
+                {{ item.peakValue }}:{{ item.peakTime }}
               </view>
             </view>
-            <view class="text-24rpx text-#2B303A">
-              {{ item.peakValue }}:{{ item.peakTime }}
+            <view v-else class="mt-20rpx flex items-center justify-between">
+              <view class="flex items-center">
+                <view class="flex items-center -mt-10rpx">
+                  <text class="text-40rpx text-#FF6464 font-bold">
+                    {{ item.platformPrice }}
+                  </text>
+                  <text class="w-100rpx text-24rpx">
+                    元/度
+                  </text>
+                </view>
+                <view class="h-52rpx w-212rpx text-center" :style="{ backgroundImage: `url(${StaticUrl}/charge-firm.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+                  <text class="ml-70rpx text-28rpx text-#FF6464">
+                    {{ item.enterprisePrice }}
+                  </text>
+                </view>
+              </view>
+              <view class="text-24rpx text-#2B303A">
+                {{ item.peakValue }}:{{ item.peakTime }}
+              </view>
             </view>
           </view>
-        </view>
+        </wd-skeleton>
       </view>
       <view class="h-160rpx" />
     </view>

+ 39 - 0
src/subPack-charge/store-charge/sys.ts

@@ -0,0 +1,39 @@
+import { defineStore } from 'pinia'
+
+interface SysState {
+  /**
+   * 搜索历史
+   */
+  searchHistory: string[]
+}
+
+export const useSysChargeStore = defineStore('system-charge', {
+  state: (): SysState => ({
+    searchHistory: [],
+  }),
+  actions: {
+    /**
+     * 获取搜索历史
+     */
+    getSearchHistory() {
+    },
+    /**
+     * 添加到搜索历史
+     * @param keyword 搜索关键词
+     */
+    addToSearchHistory(keyword: string) {
+      if (keyword && !this.searchHistory.includes(keyword)) {
+        this.searchHistory.unshift(keyword)
+        if (this.searchHistory.length > 10) {
+          this.searchHistory = this.searchHistory.slice(0, 10)
+        }
+      }
+    },
+    /**
+     * 清空搜索历史
+     */
+    clearSearchHistory() {
+      this.searchHistory = []
+    },
+  },
+})

+ 45 - 0
src/subPack-smqjh/components/charge-orderList/charge-orderList.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import router from '@/router'
+
+defineProps<{
+  orderList: Api.xsbOrderList[]
+  subPackOrder: any
+}>()
+</script>
+
+<template>
+  <view class="">
+    <view v-for="item in orderList" :key="item.orderNumber" class="mt-20rpx mt20rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'charge-order-detail' })">
+      <view class="flex items-center justify-between">
+        <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">
+          {{ 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>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

+ 127 - 0
src/subPack-smqjh/components/xsb-orderList/xsb-orderList.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { StaticUrl } from '@/config'
+import router from '@/router'
+
+const props = defineProps<{
+  orderList: Api.xsbOrderList[]
+  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) {
+  router.push({ name: 'xsb-orderDetaile', params: { id: no } })
+}
+</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 text-#FF4D3A">
+        <template v-if="item.hbOrderStatus !== props.subPackOrder?.OrderStatus.PaddingPay">
+          {{ props.subPackOrder?.handleCommonOrderStatusText(item) }}
+        </template>
+        <template v-else>
+          <view class="flex items-center">
+            待支付( 还剩 <wd-count-down :time="props.subPackOrder?.handleCommonOrderStatusText(item)" @finish="$emit('refresh')" /> )
+          </view>
+        </template>
+      </view>
+    </view>
+    <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
+    <view>
+      <!-- <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
+            <view class="flex items-center">
+              <image :src="`${StaticUrl}/order-car.png`" class="h36rpx w36rpx" />
+              <view class="ml20rpx text-28rpx text-#222 font-semibold">
+                预计10:40前可送达
+              </view>
+            </view>
+            <view class="mt18rpx">
+              您的订单预计3月7日 10:40前送达
+            </view>
+            <view class="mt20rpx">
+              2025-03-26 11:56:07
+            </view>
+          </view> -->
+      <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>
+    </view>
+    <view 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>
+        <!-- <view class="ml20rpx">
+              <wd-button size="small" plain type="error" >
+                再次购买
+              </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></style>

+ 36 - 109
src/subPack-smqjh/order/index.vue

@@ -1,8 +1,9 @@
 <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 { navTabTypeList, orderStatusList } from './order-data'
 import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
-import { StaticUrl } from '@/config'
-import router from '@/router'
 
 definePage({
   name: 'smqjh-order',
@@ -33,6 +34,26 @@ const { data: orderList, refresh, isLastPage, page, reload } = usePagination((pa
   append: true,
   middleware: createGlobalLoadingMiddleware(),
 })
+
+const xsbOrderList = 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 === 'CHARGE') {
+    return orderList.value
+  }
+  return []
+})
 onMounted(async () => {
   subPackOrder.value = await AsyncImport('@/subPack-xsb/utils/order-data')
   subPackComfirm.value = await AsyncImport('@/subPack-xsb/utils/confirm-order')
@@ -48,20 +69,16 @@ onShow(() => {
   orderList.value = []
   refresh()
 })
-function handleChangeStatus(value: string) {
-  orderStatusActive.value = value
-  orderList.value = []
-  reload()
-}
-function handleClick(no: string) {
-  console.log(12)
-  router.push({ name: 'xsb-orderDetaile', params: { id: no } })
-}
 onReachBottom(() => {
   if (!isLastPage.value) {
     page.value++
   }
 })
+function handleChangeStatus(value: string) {
+  orderStatusActive.value = value
+  orderList.value = []
+  reload()
+}
 async function handleCancel(order: Api.xsbOrderList) {
   await subPackOrder.value?.handleCommonCancelOrder(order)
   reload()
@@ -126,104 +143,14 @@ async function handleAfterSale(item: Api.xsbOrderList) {
       </view>
     </view>
     <view class="px24rpx">
-      <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 text-#FF4D3A">
-            <template v-if="item.hbOrderStatus !== subPackOrder?.OrderStatus.PaddingPay">
-              {{ subPackOrder?.handleCommonOrderStatusText(item) }}
-            </template>
-            <template v-else>
-              <view class="flex items-center">
-                待支付( 还剩 <wd-count-down :time="subPackOrder?.handleCommonOrderStatusText(item)" @finish="refresh" /> )
-              </view>
-            </template>
-          </view>
-        </view>
-        <view class="my24rpx h2rpx w-full bg-#F0F0F0" />
-        <view>
-          <!-- <view class="mb20rpx box-border rounded-16rpx bg-#F9F9F9 p24rpx">
-            <view class="flex items-center">
-              <image :src="`${StaticUrl}/order-car.png`" class="h36rpx w36rpx" />
-              <view class="ml20rpx text-28rpx text-#222 font-semibold">
-                预计10:40前可送达
-              </view>
-            </view>
-            <view class="mt18rpx">
-              您的订单预计3月7日 10:40前送达
-            </view>
-            <view class="mt20rpx">
-              2025-03-26 11:56:07
-            </view>
-          </view> -->
-          <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>
-        </view>
-        <view class="my24rpx flex items-center justify-end">
-          <template v-if="item.hbOrderStatus === subPackOrder?.OrderStatus.PaddingPay">
-            <view class="mr20rpx">
-              <wd-button size="small" plain type="info" @click.stop="handleCancel(item)">
-                取消订单
-              </wd-button>
-            </view>
-            <view class="mr20rpx">
-              <wd-button size="small" plain type="error" @click.stop="handlePay(item.orderNumber as string)">
-                付款
-              </wd-button>
-            </view>
-          </template>
-          <template v-if="[subPackOrder?.OrderStatus.OrderCancel, subPackOrder?.OrderStatus.OrderCompleted].includes(item.hbOrderStatus) ">
-            <view class="mr20rpx">
-              <wd-button size="small" plain type="info" @click.stop="handleDel(item)">
-                删除订单
-              </wd-button>
-            </view>
-            <!-- <view class="ml20rpx">
-              <wd-button size="small" plain type="error" >
-                再次购买
-              </wd-button>
-            </view> -->
-          </template>
-          <template v-if="item.hbOrderStatus === subPackOrder?.OrderStatus.OrderArrived">
-            <view class="mr20rpx">
-              <wd-button size="small" plain type="info" @click.stop="handleSubmitOrder(item)">
-                确认收货
-              </wd-button>
-            </view>
-          </template>
-          <template v-if="item.refundStatus != 2 || [subPackOrder?.OrderStatus.OrderCompleted, subPackOrder?.OrderStatus.OrderWaitDelivery, subPackOrder?.OrderStatus.OrderAccepted].includes(item.hbOrderStatus) ">
-            <view class="mr20rpx">
-              <wd-button size="small" plain type="info" @click.stop="handleAfterSale(item)">
-                申请售后
-              </wd-button>
-            </view>
-          </template>
-        </view>
+      <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>
       <StatusTip v-if="!orderList.length" tip="暂无内容" />
     </view>

+ 1 - 0
src/subPack-smqjh/order/order-data.ts

@@ -1,6 +1,7 @@
 export const navTabTypeList = [
   { name: '全部', value: 'all' },
   { name: '星闪豹', value: 'XSB' },
+  { name: '充电', value: 'CHARGE' },
   { name: '电影演出', value: 'MOVIE' },
   { name: '视频权益', value: 'VIDEO' },
   { name: '大牌点餐', value: 'SHOP' },

+ 1 - 0
src/uni-pages.d.ts

@@ -32,6 +32,7 @@ type _LocationUrl =
   "/subPack-charge/chargeDetail/chargeDetail" |
   "/subPack-charge/chargeing/chargeing" |
   "/subPack-charge/chargeMap/chargeMap" |
+  "/subPack-charge/chargeOrderDetail/chargeOrderDetail" |
   "/subPack-charge/chargeSearchList/chargeSearchList" |
   "/subPack-charge/chargeSiteDetail/chargeSiteDetail" |
   "/subPack-charge/chargeStart/chargeStart" |