feat 虚拟门店

src/api/shop.js

@@ -150,4 +150,48 @@ export const getWaimaiList = (params) => {
 // 获取绑定配送平台列表
 export const getBindDeliveryShopList = (params) => {
   return get('app/deliveryBind/shopList', params)
+}
+// 新绑定配送平台
+export const bindDeliveryNew = (params) => {
+  return post('app/deliveryBind/bind', params)
+}
+// 新解绑配送平台
+export const unBindDeliveryNew = (params) => {
+  return post('app/deliveryBind/unbind', params)
+}
+// 新达达、达达优质完善资料
+export const updateShopNoNew = (params) => {
+  return postJson('app/deliveryBind/dada/updateShopNo', params)
+}
+// 新UU跑腿解除绑定
+export const cancelBindDeliveryNew = (params) => {
+  return post('app/deliveryBind/unBindUupt', params)
+}
+// 新UU跑腿获取短信验证码
+export const bindUserApplyDeliveryNew = (params) => {
+  return post('app/deliveryBind/getUuptVerifyCode', params)
+}
+// 新UU跑腿绑定提交审核
+export const bindUserSubmitDeliveryNew = (params) => {
+  return post('app/deliveryBind/bindUupt', params)
+}
+
+// 爱跑腿解除绑定
+export const unBindAptNew = (params) => {
+  return post('app/deliveryBind/unBindAipt', params)
+}
+
+// 绑定外卖平台的店铺列表
+export const getBindWaimaiShop = (params) => {
+  return post('app/waimai/findWaimaiListNew', params)
+}
+
+// 获取预绑定的门店
+export const getShopListNew = (params) => {
+  return post('app/waimai/preBind', params)
+}
+
+// 新绑定外卖平台
+export const bindTakeOutNew = (params) => {
+  return post('app/waimai/bindNew', params)
 }

src/components/shopCompoents/bindDelivery.vue

@@ -12,55 +12,32 @@
         <div class="shop" v-for="(v,i) in shopList" :key="i">
           <div class="top">
             <div class="name">{{v.shopName}}</div>
-            <img  @click="editShop(v)" v-if="[1,9].includes(type)&& v.bindStatus === 1" src="../../../static/image/icon-edit.png" alt="">
+            <img @click="editShop(v)" v-if="[1,9].includes(type)&& v.dadaBindType === 1" src="../../../static/image/icon-edit.png" alt="">
           </div>
           <div class="shop-content">
             <div class="info">
-              <div class="info-line">门店编号：{{type === 1 ? (v.dadaShopNo || '--') : type ===9 ? (v.dadaYzShopNo || '--') : type === 5 ? v.thirdShopId : '--'}}</div>
+              <div v-if="[1, 2, 5, 9, 13].includes(type)" class="info-line">门店编号：{{type === 1 ? (v.dadaShopNo || '--') : type ===9 ? (v.dadaYzShopNo || '--') : type === 5 ? v.thirdShopId : '--'}}</div>
+              <div v-else class="info-line">商户编号：{{ v.thirdShopId || '--' }}</div>
               <div class="balance">账户余额：{{typeof v.balance === 'number' ? '￥ ' + v.balance : '--'}}</div>
-              <div class="refuse" v-if="type === 5 && v.bindStatus === 3">审核失败：{{v.msg}}</div>
+              <div class="refuse" v-if="type === 5 && v.bindStatus === 3">审核失败：{{v.authMsg}}</div>
             </div>
-            <div v-if="type === 5 && [2,3].includes(v.bindStatus)" :class="['status',v.bindStatus === 2 ? '' : 'refuse']">{{v.bindStatus === 2 ? '审核中' : '审核失败'}}</div>
           </div>
-          <div class="but" @click="bind(v)" v-if="!v.bindStatus || (type === 5 && v.bindStatus === 3)">绑定</div>
-          <div class="but unbind" @click="unbind(v)" v-if="v.bindStatus === 1">解绑</div>
-        </div>
-      </div>
-    </div>
-    <!-- <div v-if="deliveryList.length" class="take-out-list">
-      <div class="item" v-for="(v, index) in deliveryList" :key="index">
-        <div class="item-top">
-          <div class="top-left">
-            <img :src="v.logo" alt="" class="top-left-img" />
-            <div class="name">{{ v.name }}</div>
+          <div v-if="type === 5 && [2,3].includes(v.bindStatus)" :class="['status',v.bindStatus === 2 ? '' : 'bt-refuse']">{{v.bindStatus === 2 ? '审核中' : '审核失败'}}</div>
+          <div class="but" v-if="[1,9].includes(type)">
+            <div @click="bind(v)" v-if="!v.dadaBindType" class="but-con">绑定</div>
           </div>
-          <div v-if="v.bindStatus === 1 && memberType === 2" class="top-right">
-            <span>开启后首选该账号平台为配送平台</span>
-            <el-switch @change="statusDelivery(v)" v-model="v.preferredDelivery" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          <div class="but" v-else-if="[5].includes(type)">
+            <div @click="bind(v)" v-if="v.bindStatus === 3 || !v.bindStatus" class="but-con">绑定</div>
           </div>
-        </div>
-        <div class="item-bottom">
-          <div class="left">
-            <div class="l-l">
-              <img :src="v.pcLogo" class="l-l-img" />
-            </div>
-            <div class="take-out-name">
-              <div v-if="v.code">商户编号：{{ v.code }}</div>
-              <div v-if="v.balance">账户余额：{{ v.balance }}</div>
-            </div>
+          <div class="but" v-else>
+            <div @click="bind(v)" v-if="!v.bindStatus" class="but-con">绑定</div>
           </div>
-          <div class="right" v-if="memberType === 2">
-            <span class="reason">{{
-              v.bindStatus === 2 ? "审核中" : v.bindStatus === 3 ? `已拒绝` : ""
-            }}</span>
-            <el-button v-if="[0, 3].includes(v.bindStatus)" @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].includes(v.bindStatus)" @click="release(v)" size="small">解&nbsp;&nbsp;&nbsp;绑</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 class="but" @click="release(v)" v-if="v.bindStatus === 1">
+            <div class="but-con unbind">解绑</div>
           </div>
         </div>
