Merge remote-tracking branch 'origin/dev_fy' into dev

src/api/http.js

@@ -6,105 +6,105 @@ 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 = {
-      ...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 = {
+    ...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: {
-          'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
-        },
-        params
-    })
+  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
+  return service({
+    url: requestUrl + url,
+    method: 'get',
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    },
+    params
+  })
 }
 
 //封装post请求
 export function post(url, data = {}) {
-    //默认配置
-    let sendObject = {
-        url: requestUrl + url,
-        method: "post",
-        data: data,
-        headers: {
-          'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
-        }
-    };
-    sendObject.data = qs.stringify(sendObject.data);
-    return service(sendObject)
+  //默认配置
+  let sendObject = {
+    url: requestUrl + url,
+    method: "post",
+    data: data,
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
+    }
+  };
+  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.parse( 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.parse(qs.stringify(data));
+  return service(sendObject)
 }

src/api/shop.js

@@ -1,13 +1,102 @@
 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)
+}
+
+export const getDeliveryList = (params) => {
+  return get('app/delivery/list', params)
+}
+
+export const bindDelivery = (params) => {
+  return post('app/delivery/bind', params)
+}
+
+export const bindUserSubmitDelivery = (params) => {
+  return post('app/delivery/bindUserSubmit', params)
+}
+
+export const bindUserApplyDelivery = (params) => {
+  return post('app/delivery/bindUserApply', params)
+}
+
+export const releaseDelivery = (params) => {
+  return post('app/delivery/release', params)
+}
+
+export const unBindDelivery = (params) => {
+  return post('app/delivery/unBind', params)
+}
+
+export const cancelBindDelivery = (params) => {
+  return post('app/delivery/cancelBind', params)
+}
+
+export const updateShopNo = (params) => {
+  return post('app/delivery/dada/update/shopNo', params)
+}
+
+export const explainDelivery = (params) => {
+  return get('app/delivery/explain', params)
+}
+
+export const findCityDelivery = (params) => {
+  return get('app/delivery/findCity', params)
+}
+
+export const floorAddDelivery = (params) => {
+  return post('app/delivery/floor/add', params)
+}
+
+export const floorDetailDelivery = (params) => {
+  return get('app/delivery/floor/detail', params)
+}
+
+export const floorListDelivery = (params) => {
+  return get('app/delivery/floor/list', params)
+}
+
+export const getCityInfoDelivery = (params) => {
+  return get('app/delivery/getCityInfo', params)
+}
+
+export const poiSearchDelivery = (params) => {
+  return post('app/delivery/poiSearch', params)
+}
+
+export const statusDelivery = (params) => {
+  return post('app/delivery/status', params)
+}
+

src/common/sider.vue

