[update] 普通项目缴费凭证

2021-12-16 16:58:19 +08:00
parent 39ea9c3b02
commit 1ae66777c3
10 changed files with 358 additions and 44 deletions
@@ -0,0 +1,142 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    switchFullscreen
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+    <div>
+      <div class="project-name">{{ projectName }}</div>
+
+      <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>
+
+      <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)">
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template slot="footer">
+      <a-button @click="handleCancel">关闭</a-button>
+    </template>
+  </j-modal>
+</template>
+
+<script>
+export default {
+  name: 'ProofInfoModal',
+  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
+      console.log(this.proofInfo)
+      this.visible = true
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    /**
+     * 缴费凭证 src
+     */
+    proofSrc(imgId) {
+      return `${ window._CONFIG['domianURL'] }/sys/common/download/${ imgId }`
+    },
+  }
+}
+</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%;
+    }
+  }
+}
+</style>