预览增加支付记录和附件状态更改

src/api/my.js

@@ -112,3 +112,13 @@ export function sendToProvider(letterId) {
 export function logout() {
   return httpRequest.get('/passport/rest/logout')
 }
+
+/**
+ * 更改附件状态
+ */
+export function changeFileStatus(userId, recordId, status) {
+  return httpRequest.get(
+    `/enrollment/v1.0/application-materials/attachments/change-status/${projectId}/${userId}/${recordId}`,
+    { status }
+  )
+}

src/pages/my/application/preview.vue

 <template>
   <div class="preview" v-loading="loading">
-    <template v-if="!loading">
+    <template v-if="progress.FILLING">
       <div class="preview-hd">
         <el-steps align-center :active="options.length">
           <template v-for="item in options">
@@ -76,13 +76,36 @@
                   <a class="inner" :href="item.oss_sign_url" target="_blank">
                     <div class="pic"><img :src="item.oss_sign_url" /></div>
                     <div class="name">{{ item.file_type_label }}</div>
-                    <div class="time">{{ item.upload_time }}</div>
+                    <div style="margin-right: 40px">
+                      <el-tag size="mini">{{ item.status_desc }}</el-tag>
+                    </div>
                   </a>
+                  <el-button-group>
+                    <el-button size="mini" :disabled="item.status === 'INACTIVE'" @click="handleRemove(item)"
+                      >删除</el-button
+                    >
+                    <el-button size="mini" :disabled="item.status === 'LOG'" @click="handleSave(item)">存档</el-button>
+                  </el-button-group>
                 </li>
               </ul>
             </template>
           </div>
         </div>
+        <div class="preview-item is-success" v-if="isManager">
+          <div class="preview-item-hd">
+            <div class="title">支付记录</div>
+            <div class="line"></div>
+          </div>
+          <div class="preview-item-bd">
+            <template v-if="material.payment_records">
+              <el-table :data="material.payment_records" border>
+                <el-table-column prop="payment_method_desc" label="支付方式"> </el-table-column>
+                <el-table-column prop="bill_amount" label="支付金额"> </el-table-column>
+                <el-table-column prop="payment_status_desc" label="支付状态"> </el-table-column>
+              </el-table>
+            </template>
+          </div>
+        </div>
       </div>
     </template>
   </div>
@@ -164,7 +187,7 @@ export default {
               label: '现居住城市',
               code: 'address_city',
               computed(data) {
-                return `${data.address_province}-${data.address_city}`
+                return data.address_city ? `${data.address_province}-${data.address_city}` : ''
               }
             },
             { label: '证件类型', code: 'id_type' },
@@ -303,6 +326,12 @@ export default {
       ]
     }
   },
+  computed: {
+    watermark() {
+      const { watermark = '清控紫荆教育' } = this.$route.query
+      return watermark
+    }
+  },
   methods: {
     // 获取报名信息
     getApplication() {
@@ -324,6 +353,19 @@ export default {
     handleEdit(to) {
       this.$emit('edit', to)
       // this.$router.push(to)
+    },
+    // 删除
+    handleRemove(data) {
+      this.changeFileStatus(data, 'INACTIVE')
+    },
+    // 存档
+    handleSave(data) {
+      this.changeFileStatus(data, 'LOG')
+    },
+    changeFileStatus(data, status) {
+      api.changeFileStatus(this.material.user_id, data.id, status).then(response => {
+        this.getApplication()
+      })
     }
   },
   beforeMount() {
@@ -375,12 +417,14 @@ export default {
   }
 }
 .preview-item-bd {
+  padding-top: 20px;
   .group {
-    padding: 20px 0;
     display: flex;
     flex-wrap: wrap;
   }
   .group + .group {
+    margin-top: 10px;
+    padding-top: 20px;
     border-top: 1px solid #f1f1f1;
   }
   dl {
@@ -402,7 +446,6 @@ export default {
 <style lang="scss">
 .preview {
   .answers {
-    padding: 20px 0;
     dl {
       margin-bottom: 10px;
       font-size: 14px;
@@ -419,23 +462,24 @@ export default {
       word-break: break-all;
     }
   }
-  .attachments {
-    padding: 20px 0;
-  }
   .attachments-item {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
     &:hover {
       background-color: #f7f7f7;
     }
     .inner {
-      padding: 10px;
+      flex: 1;
+      padding: 10px 0;
       height: 40px;
       display: flex;
       align-items: center;
       color: #222;
     }
     .pic {
-      width: 32px;
-      height: 32px;
+      width: 40px;
+      height: 40px;
       img {
         width: 100%;
         height: 100%;
@@ -450,5 +494,8 @@ export default {
       font-size: 12px;
     }
   }
+  .attachments-item + .attachments-item {
+    border-top: 1px solid #dadce0;
+  }
 }
 </style>