add 绑定外卖平台接口调试

src/api/http.js

@@ -6,99 +6,99 @@ const requestUrl = 'http://121.4.100.145:8082/'; // 测试内部接口
 //const requestUrl = 'https://api.liebaoai.cn/'; // 统一正式接口
 //创建axios实例
 const service = axios.create({
-    timeout: 30000 //超时时间
+  timeout: 30000 //超时时间
 })
 
 //添加request拦截器
 service.interceptors.request.use(config => {
-    config.headers = {
-     // 设置全局请求头
-     'token': 'cedebb6e872f539bef8c3f919874e9d7',
-     'aliasId': '',
-     'platformType': 'pc',
-     // 'content-type': params.method == "GET" ? 'application/x-www-form-urlencoded' : 'application/json;charset=utf-8',
-     'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
-    }
-    config.params = {
-      t: Date.parse(new Date()),
-      ...config.params
-    }
-    return config;
+  config.headers = {
+    // 设置全局请求头
+    'token': 'cedebb6e872f539bef8c3f919874e9d7',
+    'aliasId': '',
+    'platformType': 'pc',
+    // 'content-type': params.method == "GET" ? 'application/x-www-form-urlencoded' : 'application/json;charset=utf-8',
+    'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
+  }
+  config.params = {
+    t: Date.parse(new Date()),
+    ...config.params
+  }
+  return config;
 }, error => {
-    Promise.reject(error);
+  Promise.reject(error);
 })
 
 //添加response拦截器
 service.interceptors.response.use(
-    response => {
-      if (response.status === 200) {
-        let res = {};
-        res.code = response.data.code;
-        res.data = response.data;
-        return Promise.resolve(res.data)
-      } else {
-        return Promise.reject(response)
-      }
-    },
-    error => {
-      let status = error.response && error.response.status;
-      switch( status ) {
-        case 404:
-          message({
-            message: error.response.data.message,
-            type: 'error'
-          })
+  response => {
+    if (response.status === 200) {
+      let res = {};
+      res.code = response.data.code;
+      res.data = response.data;
+      return Promise.resolve(res.data)
+    } else {
+      return Promise.reject(response)
+    }
+  },
+  error => {
+    let status = error.response && error.response.status;
+    switch (status) {
+      case 404:
+        message({
+          message: error.response.data.message,
+          type: 'error'
+        })
         break;
-        case 500:
-          message({
-            message: error.response.data.message,
-            type: 'error'
-          })
+      case 500:
+        message({
+          message: error.response.data.message,
+          type: 'error'
+        })
         break;
-        default:
-          // to do something
+      default:
+        // to do something
         break;
-        
-      }
-      return Promise.reject(error.response)
+
     }
+    return Promise.reject(error.response)
+  }
 )
 
 //封装get接口
 // params={} 是设置默认值
 export function get(url, params = {}) {
-    params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
-    return service({
-        url: requestUrl + url,
-        method: 'get',
-        headers: {},
-        params
-    })
+  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
+  return service({
+    url: requestUrl + url,
+    method: 'get',
+    headers: {},
+    params
+  })
 }
 
 //封装post请求
 export function post(url, data = {}) {
-    //默认配置
-    let sendObject = {
-        url: requestUrl + url,
-        method: "post",
-        data: data
-    };
-    sendObject.data = qs.stringify(sendObject.data);
-    return service(sendObject)
+  //默认配置
+  let sendObject = {
+    url: requestUrl + url,
+    method: "post",
+    data: data
+  };
+  sendObject.data = qs.stringify(sendObject.data);
+  return service(sendObject)
 }
 
 //封装post请求
 export function postJson(url, data = {}) {
-    //默认配置
-    let sendObject = {
-        url: requestUrl + url,
-        method: "post",
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        },
-        data: data
-    };
-    sendObject.data = qs.stringify(data);
-    return service(sendObject)
+  //默认配置
+  let sendObject = {
+    url: requestUrl + url,
+    method: "post",
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    data: data
+  };
+  sendObject.data = qs.stringify(data);
+  return service(sendObject)
 }

src/api/shop.js

@@ -1,13 +1,38 @@
 import { get, post, postJson } from './http.js';
 
