zhapp/pages/wallet/incomeExpenseRecord.vue

<template>
	<view class="page">
		<u-sticky zIndex="999" offsetTop="0">
			<view class="headerFilter dis ">
				<view class="FilterItem dis a-c j-c " @click="dateShow=true">
					<text>{{ info.month || (info.createTimeStart && info.createTimeEnd ? `${info.createTimeStart}-${info.createTimeEnd}` : '时间') }}</text>
					<view class="tag"></view>
				</view>
				<view class="FilterItem dis a-c j-c  ml-4" @click="incomeExpenseShow=true">
					<text>{{ info.incomeAndExpense == '0' ? '收入' : info.incomeAndExpense == '1' ? '支出' : '全部' }}</text>
					<view class="tag"></view>
				</view>
				<view class="FilterItem dis a-c j-c  ml-4" @click="statusShow=true">
					<text>{{ info.status == '0' ? '待审核' : info.status == '1' ? '审核通过' : info.status == '2' ? '审核驳回' : '状态' }}</text>
					<view class="tag"></view>
				</view>
			</view>
		</u-sticky>
		<view class="incomeExpenseView">
			<!-- 月份数据 -->
			<view class="monthlyData" v-for="(item,index) in transactionList" :key="index">
				<!-- 吸顶占位块 -->
				<u-sticky offsetTop="38">
					<view class="placeholderBlock"></view>
				</u-sticky>
				<u-sticky offsetTop="48">
					<!-- 头部汇总数据 -->
					<view class="header-summary dis f-c a-start">
						<text class=" month  textSizeView">{{item.incomeAndExpense.month}}</text>
						<view class="dis a-c j-s mt-1">
							<view class="formula dis f-c ">
								<text class="textSizeView">{{item.incomeAndExpense.balance}}</text>
								<text>余额</text>
							</view>
							<text class="textSizeView">=</text>
							<view class="formula dis f-c">
								<text class="textSizeView">{{item.incomeAndExpense.income}}</text>
								<text>收入</text>
							</view>
							<text class="textSizeView">-</text>
							<view class="formula dis f-c">
								<text class="textSizeView">{{item.incomeAndExpense.expense}}</text>
								<text>支出</text>
							</view>
						</view>
					</view>
				</u-sticky>
				<!-- 数据明细列表 -->
				<view class="data-details">
					<view class="item" v-for="(orderItem,orderIndex) in item.incomeAndExpenseList" :key="orderIndex"
						@click="billDetails(orderItem)">
						<view class="top dis a-c j-s ">
							<view class=" dis a-c ">
								<text>{{orderItem.remark}}</text>
								<text v-if="orderItem.licenseNo">（{{orderItem.licenseNo}}）</text>
							</view>
							<text
								class="font-weight">{{orderItem.incomeAndExpense=='1'?'-':'+'}}{{orderItem.amount}}</text>
						</view>
						<view class="bottom dis a-c ">
							<image class="icon-image" src="/static/image/my/wallet-icon1.png" mode=""></image>
							<text class="time">{{orderItem.createTime}}</text>
							<view class="status" :style="gradeText(orderItem.status)" v-if="orderItem.status">
								{{orderItem.status==0?'待审核':orderItem.status==1?'审核通过':'审核不通过'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 日期组件 -->
		<uni-datePicker :show="dateShow" @close="dateShow=false" @customTime="customTime"
			@customMonth="customMonthchange" @tabClick="tabClick"></uni-datePicker>
		<!-- 筛选组件 -->
		<uni-Popup :show="incomeExpenseShow" @close='incomeExpenseShow=false' headerTitle="收支类型"
			:statusList="quickOptions" contentType="status" @statusConfirm='incomeExpenseConfirm'>

		</uni-Popup>
		<uni-Popup :show="statusShow" @close='statusShow=false' headerTitle="状态" :statusList="quickOptions1"
			contentType="status" @statusConfirm='statusShowConfirm'>

		</uni-Popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				incomeExpenseShow: false, //筛选组件
				statusShow: false,
				quickOptions: [{
						label: "全部",
						value: " ",
					}, {
						label: "收入",
						value: "0",
					},
					{
						label: "支出",
						value: "1",
					}
				], //快捷选项
				quickOptions1: [{
						label: "全部",
						value: " ",
					},
					{
						label: "待审核",
						value: "0",
					},
					{
						label: "审核通过",
						value: "1",
					},
					{
						label: "审核驳回",
						value: "2",
					}
				], //快捷选项
				dateShow: false, //日期组件
				gradeMap: [{
						status: 0,
						style: {
							background: '#FFFCDF',
							color: "#FFC32B",
						}
					},
					{
						status: 1,
						style: {
							background: '#E3FBE7',
							color: "#18B63B",
						}
					},
					{
						status: 2,
						style: {
							background: '#FFECEC',
							color: "#F74141",
						}
					}
				],
				info: {
					month: "",
					status: "",
					createTimeStart: "",
					createTimeEnd: "",
					incomeAndExpense: "",
				},
				transactionList: [], //收支记录
			}
		},

		onShow() {
			this.transactionRecord();
		},
		onLoad() {},
		methods: {
			//收支记录
			async transactionRecord() {
				let res = await this.$http.post("/userAccount/getIncomeAndExpense", this.info)
				if (res.code == 200) {
					this.transactionList = res.data;
					// this.transactionList.push(...res.data);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					});
				}

			},
			//账单详情
			billDetails(item) {
				uni.navigateTo({
					url: `/pages/wallet/billDetails?info=${JSON.stringify(item)}`
				})
			},
			//类型筛选回调
			incomeExpenseConfirm(e) {
				console.log(e)
				this.info.incomeAndExpense = e;
				this.incomeExpenseShow = false;
				this.transactionRecord();
			},
			//状态筛选回调
			statusShowConfirm(e) {
				this.info.status = e;
				this.statusShow = false;
				this.transactionRecord();
			},
			//颜色匹配
			gradeText(status) {
				let info = this.gradeMap.find(val => val.status == status);
				return info?.style || {}
			},
			//日期月份回调
			customMonthchange(Month) {
				console.log(Month);
				this.info.month = Month;
				this.dateShow = false;
				this.transactionRecord();
			},
			//日期自定义时间回调
			customTime(start, end) {
				console.log(start, end);
				this.info.createTimeStart = start;
				this.info.createTimeEnd = end;
				this.dateShow = false;
				this.transactionRecord();
			},
			tabClick(name) {
				console.log(name);
				if (name == '选择月份') {
					this.info.createTimeStart = "";
					this.info.createTimeEnd = "";
				} else {
					this.info.month = "";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
	}

	/* 头部下拉筛选 */
	.headerFilter {
		background: #fff;
		border-top: 1rpx solid #eee;
		padding: 12rpx 30rpx;
		box-sizing: border-box;

		.FilterItem {
			font-size: 26rpx;
			color: #666;
			line-height: 2;

			/* 三角形 */
			.tag {
				width: 0;
				height: 0;
				border: 4px solid;
				border-color: #666666;
				border-bottom: 0 solid transparent;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				margin-left: 4rpx;
			}

		}
	}

	/* 月份数据 */
	.incomeExpenseView {
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;

		.monthlyData {

			// 头部汇总
			.header-summary {
				background-image: url('../../static/image/my/wallet-bg2.png');
				background-size: 100% 100%;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				padding: 30rpx;
				box-sizing: border-box;
				backdrop-filter: blur(50rpx);

				>view {
					width: 100%;

					.formula {
						text:last-child {
							font-size: 24rpx;
							color: #666;
						}
					}
				}
			}

			.data-details {
				background-color: #fff;
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					border-bottom: 1rpx solid #eee;
					padding: 30rpx 0;
					box-sizing: border-box;

					.top {
						font-size: 30rpx;
						color: #333;
					}

					.bottom {
						margin-top: 7rpx;

						.icon-image {
							width: 20rpx;
							height: 20rpx;
						}

						.time {
							margin-left: 5rpx;
							font-size: 20rpx;
							color: #999;
						}

						.status {
							background: #FFFCDF;
							color: #FFC32B;
							padding: 1rpx 10rpx;
							box-sizing: border-box;
							border-radius: 2rpx 2rpx 2rpx 2rpx;
							margin-left: auto;
							font-size: 20rpx;
							font-weight: bold;
						}
					}
				}

				.item:last-child {
					border-bottom: none;
				}
			}

			.textSizeView {
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.monthlyData:first-child {
			margin-top: none;
		}
	}

	.placeholderBlock {
		background: #f8f8f8;
		width: 100%;
		height: 20rpx;
	}
</style>