@@ -73,7 +73,7 @@
               {
                 path: '/shopInfo/shopInfos',
                 name: 'shopInfos',
-                title: '订单列表',
+                title: '门店管理',
               },
               {
                 path: '/shopInfo/shopAccount',

src/components/shopCompoents/bindDelivery.vue

@@ -1,158 +1,543 @@
 <template>
   <div>
     <div class="take-out-list">
-      <div class="item">
+      <div class="item" v-for="(v,index) in deliveryList" :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 v-if="v.bindStatus === 1" class="top-right">
             <span>开启后首选该账号平台为配送平台</span>
-            <el-switch />
+            <el-switch @change="statusDelivery(v)" v-model="v.preferredDelivery" :active-value="1" :inactive-value="0" />
           </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>账户余额：2222222</div>
+              <div v-if="v.shopNo">商户编号：{{v.code}}</div>
+              <div v-if="v.balance">账户余额：{{v.balance}}</div>
             </div>
           </div>
+          <!-- 1->绑定，0：未绑定，2-> 审核中，3->拒绝，4->待完善资料 -->
           <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>
+            <el-button v-if="v.bindStatus === 0" @click="goBind(v)" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="关闭窗口后再操作！" type="primary" size="small" class="right-btn">去绑定</el-button>
+            <el-button v-if="[1,4].includes(v.bindStatus)" @click="release(v)" size="small">解&nbsp;&nbsp;&nbsp;绑</el-button>
+            <!-- <el-button v-if="v.bindStatus === 2" @click="release(v)" type="info" size="small">审核中</el-button> -->
+            <!-- <el-button v-if="v.bindStatus === 3" @click="release(v)" type="danger" size="small">已拒绝</el-button> -->
+            <el-button v-if="[1,4].includes(v.bindStatus)&&[1,9].includes(v.type)" @click="perfectData(v)" type="primary" size="small" class="right-btn">完善资料</el-button>
           </div>
         </div>
       </div>
     </div>
+    <!-- UU跑腿 -->
+    <el-dialog :title="title" :visible.sync="centerDialogVisible" width="40%" center>
+      <el-form v-if="title === 'UU跑腿绑定'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
+        <el-form-item label="城市" prop="cityName" :rules="[{ required: true, message: '城市不能为空'}]">
+          <el-input v-model="UUData.cityName" placeholder="请输入当前城市名称"></el-input>
+        </el-form-item>
+        <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '手机号不能为空'}]">
+          <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码" prop="validateCode" :rules="[{ required: true, message: '验证码不能为空'}]">
+          <div class="code">
+            <el-input v-model="UUData.validateCode" placeholder="请输入验证码"></el-input>
+            <div class="get-code" v-if="!showCode" @click.stop="getCode">获取短信验证码</div>
+            <div class="get-code" v-else>{{ count }}秒</div>
+          </div>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
+          <el-button size="small" type="primary" @click="bindUU">确 定</el-button>
+        </el-form-item>
+      </el-form>
+      <el-form v-if="title === 'UU跑腿解绑'" :model="UUData" ref="UUData" label-width="80px" class="demo-ruleForm">
+        <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '手机号不能为空'}]">
+          <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" @click="resetForm('UUData')">取 消</el-button>
+          <el-button size="small" type="primary" @click="releaseUU">确 定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <!-- 完善资料 -->
+    <el-dialog title="请输入达达门店编号" :visible.sync="centerDialogVisible2" width="40%" center>
+      <div class="tips">请确保门店编号填写正确，否则会影响运力的使用！</div>
+      <el-form :model="DDData" ref="DDData" label-width="80px" class="demo-ruleForm">
+        <el-form-item label="门店编号" prop="shopNo">
+          <el-input v-model="DDData.shopNo" placeholder="请输入门店编号"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" @click="resetForm('DDData')">取 消</el-button>
+          <el-button size="small" type="primary" @click="updateShopNo">确 定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </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' }
-        ]
+import {
+  getDeliveryList,
+  releaseDelivery,
+  bindDelivery,
+  bindUserApplyDelivery,
+  bindUserSubmitDelivery,
+  explainDelivery,
+  updateShopNo,
+  statusDelivery,
+} from "../../api/shop";
+export default {
+  data() {
+    return {
+      deliveryList: [],
+      jumpUrl: "",
+      fullscreenLoading: false,
+      centerDialogVisible: false,
+      centerDialogVisible2: false,
+      UUData: {
+        cityName: "",
+        mobile: "",
+        validateCode: "",
+      },
+      title: "UU跑腿绑定",
+      count: 60,
+      showCode: false,
+      timer: null, // 计时器
+      DDData: {
+        deliveryId: "",
+        shopNo: "",
+      },
+    };
+  },
+  watch: {
+    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.getDeliveryList(this.curIdx);
+          }
+        }, 1000);
       }
