task#6524 报备

src/views/report/components/report-list-item.vue

@@ -1,35 +1,28 @@
 <template>
   <div class="bottom_wrap">
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_delay.png" alt="">
-      <div class="report_title">救援延误</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_unconnect.png" alt="">
-      <div class="report_title">客户失联</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_cancel.png" alt="">
-      <div class="report_title">客户取消</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_address.png" alt="">
-      <div class="report_title">地址变更</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_fee.png" alt="">
-      <div class="report_title">费用报备</div>
-    </div>
-    <div class="report_item">
-      <img class="report_icon" src="@/assets/report/report_other.png" alt="">
-      <div class="report_title">其他报备</div>
+    <div class="report_item" v-for="(item, index) in reportList" @click="goReportHandler(item)" :key="index">
+      <img class="report_icon" :src="item?.iconUrl" alt="">
+      <div class="report_title">{{item.name}}</div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "report-list-item"
+  name: "report-list-item",
+  data() {
+    return {
+      addressReportCode: '',
+
+    }
+  },
+  props: ['reportList'],
+  methods: {
+    goReportHandler(data) {
+      this.$emit('getReport', data);
+    },
+
+  }
 }
 </script>
 
@@ -38,14 +31,17 @@ export default {
   width: 100%;
   /*position: fixed;*/
   bottom: 0;
-  padding: 0 34px 20px;
+  /*padding: 0 34px 20px;*/
+  padding-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   background: #FFFFFF;
   box-shadow: 0px 0px 20px 0px rgba(53,73,93,0.2);
+  box-sizing: border-box;
   .report_item {
     width: 25%;
     margin-top: 20px;
+    text-align: center;
     .report_icon {
       width: 45px;
       height: 45px;