vue中jsx语法的写法
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>
