feat: 提交代码，门店管理页面完善

src/components/orderComponents/orderAMap.vue

@@ -2,7 +2,14 @@
   <el-dialog width="80%" :show-close="false" destroy-on-close :visible.sync="dialogTableVisible">
     <!-- <div id="container"></div> -->
     <div>
-      <el-input v-model="searchKey" @change="searchMap($event)"/>
+      <el-row>
+        <el-col :span="8">
+          <el-input v-model="searchKey"/>
+        </el-col>
+        <el-col :span="4">
+          <el-button @click.stop="searchMap" type="primary">搜&nbsp;索</el-button>
+        </el-col>
+      </el-row>
     </div>
     <el-amap vid="container" style="height: 600px;" :center="center" :zoom="zoom" class="amap-demo">
       <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :icon="marker.icon"></el-amap-marker>
@@ -14,7 +21,7 @@
 
 <script>
   import qs from 'qs';
-  //var map = new AMap.Map('container');
+  var map = new AMap.Map('container');
   export default {
     data() {
       return {
@@ -45,8 +52,7 @@
     },
     created() {},
     methods: {
-      searchMap(e) {
-        console.log(e)
+      searchMap() {
         fetch('https://restapi.amap.com/v3/assistant/inputtips?key=5ae8644771ef9abf9cfb3ea23b1df6ca&keywords=苏州大学&city=0512&offset=20&types=keywords',{
           methods: 'GET'
         }).then( res => {

src/components/shopCompoents/bindDelivery.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="take-out-list">
+      <div class="item">
+        <div class="item-top">
+          <div class="name">美团外卖</div>
+          <div class="top-right">
+            <span>开启后首选该账号平台为配送平台</span>
+            <el-switch />
+          </div>
+        </div>
+        <div class="item-bottom">
+          <div class="left">
+            <div class="l-l">
+              <img src="../../../static/image/alipay.png" class="l-l-img" />
+            </div>
+            <div class="take-out-name">
+              <div>商户编号：一点点</div>
+              <div>账户余额：2222222</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-button type="primary" size="small" class="right-btn">去绑定</el-button>
+            <el-button type="primary" size="small" class="right-btn">完善资料</el-button>
+            <el-button size="small">解&nbsp;绑</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        storeList: [
+          { id: 1, name: '门店名称-1' },
+          { id: 2, name: '门店名称-2' },
+          { id: 3, name: '门店名称-3' },
+          { id: 4, name: '门店名称-4' },
+          { id: 5, name: '门店名称-5' },
+          { id: 6, name: '门店名称-6' },
+          { id: 7, name: '门店名称-7' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .store-list {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 10px;
+    &-item {
+      padding: 8px 27px;
+      background-color: #fff;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #B1B1B1;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      border-radius: 17px;
+      cursor: pointer;
+      margin-right: 10px;
+      &.active {
+        color: #017E61;
+      }
+    }
+  }
+  .store-list::-webkit-scrollbar {
+    height: 6px;
+  }
+  .store-list::-webkit-scrollbar-track {
+    background-color: #eee;
+    /*border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;*/
+  }
+  .store-list::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+  }
+
+  .take-out-list {
+    .item {
+      background-color: #fff;
+      .item-top {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 20px 18px;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+        .name {
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #FFA608;
+        }
+        .top-right {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #B1B1B1;
+            margin-right: 12px;
+          }
+        }
+      }
+      .item-bottom {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25px 18px;
+        align-items: center;
+        .left {
+          display: flex;
+          align-items: center;
+          .l-l {
+            width: 166px;
+            height: 50px;
+            border-radius: 25px;
+            overflow: hidden;
+            font-size: 0;
+            .l-l-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .take-out-name {
+            font-size: 13px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+            margin-left: 30px;
+          }
+        }
+        .right {
+          .right-btn {
+            background-color: #FC7200;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/shopCompoents/bindPrinter.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="store-list">
+      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        storeList: [
+          { id: 1, name: '门店名称-1' },
+          { id: 2, name: '门店名称-2' },
+          { id: 3, name: '门店名称-3' },
+          { id: 4, name: '门店名称-4' },
+          { id: 5, name: '门店名称-5' },
+          { id: 6, name: '门店名称-6' },
+          { id: 7, name: '门店名称-7' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .store-list {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 10px;
+    &-item {
+      padding: 8px 27px;
+      background-color: #fff;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #B1B1B1;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      border-radius: 17px;
+      cursor: pointer;
+      margin-right: 10px;
+      &.active {
+        color: #017E61;
+      }
+    }
+  }
+  .store-list::-webkit-scrollbar {
+    height: 6px;
+  }
+  .store-list::-webkit-scrollbar-track {
+    background-color: #eee;
+    /*border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;*/
+  }
+  .store-list::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+  }
+
+</style>

src/components/shopCompoents/bindTakeOut.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="store-list">
+      <div class="store-list-item" :class=" index == 0 ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
+    </div>
+    <div class="take-out-list">
+      <div class="item">
+        <div class="item-top">
+          <div class="name">美团外卖</div>
+          <div class="top-right">
+            <span>开启后自动接单</span>
+            <el-switch />
+          </div>
+        </div>
+        <div class="item-bottom">
+          <div class="left">
+            <div class="l-l">
+              <img src="../../../static/image/alipay.png" class="l-l-img" />
+            </div>
+            <div class="take-out-name">
+              <div>店铺名称：一点点</div>
+              <div>店铺ID：2222222</div>
+              <div>配送门店：一点点</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-button type="primary" size="small" class="right-btn">去绑定</el-button>
+            <el-button size="small">解&nbsp;绑</el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        storeList: [
+          { id: 1, name: '门店名称-1' },
+          { id: 2, name: '门店名称-2' },
+          { id: 3, name: '门店名称-3' },
+          { id: 4, name: '门店名称-4' },
+          { id: 5, name: '门店名称-5' },
+          { id: 6, name: '门店名称-6' },
+          { id: 7, name: '门店名称-7' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .store-list {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 10px;
+    &-item {
+      padding: 8px 27px;
+      background-color: #fff;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #B1B1B1;
+      box-sizing: border-box;
+      border: 1px solid #eee;
+      border-radius: 17px;
+      cursor: pointer;
+      margin-right: 10px;
+      &.active {
+        color: #017E61;
+      }
+    }
+  }
+  .store-list::-webkit-scrollbar {
+    height: 6px;
+  }
+  .store-list::-webkit-scrollbar-track {
+    background-color: #eee;
+    /*border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;*/
+  }
+  .store-list::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 6px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+  }
+
+  .take-out-list {
+    .item {
+      background-color: #fff;
+      .item-top {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 20px 18px;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+        .name {
+          font-size: 16px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #FFA608;
+        }
+        .top-right {
+          display: flex;
+          align-items: center;
+          span {
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #B1B1B1;
+            margin-right: 12px;
+          }
+        }
+      }
+      .item-bottom {
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 25px 18px;
+        align-items: center;
+        .left {
+          display: flex;
+          align-items: center;
+          .l-l {
+            width: 160px;
+            height: 50px;
+            font-size: 0;
+            .l-l-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .take-out-name {
+            font-size: 13px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #333333;
+            line-height: 20px;
+            margin-left: 30px;
+          }
+        }
+        .right {
+          .right-btn {
+            background-color: #FC7200;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/shopCompoents/shopAdd.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="shopAdd">
-    <el-dialog width="40%" title="新增门店" center :visible.sync="showVisible">
+    <el-dialog width="40%" :title="title" destroy-on-close 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>
@@ -60,6 +60,7 @@
     },
     data() {
       return {
+        title: '新增门店',
         showVisible: false,
         form: {},
         revieweds: [],
@@ -69,7 +70,8 @@
     methods: {
       init(e) {
         if (e) {
-          console.log(e)
+          console.log(e);
+          this.title = '编辑门店';
           for (let i = 0; i < e.deliveries.length; i++) {
             if (e.deliveries[i].bindStatus == 2) {
               this.revieweds.push(e.deliveries[i])
@@ -77,6 +79,7 @@
           }
           this.form = e;
         } else {
+          this.title = '新增门店';
           this.form = {}
         }
         this.showVisible = true

src/components/shopCompoents/shopList.vue

@@ -9,7 +9,7 @@
         <div class="label">门店管理</div>
       </div>
       <div class="right">
-        <el-button class="btn" @click.stop="addShop">新增门店</el-button>
+        <el-button class="btn" @click.stop="addShop(1)">新增门店</el-button>
       </div>
     </div>
     <el-table :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
@@ -21,14 +21,13 @@
       <el-table-column label="已获运力" align="center">
         <template slot-scope="scope">
           <div class="imgs">
-            <img class="img" :src="item.logo"
-                 v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
+            <img class="img" :src="item.logo" v-for="(item, i) in scope.row.deliveries" :key="i" alt="">
           </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" width="200" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" @click.stop="addShop(scope.row)">修改</el-button>
+          <el-button size="mini" @click.stop="addShop(2, scope.row)">修改</el-button>
           <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button>
         </template>
       </el-table-column>
@@ -63,8 +62,12 @@
 
     methods: {
 
-      addShop(e) {
-        this.$refs.shopAdd.init(e);
+      addShop(val, e) {
+        if ( val == 1 ) {
+          this.$refs.shopAdd.init();
+        }else {
+          this.$refs.shopAdd.init(e);
+        }
       },
 
       getData() {

src/components/shopInfo.vue

@@ -3,7 +3,7 @@
     <el-row class="order_tab">
       <el-col :span="15">
         <div class="tab_list">
-          <div class="tab_item" @click="tab_ac = i" :class="{'tab_item_ac':tab_ac==i?true:false}"
+          <div class="tab_item" @click="changeTabs(i)" :class="{'tab_item_ac':tab_ac==i?true:false}"
                v-for="(item,i) in tab_list" :key="i">
             <span>{{item.name}}</span>
             <div class="tab_line"></div>
@@ -13,24 +13,30 @@
     </el-row>
 
     <el-row class="content">
-      <el-col :span="24" v-if="tab_ac === 0">
-        <shop-list ref="shopListRef"></shop-list>
+      <el-col :span="24">
+        <component :is="activeName"></component>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-  import shopList from './shopCompoents/shopList'
-
+  import shopList from './shopCompoents/shopList';
+  import storeList from './shopCompoents/bindTakeOut.vue';
+  import deliveryList from './shopCompoents/bindDelivery.vue';
+  import printerList from './shopCompoents/bindPrinter.vue';
   export default {
     name: 'HelloWorld',
     components: {
-      shopList
+      shopList,
+      storeList,
+      deliveryList,
+      printerList
     },
 
     data() {
       return {
+        activeName: 'shopList',
         tab_list: [
           {name: '门店管理', index: 0},
           {name: '绑定外卖平台', index: 1},
@@ -40,7 +46,28 @@
         tab_ac: 0,
       }
     },
-
+    methods: {
+      changeTabs(i) {
+        this.tab_ac = i;
+        switch(i) {
+          case 0:
+            this.activeName = 'shopList';
+          break;
+          case 1:
+            this.activeName = 'storeList';
+          break;
+          case 2:
+            this.activeName = 'deliveryList';
+          break;
+          case 3:
+            this.activeName = 'printerList';
+          break;
+          default:
+            this.activeName = 'shopList';
+          break;
+        }
+      }
+    },
     mounted() {
     }
   }

src/views/home.vue

@@ -38,9 +38,7 @@
       sidebar,
       headerVue
     },
-    created() {
-      this.getOrder();
-    },
+    created() {},
     methods: {
       getOrder() {
         let params = {