发票筛选页面；

App.vue

@@ -95,6 +95,9 @@ page {
 	height: 100%;
 	background: #f3f3f3;
 }
+button::after{
+	display: none;
+}
  *{touch-action: none;}
 .display-flex-start {
   display: flex;

pages.json

@@ -129,6 +129,13 @@
 			{
 				"navigationBarTitleText" : "我的发票"
 			}
+		},
+		{
+			"path" : "pages/self/invoice/filter",
+			"style" : 
+			{
+				"navigationBarTitleText" : "发票筛选"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/invoice/filter.vue

@@ -0,0 +1,160 @@
+<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
+				},
+				{
+					label: '已开',
+					value: 3
+				}
+			],
+			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>

pages/self/invoice/index.scss

@@ -63,11 +63,11 @@
 		padding: 13.74rpx 233.52rpx 13.74rpx 27.47rpx;
 		position: relative;
 		box-sizing: border-box;
-		&+.item{
+		& + .item {
 			margin-top: 13.74rpx;
 		}
 	}
-	.state{
+	.state {
 		width: 178.57rpx;
 		height: 178.57rpx;
 		position: absolute;
@@ -80,37 +80,37 @@
 		justify-content: center;
 		font-size: 32.97rpx;
 		color: #fff;
-		&::after{
+		&::after {
 			font-size: 27.47rpx;
 			margin-top: 13.74rpx;
 		}
-		&-1{
+		&-1 {
 			background: #00bfbf;
-			&::after{
+			&::after {
 				content: '待申请';
 			}
 		}
-		&-2{
+		&-2 {
 			background: #ccc;
-			&::after{
+			&::after {
 				content: '申请中';
 			}
 		}
-		&-3{
+		&-3 {
 			background: #f7922a;
-			&::after{
-				content: '已开票';
+			&::after {
+				content: '已开';
 			}
 		}
 	}
-	.name{
+	.name {
 		font-size: 27.47rpx;
 		line-height: 1.5;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.desc{
+	.desc {
 		font-size: 24.73rpx;
 		line-height: 1.5;
 		color: #999;

pages/self/invoice/index.vue

@@ -5,7 +5,7 @@
 				<input class="input" placeholder-style="color: #999" type="text" placeholder="关键词" maxlength="20" />
 				<image class="icon" src="../../../static/icon_search.png"></image>
 			</view>
-			<button class="filter">筛选</button>
+			<button class="filter" @click="handleOpenFilter">筛选</button>
 		</view>
 		<view class="invoice-panel">
 			<view class="item">
@@ -39,9 +39,16 @@
 <script>
 export default {
 	data() {
-		return {};
+		return {
+		};
 	},
-	methods: {}
+	methods: {
+		handleOpenFilter() {
+			uni.navigateTo({
+				url: 'filter'
+			});
+		}
+	}
 };
 </script>