rentPayDetails.vue
6.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<template>
<view class="page">
<view class="title-top">
<div class="left">
<view @click="show = true">{{pageIndex.time}}年<u-icon name="arrow-down"></u-icon></view>
<u-picker v-model="show" mode="time" :params="{year: true}" @confirm="confirm"></u-picker>
</div>
<div class="right"><view class="price" style="font-size: 40rpx;"><u-icon name="rmb" style="font-size: 24rpx;" />{{allPay}}</view></div>
</view>
<view class="record-list">
<view class="record-item" v-for="(item, index) in dataList" :key="index" >
<view class="info-title">
<!-- <view class="title">{{formatDate(item.tenementOrderDate)}}</view> -->
<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{item.dingPay}}</view></view>
</view>
<view class="info-items" v-for="(value, ids) in item.ziList">
<view class="info-item">
<view class="left title">{{value.tenementOrderParent==''?value.tenementOrder:value.tenementOrderParent}}</view>
<view class="right"><view class="price"><u-icon name="rmb" style="font-size: 24rpx;" />{{value.paymentAmount}}</view></view>
</view>
<view class="info-item">
<view class="left" style="color: #0FBB59;">{{value.payState==1?'支付成功':''}}</view>
<view class="right" style="color: #8A8A8A;">{{formatDateTime(value.paymentTime)}}</view>
</view>
</view>
</view>
</view>
<view v-if="dataList.length === 0" class="nonemsg">
暂无数据
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: false,
dataList: [],
allPay:0,
pageIndex:{
time:''
},
merchants:''
}
},
onShow(){
this.pageIndex.time = this.getCurrentYear()
},
onLoad(options) {
if(options.msg && options.merchants){
this.allPay = 0
let receivedMsg = JSON.parse(options.msg)
this.merchants = options.merchants
this.getAll(receivedMsg.list)
}
},
methods: {
getAll(receivedMsg){
let totalPay= 0
const redList = []
// 用于存储 tenementOrderParent 相同的项
const groupedItems = {};
// 遍历 receivedMsg.list 数组
receivedMsg.forEach(item => {
if(item.payState ==1){
totalPay += item.paymentAmount
if (item.tenementOrderParent === '') {
// 如果 tenementOrderParent 为空，添加 dingPay 字段并添加到 redList
let newItem = { ...item,ziList:[], dingPay: item.paymentAmount };
newItem.ziList.push(item)
redList.push(newItem);
} else {
// 如果 tenementOrderParent 不为空，将相同 tenementOrderParent 的项分组
if (!groupedItems[item.tenementOrderParent]) {
groupedItems[item.tenementOrderParent] = {
ziList: [],
dingPay: 0
};
}
groupedItems[item.tenementOrderParent].ziList.push(item);
groupedItems[item.tenementOrderParent].dingPay += item.paymentAmount;
groupedItems[item.tenementOrderParent].paymentTime = item.paymentTime;
groupedItems[item.tenementOrderParent].payDay = item.payDay;
groupedItems[item.tenementOrderParent].payState = item.payState;
}
}
});
// 将分组后的对象添加到 redList
for (const key in groupedItems) {
redList.push({
tenementOrderParent: key,
...groupedItems[key]
});
}
// receivedMsg.list.map(item=>{
// let obj ={
// ...item,
// dingPay:0,
// ziList:[]
// }
// if (item.payState == 1) {
// obj.ziList.push(item)
// if(item.tenementOrderParent ){
// }
// obj.dingPay +=item.paymentAmount
// this.orderPay+=item.paymentAmount
// this.allPay+=item.paymentAmount
// redList.push(obj)
// }
// })
this.allPay = totalPay;
this.dataList = redList
},
getCurrentYear() {
const year = new Date().getFullYear();
return `${year}`;
},
confirm(e){
this.pageIndex.time = e.year
const { firstDay, lastDay } = this.getYearFirstAndLastDay(e.year)
this.$http.sendRequest('/cerePropertyOrder/queryByName', 'POST', {
relatedMerchants:this.merchants,
paymentTimeStart:firstDay,
paymentTimeEnd:lastDay
}, 1).then(res => {
if (res.data.data.length > 0) {
this.getAll(res.data.data[0].cerePropertyOrderList)
}else{
this.dataList=[]
this.allPay = 0
}
})
},
getYearFirstAndLastDay(year) {
console.log(year)
const firstDay = new Date(year, 0, 1);
const lastDay = new Date(year, 11, 31);
console.log(firstDay.toISOString().split('T'))
return {
firstDay: firstDay.toISOString().split('T')[0],
lastDay: lastDay.toISOString().split('T')[0]
}
},
formatDateTime(dateTimeStr) {
// 创建 Date 对象
const date = new Date(dateTimeStr);
// 获取月份，由于 getMonth() 返回值从 0 开始，所以要加 1，并确保为两位数字
const month = String(date.getMonth() + 1).padStart(2, '0');
// 获取日期，并确保为两位数字
const day = String(date.getDate()).padStart(2, '0');
// 获取小时，并确保为两位数字
const hours = String(date.getHours()).padStart(2, '0');
// 获取分钟，并确保为两位数字
const minutes = String(date.getMinutes()).padStart(2, '0');
// 按照所需格式拼接并返回结果
return `${month}.${day} ${hours}:${minutes}`;
},
formatDate(dateStr) {
// 使用 split 方法将日期字符串按 - 分割成数组
const [year, month, day] = dateStr.split('-');
// 将 month 和 day 转换为数字，去除可能存在的前导零
const formattedMonth = parseInt(month, 10);
const formattedDay = parseInt(day, 10);
// 按照目标格式拼接字符串
return `${formattedMonth}月${formattedDay}号`;
},
}
}
</script>
<style scoped lang="scss">
@import 'rentPayDetails.scss';
</style>