<template>
|
<view class="cu-page">
|
<view class="cu-filters">
|
<picker :range="statusOptions" range-key="label" @change="onStatusChange">
|
<view class="cu-filter">{{ statusLabel }} ▾</view>
|
</picker>
|
<picker mode="date" fields="month" @change="onMonthChange">
|
<view class="cu-filter">{{ month || '充值月份' }} ▾</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.id" class="cu-list-card">
|
<view class="cu-list-card__head">
|
<view class="cu-list-card__icon cu-list-card__icon--record">📋</view>
|
<view class="cu-list-card__main">
|
<view class="cu-list-card__title-row">
|
<text class="cu-list-card__title">{{ item.deviceInfo || item.name || '充值记录' }}</text>
|
<text :class="['cu-status', statusClass(item.status)]">{{ item.statusText }}</text>
|
</view>
|
<text class="cu-list-card__sub" v-if="item.address">户号 {{ item.address }}</text>
|
</view>
|
</view>
|
|
<view class="cu-info-grid">
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">充值金额</text>
|
<text class="cu-info-cell__value cu-info-cell__value--primary">¥{{ item.money }}</text>
|
</view>
|
<view class="cu-info-cell">
|
<text class="cu-info-cell__label">充后余额</text>
|
<text class="cu-info-cell__value">{{ item.balanceAfter }}</text>
|
</view>
|
<view class="cu-info-cell cu-info-cell--full">
|
<text class="cu-info-cell__label">充值时间</text>
|
<text class="cu-info-cell__value">{{ item.createDate }}</text>
|
</view>
|
</view>
|
</view>
|
<u-empty v-if="!list.length" text="暂无记录" margin-top="80" />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { customerRechargeRecordPage } from '@/api'
|
export default {
|
data () {
|
return {
|
list: [],
|
month: '',
|
statusIdx: 0,
|
statusOptions: [
|
{ label: '全部状态', value: null },
|
{ label: '充值成功', value: 1 },
|
{ label: '充值失败', value: 2 },
|
{ label: '充值中', value: 0 }
|
]
|
}
|
},
|
computed: { statusLabel () { return this.statusOptions[this.statusIdx].label } },
|
onShow () { this.load() },
|
methods: {
|
load () {
|
customerRechargeRecordPage({
|
page: 1,
|
capacity: 50,
|
model: { status: this.statusOptions[this.statusIdx].value, month: this.month || null }
|
}).then(res => { this.list = (res.data && res.data.records) || [] })
|
},
|
onStatusChange (e) { this.statusIdx = Number(e.detail.value); this.load() },
|
onMonthChange (e) { this.month = e.detail.value; this.load() },
|
statusClass (s) {
|
if (s === 1) return 'cu-status--ok'
|
if (s === 2) return 'cu-status--bad'
|
return 'cu-status--warn'
|
}
|
}
|
}
|
</script>
|
