我的账单页面；

账单筛选页面；
账单详情页面；
搜索框边框在iOS中显示不全修复；

pages.json

@@ -136,6 +136,34 @@
 			{
 				"navigationBarTitleText" : "发票筛选"
 			}
+		},
+		{
+			"path" : "pages/self/bill/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "我的账单"
+			}
+		},
+		{
+			"path" : "pages/self/bill/filter",
+			"style" : 
+			{
+				"navigationBarTitleText" : "账单筛选"
+			}
+		},
+		{
+			"path" : "pages/self/bill/detail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "账单详情"
+			}
+		},
+		{
+			"path" : "pages/self/order/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "我的订单"
+			}
 		}
 	],
 	"globalStyle": {

pages/self/bill/detail.vue

@@ -0,0 +1,295 @@
+<template>
+	<view class="page-wrap">
+		<view class="header-panel">
+			<view class="name">应付# 财税·年服务费</view>
+			<view class="desc">账单编号：9885</view>
+			<view class="desc">创建时间：2023-10-25 14:26:08</view>
+			<view class="desc">所属订单：HC25263</view>
+			<view class="state state-1">49760.00</view>
+		</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				账单信息
+			</view>
+			<view class="text-row">
+				<view class="label">付款方</view>
+				<view class="text">天津超易达胜科技发展有限公司</view>
+			</view>
+			<view class="text-row" style="border: none">
+				<view class="label">收款方</view>
+				<view class="text">天津鑫恩华产业园区管理有限公司</view>
+			</view>
+			<view class="text-row">
+				<view class="label">账单金额</view>
+				<view class="text">24600.00</view>
+			</view>
+			<view class="text-row">
+				<view class="label">账单说明</view>
+				<view class="text">33600.00，前一份合同押金抵消 9000</view>
+			</view>
+			<view class="text-row">
+				<view class="label">约定支付日期</view>
+				<view class="text">2023-09-15</view>
+			</view>
+			<view class="text-row">
+				<view class="label">支付状态</view>
+				<view class="text">已支付</view>
+			</view>
+			<template v-if="isCollapse">
+				<view class="text-row">
+					<view class="label">支付方式</view>
+					<view class="text">善付通</view>
+				</view>
+				<view class="text-row">
+					<view class="label">支付时间</view>
+					<view class="text">2023-12-11 20:32:08</view>
+				</view>
+				<view class="text-row">
+					<view class="label">是否到账</view>
+					<view class="text">待确认</view>
+				</view>
+			</template>
+		</view>
+		<view v-show="isCollapse" class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				备注信息
+			</view>
+			<view class="text-row">
+				<text class="remark">备注默认为空，如果有备注信息在这里填写， 最多三行，肯定够用了 按字义回车换行，显得更有条理</text>
+			</view>
+		</view>
+		<view class="collapse-btn" @click="isCollapse = !isCollapse">{{ isCollapse ? '收起 ∧' : '展开更多 ∨' }}</view>
+		<view class="info-panel">
+			<view class="title-row">
+				<image class="icon" src="../../../static/svg/tag.svg"></image>
+				发票信息
+			</view>
+			<view class="text-row">
+				<view class="label">发票</view>
+				<view class="text">电子发票</view>
+			</view>
+			<view class="text-row">
+				<view class="label">发票用途</view>
+				<view class="text">
+					<input class="input" type="text" placeholder="请输入" maxlength="20" />
+				</view>
+			</view>
+			<view class="text-row">
+				<view class="label">开票状态</view>
+				<view class="text">待申请</view>
+			</view>
+		</view>
+		<view class="contact-row">
+			<image class="avatar" src="../../../static/img_avatar.png" mode="aspectFill"></image>
+			<view class="info">
+				<view class="name">陈禹佳</view>
+				<view class="desc">专属客服，24小时咨询</view>
+			</view>
+			<view class="tel">电话</view>
+			<image class="icon" src="../../../static/icon_tel.png"></image>
+		</view>
+		<view class="foot-panel">
+			<view class="foot-panel-wrap">
+				<button class="btn btn-1">申请开票</button>
+				<button class="btn">去支付</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			isCollapse: false
+		};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.header-panel {
+	height: 206.04rpx;
+	background: #fff;
+	padding: 13.74rpx 233.52rpx 13.74rpx 27.47rpx;
+	position: relative;
+	box-sizing: border-box;
+	border-top: 1rpx solid #e0e0e0;
+	.state {
+		width: 178.57rpx;
+		height: 178.57rpx;
+		position: absolute;
+		right: 27.47rpx;
+		top: 13.74rpx;
+		border-radius: 8.24rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: 32.97rpx;
+		color: #fff;
+		&::after {
+			font-size: 27.47rpx;
+			margin-top: 13.74rpx;
+		}
+		&-1 {
+			background: #00bfbf;
+			&::after {
+				content: '未支付';
+			}
+		}
+		&-2 {
+			background: #ccc;
+			&::after {
+				content: '确认中';
+			}
+		}
+		&-3 {
+			background: #f7922a;
+			&::after {
+				content: '已到账';
+			}
+		}
+	}
+	.name {
+		font-size: 32.97rpx;
+		line-height: 1.5;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-bottom: 6.87rpx;
+	}
+	.desc {
+		font-size: 27.47rpx;
+		line-height: 1.5;
+		color: #999;
+	}
+}
+.info-panel {
+	background: #fff;
+	margin-top: 13.74rpx;
+	.title-row {
+		padding: 13.74rpx 27.47rpx;
+		min-height: 82.42rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #e0e0e0;
+		font-size: 27.47rpx;
+		color: #0384d6;
+		.icon {
+			width: 20.6rpx;
+			height: 20.6rpx;
+			background: #3498db;
+			padding: 8.24rpx;
+			margin-right: 13.74rpx;
+		}
+	}
+	.text-row {
+		padding: 20.6rpx 27.47rpx;
+		min-height: 82.42rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 27.47rpx;
+		& + .text-row {
+			border-top: 1rpx solid #e0e0e0;
+		}
+		.label {
+			white-space: nowrap;
+			margin-right: 27.47rpx;
+		}
+		.text {
+			word-break: break-all;
+			text-align: right;
+		}
+		.remark {
+			line-height: 41.21rpx;
+		}
+		.input {
+			width: 274.73rpx;
+			margin: -5.49rpx 0;
+		}
+	}
+}
+.collapse-btn {
+	font-size: 24.73rpx;
+	color: #999;
+	line-height: 82.42rpx;
+	text-align: center;
+	background: #fff;
+	border-top: 1rpx solid #e0e0e0;
+}
+.contact-row {
+	display: flex;
+	align-items: center;
+	height: 109.89rpx;
+	background: #fff;
+	padding: 0 27.47rpx;
+	margin: 13.74rpx 0;
+	.avatar {
+		width: 76.92rpx;
+		height: 76.92rpx;
+		border-radius: 50%;
+	}
+	.info {
+		flex: 1;
+		margin: 0 13.74rpx;
+	}
+	.name {
+		font-size: 27.47rpx;
+		color: #545e8f;
+	}
+	.desc {
+		font-size: 24.73rpx;
+		color: #999;
+	}
+	.tel {
+		font-size: 27.47rpx;
+		color: #999;
+	}
+	.icon {
+		width: 54.95rpx;
+		height: 54.95rpx;
+		margin-left: 13.74rpx;
+	}
+}
+.foot-panel {
+	height: 96.15rpx;
+	&-wrap {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 96.15rpx;
+		background: #f7f7f7;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: 0 27.47rpx;
+	}
+	.btn {
+		min-width: 164.84rpx;
+		height: 68.68rpx;
+		font-size: 27.47rpx;
+		line-height: 68.68rpx;
+		color: #fff;
+		background: #f97631;
+		border-radius: 5.49rpx;
+		box-sizing: border-box;
+		padding: 0 27.47rpx;
+		margin: 0 0 0 13.74rpx;
+		&-1 {
+			color: #666;
+			background: none;
+			border: 1rpx solid #ccc;
+			line-height: 65.93rpx;
+		}
+	}
+}
+</style>