-export const getShopList = ( params ) => {
-  return get( 'app/shop/list', params )
+export const getShopList = (params) => {
+  return get('app/shop/list', params)
 }
 
-export const shopDelete = ( params ) => {
-  return post( 'app/shop/delete', params )
+export const shopDelete = (params) => {
+  return post('app/shop/delete', params)
 }
 
 export const getProductList = (params) => {
   return get('app/product/list', params)
 }
+
+export const getBindTakeOutList = (params) => {
+  return get('app/waimai/list', params)
+}
+
+export const getTakeOutList = (params) => {
+  return get('app/waimai/waimais', params)
+}
+
+export const bindTakeOut = (params) => {
+  return post('app/waimai/bind', params)
+}
+
+export const deleteTakeOut = (params) => {
+  return post('app/waimai/delete', params)
+}
+
+export const releaseTakeOut = (params) => {
+  return post('app/waimai/release', params)
+}
+
+export const setTakeOut = (params) => {
+  return post('app/waimai/set', params)
+}
+

src/components/orderComponents/orderList.vue

@@ -147,6 +147,7 @@ export default {
     sendOrderPopup
   },
   mounted() {
+    
   },
   methods: {
     deleteItem(index) {

src/components/shopCompoents/bindTakeOut.vue

@@ -1,31 +1,34 @@
 <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 class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in storeList" :key="index">{{ item.name }}</div>
     </div>
     <div class="take-out-list">
-      <div class="item">
+      <div class="item" v-for="(v,index) in takeOutList" :key="index">
         <div class="item-top">
-          <div class="name">美团外卖</div>
-          <div class="top-right">
+          <div class="top-left">
+            <img :src="v.logo" alt="" class="top-left-img">
+            <div class="name">{{v.name}}</div>
+          </div>
+          <!-- <div class="top-right">
             <span>开启后自动接单</span>
             <el-switch />
-          </div>
+          </div> -->
         </div>
         <div class="item-bottom">
           <div class="left">
             <div class="l-l">
-              <img src="../../../static/image/alipay.png" class="l-l-img" />
+              <img :src="v.pcLogo" class="l-l-img" />
             </div>
             <div class="take-out-name">
-              <div>店铺名称：一点点</div>
-              <div>店铺ID：2222222</div>
-              <div>配送门店：一点点</div>
+              <div>店铺名称：{{v.shopName}}</div>
+              <div>店铺ID：{{v.waimaiId}}</div>
+              <div>配送门店：{{v.thirdShopName}}</div>
             </div>
           </div>
           <div class="right">
-            <el-button type="primary" size="small" class="right-btn">去绑定</el-button>
-            <el-button size="small">解&nbsp;绑</el-button>
+            <el-button v-if="!v.bindStatus" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="关闭窗口后再操作！" type="primary" size="small" class="right-btn" @click="goBind(v)">去绑定</el-button>
+            <el-button v-else @click="release(v)" size="small">解&nbsp;&nbsp;&nbsp;绑</el-button>
           </div>
         </div>
       </div>
@@ -34,126 +37,222 @@
 </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' }
-        ]
+import { setInterval } from "timers";
+import {
+  getShopList,
+  getBindTakeOutList,
+  getTakeOutList,
+  bindTakeOut,
+  deleteTakeOut,
+  releaseTakeOut,
+  setTakeOut,
+} from "../../api/shop";
+export default {
+  data() {
+    return {
+      storeList: [],
+      takeOutList: [],
+      curIdx: -1,
+      jumpUrl: null,
+      fullscreenLoading: false,
+    };
+  },
+  watch: {
+    curIdx(newVal, oldVal) {
+      this.getBindTakeOutList(newVal);
+    },
+    jumpUrl(newVal, oldVal) {
+      if (this.jumpUrl) {
+        this.fullscreenLoading = true;
+        let newWindowWidth = 800,
+          newWindowHeight = 500,
+          left = (window.screen.width - newWindowWidth) / 2,
+          top = (window.screen.height - newWindowHeight) / 2 - 100;
+        let features = `width=${newWindowWidth},height=${newWindowHeight},left=${left},top=${top}`;
+        let windowOpen = window.open(newVal, "name", features);
+        let loop = window.setInterval(() => {
+          console.log("windowOpen.closed", windowOpen.closed);
+          if (windowOpen.closed) {
+            this.jumpUrl = null;
+            this.fullscreenLoading = false;
+            window.clearInterval(loop);
+            this.getBindTakeOutList(this.curIdx);
+          }
+        }, 1000);
       }
-    }
-  }
+    },
+  },
+  created() {
+    getShopList().then((res) => {
+      this.storeList = res.data;
+      this.curIdx = 0;
+    });
+  },
+  methods: {
+    getBindTakeOutList(index) {
+      getBindTakeOutList({ shopId: this.storeList[index].id }).then((res) => {
+        this.takeOutList = res.data;
+      });
+    },
+    goBind(v) {
+      let params = {
+        shopId: this.storeList[this.curIdx].id,
+        waimaiId: v.waimaiId,
+        isNew: 1,
+      };
+      bindTakeOut(params).then((res) => {
+        this.jumpUrl = res.data;
+      });
+    },
+    release(v) {
+      this.$confirm("解绑后将无法同步店铺订单，确认要解绑吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          releaseTakeOut({ id: v.id }).then((res) => {
+            if (res.code === 200) {
+              if (res.data) {
+                this.jumpUrl = res.data;
+              } else {
+                this.$message({
+                  type: "success",
+                  message: "成功解绑!",
+                });
+                this.getBindTakeOutList(this.curIdx);
+              }
+            } else {
+              this.$message({
+                type: "err",
+                message: res.msg,
+              });
+            }
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消解绑！",
+          });
+        });
+    },
+  },
+};
 </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 {
+  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;
+}
+.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;
-  }
+}
+.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 {
+.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;
+      .top-left {
         display: flex;
-        justify-content: space-between;
-        box-sizing: border-box;
-        padding: 20px 18px;
         align-items: center;
-        border-bottom: 1px solid #eee;
+        .top-left-img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+        }
         .name {
           font-size: 16px;
           font-family: PingFang SC;
           font-weight: bold;
-          color: #FFA608;
+          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;
-          }
+      }
+      .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 {
+    }
+    .item-bottom {
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 25px 18px;
+      align-items: center;
+      .left {
         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;
+        .l-l {
+          width: 160px;
+          height: 50px;
+          font-size: 0;
+          .l-l-img {
+            width: 100%;
+            height: 100%;
           }
         }
-        .right {
-          .right-btn {
-            background-color: #FC7200;
-            border: none;
-          }
+        .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: #fc7200;
         }
       }
     }
   }
