studyTest/pages/expense/expense.vue

<template>
	<view class="expense-container">
		<view class="top-bar">
			<view class="title">支出记录</view>
		</view>

		<view class="filter-bar">
			<view class="filter-item" :class="{ active: filterType === 'all' }" @click="filterType = 'all'">
				全部
			</view>
			<view class="filter-item" :class="{ active: filterType === 'water' }" @click="filterType = 'water'">
				水费
			</view>
			<view class="filter-item" :class="{ active: filterType === 'electric' }" @click="filterType = 'electric'">
				电费
			</view>
			<view class="filter-item" :class="{ active: filterType === 'public' }" @click="filterType = 'public'">
				公共支出
			</view>
		</view>

		<view class="list">
			<view class="expense-item" v-for="(item, index) in expenses" :key="index">
				<view class="item-header">
					<view class="expense-type">
						<text>{{ item.room }}</text>
					</view>
					<view class="expense-amount">¥{{ item.exp_amount }}</view>
				</view>

				<view class="item-body">
					<view class="detail-item">
						<view class="detail-label">支付方式</view>
						<view>{{ item.exp_method }}</view>
					</view>

					<view class="detail-item">
						<view class="detail-label">支出日期</view>
						<view>{{ item.exp_date }}</view>
					</view>

					<view class="detail-item">
						<view class="detail-label">支付人</view>
						<view>{{ item.username }}</view>
					</view>

					<view class="detail-item" v-if="item.remark">
						<view class="detail-label">备注</view>
						<view>{{ item.remark }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onShow } from '@dcloudio/uni-app'

	const filterType = ref('all')
	const expenses = ref([{
				id: 1,
				room:'706',
				exp_amount: 39.00,
				exp_date: '2025-09-08 14:27:21',
				username:'李慧琳',
				exp_method: '微信支付',
				exp_type: 1,
				remark: '电卡充值'
			},
			{
				id: 2,
				room:'706',
				exp_amount: 11.00,
				exp_date: '2025-09-08 14:28:40',
				username:'李慧琳',
				exp_method: '微信支付',
				exp_type: 1,
				remark: '电卡充值'
			},
			{
				id: 3,
				room:'706',
				exp_amount: 50.00,
				exp_date: '2025-08-15 09:20:30',
				username:'李慧琳',
				exp_method: '支付宝',
				exp_type: 0,
				remark: '8月水费'
			},
			{
				id: 4,
				room:'706',
				exp_amount: 120.00,
				exp_date: '2025-09-01 16:45:12',
				username:'李慧琳',
				exp_method: '微信支付',
				exp_type: 2,
				remark: '购买扫帚、拖把等清洁用品'
			},
			{
				id: 5,
				room:'706',
				exp_amount: 35.00,
				exp_date: '2025-08-22 11:10:25',
				username:'李慧琳',
				exp_method: '现金',
				exp_type: 2,
				remark: '购买垃圾桶2个'
			}
		])


		onShow(() => {
			const isLogin = uni.getStorageSync('isLogin')
			console.log(isLogin)
			if (!isLogin) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}) 
		
		const res = computed(() => {
			switch (filterType.value) {
				case 'water':
					return expenses.value.filter(item => item.exp_type === '0')
				case 'electric':
					return expenses.value.filter(item => item.exp_type === '1')
				case 'public':
					return expenses.value.filter(item => item.exp_type === '1')
				default:
					return expenses.value
			}
		})


		const getTypeName = function(type) {
			switch (type) {
				case 0:
					return '水费';
				case 1:
					return '电费';
				case 2:
					return '公共支出';
				default:
					return '其他支出';
			}
		}

		const getIconClass = function(type) {
			switch (type) {
				case 0:
					return 'icon-water';
				case 1:
					return 'icon-electric';
				case 2:
					return 'icon-public';
				default:
					return 'icon-expense';
			}
		
	}

</script>

<style scoped>
	.expense-container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.top-bar {
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
	}

	.filter-bar {
		display: flex;
		background-color: #fff;
		padding: 15rpx 10rpx;
		border-bottom: 1px solid #eee;
	}

	.filter-item {
		display: inline-block;
		padding: 15rpx 25rpx;
		font-size: 26rpx;
		border-radius: 30rpx;
		margin: 0 5rpx;
	}

	.filter-item.active {
		background-color: #e6f7ff;
		color: #36bffa;
	}

	.list {
		padding: 20rpx;
	}

	.expense-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 25rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.expense-type text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.expense-amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #f5222d;
	}

	.item-body {
		display: flex;
		flex-direction: column;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		font-size: 28rpx;
	}

	.detail-label {
		color: #666;
	}
</style>