no message

src/components/shopCompoents/shopAdd.vue

@@ -1,7 +1,52 @@
 <template>
   <div class="shopAdd">
-    <el-dialog width="40%" title="新增门店" center :visible.sync="showVisible" >
-      <div class="dialog_h"></div>
+    <el-dialog width="40%" title="新增门店" center :visible.sync="showVisible">
+      <el-form :model="form">
+        <el-form-item label="门店名称" label-width="103px">
+          <el-input v-model="form.name" placeholder="请输入店铺名称" autocomplete="off" style="width: 100%"></el-input>
+        </el-form-item>
+        <el-form-item label="主营类别" label-width="103px">
+          <div class="category_box">
+            <div class="item" :class="form.category == i ? 'active':''" v-for="(item,i) in categoryList" :key="i"
+                 @click="form.category = i">
+              {{item}}
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="详细地址" label-width="103px">
+          <el-input v-model="form.address" placeholder="请输入门店的详细地址，精确到门牌号" autocomplete="off"
+                    style="width: 100%"></el-input>
+        </el-form-item>
+        <el-form-item label="联系人姓名" label-width="103px">
+          <el-input v-model="form.address" placeholder="请填写姓名" autocomplete="off" style="width: 40%"></el-input>
+        </el-form-item>
+        <el-form-item label="联系人电话" label-width="103px">
+          <el-input v-model="form.address" placeholder="请填写手机号" autocomplete="off" style="width: 40%"></el-input>
+        </el-form-item>
+        <el-form-item label="已获运力" label-width="103px">
+          <div class="logo_box">
+            <img
+              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pai-hang-bang.cn%2Fallpic%2Fhttp%3A%2F%2Fimage-ali.bianjiyi.com%2F1%2F2019%2F1019%2F09%2F15714497550118.jpg.jpg&refer=http%3A%2F%2Fwww.pai-hang-bang.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634109573&t=2eb813847b65f0db221d45862b6945e8"
+              alt="" v-for="(item,i) in 10" :key="i">
+          </div>
+          <div class="line"></div>
+        </el-form-item>
+        <el-form-item label="审核中运力" label-width="103px">
+          <div class="reviewed">
+            <div class="item" v-for="(item, i) in 3">
+              <div class="left">
+                <img class="logo"
+                     src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fx0.ifengimg.com%2Fres%2F2020%2F3478E2197A8E694E50F82DE98A8AF98751774744_size24_w640_h640.jpeg&refer=http%3A%2F%2Fx0.ifengimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634110398&t=13fc3328c3aa1af71a29064c546a01ac">
+                <span class="label">美团飞速达</span>
+              </div>
+              <div class="tip">审核中</div>
+            </div>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button class="btn" >保存</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -10,7 +55,13 @@
   export default {
     data() {
       return {
-        showVisible: false
+        showVisible: false,
+        categoryList: ['文件证件', '食品饮料', '生活用品', '蛋糕甜点', '快餐水果', '鲜花绿植', '数码家电', '服饰鞋帽', '汽车配件', '宝珠首饰', '其他'],
+        form: {
+          name: '',
+          category: 0,
+          address: ''
+        }
       }
     },
 
@@ -23,22 +74,131 @@
 </script>
 
 <style lang="scss">
-.shopAdd {
-  .el-dialog {
-    border-radius: 16px;
-    overflow: hidden;
-  }
-  .el-dialog__header {
-    /*height: 48px;*/
-    background: #F7F7F7;
-    padding: 16px 20px;
+  .shopAdd {
+    .el-dialog {
+      border-radius: 16px;
+      overflow: hidden;
+    }
 
-  }
+    .el-dialog__headerbtn .el-dialog__close:hover {
+      color: #909399;
+    }
+
+    .el-dialog__header {
+      /*height: 48px;*/
+      background: #F7F7F7;
+      padding: 16px 20px;
+
+    }
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #000000;
+    }
+
+    .el-form-item__label {
+      text-align: left;
+      color: #000000;
+    }
+
+    .el-input__inner:focus {
+      border-color: #FC7B0F;
+    }
+
+    .el-input__inner {
+      color: #222222;
+    }
+
+    .category_box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      margin-top: -10px;
+
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 92px;
+        height: 38px;
+        margin: 10px 10px 0 0;
+        background: #F4F4F4;
+        border-radius: 2px;
+        cursor: pointer;
 
-  .el-dialog__title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #000000;
+        &.active {
+          color: #FFFFFF;
+          background: #FC7200;
+        }
+      }
+    }
+
+    .line {
+      position: absolute;
+      left: -103px;
+      right: 0;
+      bottom: -12px;
+      border: 0.5px dashed #E0E0E0;
+    }
+
+    .logo_box {
+      width: 100%;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      line-height: 0;
+
+      img {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-right: 10px;
+        vertical-align: top;
+      }
+    }
+
+    .reviewed {
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 40px;
+
+        .left {
+          display: flex;
+          align-items: center;
+          line-height: 0;
+
+          .logo {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 10px;
+          }
+
+          .label {
+            font-size: 14px;
+            color: #000000;
+          }
+        }
+
+        .tip {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 60px;
+          height: 22px;
+          border-radius: 22px;
+          background: #F74141;
+          font-size: 12px;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    .btn {
+      width: 220px;
+    }
   }
-}
 </style>

src/components/shopCompoents/shopList.vue

@@ -29,7 +29,7 @@
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" @click.stop="deleteItem">修改</el-button>
+          <el-button size="mini" @click.stop="addShop(e)">修改</el-button>
           <el-button class="btn black" size="mini" @click.stop="deleteItem">删除门店</el-button>
         </template>
       </el-table-column>
@@ -63,8 +63,8 @@
     },
 
     methods: {
-      addShop(){
-        this.$refs.shopAdd.init();
+      addShop(e){
+        this.$refs.shopAdd.init(e);
       }
     }
   }