资方融资产品详情头部替换成header-bar组件

front-vue/src/views/service/financeProduct/detailFinanceProduct.vue

@@ -1,31 +1,6 @@
 <template>
 <div class="app-container zap-main">
-    <div class="zap-No">
-        <el-row type="flex" align="middle" :gutter="10">
-            <el-col :span="8">
-                <el-row type="flex" align="middle">
-                    <img class="icon" src="../../../assets/images/icon_contract_no.png" alt="">
-                    <span class="label">融资产品编号</span>
-                    <span class="value">{{form.zfpNumber}}</span>
-                </el-row>
-            </el-col>
-            <el-col :span="8">
-                <el-row type="flex" align="middle">
-                    <img class="icon" src="../../../assets/images/icon_calendar.png" alt="">
-                    <span class="label">创建时间</span>
-                    <el-date-picker disabled v-model="form.createTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss">
-                    </el-date-picker>
-                </el-row>
-            </el-col>
-            <el-col :span="8">
-                <el-row type="flex" align="middle">
-                    <img class="icon" src="../../../assets/images/icon_person.png" alt="">
-                    <span class="label">创建人</span>
-                    <span class="value">{{userName}}</span>
-                </el-row>
-            </el-col>
-        </el-row>
-    </div>
+    <header-bar :list="headerList"></header-bar>
     <el-row class="zap-margin-top">
         <el-form :inline="true" ref="form" :model="form" :rules="rules" label-width="auto" disabled>
             <div class="zap-title">基本信息</div>
@@ -291,6 +266,26 @@ export default {
             },
         };
     },
+    computed: {
+        headerList() {
+            return [{
+                    icon: require('../../../assets/images/components/headerBar/icon_creater.png'),
+                    label: '创建人：',
+                    value: this.userName
+                },
+                {
+                    icon: require('../../../assets/images/components/headerBar/icon_calendar.png'),
+                    label: '创建日期：',
+                    value: this.parseTime(new Date(this.form.createTime))
+                },
+                {
+                    icon: require('../../../assets/images/components/headerBar/icon_list.png'),
+                    label: '编号：',
+                    value: this.form.zfpNumber
+                },
+            ]
+        }
+    },
     created() {
         const zfpId = this.$route.params && this.$route.params.zfpId;
         this.reset();