realty/virgo.wzfrontend/yui_wx/pages/contractDetail/contractDetail.vue

<template>
	<view class="contract-detail" v-if="detail.id">
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="list" :scrollable="false" @change="changeTab"></uv-tabs>
		</uv-sticky>
		<view class="contract-content detail">
			<view v-if="tab.id === 1">
				<view class="detail-box">
					<view class="title-box">
						<view class="title">{{detail.code}}</view>
						<view class="date">{{detail.startDate}}至{{detail.endDate}}</view>
						<view class="title-icon">
							<uni-icons type="icon-hetongwendang" custom-prefix="iconfont" color="#fff" size="18">
							</uni-icons>
						</view>
					</view>
					<view class="other">
						<div class="item">
							<div class="label">签约房源</div>
							<view class="value" v-for="(node,index) in detail.roomMap" :key="index">{{node}}</view>
						</div>
						<div class="item">
							<div class="label">所属公司</div>
							<div class="value"> {{detail.organizationName}}</div>
						</div>
						<view class="item">
							<view class="label">所属部门</view>
							<view class="value">{{detail.roleName}}</view>
						</view>
						<div class="item">
							<div class="label">招商跟进人</div>
							<div class="value">{{detail.investmentPromotionName}}</div>
						</div>
						<div class="item">
							<div class="label">运营跟进人</div>
							<div class="value">{{detail.operatorName}}</div>
						</div>
						<div class="item">
							<div class="label">签订日</div>
							<div class="value">{{detail.signingDate}}</div>
						</div>
					</view>
					<view class="state">
						<view class="create">
							<uni-icons class="inherit-icons" type="staff-filled" color="#08979c" size="18"></uni-icons>
							<text class="name hui-ellipsis">{{detail.operatorName || '-'}}</text>
						</view>
						<view class="tag">
							<div class="status-tag info" v-if="!detail.status">待发送</div>
							<div class="status-tag warning" v-else-if="detail.status === 1">待确认</div>
							<div class="status-tag success" v-else-if="detail.status === 2">已生效</div>
						</view>
					</view>
				</view>
				<view class="detail-box">
					<view class="sub-title">
						<uni-icons class="inherit-icons" type="icon-jigoukehudaishenheshuliang" custom-prefix="iconfont"
							color="#08979c" size="26">
						</uni-icons>
						<text class="sub-label">租客信息</text>
					</view>
					<view class="other">
						<div class="item">
							<div class="label">运营跟进人</div>
							<div class="value">{{detail.tenantType == 1?'企业':'客户'}}</div>
						</div>
						<div class="item" v-if="detail.tenantType === 1">
							<div class="label">企业</div>
							<div class="value">{{detail.merchantName}}</div>
						</div>
						<div class="item" v-else-if="detail.tenantType === 2">
							<div class="label">客户</div>
							<div class="value">{{detail.clientName}}</div>
						</div>
						<div class="item" v-if="detail.tenantType === 1">
							<div class="label">法人</div>
							<div class="value">{{detail.corporation}}</div>
						</div>
						<div class="item">
							<div class="label">行业</div>
							<div class="value">{{detail.industry}}</div>
						</div>
						<div class="item">
							<div class="label">签订人</div>
							<div class="value">{{detail.signatory}}</div>
						</div>
						<div class="item">
							<div class="label">租客联系人</div>
							<div class="value">{{detail.tenantContactPerson}}</div>
						</div>
					</view>
				</view>
				<view class="detail-box">
					<view class="sub-title">
						<uni-icons class="inherit-icons" type="icon-zhinajin" custom-prefix="iconfont" color="#08979c"
							size="24">
						</uni-icons>
						<text class="sub-label">滞纳金</text>
					</view>
					<view class="other">
						<div class="item">
							<div class="label">起算天数(天)</div>
							<div class="value">{{detail.lateFeesStartingDays}}</div>
						</div>
						<div class="item">
							<div class="label">滞纳金比例(%/天)</div>
							<div class="value">{{detail.lateFeesProportion}}</div>
						</div>
						<div class="item">
							<div class="label">滞纳金上限(%)</div>
							<div class="value">{{detail.lateFeesCeiling}}</div>
						</div>
					</view>
				</view>
				<view class="detail-box" v-if="detail.data && detail.data != '[]'">
					<view class="sub-title">
						<uni-icons class="inherit-icons" type="icon-zidingyi" custom-prefix="iconfont" color="#08979c"
							size="26">
						</uni-icons>
						<text class="sub-label">自定义信息</text>
					</view>
					<view class="other">
						<div class="item" v-for="(item,index) in JSON.parse(detail.data)" :key="index">
							<div class="label">{{item.keyName}}</div>
							<div class="value">{{item.value}}</div>
						</div>
					</view>
				</view>
			</view>
			<view v-if="tab.id === 2">
				<view class="detail-box" v-for="(clause,index) in detail.clauseList" :key="clause.id">
					<view class="sub-title">
						<uni-icons class="inherit-icons"
							:type="clauseList.find(node => node.id === clause.type).iconfont" custom-prefix="iconfont"
							color="#08979c" :size="clauseList.find(node => node.id === clause.type).size || 26">
						</uni-icons>
						<text class="sub-label">{{clauseList.find(node => node.id === clause.type).name}}</text>
					</view>
					<view class="other">
						<clause-detail :type="clause.type" :detail="clause"></clause-detail>
					</view>
				</view>
			</view>
			<view v-if="tab.id === 3">
				<view class="detail-box">
					<view class="sub-title">
						<uni-icons class="inherit-icons" type="icon-hetongwendang" custom-prefix="iconfont"
							color="#08979c" size="26">
						</uni-icons>
						<text class="sub-label">合同文档</text>
					</view>
					<view class="other">
						<view class="file-item hui-ellipsis" v-for="(item,index) in documentFileList.document"
							:key="item.id" @click="openDocument(item)">
							<uni-icons type="folder-add-filled" color="#858585" size="24"></uni-icons>
							<text class="file-name">{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="detail-box file-box">
					<view class="sub-title">
						<uni-icons class="inherit-icons" type="icon-a-fujian1" custom-prefix="iconfont" color="#08979c"
							size="26">
						</uni-icons>
						<text class="sub-label">合同附件</text>
					</view>
					<view class="other">
						<upload :list="documentFileList.attachment"></upload>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getContractDetailById
	} from '@/request/api/contract.js'
	import clauseDetail from '@/components/contract/clauseDetail.vue'
	import upload from '@/components/common/upload.vue'
	// {
	// 	id: 4,
	// 	name: '合同账单'
	// }
	export default {
		data() {
			return {
				list: [{
					id: 1,
					name: '基本信息',
				}, {
					id: 2,
					name: '费用条款',
				}, {
					id: 3,
					name: '合同文本'
				}],
				tab: {
					id: 1,
					name: '基本信息',
				},
				clauseList: [{
					id: 1,
					name: '租期条款',
					iconfont: 'icon-zulinguihuan_fu'
				}, {
					id: 2,
					name: '保证金条款',
					iconfont: 'icon-baozhengjin',
					size: '22'
				}, {
					id: 3,
					name: '递增条款',
					iconfont: 'icon-dengdaiwenjian'
				}, {
					id: 4,
					name: '优惠条款',
					iconfont: 'icon-bianjiwenjian'
				}],
				detail: {},
				contractId: '',
				documentFileList: {
					document: [],
					attachment: []
				},
			}
		},
		onLoad(body) {
			if (body.contractId) this.contractId = body.contractId;
			this.init();
		},
		methods: {
			init() {
				if (!this.contractId) return;
				getContractDetailById(this.contractId).then(res => {
					if (res.code === 200) {
						this.detail = res.data;
						this.documentFileList = {
							document: this.detail.document ? JSON.parse(this.detail.document) : [],
							attachment: this.detail.attachment ? JSON.parse(this.detail.attachment) : []
						}
					}
				})
			},
			changeTab(item) {
				this.tab = this.list[item.index]
			},
			openDocument(item) {
				let fileUrl = 'https://www.waywish.com/file/archived/' + item.id + '/pdf.pdf';
				this.$navigateTo('/pages/pdf/pdf?fileUrl=' + fileUrl) + '&titleName=' + item.name;
			}
		},
		components: {
			clauseDetail,
			upload
		},
	}
</script>

<style lang="scss">
	.contract-detail {
		.uv-sticky {
			border-top: 2rpx solid $uni-border-1;
		}
	}
</style>