基础设置

src/components/settingComponents/systemSetting.vue

@@ -36,6 +36,7 @@
           <div class="right">
             <template v-if="v.value">
               <div v-if="i===1" :class="['time', v.value ? '' : 'time1']">商家发起自配{{v.time}}分钟后</div>
+              <div v-if="i===2" :class="['time', v.value ? '' : 'time1']">最便宜运力优先发单{{v.time}}分钟</div>
             </template>
             <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
           </div>
@@ -71,9 +72,9 @@
     </div>
     <el-dialog :title="title" @close="centerDialogVisible=false" :visible.sync="centerDialogVisible" width="400px" center>
       <el-form label-width="120px">
-        <el-form-item :label="!curIndex ? '顾客下单' : '期望送达前'">
+        <el-form-item :label="textLabel">
           <el-input size="small" class="auto-time" v-model="time" clearable>
-            <template slot="append">分钟{{curIndex ? '' : '后'}}</template>
+            <template slot="append">分钟</template>
           </el-input>
         </el-form-item>
       </el-form>
@@ -83,7 +84,7 @@
       </span>
     </el-dialog>
 
-    <el-dialog title="设置时长" @close="centerDialogVisible1=false" :visible.sync="centerDialogVisible1" width="400px" center>
+    <el-dialog title="设置时长" @close="closeLittleMoneyTime" :visible.sync="centerDialogVisible1" width="600px" center>
       <div class="time-list">
         <div class="time">
           <div class="title">
@@ -91,24 +92,61 @@
             <div class="tips">(设置的时间内先发最便宜的运力，设置上限5分钟)</div>
           </div>
           <div class="list">
-            <div class="item"></div>
+            <div @click="chooseTime(0,v)" class="item" :class="[littleMoneyTime === v ? 'active-item' : '']" v-for="(v,i) in timeList" :key="i">{{v}}</div>
           </div>
         </div>
         <div class="time">
           <div class="title">
             <div class="title-left">价格次优</div>
-            <img src="" alt="">
+            <el-tooltip :content="content" placement="top" :popper-class="ruleTips">
+              <img class="img" src="../../../static/image/icon-help.png" alt="">
+            </el-tooltip>
           </div>
           <div class="list">
-            <div class="item"></div>
+            <div @click="chooseTime(1,v)" class="item" :class="[littleMoneyTime1 === v ? 'active-item' : '']" v-for="(v,i) in timeList1" :key="i">{{v}}</div>
           </div>
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button size="medium" @click="centerDialogVisible1=false">取 消</el-button>
+        <el-button size="medium" @click="closeLittleMoneyTime">取 消</el-button>
         <el-button size='medium' type="primary" @click="confirm1">确 定</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="设置自动加小费" @close="closeLittleMoneyTime" :visible.sync="centerDialogVisible2" width="600px" center>
+      <div class="time-list">
+        <div class="time">
+          <div class="title">
+            <div class="title-left">小费金额</div>
+          </div>
+          <el-input size="small" class="auto-time" v-model="tipAmount" clearable>
+            <template slot="append">元</template>
+          </el-input>
+        </div>
+        <div class="time">
+          <div class="title">
+            <div class="title-left">触发时间</div>
+            <div class="tips">(下单后多长时间无骑手接单开始自动加小费)</div>
+          </div>
+          <el-input size="small" class="auto-time" v-model="addPriceTime" clearable>
+            <template slot="append">分钟</template>
+          </el-input>
+        </div>
+        <div class="time">
+          <div class="title">
+            <div class="title-left">选择运力</div>
+            <div class="tips">(给哪些运力自动加小费)</div>
+          </div>
+          <el-select v-model="tipRemark" placeholder="请选择运力">
+            <el-option v-for="(item,i) in options" :key="i" :label="item" :value="i">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="medium" @click="closeLittleMoneyTime">取 消</el-button>
+        <el-button size='medium' type="primary" @click="confirm2">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -146,8 +184,8 @@ export default {
           name: "自动加小费",
           setContent: "设置",
           value: 1,
-          field: "openBookingAutodelivery",
-          tips: "设置的时长为预约单期望送达前多长时间自动呼叫配送",
+          field: "openTipSwitch",
+          tips: "",
           time: 0,
         },
       ],
@@ -197,13 +235,26 @@ export default {
         },
       ],
       centerDialogVisible: false,
+      centerDialogVisible1: false,
+      centerDialogVisible2: false,
       curIndex: 0,
       time: 0,
       title: "",
       setField: "",
       openField: "",
+      openValue: 0,
       timeList: [1, 3, 5],
       timeList1: [1, 2, 3],
+      textLabel: "",
+      littleMoneyTime: 0,
+      littleMoneyTime1: 0,
+      tipAmount: 0,
+      addPriceTime: 0,
+      tipRemark: 0,
+      options: ["全部运力", "运力价格最优惠", "运力价格优惠前三"],
+      ruleTips: "rule-tips",
+      content:
+        "例如：价格最优惠的运力设置呼叫时间5分钟，价格次优惠的运力设置呼叫3分钟，那么价格最优惠的运力总计会呼叫8分钟，价格次优惠的运力呼叫3分钟。",
     };
   },
   // 监听属性 类似于data概念
