XEH-miniProgram/pages/self/bill/filter.vue

<template>
	<view class="page-wrap">
		<view class="filter-item">
			<view class="label">开票状态</view>
			<view class="tag-group">
				<view :class="{ item: true, active: filterForm.type === item.value }" v-for="(item, index) in typeOption" :key="index" @click="filterForm.type = item.value">
					{{ item.label }}
				</view>
			</view>
		</view>
		<view class="filter-item">
			<view class="label">日期范围</view>
			<view class="tag-group">
				<view :class="{ item: true, active: filterForm.date === item }" v-for="(item, index) in dateOption" :key="index" @click="filterForm.date = item">
					{{ item }}
				</view>
				<uni-datetime-picker v-model="filterForm.dateRanges" type="daterange">
					<view :class="{ item: true, active: filterForm.date === '自定义' }" @click="filterForm.date = '自定义'">
						自定义 {{ filterForm.dateRanges.length ? filterForm.dateRanges[0] + ' 至 ' + filterForm.dateRanges[1] : '' }}
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="filter-item">
			<view class="label">日期排序</view>
			<view class="tag-group">
				<view :class="{ item: true, active: item.value === filterForm.sort }" v-for="(item, index) in sortOption" :key="index" @click="filterForm.sort = item.value">
					{{ item.label }}
				</view>
			</view>
		</view>
		<view class="btn-group">
			<button class="btn btn-1" @click="handleReset">重置</button>
			<button class="btn" @click="handleSubmit">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			filterForm: {
				keyword: '',
				type: '',
				date: '最近30天',
				dateRanges: [],
				sort: 'asc'
			},
			typeOption: [
				{
					label: '全部',
					value: ''
				},
				{
					label: '应付账单',
					value: '应付'
				},
				{
					label: '应收账单',
					value: '应收'
				}
			],
			dateOption: ['最近30天', '最近90天', '本季度', '本年度'],
			sortOption: [
				{
					label: '正序',
					value: 'asc'
				},
				{
					label: '倒序',
					value: 'desc'
				}
			]
		};
	},
	onLoad(option) {
		const eventChannel = this.getOpenerEventChannel();
		eventChannel.on('updateData', (data) => {
			const isCustomDate = data.date.indexOf('至') > -1;
			this.filterForm = {
				keyword: data.keyword,
				type: data.type,
				date: isCustomDate ? '自定义' : data.date,
				dateRanges: isCustomDate ? data.date.split('至') : [],
				sort: data.sort
			};
		});
	},
	methods: {
		handleSubmit() {
			const { keyword, type, date, dateRanges, sort } = this.filterForm;
			if (date === '自定义' && !dateRanges.length) {
				uni.showToast({
					title: '请选择自定义日期',
					icon: 'none'
				});
				return;
			}
			uni.$emit('updateData', {
				keyword,
				type,
				date: date === '自定义' ? dateRanges.join('至') : date,
				sort
			});
			uni.navigateBack();
		},
		handleReset() {
			this.filterForm = {
				keyword: this.filterForm.keyword,
				type: '',
				date: '最近30天',
				dateRanges: [],
				sort: 'asc'
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	padding: 41.21rpx 27.47rpx;
}
.filter-item {
	font-size: 27.47rpx;
	margin-bottom: 41.21rpx;
	.label {
		color: #666;
	}
}
.tag-group {
	display: flex;
	flex-wrap: wrap;
	.item {
		min-width: 157.97rpx;
		box-sizing: border-box;
		color: #999;
		height: 68.68rpx;
		line-height: 65.93rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
		border: 1rpx solid #dcdcdc;
		border-radius: 5.49rpx;
		text-align: center;
		margin: 13.74rpx 13.74rpx 0 0;
		background: #fff;
		padding: 0 20.6rpx;
	}
	.active {
		color: #00bcd2;
		border-color: #00bcd2;
		background: #eafffd;
	}
}
.btn-group {
	display: flex;
	justify-content: center;
	margin-top: 156.59rpx;
	.btn {
		width: 247.25rpx;
		height: 75.55rpx;
		background: #079eff;
		font-size: 27.47rpx;
		color: #fff;
		border-radius: 8.24rpx;
		border: none;
		margin: 0 13.74rpx;
		line-height: 75.55rpx;
		&-1 {
			color: #040404;
			background: #ccc;
		}
	}
}
</style>