feat 外卖设置-语音设置

src/components/settingComponents/deliverySetting.vue

@@ -1,206 +0,0 @@
-<template>
-  <div class="delivery-content">
-    <div>
-      <!-- <el-button type="primary">保存操作</el-button> -->
-    </div>
-    <div class="recommend">
-      <div class="title">
-        <!-- <el-button type="primary" @click.stop="toPay">发起支付</el-button> -->
-        <span>推荐/屏蔽运力</span>
-        <span>用户选择非聚合配送发单时，优先选中的运力置顶显示，提高您的下单效率</span>
-      </div>
-      <div class="delivery-list">
-        <div @click="changeStatus(v.deliveryId)" class="item" v-for="(v,i) in list" :key="i">
-          <img :src="v.pcLogo" class="icon" />
-          <div v-if="shieldDeliveryIds.includes(String(v.deliveryId))" class="mask mantle">
-            {{v.name}}已屏蔽
-          </div>
-          <div v-if="billDeliveryIds.includes(String(v.deliveryId))" class="mask recommend-delivery">
-            {{v.name}}已推荐
-          </div>
-        </div>
-      </div>
-    </div>
-    <el-dialog title="请选择对当前运力的操作！" :visible.sync="centerDialogVisible" width="600px" center>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="success" @click="changeDelivery(1)">推荐运力</el-button>
-        <el-button type="danger" @click="changeDelivery(2)">屏蔽运力</el-button>
-        <el-button type="primary" @click="changeDelivery(3)">重置运力</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  getDeliveryFloorList,
-  getConfig,
-  updateConfig,
-} from "../../api/setting.js";
-export default {
-  data() {
-    return {
-      form: "",
-      list: [],
-      billDeliveryIds: [], // 推荐运力ID
-      shieldDeliveryIds: [], // 屏蔽运力ID
-      centerDialogVisible: false,
-    };
-  },
-  created() {
-    this.getDeliveryFloorList();
-    this.getConfig();
-  },
-  mounted() {},
-  methods: {
-    changeStatus(id) {
-      this.id = id;
-      this.centerDialogVisible = true;
-    },
-    changeDelivery(type) {
-      console.log(2222);
-      // 推荐该运力
-      if (type === 1) {
-        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
-          return v !== String(this.id);
-        });
-        this.billDeliveryIds.push(String(this.id));
-        this.billDeliveryIds = [...new Set(this.billDeliveryIds)];
-      }
-      // 屏蔽该运力
-      if (type === 2) {
-        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
-          return v !== String(this.id);
-        });
-        this.shieldDeliveryIds.push(String(this.id));
-        this.shieldDeliveryIds = [...new Set(this.shieldDeliveryIds)];
-      }
-      // 恢复为普通运力
-      if (type === 3) {
-        this.billDeliveryIds = this.billDeliveryIds.filter((v) => {
-          return v !== String(this.id);
-        });
-        this.shieldDeliveryIds = this.shieldDeliveryIds.filter((v) => {
-          return v !== String(this.id);
-        });
-      }
-      this.updateConfig();
-    },
-    getDeliveryFloorList() {
-      getDeliveryFloorList().then((res) => {
-        if (res.code === 200) {
-          // 电脑端暂时不支持货拉拉
-          this.list = 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(",")
-            : [];
-          let a = new Set(this.shieldDeliveryIds);
-          let b = new Set(this.billDeliveryIds);
-          let difference = new Set([...a].filter((x) => !b.has(x)));
-          this.shieldDeliveryIds = [...difference];
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-        this.centerDialogVisible = false;
-      });
-    },
-    updateConfig() {
-      let billDeliveryIds = this.billDeliveryIds.toString();
-      let shieldDeliveryIds = this.shieldDeliveryIds.toString();
-      updateConfig({ billDeliveryIds, shieldDeliveryIds }).then((res) => {
-        if (res.code === 200) {
-          this.$message({
-            type: "success",
-            message: "修改成功！",
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-        this.getConfig();
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.delivery-content {
-  .recommend {
-    background-color: #fff;
-    margin-top: 10px;
-    .title {
-      font-size: 16px;
-      font-family: PingFang SC;
-      font-weight: 600;
-      color: #333333;
-      height: 55px;
-      line-height: 55px;
-      box-sizing: border-box;
-      padding: 0 18px;
-      border-bottom: 1px solid #eee;
-      span:nth-child(2) {
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #b1b1b1;
-      }
-    }
-    .delivery-list {
-      display: flex;
-      flex-wrap: wrap;
-      padding: 30px 18px 0;
-      .item {
-        position: relative;
-        cursor: pointer;
-        margin: 0 30px 30px 0;
-        .mask {
-          position: absolute;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          top: 0;
-          left: 0;
-          width: 129px;
-          height: 40px;
-          background: #999;
-          font-size: 14px;
-          border-radius: 25px;
-          opacity: 0.8;
-        }
-        .mantle {
-          color: #fff;
-        }
-        .recommend-delivery {
-          color: red;
-        }
-        .icon {
-          width: 129px;
-          height: 40px;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/settingComponents/voiceSetting.vue

@@ -1,437 +0,0 @@
-<template>
-  <div class="voice">
-    <template v-if="memberType !== 1">
-      <div class="top-set">
-        <div class="t-left">
-          自动接单
-        </div>
-        <div class="t-right">
-          <el-switch @change="updateConfig" v-model="openAutoorder" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="top-set">
-        <div class="t-left">
-          自动打印
-          <span style="color: #999;">(开启后将为您自动打印小票)</span>
-        </div>
-        <div class="t-right">
-          <el-switch @change="updateConfig" v-model="openPrintSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="voice-content">
-        <div class="top-set" style="border-bottom: 1px solid #eee;">
-          <div class="t-left">
-            自动发单设置
-          </div>
-        </div>
-        <div class="voice-list">
-          <el-row>
-            <el-col :span="24" v-for="(v,i) in list1" :key="i">
-              <div class="item">
-                <div class="left">
-                  <span class="name">{{v.name}}</span>
-                  <span class="time" @click="openSetTime(v,i)">[时长设置]</span>
-                </div>
-                <div class="right">
-                  <span @click="openSetTime(v)" v-if="!i">顾客下单{{autodeliveryOrderTime}}分钟后</span>
-                  <span @click="openSetTime(v)" v-if="i===1">期望送达前{{bookingAutodeliveryOrderTime}}分钟</span>
-                  <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-                </div>
-              </div>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-      <div class="voice-content">
-        <div class="top-set" style="border-bottom: 1px solid #eee;">
-          <div class="t-left">
-            同步设置
-          </div>
-        </div>
-        <div class="voice-list">
-          <el-row>
-            <el-col :span="24" v-for="(v,i) in list" :key="i">
-              <div class="item">
-                <div class="left">
-                  <span class="name">{{v.name}}</span>
-                </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>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    </template>
-    <div class="voice-content">
-      <div class="top-set" style="border-bottom: 1px solid #eee;">
-        <div class="t-left">
-          语音播报
-        </div>
-        <div class="t-right">
-          <span>一键开启</span>
-          <el-switch @change="changeMessageStatus" v-model="msasterSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-        </div>
-      </div>
-      <div class="voice-list">
-        <el-row>
-          <el-col :span="8" v-for="(item, index) in voiceList" :key="index">
-            <div class="item">
-              <div class="left">
-                <img @click="play(index)" src="../../../static/image/voice-icon.png" class="voice-icon" />
-                <span>{{ item.name }}</span>
-              </div>
-              <div class="right">
-                <el-switch @change="updateSavePushMessageStatus" v-model="item.msasterSwitch" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
-              </div>
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-    </div>
-    <el-dialog :title="!curIndex ? '即时单自动发单时间设置' : '预定单自动发单时间设置'" @close="getConfig" :visible.sync="centerDialogVisible" width="800px" 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="getConfig">取 消</el-button>
-        <el-button size='medium' type="primary" @click="confirm">确 定</el-button>
-      </span>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  getConfig,
-  updateConfig,
-  queryPushMessageStatus,
-  updateSavePushMessageStatus,
-} from "../../api/setting.js";
-// import { floorListDelivery } from "../../api/shop.js";
-export default {
-  data() {
-    return {
-      voiceList: [],
-      openAutoorder: 0,
-      openPrintSwitch: 0,
-      autodeliveryOrderTime: 0,
-      bookingAutodeliveryOrderTime: 0,
-      time: 0,
-      msasterSwitch: 1,
-      centerDialogVisible: false,
-      memberType: this.$store.state.userInfo.memberType,
-      list: [
-        {
-          name: "同步订单商品给骑手",
-          value: 1,
-          field: "syncGoodsDetailToDelivery",
-        },
-        {
-          name: "同步打印客户联商品明细",
-          value: 1,
-          field: "customerLinkPrintGoodsDetail",
-        },
-        {
-          name: "同步打印客户联商品价格",
-          value: 1,
-          field: "customerLinkPrintGoodsPrice",
-        },
-      ],
-      curIndex: 0,
-      list1: [
-        {
-          name: "即时单自动发单",
-          value: 1,
-          field: "openAutodelivery",
-        },
-        {
-          name: "预定单自动发单",
-          value: 1,
-          field: "openBookingAutodelivery",
-        },
-      ],
-    };
-  },
-  watch: {
-    "$store.state.userInfo": {
-      handler(newVal, oldVal) {
-        this.memberType = newVal.memberType;
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.getConfig();
-    this.queryPushMessageStatus();
-  },
-  methods: {
-    change(e) {
-      console.log(e);
-      updateConfig({
-        [e.field]: e.value,
-      }).then((res) => {
-        if (res.code === 200) {
-          this.getConfig();
-        } else {
-          e.value = !e.value;
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    openSetTime(v, i) {
-      if (!v.value) {
-        return this.$message({
-          type: "info",
-          message: "请先开启自动配送再设置时长！",
-        });
-      }
-      this.curIndex = i;
-      if (!i) {
-        this.time = this.autodeliveryOrderTime;
-      } else if (i === 1) {
-        this.time = this.bookingAutodeliveryOrderTime;
-      }
-      this.centerDialogVisible = true;
-    },
-    play(index) {
-      let src = "https://pc.liebaoai.cn/audio/alone.mp3";
-      switch (index) {
-        case 0:
-          src = "https://pc.liebaoai.cn/audio/new-order.mp3";
-          break;
-        case 1:
-          src = "https://pc.liebaoai.cn/audio/order-received.mp3";
-          break;
-        case 2:
-          src = "https://pc.liebaoai.cn/audio/missed-orders.mp3";
-          break;
-        case 3:
-          src = "https://pc.liebaoai.cn/audio/rider-cancel.mp3";
-          break;
-        case 4:
-          src = "https://pc.liebaoai.cn/audio/user-go-cancel.mp3";
-          break;
-        case 5:
-          src = "https://pc.liebaoai.cn/audio/not-enough.mp3";
-          break;
-        case 6:
-          src = "https://pc.liebaoai.cn/audio/lower-than.mp3";
-          break;
-        case 7:
-          src = "https://pc.liebaoai.cn/audio/over-time.mp3";
-          break;
-        case 8:
-          src = "https://pc.liebaoai.cn/audio/rider-go-cancel.mp3";
-          break;
-
-        default:
-          break;
-      }
-      let mp3 = new Audio(src);
-      mp3.play(); //播放 mp3这个音频对象
-    },
-    confirm() {
-      this.centerDialogVisible = true;
-      let data = {};
-      if (!this.curIndex) {
-        data = { autodeliveryOrderTime: this.time * 60 };
-      } else if (this.curIndex === 1) {
-        data = { bookingAutodeliveryOrderTime: this.time * 60 };
-      }
-      this.updateConfig(data);
-    },
-    changeMessageStatus() {
-      this.voiceList = this.voiceList.map((v) => {
-        v.msasterSwitch = this.msasterSwitch;
-        return v;
-      });
-      this.updateSavePushMessageStatus();
-    },
-    getConfig() {
-      this.centerDialogVisible = false;
-      getConfig().then((res) => {
-        if (res.code === 200) {
-          this.autodeliveryOrderTime = res.data.autodeliveryOrderTime / 60;
-          this.bookingAutodeliveryOrderTime =
-            res.data.bookingAutodeliveryOrderTime / 60;
-          this.openAutoorder = res.data.openAutoorder;
-          this.openPrintSwitch = res.data.openPrintSwitch;
-          this.list = this.list.map((v) => {
-            v.value = res.data[v.field];
-            return v;
-          });
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    queryPushMessageStatus() {
-      queryPushMessageStatus().then((res) => {
-        if (res.code === 200) {
-          this.voiceList = res.data;
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-    updateSavePushMessageStatus() {
-      updateSavePushMessageStatus({ orderPushMessages: this.voiceList }).then(
-        (res) => {
-          if (res.code === 200) {
-            this.$message({
-              type: "success",
-              message: "修改成功！",
-            });
-            this.queryPushMessageStatus();
-          } else {
-            this.$message({
-              type: "error",
-              message: res.msg,
-            });
-          }
-        }
-      );
-    },
-    updateConfig(data) {
-      updateConfig(data).then((res) => {
-        if (res.code === 200) {
-          this.getConfig();
-        } else {
-          this.$message({
-            type: "error",
-            message: res.msg,
-          });
-        }
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.voice {
-  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
-  /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-    background-color: #fc7200;
-    border-color: #fc7200;
-  }
-  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
-    color: #fc7200;
-  }
-  /deep/ .el-button--primary {
-    color: #fff;
-    background-color: #fc7200;
-    border-color: #fc7200;
-  }
-  .top-set {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    background-color: #fff;
-    .t-left {
-      font-size: 16px;
-      font-family: PingFang SC;
-      font-weight: bold;
-      color: #333333;
-      span {
-        cursor: pointer;
-        font-size: 14px;
-        font-family: PingFang SC;
-        font-weight: 400;
-        color: #175199;
-      }
-    }
-    .t-right {
-      font-size: 14px;
-      font-family: PingFang SC;
-      font-weight: 400;
-      color: #b1b1b1;
-    }
-  }
-  .voice-content {
-    margin-top: 10px;
-    .voice-list {
-      background-color: #fff;
-      .item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 17px 22px 19px 18px;
-        .left {
-          display: flex;
-          align-items: center;
-          .name {
-            font-size: 14px;
-            // font-weight: bold;
-          }
-          .time {
-            margin-left: 10px;
-            font-size: 12px;
-            color: #175199;
-            cursor: pointer;
-          }
-          .voice-icon {
-            width: 15px;
-            height: 12px;
-            margin-right: 4px;
-            margin-top: 2px;
-            cursor: pointer;
-          }
-          span {
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: 400;
-            color: #333333;
-          }
-        }
-        .right {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          color: #999999;
-        }
-      }
-    }
-  }
-  .delivery-list {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 20px;
-    .delivery {
-      margin: 0 20px 20px 0;
-      width: 100px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      border-radius: 25px;
-      border: 1px solid #999;
-      color: #999999;
-      cursor: pointer;
-    }
-    .active {
-      border: 1px solid #fc7200;
-      color: #fff;
-      background: #fc7200;
-    }
-  }
-  .auto-time {
-    width: 150px;
-  }
-}
-</style>

src/components/waimaiComponents/voiceSetting.vue

@@ -1,21 +1,137 @@
 <template>
-  <div>voiceSetting</div>
+  <div class="voice">
+    <div class="model">
+      <div class="title">通知设置</div>
+      <div class="list">
+        <div class="item">
+          <div class="left">
+            <div class="left-top">
+              <div class="name">语音开启</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-switch @change="changeMessageStatus" v-model="open" :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 voiceList" :key=i>
+          <div class="left">
+            <div class="left-top">
+              <img @click="play(i)" src="../../../static/image/voice-icon.png" class="voice-icon" />
+              <div class="name">{{v.name}}</div>
+            </div>
+          </div>
+          <div class="right">
+            <el-switch @change="updateSavePushMessageStatus" v-model="v.open" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import {
+  queryPushMessageStatus,
+  updateSavePushMessageStatus,
+} from "../../api/setting.js";
 export default {
   name: "voiceSetting",
   data() {
-    return {};
+    return {
+      voiceList: [],
+      open: 1,
+    };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    changeMessageStatus() {
+      this.voiceList = this.voiceList.map((v) => {
+        v.open = this.open;
+        return v;
+      });
+      this.updateSavePushMessageStatus();
+    },
+    play(index) {
+      let src = "https://pc.liebaoai.cn/audio/alone.mp3";
+      switch (index) {
+        case 0:
+          src = "https://pc.liebaoai.cn/audio/new-order.mp3";
+          break;
+        case 1:
+          src = "https://pc.liebaoai.cn/audio/order-received.mp3";
+          break;
+        case 2:
+          src = "https://pc.liebaoai.cn/audio/missed-orders.mp3";
+          break;
+        case 3:
+          src = "https://pc.liebaoai.cn/audio/rider-cancel.mp3";
+          break;
+        case 4:
+          src = "https://pc.liebaoai.cn/audio/user-go-cancel.mp3";
+          break;
+        case 5:
+          src = "https://pc.liebaoai.cn/audio/not-enough.mp3";
+          break;
+        case 6:
+          src = "https://pc.liebaoai.cn/audio/lower-than.mp3";
+          break;
+        case 7:
+          src = "https://pc.liebaoai.cn/audio/over-time.mp3";
+          break;
+        case 8:
+          src = "https://pc.liebaoai.cn/audio/rider-go-cancel.mp3";
+          break;
+
+        default:
+          break;
+      }
+      let mp3 = new Audio(src);
+      mp3.play(); //播放 mp3这个音频对象
+    },
+    queryPushMessageStatus() {
+      queryPushMessageStatus().then((res) => {
+        if (res.code === 200) {
+          this.voiceList = res.data;
+        } else {
+          this.$message({
+            type: "error",
+            message: res.msg,
+          });
+        }
+      });
+    },
+    updateSavePushMessageStatus() {
+      updateSavePushMessageStatus({ orderPushMessages: this.voiceList }).then(
+        (res) => {
+          if (res.code === 200) {
+            this.$message({
+              type: "success",
+              message: "修改成功！",
+            });
+            this.queryPushMessageStatus();
+          } else {
+            this.$message({
+              type: "error",
+              message: res.msg,
+            });
+          }
+        }
+      );
+    },
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    this.queryPushMessageStatus();
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   // 生命周期 - 创建之前
@@ -36,4 +152,59 @@ 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;
+          .voice-icon {
+            width: 15px;
+            height: 12px;
+            margin-right: 10px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
 </style>