pull/6/head
xiaozhiyong
9 months 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