Merge branch 'zzx'

src/subPack-charge/components/search.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { StaticUrl } from '@/config'
+// 如果需要从外部传入动态文本，可以使用 props
+defineProps<{
+  initialMapModeText?: string
+}>()
+// 如果需要从外部传入点击事件处理方法，也可以定义 emit
+defineEmits<{
+  (e: 'mapModeClick'): void
+}>()
+// 定义动态文本
+const mapModeText = ref('地图模式')
+// 定义点击事件处理方法
+function onMapModeClick() {
+  // 在这里添加点击逻辑
+  console.log('地图模式被点击')
+  // 示例：切换显示文本
+  // mapModeText.value = mapModeText.value === '地图模式' ? '列表模式' : '地图模式'
+}
+</script>
+
+<template>
+  <view class="flex items-center justify-between">
+    <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" />
+        <text class="ml-1">
+          贵阳
+        </text>
+      </view>
+      <view class="h-36rpx border-2rpx border-#AAAAAA border-solid" />
+      <view class="ml-16rpx text-#AAAAAA">
+        请输入目的地/电站名
+      </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="" />
+      <text>
+        {{ mapModeText }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.search-box{
+background: rgba(255, 255, 255, 0.7);
+border-radius: 16rpx;
+padding: 10rpx 20rpx;
+}
+</style>

src/subPack-charge/index/index.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import charge from '../components/search.vue'
 import router from '@/router'
+import { StaticUrl } from '@/config'
 
+const { statusBarHeight, MenuButtonHeight, opcity, userInfo } = storeToRefs(useSysStore())
 definePage({
   name: 'charge-index',
   islogin: false,
@@ -13,15 +16,35 @@ definePage({
 </script>
 
 <template>
-  <view class="180deg, #E2FF91 0%, rgba(158,214,5,0) 100%) bg-linear-gradient(">
+  <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(158,214,5,1);" :bordered="false" :z-index="99"
+      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()"
-    />
-  </view>
-
-  <view>
-    充电列表
+    >
+      <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` }" class="px24rpx">
+      <charge />
+      <view>
+        <view>
+          <image
+            class="h-100rpx w-100rpx"
+            :src="`${userInfo && userInfo?.avatarUrl ? userInfo.avatarUrl : `${StaticUrl}/charge-default-avatar.png`}`"
+          />
+          <view>
+            <view>游客</view>
+            <view>授权登录</view>
+          </view>
+        </view>
+      </view>
+    </view>
   </view>
 </template>