<template>
|
<view class="cu-page">
|
<view class="cu-filters">
|
<picker :range="typeOptions" range-key="label" @change="onTypeChange">
|
<view class="cu-filter">{{ typeLabel }} ▾</view>
|
</picker>
|
<picker :range="statusOptions" range-key="label" @change="onStatusChange">
|
<view class="cu-filter">{{ statusLabel }} ▾</view>
|
</picker>
|
</view>
|
|
<view class="cu-list-header">
|
<text class="cu-list-header__count">共 {{ list.length }} 台设备</text>
|
</view>
|
|
<view class="cu-list-wrap">
|
<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', item.deviceType === 0 ? 'cu-list-card__icon--electric' : 'cu-list-card__icon--conditioner']">
|
{{ item.deviceType === 0 ? '⚡' : '❄️' }}
|
</view>
|
<view class="cu-list-card__main">
|
<view class="cu-list-card__title-row">
|
<text class="cu-list-card__title">{{ item.deviceName }}</text>
|
<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 v-if="item.deviceType === 0" class="cu-info-cell">
|
<text class="cu-info-cell__label">电表户号</text>
|
<text class="cu-info-cell__value">{{ item.meterAccountNo || '-' }}</text>
|
</view>
|
<view :class="['cu-info-cell', item.deviceType !== 0 ? 'cu-info-cell--full' : '']">
|
<text class="cu-info-cell__label">账户余额</text>
|
<text :class="['cu-info-cell__value', item.balanceLow ? 'cu-info-cell__value--danger' : '']">{{ 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="goRecharge(item)">去充值 →</text>
|
</view>
|
</view>
|
<u-empty v-if="!list.length" text="暂无设备" margin-top="80" />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { customerDevicePage } from '@/api'
|
export default {
|
data () {
|
return {
|
list: [],
|
typeOptions: [{ label: '全部类型', value: null }, { label: '电表', value: 0 }, { label: '空调', value: 1 }],
|
statusOptions: [{ label: '全部状态', value: null }, { label: '正常', value: 1 }, { label: '异常', value: 2 }],
|
typeIdx: 0,
|
statusIdx: 0,
|
page: 1
|
}
|
},
|
computed: {
|
typeLabel () { return this.typeOptions[this.typeIdx].label },
|
statusLabel () { return this.statusOptions[this.statusIdx].label }
|
},
|
onShow () { this.load() },
|
methods: {
|
load () {
|
customerDevicePage({
|
page: this.page,
|
capacity: 20,
|
model: {
|
deviceType: this.typeOptions[this.typeIdx].value,
|
statusFilter: this.statusOptions[this.statusIdx].value
|
}
|
}).then(res => { this.list = (res.data && res.data.records) || [] })
|
},
|
onTypeChange (e) { this.typeIdx = Number(e.detail.value); this.load() },
|
onStatusChange (e) { this.statusIdx = Number(e.detail.value); this.load() },
|
formatTime (t) { return t ? String(t).replace('T', ' ').substring(0, 19) : '-' },
|
goRecharge (item) {
|
const url = item.deviceType === 0
|
? `/pages/customer/electricity/recharge?id=${item.deviceId}`
|
: `/pages/customer/conditioner/recharge?id=${item.deviceId}`
|
uni.navigateTo({ url })
|
}
|
}
|
}
|
</script>
|
