pull/6/head
xiaozhiyong
1 year ago
parent
b1726eba38
commit
1410072142
5 changed files with 587 additions and 0 deletions
@ -0,0 +1,11 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export default { |
||||||
|
getByPage(data) { |
||||||
|
return request({ |
||||||
|
url: '/oil-finance/contract/getByPage', |
||||||
|
method: 'post', |
||||||
|
data: data |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
@ -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> |
||||||
@ -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> |
||||||
Loading…
Reference in new issue