门店管理 列表/删除

src/api/shop.js

@@ -0,0 +1,13 @@
+import { get, post, postJson } from './http.js';
+
+export const getShopList = ( params ) => {
+  return get( 'app/shop/list', params )
+}
+
+export const shopDelete = ( params ) => {
+  return post( 'app/shop/delete', params )
+}
+
+export const getProductList = (params) => {
+  return get('app/product/list', params)
+}

src/components/orderComponents/orderList.vue

@@ -1,185 +1,200 @@
-<template>
-    <div>
-        <div class="order_item" v-for="(item,i) in 5" :key="i">
-          <div class="order_item_header">
-           <div class="order_item_header_l">
-              <div class="Serial_number">#005</div>
-              <img src="" class="logo">
-              <span class="name">礼颂至品（娄葑店）</span>
-              <div class="sign_time">17:30前送达</div>
-              <div class="sign_txt">立即送达</div>
-              <div class="sign_d">预约 09/10 17:30自动发起配送</div>
-           </div>
-           <div class="order_item_header_r">
-             <span class="header_r">已发单1分钟</span>
-             <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
-           </div>
-            
-          </div>
-          <div class="order_item_cont">
-            <div class="itme_l">
-              <div class="content">王女士<span>18015468888-1157</span></div> 
-              <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i  class="el-icon-location"></i>1.3km</span></div>
-            </div>
-            <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
-          </div>
-        </div>
-         <!-- 发起配送 -->
-        <send-order-popup ref="sendOrderPopup"></send-order-popup>
-    </div>
-    
-</template>
-    
-<script>
- import sendOrderPopup from './sendOrderPopup.vue';
-export default {
-  name: 'OrderList',
-  data () {
-    return {
-      
-    }
-  },
-  props:{
-    tabNum: Number,
-  },
-  components: {
-    sendOrderPopup
-  },
-  methods: {
-    deleteItem(index) {
-        this.$refs.sendOrderPopup.init();
-      },
-  },
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped="scoped">
-.order_item{
-        width: 100%;
-        height: 140px;
-        background: #fff;
-        margin-bottom: 10px;
-        .order_item_header{
-          width: 100%;
-          height: 49px;
-          display: flex;
-          align-items: center;
-          border-bottom: 1px solid #F0F0F0;
-          position: relative;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding-right: 10px;
-          box-sizing: border-box;
-          .order_item_header_l,.order_item_header_r{
-            display: flex;
-            align-items: center;
-          }
-          .Serial_number{
-            width: 60px;
-            height: 26px;
-            background: #FC7200;
-            border-radius: 0 30px 30px 0;
-            font-size: 10px;
-            font-weight: 500;
-            color: #FFFFFF;
-            text-align: center;
-            line-height: 26px;
-          }
-          .logo{
-            width: 21px;
-            height: 21px;
-            border-radius: 50%;
-            background: crimson;
-            margin-left: 23px;
-          }
-          .name{
-            font-size: 14px;
-            font-weight: 500;
-            color: #333333;
-            margin-left: 5px;
-          }
-          .sign_time{
-            width: 84px;
-            height: 20px;
-            border: 1px solid #009CFF;
-            background: #F2FAFF;
-            border-radius: 2px;
-            text-align: center;
-            line-height: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            color: #009CFF;
-            margin-left: 15px;
-          }
-          .sign_txt{
-            width: 64px; 
-            height: 20px;
-            border: 1px solid #009CFF;
-            background: #F2FAFF;
-            border-radius: 2px;
-            text-align: center;
-            line-height: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            color: #009CFF;
-            margin-left: 10px;
-          }
-          .sign_d{
-            height: 20px;
-            border: 1px solid #F74141;
-            background: #FFF5F5;
-            border-radius: 2px;
-            text-align: center;
-            line-height: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            color: #F74141;
-            margin-left: 10px;
-            padding: 0 7px;
-          }
-          .header_r{
-            font-size: 14px;
-            font-weight: 400;
-            color: #333333;
-            margin-right: 22px;
-          }
-          .btn{
-             background: #FC7200;
-             border-color: #FC7200;
-             color: #FFF;
-            //  position: absolute;
-            //  right: 10px;
-          }
-        }
-        .order_item_cont{
-          width: 100%;
-          height: 90px;
-          padding: 0 11px 0 19px;
-          box-sizing: border-box;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          .itme_l{
-            font-size: 14px;
-            font-weight: 600;
-            color: #333333;
-            line-height: 26px;
-            .content span{
-              margin-left: 15px;
-            }
-            .address span{
-              font-size: 12px;
-              color: #B1B1B1;
-              margin-left: 15px;
-            }
-          }
-          .itme_r{
-            font-size: 14px;
-            font-weight: 400;
-            color: #B1B1B1;
-          }
-        }
-     }
-</style>
+<template>
+  <div>
+    <div class="order_item" v-for="(item,i) in 5" :key="i">
+      <div class="order_item_header">
+        <div class="order_item_header_l">
+          <div class="Serial_number">#005</div>
+          <img src="" class="logo">
+          <span class="name">礼颂至品（娄葑店）</span>
+          <div class="sign_time">17:30前送达</div>
+          <div class="sign_txt">立即送达</div>
+          <div class="sign_d">预约 09/10 17:30自动发起配送</div>
+        </div>
+        <div class="order_item_header_r">
+          <span class="header_r">已发单1分钟</span>
+          <el-button size='small' class="btn" @click.stop="deleteItem">发起配送</el-button>
+        </div>
+
+      </div>
+      <div class="order_item_cont">
+        <div class="itme_l">
+          <div class="content">王女士<span>18015468888-1157</span></div>
+          <div class="address">苏州市工业园区娄葑街道通园路80号（56文创园）C栋1楼 <span><i class="el-icon-location"></i>1.3km</span></div>
+        </div>
+        <div class="itme_r">备注：蜡烛需要20岁，要个王冠的帽子</div>
+      </div>
+    </div>
+    <!-- 发起配送 -->
+    <send-order-popup ref="sendOrderPopup"></send-order-popup>
+  </div>
+
+</template>
+
+<script>
+  import sendOrderPopup from './sendOrderPopup.vue';
+
+  export default {
+    name: 'OrderList',
+    data() {
+      return {}
+    },
+    props: {
+      tabNum: Number,
+    },
+    components: {
+      sendOrderPopup
+    },
+
+    methods: {
+      deleteItem(index) {
+        this.$refs.sendOrderPopup.init();
+      },
+    },
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped="scoped">
+  .order_item {
+    width: 100%;
+    height: 140px;
+    background: #fff;
+    margin-bottom: 10px;
+
+    .order_item_header {
+      width: 100%;
+      height: 49px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #F0F0F0;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 10px;
+      box-sizing: border-box;
+
+      .order_item_header_l, .order_item_header_r {
+        display: flex;
+        align-items: center;
+      }
+
+      .Serial_number {
+        width: 60px;
+        height: 26px;
+        background: #FC7200;
+        border-radius: 0 30px 30px 0;
+        font-size: 10px;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 26px;
+      }
+
+      .logo {
+        width: 21px;
+        height: 21px;
+        border-radius: 50%;
+        background: crimson;
+        margin-left: 23px;
+      }
+
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333333;
+        margin-left: 5px;
+      }
+
+      .sign_time {
+        width: 84px;
+        height: 20px;
+        border: 1px solid #009CFF;
+        background: #F2FAFF;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #009CFF;
+        margin-left: 15px;
+      }
+
+      .sign_txt {
+        width: 64px;
+        height: 20px;
+        border: 1px solid #009CFF;
+        background: #F2FAFF;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #009CFF;
+        margin-left: 10px;
+      }
+
+      .sign_d {
+        height: 20px;
+        border: 1px solid #F74141;
+        background: #FFF5F5;
+        border-radius: 2px;
+        text-align: center;
+        line-height: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #F74141;
+        margin-left: 10px;
+        padding: 0 7px;
+      }
+
+      .header_r {
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        margin-right: 22px;
+      }
+
+      .btn {
+        background: #FC7200;
+        border-color: #FC7200;
+        color: #FFF;
+        //  position: absolute;
+        //  right: 10px;
+      }
+    }
+
+    .order_item_cont {
+      width: 100%;
+      height: 90px;
+      padding: 0 11px 0 19px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .itme_l {
+        font-size: 14px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 26px;
+
+        .content span {
+          margin-left: 15px;
+        }
+
+        .address span {
+          font-size: 12px;
+          color: #B1B1B1;
+          margin-left: 15px;
+        }
+      }
+
+      .itme_r {
+        font-size: 14px;
+        font-weight: 400;
+        color: #B1B1B1;
+      }
+    }
+  }
+</style>

src/components/shopCompoents/shopAdd.vue

@@ -7,9 +7,9 @@
         </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 class="item" :class="form.categoryId == item.id ? 'active':''" v-for="(item,i) in products" :key="i"
+                 @click="form.categoryId = item.id">
+              {{item.name}}
             </div>
           </div>
         </el-form-item>
@@ -18,26 +18,23 @@
                     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-input v-model="form.contactName" 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-input v-model="form.mobile" placeholder="请填写手机号" autocomplete="off" style="width: 40%"></el-input>
         </el-form-item>
-        <el-form-item label="已获运力" label-width="103px">
+        <el-form-item label="已获运力" label-width="103px" v-if="form.id">
           <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">
+            <img :src="item.logo" alt="" v-for="(item,i) in form.deliveries" :key="i" v-if="item.bindStatus == 1">
           </div>
           <div class="line"></div>
         </el-form-item>
-        <el-form-item label="审核中运力" label-width="103px">
+        <el-form-item label="审核中运力" label-width="103px" v-if="form.id && revieweds.length">
           <div class="reviewed">
-            <div class="item" v-for="(item, i) in 3">
+            <div class="item" v-for="(item, i) in revieweds" :key="i">
               <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>
+                <img class="logo" :src="item.logo">
+                <span class="label">{{item.name}}</span>
               </div>
               <div class="tip">审核中</div>
             </div>
@@ -45,7 +42,7 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button class="btn" >保存</el-button>
+        <el-button class="btn">保存</el-button>
       </div>
     </el-dialog>
   </div>
@@ -53,20 +50,35 @@
 
 <script>
   export default {
+    props: {
+      products: {
+        type: Array,
+        default: function () {
+          return []
+        }
+      }
+    },
     data() {
       return {
         showVisible: false,
-        categoryList: ['文件证件', '食品饮料', '生活用品', '蛋糕甜点', '快餐水果', '鲜花绿植', '数码家电', '服饰鞋帽', '汽车配件', '宝珠首饰', '其他'],
-        form: {
-          name: '',
-          category: 0,
-          address: ''
-        }
+        form: {},
+        revieweds: [],
       }
     },
 
     methods: {
-      init() {
+      init(e) {
+        if (e) {
+          console.log(e)
+          for (let i = 0; i < e.deliveries.length; i++) {
+            if (e.deliveries[i].bindStatus == 2) {
+              this.revieweds.push(e.deliveries[i])
+            }
+          }
+          this.form = e;
+        } else {
+          this.form = {}
+        }
         this.showVisible = true
       }
     }

src/components/shopCompoents/shopList.vue

@@ -13,58 +13,91 @@
       </div>
     </div>
     <el-table :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
-      <el-table-column prop="sn" label="门店编号" width="170"></el-table-column>
-      <el-table-column prop="label" label="门店名称" width="172" align="center"></el-table-column>
+      <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
+      <el-table-column prop="code" label="门店名称" width="172" align="center"></el-table-column>
       <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
       <el-table-column prop="name" label="联系人" width="164" align="center"></el-table-column>
-      <el-table-column prop="phone" label="联系电话" width="176" align="center"></el-table-column>
+      <el-table-column prop="mobile" label="联系电话" width="176" align="center"></el-table-column>
       <el-table-column label="已获运力" align="center">
         <template slot-scope="scope">
           <div class="imgs">
-            <img class="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=1634051738&t=81df0830b2c9c3b872d6744bc6ddcec5"
-                 v-for="(item, i) in 10" :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(e)">修改</el-button>
-          <el-button class="btn black" size="mini" @click.stop="deleteItem">删除门店</el-button>
+          <el-button size="mini" @click.stop="addShop(scope.row)">修改</el-button>
+          <el-button class="btn black" size="mini" @click.stop="deleteItem(scope.row)">删除门店</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <shop-add ref="shopAdd"></shop-add>
+    <shop-add ref="shopAdd" :products="productList"></shop-add>
   </div>
 </template>
 
 <script>
   import shopAdd from './shopAdd'
+  import {
+    getShopList,
+    getProductList,
+    shopDelete
+  } from '../../api/shop'
+
   export default {
-    components:{
+    components: {
       shopAdd
     },
     data() {
       return {
-        data: [{
-          sn: '2108091534398953',
-          label: '一點點（文星店）',
-          address: '江苏省苏州市文星广场2楼208室',
-          name: '王先生',
-          phone: '13888586506'
-        }, {
-          sn: '2108091534398953',
-          label: '一點點（文星店）',
-          address: '江苏省苏州市文星广场2楼208室',
-          name: '王先生',
-          phone: '13888586506'
-        }],
+        data: [],
+        productList: []
       }
     },
 
+    mounted() {
+      this.getData();
+      this.getProductList();
+    },
+
     methods: {
-      addShop(e){
+
+      addShop(e) {
         this.$refs.shopAdd.init(e);
+      },
+
+      getData() {
+        getShopList().then(res => {
+          this.data = res.data;
+        })
+      },
+
+      getProductList() {
+        getProductList().then(res => {
+          this.productList = res.data
+        })
+      },
+
+      deleteItem(e) {
+        this.$confirm('此操作将永久删除该门店, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          shopDelete({
+            shopId: e.id
+          }).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.getData();
+          })
+
+        }).catch(() => {
+
+        });
       }
     }
   }
