OfficeApp/subpkg/contractDetail/contractDetail.vue

361 lines
9.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="">
<view class="item">
<view class="title">公司基本信息</view>
<view class="card">
<view class="top">
<view class="left">
<image></image>
<view class="text">
<view class="name">{{company.company_name}}</view>
<view class="code">社会代码{{company.organization_code}}</view>
</view>
</view>
<view class="right">公司类型</view>
</view>
<view class="bottom"><uni-icons type="location"></uni-icons><text class="location">负责区域:泸州市江阳区通滩镇</text></view>
</view>
</view>
<view class="item">
<view class="title">
<text>联系人管理</text>
<view>新增</view>
</view>
<view class="card">
<view class="one">
<view class="linkman">主要联系人</view>
<view class="info">
<view class="info_item">姓名{{company.master_name}}</view>
<view class="info_item">职位{{company.master_position}}</view>
<view class="info_item">联系电话{{company.master_phone}}</view>
<view class="info_item">邮箱{{company.master_email}}</view>
</view>
</view>
<view style="height: 32rpx;"></view>
<view class="one" v-for="(other, index) in company.other_contacts" :key="index">
<view class="linkman">其他联系人</view>
<view class="info">
<view class="info_item">姓名{{other.name}}</view>
<view class="info_item">职位{{company.position}}</view>
<view class="info_item">联系电话{{other.phone}}</view>
<view class="info_item">邮箱{{other.email}}</view>
</view>
</view>
</view>
</view>
<view class="item">
<view class="title">资质信息</view>
<view class="image_box">
<image class="left" @click="priview(company.qualification.bank_account)" :src="company.qualification.bank_account"></image>
<image class="right" @click="priview(company.qualification.business_license)" :src="company.qualification.business_license"></image>
</view>
</view>
<view class="item">
<view class="title">电子合同</view>
<view class="card">
<view class="one">
<view class="linkman">公司名称</view>
<view class="info">
<view class="info_item">签约对象被签约对象名称</view>
<view class="info_item">合同类型{{contract.type}}</view>
<view class="info_item">合同编号{{contract.contract_no}}</view>
</view>
</view>
<u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
<view class="contract">
<view class="left">
<image class="contract_img" src="../../static/img/contract/contract.png"></image>
<view class="text">
<view class="name">合同</view>
<view>
<!-- <text class="nickname">张郭郭</text> -->
<text>{{contract.create_time}}</text>
</view>
</view>
</view>
<view class="right"
@click="naviTo('/subpkg/pdfView/pdfView?url=' + contract.file)">
<!-- <image class="icon"></image> -->
<uni-icons type="paperclip" color="#3274F9"></uni-icons>
<view>查看</view>
</view>
</view>
</view>
</view>
<button class="back_btn" @click="naviBack">返回</button>
<!-- <button class="stop_btn">终止合同</button> -->
</view>
</template>
<script>
import { contractView } from "@/api/contract.js"
export default {
data() {
return {
company: {
qualification: {
bank_account:"",
bank_accountB:"",
business_license:"",
business_licenseB:"",
},
},
contract: {},
users: []
}
},
onLoad(options) {
this.initContract(options.id)
},
onShow() {},
methods: {
naviTo(url) {
url ?
uni.navigateTo({
url: url
}) : Toast('暂未开放')
},
naviBack(){
uni.navigateBack()
},
async initContract(id) {
let res = await contractView({ id });
this.company = res.data.company;
this.user = res.data.user;
this.contract = res.data.contract;
console.log(res.data);
},
//查看图片
priview(url){
uni.previewImage({
urls:[url],
longPressActions: {
itemList: ['保存图片'],
success: function(data) {
if (data.tapIndex === 0) {
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'success'
})
},
fail: function() {
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
}
}
})
}
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.item {
padding: 31.5rpx 28rpx;
.title {
margin-bottom: 21rpx;
font-size: 35rpx;
font-weight: 500;
color: #333333;
display: flex;
justify-content: space-between;
}
.card {
width: 694rpx;
// height: 231rpx;
padding: 28rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
display: flex;
justify-content: space-between;
.left {
display: flex;
image {
width: 102rpx;
height: 102rpx;
margin-right: 28rpx;
background: #CCCCCC;
border-radius: 14rpx 14rpx 14rpx 14rpx;
opacity: 1;
}
.text {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 32rpx;
font-weight: 500;
color: rgba(0, 0, 0, 0.8);
}
.code {
font-size: 28rpx;
font-weight: 400;
color: #666666;
}
}
}
.right {
font-size: 28rpx;
font-weight: 500;
color: #3274F9;
}
}
.bottom {
display: flex;
align-items: center;
color: #666666FF;
margin-top: 32rpx;
.location {
margin-left: 28rpx;
}
}
.one {
.linkman {
height: 44rpx;
font-size: 32rpx;
font-weight: 500;
color: #333333;
margin-bottom: 28rpx;
}
.info {
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 45rpx;
}
}
.contract {
display: flex;
justify-content: space-between;
.left {
display: flex;
.contract_img {
width: 102rpx;
height: 102rpx;
background: #F5F5F5;
border-radius: 14rpx 14rpx 14rpx 14rpx;
margin-right: 21rpx;
}
.text {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
font-size: 32rpx;
;
font-weight: 500;
color: rgba(0, 0, 0, 0.8);
line-height: 35rpx;
}
.nickname {
margin-right: 35rpx;
}
text {
height: 39rpx;
font-size: 28rpx;
font-weight: 400;
color: #666666;
line-height: 35rpx;
}
}
}
.right {
font-size: 28rpx;
font-weight: 500;
color: #3274F9;
line-height: 35rpx;
display: flex;
justify-content: center;
align-items: center;
.icon {
width: 35rpx;
height: 39rpx;
background-color: #3274F9;
opacity: 1;
margin-right: 10rpx
}
}
}
}
.image_box {
display: flex;
justify-content: space-between;
.left {
width: 224rpx;
height: 319rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
.right {
width: 450rpx;
height: 318rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
}
}
}
.back_btn {
width: 694rpx;
height: 84rpx;
background: #3274F9;
border-radius: 42rpx 42rpx 42rpx 42rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin: 30rpx auto;
}
.stop_btn {
width: 694rpx;
height: 84rpx;
border-radius: 42rpx 42rpx 42rpx 42rpx;
display: flex;
justify-content: center;
align-items: center;
color: #3274F9;
background-color: transparent;
margin: 30rpx auto;
}
</style>