pages/self/bill/filter.vue

@@ -0,0 +1,156 @@
+<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>

pages/self/bill/index.scss

@@ -0,0 +1,128 @@
+.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;
+		}
+	}
+}
+.invoice-panel {
+	padding: 13.74rpx 0;
+	.item {
+		height: 206.04rpx;
+		background: #fff;
+		padding: 13.74rpx 233.52rpx 13.74rpx 27.47rpx;
+		position: relative;
+		box-sizing: border-box;
+		& + .item {
+			margin-top: 13.74rpx;
+		}
+	}
+	.state {
+		width: 178.57rpx;
+		height: 178.57rpx;
+		position: absolute;
+		right: 27.47rpx;
+		top: 13.74rpx;
+		border-radius: 8.24rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: 32.97rpx;
+		color: #fff;
+		&::after {
+			font-size: 27.47rpx;
+			margin-top: 13.74rpx;
+		}
+		&-1 {
+			background: #00bfbf;
+			&::after {
+				content: '未支付';
+			}
+		}
+		&-2 {
+			background: #ccc;
+			&::after {
+				content: '确认中';
+			}
+		}
+		&-3 {
+			background: #f7922a;
+			&::after {
+				content: '已到账';
+			}
+		}
+	}
+	.name {
+		font-size: 32.97rpx;
+		line-height: 1.5;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		margin-bottom: 6.87rpx;
+	}
+	.desc {
+		font-size: 27.47rpx;
+		line-height: 1.5;
+		color: #999;
+	}
+}

