跟多联系人 样式调整

src/views/ecw/productBrank/Empower/components/showContacts.vue

@@ -7,28 +7,41 @@ export default {
   data(){
     return {
       phoneList:[],
+      show:false
     }
   },
   mounted() {
     let phone = this.phoneString
     this.phoneList = phone.split('(;)');
-    console.log(this.phoneList)
   }
 }
 </script>
 
 <template>
 <div>
- <div v-for="(item, index) in phoneList" :key="index" >
-     <div>
-         <span>联系人{{index + 1}}：</span>
-         <span>{{item.split('(@)')[1]}}</span>
+  <el-dialog :modal-append-to-body="false" :append-to-body="true" :visible.sync="show">
+    <div v-for="(item, index) in phoneList" :key="index" >
+      <div>
+        <span>联系人{{index + 1}}：</span>
+        <span>{{item.split('(@)')[1]}}</span>
+      </div>
+      <div>
+        <span>联系电话{{index + 1}}：</span>
+        <span>+{{item.split('(@)')[0]}}</span>
+      </div>
+    </div>
+  </el-dialog>
+   <div>
+    <div>
+      <span>联系人：</span>
+      <span>{{phoneList[0] ? phoneList[0].split('(@)')[1] : ''}}</span>
+    </div>
+     <div style="white-space: normal;">
+       <span>联系电话：</span>
+       <span>+{{phoneList[0] ? phoneList[0].split('(@)')[0] : ''}}</span>
+        <el-button v-if="phoneList.length > 1" @click="show = true;" style="margin-left: 10px;" size="mini" type="text" >更多</el-button>
      </div>
-     <div>
-         <span>联系电话{{index + 1}}：</span>
-         <span>+{{item.split('(@)')[0]}}</span>
-     </div>
- </div>
+   </div>
 </div>
 </template>
 

src/views/ecw/productBrank/Empower/index.vue

@@ -45,7 +45,7 @@
             <el-table-column
               :label="$t('客户号码')">
                 <template v-slot="{row}">
-            <show-contacts :phone-string="row.phone" ></show-contacts>
+               <show-contacts :phone-string="row.phone" ></show-contacts>
                 </template>
             </el-table-column>
             <el-table-column
@@ -79,7 +79,7 @@
               :label="$t('客户名称')">
             </el-table-column>
             <el-table-column
-                    width="210"
+                    width="260"
               :label="$t('客户号码')">
                 <template v-slot="{row}">
                     <show-contacts :phone-string="row.phone" ></show-contacts>