144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
||
<view class="">
|
||
<view class="list">
|
||
<view class="card" v-for="(item, index) in list" :key="index">
|
||
<view class="top">
|
||
<view class="tips">余额充值</view>
|
||
<view>充值日期：{{item.create_time}}</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="left">
|
||
<view>充值金额(元)</view>
|
||
<view class="num">{{item.order_amount}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view>备注:</view>
|
||
<view>{{item.tips}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {rechargeLists} from "@/api/pay.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
list:[],
|
||
loadConfig:{
|
||
page: 1,
|
||
limit: 15,
|
||
loadingText: '努力加载中',
|
||
loadmoreText: '轻轻上拉',
|
||
nomoreText: '没有更多记录了~~',
|
||
status: 'loadmore'
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadList();
|
||
},
|
||
onShow() {},
|
||
onReachBottom() {
|
||
this.loadList()
|
||
},
|
||
methods: {
|
||
async loadList(){
|
||
if(this.loadConfig.status=="nomore")return;
|
||
this.loadConfig.status="loading"
|
||
let res = await rechargeLists({
|
||
page_no: this.loadConfig.page,
|
||
page_size: this.loadConfig.limit
|
||
});
|
||
this.loadConfig.status="loadmore"
|
||
if(res.data.lists.length<this.loadConfig.limit){
|
||
this.loadConfig.status="nomore"
|
||
}else {
|
||
this.loadConfig.page++;
|
||
}
|
||
this.list = [...this.list, ...res.data.lists];
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.list{
|
||
// background-color: #f5f5f5;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 28rpx;
|
||
.card{
|
||
padding: 28rpx;
|
||
width: 694rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 21rpx;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #333333FF;
|
||
line-height: 39rpx;
|
||
.tips{
|
||
width: 137rpx;
|
||
height: 49rpx;
|
||
background: $theme-oa-color;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 39rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 28rpx;
|
||
}
|
||
// .pass{
|
||
// background-color: #FF8C1A;
|
||
// }
|
||
// .no_pass{
|
||
// background-color: #F02828;
|
||
// }
|
||
// .ok{
|
||
// background-color: #47B347;
|
||
// }
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 160rpx;
|
||
.left{
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 39rpx;
|
||
.num{
|
||
font-size: 39rpx;
|
||
font-weight: 500;
|
||
color: #F02828;
|
||
line-height: 39rpx;
|
||
}
|
||
}
|
||
.right{
|
||
flex: 1;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 39rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|