You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
332 lines
6.9 KiB
332 lines
6.9 KiB
<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>
|
|
|