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.state === item.value }" v-for="(item, index) in stateOption" :key="index" @click="filterForm.state = 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.timeType === item.value }" v-for="(item, index) in timeOption" :key="index" @click="filterForm.timeType = item.value">
					{{ item.label }}
				</view>
				<uni-datetime-picker v-model="filterForm.timeRanges" type="daterange">
					<view :class="{ item: true, active: filterForm.timeType === 4}" @click="filterForm.timeType = 4">
						自定义 {{ filterForm.timeRanges.length ? filterForm.timeRanges[0] + ' 至 ' + filterForm.timeRanges[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">{{ item.label }}</view>
			</view>
		</view>
		<view class="btn-group">
			<button class="btn btn-1">重置</button>
			<button class="btn" @click="handleSubmit">确定</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			filterForm: {
				state: 0,
				timeType: 0,
				timeRanges: [],
				sort: 0
			},
			stateOption: [
				{
					label: '全部',
					value: 0
				},
				{
					label: '应付账单',
					value: 1
				},
				{
					label: '应收账单',
					value: 2
				}
			],
			timeOption: [
				{
					label: '最近30天',
					value: 0
				},
				{
					label: '最近90天',
					value: 1
				},
				{
					label: '本季度',
					value: 2
				},
				{
					label: '本年度',
					value: 3
				}
			],
			sortOption: [
				{
					label: '正序',
					value: 0
				},
				{
					label: '倒序',
					value: 1
				}
			]
		};
	},
	methods: {
		handleSubmit(){
			uni.navigateBack()
		}
	}
};
</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>