85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
||
<div style="padding: 24px; height: 100%">
|
||
<a-card bordered style="height: 100%">
|
||
<!-- 可访问时间段 -->
|
||
<div style="font-size: 16px; margin-bottom: 16px; display: flex; gap: 8px; align-items: center">
|
||
当前可访问时间：
|
||
|
||
<a-date-picker v-model:value="tempStart" format="YYYY-MM-DD HH:mm" show-time style="width: 180px" @change="onTimeChange('start')" />
|
||
|
||
——
|
||
|
||
<a-date-picker v-model:value="tempEnd" format="YYYY-MM-DD HH:mm" show-time style="width: 180px" @change="onTimeChange('end')" />
|
||
</div>
|
||
|
||
<a-card style="height: 500px" type="inner" bordered> 移动端各页面元素替换（开发中） </a-card>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue';
|
||
import { message, Modal } from 'ant-design-vue';
|
||
import dayjs from 'dayjs';
|
||
import { getH5Time, setH5Time } from './h5.api';
|
||
|
||
const startTime = ref('');
|
||
const endTime = ref('');
|
||
const tempStart = ref(null);
|
||
const tempEnd = ref(null);
|
||
|
||
// 初始化：从后端加载时间
|
||
onMounted(async () => {
|
||
try {
|
||
const res = await getH5Time();
|
||
startTime.value = res.startTime;
|
||
endTime.value = res.endTime;
|
||
tempStart.value = dayjs(startTime.value);
|
||
tempEnd.value = dayjs(endTime.value);
|
||
} catch (err) {
|
||
message.error('访问时间获取失败');
|
||
}
|
||
});
|
||
|
||
const onTimeChange = (type) => {
|
||
const newStart = type === 'start' ? tempStart.value : dayjs(startTime.value);
|
||
const newEnd = type === 'end' ? tempEnd.value : dayjs(endTime.value);
|
||
|
||
if (newStart.isAfter(newEnd)) {
|
||
message.error('开始时间不能晚于结束时间');
|
||
if (type === 'start') tempStart.value = dayjs(startTime.value);
|
||
else tempEnd.value = dayjs(endTime.value);
|
||
return;
|
||
}
|
||
|
||
Modal.confirm({
|
||
title: '确认修改时间？',
|
||
content:
|
||
`是否将${type === 'start' ? '开始' : '结束'}时间修改为：` +
|
||
(type === 'start' ? newStart.format('YYYY-MM-DD HH:mm') : newEnd.format('YYYY-MM-DD HH:mm')),
|
||
okText: '确认',
|
||
cancelText: '取消',
|
||
async onOk() {
|
||
const payload = {
|
||
startTime: newStart.format('YYYY-MM-DD HH:mm:ss'),
|
||
endTime: newEnd.format('YYYY-MM-DD HH:mm:ss'),
|
||
};
|
||
try {
|
||
await setH5Time(payload);
|
||
startTime.value = payload.startTime;
|
||
endTime.value = payload.endTime;
|
||
message.success('访问时间已修改');
|
||
} catch (e) {
|
||
message.error('修改失败');
|
||
tempStart.value = dayjs(startTime.value);
|
||
tempEnd.value = dayjs(endTime.value);
|
||
}
|
||
},
|
||
onCancel() {
|
||
tempStart.value = dayjs(startTime.value);
|
||
tempEnd.value = dayjs(endTime.value);
|
||
},
|
||
});
|
||
};
|
||
</script>
|