cashier_app/pageRecharge/components/rechargeRerord.vue

<!-- 充值记录 -->
<template>
	<view class="container">
		<view class="query-wrap">
			<view class="ipt">
				<DateTimePicker v-model:startTime="form.startTime" v-model:endTime="form.endTime" style="width: 100%"></DateTimePicker>
			</view>
			<view class="ipt">
				<view class="ipt" @click="showSheet = true">
					<u-input readonly placeholder="请选择充值类型" v-model="form.bizCodeText" suffix-icon="arrow-right" :suffixIconStyle="{ fontSize: '14px' }"></u-input>
				</view>
				<view class="btn-wrap">
					<view class="btn">
						<u-button type="primary" @click="searchHandle">搜索</u-button>
					</view>
					<view class="btn">
						<u-button @click="resetHandle">重置</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="total-info">
			<view class="card">
				<view class="header">
					<text class="t">数据统计</text>
				</view>
			</view>
		</view> -->
		<view class="list">
			<view class="item" v-for="item in tableData.list" :key="item.id">
				<view class="header">
					<text class="name">{{ item.shopName }}</text>
					<text class="time">{{ item.createTime }}</text>
				</view>
				<view class="content">
					<view class="left">
						<view class="top">
							<text class="t">{{ item.nickName }}</text>
						</view>
						<view class="btm">
							<text class="t">备注:{{ item.remark }}</text>
						</view>
					</view>
					<view class="num-wrap">
						<text class="num">{{ item.amount }}</text>
						<text class="t">订单消费</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="tableData.status"></u-loadmore>
		</view>
		<u-action-sheet
			:actions="bizCodeList"
			title="充值类型"
			:round="20"
			cancelText="取消"
			:show="showSheet"
			@close="showSheet = false"
			@select="bizCodeSelectHandle"
		></u-action-sheet>
	</view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import DateTimePicker from './date-time-picker.vue';
import { shopUserFlow } from '@/http/api/market/index.js';
import { onReachBottom } from '@dcloudio/uni-app';

const showSheet = ref(false);
const bizCodeList = [
	{
		value: 'cashIn',
		name: '现金充值'
	},
	{
		value: 'wechatIn',
		name: '微信小程序充值'
	},
	{
		value: 'alipayIn',
		name: '支付宝小程序充值'
	},
	{
		value: 'awardIn',
		name: '充值奖励'
	},
	{
		value: 'rechargeRefund',
		name: '充值退款'
	},
	{
		value: 'orderPay',
		name: '订单消费'
	},
	{
		value: 'orderRefund',
		name: '订单退款'
	},
	{
		value: 'adminIn',
		name: '管理员充值'
	},
	{
		value: 'adminOut',
		name: '管理员消费'
	}
];

const form = ref({
	bizCode: '',
	bizCodeText: '',
	startTime: '',
	endTime: ''
});

function bizCodeSelectHandle(e) {
	console.log(e);
	form.value.bizCode = e.value;
	form.value.bizCodeText = e.name;
}

// 搜索
function searchHandle() {
	tableData.status = 'loading';
	tableData.page = 1;
	shopUserFlowAjax();
}

// 重置
function resetHandle() {
	form.value.bizCode = '';
	form.value.bizCodeText = '';
	form.value.startTime = '';
	form.value.endTime = '';
	searchHandle();
}

const tableData = reactive({
	status: 'loading',
	page: 1,
	size: 10,
	list: []
});

// 获取店铺充值记录
async function shopUserFlowAjax() {
	try {
		if (tableData.page == 1) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
		}

		const res = await shopUserFlow({
			...form.value,
			page: tableData.page,
			size: tableData.size
		});

		if (tableData.page == 1) {
			tableData.list = res.records;
		} else {
			tableData.list.push(...res.records);
		}
		if (res.pageNumber >= res.totalPage) {
			tableData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
	if (tableData.page == 1) {
		setTimeout(() => {
			uni.hideLoading();
		}, 500);
	}
}

onReachBottom(() => {
	if (tableData.status != 'nomore') {
		tableData.page++;
		shopUserFlowAjax();
	}
});

onMounted(() => {
	shopUserFlowAjax();
});
</script>

<style scoped lang="scss">
.query-wrap {
	background-color: #fff;
	padding: 0 28upx 28upx;
	display: flex;
	gap: 28upx;
	flex-direction: column;
	.ipt {
		width: 100%;
		flex: 1;
		display: flex;
		gap: 28upx;
	}
	.btn-wrap {
		display: flex;
		gap: 28upx;
	}
}
.total-info {
	padding: 28upx;
	.card {
		background-color: #4a9dff;
		border-radius: 20upx;
		padding: 28upx;
	}
}
.list {
	padding: 28upx;
	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		margin-bottom: 28upx;
		.header {
			display: flex;
			justify-content: space-between;
			.name {
				font-size: 28upx;
			}
			.time {
				font-size: 28upx;
				color: #999999;
			}
		}
		.content {
			display: flex;
			padding-top: 28upx;
			.left {
				flex: 1;
				.top {
					.t {
						font-size: 28upx;
						color: #333;
					}
				}
				.btm {
					.t {
						font-size: 28upx;
						color: #999;
					}
				}
			}
			.num-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.num {
					font-size: 32upx;
					color: #333;
				}
				.t {
					font-size: 24upx;
					color: #666666;
				}
			}
		}
	}
}
</style>