```

feat(subPack-charge): 添加充电相关页面功能

- 新增充电详情页面 (chargeDetail)，用于显示充电站详细信息和价格时段
- 新增正在充电页面 (chargeing)，提供实时充电状态监控和结束充电功能
- 新增启动终端页面 (chargeStart)，展示充电前的设备状态和参数信息
- 新增站点详情页面 (siteDetail)，包含站点介绍、费用信息和充电终端筛选
- 更新 pages.json 配置文件，注册新的充电功能子包页面路由
- 同步更新 uni-pages.d.ts 类型定义文件，添加新的页面路径类型支持
```

src/components.d.ts

@@ -41,7 +41,6 @@ declare module 'vue' {
     WdStatusTip: typeof import('wot-design-uni/components/wd-status-tip/wd-status-tip.vue')['default']
     WdStep: typeof import('wot-design-uni/components/wd-step/wd-step.vue')['default']
     WdSteps: typeof import('wot-design-uni/components/wd-steps/wd-steps.vue')['default']
-    WdSticky: typeof import('wot-design-uni/components/wd-sticky/wd-sticky.vue')['default']
     WdSwiper: typeof import('wot-design-uni/components/wd-swiper/wd-swiper.vue')['default']
     WdTab: typeof import('wot-design-uni/components/wd-tab/wd-tab.vue')['default']
     WdTabbar: typeof import('wot-design-uni/components/wd-tabbar/wd-tabbar.vue')['default']

src/config/index.ts

@@ -2,13 +2,13 @@ const mapEnvVersion = {
   /**
    * 开发版
    */
-  develop: 'http://192.168.1.166:8080', // 张
+  // develop: 'http://192.168.1.166:8080', // 张
   // develop: 'http://192.168.1.101:8080',
   // develop: 'http://192.168.0.157:8080',
   // develop: 'http://192.168.1.253:8080',
   // develop: 'http://192.168.1.89:8080', // 田
   // develop: 'http://47.109.84.152:8081',
-  // develop: 'https://smqjh.api.zswlgz.com',
+  develop: 'https://smqjh.api.zswlgz.com',
   /**
    * 体验版
    */

src/pages.json

@@ -310,6 +310,46 @@
     {
       "root": "subPack-charge",
       "pages": [
+        {
+          "path": "chargeDetail/chargeDetail",
+          "type": "page",
+          "name": "charge-detail",
+          "islogin": false,
+          "style": {
+            "navigationBarTitleText": "充电详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chargeing/chargeing",
+          "type": "page",
+          "name": "chargeing",
+          "islogin": true,
+          "style": {
+            "navigationBarTitleText": "正在充电",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chargeSiteDetail/chargeSiteDetail",
+          "type": "page",
+          "name": "charge-site-detail",
+          "islogin": true,
+          "style": {
+            "navigationBarTitleText": "站点详情",
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "chargeStart/chargeStart",
+          "type": "page",
+          "name": "charge-start",
+          "islogin": true,
+          "style": {
+            "navigationBarTitleText": "启动终端",
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "index/index",
           "type": "page",

src/pages/index/index.vue

@@ -55,7 +55,7 @@ onReachBottom(() => {
 const navList = computed(() => {
   const list = [
     { icon: `${StaticUrl}/xsb.png`, title: '星闪豹', name: 'xsb-homeTabbar', show: true },
-    { icon: `${StaticUrl}/smqjh-index-cd.png`, title: '充电', name: '', show: !isOnlineAudit.value }, // !isOnlineAudit.value
+    { icon: `${StaticUrl}/smqjh-index-cd.png`, title: '充电', name: 'charge-index', show: !isOnlineAudit.value }, // !isOnlineAudit.value
     { icon: `${StaticUrl}/smqjh-sp.png`, title: '电影演出', name: '', show: !isOnlineAudit.value },
     { icon: `${StaticUrl}/smqjh-vip.png`, title: '视频权益', name: '', show: !isOnlineAudit.value },
     { icon: `${StaticUrl}/smqjh-diancan.png`, title: '大牌点餐', name: '', show: !isOnlineAudit.value },

src/subPack-charge/chargeDetail/chargeDetail.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import router from '@/router'
+import { StaticUrl } from '@/config'
+
+const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
+const activeTab = ref('price')
+definePage({
+  name: 'charge-detail',
+  islogin: false,
+  style: {
+    navigationBarTitleText: '充电详情',
+    navigationStyle: 'custom',
+  },
+})
+
+// 切换选项卡的方法
+function switchTab(tab: string) {
+  activeTab.value = tab
+}
+
+// 计算样式的方法
+function getTabStyle(tab: string) {
+  return activeTab.value === tab
+    ? { background: '#9ED605', color: '#FFF' }
+    : {}
+}
+</script>
+
+<template>
+  <view class="charge-detail-page 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="content-page box-border px24rpx">
+      <view class="flex items-center gap-24rpx">
+        <view>
+          <view class="text-32rpx font-bold">
+            贵阳花果园购物中心充电站
+          </view>
+          <view class="mt-16rpx text-24rpx text-#AAA">
+            充电减免2小时停车费，超出部分按每小时3元计算
+          </view>
+        </view>
+        <view>icon</view>
+      </view>
+      <view class="items-centerrounded-16rpx mt-20rpx flex bg-#FFF p-20rpx">
+        <view class="w-230rpx text-center">
+          <view class="text-32rpx text-#9ED605 font-bold">
+            9
+          </view>
+          <view class="text-24rpx font-500">
+            空闲
+          </view>
+        </view>
+        <view class="h-76rpx w-2rpx bg-#F0F0F0" />
+        <view class="w-230rpx text-center">
+          <view class="text-32rpx text-#9ED605 font-bold">
+            7
+          </view>
+          <view class="text-24rpx font-500">
+            占用
+          </view>
+        </view>
+        <view class="h-76rpx w-2rpx bg-#F0F0F0" />
+        <view class="w-230rpx text-center">
+          <view class="text-32rpx text-#9ED605 font-bold">
+            6
+          </view>
+          <view class="text-24rpx font-500">
+            离线
+          </view>
+        </view>
+      </view>
+      <view class="mt-28rpx">
+        <view class="flex items-center justify-between rounded-42rpx bg-#FFF p-6rpx">
+          <view
+            class="h-80rpx w-348rpx rounded-60rpx text-center line-height-[80rpx]" :style="getTabStyle('price')"
+            @click="switchTab('price')"
+          >
+            电站价格
+          </view>
+          <view
+            class="h-80rpx w-348rpx rounded-60rpx text-center line-height-[80rpx]" :style="getTabStyle('terminal')"
+            @click="switchTab('terminal')"
+          >
+            充电终端
+          </view>
+        </view>
+      </view>
+      <view v-if="activeTab == 'price'">
+        <view class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx" style="border:2rpx solid #9ED605;">
+          <view class="relative flex items-center justify-between">
+            <view class="flex items-center gap-20rpx">
+              <view
+                class="h-40rpx w-40rpx rounded-8rpx bg-#CCC text-center text-28rpx text-#FFF font-bold line-height-[40rpx]"
+              >
+                谷
+              </view>
+              <view class="text-28rpx font-bold">
+                00：00-08：00
+              </view>
+            </view>
+            <view
+              class="absolute h-40rpx w-152rpx rounded-[0_16rpx_0_16rpx] bg-[linear-gradient(99deg,#D2F670_0%,#9ED605_100%)] text-center text-28rpx text-#FFF font-600 -right-24rpx -top-24rpx"
+            >
+              当前时段
+            </view>
+          </view>
+          <view class="mt-24rpx rounded-16rpx bg-#F6F6F6 p-20rpx">
+            <view class="flex items-center justify-between">
+              <view class="text-24rpx text-#222222">
+                抵扣券电价
+              </view>
+              <view class="text-24rpx" style="color: #FF6464;font-weight: 800;">
+                <text>0.8800</text>
+                <text class="text-#AAA">
+                  元/度
+                </text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view v-if="activeTab == 'terminal'">
+        <view class="mt-20rpx flex items-center gap-20rpx rounded-16rpx bg-#FFF p-20rpx">
+          <view
+            class="h-116rpx w-116rpx text-center line-height-[116rpx]"
+            :style="{ backgroundImage: `url(${StaticUrl}/site-status-kx.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }"
+          >
+            <view class="text-24rpx font-bold">
+              空闲
+            </view>
+          </view>
+          <view>
+            <view class="text-bold text-28rpx">
+              101号直流充电桩
+            </view>
+            <view class="mt-4rpx text-24rpx text-#AAA">
+              电类分类：直流设备
+            </view>
+            <view class="mt-4rpx text-24rpx text-#AAA">
+              终端编号：52155648615
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="h-180rpx" />
+    <view class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]">
+      扫码充电
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/subPack-charge/chargeMap/chargeMap.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import chargeSearch from '../components/search.vue'
+import chargeFooter from '../components/charge-tab.vue'
+import router from '@/router'
+import { StaticUrl } from '@/config'
+
+const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
+definePage({
+  name: 'charge-map',
+  islogin: false,
+  style: {
+    navigationBarTitleText: '地图模式',
+    navigationStyle: 'custom',
+  },
+})
+</script>
+
+<template>
+  <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()"
+    >
+      <template #left>
+        <view class="flex items-center">
+          <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>
+        </view>
+      </template>
+    </wd-navbar>
+    <!-- <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" /> -->
+    <view class="relative">
+      <view class="absolute z-1 box-border px24rpx" :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }">
+        <charge-search map-mode-text-value="列表模式" :map-mode-icon="`${StaticUrl}/charge-list.png`" @map-mode-click="router.push({ name: 'charge-index' })" />
+      </view>
+      <view class="absolute left-0 top-0 z-0 h-full w-full">
+        <map
+          style="width: 100%;height: 100vh;"
+          :longitude="113.264435"
+          :latitude="23.129163"
+        />
+      </view>
+    </view>
+    <chargeFooter />
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/subPack-charge/chargeSiteDetail/chargeSiteDetail.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import router from '@/router'
+import { StaticUrl } from '@/config'
+
+const swiperList = ['https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg']
+
+const { opcity } = storeToRefs(useSysStore())
+definePage({
+  name: 'charge-site-detail',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '站点详情',
+    navigationStyle: 'custom',
+  },
+})
+const activeFilter = ref('0')
+const filterOptions = [
+  { key: '0', label: '空闲(10)' },
+  { key: '1', label: '占用(8)' },
+  { key: '2', label: '离线(5)' },
+]
+// 处理筛选项点击的方法
+function handleFilterClick(filterKey: string) {
+  activeFilter.value = filterKey
+  console.log(`选择了: ${filterKey}`)
+}
+onMounted(() => {
+  opcity.value = 0
+})
+
+onPageScroll((e) => {
+  const calculatedOpacity = e.scrollTop / 100
+  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
+})
+</script>
+
+<template>
+  <view class="site-detail-page min-h-screen bg-#F6FAFF">
+    <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 class="site-detail-content relative">
+      <view>
+        <wd-swiper :list="swiperList" :height="260" :indicator="{ type: 'fraction' }" value-key="advertImg" />
+      </view>
+      <view class="absolute left-0 right-0 z-10 rounded-[32rpx_32rpx_0_0] bg-#FFF -bottom-100rpx">
+        <view class="mt-28rpx box-border px24rpx">
+          <view class="text-32rpx font-800">
+            贵阳花果园购物中心充电站
+          </view>
+          <view class="mt-20rpx flex items-center gap-20rpx">
+            <view class="h-30rpx w-30rpx rounded-4rpx bg-#5BE7FF text-center text-24rpx text-#fff line-height-[30rpx]">
+              P
+            </view>
+            <view class="text-24rpx text-#AAA">
+              充电减免2小时停车费，超出部分按每小时3元计算
+            </view>
+          </view>
+        </view>
+        <view class="box-border px24rpx">
+          <view
+            class="cardBg-set mt-20rpx box-border h-138rpx w-702rpx flex items-center justify-between rounded-16rpx"
+            :style="{ backgroundImage: `url(${StaticUrl}/site-detail-navBg.png)` }"
+          >
+            <view class="ml-24rpx">
+              <view class="text-28rpx text-#2B303A font-bold">
+                距离您1.3km
+              </view>
+              <view class="mt-8rpx w-408rpx overflow-hidden text-ellipsis whitespace-nowrap text-24rpx text-#AAA">
+                贵州省贵阳市观山湖区贵安新区群航贵州省贵阳市观山湖区贵
+              </view>
+            </view>
+            <view class="mr-24rpx">
+              <view>
+                <image class="h-40rpx w-40rpx" :src="`${StaticUrl}/site-detail-nav.png`" />
+              </view>
+              <view class="mt-8rpx text-24rpx">
+                导航
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="h-100rpx" />
+    <view class="mt20rpx box-border px24rpx">
+      <view class="rounded-24rpx bg-#FFF p-24rpx">
+        <view class="flex items-center justify-between">
+          <view class="text-32rpx font-bold">
+            费用信息
+          </view>
+          <view class="flex items-center" @click="router.push({ name: 'charge-detail' })">
+            <view class="text-24rpx text-#AAA">
+              查看全部
+            </view>
+            <wd-icon name="chevron-right" size="22px" color="#AAAAAA" />
+          </view>
+        </view>
+        <view class="mt-24rpx rounded-16rpx bg-[linear-gradient(90deg,#FEE4C6_0%,rgba(251,235,198,0.23)_100%)] p-24rpx">
+          <view class="relative flex items-center justify-between">
+            <view class="text-28rpx font-bold">
+              当前价
+            </view>
+            <view class="absolute -right-20rpx -top-20rpx">
+              <image class="h-52rpx w-125rpx" :src="`${StaticUrl}/site-price-tag.png`" />
+            </view>
+          </view>
+          <view class="mt-24rpx flex items-center justify-between">
+            <view>
+              <view class="flex items-center">
+                <text class="text-48rpx text-#FF6464 font-800">
+                  1.2026
+                </text>
+                <text class="text-24rpx">
+                  元/度
+                </text>
+              </view>
+              <view class="mt-12rpx text-28rpx">
+                当前时段：
+              </view>
+              <view class="text-bold mt-16rpx text-28rpx">
+                平13：00-17：00
+              </view>
+            </view>
+            <view>
+              <image class="h-182rpx w-88rpx" :src="`${StaticUrl}/site-price-icon.png`" />
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="mt-20rpx rounded-24rpx bg-#FFF p-24rpx">
+        <view class="flex items-center justify-between">
+          <view class="text-32rpx font-bold">
+            充电终端
+          </view>
+          <view class="flex items-center">
+            <view class="text-24rpx text-#AAA">
+              查看全部
+            </view>
+            <wd-icon name="chevron-right" size="22px" color="#AAAAAA" />
+          </view>
+        </view>
+        <view class="mt-28rpx flex items-center gap-20rpx">
+          <view
+            v-for="option in filterOptions" :key="option.key"
+            class="select-item h-60rpx w-152rpx text-28rpx line-height-[60rpx]" :class="[{ 'select-item-active': activeFilter === option.key },
+            ]" @click="handleFilterClick(option.key)"
+          >
+            {{ option.label }}
+          </view>
+        </view>
+        <view class="mt-24rpx">
+          <view class="mb-20rpx flex items-center gap-20rpx rounded-16rpx bg-#F6F6F6 p-20rpx" @click="router.push({ name: 'charge-start' })">
+            <view
+              class="h-116rpx w-116rpx text-center line-height-[116rpx]"
+              :style="{ backgroundImage: `url(${StaticUrl}/site-status-kx.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }"
+            >
+              <view class="text-24rpx font-bold">
+                空闲
+              </view>
+            </view>
+            <view>
+              <view class="text-bold text-28rpx">
+                101号直流充电桩
+              </view>
+              <view class="mt-4rpx text-24rpx text-#AAA">
+                电类分类：直流设备
+              </view>
+              <view class="mt-4rpx text-24rpx text-#AAA">
+                终端编号：52155648615
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="h-170rpx" />
+    <view class="fixed bottom-0 left-0 right-0 h-166rpx w-full rounded-[30rpx_30rpx_0_0] bg-#FFF">
+      <view
+        class="h-166rpx"
+        :style="{ backgroundImage: `url(${StaticUrl}/site-price-bg.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }"
+      >
+        <view class="h-166rpx flex items-center justify-center gap-32rpx">
+          <view class="ml-248rpx">
+            <text class="text-bold text-#F5531A">
+              ￥
+            </text>
+            <text class="text-bold text-40rpx text-#F5531A">
+              1.2099
+            </text>
+            <text class="text-24rpx text-#AAA">
+              元/度
+            </text>
+          </view>
+          <view class="scan-qrcode">
+            扫码充电
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.cardBg-set {
+  background-size: cover;
+  background-position: center;
+}
+
+.select-item {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  color: #2B303A;
+  text-align: center;
+}
+
+.select-item-active {
+  background: #9ED605;
+  box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100, 255, 218, 0.26);
+  border-radius: 0rpx 16rpx 0rpx 16rpx;
+  font-weight: bold;
+  color: #FFFFFF;
+}
+
+.scan-qrcode {
+  width: 220rpx;
+  height: 100rpx;
+  background: linear-gradient(90deg, #DBFC81 0%, #9ED605 100%);
+  box-shadow: inset 0rpx 6rpx 20rpx 2rpx #FFFFFF;
+  border-radius: 16rpx;
+  font-weight: 800;
+  font-size: 28rpx;
+  line-height: 112rpx;
+  text-align: center;
+}
+</style>

src/subPack-charge/chargeStart/chargeStart.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import router from '@/router'
+import { StaticUrl } from '@/config'
+
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
+definePage({
+  name: 'charge-start',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '启动终端',
+    navigationStyle: 'custom',
+  },
+})
+onMounted(() => {
+  opcity.value = 0
+})
+
+onPageScroll((e) => {
+  const calculatedOpacity = e.scrollTop / 100
+  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
+})
+</script>
+
+<template>
+  <view class="charge-start-page 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>
+      <view class="h-486rpx w-648rpx">
+        <image
+          class="h-full w-full"
+          :src="`${StaticUrl}/start-charge.png`"
+        />
+      </view>
+      <view class="mt-94rpx flex items-center justify-center">
+        <view class="w-182rpx text-center">
+          <view class="text-28rpx text-#AAA">
+            电流
+          </view>
+          <view class="mt-24rpx text-32rpx font-800">
+            126.80
+          </view>
+        </view>
+        <view class="h-40rpx w-2rpx bg-#DEDEDE" />
+        <view class="w-182rpx text-center">
+          <view class="text-28rpx text-#AAA">
+            电压V
+          </view>
+          <view class="mt-24rpx text-32rpx font-800">
+            126.80
+          </view>
+        </view>
+        <view class="h-40rpx w-2rpx bg-#DEDEDE" />
+        <view class="w-182rpx text-center">
+          <view class="text-28rpx text-#AAA">
+            功率KW
+          </view>
+          <view class="mt-24rpx text-32rpx font-800">
+            126.80
+          </view>
+        </view>
+      </view>
+      <view class="mt-40rpx px24rpx">
+        <view class="flex items-center justify-between">
+          <view class="text-28rpx font-bold">
+            当前电价
+          </view>
+          <view class="flex items-center">
+            <text class="text-30rpx text-#FC5A5A font-bold">
+              0.79元
+            </text>
+            <text class="text-28rpx text-#AAA">
+              /度
+            </text>
+          </view>
+        </view>
+        <view class="mt-20rpx flex items-center justify-between">
+          <view class="text-28rpx font-bold">
+            当前时段
+          </view>
+          <view class="text-28rpx text-#AAA">
+            平：13：00-17：00
+          </view>
+        </view>
+        <view class="mt-20rpx flex items-center justify-between">
+          <view class="text-28rpx font-bold">
+            停车参考
+          </view>
+          <view class="text-28rpx text-#AAA">
+            以车场实际计费规则为准
+          </view>
+        </view>
+        <view class="mt-28rpx text-24rpx text-#AAA">
+          账单信息可能会有所延迟，具体以实际结算为准
+        </view>
+      </view>
+    </view>
+    <view class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]" @click="router.push({ name: 'chargeing' })">
+      启动终端充电
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/subPack-charge/chargeing/chargeing.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import router from '@/router'
+import { StaticUrl } from '@/config'
+
+const time = ref<number>(30 * 60 * 60 * 1000)
+const stopCharge = ref(false)
+const current = ref(0)
+const isLongPressing = ref(false)
+const longPressTimer = ref< NodeJS.Timeout>()
+const longPressDuration = 3000 // 3秒
+
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
+definePage({
+  name: 'chargeing',
+  islogin: true,
+  style: {
+    navigationBarTitleText: '正在充电',
+    navigationStyle: 'custom',
+  },
+})
+onMounted(() => {
+  opcity.value = 0
+})
+
+onPageScroll((e) => {
+  const calculatedOpacity = e.scrollTop / 100
+  opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
+})
+
+function onTouchStart() {
+  isLongPressing.value = true
+  current.value = 0
+  const startTime = Date.now()
+  longPressTimer.value = setInterval(() => {
+    if (isLongPressing.value) {
+      const elapsed = Date.now() - startTime
+      current.value = Math.round(Math.min(100, (elapsed / longPressDuration) * 100))
+      if (elapsed >= longPressDuration) {
+        current.value = 100
+        clearInterval(longPressTimer.value)
+        // 执行停止充电逻辑，这里可以调用API或设置状态
+        console.log('停止充电')
+        stopCharge.value = false // 关闭弹窗
+        current.value = 0
+      }
+    }
+  }, 50) // 减少频率到50ms，避免抖动
+}
+
+function onTouchEnd() {
+  isLongPressing.value = false
+  if (current.value < 100) {
+    current.value = 0
+  }
+  clearInterval(longPressTimer.value)
+}
+
+onUnmounted(() => {
+  clearInterval(longPressTimer.value)
+})
+</script>
+
+<template>
+  <view class="chargeing-page 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>
+    <charge-loading />
+    </view> -->
+    <view>
+      <view class="flex items-center justify-center">
+        <l-progress-circle
+          :percent="80" bg-color="#E1FF8E" dot-color="#9ED605" :progress-color="{
+            type: 'radial',
+            colors: [
+              { offset: 0, color: '#9ED605' },
+              { offset: 1, color: '#CCF35F' },
+            ],
+          }" width="300rpx" height="194rpx"
+        >
+          <view>
+            <view class="flex items-center justify-center gap-8rpx">
+              <text class="text-60rpx font-800">
+                80
+              </text>
+              <text class="text-28rpx">
+                %
+              </text>
+            </view>
+            <view>
+              <text class="text-24rpx font-800">
+                充电枪正在
+              </text>
+              <text class="text-24rpx text-#9ED605 font-800">
+                充电中
+              </text>
+            </view>
+          </view>
+        </l-progress-circle>
+      </view>
+      <view class="h-486rpx w-648rpx">
+        <image
+          class="h-full w-full"
+          :src="`${StaticUrl}/start-charge.png`"
+        />
+      </view>
+    </view>
+    <view class="mt-64rpx text-center">
+      <wd-count-down :time="time">
+        <template #default="{ current }">
+          <text class="text-60rpx text-#9ED605 font-600">
+            {{ current.hours }}:{{ current.minutes }}:{{ current.seconds }}
+          </text>
+        </template>
+      </wd-count-down>
+      <view class="mt-16rpx text-32rpx font-bold">
+        充电时间
+      </view>
+    </view>
+    <view class="mt-32rpx flex items-center justify-center">
+      <view class="w-182rpx text-center">
+        <view class="text-28rpx text-#AAA">
+          电流
+        </view>
+        <view class="mt-20rpx">
+          <image
+            class="h-40rpx w-40rpx"
+            :src="`${StaticUrl}/charge-loading.png`"
+          />
+        </view>
+      </view>
+      <view class="h-40rpx w-2rpx bg-#DEDEDE" />
+      <view class="w-182rpx text-center">
+        <view class="text-28rpx text-#AAA">
+          功率KW
+        </view>
+        <view class="mt-20rpx">
+          <image
+            class="h-40rpx w-40rpx"
+            :src="`${StaticUrl}/charge-loading.png`"
+          />
+        </view>
+      </view>
+      <view class="h-40rpx w-2rpx bg-#DEDEDE" />
+      <view class="w-182rpx text-center">
+        <view class="text-28rpx text-#AAA">
+          电量/度
+        </view>
+        <view class="mt-20rpx">
+          <image
+            class="h-40rpx w-40rpx"
+            :src="`${StaticUrl}/charge-loading.png`"
+          />
+        </view>
+      </view>
+      <view class="h-40rpx w-2rpx bg-#DEDEDE" />
+      <view class="w-182rpx text-center">
+        <view class="text-28rpx text-#AAA">
+          费用/元
+        </view>
+        <view class="mt-20rpx">
+          <!-- <image
+            class="h-40rpx w-40rpx"
+            :src="`${StaticUrl}/charge-loading.png`"
+          /> -->
+          <text class="text-32rpx font-800">
+            0.14
+          </text>
+        </view>
+      </view>
+    </view>
+    <view class="mt-30rpx flex items-center justify-center">
+      <view class="h-76rpx w-192rpx rounded-16rpx bg-#9ED605 text-center text-28rpx text-#FFF font-800 line-height-[76rpx]" @click="stopCharge = true">
+        结束充电
+      </view>
+    </view>
+    <view class="mt-56rpx box-border px24rpx">
+      <view class="mt-28rpx flex items-center justify-between">
+        <view class="text-28rpx font-bold">
+          订单编号
+        </view>
+        <view class="text-28rpx text-#AAA">
+          46476465456464156486
+        </view>
+      </view>
+      <view class="mt-28rpx flex items-center justify-between">
+        <view class="text-28rpx font-bold">
+          终端编号
+        </view>
+        <view class="text-28rpx text-#AAA">
+          46476465456464156486
+        </view>
+      </view>
+      <view class="mt-28rpx flex items-center justify-between">
+        <view class="text-28rpx font-bold">
+          充电电站
+        </view>
+        <view class="text-28rpx text-#AAA">
+          贵阳国际会展中心充电站
+        </view>
+      </view>
+      <view class="mt-28rpx flex items-center justify-between">
+        <view class="text-28rpx font-bold">
+          充电终端
+        </view>
+        <view class="text-28rpx text-#AAA">
+          46476465456464156486
+        </view>
+      </view>
+      <view class="mt-28rpx text-24rpx text-#AAA">
+        账单信息可能会有所延迟，具体以实际结算为准
+      </view>
+    </view>
+    <wd-popup v-model="stopCharge" position="center" custom-style="border-radius:32rpx;background-color:rgba(255,255,255,0.1);">
+      <view class="h-200rpx w-200rpx" @touchstart="onTouchStart" @touchend="onTouchEnd">
+        <wd-circle v-model="current" color="#9ED605" text="长按停止" />
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<style lang="scss" scoped></style>

src/subPack-charge/components/charge-loading.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <view class="">
+    <view class="circleBox">
+      <view class="circle" />
+      <view class="circle1" />
+      <view class="circle2" />
+      <view class="circle3" />
+    </view>
+    <view class="text-center">
+      <view class="text-32rpx text-#9ED605 font-800">
+        充电正在启动中
+      </view>
+      <view class="mt-20rpx text-24rpx text-#AAA">
+        长时间无法启动可“长按结束充电"按钮结束订单
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .circleBox {
+  position: relative;
+  width: 400rpx;
+  height: 400rpx;
+  margin:auto;
+}
+
+.circle,
+.circle1,
+.circle2,
+.circle3 {
+  width: 80rpx;
+  height: 80rpx;
+  background: rgba(255, 255, 255, 1);
+  /* border: 1px solid rgba(62, 182, 248, 0.7); */
+  box-shadow: inset 0rpx 6rpx 40rpx 2rpx rgba(186,239,42,0.8);
+  border-radius: 999px;
+  position: absolute;
+  top: 38%;
+  left: 41%;
+  /* transform: translate(-50%,-75%); */
+}
+.circle1,
+.circle2,
+.circle3 {
+  animation-name: circleChange;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+.circle1 {
+  animation-delay: 1s;
+}
+.circle2 {
+  animation-delay: 2s;
+}
+.circle3 {
+  animation-delay: 3s;
+}
+
+@keyframes circleChange {
+  0% {
+    transform: scale(1);
+    opacity: 0.95;
+  }
+  25% {
+    transform: scale(2);
+    opacity: 0.75;
+  }
+  50% {
+    transform: scale(3);
+    opacity: 0.5;
+  }
+  75% {
+    transform: scale(4);
+    opacity: 0.25;
+  }
+  100% {
+    transform: scale(5);
+    opacity: 0.05;
+  }
+}
+</style>

src/subPack-charge/components/search.vue

@@ -1,27 +1,43 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { StaticUrl } from '@/config'
-// 如果需要从外部传入动态文本，可以使用 props
-defineProps<{
-  initialMapModeText?: string
-}>()
-// 如果需要从外部传入点击事件处理方法，也可以定义 emit
-defineEmits<{
-  (e: 'mapModeClick'): void
-}>()
-// 定义动态文本
-const mapModeText = ref('地图模式')
+
+// 添加动态图标和文字的 props
+interface Props {
+  mapModeIcon?: string
+  mapModeTextValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mapModeIcon: `${StaticUrl}/charge-map.png`,
+  mapModeTextValue: '',
+})
+
+const emit = defineEmits<Emits>()
+interface Emits {
+  (e: 'mapModeClick'): void // 简化 emit，不需要事件参数
+}
+// 定义动态文本和图标
+const mapModeText = ref(props.mapModeTextValue)
+const iconPath = ref(props.mapModeIcon)
+
+// 监听外部传入的文字和图标变化
+watch(() => props.mapModeTextValue, (newVal) => {
+  mapModeText.value = newVal
+})
+
+watch(() => props.mapModeIcon, (newVal) => {
+  iconPath.value = newVal
+})
+
 // 定义点击事件处理方法
 function onMapModeClick() {
-  // 在这里添加点击逻辑
-  console.log('地图模式被点击')
-  // 示例：切换显示文本
-  // mapModeText.value = mapModeText.value === '地图模式' ? '列表模式' : '地图模式'
+  emit('mapModeClick')
 }
 </script>
 
 <template>
-  <view class="flex items-center justify-between">
+  <view class="flex items-center justify-between gap-20rpx">
     <view class="search-box flex items-center">
       <view class="mr-16rpx flex items-center">
         <image :src="`${StaticUrl}/location-black.png`" class="h33.8rpx min-w28.97rpx w28.97rpx" />
@@ -35,7 +51,7 @@ function onMapModeClick() {
       </view>
     </view>
     <view class="search-box flex items-center gap-20rpx" @click="onMapModeClick">
-      <image :src="`${StaticUrl}/charge-map.png`" class="h-40rpx w-40rpx" mode="" />
+      <image :src="iconPath" class="h-40rpx w-40rpx" />
       <text>
         {{ mapModeText }}
       </text>

src/subPack-charge/index/index.vue

@@ -4,7 +4,8 @@ import chargeFooter from '../components/charge-tab.vue'
 import router from '@/router'
 import { StaticUrl } from '@/config'
 
-const { statusBarHeight, MenuButtonHeight, opcity, userInfo } = storeToRefs(useSysStore())
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
+const { userInfo } = storeToRefs(useUserStore())
 const swiperList = ['https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg']
 definePage({
   name: 'charge-index',
@@ -122,7 +123,7 @@ function handleFilterClick(filterKey: string) {
         </view>
       </view>
       <view>
-        <view class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx">
+        <view class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail' })">
           <image
             class="absolute right-0 top-0 h-52rpx w-186rpx"
             :src="`${StaticUrl}/charge-firm-tag.png`"

src/uni-pages.d.ts

@@ -29,6 +29,10 @@ type _LocationUrl =
   "/subPack-common/revalueSuccess/index" |
   "/subPack-common/user-center/index" |
   "/subPack-smqjh/order/index" |
+  "/subPack-charge/chargeDetail/chargeDetail" |
+  "/subPack-charge/chargeing/chargeing" |
+  "/subPack-charge/chargeSiteDetail/chargeSiteDetail" |
+  "/subPack-charge/chargeStart/chargeStart" |
   "/subPack-charge/index/index";
 
 interface NavigateToOptions {