<template>
|
<view class="record">
|
<Navbar title="充值记录"></Navbar>
|
<view class="header">
|
<uni-data-select
|
v-model="dateType"
|
:localdata="dataTypeOption"
|
@change="changeTime"
|
:clear="false"
|
/>
|
</view>
|
<view class="chongzhi">
|
<view class="item" v-for="(item, index) in list" :key="index">
|
<vie class="info">
|
<view>充值金额：<text class="val">{{item.rechargeAmount}}</text>元</view>
|
<view>充值水量：<text class="val">{{item.rechargeWater}}</text>m³</view>
|
</vie>
|
<view class="status">
|
<view v-if="item.rechargeStatus === 1" style="color: #19d60b;">已充值</view>
|
<view v-else style="color: #818181;">未充值</view>
|
</view>
|
<view class="tm">{{item.createTimeView}}</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {ref, onMounted} from 'vue'
|
import Navbar from '../../components/navbar/navbar.vue'
|
import {getrechargeRecord} from '@/api/index.js'
|
import { onReachBottom } from '@dcloudio/uni-app';
|
|
const list = ref([])
|
const page = ref(1)
|
const dateType = ref(0)
|
|
const dataTypeOption = [
|
{ text: '全部', value: 0 },
|
{ text: '本日', value: 1 },
|
{ text: '本周', value: 2 },
|
{ text: '本月', value: 3 },
|
{ text: '本年', value: 4 }
|
]
|
|
const getData = () => {
|
const data = {
|
dateType: dateType.value,
|
limit: 10,
|
page: page.value
|
}
|
getrechargeRecord(data).then(res => {
|
if(res.code === 200) {
|
list.value = res.data.list
|
}
|
})
|
}
|
|
// 选择时间
|
const changeTime = () => {
|
page.value = 1
|
getData()
|
}
|
|
// 触底加载数据
|
onReachBottom(() => {
|
page.value ++
|
getData()
|
})
|
|
onMounted(() => {
|
getData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.chongzhi{
|
padding: 0 20rpx;
|
.item{
|
padding: 20rpx;
|
border-bottom: 1px solid #ddd;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.info{
|
width: 45%;
|
flex-shrink: 0;
|
text-align: left;
|
font-size: 24rpx;
|
.val{
|
font-size: 28rpx;
|
}
|
}
|
.status{
|
flex-grow: 1;
|
text-align: center;
|
}
|
.tm{
|
flex-grow: 1;
|
text-align: right;
|
font-size: 24rpx;
|
}
|
}
|
}
|
</style>
|