pages/self/bill/index.vue

@@ -0,0 +1,59 @@
+<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="invoice-panel">
+			<view class="item" @click="handleOpenDetail">
+				<view class="name">应付# 财税·年服务费</view>
+				<view class="desc">账单编号：9885</view>
+				<view class="desc">创建时间：2023-10-25 14:26:08</view>
+				<view class="desc">所属订单：HC25263</view>
+				<view class="state state-1">49760.00</view>
+			</view>
+			<view class="item">
+				<view class="name">应付# 财税·年服务费</view>
+				<view class="desc">账单编号：9885</view>
+				<view class="desc">创建时间：2023-10-25 14:26:08</view>
+				<view class="desc">所属订单：HC25263</view>
+				<view class="state state-2">49760.00</view>
+			</view>
+			<view class="item">
+				<view class="name">应付# 财税·年服务费</view>
+				<view class="desc">账单编号：9885</view>
+				<view class="desc">创建时间：2023-10-25 14:26:08</view>
+				<view class="desc">所属订单：HC25263</view>
+				<view class="state state-3">49760.00</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+		};
+	},
+	methods: {
+		handleOpenFilter() {
+			uni.navigateTo({
+				url: 'filter'
+			});
+		},
+		handleOpenDetail(){
+			uni.navigateTo({
+				url: 'detail'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'index.scss';
+</style>

pages/self/enterpriseInfo.vue

@@ -198,6 +198,15 @@
 			color: #999;
 			line-height: 82.42rpx;
 			position: relative;
+			&+.item::before{
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 0;
+				bottom: 0;
+				width: 1rpx;
+				background: #e0e0e0;
+			}
 		}
 
 		.active {

pages/self/index.vue

@@ -157,6 +157,12 @@ export default {
 		handleMenu(val){
 			let url = '';
 			switch (val) {
+				case 1:
+					url = 'order/index';
+					break;
+				case 2:
+					url = 'bill/index';
+					break;
 				case 3:
 					url = 'invoice/index';
 					break;

pages/self/invoice/index.scss

@@ -25,9 +25,18 @@
 	.search-input {
 		width: 439.56rpx;
 		height: 61.81rpx;
-		border: 1rpx solid #d0dde9;
-		border-radius: 8.24rpx;
 		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%;

pages/self/order/index.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="page-wrap">
+		<view class="tabs-panel">
+			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
+				{{ item.label }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tabActive: 1,
+			tabList: [
+				{
+					label: '全部订单',
+					value: 1
+				},
+				{
+					label: '未生效',
+					value: 2
+				},
+				{
+					label: '未生效',
+					value: 3
+				},
+				{
+					label: '已完成',
+					value: 4
+				}
+			]
+		};
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-wrap {
+	padding-top: 82.42rpx;
+}
+
+.tabs-panel {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	height: 82.42rpx;
+	background: #fff;
+	display: flex;
+	z-index: 1;
+
+	&::before,
+	&::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: #e0e0e0;
+	}
+
+	&::before {
+		top: 0;
+	}
+
+	&::after {
+		bottom: 0;
+	}
+
+	.item {
+		flex: 1;
+		text-align: center;
+		font-size: 27.47rpx;
+		color: #999;
+		line-height: 82.42rpx;
+		position: relative;
+		& + .item::before {
+			content: '';
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: 1rpx;
+			background: #e0e0e0;
+		}
+	}
+
+	.active {
+		color: #00bcd2;
+
+		&::after {
+			content: '';
+			position: absolute;
+			left: 0%;
+			right: 0%;
+			bottom: 0%;
+			height: 5.49rpx;
+			background: #00bcd2;
+			z-index: 1;
+		}
+	}
+}
+</style>