yueche_manage/src/views/driver/rule.vue

<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">规则设置</span>
    </div>
    <div class="middle">
      <div class="filter">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="0"
          class="demo-ruleForm"
          :size="formSize"
          label-position="left"
          status-icon
        >
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3 style="margin: 12px 0">可约车时间段设置</h3>
              <div>
                <span>约车时间段</span>
                <el-time-picker
                  v-model="ruleForm.startTime"
                  is-range
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  format="HH:mm"
                  value-format="HH:mm"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="time">
            <div class="condition">
              <h3>截至取消订单时间设置</h3>
              <div>
                <span>乘车时间前</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>&nbsp;&nbsp;分钟</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>顺风车须知设置</h3>
              <div>
                <el-input
                  v-model="ruleForm.startTime"
                  style="width: 500px"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>客服联系方式设置</h3>
              <div>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.black_count"
                  class="w-50 m-2"
                  style="width: 220px"
                  placeholder="请输入联系方式"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>顺风车服务条款设置</h3>
              <div>
                <el-input
                  v-model="ruleForm.startTime"
                  style="width: 500px"
                  :rows="5"
                  type="textarea"
                  placeholder="请输入内容"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>司机取消订单保证金扣款规则设置</h3>
              <div>
                <span>司机取消订单，扣当前订单的</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.notice_time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>（如0.25则是抽当前订单支付金额的25%，保留2位小数）</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <div>
                <span>保证金低于</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.notice_time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>&nbsp;&nbsp;则不能接单，需补交保证金</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>用户取消订单违约金规则设置</h3>
              <div>
                <span>司机取消订单，扣当前订单的</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.notice_time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>（如0.25则是抽当前订单支付金额的25%，保留2位小数）</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>保证金规则设置</h3>
              <div>
                <span>保证金退款</span>
                <div>
                  <el-input
                    v-model="ruleForm.startTime"
                    style="width: 500px"
                    :rows="5"
                    type="textarea"
                    placeholder="请输入保证金"
                  />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <div>
                <span>保证金缴纳</span>
                <div>
                  <el-input
                    v-model="ruleForm.startTime"
                    style="width: 500px"
                    :rows="5"
                    type="textarea"
                    placeholder="请输入保证金"
                  />
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <div>
                <span>充值保证金</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.notice_time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="textarea">
            <div class="condition">
              <h3>提现设置</h3>
              <div>
                <span>提现时平台技术服务费抽成</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.notice_time"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>（如0.25则是抽当前订单支付金额的25%，保留2位小数）</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="" prop="quota">
            <div class="condition">
              <div>
                <span>提现最低额度</span>
                <el-input
                  :clearable="false"
                  v-model="ruleForm.quota"
                  class="w-50 m-2"
                  style="width: 100px"
                />
                <span>&nbsp;&nbsp;元（保留2位小数）</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <div class="options">
          <el-button
            color="rgba(61, 81, 232, 1)"
            class="queding"
            type="primary"
            @click="edit"
          >
            修改
          </el-button>
          <el-button
            color="rgba(61, 81, 232, 1)"
            class="queding"
            type="primary"
            @click="submit(ruleFormRef)"
          >
            确定
          </el-button>
          <el-button class="congzhi" @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

// 表单数据
const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  time: "",
  yy_duration: "",
  hh_end: "", //截止预约时间设置
  yy_end: "", //候补截止预约时间设置
  black_count: "", //黑名单设置次数
  notice_time: "", //发车前提前
  startTime: "", // 扫码前时间
  endTime: "", // 扫码后时间
  scanInterval: "", // 扫码间隔
  bb_before: "", // 报备人预约车辆时间设置
  id: "",
});
// 表单验证
const rules = reactive({
  time: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    {
      pattern: /^(0|[1-9]\d*)$/,
      message: "请输入正确数字",
      trigger: "blur",
    },
  ],
  quota: [
    { required: true, message: "额度不能为空", trigger: "blur" },
    {
      pattern: /^(?!0\d)\d+(?:\.\d{1,2})?$/,
      message: "请输入正确额度",
      trigger: "blur",
    },
  ],
});

// 获取系统设置数据
const getlist = async (message) => {
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/carBook/cnqueryHb.action",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //   },
  // });
  // console.log(res);
  // if (res.data.code == 200) {
  //   if (message) {
  //     ElMessage({
  //       type: "success",
  //       showClose: true,
  //       message: message,
  //       center: true,
  //     });
  //   }
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  //   if (res.data.message == "token错误") {
  //     router.push({
  //       path: `/login`,
  //     });
  //   }
  // }
};
const getTimeList = async () => {
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/carBook/weekConfigqueryList.action",
  //   headers: {
  //     token: sessionStorage.getItem("token"),
  //   },
  // });
  // console.log(res, "开始时间段配置");
  // if (res.data.code == 200) {
  //   let resData = res.data.data;
  // } else {
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  //   if (res.data.message == "token错误") {
  //     router.push({
  //       path: `/login`,
  //     });
  //   }
  // }
};

const timeUpdata = async () => {
  // let data = {
  //   yy_duration: ruleForm.yy_duration,
  //   scanInterval: ruleForm.scanInterval,
  //   yy_end: ruleForm.yy_end,
  //   hh_end: ruleForm.hh_end,
  //   black_count: ruleForm.black_count,
  //   notice_time: ruleForm.notice_time,
  //   sm_start: ruleForm.startTime,
  //   sm_end: ruleForm.endTime,
  //   bb_before: ruleForm.bb_before,
  //   id: ruleForm.id,
  // };
  // let res = await axios({
  //   method: "post",
  //   url: api.value + "/carBook/cnupdate.action",
  //   headers: {
  //     "Content-Type": "application/json;charset=utf-8",
  //     token: sessionStorage.getItem("token"),
  //   },
  //   data: data,
  // });
  // console.log(res, "修改候补");
  // if (res.data.code == 200) {
  //   // getlist();
  //   store.dispatch("sm_time");
  //   ElMessage({
  //     type: "success",
  //     showClose: true,
  //     message: res.data.message,
  //     center: true,
  //   });
  // } else {
  //   getlist();
  //   ElMessage({
  //     type: "error",
  //     showClose: true,
  //     message: "修改失败",
  //     center: true,
  //   });
  // }
};

//编辑按钮
const edit = () => {};
// 取消
const cancel = () => {
  ruleFormRef.value.resetFields();
};
// 确认
const submit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
    } else {
      console.log("error submit!", fields);
    }
  });
};

onBeforeMount(() => {
  api.value = store.state.user.api;
  getlist();
  getTimeList();
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .middle {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    overflow: auto;
    margin: 0 auto;
    color: #000;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      .condition {
        display: flex;
        flex-direction: column;
        margin: 0;
        h3 {
          font-size: 19px;
          margin: 0px 12px 12px 0;
        }
        span {
          margin: 0 10px 0 0;
          font-size: 16px;
          color: #000;
        }
        .addTime {
          display: flex;
          align-items: center;
          .el-checkbox-group {
            .el-checkbox {
              margin: 0 15px 0 0;
            }
          }
          :deep(.timePicker) {
            width: 200px;
          }
        }
      }
    }
    .gongneng {
      margin: 10px 0;
    }
    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }
    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }
    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }
    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
    .footer {
      margin: 10px 0 25px 0;
      .options {
      }
    }
  }
}
.el-input {
  width: 192px;
}
</style>