<template>
<div class="container">
<van-pull-refresh v-model="refreshing" @refresh="onDownRefresh">
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"
>
<div class="list" v-for="(item,index) in list" :key="index">
<div class="list-left">
<span>{{item.mark}}</span>
<span>{{item.created_at}}</span>
</div>
<div class="list-right">
<span class="red">{{item.money}}</span>
</div>
</div>
</van-list>
</van-pull-refresh>
<van-empty description="没有数据" v-if="list==null" />
</div>
</template>
<script>
export default {
name: "balanceRecord",
data() {
return {
list: [],
page: 1, //页码
loading: false, //上拉加载
finished: false, //上拉加载完毕
refreshing: false //下拉刷新
};
},
created: function() {
this.$emit("header", true, "余额明细", true);
this.$emit("footer", false);
this.record();
},
methods: {
// 列表
record() {
let _this = this;
_this.$http.get(_this.$http.userMoneyLog, {
params: {
ptype: 2,
page: _this.page
}
}).then(response => {
if (response.code == 200) {
if (response.data.data.length > 0) {
if (_this.page > 1) {
if (_this.loading) {
if(response.data.data.length < 20){
_this.list = _this.list.concat(response.data.data);
_this.finished = true; //完成加载
}else{
_this.list = _this.list.concat(response.data.data);
_this.finished = false; //加载中
}
}
}else{
if(response.data.data.length < 20){
_this.list = response.data.data; //第一次加载
_this.finished = true; //完成加载
}else{
_this.list = response.data.data; //第一次加载
}
}
}else {
_this.list = null;
}
}else {
_this.$toast(response.msg);
}
}).catch(function(xhr, error) {
_this.error = true;
})
},
// 上拉加载
onLoad() {
let _this = this;
_this.page++;
_this.record();
_this.loading = true;
},
// 下拉刷新
onDownRefresh() {
let _this = this;
_this.page = 1;
_this.refreshing = false;
if(_this.list.length>20){
_this.finished = false; //加载中
}
_this.loading = false;
_this.$toast('刷新成功');
_this.record();
}
}
};
</script>
<style lang="scss" scoped>
.container {
height: calc(100vh - 46px);
.list {
width: 100%;
height: 56px;
padding: 0 3%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
background-color: #ffffff;
font-size: 1.3rem;
color: #b2b2b2;
border-bottom: 1px solid #f7f7f7;
.list-left {
span {
display: block;
&:first-child {
color: #181947;
font-size: 1.6rem;
line-height: 24px;
}
}
}
.list-right {
span {
display: block;
&:first-child {
color: #181947;
font-size: 1.6rem;
line-height: 24px;
text-align: right;
}
}
}
}
}
</style>