156 lines
4.1 KiB
Vue
156 lines
4.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 合同信息 -->
|
|
<view class="block">
|
|
<view class="block-flex">
|
|
<label>合同ID</label>
|
|
<view class="block-val">{{id}}</view>
|
|
</view>
|
|
<view class="block-flex">
|
|
<label>合同数量</label>
|
|
<view class="nowrap block-val">{{files.length}}</view>
|
|
</view>
|
|
<view class="block-flex">
|
|
<label>附件数量</label>
|
|
<view class="nowrap block-val">{{attachments.length}}</view>
|
|
</view>
|
|
<view class="block-flex">
|
|
<label>创建时间</label>
|
|
<view class="nowrap block-val">{{created_at || '-'}}</view>
|
|
</view>
|
|
<view class="block-flex">
|
|
<label>更新时间</label>
|
|
<view class="nowrap block-val">{{updated_at || '-'}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 合同文件 -->
|
|
<view class="files-title">合同文件列表</view>
|
|
<view class="files">
|
|
<view class="files-flex" v-for="(item, index) in files" :key="index" @click="onPdf(item.fileName, item.downloadUrl)">
|
|
<view class="files-flex-title">{{item.fileName}}</view>
|
|
<view class="files-flex-id">{{item.fileId}}</view>
|
|
<image src="@/static/imgs/payArrow.png" class="files-flex-icon" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 附件文件 -->
|
|
<view class="files-title">附件文件列表</view>
|
|
<view class="files">
|
|
<view class="files-flex" v-for="(item, index) in attachments" :key="index" @click="onPdf(item.fileName, item.downloadUrl)">
|
|
<view class="files-flex-title">{{item.fileName}}</view>
|
|
<view class="files-flex-id">{{item.fileId}}</view>
|
|
<image src="@/static/imgs/payArrow.png" class="files-flex-icon" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getFlows } from '@/apis/interfaces/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
user : { name: '', mobile: '' },
|
|
id : '',
|
|
created_at : '',
|
|
updated_at : '',
|
|
files : [],
|
|
attachments : [],
|
|
urlGo : ''
|
|
};
|
|
},
|
|
onLoad() {},
|
|
created() {
|
|
// 获取合同数据
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
getFlows(this.$Route.query.id).then(res => {
|
|
const { sign_flow_id, files, attachments, created_at, updated_at, user } = res
|
|
this.user = user
|
|
this.id = sign_flow_id
|
|
this.created_at = created_at
|
|
this.updated_at = updated_at
|
|
this.files = files
|
|
this.attachments = attachments
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
onPdf(name, url){
|
|
uni.downloadFile({
|
|
url: url,
|
|
success: res => {
|
|
uni.navigateTo({
|
|
url: '/pages/filePreview?url=' + encodeURIComponent(res.tempFilePath)
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
// uni.navigateTo({
|
|
// url: '/pages/filePreview?url=' + encodeURIComponent(url)
|
|
// })
|
|
|
|
// uni.navigateTo({
|
|
// url: '/pages/filePreview?url=' + encodeURIComponent(url)
|
|
// })
|
|
// this.$Router.push({
|
|
// url: "/pages/filePreview",
|
|
// params: {
|
|
// url: url
|
|
// },
|
|
// })
|
|
// this.$Router.push({name: 'FilePreview', params: {url: url}})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.content {
|
|
background-color: #f7f9fa;
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 合同信息统计
|
|
.block {
|
|
background: white;
|
|
margin-bottom: 30rpx;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx;
|
|
border-radius: $radius;
|
|
&-flex{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
line-height: 60rpx;
|
|
label{ color: gray; }
|
|
.block-val{ width: calc(100% - 200rpx); text-align: right; word-break:break-all; word-wrap: break-word; }
|
|
}
|
|
}
|
|
|
|
// 合同列表
|
|
.files{
|
|
background: white;
|
|
margin-bottom: 30rpx;
|
|
padding: 30rpx;
|
|
border-radius: $radius;
|
|
&-flex{
|
|
position: relative;
|
|
padding-right: 40rpx;
|
|
.files-flex-title{ font-weight: bold; font-size: 32rpx; }
|
|
.files-flex-id{ font-size: 28rpx; color: gray; }
|
|
.files-flex-icon{ position: absolute; right: 0; top: 50%; margin-top: -14rpx; width: 16rpx;}
|
|
}
|
|
}
|
|
.files-title{ padding-bottom: 20rpx; color: gray; font-size: 28rpx; }
|
|
</style> |