@@ -147,6 +180,7 @@
       display: flex;
       align-items: center;
       padding-left: 36px;
+
       .img {
         width: 20px;
         height: 20px;

src/components/shopInfo.vue

@@ -1,94 +1,99 @@
-<template>
-  <div class="shopInfo">
-    <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}"
-               v-for="(item,i) in tab_list" :key="i">
-            <span>{{item.name}}</span>
-            <div class="tab_line"></div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
-    <el-row class="content">
-     <el-col :span="24" v-if="tab_ac === 0">
-       <shop-list></shop-list>
-     </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-  import shopList from './shopCompoents/shopList'
-  export default {
-    name: 'HelloWorld',
-    components: {
-      shopList
-    },
-    data() {
-      return {
-        tab_list: [
-          {name: '门店管理', index: 0},
-          {name: '绑定外卖平台', index: 1},
-          {name: '绑定配送平台', index: 2},
-          {name: '绑定打印机', index: 3}
-        ],
-        tab_ac: 0,
-      }
-    }
-  }
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-  .shopInfo {
-    .order_tab {
-      width: 100%;
-      height: 74px;
-      background: #FFF;
-
-      .tab_list {
-        width: 100%;
-        height: 74px;
-        padding-top: 20px;
-        padding-left: 36px;
-        box-sizing: border-box;
-        display: flex;
-
-        .tab_item {
-          min-width: 58px;
-          margin-right: 56px;
-          font-size: 16px;
-          font-weight: 500;
-          color: #B1B1B1;
-          position: relative;
-          text-align: center;
-          cursor: pointer;
-
-          .tab_line {
-            width: 58px;
-            height: 6px;
-            background: #FFF;
-            border-radius: 3px;
-            margin: 15px auto 0;
-          }
-        }
-
-        .tab_item_ac {
-          color: #FC7200;
-
-          .tab_line {
-            background: #FC7200;
-          }
-        }
-      }
-    }
-
-    .content {
-      width: 100%;
-      margin-top: 10px;
-    }
-  }
-</style>
+<template>
+  <div class="shopInfo">
+    <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}"
+               v-for="(item,i) in tab_list" :key="i">
+            <span>{{item.name}}</span>
+            <div class="tab_line"></div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row class="content">
+      <el-col :span="24" v-if="tab_ac === 0">
+        <shop-list ref="shopListRef"></shop-list>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import shopList from './shopCompoents/shopList'
+
+  export default {
+    name: 'HelloWorld',
+    components: {
+      shopList
+    },
+
+    data() {
+      return {
+        tab_list: [
+          {name: '门店管理', index: 0},
+          {name: '绑定外卖平台', index: 1},
+          {name: '绑定配送平台', index: 2},
+          {name: '绑定打印机', index: 3}
+        ],
+        tab_ac: 0,
+      }
+    },
+
+    mounted() {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+  .shopInfo {
+    .order_tab {
+      width: 100%;
+      height: 74px;
+      background: #FFF;
+
+      .tab_list {
+        width: 100%;
+        height: 74px;
+        padding-top: 20px;
+        padding-left: 36px;
+        box-sizing: border-box;
+        display: flex;
+
+        .tab_item {
+          min-width: 58px;
+          margin-right: 56px;
+          font-size: 16px;
+          font-weight: 500;
+          color: #B1B1B1;
+          position: relative;
+          text-align: center;
+          cursor: pointer;
+
+          .tab_line {
+            width: 58px;
+            height: 6px;
+            background: #FFF;
+            border-radius: 3px;
+            margin: 15px auto 0;
+          }
+        }
+
+        .tab_item_ac {
+          color: #FC7200;
+
+          .tab_line {
+            background: #FC7200;
+          }
+        }
+      }
+    }
+
+    .content {
+      width: 100%;
+      margin-top: 10px;
+    }
+  }
+</style>