add 外卖设置-配送设置

src/components/waimai.vue

@@ -140,9 +140,9 @@ export default {
   .content {
     width: 100%;
     margin-top: 10px;
-    padding: 20px;
+    // padding: 20px;
     box-sizing: border-box;
-    background: #fff;
+    background: #f5f5f5;
   }
 }
 </style>

src/components/waimaiComponents/deliverySetting.vue

@@ -1,21 +1,255 @@
 <template>
-  <div>deliverySetting</div>
+  <div class="delivery-setting">
+    <div class="model">
+      <div class="title">自动发单设置</div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in list" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+              <div @click="setTime(v,i)" class="set">{{v.setContent}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <div v-if="!i" :class="['time', v.value ? '' : 'time1']">顾客下单{{v.time}}分钟后</div>
+            <div v-else :class="['time', v.value ? '' : 'time1']">期望送达前{{v.time}}分钟</div>
+            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model">
+      <div class="title">同步设置</div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in list2" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model">
+      <div class="title">运力设置<span class="tips">(推荐的运力在聚合发单时会置顶展示，屏蔽的运力在发单时将不进行计价）</span></div>
+      <div class="list">
+        <div class="item" v-for="(v,i) in deliveryList" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <div class="name">{{v.name}}</div>
+            </div>
+            <div class="left-bot">{{v.tips}}</div>
+          </div>
+          <div class="right">
+            <div class="con con1" @click="changeDelivery(v,3)" v-if="billDeliveryIds.includes(String(v.deliveryId))">取消推荐</div>
+            <div class="con" @click="changeDelivery(v,2)" v-if="billDeliveryIds.includes(String(v.deliveryId)) || !shieldDeliveryIds.includes(String(v.deliveryId))">屏蔽</div>
+            <div class="con con1" @click="changeDelivery(v,3)" v-if="shieldDeliveryIds.includes(String(v.deliveryId))">取消屏蔽</div>
+            <div class="con" @click="changeDelivery(v,1)" v-if="shieldDeliveryIds.includes(String(v.deliveryId)) || !billDeliveryIds.includes(String(v.deliveryId))">推荐</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog :title="!curIndex ? '即时单自动发单时间设置' : '预定单自动发单时间设置'" @close="centerDialogVisible=false" :visible.sync="centerDialogVisible" width="400px" center>
+      <el-form label-width="120px">
+        <el-form-item :label="!curIndex ? '顾客下单' : '期望送达前'">
+          <el-input size="small" class="auto-time" v-model="time" clearable>
+            <template slot="append">分钟{{curIndex ? '' : '后'}}</template>
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="centerDialogVisible=false">取 消</el-button>
+        <el-button size='medium' type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
+import {
+  getDeliveryFloorList,
+  getConfig,
+  updateConfig,
+} from "../../api/setting.js";
 export default {
   name: "deliverySetting",
   data() {
-    return {};
+    return {
+      list: [
+        {
+          name: "自动发单",
+          setContent: "设置时长",
+          value: 1,
+          field: "openAutodelivery",
+          tips: "无冲突绑定模式，不支持自动发单",
+          time: 0,
+        },
+        {
+          name: "预约单自动发单",
+          setContent: "设置时长",
+          value: 1,
+          field: "openBookingAutodelivery",
+          tips: "设置的时长为预约单期望送达前多长时间自动呼叫配送",
+          time: 0,
+        },
+      ],
+      list2: [
+        {
+          name: "同步订单商品给骑手",
+          value: 1,
+          field: "syncGoodsDetailToDelivery",
+          tips: "关闭后骑手将看不到商品详情",
+        },
+        {
+          name: "同步打印客户联商品明细",
+          value: 1,
+          field: "customerLinkPrintGoodsDetail",
+          tips: "关闭后打印的客户联小票将看不到商品明细",
+        },
+        {
+          name: "同步打印客户联商品价格",
+          value: 1,
+          field: "customerLinkPrintGoodsPrice",
+          tips: "关闭后打印的客户联小票将看不到商品价格",
+        },
+      ],
+      billDeliveryIds: [], // 推荐运力
+      shieldDeliveryIds: [], // 屏蔽运力
+      deliveryList: [],
+      centerDialogVisible: false,
+      curIndex: 0,
+      time: 0,
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    changeDelivery(v, type) {
+      let id = v.deliveryId;
+      // 推荐该运力
+      if (type === 1) {
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.billDeliveryIds.push(String(id));
+        this.billDeliveryIds = [...new Set(this.billDeliveryIds)];
+      }
+      // 屏蔽该运力
+      if (type === 2) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.shieldDeliveryIds.push(String(id));
+        this.shieldDeliveryIds = [...new Set(this.shieldDeliveryIds)];
+      }
+      // 恢复为普通运力
+      if (type === 3) {
+        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
+          return v !== String(id);
+        });
+      }
+      let data = {
+        billDeliveryIds: String(this.billDeliveryIds),
+        shieldDeliveryIds: String(this.shieldDeliveryIds),
+      };
+      this.updateConfig(data);
+    },
+    confirm() {
+      let data = {};
+      if (!this.curIndex) {
+        data = { autodeliveryOrderTime: this.time * 60 };
+      } else {
+        data = { bookingAutodeliveryOrderTime: this.time * 60 };
+      }
+      this.updateConfig(data);
+    },
+    setTime(v, i) {
+      if (!v.value) {
+        return this.$message({
+          message: "请开启后再设置时间！",
+          type: "warning",
+        });
+      }
+      this.curIndex = i;
+      this.time = v.time;
+      this.centerDialogVisible = true;
+    },
+    change(e) {
+      let data = { [e.field]: e.value };
+      this.updateConfig(data);
+    },
+    getDelivery() {
+      getDeliveryFloorList().then((res) => {
+        console.log("返回的运力：", res);
+        if (res.code === 200) {
+          // 电脑端暂时不支持货拉拉
+          this.deliveryList = res.data.filter((v) => {
+            return v.type !== 12;
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    getConfig() {
+      getConfig().then((res) => {
+        if (res.code === 200) {
+          this.billDeliveryIds = res.data.billDeliveryIds
+            ? res.data.billDeliveryIds.split(",")
+            : [];
+          this.shieldDeliveryIds = res.data.shieldDeliveryIds
+            ? res.data.shieldDeliveryIds.split(",")
+            : [];
+          this.list[0].time = res.data.autodeliveryOrderTime / 60;
+          this.list[1].time = res.data.bookingAutodeliveryOrderTime / 60;
+          this.list = this.list.map((v) => {
+            v.value = res.data[v.field];
+            return v;
+          });
+          this.list2 = this.list2.map((v) => {
+            v.value = res.data[v.field];
+            return v;
+          });
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.centerDialogVisible = false;
+      });
+    },
+    updateConfig(data) {
+      updateConfig(data).then((res) => {
+        if (res.code !== 200) {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+        this.getConfig();
+      });
+    },
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.getDelivery();
+    this.getConfig();
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 生命周期 - 创建之前
@@ -36,4 +270,92 @@ export default {
 </script>
 
 <style lang="scss" scoped  type="text/css">
+.model {
+  .title {
+    position: relative;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 22px;
+    color: #333333;
+    padding-left: 10px;
+    margin-top: 24px;
+    .tips {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: #999999;
+    }
+  }
+  .title::before {
+    width: 3px;
+    height: 16px;
+    background: rgba(252, 114, 0, 0.39);
+    border-radius: 2px;
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 0;
+  }
+  .list {
+    .item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #ffffff;
+      margin-top: 10px;
+      padding: 16px 20px;
+      .left {
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+        color: #000000;
+        .left-top {
+          display: flex;
+          align-items: center;
+          .set {
+            font-weight: 400;
+            color: #fc7200;
+            margin-left: 10px;
+            cursor: pointer;
+          }
+        }
+        .left-bot {
+          margin-top: 2px;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 17px;
+          color: #999999;
+        }
+      }
+      .right {
+        display: flex;
+        align-items: center;
+        .time {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          line-height: 17px;
+          color: #333333;
+          margin-right: 20px;
+        }
+        .time1 {
+          color: #999999;
+        }
+        .con {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+          color: #fc7200;
+          padding-left: 20px;
+          cursor: pointer;
+        }
+        .con1 {
+          color: #999999;
+        }
+      }
+    }
+  }
+}
 </style>