280 lines
7.1 KiB
Vue
280 lines
7.1 KiB
Vue
<!-- 收付明细 -->
|
|
<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> |