不说废话直接上图、上代码
1.html部分:
<template>
<view class="content integral">
<view class="integral-list" v-for="(item,index) in recordlist" :key="index">
<view class="integral-list-header">
<view class="integral-list-header-account">{{item.memberAccount||'XX科技'}}</view>
<view class="integral-list-header-points" v-if="item.points>0">
+{{item.points}}
</view>
<view class="integral-list-header-points green" v-if="item.points<=0">
{{item.points}}
</view>
</view>
<template v-if="item.points>0">
<view class="integral-list-main">
<view class="integral-list-main-list">
<view>结果状态</view>
<view>{{item.status?'成功':'失败'}}</view>
</view>
<view class="integral-list-main-list">
<view>用户账号</view>
<view>{{item.memberAccount||'XX科技'}}</view>
</view>
<view class="integral-list-main-list">
<view>支付时间</view>
<view>{{item.exDate}}</view>
</view>
<view class="integral-list-main-list">
<view>支付方式</view>
<view>{{item.type.split('-')[1]}}</view>
</view>
<view class="integral-list-main-list">
<view>交易编号</view>
<view>{{item.id}}</view>
</view>
</view>
</template>
<template v-if="item.points<=0">
<view class="integral-list-main">
<view class="integral-list-main-list">
<view>结果状态</view>
<view>{{item.status?'成功':'失败'}}</view>
</view>
<view class="integral-list-main-list">
<view>用户账号</view>
<view>{{item.memberAccount||'XX科技'}}</view>
</view>
<view class="integral-list-main-list">
<view>消费金额</view>
<view>{{item.points}}</view>
</view>
<view class="integral-list-main-list">
<view>发放账号</view>
<view>{{item.vendorTel ||'XX科技'}}</view>
</view>
<view class="integral-list-main-list">
<view>发放时间</view>
<view>{{item.exDate}}</view>
</view>
<view class="integral-list-main-list">
<view>发放方式</view>
<view>{{item.type.split('-')[1]}}</view>
</view>
<view class="integral-list-main-list">
<view>交易编号</view>
<view>{{item.id}}</view>
</view>
</view>
</template>
</view>
<view class="null" v-if="page == pages">没有更多交易记录了</view>
</view>
</template>
2. js实现部分:
<script>
export default {
data() {
return {
page: 1,
pages: 0,
isPull: false,
recordlist: [], //交易数据列表
};
},
onLoad() {
this.getList()
},
onPullDownRefresh() {
this.page = 1;
this.isPull = true;
this.getList();
},
onReachBottom() {
if (this.page < this.pages) {
this.page++;
this.getList();
}
},
methods: {
getList() {
this.$http('Uurl', {
page: this.page,
pageSize: 10
}, "POST").then(data => {
uni.stopPullDownRefresh();
this.pages = data.data.pages;
if (this.isPull) {
this.isPull = false;
this.recordlist = [];
}
this.recordlist = this.recordlist.concat(data.data.list);
})
},
}
}
</script>
3.css部分:
<style lang="scss" scoped>
.integral {
min-height: 100vh;
padding-bottom: 20upx;
background: #F4F4F4;
&-list {
padding: 0 20upx;
background-color: #FFFFFF;
margin-bottom: 20upx;
&-header {
padding: 30upx 0;
border-bottom: 1upx solid #EBEBEB;
text-align: center;
&-account {
font-size: 26upx;
color: #181818;
}
&-points {
margin-top: 20upx;
color: #F95151;
font-size: 42upx;
&.green {
color: #06C05F;
}
}
}
&-main {
padding: 20upx 10upx;
&-list {
display: flex;
flex-direction: row;
view {
width: 160upx;
line-height: 50upx;
font-size: 26upx;
color: #8B8B8B;
&:last-child {
width: calc(100% - 160upx);
color: #181818;
}
}
}
}
}
.null {
text-align: center;
color: #AAAAAA;
font-size: 24upx;
}
}
</style>