|
@@ -0,0 +1,267 @@
|
|
|
+<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>
|