+}
 </style>

src/components/shopCompoents/shopList.vue

@@ -12,7 +12,7 @@
         <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">
+    <el-table v-loading="loading" element-loading-text="数据加载中" :data="data" stripe header-row-class-name="table_h" style="width: 100%; margin-top: 10px">
       <el-table-column prop="code" label="门店编号" width="170"></el-table-column>
       <el-table-column prop="name" label="门店名称" width="172" align="center"></el-table-column>
       <el-table-column prop="address" label="门店地址" width="321" align="center"></el-table-column>
@@ -37,159 +37,155 @@
 </template>
 
 <script>
-  import shopAdd from './shopAdd'
-  import {
-    getShopList,
-    getProductList,
-    shopDelete
-  } from '../../api/shop'
-
-  export default {
-    components: {
-      shopAdd
-    },
-    data() {
-      return {
-        data: [],
-        productList: []
+import shopAdd from "./shopAdd";
+import { getShopList, getProductList, shopDelete } from "../../api/shop";
+
+export default {
+  components: {
+    shopAdd,
+  },
+  data() {
+    return {
+      loading: false,
+      data: [],
+      productList: [],
+    };
+  },
+
+  mounted() {
+    this.getData();
+    this.getProductList();
+  },
+
+  methods: {
+    addShop(val, e) {
+      if (val == 1) {
+        this.$refs.shopAdd.init();
+      } else {
+        this.$refs.shopAdd.init(e);
       }
     },
 
-    mounted() {
-      this.getData();
-      this.getProductList();
+    getData() {
+      this.loading = true;
+      getShopList().then((res) => {
+        this.data = res.data;
+        this.loading = false;
+      });
     },
 
-    methods: {
-
-      addShop(val, e) {
-        if ( val == 1 ) {
-          this.$refs.shopAdd.init();
-        }else {
-          this.$refs.shopAdd.init(e);
-        }
-      },
-
-      getData() {
-        getShopList().then(res => {
-          this.data = res.data;
-        })
-      },
+    getProductList() {
+      getProductList().then((res) => {
+        this.productList = res.data;
+      });
+    },
 
-      getProductList() {
-        getProductList().then(res => {
-          this.productList = res.data
-        })
-      },
-
-      deleteItem(e) {
-        this.$confirm('此操作将永久删除该门店, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+    deleteItem(e) {
+      this.$confirm("此操作将永久删除该门店, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
           shopDelete({
-            shopId: e.id
-          }).then(res => {
+            shopId: e.id,
+          }).then((res) => {
             this.$message({
-              type: 'success',
-              message: '删除成功!'
+              type: "success",
+              message: "删除成功!",
             });
             this.getData();
-          })
-
-        }).catch(() => {
-
-        });
-      }
-    }
-  }
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  .shopList {
-    width: 100%;
-    background: #ffffff;
-    min-height: calc(100vh - 184px);
-    padding: 20px;
-    box-sizing: border-box;
-
-    .header {
+.shopList {
+  width: 100%;
+  background: #ffffff;
+  min-height: calc(100vh - 184px);
+  padding: 20px;
+  box-sizing: border-box;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-
-      .left {
-        display: flex;
-        align-items: center;
-
-        .line {
-          position: relative;
-          width: 4px;
-          height: 15px;
-          background: #FC7200;
-          border-radius: 4px;
-          overflow: hidden;
-          margin-right: 10px;
-
-          .b_line {
-            width: 100px;
-            height: 6px;
-            background: #462BF7;
-          }
-
-          .triangle {
-            width: 0;
-            height: 0;
-            border-top: 100px solid #462BF7;
-            border-left: 100px solid transparent;
-          }
+
+      .line {
+        position: relative;
+        width: 4px;
+        height: 15px;
+        background: #fc7200;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-right: 10px;
+
+        .b_line {
+          width: 100px;
+          height: 6px;
+          background: #462bf7;
         }
 
-        .label {
-          font-size: 16px;
-          font-weight: 500;
-          color: #0D1E40;
+        .triangle {
+          width: 0;
+          height: 0;
+          border-top: 100px solid #462bf7;
+          border-left: 100px solid transparent;
         }
       }
 
+      .label {
+        font-size: 16px;
+        font-weight: 500;
+        color: #0d1e40;
+      }
     }
+  }
 
-    .btn {
-      background: #FC7200;
-      border-color: #FC7200;
-      color: #FFF;
+  .btn {
+    background: #fc7200;
+    border-color: #fc7200;
+    color: #fff;
 
-      &.black {
-        background: #0D1E40;
-        border-color: #0D1E40;
-      }
+    &.black {
+      background: #0d1e40;
+      border-color: #0d1e40;
     }
+  }
 
-    .el-table th.el-table__cell {
-      height: 38px;
-      background: #FAFAFA;
-      padding: 0;
-      font-size: 12px;
-      color: #666666;
-    }
+  .el-table th.el-table__cell {
+    height: 38px;
+    background: #fafafa;
+    padding: 0;
+    font-size: 12px;
+    color: #666666;
+  }
 
-    .el-table .el-table__cell {
-      font-size: 14px;
-      color: #222222;
-    }
+  .el-table .el-table__cell {
+    font-size: 14px;
+    color: #222222;
+  }
 
-    .imgs {
-      display: flex;
-      align-items: center;
-      padding-left: 36px;
+  .imgs {
+    display: flex;
+    align-items: center;
+    padding-left: 36px;
 
-      .img {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        margin-right: 10px;
-      }
+    .img {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 10px;
     }
   }
+}
 </style>

src/components/shopInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="shopInfo">
     <el-row class="order_tab">
-      <el-col :span="15">
+      <el-col :span="24">
         <div class="tab_list">
           <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">

src/views/home.vue

@@ -58,7 +58,7 @@
     overflow-y: auto;
     background-color: #F1F2F5;
     padding: 10px;
-    min-width: 1550px;
+    min-width: 550px;
   }
 
   .header-button {