import './服務合同詳情.less'
// #region 服務合同詳情
const 服務合同詳情 = {
props: {
value: {
default: () => {
return {}
}
}
},
data() {
return {
isShowchildDialog: false
}
},
computed: {
字段展示() {
switch (this.value.serviceType) {
case '1':
return (
<div class="content">
<ul>
<li class="w99"><div class="tit">物流服務</div></li>
<li class="w356"><div class="con">{this.value.服務信息.物流服務}</div></li>
<li class="w87"><div class="tit">合同有效期</div></li>
<li class="w328"><div class="con">{this.value.服務信息.合同有效期}</div></li>
</ul>
<ul>
<li class="w99"><div class="tit">合作行業</div></li>
<li class="w356"><div class="con">{this.value.服務信息.合作行業}</div></li>
<li class="w87"><div class="tit">配送增值服務</div></li>
<li class="w328"><div class="con">{this.value.服務信息.配送增值服務}</div></li>
{/* <li class="w87"><div class="tit">倉庫模式</div></li>
<li class="w328"><div class="con">{this.value.服務信息.倉庫模式}</div></li> */}
</ul>
<ul>
<li class="w99"><div class="tit">已選倉庫</div></li>
<li class="w356" style="width:771px"><div class="con">{this.value.服務信息.已選倉庫}</div></li>
</ul>
</div>
)
case '3':
return (
<div class="content">
<ul>
<li class="w99"><div class="tit">物流服務</div></li>
<li class="w356"><div class="con">{this.value.服務信息.物流服務}</div></li>
<li class="w87"><div class="tit">合同有效期</div></li>
<li class="w328"><div class="con">{this.value.服務信息.合同有效期}</div></li>
</ul>
<ul>
<li class="w99"><div class="tit">合作行業</div></li>
<li class="w356"><div class="con">{this.value.服務信息.合作行業}</div></li>
<li class="w87"><div class="tit">配送增值服務</div></li>
<li class="w328"><div class="con">{this.value.服務信息.配送增值服務}</div></li>
{/* <li class="w87"><div class="tit">倉庫模式</div></li>
<li class="w328"><div class="con">{this.value.服務信息.倉庫模式}</div></li> */}
</ul>
<ul>
<li class="w99"><div class="tit">已選倉庫</div></li>
<li class="w356" style="width:771px"><div class="con">{this.value.服務信息.已選倉庫}</div></li>
</ul>
</div>
)
case '2':
return (
<div class="content">
<ul>
<li class="w99"><div class="tit">物流服務</div></li>
<li class="w356"><div class="con">{this.value.服務信息.物流服務}</div></li>
<li class="w87"><div class="tit">合同有效期</div></li>
<li class="w328"><div class="con">{this.value.服務信息.合同有效期}</div></li>
</ul>
<ul>
<li class="w99"><div class="tit">合作行業</div></li>
<li class="w356"><div class="con">{this.value.服務信息.合作行業}</div></li>
<li class="w87"><div class="tit">配送增值服務</div></li>
<li class="w328"><div class="con">{this.value.服務信息.配送增值服務}</div></li>
</ul>
</div>
)
case '5':
return (
<div class="content">
<ul>
<li class="w99"><div class="tit">物流服務</div></li>
<li class="w356"><div class="con">{this.value.服務信息.物流服務}</div></li>
<li class="w87"><div class="tit">合同有效期</div></li>
<li class="w328"><div class="con">{this.value.服務信息.合同有效期}</div></li>
</ul>
</div>
)
}
}
},
methods: {
onOk() {
this.$emit('ok')
},
onCancel() {
this.$emit('cancel')
},
handleShowChildDialog() {
this.isShowchildDialog = true
},
handleCloseChildDialog() {
this.isShowchildDialog = false
}
},
render() {
return (
<div class="__服務合同詳情__">
<el-dialog
title="服務合同詳情"
visible={this.value.isShowDialog}
onClose={this.onCancel}
width="960px">
<div class="box">
<div class="title">公司信息</div>
<div class="content">
<ul>
<li class="w99"><div class="tit">企業名稱</div></li>
<li class="w356"><div class="con">{this.value.公司信息.企業名稱}</div></li>
<li class="w87"><div class="tit">公司通訊地址</div></li>
<li class="w328"><div class="con">{this.value.公司信息.公司通訊地址}</div></li>
</ul>
<ul>
<li class="w99"><div class="tit">業務聯系人</div></li>
<li class="w356"><div class="con">{this.value.公司信息.業務聯系人}</div></li>
<li class="w87"><div class="tit">業務聯系人手機</div></li>
<li class="w328"><div class="con">{this.value.公司信息.業務聯系人手機}</div></li>
</ul>
<ul>
<li class="w99"><div class="tit">企業業務往來郵箱</div></li>
<li class="w356"><div class="con">{this.value.公司信息.企業業務往來郵箱}</div></li>
<li class="w87"><div class="tit">授權委托書</div></li>
<li class="w328"><div class="con">
{this.value.公司信息.授權委托書 !== '無'
? <a href="javascript:;" onClick={this.handleShowChildDialog}>{this.value.公司信息.授權委托書}</a>
: <div>無</div>}
</div></li>
</ul>
</div>
</div>
<div class="box">
<div class="title">服務信息</div>
{this.字段展示}
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" onClick={this.onOk}>確 定</el-button>
</span>
</el-dialog>
<el-dialog
title="預覽"
visible={this.isShowchildDialog}
onClose={this.handleCloseChildDialog}
close-on-click-modal="false"
width="840px">
<div class="img-box"><img
src={this.value.公司信息.授權委托書圖片} alt="" /></div>
</el-dialog>
</div>
)
}
}
// #endregion
export default 服務合同詳情
<contractDetails
v-model="合同查看"
@ok="onOk"
@cancel="onCancel" />
注意引入圖片的寫法：
<div class="img-box"><img src={require('@/assets/img/wts.png')} alt=""/></div>