-        <div v-if="v.bindStatus === 3" class="respect">{{ v.authMsg }}</div>
       </div>
-    </div> -->
+    </div>
     <!-- 账号绑定 -->
     <el-dialog title="账号绑定" :visible.sync="centerDialogVisible3" width="40%" center>
       <el-form ref="form" :model="params" label-width="100px">
@@ -74,7 +51,7 @@
           <el-input v-model="params.mobile" placeholder="请输入手机号"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button  @click="againBind">重新绑定</el-button>
+          <el-button @click="goBind">重新绑定</el-button>
           <el-button type="primary" @click="confirm">确认</el-button>
         </el-form-item>
       </el-form>
@@ -112,16 +89,18 @@
         </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-dialog title="顺丰配送" :visible.sync="centerDialogVisible2" width="40%" center>
+      <el-form label-width="80px" class="demo-ruleForm">
+        <el-form-item label="顺丰ID号" prop="shopNo">
+          <el-input v-model="sfId" placeholder="请输入顺丰ID号"></el-input>
+        </el-form-item>
+        <el-form-item label="顺丰ID号" prop="shopNo">
+          <el-input v-model="sfId2" placeholder="请再次输入顺丰ID号"></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-button size="small" @click="centerDialogVisible2 = false">取 消</el-button>
+          <el-button size="small" type="primary" @click="confirmSF">确 定</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -132,15 +111,16 @@
 import {
   getDeliveryList,
   releaseDelivery,
-  bindDelivery,
-  bindUserApplyDelivery,
-  bindUserSubmitDelivery,
+  bindDeliveryNew,
+  bindUserApplyDeliveryNew,
+  bindUserSubmitDeliveryNew,
   explainDelivery,
-  updateShopNo,
+  updateShopNoNew,
   statusDelivery,
-  cancelBindDelivery,
-  unBindDelivery,
+  cancelBindDeliveryNew,
+  unBindDeliveryNew,
   getBindDeliveryShopList,
+  unBindAptNew,
 } from "../../api/shop";
 export default {
   data() {
@@ -160,10 +140,6 @@ export default {
       count: 60,
       showCode: false,
       timer: null, // 计时器
-      DDData: {
-        deliveryId: "",
-        shopNo: "",
-      },
       memberType: this.$store.state.userInfo.memberType,
       curIndex: 0,
       shopList: [],
@@ -176,6 +152,8 @@ export default {
         mobile: "",
       },
       centerDialogVisible3: false,
+      sfId: "",
+      sfId2: "",
     };
   },
   watch: {
@@ -200,7 +178,7 @@ export default {
             this.jumpUrl = null;
             this.fullscreenLoading = false;
             window.clearInterval(loop);
-            this.getDeliveryList(this.curIdx);
+            this.getDeliveryList();
           }
         }, 1000);
       }
