liebao-web/src/components/shopCompoents/bindDelivery.vue

<template>
  <div v-loading="loading" element-loading-text="数据加载中">
    <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>
          <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>
        </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.shopNo">商户编号：{{ v.code }}</div>
              <div v-if="v.balance">账户余额：{{ v.balance }}</div>
            </div>
          </div>
          <!-- 1->绑定，0：未绑定，2-> 审核中，3->拒绝，4->待完善资料 -->
          <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>
        </div>
        <div v-if="v.bindStatus === 3" class="respect">{{ v.authMsg }}</div>
      </div>
    </div>
    <el-empty v-if="!deliveryList.length && !loading" description="暂无绑定配送平台！"></el-empty>
    <!-- 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">
          <el-input v-model="UUData.cityName" placeholder="请输入当前城市名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="UUData.mobile" placeholder="请输入用户手机号"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="validateCode">
          <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">
          <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>
import {
  getDeliveryList,
  releaseDelivery,
  bindDelivery,
  bindUserApplyDelivery,
  bindUserSubmitDelivery,
  explainDelivery,
  updateShopNo,
  statusDelivery,
  cancelBindDelivery,
} from "../../api/shop";
export default {
  data() {
    return {
      deliveryList: [],
      jumpUrl: "",
      fullscreenLoading: false,
      centerDialogVisible: false,
      centerDialogVisible2: false,
      loading: false,
      UUData: {
        cityName: "",
        mobile: "",
        validateCode: "",
      },
      title: "UU跑腿绑定",
      count: 60,
      showCode: false,
      timer: null, // 计时器
      DDData: {
        deliveryId: "",
        shopNo: "",
      },
      memberType: this.$store.state.userInfo.memberType,
    };
  },
  watch: {
    "$store.state.userInfo": {
      handler(newVal, oldVal) {
        this.memberType = newVal.memberType;
      },
      deep: 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(() => {
          console.log("windowOpen.closed", windowOpen.closed);
          if (windowOpen.closed) {
            this.jumpUrl = null;
            this.fullscreenLoading = false;
            window.clearInterval(loop);
            this.getDeliveryList(this.curIdx);
          }
        }, 1000);
      }
    },
  },
  created() {
    if (this.memberType !== 1) {
      this.getDeliveryList();
      this.explainDelivery();
    }
  },
  // 1->达达
  // 2->蜂鸟即配
  // 3->美团飞速达
  // 4->闪送
  // 5->顺丰同城
  // 7->UU跑腿
  // 8->爱跑腿
  // 9->达达优质
  // 10->快服务
  // 12->货拉拉
  // 13-> 美图跑腿
  methods: {
    explainDelivery() {
      explainDelivery().then((res) => {
        // console.log(res);
      });
    },
    getDeliveryList() {
      this.loading = true;
      getDeliveryList().then((res) => {
        if (res.code === 200) {
          this.deliveryList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
        this.loading = false;
      });
    },
    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) {
      let params = {
        deliveryId: v.deliveryId,
      };
      // 显示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(() => {
            this.$message({
              type: "info",
              message: "已取消绑定！",
            });
          });
      }
    },
    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.centerDialogVisible = false;
          this.getDeliveryList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    releaseSF(v) {
      this.$prompt("请输入顺丰同城ID", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
      }).then(({ value }) => {
        if (!value || v.thirdShopId !== value) {
          this.$message({
            type: "error",
            message: "请输入已绑定的顺丰同城ID",
          });
        } else {
          v.sfId = value;
          this.confirmRelease(v);
        }
      });
    },
    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.UUData.mobile = "";
        this.centerDialogVisible = true;
        return;
      }
      // 顺丰同程解绑
      if (v.type === 5) {
        this.releaseSF(v);
        return;
      }
      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,
          });
        }
      });
    },
    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::-webkit-scrollbar {
  height: 6px;
}
.store-list::-webkit-scrollbar-track {
  background-color: #eee;
  /*border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;*/
}
.store-list::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

.take-out-list {
  .item {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
    padding-bottom: 10px;
    .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;
        align-items: center;
        .top-left-img {
          width: 30px;
          height: 30px;
          margin-right: 10px;
        }
        .name {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffa608;
        }
      }
      .top-right {
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #b1b1b1;
          margin-right: 12px;
        }
      }
    }
    .item-bottom {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 25px 18px 0;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .l-l {
          width: 166px;
          height: 50px;
          border-radius: 25px;
          overflow: hidden;
          font-size: 0;
          .l-l-img {
            width: 100%;
            height: 100%;
          }
        }
        .take-out-name {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          margin-left: 30px;
        }
      }
      .right {
        .reason {
          margin-right: 10px;
          color: red;
        }
        .right-btn {
          background-color: #fc7200;
          border: none;
        }
      }
    }
    .respect {
      margin: 20px 20px 0;
      color: red;
    }
  }
}
.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>