From 93de43267e1663031fe5dc2f5ae40d128a182a76 Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 18 六月 2026 17:24:51 +0800
Subject: [PATCH] 新增智能电表、空调管理

---
 h5/pages/customer/electricity/recharge.vue |   48 ++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/h5/pages/customer/electricity/recharge.vue b/h5/pages/customer/electricity/recharge.vue
index 94bacbc..b8789cd 100644
--- a/h5/pages/customer/electricity/recharge.vue
+++ b/h5/pages/customer/electricity/recharge.vue
@@ -1,15 +1,31 @@
 <template>
-  <view class="cu-page cu-page--with-footer">
-    <view class="cu-device-summary" v-if="device">
-      <view class="cu-row cu-row--between">
-        <text class="cu-name">{{ device.deviceName }}</text>
-        <text class="cu-status cu-status--ok">{{ device.statusText }}</text>
+  <view class="cu-page cu-page--with-footer cu-page--with-fab">
+    <view v-if="device" class="cu-recharge-hero cu-recharge-hero--electric">
+      <view class="cu-recharge-hero__gradient">
+        <view class="cu-recharge-hero__balance-block">
+          <text class="cu-recharge-hero__balance-label">褰撳墠璐︽埛浣欓锛堝厓锛�</text>
+          <text :class="['cu-recharge-hero__balance-value', balanceTone ? 'cu-recharge-hero__balance-value--' + balanceTone : '']">{{ balanceText }}</text>
+        </view>
       </view>
-      <view class="cu-line">鎴块棿锛歿{ device.roomInfo }}</view>
-      <view class="cu-line">鎴峰彿锛歿{ device.meterAccountNo }}</view>
-      <view class="cu-device-summary__balance">
-        <view class="cu-device-summary__balance-label">褰撳墠璐︽埛浣欓</view>
-        <view class="cu-device-summary__balance-value">{{ device.balance }}</view>
+      <view class="cu-recharge-hero__panel">
+        <view class="cu-recharge-hero__device">
+          <view class="cu-recharge-hero__icon cu-recharge-hero__icon--electric">鈿�</view>
+          <view class="cu-recharge-hero__device-main">
+            <view class="cu-recharge-hero__title-row">
+              <view class="cu-recharge-hero__title-wrap">
+                <text class="cu-recharge-hero__title">{{ device.deviceName || '鐢佃〃' }}</text>
+              </view>
+              <text :class="['cu-recharge-hero__status', device.statusCode === 1 ? 'cu-recharge-hero__status--ok' : 'cu-recharge-hero__status--bad']">{{ device.statusText || '鏈煡' }}</text>
+            </view>
+            <text class="cu-recharge-hero__sub">{{ device.roomInfo || '鏆傛棤鎴块棿淇℃伅' }}</text>
+          </view>
+        </view>
+        <view class="cu-recharge-hero__meta">
+          <view class="cu-recharge-hero__meta-item">
+            <text class="cu-recharge-hero__meta-label">鐢佃〃鍦板潃</text>
+            <text class="cu-recharge-hero__meta-value">{{ device.meterAddress || '-' }}</text>
+          </view>
+        </view>
       </view>
     </view>
 
@@ -36,12 +52,14 @@
     <view class="cu-page-footer">
       <view class="cu-btn cu-btn--primary" @click="submit">纭鍏呭�納{ amount ? ' 楼' + amount : '' }}</view>
     </view>
+    <cu-workbench-fab />
   </view>
 </template>
 
 <script>
 import { customerDeviceDetail, customerPayCreate } from '@/api'
 import { invokeWxPay } from '@/utils/wxpay.js'
+import { getBalanceTone } from '@/utils/utils.js'
 export default {
   data () {
     return {
@@ -53,6 +71,16 @@
     }
   },
   onLoad (q) { this.deviceId = q.id; this.load() },
+  computed: {
+    balanceText () {
+      if (!this.device || this.device.balance === null || this.device.balance === undefined || this.device.balance === '') return '-'
+      const n = Number(this.device.balance)
+      return Number.isNaN(n) ? this.device.balance : n.toFixed(2)
+    },
+    balanceTone () {
+      return getBalanceTone(this.device && this.device.balance)
+    }
+  },
   methods: {
     load () {
       customerDeviceDetail({ deviceType: 0, deviceId: this.deviceId }).then(res => { this.device = res.data })

--
Gitblit v1.9.3