<template>
|
<view class="cu-page cu-page--with-fab cu-device-page">
|
<view class="cu-device-page__header">
|
<view class="cu-device-type-tabs">
|
<view
|
:class="['cu-device-type-card', 'cu-device-type-card--electric', tabIdx === 0 ? 'cu-device-type-card--active' : '']"
|
@click="switchTab(0)"
|
>
|
<view class="cu-device-type-card__icon-wrap">
|
<text class="cu-device-type-card__icon">⚡</text>
|
</view>
|
<view class="cu-device-type-card__text">
|
<text class="cu-device-type-card__label">电表</text>
|
<text class="cu-device-type-card__hint">智能电表</text>
|
</view>
|
</view>
|
<view
|
:class="['cu-device-type-card', 'cu-device-type-card--conditioner', tabIdx === 1 ? 'cu-device-type-card--active' : '']"
|
@click="switchTab(1)"
|
>
|
<view class="cu-device-type-card__icon-wrap">
|
<text class="cu-device-type-card__icon">❄️</text>
|
</view>
|
<view class="cu-device-type-card__text">
|
<text class="cu-device-type-card__label">空调</text>
|
<text class="cu-device-type-card__hint">空调设备</text>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="tabIdx === 1" class="cu-ac-balance-card">
|
<view class="cu-ac-balance-card__main">
|
<text class="cu-ac-balance-card__label">空调电费余额</text>
|
<text :class="['cu-ac-balance-card__value', acBalanceTone ? 'cu-ac-balance-card__value--' + acBalanceTone : '']">{{ acBalanceText }}</text>
|
</view>
|
<view class="cu-ac-balance-card__btn" @click="goAcRecharge">去充值</view>
|
</view>
|
|
<view class="cu-list-header cu-list-header--inline">
|
<text class="cu-list-header__count">共 {{ list.length }} 台{{ tabIdx === 0 ? '电表' : '空调' }}</text>
|
</view>
|
</view>
|
|
<view class="cu-list-wrap">
|
<template v-if="tabIdx === 0">
|
<view v-for="item in list" :key="item.deviceType + '-' + item.deviceId" class="cu-list-card">
|
<view class="cu-list-card__head">
|
<view class="cu-list-card__icon cu-list-card__icon--electric">⚡</view>
|
<view class="cu-list-card__main">
|
<view class="cu-list-card__title-row">
|
<view class="cu-list-card__title-wrap">
|
<text class="cu-list-card__title">{{ item.deviceName }}</text>
|
</view>
|
<text :class="['cu-status', item.statusCode === 1 ? 'cu-status--ok' : 'cu-status--bad']">{{ item.statusText }}</text>
|
</view>
|
<text class="cu-list-card__sub">{{ item.roomInfo || '暂无房间信息' }}</text>
|
</view>
|
</view>
|
|
<view v-if="item.alarmTags && item.alarmTags.length" class="cu-list-card__tags">
|
<text v-for="tag in item.alarmTags" :key="tag" class="cu-tag">{{ tag }}</text>
|
</view>
|
|
<view class="cu-info-grid">
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">电表地址</text>
|
<text class="cu-info-cell__value">{{ item.meterAddress || '-' }}</text>
|
</view>
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">账户余额</text>
|
<text :class="['cu-info-cell__value', balanceToneClass(item.balance)]">{{ formatBalance(item.balance) }}</text>
|
</view>
|
</view>
|
|
<view class="cu-list-card__foot">
|
<text class="cu-time">更新 {{ formatTime(item.updateTime) }}</text>
|
<text class="cu-list-card__arrow" @click="goElectricRecharge(item)">去充值 →</text>
|
</view>
|
</view>
|
</template>
|
|
<template v-else>
|
<view v-for="item in list" :key="item.deviceType + '-' + item.deviceId" class="cu-list-card cu-list-card--readonly">
|
<view class="cu-list-card__head">
|
<view class="cu-list-card__icon cu-list-card__icon--conditioner">❄️</view>
|
<view class="cu-list-card__main">
|
<view class="cu-list-card__title-row">
|
<view class="cu-list-card__title-wrap">
|
<text class="cu-list-card__title">{{ item.deviceName }}</text>
|
</view>
|
<text :class="['cu-status', item.statusCode === 1 ? 'cu-status--ok' : 'cu-status--bad']">{{ item.statusText }}</text>
|
</view>
|
<text class="cu-list-card__sub">{{ item.roomInfo || '暂无房间信息' }}</text>
|
</view>
|
</view>
|
|
<view class="cu-list-card__meta-row">
|
<text class="cu-time">更新 {{ formatTime(item.updateTime) }}</text>
|
</view>
|
</view>
|
</template>
|
|
<u-empty v-if="!list.length" :text="tabIdx === 0 ? '暂无电表' : '暂无空调设备'" margin-top="80" />
|
</view>
|
<cu-workbench-fab />
|
</view>
|
</template>
|
|
<script>
|
import { customerDevicePage, customerHome } from '@/api'
|
import { getBalanceTone } from '@/utils/utils.js'
|
|
export default {
|
data () {
|
return {
|
list: [],
|
tabIdx: 0,
|
gsBalance: null,
|
page: 1
|
}
|
},
|
computed: {
|
acBalanceText () {
|
if (this.gsBalance === null || this.gsBalance === undefined || this.gsBalance === '') return '-'
|
return this.formatBalance(this.gsBalance)
|
},
|
acBalanceTone () {
|
return getBalanceTone(this.gsBalance)
|
}
|
},
|
onShow () {
|
this.load()
|
if (this.tabIdx === 1) this.loadGsBalance()
|
},
|
methods: {
|
load () {
|
customerDevicePage({
|
page: this.page,
|
capacity: 200,
|
model: { deviceType: this.tabIdx === 0 ? 0 : 1 }
|
}).then(res => { this.list = (res.data && res.data.records) || [] })
|
},
|
loadGsBalance () {
|
customerHome().then(res => {
|
const gs = res.data && res.data.gsConfig
|
this.gsBalance = gs ? gs.leftMoney : null
|
})
|
},
|
switchTab (i) {
|
if (this.tabIdx === i) return
|
this.tabIdx = i
|
this.list = []
|
this.load()
|
if (i === 1) this.loadGsBalance()
|
},
|
formatBalance (val) {
|
if (val === null || val === undefined || val === '') return '-'
|
const n = Number(val)
|
return Number.isNaN(n) ? val : n.toFixed(2)
|
},
|
balanceToneClass (val) {
|
const tone = getBalanceTone(val)
|
return tone ? `cu-info-cell__value--${tone}` : ''
|
},
|
formatTime (t) { return t ? String(t).replace('T', ' ').substring(0, 19) : '-' },
|
goElectricRecharge (item) {
|
uni.navigateTo({ url: `/pages/customer/electricity/recharge?id=${item.deviceId}` })
|
},
|
goAcRecharge () {
|
uni.navigateTo({ url: '/pages/customer/conditioner/recharge' })
|
}
|
}
|
}
|
</script>
|
