Merge pull request #16 from Chika99/fix/lockscreen

fix(lockscreen): 修复锁屏几个问题

src/components/Lockscreen/Lockscreen.vue

@@ -21,6 +21,7 @@
         :battery="battery"
         :battery-status="batteryStatus"
         :calc-discharging-time="calcDischargingTime"
+        :calc-charging-time="calcChargingTime"
       />
 
       <div class="local-time">
@@ -114,7 +115,7 @@
       const router = useRouter();
       const route = useRoute();
 
-      const { battery, batteryStatus, calcDischargingTime } = useBattery();
+      const { battery, batteryStatus, calcDischargingTime, calcChargingTime } = useBattery();
       const userInfo: object = userStore.getUserInfo || {};
       const username = userInfo['username'] || '';
       const state = reactive({
@@ -176,6 +177,7 @@
         battery,
         batteryStatus,
         calcDischargingTime,
+        calcChargingTime,
         onLockLogin,
         onLogin,
         goLogin,

src/components/Lockscreen/Recharge.vue

@@ -13,7 +13,7 @@
         剩余可使用时间：{{ calcDischargingTime }}
       </div>
       <span v-show="Number.isFinite(battery.chargingTime) && battery.chargingTime != 0">
-        距离电池充满需要：{{ calcDischargingTime }}
+        距离电池充满需要：{{ calcChargingTime }}
       </span>
     </div>
   </div>
@@ -36,6 +36,10 @@
         type: String,
         default: '',
       },
+      calcChargingTime: {
+        type: String,
+        default: '',
+      },
       batteryStatus: {
         // 电池状态
         type: String,
@@ -51,12 +55,12 @@
     bottom: 20vh;
     left: 50vw;
     width: 300px;
-    height: 400px;
+    height: 500px;
     transform: translateX(-50%);
 
     .number {
       position: absolute;
-      top: 27%;
+      top: 20%;
       z-index: 10;
       width: 300px;
       font-size: 32px;

src/hooks/useBattery.ts

@@ -33,6 +33,14 @@ export const useBattery = () => {
     return `${~~hour}小时${~~minute}分钟`;
   });
 
+  // 计算电池充满剩余时间
+  const calcChargingTime = computed(() => {
+    console.log(state.battery);
+    const hour = state.battery.chargingTime / 3600;
+    const minute = (state.battery.chargingTime / 60) % 60;
+    return `${~~hour}小时${~~minute}分钟`;
+  });
+
   // 电池状态
   const batteryStatus = computed(() => {
     if (state.battery.charging && state.battery.level >= 100) {
@@ -80,5 +88,6 @@ export const useBattery = () => {
     ...toRefs(state),
     batteryStatus,
     calcDischargingTime,
+    calcChargingTime,
   };
 };