适配不同电量icon

pages/home/home.vue

@@ -33,8 +33,8 @@
                         <image class="lock-image-lock" src="/static/images/icon_lock.png"></image>
                         <view class="lock-top-right">
                           <view class="lock-top-right-power">
-                            <image class="lock-top-right-power-image" src="/static/images/icon_power.png"></image>
+                            <image class="lock-top-right-power-image" :src="getPowerIcon(lock.electricQuantity)"></image>
-                            <view class="lock-top-right-power-text">{{lock.electricQuantity}}%</view>
+                            <view class="lock-top-right-power-text">{{ lock.electricQuantity }}%</view>
                           </view>
                           <view>{{getRole(lock.userType, lock.keyRight)}}</view>
                         </view>
@@ -147,7 +147,7 @@
 		methods: {
       timeFormat,
       ...mapActions(useUserStore, ['updateUserInfo', 'updateLoginStatus', 'phoneLogin', 'getUserInfo']),
-      ...mapActions(useLockStore, ['getLockList', 'getRole', 'getTimeLimit', 'updateLockSearch']),
+      ...mapActions(useLockStore, ['getLockList', 'getRole', 'getTimeLimit', 'updateLockSearch', 'getPowerIcon']),
       ...mapActions(useBluetoothStore, ['getBluetoothStatus', 'initAndListenBluetooth', 'updateCurrentLockInfo',
         'checkSetting', 'updateKeyId', 'resetDevice']),
       ...mapActions(useBasicStore, ['routeJump', 'getDeviceInfo']),
@@ -548,7 +548,7 @@ page {
 
         .lock-top-right-power-image {
           width: 40rpx;
-          height: 40rpx;
+          height: 24rpx;
           margin-right: 10rpx;
         }
       }

pages/lockDetail/lockDetail.vue

@@ -6,7 +6,7 @@
       <image class="top-background" src="/static/images/background_main.jpg" mode="aspectFill"></image>
       <view style="width: 100%;height: 50rpx">
         <view class="power" @click="powerTip">
-          <image class="power-icon" src="/static/images/icon_power.png" mode="aspectFill"></image>
+          <image class="power-icon" :src="getPowerIcon(currentLockInfo.electricQuantity)" mode="aspectFill"></image>
           <view class="power-text">{{ currentLockInfo.electricQuantity }}%</view>
           <image class="power-tips" src="/static/images/icon_tips.png" mode="aspectFill"></image>
         </view>
@@ -85,7 +85,7 @@ export default {
     this.getServeTime()
   },
   methods: {
-    ...mapActions(useLockStore, ['getRole', 'updateLockSearch', 'getLockList']),
+    ...mapActions(useLockStore, ['getRole', 'updateLockSearch', 'getLockList', 'getPowerIcon']),
     ...mapActions(useBluetoothStore, ['openDoor', 'updateServerTimestamp']),
     ...mapActions(useBasicStore, ['routeJump', 'backAndToast']),
     powerTip() {
@@ -246,7 +246,7 @@ export default {
     .power-icon {
       width: 50rpx;
       margin-right: 10rpx;
-      height: 50rpx;
+      height: 30rpx;
     }
 
     .power-text {

stores/lock.js

@@ -51,6 +51,21 @@ export const useLockStore = defineStore('lock', {
     }
   },
   actions: {
+    // 获取电量icon
+    getPowerIcon(power) {
+      if(power >= 80) {
+        return '/static/images/icon_power_5.png'
+      } else if(power >= 60) {
+        return '/static/images/icon_power_4.png'
+      } else if(power >= 40) {
+        return '/static/images/icon_power_3.png'
+      } else if(power >= 20) {
+        return '/static/images/icon_power_2.png'
+      } else {
+        return '/static/images/icon_power_1.png'
+      }
+    },
+    // 将星期转换为中文字符串
     convertWeekDaysToChineseString(weekDays) {
       const dayMap = {
         1: '一',