feat 外卖设置-常用地址

src/components/waimaiComponents/addressManagement.vue

@@ -1,24 +1,19 @@
 <template>
   <div class="address-management">
-    <div class="header">
-      <div class="num">已保存<span>{{addressList.length}}</span>/100条,最多还可以添加<span>{{100-addressList.length}}</span>条</div>
-      <el-button class="btn" round @click="showAddress(false)" size="mini" type="primary" plain>添加+</el-button>
+    <div class="printer-list">
+      <div class="item" v-for="(v,i) in addressList" :key=i @click.stop="showAddress(1,v)">
+        <div class="name">{{v.contact}} {{v.phone}}</div>
+        <div class="shop-name">{{v.address}}</div>
+        <div class="btns">
+          <img @click.stop="showAddress(1,v)" src="../../../static/image/edit-icon.png" alt="">
+          <img @click.stop="deleteAddress(v)" src="../../../static/image/delete-icon.png" alt="">
+        </div>
+      </div>
+      <div class="item1" @click.stop="showAddress(0,v)">
+        <img class="img" src="../../../static/image/icon-add.png" alt="">
+        <div class="shop-name">添加常用地址</div>
+      </div>
     </div>
-    <el-table @cell-click="editAddress" :data="addressList" stripe style="width: 100%">
-      <el-table-column prop="contact" label="姓名" width="300">
-      </el-table-column>
-      <el-table-column prop="phone" label="电话" width="300">
-      </el-table-column>
-      <el-table-column prop="address" label="地址">
-      </el-table-column>
-      <el-table-column label="删除" width="100">
-        <template slot-scope="scope">
-          <i @click="deleteAddress(scope.row)" class="el-icon-delete"></i>
-          <!-- <el-button type="text" size="small" @click="showAddress(true,scope.row)">编辑</el-button>
-          <el-button @click="deleteAddress(scope.row)" type="text" size="small">删除</el-button> -->
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- //新增编辑地址 -->
     <el-dialog :title="isEdit ? '编辑地址': '新增地址'" :visible.sync="centerDialogVisible" width="600px" center append-to-body>
       <el-form ref="form" :model="form" label-width="100px" label-position="left" size="small">
@@ -97,11 +92,6 @@ export default {
   mounted() {},
   // 方法集合
   methods: {
-    editAddress(){
-      console.log('arguments:',arguments);
-      if(arguments[2].cellIndex === 3)return
-      this.showAddress(true,arguments[0])
-    },
     cancel() {
       this.centerDialogVisible = false;
       this.getAddressList();
@@ -256,30 +246,75 @@ export default {
   color: #fff;
   border: #fc7200;
 }
-/deep/ .el-button--text {
-  color: #fc7200;
-}
+
 .map {
   width: 20px;
   height: 20px;
   cursor: pointer;
 }
 .address-management {
-  .header {
+  .printer-list {
     display: flex;
-    // justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    .num {
-      font-size: 14px;
-      margin-right: 20px;
-      span {
-        color: #fc7200;
+    flex-wrap: wrap;
+    .item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 280px;
+      height: 120px;
+      background: #ffffff;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      padding: 35px 20px 0;
+      cursor: pointer;
+      .img {
+        width: 80px;
+        height: 80px;
+      }
+      .name {
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 20px;
+        color: #333333;
+      }
+      .shop-name {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
+        margin-top: 16px;
+      }
+      .btns {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        img {
+          width: 20px;
+          height: 20px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .item1 {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #ffffff;
+      width: 320px;
+      height: 155px;
+      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin: 10px 20px 0 0;
+      cursor: pointer;
+      .shop-name {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: #999999;
       }
     }
-  }
-  .el-icon-delete {
-    cursor: pointer;
   }
 }
 </style>