|
|
@@ -1,7 +1,501 @@
|
|
|
-<script setup lang="ts"></script>
|
|
|
-
|
|
|
<template>
|
|
|
- <div>1</div>
|
|
|
+ <div class="business-hours-container">
|
|
|
+ <h2 class="page-title">营业时间</h2>
|
|
|
+
|
|
|
+ <!-- 正常营业时间 -->
|
|
|
+ <div class="section">
|
|
|
+ <h3 class="section-title">正常营业时间</h3>
|
|
|
+ <div class="hours-list">
|
|
|
+ <div v-for="(item, index) in normalHours" :key="index" class="hours-item">
|
|
|
+ <span class="hours-text">{{ formatNormalHours(item) }}</span>
|
|
|
+ <div class="action-buttons">
|
|
|
+ <el-button type="primary" link @click="editNormalHours(index)"> 编辑 </el-button>
|
|
|
+ <el-button type="primary" link @click="deleteNormalHours(index)"> 删除 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="openAddNormalDialog"> 添加正常营业时间 </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 特殊营业时间 -->
|
|
|
+ <div class="section">
|
|
|
+ <h3 class="section-title">特殊营业时间</h3>
|
|
|
+ <div class="hours-list">
|
|
|
+ <div v-for="(item, index) in specialHours" :key="index" class="hours-item">
|
|
|
+ <span class="hours-text">{{ formatSpecialHours(item) }}</span>
|
|
|
+ <div class="action-buttons">
|
|
|
+ <el-button type="primary" link @click="editSpecialHours(index)"> 编辑 </el-button>
|
|
|
+ <el-button type="primary" link @click="deleteSpecialHours(index)"> 删除 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" @click="openAddSpecialDialog"> 添加特殊营业时间 </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 保存按钮 -->
|
|
|
+ <div class="footer">
|
|
|
+ <el-button type="primary" size="large" @click="handleSave"> 保存 </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 正常营业时间对话框 -->
|
|
|
+ <el-dialog v-model="normalDialogVisible" :title="normalDialogTitle" width="600px" @close="resetNormalForm">
|
|
|
+ <el-form :model="normalForm" label-width="140px">
|
|
|
+ <el-form-item label="请选择营业日">
|
|
|
+ <div class="day-buttons">
|
|
|
+ <el-button
|
|
|
+ v-for="day in weekDays"
|
|
|
+ :key="day.value"
|
|
|
+ :type="normalForm.selectedDays.includes(day.value) ? 'primary' : 'default'"
|
|
|
+ @click="toggleDay(day.value)"
|
|
|
+ >
|
|
|
+ {{ day.label }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="请选择营业时间段">
|
|
|
+ <el-radio-group v-model="normalForm.timeType">
|
|
|
+ <el-radio :value="'custom'"> 自定义 </el-radio>
|
|
|
+ <el-radio :value="'24hours'"> 24小时 </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div v-if="normalForm.timeType === 'custom'" class="time-picker-group">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="normalForm.startTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="开始时间"
|
|
|
+ style="width: 150px"
|
|
|
+ />
|
|
|
+ <span class="time-separator">至</span>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="normalForm.endTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="结束时间"
|
|
|
+ style="width: 150px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="resetNormalForm"> 重置 </el-button>
|
|
|
+ <el-button type="primary" @click="confirmNormalHours"> 确定 </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 特殊营业时间对话框 -->
|
|
|
+ <el-dialog v-model="specialDialogVisible" title="添加特殊营业时间" width="600px" @close="resetSpecialForm">
|
|
|
+ <el-form :model="specialForm" label-width="140px">
|
|
|
+ <el-form-item label="请选择营业日">
|
|
|
+ <div class="holiday-buttons">
|
|
|
+ <el-button
|
|
|
+ v-for="holiday in holidays"
|
|
|
+ :key="holiday.value"
|
|
|
+ :type="specialForm.selectedHolidays.includes(holiday.value) ? 'primary' : 'default'"
|
|
|
+ @click="toggleHoliday(holiday.value)"
|
|
|
+ >
|
|
|
+ {{ holiday.label }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="请选择营业时间段">
|
|
|
+ <el-radio-group v-model="specialForm.timeType">
|
|
|
+ <el-radio :value="'custom'"> 自定义 </el-radio>
|
|
|
+ <el-radio :value="'24hours'"> 24小时 </el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <div v-if="specialForm.timeType === 'custom'" class="time-picker-group">
|
|
|
+ <el-time-picker
|
|
|
+ v-model="specialForm.startTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="开始时间"
|
|
|
+ style="width: 150px"
|
|
|
+ />
|
|
|
+ <span class="time-separator">至</span>
|
|
|
+ <el-time-picker
|
|
|
+ v-model="specialForm.endTime"
|
|
|
+ format="HH:mm"
|
|
|
+ value-format="HH:mm"
|
|
|
+ placeholder="结束时间"
|
|
|
+ style="width: 150px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="resetSpecialForm"> 重置 </el-button>
|
|
|
+ <el-button type="primary" @click="confirmSpecialHours"> 确定 </el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped lang="scss"></style>
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, computed, onMounted } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+// TODO: 导入营业时间相关的 API 接口
|
|
|
+// import { getBusinessHours, saveBusinessHours, deleteNormalHours, deleteSpecialHours, getHolidayList } from "@/api/modules/storeDecoration";
|
|
|
+
|
|
|
+// 周一到周日
|
|
|
+const weekDays = [
|
|
|
+ { label: "周一", value: 1 },
|
|
|
+ { label: "周二", value: 2 },
|
|
|
+ { label: "周三", value: 3 },
|
|
|
+ { label: "周四", value: 4 },
|
|
|
+ { label: "周五", value: 5 },
|
|
|
+ { label: "周六", value: 6 },
|
|
|
+ { label: "周日", value: 7 }
|
|
|
+];
|
|
|
+
|
|
|
+// 节假日列表
|
|
|
+// TODO: 如果节假日列表需要从接口获取，请调用 getHolidayList API 并在 onMounted 中初始化
|
|
|
+const holidays = ref([
|
|
|
+ { label: "元旦", value: "元旦" },
|
|
|
+ { label: "春节", value: "春节" },
|
|
|
+ { label: "情人节", value: "情人节" },
|
|
|
+ { label: "元宵节", value: "元宵节" },
|
|
|
+ { label: "清明节", value: "清明节" },
|
|
|
+ { label: "劳动节", value: "劳动节" },
|
|
|
+ { label: "儿童节", value: "儿童节" },
|
|
|
+ { label: "端午节", value: "端午节" },
|
|
|
+ { label: "七夕", value: "七夕" },
|
|
|
+ { label: "中秋节", value: "中秋节" },
|
|
|
+ { label: "国庆节", value: "国庆节" },
|
|
|
+ { label: "冬至", value: "冬至" },
|
|
|
+ { label: "平安夜", value: "平安夜" },
|
|
|
+ { label: "圣诞节", value: "圣诞节" }
|
|
|
+]);
|
|
|
+
|
|
|
+// 正常营业时间列表
|
|
|
+interface NormalHoursItem {
|
|
|
+ days: number[];
|
|
|
+ timeType: "custom" | "24hours";
|
|
|
+ startTime?: string;
|
|
|
+ endTime?: string;
|
|
|
+}
|
|
|
+
|
|
|
+// TODO: 页面初始化时从接口获取正常营业时间数据
|
|
|
+const normalHours = ref<NormalHoursItem[]>([
|
|
|
+ { days: [1, 2, 3, 4, 5, 6, 7], timeType: "custom", startTime: "07:00", endTime: "19:00" }
|
|
|
+]);
|
|
|
+
|
|
|
+// 特殊营业时间列表
|
|
|
+interface SpecialHoursItem {
|
|
|
+ holidays: string[];
|
|
|
+ timeType: "custom" | "24hours";
|
|
|
+ startTime?: string;
|
|
|
+ endTime?: string;
|
|
|
+}
|
|
|
+
|
|
|
+// TODO: 页面初始化时从接口获取特殊营业时间数据
|
|
|
+const specialHours = ref<SpecialHoursItem[]>([]);
|
|
|
+
|
|
|
+// 正常营业时间对话框
|
|
|
+const normalDialogVisible = ref(false);
|
|
|
+const normalEditIndex = ref<number | null>(null);
|
|
|
+const normalDialogTitle = computed(() => (normalEditIndex.value !== null ? "正常营业时间" : "正常营业时间"));
|
|
|
+
|
|
|
+const normalForm = reactive({
|
|
|
+ selectedDays: [] as number[],
|
|
|
+ timeType: "custom" as "custom" | "24hours",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
+});
|
|
|
+
|
|
|
+// 特殊营业时间对话框
|
|
|
+const specialDialogVisible = ref(false);
|
|
|
+const specialEditIndex = ref<number | null>(null);
|
|
|
+
|
|
|
+const specialForm = reactive({
|
|
|
+ selectedHolidays: [] as string[],
|
|
|
+ timeType: "custom" as "custom" | "24hours",
|
|
|
+ startTime: "",
|
|
|
+ endTime: ""
|
|
|
+});
|
|
|
+
|
|
|
+// 格式化正常营业时间显示
|
|
|
+const formatNormalHours = (item: NormalHoursItem) => {
|
|
|
+ const sortedDays = [...item.days].sort((a, b) => a - b);
|
|
|
+
|
|
|
+ // 如果是连续的天数，使用"至"连接
|
|
|
+ let dayLabels = "";
|
|
|
+ if (sortedDays.length === 7) {
|
|
|
+ dayLabels = "周一至周日";
|
|
|
+ } else if (sortedDays.length > 1 && sortedDays[sortedDays.length - 1] - sortedDays[0] === sortedDays.length - 1) {
|
|
|
+ // 连续的天数
|
|
|
+ const startDay = weekDays.find(d => d.value === sortedDays[0])?.label;
|
|
|
+ const endDay = weekDays.find(d => d.value === sortedDays[sortedDays.length - 1])?.label;
|
|
|
+ dayLabels = `${startDay}至${endDay}`;
|
|
|
+ } else {
|
|
|
+ // 不连续的天数，用顿号连接
|
|
|
+ dayLabels = sortedDays.map(day => weekDays.find(d => d.value === day)?.label).join("、");
|
|
|
+ }
|
|
|
+
|
|
|
+ if (item.timeType === "24hours") {
|
|
|
+ return `${dayLabels} 24小时`;
|
|
|
+ }
|
|
|
+ return `${dayLabels} ${item.startTime}-${item.endTime}`;
|
|
|
+};
|
|
|
+
|
|
|
+// 格式化特殊营业时间显示
|
|
|
+const formatSpecialHours = (item: SpecialHoursItem) => {
|
|
|
+ const holidayLabels = item.holidays.join("、");
|
|
|
+ if (item.timeType === "24hours") {
|
|
|
+ return `${holidayLabels} 24小时`;
|
|
|
+ }
|
|
|
+ return `${holidayLabels} ${item.startTime}-${item.endTime}`;
|
|
|
+};
|
|
|
+
|
|
|
+// 切换选择日期
|
|
|
+const toggleDay = (day: number) => {
|
|
|
+ const index = normalForm.selectedDays.indexOf(day);
|
|
|
+ if (index > -1) {
|
|
|
+ normalForm.selectedDays.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ normalForm.selectedDays.push(day);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 切换选择节假日
|
|
|
+const toggleHoliday = (holiday: string) => {
|
|
|
+ const index = specialForm.selectedHolidays.indexOf(holiday);
|
|
|
+ if (index > -1) {
|
|
|
+ specialForm.selectedHolidays.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ specialForm.selectedHolidays.push(holiday);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 打开添加正常营业时间对话框
|
|
|
+const openAddNormalDialog = () => {
|
|
|
+ normalEditIndex.value = null;
|
|
|
+ resetNormalForm();
|
|
|
+ normalDialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 编辑正常营业时间
|
|
|
+const editNormalHours = (index: number) => {
|
|
|
+ normalEditIndex.value = index;
|
|
|
+ const item = normalHours.value[index];
|
|
|
+ normalForm.selectedDays = [...item.days];
|
|
|
+ normalForm.timeType = item.timeType;
|
|
|
+ normalForm.startTime = item.startTime || "";
|
|
|
+ normalForm.endTime = item.endTime || "";
|
|
|
+ normalDialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 删除正常营业时间
|
|
|
+const deleteNormalHours = (index: number) => {
|
|
|
+ // TODO: 调用删除正常营业时间接口 deleteNormalHours API
|
|
|
+ // const item = normalHours.value[index];
|
|
|
+ // await deleteNormalHours({ id: item.id });
|
|
|
+ normalHours.value.splice(index, 1);
|
|
|
+ ElMessage.success("删除成功");
|
|
|
+};
|
|
|
+
|
|
|
+// 重置正常营业时间表单
|
|
|
+const resetNormalForm = () => {
|
|
|
+ normalForm.selectedDays = [];
|
|
|
+ normalForm.timeType = "custom";
|
|
|
+ normalForm.startTime = "";
|
|
|
+ normalForm.endTime = "";
|
|
|
+ normalEditIndex.value = null;
|
|
|
+};
|
|
|
+
|
|
|
+// 确认正常营业时间
|
|
|
+const confirmNormalHours = () => {
|
|
|
+ if (normalForm.selectedDays.length === 0) {
|
|
|
+ ElMessage.warning("请选择营业日");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (normalForm.timeType === "custom" && (!normalForm.startTime || !normalForm.endTime)) {
|
|
|
+ ElMessage.warning("请选择营业时间段");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const newItem: NormalHoursItem = {
|
|
|
+ days: [...normalForm.selectedDays],
|
|
|
+ timeType: normalForm.timeType,
|
|
|
+ startTime: normalForm.timeType === "custom" ? normalForm.startTime : undefined,
|
|
|
+ endTime: normalForm.timeType === "custom" ? normalForm.endTime : undefined
|
|
|
+ };
|
|
|
+
|
|
|
+ if (normalEditIndex.value !== null) {
|
|
|
+ normalHours.value[normalEditIndex.value] = newItem;
|
|
|
+ ElMessage.success("编辑成功");
|
|
|
+ } else {
|
|
|
+ normalHours.value.push(newItem);
|
|
|
+ ElMessage.success("添加成功");
|
|
|
+ }
|
|
|
+
|
|
|
+ normalDialogVisible.value = false;
|
|
|
+ resetNormalForm();
|
|
|
+};
|
|
|
+
|
|
|
+// 打开添加特殊营业时间对话框
|
|
|
+const openAddSpecialDialog = () => {
|
|
|
+ specialEditIndex.value = null;
|
|
|
+ resetSpecialForm();
|
|
|
+ specialDialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 编辑特殊营业时间
|
|
|
+const editSpecialHours = (index: number) => {
|
|
|
+ specialEditIndex.value = index;
|
|
|
+ const item = specialHours.value[index];
|
|
|
+ specialForm.selectedHolidays = [...item.holidays];
|
|
|
+ specialForm.timeType = item.timeType;
|
|
|
+ specialForm.startTime = item.startTime || "";
|
|
|
+ specialForm.endTime = item.endTime || "";
|
|
|
+ specialDialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 删除特殊营业时间
|
|
|
+const deleteSpecialHours = (index: number) => {
|
|
|
+ // TODO: 调用删除特殊营业时间接口 deleteSpecialHours API
|
|
|
+ // const item = specialHours.value[index];
|
|
|
+ // await deleteSpecialHours({ id: item.id });
|
|
|
+ specialHours.value.splice(index, 1);
|
|
|
+ ElMessage.success("删除成功");
|
|
|
+};
|
|
|
+
|
|
|
+// 重置特殊营业时间表单
|
|
|
+const resetSpecialForm = () => {
|
|
|
+ specialForm.selectedHolidays = [];
|
|
|
+ specialForm.timeType = "custom";
|
|
|
+ specialForm.startTime = "";
|
|
|
+ specialForm.endTime = "";
|
|
|
+ specialEditIndex.value = null;
|
|
|
+};
|
|
|
+
|
|
|
+// 确认特殊营业时间
|
|
|
+const confirmSpecialHours = () => {
|
|
|
+ if (specialForm.selectedHolidays.length === 0) {
|
|
|
+ ElMessage.warning("请选择营业日");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (specialForm.timeType === "custom" && (!specialForm.startTime || !specialForm.endTime)) {
|
|
|
+ ElMessage.warning("请选择营业时间段");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const newItem: SpecialHoursItem = {
|
|
|
+ holidays: [...specialForm.selectedHolidays],
|
|
|
+ timeType: specialForm.timeType,
|
|
|
+ startTime: specialForm.timeType === "custom" ? specialForm.startTime : undefined,
|
|
|
+ endTime: specialForm.timeType === "custom" ? specialForm.endTime : undefined
|
|
|
+ };
|
|
|
+
|
|
|
+ if (specialEditIndex.value !== null) {
|
|
|
+ specialHours.value[specialEditIndex.value] = newItem;
|
|
|
+ ElMessage.success("编辑成功");
|
|
|
+ } else {
|
|
|
+ specialHours.value.push(newItem);
|
|
|
+ ElMessage.success("添加成功");
|
|
|
+ }
|
|
|
+
|
|
|
+ specialDialogVisible.value = false;
|
|
|
+ resetSpecialForm();
|
|
|
+};
|
|
|
+
|
|
|
+// 页面初始化时获取数据
|
|
|
+onMounted(async () => {
|
|
|
+ // TODO: 调用获取营业时间接口 getBusinessHours API，初始化 normalHours 和 specialHours
|
|
|
+ // const res = await getBusinessHours();
|
|
|
+ // if (res.data) {
|
|
|
+ // normalHours.value = res.data.normalHours || [];
|
|
|
+ // specialHours.value = res.data.specialHours || [];
|
|
|
+ // }
|
|
|
+ // TODO: 如果节假日列表需要从接口获取，调用 getHolidayList API
|
|
|
+ // const holidayRes = await getHolidayList({});
|
|
|
+ // if (holidayRes.data) {
|
|
|
+ // holidays.value = holidayRes.data.map(item => ({ label: item.name, value: item.name }));
|
|
|
+ // }
|
|
|
+});
|
|
|
+
|
|
|
+// 保存
|
|
|
+const handleSave = async () => {
|
|
|
+ // TODO: 调用保存营业时间接口 saveBusinessHours API
|
|
|
+ // 需要将 normalHours 和 specialHours 数据格式化为接口所需格式
|
|
|
+ // const params = {
|
|
|
+ // normalHours: normalHours.value,
|
|
|
+ // specialHours: specialHours.value
|
|
|
+ // };
|
|
|
+ // await saveBusinessHours(params);
|
|
|
+ console.log("正常营业时间:", normalHours.value);
|
|
|
+ console.log("特殊营业时间:", specialHours.value);
|
|
|
+ ElMessage.success("保存成功");
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.business-hours-container {
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: white;
|
|
|
+ .page-title {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .section {
|
|
|
+ margin-bottom: 32px;
|
|
|
+ .section-title {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .hours-list {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ .hours-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ .hours-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.day-buttons,
|
|
|
+.holiday-buttons {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ .el-button {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.time-picker-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+ .time-separator {
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+}
|
|
|
+.dialog-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+</style>
|
spy
