资金明细记录页面；明细筛选页面；

pages.json

@@ -178,6 +178,20 @@
 			{
 				"navigationBarTitleText" : "企业钱包"
 			}
+		},
+		{
+			"path" : "pages/self/wallet/record",
+			"style" : 
+			{
+				"navigationBarTitleText" : "资金明细"
+			}
+		},
+		{
+			"path" : "pages/self/wallet/filter",
+			"style" : 
+			{
+				"navigationBarTitleText" : "明细筛选"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/wallet/filter.vue

@@ -0,0 +1,164 @@
+<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
+				},
+				{
+					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/wallet/index.vue

@@ -55,6 +55,17 @@
 		},
 		methods: {
 
+		handleNav(val) {
+			let url = '';
+			switch (val) {
+				case 1:
+					url = 'record';
+					break;
+			}
+			uni.navigateTo({
+				url
+			});
+		}
 		}
 	}
 </script>

pages/self/wallet/record.vue

@@ -0,0 +1,155 @@
+<template>
+	<view class="page-wrap">
+		<view class="fixed-header">
+			<view class="search-input">
+				<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" @click="handleOpenFilter">筛选</button>
+		</view>
+		<view class="record-panel">
+			<view class="item">
+				<view class="time">2023-10-13  16:32:54</view>
+				<view class="desc">账单类型：应付# 房源·免租期补齐</view>
+				<view class="desc">账单编号：9886</view>
+				<view class="money">+ 4400.00</view>
+				<view class="total">2765.30</view>
+			</view>
+			<view class="item">
+				<view class="time">2023-10-13  16:32:54</view>
+				<view class="desc">账单类型：应付# 房源·免租期补齐</view>
+				<view class="desc">账单编号：9886</view>
+				<view class="money money-1">- 4400.00</view>
+				<view class="total">2765.30</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+		};
+	},
+	methods: {
+		handleOpenFilter() {
+			uni.navigateTo({
+				url: 'filter'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-wrap {
+	padding-top: 96.15rpx;
+}
+.fixed-header {
+	position: fixed;
+	left: 0%;
+	top: 0%;
+	right: 0%;
+	height: 96.15rpx;
+	background: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 68.68rpx;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+	.search-input {
+		width: 439.56rpx;
+		height: 61.81rpx;
+		position: relative;
+		&::after{
+			content: '';
+			position: absolute;
+			left: -50%;
+			top: -50%;
+			right: -50%;
+			bottom: -50%;
+			transform: scale(.5);
+			border: 2rpx solid #d0dde9;
+			border-radius: 8.24rpx;
+		}
+		.input {
+			width: 100%;
+			height: 100%;
+			font-size: 24.73rpx;
+			padding: 0 82.42rpx 0 13.74rpx;
+			box-sizing: border-box;
+		}
+		.icon {
+			width: 39.84rpx;
+			height: 39.84rpx;
+			position: absolute;
+			right: 27.47rpx;
+			top: 50%;
+			transform: translateY(-50%);
+		}
+	}
+	.filter {
+		font-size: 27.47rpx;
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		&::after {
+			display: none;
+		}
+	}
+}
+.record-panel{
+	padding: 13.74rpx 0;
+	.item{
+		height: 151.1rpx;
+		background: #fff;
+		padding: 20.6rpx 206.04rpx 27.47rpx 27.47rpx;
+		box-sizing: border-box;
+		position: relative;
+		border-top: 1rpx solid #e0e0e0;
+		&:first-child{
+			border: none;
+		}
+	}
+	.time{
+		font-size: 32.97rpx;
+	}
+	.desc{
+		font-size: 27.47rpx;
+		color: #999;
+	}
+	.money{
+		font-size: 32.97rpx;
+		color: #43C475;
+		position: absolute;
+		right: 27.47rpx;
+		top: 34.34rpx;
+		&-1{
+			color: #E74C3C;
+		}
+	}
+	.total{
+		font-size: 27.47rpx;
+		color: #999;
+		position: absolute;
+		right: 27.47rpx;
+		top: 75.55rpx;
+		&:before{
+			content: '余额';
+			font-size: 26.1rpx;
+			margin-right: 6.87rpx;
+		}
+	}
+}
+</style>