style(theme): 更新主题色相关样式和图标

- 将多个硬编码颜色替换为主题色变量 var(--them-color)
- 优化充电详情页面背景及控件颜色样式
- 修改登录页验证码按钮文本颜色和背景渐变
- 替换“我的”页面图标为主题色字体图标并注释图片资源
- 调整加油站详情页面配置，去除无效导航样式
- 优化二维码扫码按钮及选择项背景样式应用主题色
- 重构用户中心头像上传逻辑，支持小程序和H5上传方式
- 移除和注释部分页面多余图片资源，替换为图标组件
- 调整订单详情用户头像为主题色字体图标，注释原图片标签

src/config/index.ts

@@ -44,9 +44,9 @@ function handleEnvVersion() {
   // #ifdef H5
   const mode = import.meta.env.MODE
   const h5Server = {
-    development: 'http://47.109.84.152:8081',
+    // development: 'http://47.109.84.152:8081',
     // development: 'http://192.168.0.157:8080',
-    // development: 'http://192.168.1.21:8080',
+    development: 'http://192.168.1.21:8080',
     production: 'https://smqjh.api.zswlgz.com',
   }
   return h5Server[mode as 'development' | 'production']

src/pages.json

@@ -725,8 +725,7 @@
           "name": "refuelDetaile",
           "islogin": false,
           "style": {
-            "navigationBarTitleText": "加油站详情",
-            "navigationStyle": "custom"
+            "navigationBarTitleText": "加油站详情"
           }
         },
         {

src/pages/login/index.vue

@@ -185,7 +185,7 @@ function goBack() {
             >
             <view
               class="ml20rpx flex-shrink-0 text-28rpx"
-              :class="[isSending ? 'text-#999' : 'text-#7CB305']"
+              :class="[isSending ? 'text-#999' : 'text-[var(--them-color)]']"
               @click="handleSendCode"
             >
               {{ isSending ? `${countdown}秒后重新发送` : '获取验证码' }}
@@ -197,9 +197,9 @@ function goBack() {
         <wd-button block size="large" @click="handleLogin">
           登录
         </wd-button>
-        <view class="mt20rpx text-center text-#999">
+        <!-- <view class="mt20rpx text-center text-#999">
           请使用市民请集合小程序账号进行登录
-        </view>
+        </view> -->
       </view>
     </view>
     <!-- #endif -->
@@ -211,6 +211,6 @@ function goBack() {
   height: calc(100vh - var(--window-top));
 }
 .login-page {
-background: linear-gradient( 180deg, #F3FFD1 0%, #FFFFFF 37.42%, #F3FFD1 100%);
+background: linear-gradient( 181deg, var(--them-color) 0%, #F9F9F9 100%);
 }
 </style>

src/pages/my/index.vue

@@ -50,7 +50,7 @@ function handleGo(item: { name: string, status: string }) {
       <view class="absolute bottom-100rpx left-0 box-border w-full flex items-center justify-between pl-48rpx pr-58rpx">
         <template v-if="!token">
           <!-- <image :src="`${StaticUrl}/9.png`" alt="" class="h-100rpx w-100rpx" /> -->
-          <i class="iconfont text-100rpx text-[var(--them-color)]">&#xe652;</i>
+          <i class="iconfont text-100rpx text-[var(--them-color)]">&#xe654;</i>
           <view class="text-32rpx font-semibold">
             请登录后使用完整功能
           </view>
@@ -71,10 +71,11 @@ function handleGo(item: { name: string, status: string }) {
             </view>
           </view>
           <view class="flex flex-col items-center" @click="router.push({ name: 'common-user-center' })">
-            <image
+            <!-- <image
               :src="`${StaticUrl}/user-setting.png`"
               class="h-48rpx w-48rpx"
-            />
+            /> -->
+            <wd-icon name="setting" size="22px" color="var(--them-color)" />
             <view class="mt-12rpx text-24rpx text-[var(--them-color)]">
               账户设置
             </view>

src/subPack-charge/chargeDetail/chargeDetail.vue

@@ -61,7 +61,7 @@ function switchTab(tab: string) {
 // 计算样式的方法
 function getTabStyle(tab: string) {
   return activeTab.value === tab
-    ? { background: '#9ED605', color: '#FFF' }
+    ? { background: 'var(--them-color)', color: '#FFF' }
     : {}
 }
 async function getDeviceInfo(connectorCode: string) {
@@ -92,9 +92,9 @@ async function scanCode() {
 </script>
 
 <template>
-  <view class="charge-detail-page min-h-screen bg-[linear-gradient(90deg,#F1FECC_0%,#EAFEFA_100%)]">
+  <view class="charge-detail-page min-h-screen bg-[linear-gradient(181deg,var(--them-color)_0%,#F5F7FB_100%)]">
     <wd-navbar
-      title="充电详情" custom-style="background: linear-gradient(90deg, #F1FECC 0%, #EAFEFA 100%);"
+      title="充电详情" custom-style="background: var(--them-color);"
       :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` }" />
@@ -104,7 +104,7 @@ async function scanCode() {
           <view class="text-32rpx font-bold">
             {{ priceDetail?.stationName }}
           </view>
-          <view class="mt-16rpx text-24rpx text-#AAA">
+          <view class="mt-16rpx text-24rpx text-#fff">
             {{ priceDetail?.tips || '--' }}
           </view>
         </view>
@@ -114,7 +114,7 @@ async function scanCode() {
       </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">
+          <view class="text-32rpx text-[var(--them-color)] font-bold">
             {{ connectorsDetail?.idleCount }}
           </view>
           <view class="text-24rpx font-500">
@@ -123,7 +123,7 @@ async function scanCode() {
         </view>
         <view class="h-76rpx w-2rpx bg-#F0F0F0" />
         <view class="w-230rpx text-center">
-          <view class="text-32rpx text-#9ED605 font-bold">
+          <view class="text-32rpx text-[var(--them-color)] font-bold">
             {{ connectorsDetail?.occupiedCount }}
           </view>
           <view class="text-24rpx font-500">
@@ -132,7 +132,7 @@ async function scanCode() {
         </view>
         <view class="h-76rpx w-2rpx bg-#F0F0F0" />
         <view class="w-230rpx text-center">
-          <view class="text-32rpx text-#9ED605 font-bold">
+          <view class="text-32rpx text-[var(--them-color)] font-bold">
             {{ connectorsDetail?.offlineCount }}
           </view>
           <view class="text-24rpx font-500">
@@ -160,7 +160,7 @@ async function scanCode() {
         <view
           v-for="item in priceDetail?.priceList" :key="item.timePeriod"
           class="mt-20rpx rounded-16rpx bg-#FFF p-24rpx"
-          :style="{ border: item.currentPeriod ? '2rpx solid #9ED605' : '' }"
+          :style="{ border: item.currentPeriod ? '2rpx solid var(--them-color)' : '' }"
         >
           <view class="relative flex items-center justify-between">
             <view class="flex items-center gap-20rpx">
@@ -175,7 +175,7 @@ async function scanCode() {
             </view>
             <view
               v-if="item.currentPeriod"
-              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"
+              class="absolute h-40rpx w-152rpx rounded-[0_16rpx_0_16rpx] bg-[linear-gradient(181deg,var(--them-color)_0%,#F5F7FB_100%)] text-center text-28rpx text-#FFF font-600 -right-24rpx -top-24rpx"
             >
               当前时段
             </view>
@@ -229,7 +229,7 @@ async function scanCode() {
     </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]"
+      class="fixed bottom-66rpx left-24rpx h-100rpx w-702rpx rounded-16rpx bg-[var(--them-color)] text-center text-28rpx font-800 line-height-[100rpx] shadow-[inset_0rpx_6rpx_20rpx_2rpx_#FFFFFF]"
       @click="scanCode"
     >
       扫码充电

src/subPack-charge/chargeSiteDetail/chargeSiteDetail.vue

@@ -319,7 +319,7 @@ async function scanCode() {
 }
 
 .select-item-active {
-  background: #9ED605;
+  background: var(--them-color);
   box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100, 255, 218, 0.26);
   border-radius: 0rpx 16rpx 0rpx 16rpx;
   font-weight: bold;
@@ -329,7 +329,7 @@ async function scanCode() {
 .scan-qrcode {
   width: 220rpx;
   height: 100rpx;
-  background: linear-gradient(90deg, #DBFC81 0%, #9ED605 100%);
+  background: var(--them-color);
   box-shadow: inset 0rpx 6rpx 20rpx 2rpx #FFFFFF;
   border-radius: 16rpx;
   font-weight: 800;

src/subPack-common/user-center/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import router from '@/router'
+import { BASE_URL } from '@/config'
 
 definePage({
   name: 'common-user-center',
@@ -9,11 +10,62 @@ definePage({
   },
 })
 const { userInfo, getUserAvatar } = storeToRefs(useUserStore())
+
+async function uploadAvatar(filePath: string) {
+  uni.showLoading({ title: '上传中...', mask: true })
+  try {
+    const { token } = useUserStore()
+    const uploadRes = await new Promise<UniApp.UploadFileSuccessCallbackResult>((resolve, reject) => {
+      uni.uploadFile({
+        url: `${BASE_URL}/smqjh-system/api/v1/files`,
+        filePath,
+        name: 'file',
+        header: {
+          authorization: token || 'Basic c21xamgtYXBwbGV0OjEyMzQ1Ng==',
+        },
+        success: resolve,
+        fail: reject,
+      })
+    })
+    const data = JSON.parse(uploadRes.data)
+    const url = data?.data?.url || data?.url
+    if (!url) {
+      useGlobalToast().show({ msg: '上传失败' })
+      return
+    }
+    await useUserStore().updataUserInfo({ ...userInfo.value, avatarUrl: url })
+  }
+  finally {
+    uni.hideLoading()
+  }
+}
+
 async function handleChooseAvatar(e: UniHelper.ButtonOnChooseavatarEvent) {
-  const res = await Apis.sys.uploadFile({ data: { filePath: e.avatarUrl, name: 'file' }, fileType: 'image', requestType: 'upload', headers: {
-    'Content-Type': 'multipart/form-data',
-  } })
-  useUserStore().updataUserInfo({ ...userInfo.value, avatarUrl: res.url })
+  await uploadAvatar(e.avatarUrl)
+}
+
+function chooseImage() {
+  return new Promise<UniApp.ChooseImageSuccessCallbackResult>((resolve, reject) => {
+    uni.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album', 'camera'],
+      success: resolve,
+      fail: reject,
+    })
+  })
+}
+
+async function handleUplaod() {
+  // #ifdef H5
+  const res = await chooseImage()
+  const filePath = res.tempFilePaths?.[0]
+  console.log(filePath, '======================')
+  if (!filePath) {
+    return
+  }
+  await uploadAvatar(filePath)
+  // #endif
 }
 </script>
 
@@ -23,7 +75,12 @@ async function handleChooseAvatar(e: UniHelper.ButtonOnChooseavatarEvent) {
       <view class="flex items-center justify-between">
         <view>头像</view>
         <view class="h60rpx w60rpx">
+          <!-- #ifdef MP-WEIXIN -->
           <wd-button :icon="getUserAvatar" type="icon" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar" />
+          <!-- #endif -->
+          <!-- #ifdef H5 -->
+          <wd-button :icon="getUserAvatar" type="icon" @click="handleUplaod" />
+          <!-- #endif -->
         </view>
       </view>
       <view class="mt26rpx flex items-center justify-between" @click="router.push({ name: 'common-nickName' })">

src/subPack-refueling/refuelDetaile/index.vue

@@ -2,7 +2,7 @@
 import router from '@/router'
 import { StaticUrl } from '@/config'
 
-definePage({ name: 'refuelDetaile', islogin: false, style: { navigationBarTitleText: '加油站详情', navigationStyle: 'custom' } })
+definePage({ name: 'refuelDetaile', islogin: false, style: { navigationBarTitleText: '加油站详情' } })
 const showModel = ref(false)
 const storeDetail = ref<Api.GasStationDetailVO>()
 const dklist = ref<Api.CouponInfoAppVo[]>([])

src/subPack-xsb/commonTab/components/my.vue

@@ -29,7 +29,8 @@ function handleGo(item: { name: string, status: string }) {
     <view class="relative h-408rpx rounded-18px" :style="{ background: `linear-gradient( 180deg, var(--them-color) 0%, rgba(255,255,255,0) 100%)` }">
       <view class="absolute bottom-100rpx left-0 box-border w-full flex items-center justify-between pl48rpx pr58rpx">
         <template v-if="!token">
-          <image :src="`${StaticUrl}/9.png`" alt="" class="h100rpx w100rpx" />
+          <!-- <image :src="`${StaticUrl}/9.png`" alt="" class="h100rpx w100rpx" /> -->
+          <i class="iconfont text-100rpx text-[var(--them-color)]">&#xe654;</i>
           <view class="text-32rpx font-semibold">
             请登录后使用完整功能
           </view>
@@ -50,10 +51,7 @@ function handleGo(item: { name: string, status: string }) {
             </view>
           </view>
           <view class="flex flex-col items-center" @click="router.push({ name: 'common-user-center' })">
-            <image
-              :src="`${StaticUrl}/user-setting.png`"
-              class="h48rpx w48rpx"
-            />
+            <wd-icon name="setting" size="22px" color="var(--them-color)" />
             <view class="mt12rpx text-24rpx text-[var(--them-color)]">
               账户设置
             </view>

src/subPack-xsb/orderDetaile/index.vue

@@ -413,7 +413,8 @@ function handleRefundDetail(item: any) {
       </view>
       <view class="mt-20rpx rounded-16rpx bg-white p-24rpx">
         <view class="flex items-center">
-          <image :src="`${StaticUrl}/orderDetaile-user.png`" class="mr-20rpx h-40rpx w-40rpx" />
+          <i class="iconfont text-40rpx text-[var(--them-color)]">&#xe654;</i>
+          <!-- <image :src="`${StaticUrl}/orderDetaile-user.png`" class="mr-20rpx h-40rpx w-40rpx" /> -->
           <view class="text-32rpx text-[#222] font-semibold">
             {{ orderInfo?.consigneeName }} {{ orderInfo?.consigneeMobile }}
           </view>