-    }
-  }
+    },
+  },
+  created() {
+    this.getDeliveryList();
+    this.explainDelivery();
+  },
+  // 1->达达
+  // 2->蜂鸟即配
+  // 3->美团飞速达
+  // 4->闪送
+  // 5->顺丰同城
+  // 7->UU跑腿
+  // 8->爱跑腿
+  // 9->达达优质
+  // 10->快服务
+  // 12->货拉拉
+  methods: {
+    explainDelivery() {
+      explainDelivery().then((res) => {
+        // console.log(res);
+      });
+    },
+    getDeliveryList() {
+      getDeliveryList().then((res) => {
+        this.deliveryList = res.data;
+      });
+    },
+    checkPhone(phone) {
+      if (!/^1\d{10}$/.test(phone)) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    // 获取验证码
+    getCode() {
+      if (!this.UUData.mobile.trim()) {
+        return this.$message({
+          message: "手机号码不能为空",
+          type: "error",
+        });
+      }
+      if (!this.checkPhone(this.UUData.mobile)) {
+        return this.$message({
+          message: "请输入正确的手机号",
+          type: "error",
+        });
+      }
+      let params = {
+        mobile: this.UUData.mobile,
+      };
+      bindUserApplyDelivery(params).then((res) => {
+        if (res.code == 200) {
+          this.showCode = true;
+          this.$message({
+            message: "验证码发送成功",
+            type: "success",
+          });
+          this.timer = setInterval(() => {
+            this.count--;
+            if (this.count <= 1) {
+              this.showCode = false;
+              this.count = 60;
+              clearInterval(this.timer);
+            }
+          }, 1000);
+        } else {
+          return this.$message({
+            message: res.msg,
+            type: "error",
+          });
+        }
+      });
+    },
+    goBind(v) {
+      // 显示U跑腿绑定弹框
+      if (v.type === 7) {
+        this.title = "UU跑腿绑定";
+        this.centerDialogVisible = true;
+        return;
+      }
+      let name = [1, 9];
+      let dadaName = name.includes(v.type) ? v.name : "";
+      let name2 = [1, 5];
+      let sfId = name2.includes(v.type) ? v.thirdShopId : "";
+      let params = {
+        deliveryId: v.deliveryId,
+        dadaName,
+        sfId,
+      };
+      bindDelivery(params).then((res) => {
+        if (res.code === 200) {
+          this.jumpUrl = res.data;
+        }
+      });
+    },
+    bindUU() {
+      if (!this.UUData.cityName.trim()) {
+        return this.$message({
+          message: "城市不能为空",
+          type: "error",
+        });
+      }
+      if (!this.UUData.mobile.trim()) {
+        return this.$message({
+          message: "手机号不能为空",
+          type: "error",
+        });
+      }
+      if (!this.UUData.validateCode.trim()) {
+        return this.$message({
+          message: "验证码不能为空",
+          type: "error",
+        });
+      }
+      bindUserSubmitDelivery(this.UUData).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            message: "绑定成功！",
+            type: "success",
+          });
+          this.getDeliveryList();
+        } else {
+          this.$message({
+            message: res.data,
+            type: "error",
+          });
+        }
+        this.centerDialogVisible = false;
+      });
+    },
+    releaseUU() {
+      if (!this.UUData.mobile.trim()) {
+        return this.$message({
+          message: "手机号不能为空",
+          type: "error",
+        });
+      }
+      cancelBindDelivery({ mobile: this.UUData.mobile }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "已成功解除绑定！",
+          });
+          this.getDeliveryList();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.data,
+          });
+        }
+        this.centerDialogVisible = true;
+      });
+    },
+    unBindDelivery(v) {
+      unBindDelivery({ id: v.id }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "已成功解绑！",
+          });
+          this.getDeliveryList();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.data,
+          });
+        }
+      });
+    },
+    release(v) {
+      // UU跑腿解除绑定
+      if (v.type === 7) {
+        this.title = "UU跑腿解绑";
+        this.centerDialogVisible = true;
+        this.UURelease(v);
+        return;
+      }
+      this.$confirm("此操作将解绑当前配送平台, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 爱跑腿解除绑定
+          if (v.type === 8) {
+            this.unBindDelivery(v);
+            return;
+          }
+          this.confirmRelease(v);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消解除绑定！",
+          });
+        });
+    },
+    // 确认解除绑定
+    confirmRelease(v) {
+      let params = {
+        id: v.id,
+        sfId: v.thirdShopId,
+      };
+      releaseDelivery(params).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "已成功解绑！",
+          });
+          this.getDeliveryList();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.data,
+          });
+        }
+      });
+    },
+    perfectData(v) {
+      this.centerDialogVisible2 = true;
+      this.DDData.deliveryId = v.deliveryId;
+      this.DDData.shopNo = v.shopNo;
+    },
+    updateShopNo() {
+      updateShopNo(this.DDData).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "成功完善资料！",
+          });
+          this.getDeliveryList();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.centerDialogVisible2 = false;
+      });
+    },
+    statusDelivery(v) {
+      statusDelivery({
+        id: v.id,
+        preferredDelivery: v.preferredDelivery,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "成功开启首选配送！",
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.getDeliveryList();
+      });
+    },
+    resetForm(formName) {
+      this.centerDialogVisible = false;
+      this.centerDialogVisible2 = false;
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </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;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    .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: 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;
+        .l-l {
+          width: 166px;
+          height: 50px;
+          border-radius: 25px;
+          overflow: hidden;
+          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: none;
         }
       }
     }
   }
+}
+.code {
+  display: flex;
+  align-items: center;
+  .get-code {
+    min-width: 120px;
+    box-sizing: border-box;
+    text-align: center;
+    padding: 0 6px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #175199;
+    cursor: pointer;
+  }
+}
+.tips {
+  color: red;
+  margin-bottom: 15px;
+}
 </style>

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,221 @@
 </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 {
+  getShopList,
+  getBindTakeOutList,
+  getTakeOutList,
+  bindTakeOut,
+  deleteTakeOut,
+  releaseTakeOut,
+  setTakeOut,
+} from "../../api/shop";
+export default {
+  data() {
+    return {
+      storeList: [],
+      takeOutList: [],
+      curIdx: -1,
+      jumpUrl: '',
+      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: "error",
+                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">
@@ -38,7 +38,7 @@
       return {
         activeName: 'shopList',
         tab_list: [
-          {name: '门店管理', index: 0},
+          {name: '门店列表', index: 0},
           {name: '绑定外卖平台', index: 1},
           {name: '绑定配送平台', index: 2},
           {name: '绑定打印机', index: 3}
@@ -66,7 +66,7 @@
             this.activeName = 'shopList';
           break;
         }
-      }
+      },
     },
     mounted() {
     }

src/views/home.vue

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