```

feat(charge): 添加充电页面用户信息卡片和筛选功能

- 移除WdSticky组件引用
- 重命名charge组件导入为chargeSearch
- 新增chargeFooter组件并引入
- 添加用户信息展示卡片，包含头像、昵称、积分和余额
- 实现充电站点筛选功能（离我最近、空闲最多、电费最低）
- 添加轮播图组件展示广告
- 优化充电站点列表UI布局
- 新增样式类userInfo-card、select-item等
```

src/components.d.ts

@@ -40,7 +40,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/subPack-charge/components/charge-tab.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { StaticUrl } from '@/config'
+</script>
+
+<template>
+  <view class="charge-footer">
+    <view class="ios flex items-center justify-center pb-20rpx -mt-26rpx">
+      <view class="img-box">
+        <image class="h-120rpx w-120rpx" :src="`${StaticUrl}/charge-qrCode.png`" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.charge-footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0rpx;
+  border-radius: 32rpx 32rpx 0rpx 0rpx;
+  background: #FFFFFF;
+  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
+  .img-box{
+    border-radius: 50%;
+    width: 140rpx;
+    height: 140rpx;
+    background: #FFFFFF;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+      box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
+  }
+}
+</style>

src/subPack-charge/index/index.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import charge from '../components/search.vue'
+import chargeSearch from '../components/search.vue'
+import chargeFooter from '../components/charge-tab.vue'
 import router from '@/router'
 import { StaticUrl } from '@/config'
 
 const { statusBarHeight, MenuButtonHeight, opcity, userInfo } = storeToRefs(useSysStore())
+const swiperList = ['https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg']
 definePage({
   name: 'charge-index',
   islogin: false,
@@ -13,13 +15,37 @@ definePage({
     backgroundColorBottom: '#fff',
   },
 })
+const filterOptions = [
+  { key: 'nearest', label: '离我最近', widthClass: 'w-152rpx' },
+  { key: 'most-available', label: '空闲最多', widthClass: '' },
+  { key: 'lowest-price', label: '电费最低', widthClass: '' },
+]
+const activeFilter = ref('nearest')
+
+// 处理筛选项点击的方法
+function handleFilterClick(filterKey: string) {
+  activeFilter.value = filterKey
+  console.log(`选择了: ${filterKey}`)
+  // 根据不同筛选类型执行相应操作
+  switch (filterKey) {
+    case 'nearest':
+      // 执行距离排序逻辑
+      break
+    case 'most-available':
+      // 执行空闲数量排序逻辑
+      break
+    case 'lowest-price':
+      // 执行价格排序逻辑
+      break
+  }
+}
 </script>
 
 <template>
   <view class="min-h-screen from-[#E2FF91] to-[rgba(158,214,5,0)] bg-gradient-to-b">
     <wd-navbar
-      title="" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`" :bordered="false" :z-index="99"
-      safe-area-inset-top left-arrow fixed @click-left="router.back()"
+      title="" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`" :bordered="false"
+      :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
     >
       <template #left>
         <view class="flex items-center">
@@ -31,22 +57,163 @@ definePage({
       </template>
     </wd-navbar>
     <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" class="px24rpx">
-      <charge />
-      <view>
-        <view>
+      <charge-search />
+      <view class="userInfo-card">
+        <view class="flex items-center gap-20rpx">
           <image
             class="h-100rpx w-100rpx"
             :src="`${userInfo && userInfo?.avatarUrl ? userInfo.avatarUrl : `${StaticUrl}/charge-default-avatar.png`}`"
           />
-          <view>
-            <view>游客</view>
-            <view>授权登录</view>
+          <view class="flex items-center gap-16rpx">
+            <view class="text-32rpx text-#2B303A font-bold">
+              {{ userInfo?.nickName || '游客' }}
+            </view>
+            <view class="text-24rpx text-#9ED605">
+              授权登录
+            </view>
+          </view>
+        </view>
+        <view class="mt-20rpx flex items-center justify-between gap-18rpx">
+          <view class="bg-#F3FFD1 p-24rpx">
+            <view class="flex items-center justify-between gap-48rpx text-28rpx text-#2B303A font-bold">
+              <view>我的积分</view>
+              <view>可用充电余额</view>
+            </view>
+            <view class="mt-24rpx flex items-center gap-30rpx text-40rpx text-#9ED605 font-bold">
+              <view class="flex items-center gap-20rpx">
+                <text>896</text>
+                <image class="h-48rpx w-48rpx" :src="`${StaticUrl}/charge-acc.png`" />
+              </view>
+              <view>
+                <text class="text-28rpx">
+                  ￥
+                </text>
+                89.6
+              </view>
+            </view>
+          </view>
+          <view class="flex items-center gap-20rpx bg-#F3FFD1 p-24rpx">
+            <view>
+              <view class="text-28rpx font-bold">
+                充电订单
+              </view>
+              <view class="mt-24rpx text-40rpx text-#9ED605 font-bold">
+                956
+              </view>
+            </view>
+            <image class="h-80rpx w-80rpx" :src="`${StaticUrl}/charge-order.png`" />
+          </view>
+        </view>
+      </view>
+      <view class="mt-24rpx">
+        <wd-swiper :list="swiperList" :height="100" :indicator="false" value-key="advertImg" />
+      </view>
+      <view class="mt-24rpx 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="[
+            option.widthClass,
+            { 'select-item-active': activeFilter === option.key },
+          ]"
+          @click="handleFilterClick(option.key)"
+        >
+          {{ option.label }}
+        </view>
+      </view>
+      <view>
+        <view class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx">
+          <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">
+            贵阳花果园购物中心充电站
+          </view>
+          <view class="mt-20rpx text-24rpx text-#aaa">
+            充电减免2小时停车费，超出部分按每小时3元计算
+          </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">
+                  12
+                </text>
+                <text class="text-24rpx text-#AAAAAA">
+                  /12
+                </text>
+              </view>
+            </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">
+                  12
+                </text>
+                <text class="text-24rpx text-#AAAAAA">
+                  /12
+                </text>
+              </view>
+            </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>
+              <view class="text-24rpx text-#3EB6F8">
+                1.55km
+              </view>
+            </view>
+          </view>
+          <view 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">
+                  1.0026
+                </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="text-24rpx text-#2B303A">
+              峰：10：00-13：00
+            </view>
           </view>
         </view>
       </view>
     </view>
+    <chargeFooter />
   </view>
 </template>
 
 <style scoped lang="scss">
+.userInfo-card {
+  background: #FFFFFF;
+  box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(158, 214, 5, 0.2);
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-top: 24rpx;
+}
+.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;
+}
 </style>