group_web_merchant/src/views/voucherManagement/newVoucher.vue

<template>
  <!-- 代金券管理 - 新增/编辑页面 -->
  <div class="table-box" style="width: 100%; min-height: 100%; background-color: white">
    <div class="header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="title">新建代金券</h2>
    </div>
    <el-form :model="voucherModel" ref="ruleFormRef" :rules="rules" label-width="120px" class="formBox">
      <div class="content">
        <!-- 左侧内容区域 -->
        <div class="contentLeft">
          <!-- 基础信息模块 -->
          <div class="model">
            <h3 style="font-weight: bold">基础信息：</h3>
            <!-- 代金券名称 -->
            <el-form-item label="代金券名称" prop="voucherName">
              <el-input maxlength="50" v-model="voucherModel.voucherName" placeholder="请输入" clearable />
            </el-form-item>
            <!-- 抵扣价格 -->
            <el-form-item label="抵扣价格(¥)" prop="discountPrice">
              <el-input v-model="voucherModel.discountPrice" maxlength="15" placeholder="请输入" clearable />
            </el-form-item>
            <!-- 售卖价格 -->
            <el-form-item label="售卖价格(¥)" prop="sellingPrice">
              <el-input v-model="voucherModel.sellingPrice" maxlength="15" placeholder="请输入" clearable />
            </el-form-item>
            <!-- 开始售卖时间 -->
            <el-form-item label="开始售卖时间" prop="startSellingTime">
              <el-date-picker
                v-model="voucherModel.startSellingTime"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择开始售卖时间"
                :disabled-date="disabledStartDate"
              />
            </el-form-item>
            <!-- 结束售卖时间 -->
            <el-form-item label="结束售卖时间" prop="endSellingTime">
              <el-date-picker
                v-model="voucherModel.endSellingTime"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                placeholder="请选择结束售卖时间"
                :disabled-date="disabledEndDate"
              />
            </el-form-item>
          </div>
          <!-- 购买须知模块 -->
          <div class="model">
            <h3 style="font-weight: bold">购买须知：</h3>
            <!-- 使用时间 -->
            <el-form-item label="使用时间" prop="usageTime">
              <el-date-picker
                v-model="voucherModel.usageTime"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled-date="disabledUsageDate"
              />
            </el-form-item>
            <!-- 有效期 -->
            <el-form-item label="有效期" prop="validityPeriodType">
              <el-radio-group v-model="voucherModel.validityPeriodType" class="ml-4">
                <el-radio v-for="status in validityPeriodList" :value="status.value" :key="status.value">
                  {{ status.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="" prop="validityDays" v-if="voucherModel.validityPeriodType == 0">
              <div class="expiration-date-container">
                <span class="expiration-label">用户购买</span>
                <el-input-number v-model="voucherModel.validityDays" placeholder="请输入" :min="1" class="expiration-input" />
                <span class="expiration-label">天内有效</span>
              </div>
            </el-form-item>
            <el-form-item label="" prop="validityPeriod" v-else>
              <el-date-picker
                v-model="voucherModel.validityPeriod"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled-date="disabledValidityDate"
              />
            </el-form-item>
            <!-- 不可用日期 -->
            <el-form-item label="不可用日期" prop="unavailableDateType">
              <el-radio-group v-model="voucherModel.unavailableDateType" class="ml-4">
                <el-radio v-for="status in unavailableDateTypeList" :value="status.value" :key="status.value">
                  {{ status.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="voucherModel.unavailableDateType == 1">
              <el-form-item label="" prop="unavailableWeekdays">
                <div class="unavailable-dates-container">
                  <!-- 星期选择 -->
                  <div class="date-select-section">
                    <div class="section-title">星期</div>
                    <div class="button-group">
                      <el-button
                        v-for="weekday in weekdayList"
                        :key="weekday.oName"
                        :type="voucherModel.unavailableWeekdays?.includes(weekday.oName) ? 'primary' : ''"
                        class="date-select-btn"
                        @click="toggleWeekday(weekday.oName)"
                      >
                        {{ weekday.name }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="" prop="unavailableHolidays">
                <div class="unavailable-dates-container">
                  <!-- 节日选择 -->
                  <div class="date-select-section">
                    <div class="section-title">节日</div>
                    <div class="button-group">
                      <el-button
                        v-for="holiday in holidayList"
                        :key="holiday.id"
                        :type="voucherModel.unavailableHolidays?.includes(holiday.id) ? 'primary' : ''"
                        class="date-select-btn"
                        @click="toggleHoliday(holiday.id)"
                      >
                        {{ holiday.festivalName }}
                      </el-button>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </template>
            <el-form-item label="" prop="customUnavailableDates" v-else-if="voucherModel.unavailableDateType == 2">
              <div class="date-picker-container">
                <el-button :icon="Plus" class="add-date-btn" type="primary" @click="addDate"> 添加日期 </el-button>
                <div v-for="(item, index) in dates" :key="index" class="date-item">
                  <el-date-picker
                    v-model="dates[index]"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    class="date-picker"
                    :disabled-date="disabledCustomUnavailableDate"
                  />
                  <el-button
                    :icon="Delete"
                    type="danger"
                    circle
                    size="small"
                    class="delete-btn"
                    @click="removeDate(index)"
                    v-show="dates.length > 1"
                  />
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <!-- 右侧内容区域 -->
        <div class="contentRight">
          <!-- 库存模块 -->
          <div class="model">
            <h3 style="font-weight: bold">库存：</h3>
            <el-form-item label="库存" prop="inventory">
              <el-input v-model="voucherModel.inventory" maxlength="15" placeholder="请输入" clearable />
            </el-form-item>
          </div>
          <!-- 使用规则模块 -->
          <div class="model">
            <h3 style="font-weight: bold">使用规则：</h3>
            <!-- 单日可用数量 -->
            <el-form-item label="单日可用数量" prop="dailyAvailableQuantity">
              <el-input v-model="voucherModel.dailyAvailableQuantity" maxlength="15" placeholder="请输入" clearable />
            </el-form-item>
            <!-- 限购数量 -->
            <el-form-item label="限购数量" prop="purchaseLimitQuantity">
              <el-input v-model="voucherModel.purchaseLimitQuantity" maxlength="15" placeholder="请输入" clearable />
            </el-form-item>
            <!-- 适用范围 -->
            <el-form-item label="适用范围" prop="applicableScopeType">
              <el-radio-group v-model="voucherModel.applicableScopeType" class="ml-4">
                <el-radio v-for="status in applicableScopeList" :value="status.value" :key="status.value">
                  {{ status.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="" prop="applicableScope" v-if="voucherModel.applicableScopeType == 1">
              <el-input
                maxlength="50"
                v-model="voucherModel.applicableScope"
                :rows="3"
                type="textarea"
                placeholder="请输入"
                show-word-limit
              />
            </el-form-item>
          </div>
          <!-- 补充说明模块 -->
          <div class="model">
            <h3 style="font-weight: bold">补充说明：</h3>
            <el-form-item label="补充说明" prop="additionalInstructions">
              <el-input
                maxlength="300"
                v-model="voucherModel.additionalInstructions"
                :rows="4"
                type="textarea"
                placeholder="请输入"
                show-word-limit
              />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 底部按钮区域 -->
    <div class="button-container">
      <el-button @click="handleSubmit('draft')"> 存草稿 </el-button>
      <el-button type="primary" @click="handleSubmit"> 新建代金券 </el-button>
    </div>
  </div>
</template>

<script setup lang="tsx" name="newVoucher">
/**
 * 代金券管理 - 新增/编辑页面
 * 功能：支持代金券的新增和编辑操作
 */
import { ref, reactive, watch, nextTick, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import type { FormInstance } from "element-plus";
import { getVoucherDetail } from "@/api/modules/voucherManagement";
import {
  validatePositiveNumber,
  validatePositiveInteger,
  validateDateRange,
  validateDateRangeArray,
  validateConditionalRequired,
  validateArrayMinLength,
  validateDateListArray
} from "@/utils/eleValidate";

// ==================== 响应式数据定义 ====================

// 路由相关
const router = useRouter();
const route = useRoute();

// 页面状态
const type = ref<string>(""); // 页面类型：add-新增, edit-编辑
const id = ref<string>(""); // 页面ID参数

// ==================== 表单验证规则 ====================
const rules = reactive({
  voucherName: [{ required: true, message: "请输入代金券名称" }],
  discountPrice: [
    { required: true, message: "请输入抵扣价格" },
    {
      validator: validatePositiveNumber("抵扣价格必须为正数"),
      trigger: "blur"
    }
  ],
  sellingPrice: [
    { required: true, message: "请输入售卖价格" },
    {
      validator: validatePositiveNumber("售卖价格必须为正数"),
      trigger: "blur"
    }
  ],
  startSellingTime: [
    { required: true, message: "请选择开始售卖时间" },
    {
      validator: validateDateRange(
        () => voucherModel.value.startSellingTime,
        () => voucherModel.value.endSellingTime,
        "开始售卖时间不能早于当前时间",
        "结束售卖时间不能早于当前时间",
        "开始售卖时间必须早于结束售卖时间",
        true
      ),
      trigger: "change"
    }
  ],
  endSellingTime: [
    { required: true, message: "请选择结束售卖时间" },
    {
      validator: validateDateRange(
        () => voucherModel.value.startSellingTime,
        () => voucherModel.value.endSellingTime,
        "开始售卖时间不能早于当前时间",
        "结束售卖时间不能早于当前时间",
        "开始售卖时间必须早于结束售卖时间",
        true
      ),
      trigger: "change"
    }
  ],
  usageTime: [
    { required: true, message: "请选择使用时间" },
    {
      validator: validateDateRangeArray("使用开始时间必须早于结束时间"),
      trigger: "change"
    }
  ],
  validityPeriodType: [{ required: true, message: "请选择有效期类型" }],
  validityDays: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (voucherModel.value.validityPeriodType === 0) {
          if (value === null || value === undefined || value === "") {
            callback(new Error("请输入用户购买天数"));
            return;
          }
          if (value <= 0) {
            callback(new Error("天数必须大于0"));
            return;
          }
        }
        callback();
      },
      trigger: "blur"
    }
  ],
  validityPeriod: [
    {
      required: true,
      validator: validateConditionalRequired(() => voucherModel.value.validityPeriodType === 1, "请选择指定时间段"),
      trigger: "change"
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (voucherModel.value.validityPeriodType === 1 && value && value.length === 2) {
          validateDateRangeArray("开始时间必须早于结束时间")(rule, value, callback);
        } else {
          callback();
        }
      },
      trigger: "change"
    }
  ],
  unavailableDateType: [{ required: true, message: "请选择不可用日期类型" }],
  unavailableWeekdays: [
    {
      validator: validateConditionalRequired(() => voucherModel.value.unavailableDateType === 1, "至少需要选择一个星期"),
      trigger: "change"
    }
  ],
  unavailableHolidays: [
    {
      validator: validateConditionalRequired(() => voucherModel.value.unavailableDateType === 1, "至少需要选择一个节日"),
      trigger: "change"
    }
  ],
  customUnavailableDates: [
    {
      validator: validateConditionalRequired(
        () => voucherModel.value.unavailableDateType === 2,
        "至少需要添加一个自定义不可用日期"
      ),
      trigger: "change"
    },
    {
      validator: validateDateListArray(() => dates.value, "日期项未完整填写", "开始时间必须早于结束时间", false),
      trigger: "change"
    }
  ],
  inventory: [
    { required: true, message: "请输入库存" },
    {
      validator: validatePositiveInteger("库存必须为正整数", { required: false }),
      trigger: "blur"
    }
  ],
  dailyAvailableQuantity: [
    {
      validator: validatePositiveInteger("单日可用数量必须为正整数", { required: false }),
      trigger: "blur"
    }
  ],
  purchaseLimitQuantity: [
    {
      validator: validatePositiveInteger("限购数量必须为正整数", { required: false }),
      trigger: "blur"
    }
  ],
  applicableScopeType: [{ required: true, message: "请选择适用范围类型" }],
  applicableScope: [
    {
      validator: validateConditionalRequired(() => voucherModel.value.applicableScopeType === 1, "请输入适用范围"),
      trigger: "blur"
    }
  ]
});

// ==================== 代金券信息数据模型 ====================
const voucherModel = ref<any>({
  // 代金券名称
  voucherName: "",
  // 抵扣价格
  discountPrice: "",
  // 售卖价格
  sellingPrice: "",
  // 开始售卖时间
  startSellingTime: "",
  // 结束售卖时间
  endSellingTime: "",
  // 使用时间
  usageTime: [],
  // 有效期类型：0-指定天数，1-指定时间段内可用
  validityPeriodType: 0,
  // 有效期天数（当validityPeriodType为0时使用）
  validityDays: 90,
  // 有效期时间段（当validityPeriodType为1时使用）
  validityPeriod: [],
  // 不可用日期类型：0-全部日期可用，1-限制日期，2-自定义不可用日期
  unavailableDateType: 0,
  // 限制日期 - 星期选择（数组，存储选中的星期值）
  unavailableWeekdays: [],
  // 限制日期 - 节日选择（数组，存储选中的节日值）
  unavailableHolidays: [],
  // 库存
  inventory: "",
  // 单日可用数量
  dailyAvailableQuantity: "",
  // 限购数量
  purchaseLimitQuantity: "",
  // 适用范围类型：0-全场通用，1-部分不可用
  applicableScopeType: 0,
  // 适用范围（当applicableScopeType为1时使用）
  applicableScope: "",
  // 补充说明
  additionalInstructions: ""
});

// ==================== 下拉选项数据 ====================

// 有效期类型列表
const validityPeriodList = ref([
  { value: 0, label: "指定天数" },
  { value: 1, label: "指定时间段内可用" }
]);

// 不可用日期类型列表
const unavailableDateTypeList = ref([
  { value: 0, label: "全部日期可用" },
  { value: 1, label: "限制日期" },
  { value: 2, label: "自定义不可用日期" }
]);

// 适用范围类型列表
const applicableScopeList = ref([
  { value: 0, label: "全场通用" },
  { value: 1, label: "部分不可用" }
]);

// 自定义不可用日期列表
const dates = ref([]);

// 星期选项列表
const weekdayList = ref([
  { name: "周一", id: "0", oName: "星期一" },
  { name: "周二", id: "1", oName: "星期二" },
  { name: "周三", id: "2", oName: "星期三" },
  { name: "周四", id: "3", oName: "星期四" },
  { name: "周五", id: "4", oName: "星期五" },
  { name: "周六", id: "5", oName: "星期六" },
  { name: "周日", id: "6", oName: "星期日" }
]);

// 节日选项列表
const holidayList: any = ref([]);

// ==================== 监听器 ====================

/**
 * 监听不可用日期选项变化
 * 当切换到自定义不可用日期时，确保至少有一个日期项
 */
watch(
  () => voucherModel.value.unavailableDateType,
  newVal => {
    if (newVal === 2) {
      if (!dates.value || dates.value.length === 0) {
        dates.value = [null];
      }
    }
  },
  { immediate: true }
);

/**
 * 监听开始售卖时间变化
 * 当开始时间改变时，重新验证结束时间
 */
watch(
  () => voucherModel.value.startSellingTime,
  () => {
    if (voucherModel.value.endSellingTime) {
      nextTick(() => {
        ruleFormRef.value?.validateField("endSellingTime");
      });
    }
  }
);

/**
 * 监听结束售卖时间变化
 * 当结束时间改变时，重新验证开始时间
 */
watch(
  () => voucherModel.value.endSellingTime,
  () => {
    if (voucherModel.value.startSellingTime) {
      nextTick(() => {
        ruleFormRef.value?.validateField("startSellingTime");
      });
    }
  }
);

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时初始化
 * 从路由参数中获取页面类型和ID
 */
onMounted(async () => {
  id.value = (route.query.id as string) || "";
  type.value = (route.query.type as string) || "";
  // 编辑模式下加载数据
  if (type.value != "add") {
    // TODO: 加载代金券详情数据
    // let res: any = await getVoucherDetail({ id: id.value });
    // voucherModel.value = res.data;
  }
});
// ==================== 事件处理函数 ====================

/**
 * 返回上一页
 */
const goBack = () => {
  router.go(-1);
};

/**
 * 添加自定义不可用日期
 */
const addDate = () => {
  dates.value.push(null);
};

/**
 * 删除自定义不可用日期
 * @param index 要删除的日期索引
 */
const removeDate = (index: number) => {
  if (dates.value.length <= 1) {
    ElMessage.warning("至少需要保留一个日期项");
    return;
  }
  dates.value.splice(index, 1);
};

/**
 * 切换星期选择
 * @param value 星期值
 */
const toggleWeekday = (value: string) => {
  if (!voucherModel.value.unavailableWeekdays) {
    voucherModel.value.unavailableWeekdays = [];
  }
  const index = voucherModel.value.unavailableWeekdays.indexOf(value);
  if (index > -1) {
    voucherModel.value.unavailableWeekdays.splice(index, 1);
  } else {
    voucherModel.value.unavailableWeekdays.push(value);
  }
  // 触发表单验证
  nextTick(() => {
    ruleFormRef.value?.validateField("unavailableWeekdays");
  });
};

/**
 * 切换节日选择
 * @param value 节日值
 */
const toggleHoliday = (value: string | number) => {
  if (!voucherModel.value.unavailableHolidays) {
    voucherModel.value.unavailableHolidays = [];
  }
  const index = voucherModel.value.unavailableHolidays.indexOf(value);
  if (index > -1) {
    voucherModel.value.unavailableHolidays.splice(index, 1);
  } else {
    voucherModel.value.unavailableHolidays.push(value);
  }
  // 触发表单验证
  nextTick(() => {
    ruleFormRef.value?.validateField("unavailableHolidays");
  });
};

// ==================== 表单引用 ====================
const ruleFormRef = ref<FormInstance>(); // 表单引用

/**
 * 提交数据（新增/编辑）
 * 验证表单，通过后调用相应的API接口
 */
const handleSubmit = (submitType?: string) => {
  // 验证表单
  ruleFormRef.value!.validate(async (valid: boolean) => {
    if (!valid) return;

    // 组装提交参数
    let params: any = { ...voucherModel.value };

    // 处理有效期
    if (params.validityPeriodType === 0) {
      params.validityPeriodStr = `用户购买${params.validityDays}天内有效`;
    } else {
      params.validityPeriodStr = params.validityPeriod.join(",");
    }

    // 处理不可用日期
    if (params.unavailableDateType === 1) {
      params.unavailableDateValue = params.unavailableWeekdays.join(",") + ";" + params.unavailableHolidays.join(",");
    } else if (params.unavailableDateType === 2) {
      params.unavailableDateValue = dates.value.map((subArray: any) => subArray.join(",")).join(";");
    }

    // 处理使用时间
    if (params.usageTime && params.usageTime.length === 2) {
      params.usageStartTime = params.usageTime[0];
      params.usageEndTime = params.usageTime[1];
    }

    console.log("提交参数:", params);

    // TODO: 调用API保存数据
    // if (submitType === 'draft') {
    //   await saveVoucherDraft(params);
    // } else {
    //   await saveVoucher(params);
    // }

    if (submitType === "draft") {
      ElMessage.success("草稿保存成功");
    } else {
      ElMessage.success("代金券创建成功");
      router.go(-1);
    }
  });
};

// ==================== 工具函数 ====================

/**
 * 禁用开始售卖时间的日期
 * 不能选择早于当前时间的日期
 */
const disabledStartDate = (time: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return time.getTime() < today.getTime();
};

/**
 * 禁用结束售卖时间的日期
 * 不能选择早于当前时间的日期，也不能选择早于或等于开始售卖时间的日期
 */
const disabledEndDate = (time: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  if (time.getTime() < today.getTime()) {
    return true;
  }
  if (voucherModel.value.startSellingTime) {
    const startDate = new Date(voucherModel.value.startSellingTime);
    startDate.setHours(0, 0, 0, 0);
    return time.getTime() <= startDate.getTime();
  }
  return false;
};

/**
 * 禁用使用时间的日期
 */
const disabledUsageDate = (time: Date) => {
  return false; // 可以根据需要添加限制
};

/**
 * 禁用有效期时间段的日期
 */
const disabledValidityDate = (time: Date) => {
  return false; // 可以根据需要添加限制
};

/**
 * 禁用自定义不可用日期的日期
 */
const disabledCustomUnavailableDate = (time: Date) => {
  return false; // 可以根据需要添加限制
};
</script>

<style scoped lang="scss">
/* 页面容器 */
.table-box {
  display: flex;
  flex-direction: column;
  height: auto !important;
  min-height: 100%;
}

/* 头部区域 */
.header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e4e7ed;
}
.title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

/* 内容区域布局 */
.content {
  display: flex;
  flex: 1;
  column-gap: 20px;
  width: 98%;
  margin: 20px auto;

  /* 左侧内容区域 */
  .contentLeft {
    width: 50%;
  }

  /* 右侧内容区域 */
  .contentRight {
    width: 50%;
  }
}

/* 模块容器 */
.model {
  margin-bottom: 50px;
}

/* 表单容器 */
.formBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

/* 底部按钮容器 - 居中显示 */
.button-container {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  margin-top: 20px;
}

/* 日期选择器容器 */
.date-picker-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* 添加日期按钮 */
.add-date-btn {
  width: fit-content;
  margin-bottom: 8px;
}

/* 日期项容器 */
.date-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
  &:hover {
    background-color: #ecf5ff;
  }
}

/* 日期选择器 */
.date-item .date-picker {
  flex: 1;
  max-width: 500px;
}

/* 删除按钮 */
.date-item .delete-btn {
  flex-shrink: 0;
}

/* 有效期天数容器 */
.expiration-date-container {
  display: flex;
  gap: 12px;
  align-items: center;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 4px;
}

/* 有效期标签文字 */
.expiration-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

/* 有效期输入框 */
.expiration-input {
  width: 150px;
}

/* 不可用日期容器 */
.unavailable-dates-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* 日期选择区块 */
.date-select-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 区块标题 */
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

/* 按钮组 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 日期选择按钮 */
.date-select-btn {
  min-width: 80px;
  height: 36px;
  padding: 8px 16px;
  margin: 0;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s;
}
</style>