@@ -208,13 +186,12 @@ export default {
   },
   computed: {
     type() {
-      return this.deliveryList[this.curIndex]?.deliveryType;
+      return this.deliveryList[this.curIndex] && this.deliveryList[this.curIndex].deliveryType;
     },
   },
   created() {
     if (this.memberType !== 1) {
       this.getDeliveryList();
-      this.explainDelivery();
     }
   },
   // 1->达达
@@ -229,28 +206,86 @@ export default {
   // 12->货拉拉
   // 13-> 美图跑腿
   methods: {
+    // 顺丰绑定确定
+    confirmSF() {
+      if (!this.sfId.trim()) {
+        return this.$message({
+          type: "warning",
+          message: "请输入顺丰ID号",
+        });
+      }
+      if (this.sfId.trim() !== this.sfId2.trim()) {
+        return this.$message({
+          type: "warning",
+          message: "请确定输入相同的顺丰ID号",
+        });
+      }
+      this.goBind();
+    },
+    confirmRelease(v) {
+      unBindDeliveryNew({ id: v.id || v.bindId }).then((res) => {
+        if (res.code === 200) {
+          this.$message({
+            type: "success",
+            message: "已成功解绑！",
+          });
+          this.getDeliveryList();
+          // this.getBindDeliveryShopList();
+        } else {
+          this.$message({
+            type: "error",
+            message: res.data,
+          });
+        }
+      });
+    },
     editShop(v) {
-				this.shopId = v.shopId
-				this.params = {
-					bindId: v.bindId,
-					deliveryId: this.deliveryId,
-					shopId: v.shopId,
-					shopNo: this.type === 1 ? v.dadaShopNo : this.type === 9 ? v.dadaYzShopNo : v.shopNo,
-					merchantNo: v.thirdShopId,
-					mobile: v.account
-				}
-				this.centerDialogVisible3 = true
-			},
-    confirm() {},
-    againBind() {},
+      this.shopId = v.shopId;
+      this.params = {
+        bindId: v.bindId,
+        deliveryId: this.deliveryList[this.curIndex].deliveryId,
+        shopId: v.shopId,
+        shopNo:
+          this.type === 1
+            ? v.dadaShopNo
+            : this.type === 9
+            ? v.dadaYzShopNo
+            : v.shopNo,
+        merchantNo: v.thirdShopId,
+        mobile: v.account,
+      };
+      this.centerDialogVisible3 = true;
+    },
+    // 进行绑定操作
     bind(v) {
-      console.log('点击绑定！', typeof this.type);
-				this.shopId = v.shopId
-				if (this.type === 5) {
-					this.shunFengShow = true
-					return
-				}
-				this.bindShop()
+      console.log("点击绑定！", typeof this.type);
+      this.shopId = v.shopId;
+      // 绑定顺丰同城
+      if (this.type === 5) {
+        this.sfId = ''
+        this.sfId2 = ''
+        this.centerDialogVisible2 = true;
+        return;
+      }
+      // 绑定UU跑腿
+      if (this.type === 7) {
+        this.title = "UU跑腿绑定";
+        this.UUData = {
+          cityName: "",
+          mobile: "",
+          validateCode: "",
+        };
+        this.centerDialogVisible = true;
+        return;
+      }
+      this.$confirm("即将进行绑定操作, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      }).then(() => {
+        this.goBind();
+      });
     },
     getBindDeliveryShopList() {
       this.loading = true;
@@ -269,21 +304,29 @@ export default {
     },
     changeTab(i) {
       this.curIndex = i;
+      if ([1, 2, 5, 9, 13].includes(this.type)) {
+        this.getBindDeliveryShopList();
+      } else {
+        let shop = this.deliveryList[i];
+        console.log('shop',shop);
+        this.shopList = [
+          {
+            id: shop.id,
+            shopName: shop.name,
+            thirdShopId: shop.thirdShopId,
+            balance: shop.balance,
+            bindStatus: shop.bindStatus,
+          },
+        ];
+      }
     },
-    explainDelivery() {
-      explainDelivery().then((res) => {
-        // console.log(res);
-      });
-    },
+  
     getDeliveryList() {
       this.loading = true;
       getDeliveryList().then((res) => {
         if (res.code === 200) {
           this.deliveryList = res.data;
-          let type = this.deliveryList[this.curIndex].deliveryType;
-          if ([1, 2, 5, 9, 13].includes(type)) {
-            this.getBindDeliveryShopList();
-          }
+          this.changeTab(this.curIndex);
         } else {
           this.$message({
             type: "error",
@@ -317,7 +360,7 @@ export default {
       let params = {
         mobile: this.UUData.mobile,
       };
-      bindUserApplyDelivery(params).then((res) => {
+      bindUserApplyDeliveryNew(params).then((res) => {
         if (res.code == 200) {
           this.showCode = true;
           this.$message({
@@ -340,84 +383,33 @@ export default {
         }
       });
     },
-    goBind(v) {
+    goBind() {
       let params = {
-        deliveryId: v.deliveryId,
+        deliveryId: this.deliveryList[this.curIndex].deliveryId,
+        sfId: this.sfId,
+        shopId: this.shopId,
       };
-      // 显示U跑腿绑定弹框
-      if (v.type === 7) {
-        this.title = "UU跑腿绑定";
-        this.UUData = {
-          cityName: "",
-          mobile: "",
-          validateCode: "",
-        };
-        this.centerDialogVisible = true;
-        return;
-      }
-      // 绑定顺丰同城
-      if (v.type === 5) {
-        this.$prompt("请输入顺丰同城ID", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          center: true,
-        })
-          .then(({ value }) => {
-            if (!value) {
-              return this.$message({
-                type: "error",
-                message: "请输入正确的顺丰同城ID",
-              });
-            }
-            params.sfId = value;
-            bindDelivery(params).then((res) => {
-              if (res.code === 200) {
-                this.getDeliveryList();
-              } else {
-                this.$message({
-                  type: "error",
-                  message: res.msg,
-                });
-              }
-            });
-          })
-          .catch(() => {
-            return;
-          });
-      } else {
-        this.$confirm("此操作将绑定当前配送平台, 是否继续?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-          center: true,
-        })
-          .then(() => {
-            bindDelivery(params).then((res) => {
-              if (res.code === 200) {
-                if (res.data) {
-                  this.jumpUrl = res.data;
-                } else {
-                  this.$message({
-                    type: "success",
-                    message: "已成功绑定！",
-                  });
-                  this.getDeliveryList();
-                }
-              } else {
-                this.$message({
-                  type: "error",
-                  message: res.msg,
-                });
-              }
-            });
-          })
-          .catch(() => {
+      bindDeliveryNew(params).then((res) => {
+        if (res.code === 200) {
+          if (res.data) {
+            this.jumpUrl = res.data;
+          } else {
             this.$message({
-              type: "info",
-              message: "已取消绑定！",
+              type: "success",
+              message: "已成功绑定！",
             });
+            this.getDeliveryList();
+            // this.getBindDeliveryShopList();
+          }
+          this.centerDialogVisible2 = false;
+          this.centerDialogVisible3 = false;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
           });
-      }
+        }
+      });
     },
     bindUU() {
       if (!this.UUData.cityName.trim()) {
@@ -438,7 +430,7 @@ export default {
           type: "error",
         });
       }
-      bindUserSubmitDelivery(this.UUData).then((res) => {
+      bindUserSubmitDeliveryNew(this.UUData).then((res) => {
         if (res.code === 200) {
           this.$message({
             message: "绑定成功！",
@@ -447,7 +439,7 @@ export default {
           this.getDeliveryList();
         } else {
           this.$message({
-            message: res.data,
+            message: res.msg,
             type: "error",
           });
         }
@@ -461,7 +453,7 @@ export default {
           type: "error",
         });
       }
-      cancelBindDelivery({ mobile: this.UUData.mobile }).then((res) => {
+      cancelBindDeliveryNew({ mobile: this.UUData.mobile }).then((res) => {
         if (res.code === 200) {
           this.$message({
             type: "success",
@@ -478,24 +470,24 @@ export default {
       });
     },
     releaseSF(v) {
-      this.$prompt("请输入顺丰同城ID", "提示", {
+      this.$prompt("", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
+        inputPlaceholder: '请输入绑定时顺丰同城ID号',
         center: true,
       }).then(({ value }) => {
         if (!value || v.thirdShopId !== value) {
           this.$message({
             type: "error",
-            message: "请输入已绑定的顺丰同城ID",
+            message: "请输入正确的顺丰同城ID号",
           });
         } else {
-          v.sfId = value;
           this.confirmRelease(v);
         }
       });
     },
-    unBindDelivery(v) {
-      unBindDelivery({ id: v.id }).then((res) => {
+    unBindAptNew(v) {
+      unBindAptNew({ bindId: v.id }).then((res) => {
         if (res.code === 200) {
           this.$message({
             type: "success",
@@ -512,105 +504,50 @@ export default {
     },
     release(v) {
       // UU跑腿解除绑定
-      if (v.type === 7) {
+      if (this.type === 7) {
         this.title = "UU跑腿解绑";
         this.UUData.mobile = "";
         this.centerDialogVisible = true;
         return;
       }
       // 顺丰同程解绑
-      if (v.type === 5) {
+      if (this.type === 5) {
         this.releaseSF(v);
         return;
       }
-      this.$confirm("此操作将解绑当前配送平台, 是否继续?", "提示", {
+      this.$confirm("即将进行解绑操作, 是否继续?", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning",
         center: true,
-      })
-        .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.sfId,
-      };
-      releaseDelivery(params).then((res) => {
-        if (res.code === 200) {
-          this.$message({
-            type: "success",
-            message: "已成功解绑！",
-          });
-          this.getDeliveryList();
-        } else {
-          this.$message({
-            type: "error",
-            message: res.data,
-          });
+      }).then(() => {
+        // 爱跑腿解除绑定
+        if (this.type === 8) {
+          this.unBindAptNew(v);
+          return;
         }
+        this.confirmRelease(v);
       });
     },
-    perfectData(v) {
-      this.centerDialogVisible2 = true;
-      this.DDData.deliveryId = v.deliveryId;
-      this.DDData.shopNo = v.shopNo;
-    },
-    updateShopNo() {
-      updateShopNo(this.DDData).then((res) => {
+    // 编辑确认
+    confirm() {
+      updateShopNoNew(this.params).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: "成功开启首选配送！",
-          });
+          // this.getDeliveryList();
+          this.getBindDeliveryShopList();
         } else {
           this.$message({
             type: "error",
             message: res.msg,
           });
         }
-        this.getDeliveryList();
+        this.centerDialogVisible3 = false;
       });
     },
-    resetForm(formName) {
-      this.centerDialogVisible = false;
-      this.centerDialogVisible2 = false;
-      this.$refs[formName].resetFields();
-    },
   },
 };
 </script>
@@ -668,6 +605,8 @@ export default {
 
     .active {
       background: #ffffff;
+      color: #fc7200;
+      font-weight: bold;
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
       border-radius: 40px 2px 4px 40px;
     }
@@ -697,15 +636,31 @@ export default {
     overflow-y: auto;
     .shop {
       position: relative;
-      width: 365px;
-      height: 200px;
+      width: 305px;
+      height: 170px;
       background: #ffffff;
       box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       margin: 0 20px 20px 0;
       overflow: hidden;
+      .status {
+        position: absolute;
+        top: 60px;
+        right: 20px;
+        padding: 0 5px;
+        font-size: 14px;
+        height: 20px;
+        line-height: 20px;
+        color: #007aff;
+        border: 1px solid #007aff;
+        transform: rotate(-20deg);
+      }
+      .bt-refuse {
+        color: #999999;
+        border: 1px solid #999999;
+      }
       .top {
-        padding: 20px;
+        padding: 10px;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -722,32 +677,26 @@ export default {
         }
       }
       .shop-content {
-        padding: 20px 0;
-        margin: 0 20px;
+        padding: 10px 0;
+        margin: 0 10px;
         display: flex;
         justify-content: space-between;
         border-top: 1px solid #ebebeb;
         .info {
+          width: 100%;
           font-size: 14px;
           font-weight: 500;
           line-height: 20px;
           color: #333333;
           .balance {
-            margin: 10px 0;
+            margin: 5px 0;
+          }
+          .refuse {
+            width: 100%;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
           }
-        }
-        .status {
-          padding: 0 5px;
-          font-size: 14px;
-          height: 20px;
-          line-height: 20px;
-          color: #007aff;
-          border: 1px solid #007aff;
-          transform: rotate(-20deg);
-        }
-        .refuse {
-          color: #999999;
-          border: 1px solid #999999;
         }
       }
       .but {
@@ -755,15 +704,19 @@ export default {
         left: 0;
         bottom: 0;
         width: 100%;
-        height: 30px;
-        line-height: 30px;
-        text-align: center;
-        color: #ffffff;
-        background: #fc7200;
-        cursor: pointer;
-      }
-      .unbind {
-        background: rgba(252, 114, 0, 0.6);
+
+        .but-con {
+          width: 100%;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          color: #ffffff;
+          background: #fc7200;
+          cursor: pointer;
+        }
+        .unbind {
+          background: rgba(252, 114, 0, 0.6);
+        }
       }
     }
   }

src/components/shopCompoents/bindTakeOut.vue

@@ -1,49 +1,61 @@
 <template>
-  <div class="take-out" v-loading="loading" element-loading-text="数据加载中">
-    <div class="store-list">
-      <div class="store-list-item" @click="curIdx = index" :class=" index === curIdx ? 'active' : '' " v-for="(item, index) in shopList" :key="index">{{ item.name }}</div>
-    </div>
-    <div v-if="takeOutList.length" class="take-out-list">
-      <div class="item" v-for="(v,index) in takeOutList" :key="index">
-        <div class="item-top">
-          <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 style="height: 100%;" class="take-out" v-loading="loading" element-loading-text="数据加载中">
+    <div class="content">
+      <div class="left">
+        <div :class="['list',curIndex === i ? 'active' : '']" v-for="(v,i) in waimaiList" :key="i" @click="changeTab(i)">
+          <img :src="v.logo" alt="" srcset="">
+          <div class="name">{{v.name}}</div>
         </div>
-        <div class="item-bottom">
-          <div class="left">
-            <div class="l-l">
-              <img :src="v.pcLogo" class="l-l-img" />
-            </div>
-            <div class="take-out-name" v-if="v.bindStatus">
-              <div>店铺名称：{{v.shopName}}</div>
-              <div>店铺ID：{{v.thirdShopId}}</div>
-              <div>配送门店：{{v.thirdShopName}}</div>
+      </div>
+      <div class="right">
+        <div class="shop" v-for="(v,i) in bindShopList" :key="i">
+          <div class="top">
+            <div class="name">{{v.shopName}}</div>
+            <img @click="editShop(v)" src="../../../static/image/icon-edit.png" alt="">
+          </div>
+          <div class="shop-content">
+            <div class="info">
+              <div class="info-line">店铺 ID：{{ v.thirdShopId }}</div>
+              <div class="balance">类 型：{{ v.productName }}</div>
+              <div class="refuse">关联门店：{{ v.thirdShopName }}</div>
             </div>
           </div>
-          <div class="right">
-            <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 class="but">
+            <div @click="bind(v)" v-if="!v.bindStatus" class="but-con">绑定</div>
           </div>
+          <div class="but" @click="release(v)" v-if="v.bindStatus === 1">
+            <div class="but-con unbind">解绑</div>
+          </div>
+        </div>
+        <div class="shop-bind" @click="goBind">
+          <img src="../../../static/image/icon-add.png" alt="" srcset="">
+          <div class="name">绑定{{waimaiList[curIndex] && waimaiList[curIndex].name}}</div>
         </div>
       </div>
     </div>
-    <el-empty v-if="!takeOutList.length && !loading" description="暂无绑定外卖平台！"></el-empty>
-    <el-dialog title="绑定美团外卖" :visible.sync="centerDialogVisible" width="520px" center>
-      <div class="bind">
-        <div v-if="!showMT" @click="showMT = true" class="more">更多授权方式</div>
-        <el-radio-group class="choose" fill="#FC7200" v-model="mtBindType">
-          <el-radio :label="1">直接绑定</el-radio>
-          <span class="tip tip1">绑定后美团外卖订单将自动推送给本台</span>
-          <el-radio v-if="showMT" :label="2">无冲突模式绑定</el-radio>
-          <span v-if="showMT" class="tip">已绑定其他第三方平台，请使用无冲突模式</span>
-        </el-radio-group>
-      </div>
+    <el-dialog :title="`绑定美${waimaiList[curIndex] && waimaiList[curIndex].name}`" :visible.sync="centerDialogVisible" @close="close" width="520px" center>
+      <el-form label-width="80px">
+        <el-form-item label="店铺">
+          <el-select v-model="params.shopId" placeholder="请选择店铺">
+            <el-option v-for="(v,i) in shopList" :key="i" :label="v.name" :value="v.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="平台ID" v-if="type === 3">
+          <el-input v-model="params.code"></el-input>
+        </el-form-item>
+        <el-form-item label="授权方式" v-if="type === 1">
+          <div class="bind">
+            <el-radio-group class="choose" fill="#FC7200" v-model="params.mtBindType">
+              <el-radio :label="1">直接绑定</el-radio>
+              <span class="tip tip1">绑定后美团外卖订单将自动推送给本台</span>
+              <el-radio v-if="showMT" :label="2">无冲突模式绑定</el-radio>
+              <span v-if="showMT" class="tip">已绑定其他第三方平台，请使用无冲突模式</span>
+            </el-radio-group>
+            <div v-if="!showMT" @click="showMT = true" class="more">更多授权方式</div>
+          </div>
+        </el-form-item>
+      </el-form>
 
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="centerDialogVisible = false">取 消</el-button>
@@ -54,41 +66,54 @@
 </template>
 
 <script>
+let newWindowWidth = 1100,
+  newWindowHeight = 600,
+  left = (window.screen.width - newWindowWidth) / 2,
+  top = (window.screen.height - newWindowHeight) / 2 - 100;
 import {
-  getShopList,
-  getBindTakeOutList,
+  getShopListNew,
   getTakeOutList,
-  bindTakeOut,
+  bindTakeOutNew,
   deleteTakeOut,
   releaseTakeOut,
   setTakeOut,
+  getBindWaimaiShop,
 } from "../../api/shop";
 export default {
   data() {
     return {
+      curIndex: 0,
+      waimaiList: [],
+      bindShopList: [],
       shopList: [],
       takeOutList: [],
-      curIdx: -1,
       jumpUrl: "",
       fullscreenLoading: false,
       loading: false,
       centerDialogVisible: false,
       showMT: false,
-      mtBindType: 1,
       waimaiId: "",
+      merchantId: "",
+      params: {
+        shopId: "",
+        waimaiId: "",
+        mtBindType: 1,
+        code: "",
+      },
     };
   },
   watch: {
-    curIdx(newVal, oldVal) {
-      this.getBindTakeOutList(newVal);
+    "$store.state.userInfo": {
+      handler(newVal, oldVal) {
+        this.merchantId = newVal.merchantId;
+      },
+      deep: true,
+      immediate: true,
     },
     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(() => {
@@ -97,25 +122,47 @@ export default {
             this.jumpUrl = null;
             this.fullscreenLoading = false;
             window.clearInterval(loop);
-            this.getBindTakeOutList(this.curIdx);
+            this.close();
+            this.getBindWaimaiShop();
           }
         }, 1000);
       }
     },
   },
+  computed: {
+    // 1 美团 2 饿了吗 3 饿百零售 5 美团闪购
+    type() {
+      return (
+        this.waimaiList[this.curIndex] && this.waimaiList[this.curIndex].type
+      );
+    },
+  },
   created() {
     let memberType = this.$store.state.userInfo.memberType;
     if (memberType !== 1) {
-      this.getShopList();
+      this.getTakeOutList();
     }
   },
   methods: {
-    getShopList() {
+    close() {
+      console.log("进来关闭");
+      this.showMT = false;
+      this.centerDialogVisible = false;
+      this.params = {
+        shopId: "",
+        waimaiId: "",
+        mtBindType: 1,
+        code: "",
+      };
+    },
+    getBindWaimaiShop() {
       this.loading = true;
-      getShopList().then((res) => {
+      getBindWaimaiShop({
+        waimaiId: this.waimaiId,
+        merchantId: this.merchantId,
+      }).then((res) => {
         if (res.code === 200) {
-          this.shopList = res.data;
-          this.curIdx = 0;
+          this.bindShopList = res.data;
         } else {
           this.$message({
             type: "error",
@@ -125,40 +172,58 @@ export default {
         this.loading = false;
       });
     },
-    getBindTakeOutList(index) {
-      getBindTakeOutList({ shopId: this.shopList[index].id }).then((res) => {
+    changeTab(i) {
+      this.curIndex = i;
+      this.waimaiId = this.waimaiList[i].id;
+      this.getBindWaimaiShop();
+    },
+    getTakeOutList() {
+      this.loading = true;
+      getTakeOutList().then((res) => {
         if (res.code === 200) {
-          this.takeOutList = res.data;
+          this.waimaiList = res.data;
+          this.changeTab(this.curIndex);
         } else {
           this.$message({
             type: "error",
             message: res.msg,
           });
         }
+        this.loading = false;
       });
     },
-    goBind(v) {
-      this.waimaiId = v.waimaiId;
-      if (v.waimaiId === 6) {
-        this.showMT = false;
-        this.mtBindType = 1;
-        this.centerDialogVisible = true;
-      } else {
-        this.bind();
-      }
+    getShopListNew() {
+      this.loading = true;
+      getShopListNew({
+        waimaiId: this.waimaiId,
+        merchantId: this.merchantId,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.params.code = res.data.shopCode;
+          this.shopList = res.data.shopList;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.loading = false;
+      });
+    },
+
+    async goBind() {
+      await this.getShopListNew();
+      this.centerDialogVisible = true;
     },
     bindMT() {
-      this.centerDialogVisible = false;
+      // this.centerDialogVisible = false;
       this.bind();
     },
     bind() {
-      let params = {
-        shopId: this.shopList[this.curIdx].id,
-        waimaiId: this.waimaiId,
-        isNew: 1,
-        mtBindType: this.mtBindType,
-      };
-      bindTakeOut(params).then((res) => {
+      this.params.waimaiId = this.waimaiId;
+      console.log("绑定", this.params);
+
+      bindTakeOutNew(this.params).then((res) => {
         if (res.code === 200) {
           this.jumpUrl = res.data;
         } else {
@@ -186,7 +251,7 @@ export default {
                   type: "success",
                   message: "成功解绑!",
                 });
-                this.getBindTakeOutList(this.curIdx);
+                this.getBindWaimaiShop();
               }
             } else {
               this.$message({
@@ -249,7 +314,154 @@ export default {
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
   }
+  .content {
+    display: flex;
+    height: 100%;
+    .left {
+      display: flex;
+      flex-direction: column;
+      background: #fefefe;
+      height: 100%;
+      padding: 0 10px;
 
+      .active {
+        background: #ffffff;
+        color: #fc7200;
+        font-weight: bold;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.12);
+        border-radius: 40px 2px 4px 40px;
+      }
+      .list {
+        display: flex;
+        align-items: center;
+        margin: 10px;
+        cursor: pointer;
+        padding: 0 10px 0 10px;
+        img {
+          width: 30px;
+          height: 30px;
+          margin-right: 10px;
+        }
+        .name {
+          font-size: 16px;
+          white-space: nowrap;
+        }
+      }
+    }
+    .right {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 10px;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      .shop-bind {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 305px;
+        height: 170px;
+        background: #ffffff;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        margin: 0 20px 20px 0;
+        color: #cccccc;
+        font-size: 16px;
+        cursor: pointer;
+        img {
+          height: 60px;
+          width: 60px;
+          margin-bottom: 5px;
+        }
+      }
+      .shop {
+        position: relative;
+        width: 305px;
+        height: 170px;
+        background: #ffffff;
+        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 8px;
+        margin: 0 20px 20px 0;
+        overflow: hidden;
+        .status {
+          position: absolute;
+          top: 60px;
+          right: 20px;
+          padding: 0 5px;
+          font-size: 14px;
+          height: 20px;
+          line-height: 20px;
+          color: #007aff;
+          border: 1px solid #007aff;
+          transform: rotate(-20deg);
+        }
+        .bt-refuse {
+          color: #999999;
+          border: 1px solid #999999;
+        }
+        .top {
+          padding: 10px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .name {
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 25px;
+            color: #333333;
+          }
+          img {
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+          }
+        }
+        .shop-content {
+          padding: 10px 0;
+          margin: 0 10px;
+          display: flex;
+          justify-content: space-between;
+          border-top: 1px solid #ebebeb;
+          .info {
+            width: 100%;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+            color: #333333;
+            .balance {
+              margin: 5px 0;
+            }
+            .refuse {
+              width: 100%;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+        }
+        .but {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+
+          .but-con {
+            width: 100%;
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            color: #ffffff;
+            background: #fc7200;
+            cursor: pointer;
+          }
+          .unbind {
+            background: rgba(252, 114, 0, 0.6);
+          }
+        }
+      }
+    }
+  }
   .take-out-list {
     .item {
       background-color: #fff;
@@ -329,9 +541,9 @@ export default {
   }
   .bind {
     display: flex;
-    flex-direction: column;
+    margin-top: 13px;
+    justify-content: space-between;
     .more {
-      text-align: right;
       color: #175199;
       cursor: pointer;
       font-size: 12px;