163 lines
3.3 KiB
Vue
163 lines
3.3 KiB
Vue
<template>
|
||
<j-modal
|
||
:title="title"
|
||
:width="width"
|
||
:visible="visible"
|
||
:confirmLoading="confirmLoading"
|
||
switchFullscreen
|
||
@cancel="handleCancel"
|
||
cancelText="关闭">
|
||
|
||
<div>
|
||
<div class="project-name">{{ projectName }}</div>
|
||
|
||
<!-- 待审核状态不显示审核信息 -->
|
||
<template v-if="proofInfo.paymentStatus !== 'toBeReviewed'">
|
||
<h3 class="title">审核信息</h3>
|
||
<div>
|
||
<div class="info-item">
|
||
<label>审核结果：</label>
|
||
<div>{{ proofInfo.paymentStatus_dictText }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>审核人：</label>
|
||
<div>{{ proofInfo.reviewerName }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>审核时间：</label>
|
||
<div>{{ proofInfo.reviewTime }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<h3 class="title">凭证信息</h3>
|
||
<div>
|
||
<div class="info-item">
|
||
<label>缴费金额：</label>
|
||
<div>{{ proofInfo.amountReceived }}元</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>缴费日期：</label>
|
||
<div>{{ proofInfo.paymentDate }}元</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>付款凭证：</label>
|
||
<div class="proof-img">
|
||
<img :src="proofSrc(proofInfo.proof)" @click="previewProofImg(proofInfo.proof)">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<template slot="footer">
|
||
<a-button @click="handleCancel">关闭</a-button>
|
||
</template>
|
||
|
||
<!-- 预览缴费凭证-->
|
||
<preview-img-modal ref="previewImg"></preview-img-modal>
|
||
</j-modal>
|
||
</template>
|
||
|
||
<script>
|
||
import PreviewImgModal from '@views/MessagePage/modules/PreviewImgModal'
|
||
|
||
export default {
|
||
name: 'ProofInfoModal',
|
||
components: { PreviewImgModal },
|
||
props: {
|
||
// 项目名称
|
||
projectName: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
title: '图片',
|
||
width: 800,
|
||
visible: false,
|
||
confirmLoading: false,
|
||
// 图片id
|
||
imgId: '',
|
||
// 缴费凭证信息
|
||
proofInfo: {}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* 打开
|
||
* @param record
|
||
*/
|
||
open(record) {
|
||
this.proofInfo = record
|
||
this.visible = true
|
||
},
|
||
handleCancel() {
|
||
this.visible = false
|
||
},
|
||
/**
|
||
* 缴费凭证 src
|
||
*/
|
||
proofSrc(imgId) {
|
||
return `${ window._CONFIG['domianURL'] }/sys/common/download/${ imgId }`
|
||
},
|
||
/**
|
||
* 预览缴费凭证
|
||
* @param imgId
|
||
*/
|
||
previewProofImg(imgId) {
|
||
this.$refs.previewImg.title = '缴费凭证图片'
|
||
this.$refs.previewImg.imgId = imgId
|
||
this.$refs.previewImg.visible = true
|
||
console.log()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.project-name {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
h3 {
|
||
position: relative;
|
||
}
|
||
|
||
h3.title::before {
|
||
position: absolute;
|
||
top: 4px;
|
||
left: -10px;
|
||
content: "";
|
||
height: 20px;
|
||
width: 2px;
|
||
background: #069f99;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
padding: 5px 0;
|
||
|
||
label {
|
||
color: #666666;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
div {
|
||
color: black;
|
||
}
|
||
|
||
.proof-img {
|
||
width: calc(100% - 6rem);
|
||
|
||
img {
|
||
max-width: 100%;
|
||
max-height: 200px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
</style> |