同行表格

src/project/pingchang/AppGetwayRegister/DetailGetway.vue

@@ -1,6 +1,5 @@
 <template>
-<!--  v-if="pageShow" -->
+  <div class="DetailGetway" v-if="pageShow">
-  <div class="DetailGetway">
     <div class="detail-header">
       <h2>{{ info.name }}的返乡登记信息</h2>
       <div class="item-info">
@@ -65,9 +64,9 @@
           <label>出行方式</label>
         </div>
         <div class="right">
-          <span v-for="(item, index) in info.travelType.split(',')" :key="index">
+          <span v-for="(item, index) in travelType" :key="index">
             {{ $dict.getLabel('epidemicRecentTravel', item) }}
-            <span v-show="index < info.travelType.split(',').length - 1">，</span>
+            <span v-show="index < travelType.length - 1">，</span>
           </span>
         </div>
       </div>
@@ -170,11 +169,20 @@
           <label>同行人数</label>
         </div>
         <div class="right">
-          <span>{{ info.companionCount }}</span>
+          <span>{{ info.companionCount }}人</span>
         </div>
       </div>
       <div class="companionList">
-        小伙伴表格
+        <u-table>
+          <u-tr>
+            <u-th>姓名</u-th>
+            <u-th>手机号</u-th>
+          </u-tr>
+          <u-tr v-for="(e,index) in companionList" :key="index">
+            <u-td>{{ e.name }}</u-td>
+            <u-td>{{ e.phone }}</u-td>
+          </u-tr>
+        </u-table>
       </div>
     </div>
     <div class="btn-wrapper" v-if="info.handleType == 0">
@@ -189,8 +197,9 @@ export default {
   data() {
     return {
       info: {},
-      // pageShow: false
+      pageShow: false,
-      data: []
+      companionList: [],
+      travelType: [],
     }
   },
 
@@ -213,7 +222,9 @@ export default {
       this.$instance.post(`/app/appepidemicpreventionregisterinfo/queryDetailById?id=${id}`).then(res => {
         if (res?.data) {
           this.info = res.data
-          // this.data = this.info.travelType.split(',')
+          this.companionList = res.data.companionList
+          this.travelType = res.data.travelType?.split(',')
+          this.pageShow = true
         }
 
         this.$hideLoading()
@@ -235,7 +246,8 @@ export default {
 
 <style lang="scss">
 .DetailGetway {
-  padding-bottom: 140px;
+  padding-bottom: 150px;
+  box-sizing: border-box;
 
   .detail-header {
     padding: 32px;
@@ -343,6 +355,22 @@ export default {
         }
       }
     }
+
+    .companionList {
+      padding: 16px;
+      box-sizing: border-box;
+
+      u-table {
+        u-tr {
+          u-th {
+            width: 50%;
+          }
+          u-td {
+            width: 50%;
+          }
+        }
+      }
+    }
   }
 }
 </style>