diff --git a/api/contractManagement/list.js b/api/contractManagement/list.js
new file mode 100644
index 0000000..8a53f04
--- /dev/null
+++ b/api/contractManagement/list.js
@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export default {
+	getByPage(data) {
+		return request({
+			url: '/oil-finance/contract/getByPage',
+			method: 'post',
+			data: data
+		})
+	}
+}
diff --git a/contractManagement/list/details.vue b/contractManagement/list/details.vue
new file mode 100644
index 0000000..b2db155
--- /dev/null
+++ b/contractManagement/list/details.vue
@@ -0,0 +1,211 @@
+<template>
+	<view>
+		<view class="header">
+			<view :style="{height:styles.top+'px'}"></view>
+			<uni-nav-bar @clickLeft='back' :border="false" color='white' backgroundColor="rgba(0,0,0,0)"
+				left-icon="back" title="合同详情" />
+
+		</view>
+		<view class="list">
+			<view class="item" v-for="item,index in infoList" :key="index">
+				<text>{{item.title}}</text>
+				<text v-if="item.type == 'text'">{{item.value}}</text>
+				<text v-if="item.type == 'date'" :style="{ color: dateHandle(item.value) }">{{item.value}}</text>
+				<text v-if="item.type == 'selector'">{{item.value}}</text>
+				<text v-if="item.type == 'number'">{{ item.value }}</text>
+				<template v-if="item.type == 'file'">
+					<text v-if="!item.value">暂无</text>
+					<template v-else>
+						<view v-if="item.value.endsWith('png') || item.value.endsWith('jpg')" class="file"
+							@click="seePicture(item.value)">
+							<image :src="item.value"></image>
+							<text>{{item.value | nameFilters}}</text>
+						</view>
+						<view v-else class="file-download" @click="seeDocument(item.value)">
+							<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/oms-file.png"></image>
+							<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/eye.png"></image>
+						</view>
+					</template>
+				</template>
+			</view>
+		</view>
+		<uni-popup ref="popup" background-color="#fff">
+			<view class="picture-frame">
+
+				<image mode="widthFix" :src="picture"></image>
+				<image src="https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/red-close.png"
+					@click="closePicture"></image>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import serve from '@/api/contractManagement/list.js'
+	export default {
+		data() {
+			return {
+				styles: {},
+				infoList: [],
+				today: new Date().getTime(),
+				picture: ''
+			}
+		},
+		onLoad(option) {
+			this.styles = uni.getMenuButtonBoundingClientRect()
+
+			if (option.details) {
+				this.infoList = JSON.parse(option.details)
+			}
+			console.log(this.infoList)
+		},
+		filters: {
+			nameFilters(name) {
+				if (!name) return ''
+				let arr = name.split('/')
+				return arr[arr.length - 1]
+			}
+		},
+		methods: {
+			dateHandle(val) {
+				let dueTime = new Date(val).getTime()
+				return this.today > dueTime ? '#ff0000' : '#333'
+			},
+			seePicture(img) {
+				this.picture = img
+				this.$refs.popup.open('center')
+			},
+			closePicture() {
+				this.picture = ''
+				this.$refs.popup.close()
+			},
+			seeDocument(url) {
+				uni.downloadFile({
+					url: url,
+					success: (res) => {
+						uni.openDocument({
+							filePath: res.tempFilePath,
+							success: (_res1) => {
+								console.log(_res1)
+							},
+							fail: (_res2) => {
+								console.log('_res2',_res2)
+								uni.showToast({
+									title: '该文件格式暂不支持在线预览',
+									icon: 'none'
+								})
+							},
+						})
+					}
+				})
+			},
+			back() {
+				uni.navigateBack()
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background: #dddddd80;
+	}
+
+	.picture-frame {
+		position: relative;
+
+		>image {
+			&:nth-of-type(1) {
+				vertical-align: middle;
+				width: 650rpx;
+			}
+
+			&:nth-of-type(2) {
+				position: absolute;
+				top: -80rpx;
+				right: 0;
+				width: 50rpx;
+				height: 50rpx;
+			}
+		}
+	}
+
+	.header {
+		position: relative;
+		width: 100%;
+		height: 350rpx;
+		background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') center/100% no-repeat;
+	}
+
+	.list {
+		position: relative;
+		top: -80rpx;
+		margin: 0 auto;
+		// padding-bottom: 30rpx;
+		min-height: calc(100vh - 350rpx);
+		width: 96%;
+		padding: 20rpx 20rpx 30rpx 30rpx;
+		background: #fff;
+		border-radius: 15rpx;
+
+		.item {
+			margin-bottom: 27rpx;
+
+			>text {
+				&:nth-of-type(1) {
+					display: inline-block;
+					margin-right: 50rpx;
+					width: 150rpx;
+					color: #999;
+				}
+
+				&:nth-of-type(1) {
+					vertical-align: top;
+				}
+			}
+		}
+
+		.file {
+			display: inline-flex;
+			align-items: center;
+			padding: 0 10rpx;
+			width: 420rpx;
+			height: 100rpx;
+			background: #99999930;
+			border-radius: 10rpx;
+
+			image {
+				margin-right: 15rpx;
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 10rpx;
+			}
+
+			text {
+				flex: 1;
+				font-size: 22rpx;
+			}
+		}
+
+		.file-download {
+			display: inline;
+
+			image {
+				&:nth-of-type(1) {
+					// margin-right: 15rpx;
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 10rpx;
+				}
+
+				&:nth-of-type(2) {
+					position: relative;
+					left: -5rpx;
+					bottom: -5rpx;
+					width: 32rpx;
+					height: 32rpx;
+				}
+			}
+		}
+	}
+</style>
diff --git a/contractManagement/list/index.vue b/contractManagement/list/index.vue
new file mode 100644
index 0000000..97df468
--- /dev/null
+++ b/contractManagement/list/index.vue
@@ -0,0 +1,332 @@
+<template>
+	<view style="height: 100vh;display: flex;flex-direction: column;">
+		<view class="header">
+			<view :style="{height:styles.top+'px'}"></view>
+			<uni-nav-bar @clickLeft='back' :border="false" color='white' backgroundColor="rgba(0,0,0,0)"
+				left-icon="back" title="合同列表" />
+			<view class="seach">
+				<uni-easyinput @confirm='seachFn' style="border-radius:12rpx ;" prefixIcon="search"
+					placeholder-style="color:#bbb;font-weight: 100;" confirmType="搜索"
+					v-model="paramter.params.companyName" placeholder="请输入对方单位名称">
+				</uni-easyinput>
+			</view>
+		</view>
+		<view style="flex:1;overflow: hidden;">
+			<view v-if="!tableList.length"
+				style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;">
+				<image src="@/static/qx.png" style="width: 500rpx; height: 355rpx;"></image>
+			</view>
+			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower='scrolltolower'>
+				<view class="container">
+					<view class="item" v-for="item,index in tableList" :key="index"
+						@tap="jump(item)">
+						<view>
+							<text>对方单位名称</text>
+							<text>{{item.companyName}}</text>
+						</view>
+						<view>
+							<text>审批流程</text>
+							<text>{{item.spName}}</text>
+						</view>
+						<view>
+							<text>合同编号</text>
+							<text>{{item.contractNo}}</text>
+						</view>
+						<view>
+							<view>
+								<text>签约日期</text>
+								<text>{{item.signingTime | timeFilter}}</text>
+							</view>
+							<view>
+								<text>到期时间</text>
+								<text>{{item.contractTime | timeFilter}}</text>
+							</view>
+						</view>
+						<view>
+							<text>我方负责人</text>
+							<text>{{item.applyer}}</text>
+						</view>
+						<view :style="{
+								color:statusEnum.find(_item => _item.value == item.spStatus).color,
+								backgroundColor:statusEnum.find(_item => _item.value == item.spStatus).backgroundColor,
+								bordercolor:statusEnum.find(_item => _item.value == item.spStatus).bordercolor
+							 }">
+							{{statusEnum.find(_item => _item.value == item.spStatus).label}}
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import serve from '@/api/contractManagement/list.js'
+	export default {
+		data() {
+			return {
+				styles: {},
+				paramter: {
+					currentPage: 1,
+					pageSize: 10,
+					params: {
+						companyName: ''
+					}
+				},
+				tableList: [],
+				statusEnum: [{
+						value: '1',
+						label: '审批中',
+						backgroundColor: '#fff8e6',
+						bordercolor: '#fff1cc',
+						color: '#ffba00',
+					},
+					{
+						value: '2',
+						label: '已通过',
+						backgroundColor: '#e7faf0',
+						bordercolor: '#d0f5e0',
+						color: '#13ce66',
+					},
+					{
+						value: '3',
+						label: '已驳回',
+						backgroundColor: '#fef0f0',
+						bordercolor: '#fde2e2',
+						color: '#f56c6c',
+					},
+					{
+						value: '4',
+						label: '已撤销',
+						backgroundColor: '#f4f4f5',
+						bordercolor: '#e9e9eb',
+						color: '#909399',
+					},
+					{
+						value: '6',
+						label: '通过后撤销',
+						backgroundColor: '#f4f4f5',
+						bordercolor: '#e9e9eb',
+						color: '#909399',
+					},
+					{
+						value: '7',
+						label: '已删除',
+						backgroundColor: '#fef0f0',
+						bordercolor: '#fde2e2',
+						color: '#f56c6c',
+					},
+					{
+						value: '10',
+						label: '已支付',
+						backgroundColor: '#e7faf0',
+						bordercolor: '#d0f5e0',
+						color: '#13ce66',
+					}
+				]
+			}
+		},
+		onLoad() {
+			this.styles = uni.getMenuButtonBoundingClientRect()
+			this.getByPage()
+		},
+		filters: {
+			timeFilter(value) {
+				if (value) {
+					return value.split(' ')[0]
+				}
+			}
+		},
+		methods: {
+			seachFn() {
+				this.tableList = []
+				this.paramter.currentPage = 1
+				this.getByPage()
+				// console.log('seachFn')
+			},
+			getByPage() {
+				serve.getByPage(this.paramter).then(res => {
+					if (!res.data.list.length) {
+						uni.showToast({
+							title: '没有更多数据了哦~',
+							icon: 'none'
+						})
+						return
+					}
+					this.tableList = this.tableList.concat(res.data.list);
+				})
+			},
+			// 触底加载
+			scrolltolower() {
+				this.paramter.currentPage += 1
+				this.getByPage()
+
+			},
+			handlerNumber(number) {
+				if (number == 0) return number
+				if (!number) {
+					return '--'
+				}
+				return +number.toFixed(2)
+			},
+			back() {
+				uni.navigateBack()
+			},
+			jump(item) {
+				uni.navigateTo({
+					url: `./details?details=${item.details}`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.uni-easyinput__content {
+		background-color: #fff;
+	}
+
+	.header {
+		position: relative;
+		width: 100%;
+		min-height: 403rpx;
+		background: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png') center/100% no-repeat;
+	}
+
+	.header .seach {
+		margin-top: 60rpx;
+		padding: 0 50rpx;
+	}
+
+	.container {
+		padding: 30rpx 40rpx;
+
+		.item {
+			position: relative;
+			margin-bottom: 15rpx;
+			background: #fff;
+			padding-bottom: 20rpx;
+
+			>view {
+				padding-left: 20rpx;
+				font-size: 25rpx;
+
+				text {
+					&:nth-of-type(1) {
+						color: #999;
+					}
+
+					&:nth-of-type(2) {
+						margin-left: 60rpx;
+					}
+				}
+
+				&:nth-of-type(1) {
+					position: relative;
+					width: 100%;
+					height: 70rpx;
+					line-height: 77rpx;
+
+					&::after {
+						content: '';
+						position: absolute;
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+						width: 95%;
+						height: 1rpx;
+						background: #33333350;
+					}
+
+					text {
+						&:nth-of-type(2) {
+							float: right;
+							margin-right: 20rpx;
+						}
+					}
+				}
+
+				&:nth-of-type(2),
+				&:nth-of-type(3) {
+					margin-top: 17rpx;
+				}
+
+				&:nth-of-type(4) {
+					display: flex;
+					margin-top: 17rpx;
+
+					>view {
+						&:nth-of-type(2) {
+							margin-left: 35rpx;
+						}
+					}
+				}
+
+				&:nth-of-type(5) {
+					margin-top: 17rpx;
+
+					text {
+						&:nth-of-type(2) {
+							margin-left: 37rpx;
+						}
+					}
+				}
+
+
+				&:nth-of-type(6) {
+					position: absolute;
+					top: 85rpx;
+					right: 20rpx;
+					padding: 0;
+					width: 120rpx;
+					height: 60rpx;
+					line-height: 56rpx;
+					text-align: center;
+
+					border: 1rpx solid;
+					border-radius: 8rpx;
+				}
+			}
+		}
+	}
+
+	// .container .item {
+	// 	position: relative;
+	// 	margin-bottom: 25rpx;
+	// 	padding-top: 60rpx;
+	// 	height: 200rpx;
+	// 	width: 100%;
+	// 	background: #fff;
+	// 	/* border: 1px solid #333; */
+	// 	border-radius: 10rpx;
+	// }
+
+	// .container .item .logo {
+	// 	position: absolute;
+	// 	left: 20rpx;
+	// 	top: 50%;
+	// 	transform: translateY(-50%);
+	// 	width: 100rpx;
+	// 	height: 100rpx;
+	// 	border-radius: 50%;
+	// 	/* border: 1px solid #333; */
+	// }
+
+	// .container .item view {
+	// 	padding-left: 150rpx;
+
+	// }
+
+	// .container .item view:nth-of-type(1) {
+	// 	/* margin-top: 57rpx; */
+	// 	color: #333;
+	// 	font-size: 30rpx;
+	// 	font-weight: 550;
+	// }
+
+	// .container .item view:nth-of-type(2) {
+	// 	margin-top: 10rpx;
+	// 	color: #778899;
+	// 	font-size: 24rpx;
+	// }
+</style>
diff --git a/pages.json b/pages.json
index c4e9307..1b20655 100644
--- a/pages.json
+++ b/pages.json
@@ -526,6 +526,24 @@
 				}
 
 			]
+		},
+		{
+			"root": "contractManagement",
+			"pages": [{
+				"path": "list/index",
+				"style": {
+					"navigationBarTitleText": "合同列表",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false
+				}
+			},{
+				"path": "list/details",
+				"style": {
+					"navigationBarTitleText": "合同详情",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false
+				}
+			}]
 		}
 	],
 	"globalStyle": {
diff --git a/pages/index/menu.json b/pages/index/menu.json
index d15dcf9..f04fe86 100644
--- a/pages/index/menu.json
+++ b/pages/index/menu.json
@@ -181,5 +181,20 @@
 				"image":"../../static/newindex/yunSiteList.png"
 			}
 		]
+	},
+	{
+		"name":"合同管理",
+		"icon":"iconxiugaiyonghuxinxi",
+		"label":"contractManagement",
+		"colorOpen":false,
+		"submenu":[
+			{
+				"icon":"iconxiugaiyonghuxinxi",
+				"name":"合同列表",
+				"router":"/contractManagement/list/index",
+				"lable":"management:contract:list", 
+				"image":"../../static/newindex/customerList.png"
+			}
+		]
 	}
 ]
\ No newline at end of file