@@ -232,8 +283,42 @@ export default {
   activated() {},
   // 方法集合
   methods: {
+    chooseTime(flag, time) {
+      flag === 0
+        ? (this.littleMoneyTime = time)
+        : (this.littleMoneyTime1 = time);
+    },
+    closeLittleMoneyTime() {
+      this.centerDialogVisible1 = false;
+      this.centerDialogVisible2 = false;
+      this.getConfig();
+    },
+    confirm1() {
+      let littleMoneyTime = `${this.littleMoneyTime}${
+        this.littleMoneyTime1 ? "," + this.littleMoneyTime1 : ""
+      }`;
+      let data = { littleMoneyTime };
+      this.updateConfig(data);
+    },
+    confirm2() {
+      if (this.tipAmount <= 1) {
+        return this.$message.error("加小费金额必须为正整数！");
+      }
+      if (this.addPriceTime <= 1) {
+        return this.$message.error("加小费触发时间必须为正整数！");
+      }
+      let data = {
+        tipAmount: this.tipAmount,
+        addPriceTime: this.addPriceTime,
+        tipRemark: this.tipRemark,
+      };
+      this.updateConfig(data);
+    },
     confirm() {
       let data = {};
+      if (this.time <= 1) {
+        return this.$message.error("时间必须为正整数！");
+      }
       switch (this.setField) {
         case "openAutodelivery":
           data = { autodeliveryOrderTime: this.time * 60 };
@@ -250,6 +335,21 @@ export default {
 
       this.updateConfig(data);
     },
+    setTextLabel() {
+      switch (this.setField) {
+        case "openAutodelivery":
+          this.textLabel = `顾客下单后`;
+          break;
+        case "openBookingAutodelivery":
+          this.textLabel = `期望送达前`;
+          break;
+        case "selfDeliveryAutoFinish":
+          this.textLabel = `商家发起自配后`;
+          break;
+        default:
+          break;
+      }
+    },
     setTime(v, i) {
       if (!v.value) {
         return this.$message({
@@ -258,6 +358,15 @@ export default {
         });
       }
       this.setField = v.field;
+      if (v.field === "littleMoney") {
+        this.centerDialogVisible1 = true;
+        return;
+      }
+      if (v.field === "openTipSwitch") {
+        this.centerDialogVisible2 = true;
+        return;
+      }
+      this.setTextLabel();
       this.title = v.name + "时长设置";
       this.curIndex = i;
       this.time = v.time;
@@ -265,6 +374,7 @@ export default {
     },
     change(e) {
       this.openField = e.field;
+      this.openValue = e.value;
       let data = { [e.field]: e.value };
       this.updateConfig(data);
     },
@@ -282,11 +392,18 @@ export default {
             return v;
           });
           this.list3[1].time = res.data.selfDeliveryAutoFinishMinute;
-          this.list3[2].time = res.data.selfDeliveryAutoFinishMinute;
+          let littleMoneyTime = res.data.littleMoneyTime.split(",");
+          console.log("littleMoneyTime:", littleMoneyTime);
+          this.littleMoneyTime = Number(littleMoneyTime[0]);
+          this.littleMoneyTime1 = Number(littleMoneyTime[1]);
+          this.list3[2].time = this.littleMoneyTime;
           this.list3 = this.list3.map((v) => {
             v.value = res.data[v.field];
             return v;
           });
+          this.tipAmount = res.data.tipAmount;
+          this.addPriceTime = res.data.addPriceTime;
+          this.tipRemark = Number(res.data.tipRemark);
         } else {
           this.$message({
             type: "error",
@@ -299,6 +416,8 @@ export default {
     updateConfig(data) {
       updateConfig(data).then((res) => {
         if (res.code === 200) {
+          this.centerDialogVisible1 = false;
+          this.centerDialogVisible2 = false;
           this.showSetting();
         } else {
           this.$message({
@@ -312,8 +431,13 @@ export default {
     showSetting() {
       switch (this.openField) {
         case "littleMoney":
+          this.openValue ? (this.centerDialogVisible1 = true) : "";
+          this.openValue = 0;
+          break;
+        case "openTipSwitch":
+          this.openValue ? (this.centerDialogVisible2 = true) : "";
+          this.openValue = 0;
           break;
-
         default:
           break;
       }
@@ -347,6 +471,7 @@ export default {
   background-color: #fc7200;
   border-color: #fc7200;
 }
+
 .model {
   .title {
     position: relative;
@@ -440,4 +565,55 @@ export default {
     }
   }
 }
+
+.time-list {
+  .time {
+    margin-bottom: 30px;
+    .title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      .title-left {
+        font-size: 15px;
+        font-weight: bold;
+      }
+      .tips {
+        font-size: 12px;
+        color: #999;
+      }
+      .img {
+        width: 20px;
+        height: 20px;
+        margin-left: 5px;
+        cursor: pointer;
+      }
+    }
+    .list {
+      display: flex;
+      .item {
+        width: 50px;
+        height: 25px;
+        border: 1px solid #999;
+        color: #999;
+        margin-right: 30px;
+        border-radius: 5px;
+        text-align: center;
+        line-height: 25px;
+        cursor: pointer;
+      }
+      .active-item {
+        color: #fff !important;
+        background: #fc7200;
+        border-color: #fc7200;
+      }
+    }
+  }
+}
+</style>
+<style>
+.rule-tips {
+  width: 300px !important;
+  font-size: 14px !important;
+  font-weight: bold;
+}
 </style>