<!-- 收付明细 -->
<template>
<view class="payment-detail">
<view class="payment-detail-head">
<view style="height: var(--status-bar-height);"></view>
<view class="payment-detail-head-wrap">
<view style="display: flex;">
<view class="payment-detail-head-l" style="margin-right: 20rpx;" @click="pickStartShow = true">
<text>{{startTimeTxt}}</text>
<u-icon name="arrow-down" :bold="true"></u-icon>
</view>
<view class="payment-detail-head-l" @click="pickEndShow = true">
<text>{{endTimeTxt}}</text>
<u-icon name="arrow-down" :bold="true"></u-icon>
</view>
</view>
<view class="payment-detail-head-r" @click="handleReset">重置</view>
</view>
<view class="payment-detail-total">
<text class="outcome">支出￥{{outcome}}</text> <text class="income">收入￥{{income}}</text>
</view>
</view>
<!-- 首付款列表 -->
<view class="payment-detail-con" :style="{'min-height':'calc(100vh - ' +conHeight+ ')','margin-top':conHeight}">
<view class="payment-detail-con-wrap" v-if="paymentData.length > 0">
<block v-for="(item,indx) in paymentData" :key="indx">
<view class="payment-detail-con-item">
<view class="item-desc">
<text class="item-desc-name line1" style="width:280rpx;">{{item.come_msg}}</text>
<text style="width:180rpx;">{{item.pay_type_name}}</text>
<text class="item-desc-price"
:style="{'color':item.msg=='收入'?'#EEC102':''}"><text>{{item.msg == '支出'?'-':'+'}}</text>{{item.pay_price}}</text>
</view>
<view class="item-time">{{new Date(item.create_time).format('MM月dd日 hh:mm')}}</view>
</view>
</block>
<!-- 加载更多内容 -->
<view class='loadingicon acea-row row-center-wrapper'>
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
</view>
</view>
<!-- 内容为空 -->
<u-empty v-if=" (!paymentData || paymentData.length == 0)" mode="list"
icon="http://cdn.uviewui.com/uview/empty/list.png" />
</view>
<!-- 时间选择器 年月日 -->
<u-datetime-picker :show="(pickEndShow || pickStartShow)" v-model="pickerInitVal" mode="date"
@confirm="pickerConfirm" @cancel="handleClose"></u-datetime-picker>
</view>
</template>
<script>
import {
paymentDetail
} from "@/api/payment.js";
export default {
data() {
return {
conHeight: 0,
paymentData: [],
searchParams: {
page: 1,
limit: 15,
section_startTime: new Date().format("yyyy-MM-dd"),
section_endTime: new Date().format("yyyy-MM-dd"),
mer_id: ''
},
loadend: false,
loading: false,
loadTitle: '加载更多',
pickEndShow: false,
pickStartShow: false,
pickerInitVal: Number(new Date()),
income: 0, //收入
outcome: 0, //支出
}
},
computed: {
startTimeTxt() {
if (this.searchParams.section_startTime) {
return new Date(this.searchParams.section_startTime).format("yyyy年MM月dd日");
} else {
return new Date().format("yyyy年MM月dd日");
}
},
endTimeTxt() {
if (this.searchParams.section_endTime) {
return new Date(this.searchParams.section_endTime).format("yyyy年MM月dd日");
} else {
return new Date().format("yyyy年MM月dd日");
}
}
},
onLoad(opt) {
this.searchParams.mer_id = opt.mer_id;
// 页面高度
this.initHeight();
// 初始化列表
this.getData();
},
onReachBottom() {
if (this.paymentData.length > 0) {
setTimeout(() => {
this.getData();
}, 10)
}
},
methods: {
// 重置
handleReset() {
this.loadend = false;
this.searchParams.page = 1;
this.searchParams.section_startTime = new Date().format("yyyy-MM-dd");
this.searchParams.section_endTime = new Date().format("yyyy-MM-dd");
this.paymentData = [];
this.getData();
},
// 关闭
handleClose() {
this.pickEndShow = false;
this.pickStartShow = false;
},
pickerConfirm(e) {
const date = new Date(e.value).format('yyyy-MM-dd');
if (this.pickStartShow) {
this.searchParams.section_startTime = date;
this.searchParams.page = 1;
this.paymentData = [];
this.loadend = false;
this.getData();
}
if (this.pickEndShow) {
if (!this.searchParams.section_startTime)
this.searchParams.section_startTime = date;
else {
this.searchParams.page = 1;
this.searchParams.section_endTime = date;
this.paymentData = [];
this.loadend = false;
this.getData();
}
}
this.handleClose();
},
async getData(isPage) {
let that = this;
if (that.loadend) return;
if (that.loading) return;
that.loading = true;
that.loadTitle = '';
await paymentDetail(that.searchParams).then(res => {
let list = res.data.list;
this.income = res.data.income;
this.outcome = res.data.outcome;
let paymentData = that.$util.SplitArray(list, that.paymentData);
let loadend = list.length < that.searchParams.limit; //true false
that.loadend = loadend;
that.loading = false;
that.loadTitle = loadend ? '已全部加载' : '加载更多';
setTimeout(() => {
that.$set(that, 'paymentData', paymentData);
}, 500);
if (!loadend)
that.$set(that.searchParams, 'page', that.searchParams.page + 1);
}).catch(err => {
that.loading = false;
that.loadTitle = '加载更多';
});
},
// 列表高度
initHeight() {
this.$nextTick(async () => {
let conDom = await this.getDomInfo(".payment-detail-head");
this.conHeight = conDom.height + "px";
})
},
// 获取dom布局信息
getDomInfo(selector) {
return new Promise((resolve, reject) => {
uni.createSelectorQuery().in(this).select(selector).boundingClientRect((data) => {
resolve(data);
}).exec();
})
}
}
}
</script>
<style lang="scss" scoped>
.payment-detail {
.payment-detail-head {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #EFEFEF;
padding: 30rpx;
.payment-detail-head-wrap {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.payment-detail-head-l {
display: flex;
align-items: center;
padding: 20rpx 22rpx;
border-radius: 40rpx;
background-color: #E3E3E3;
text {
margin-right: 12rpx;
font-size: 26rpx;
color: #333;
font-weight: bold;
}
}
.payment-detail-head-r {
font-size: 28rpx;
color: #B3B3B3;
}
}
.payment-detail-total {
font-size: 26rpx;
color: #B3B3B3;
.outcome {
margin-right: 10rpx;
}
}
}
.payment-detail-con {
background-color: #fff;
.payment-detail-con-item {
padding: 30rpx;
border-bottom: 2rpx solid #F8F8F8;
.item-desc {
display: flex;
justify-content: space-between;
margin-bottom: 12rpx;
.item-desc-name,
.item-desc-price {
font-size: 30rpx;
color: #333;
font-weight: bold;
}
.item-desc-plus {
color: #FFB93E;
}
}
.item-time {
font-size: 26rpx;
color: #C8C8C8;
}
}
}
}
</style>