147 lines
3.8 KiB
Vue
147 lines
3.8 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>
|
|
<u-icon class="files-flex-icon" name="arrow-right" size="28rpx"></u-icon>
|
|
</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>
|
|
<u-icon class="files-flex-icon" name="arrow-right" size="28rpx"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const plugin = uni.requireNativePlugin('Pdf-Plugin')
|
|
import { getFlows } from '@/apis/interfaces/user.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
user : { name: '', mobile: '' },
|
|
id : '',
|
|
created_at : '',
|
|
updated_at : '',
|
|
files : [],
|
|
attachments : []
|
|
};
|
|
},
|
|
onLoad() {
|
|
// #ifdef APP-PLUS
|
|
uni.setUserCaptureScreen({
|
|
enable: false,
|
|
})
|
|
// #endif
|
|
},
|
|
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){
|
|
plugin.showPdf({
|
|
title : name,
|
|
url : url,
|
|
maxScale : '20',
|
|
waterMark : '河北抖火法律咨询服务有限公司',
|
|
// this.user.name + ' ' + this.user.mobile,
|
|
})
|
|
}
|
|
},
|
|
onUnload() {
|
|
// #ifdef APP-PLUS
|
|
uni.setUserCaptureScreen({
|
|
enable: true
|
|
})
|
|
// #endif
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content{ padding: 10rpx 30rpx; }
|
|
|
|
// 合同信息统计
|
|
.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;}
|
|
}
|
|
}
|
|
.files-title{ padding-bottom: 20rpx; color: gray; font-size: 28rpx; }
|
|
</style>
|