OfficeApp/subpkg/topUpList/topUpList.vue
2023-10-26 18:44:17 +08:00

144 lines
3.5 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 {deposit_recharge} 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 deposit_recharge({
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>