From 696d278cb17a815022341e52fa1459f596097667 Mon Sep 17 00:00:00 2001
From: "DESKTOP-GMUNQ1B\\k" <1154079537@qq.com>
Date: Tue, 12 Mar 2024 17:45:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B6=E4=BB=98=E6=AC=BE=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                       |  16 ++-
 pages/payment/payment_detail.vue | 214 +++++++++++++++++++++++++++++++
 2 files changed, 224 insertions(+), 6 deletions(-)
 create mode 100644 pages/payment/payment_detail.vue

diff --git a/pages.json b/pages.json
index 2207d70..bb1dd05 100644
--- a/pages.json
+++ b/pages.json
@@ -295,12 +295,11 @@
 			}
 		},
 		{
-		  "path" : "pages/redpacket/redpacket",
-		  "style" : 
-		  {
-		    "navigationBarTitleText" : "补贴",
-		    "enablePullDownRefresh" : false
-		  }
+			"path": "pages/redpacket/redpacket",
+			"style": {
+				"navigationBarTitleText": "补贴",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"subPackages": [{
@@ -323,6 +322,11 @@
 				"style": {
 					"navigationBarTitleText": "支付"
 				}
+			}, {
+				"path": "payment_detail",
+				"style": {
+					"navigationBarTitleText": "收付明细"
+				}
 			}]
 		}, {
 			"root": "pages/goods_cate",
diff --git a/pages/payment/payment_detail.vue b/pages/payment/payment_detail.vue
new file mode 100644
index 0000000..870e0d8
--- /dev/null
+++ b/pages/payment/payment_detail.vue
@@ -0,0 +1,214 @@
+<!-- 收付明细 -->
+<style lang="scss" scoped>
+	.payment-detail {
+		.payment-detail-head {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			background-color: #EFEFEF;
+			padding: 30rpx 40rpx;
+
+			.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 26rpx;
+					border-radius: 40rpx;
+					background-color: #E3E3E3;
+
+					text {
+						margin-right: 12rpx;
+						font-size: 28rpx;
+						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>
+<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 class="payment-detail-head-l" @click="pickShow = true">
+					<text>2024年3月10日</text>
+					<u-icon name="arrow-down" :bold="true"></u-icon>
+				</view>
+				<view class="payment-detail-head-r">筛选</view>
+			</view>
+			<view class="payment-detail-total">
+				<text class="outcome">支出￥0.00</text> <text class="income">收入￥0.00</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 in 10">
+					<view class="payment-detail-con-item">
+						<view class="item-desc">
+							<text class="item-desc-name">扫二维码付款给-张三</text>
+							<text class="item-desc-price">+10</text>
+						</view>
+						<view class="item-time">3月11日 10:46</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="searchParams.page == 1 && (!paymentData || paymentData.length == 0)" mode="list"
+				icon="http://cdn.uviewui.com/uview/empty/list.png" />
+		</view>
+
+		<!-- 时间选择器 年月日 -->
+		<u-datetime-picker :show="pickShow" v-model="pickerInitVal" mode="date" @confirm="pickerConfirm"
+			@cancel="pickShow = false"></u-datetime-picker>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				conHeight: 0,
+				paymentData: [],
+				searchParams: {
+					page: 1,
+					limit: 15
+				},
+				loadend: false,
+				loading: false,
+				loadTitle: '加载更多',
+				pickShow: false,
+				pickerInitVal: Number(new Date())
+			}
+		},
+		onLoad() {
+			this.initHeight()
+		},
+
+		onReachBottom() {
+			if (this.paymentData.length > 0) {
+				setTimeout(() => {
+					this.getGoods(false);
+				}, 10)
+			}
+		},
+
+		methods: {
+			pickerConfirm(e) {
+				this.pickShow = false;
+				const date = new Date(e.value).format('yyyy-MM-dd')
+				console.log(date);
+			},
+
+			async getData(isPage) {
+				let that = this;
+				if (that.loadend) return;
+				if (that.loading) return;
+
+				if (isPage === true) {
+					that.searchParams.page = 1;
+					that.$set(that, 'paymentData', []);
+				}
+
+				that.loading = true;
+				that.loadTitle = '';
+				await getOrderList(that.searchParams).then(res => {
+					let list = res.data.list;
+					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)
+
+					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");
+					console.log(conDom);
+					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>
\ No newline at end of file