cashier_app/pageCreditBuyer/rePaymentRecord.vue

<template>
	<view class="credit_search">
		<up-input
			shape='circle'
			border="none"
			v-model="pageData.query.paymentMethod"
			type="text" 
			placeholder="支付方式"
			prefixIcon="search"
			prefixIconStyle="font-size: 26px;color: #666"
			style='width: 100%;padding: 24rpx;'
			></up-input>
		<view class="search" @tap="inputEvent">搜索</view>
	</view>
	<view class="content">
		<view class="content_list" v-if="pageData.list.length > 0">
			<view class="list_cell" v-for="(item,index) in pageData.list" :key="item.id">
				<view><text class="paymentMethod">{{item.paymentMethod}}</text><text class="repaymentAmount">￥{{item.repaymentAmount}}</text></view>
				<view style="align-items: flex-start;"><text class="remark">{{item.remark||'-'}}</text><text class="createTime" style="flex-shrink: 0;">{{item.createTime}}</text></view>
			</view>
		</view>
		<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 300rpx;">
			<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
			<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">暂无数据</view>
		</view>
	</view>
	
</template>
<script setup>
	import { reactive, ref } from 'vue';
	import { onLoad, onShow, onReachBottom  } from '@dcloudio/uni-app';
	
	import { creditRePaymentRecord } from '@/http/api/buyer.js';
	const pageData = reactive({
		query: {
			page: 1,
			size: 10,
			creditBuyerId: null,
			orderId: null,
			paymentMethod: ''
		},
		totalElements: 0,
		list: []
	})
	
	onLoad((options) => {
		console.log(options)
		if ( options.id ) {
			pageData.query.creditBuyerId = options.id;
		}
		if ( options.orderId ) {
			pageData.query.orderId = options.orderId;
		}
		getList()
	})
	// 监听，触底事件。 查询下一页
	onReachBottom(() => {
		console.log(pageData.query.page)
		if( pageData.query.page * pageData.query.size < pageData.totalElements) {
			pageData.query.page++
			getList();
		}
	});
	/**
	 * 获取还款记录列表
	 */
	async function getList() {
		let params = {
			creditBuyerId: pageData.query.creditBuyerId,
			paymentMethod: pageData.query.paymentMethod,
			size: pageData.query.size,
			page: pageData.query.page
		}
		if ( pageData.query.orderId ) {
			params.orderId = pageData.query.orderId
		}
		creditRePaymentRecord(params).then(res => {
			pageData.list = [...pageData.list,...res.records]
			pageData.totalElements = res.totalRow
		})
	}
	
	/**
	 * 挂账人/手机号筛选
	 */
	function inputEvent(d) {
		pageData.query.paymentMethod = pageData.query.paymentMethod.replace(/\s*/g, "");
		pageData.query.page = 1;
		pageData.list = [];
		getList()
	}
</script>
<style>
	page{
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.credit_search {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		padding: 32rpx 28rpx;
		>view:nth-child(1) {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
	
			background: #F9F9F9;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
	
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
	
		}
		.search{
			width: 116rpx;
			text-align: center;
			flex-shrink: 0;
		}
	}
	.content {
		padding: 32rpx 28rpx 150rpx 28rpx;
		.content_list{
			padding: 40rpx 24rpx 8rpx 24rpx;
			background-color: #fff;
			border-radius: 18rpx;
			.list_cell{
				border-bottom: 1rpx solid #E5E5E5;
				padding-bottom: 24rpx;
				margin-bottom: 24rpx;
				>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.paymentMethod,.repaymentAmount{
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 16rpx;
					}
					.remark,.createTime{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
			.list_cell:last-child{
				border-bottom: none;
				margin-bottom: 0;
			}
		}
	}
</style>