@@ -181,14 +184,8 @@ onBeforeMount(async () => {
const url = await online_url('/static/plugins/seckill/images/diy/').then(res => res);
new_url.value = url + 'time.png';
})
-
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
-const time_config = [
- { key: 'hour', value: 12 },
- { key: 'minute', value: 30 },
- { key: 'second', value: 52 },
-]
const time_bg = computed(() => {
const { countdown_bg_color_list, countdown_direction } = new_style.value;
// 渐变
@@ -275,12 +272,72 @@ const default_list = {
],
};
const list = ref([]);
+const time_config = reactive([
+ { key: 'hour', value: '00' },
+ { key: 'minute', value: '00' },
+ { key: 'second', value: '00' },
+]);
+const intervalId = ref(undefined);
+const seckill_time = ref({
+ endTime: '2024-09-04 18:51:00',
+ startTime: '2024-09-04 18:51:00',
+ status: 0,
+ time_first_text: '距结束'
+});
+const updateCountdown = () => {
+ const now = new Date();
+ let endTime = seckill_time.value.endTime;
+ if (seckill_time.value.status === 0) {
+ endTime = seckill_time.value.startTime;
+ }
+ const distance = new Date(endTime).getTime() - now.getTime();
+ // 如果倒计时结束，显示结束信息
+ if (distance <= 1000) {
+ clearInterval(intervalId.value);
+ // 如果是待开始状态，则显示开始倒计时，并且在结束的时候根据结束时候再执行一个定时器
+ if (seckill_time.value.status === 0) {
+ seckill_time.value.status = 1;
+ seckill_time.value.time_first_text = '距结束';
+ // 先执行一次倒计时，后续的等待倒计时执行
+ setTimeout(() => { updateCountdown();}, 0);
+ intervalId.value = setInterval(updateCountdown, 1000);
+ }
+ return;
+ }
+ // 计算时间
+ const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+ const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+ const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+ time_config.forEach((item) => {
+ if (item.key == 'hour') {
+ item.value = hours < 10 ? '0' + hours : hours.toString();
+ } else if (item.key == 'minute') {
+ item.value = minutes < 10 ? '0' + minutes : minutes.toString();
+ } else if (item.key == 'second') {
+ item.value = seconds < 10 ? '0' + seconds : seconds.toString();
+ }
+ });
+}
+// 更新倒计时函数
onBeforeMount(() => {
- SeckillAPI.getSeckillList((res: any) => {
+ SeckillAPI.getSeckillList({}).then((res: any) => {
const data = res.data;
- console.log(data);
if (!isEmpty(data.current)) {
- list.value = data.current.goods;
+ if (!isEmpty(data.current.goods)) {
+ list.value = data.current.goods;
+ } else {
+ list.value = Array(4).fill(default_list);
+ }
+ const { status, time_first_text } = data.current.time;
+ seckill_time.value = {
+ endTime: '2024-09-05 09:36:00',
+ startTime: '2024-09-05 09:33:00',
+ status: 0,
+ time_first_text: time_first_text
+ }
+ // 先执行一次倒计时，后续的等待倒计时执行
+ setTimeout(() => { updateCountdown();}, 0);
+ intervalId.value = setInterval(updateCountdown, 1000);
} else {
list.value = Array(4).fill(default_list);
}
@@ -364,7 +421,6 @@ const autoplay = ref(false);
const slides_per_group = ref(1);
// 内容参数的集合
watchEffect(() => {
-
// 是否滚动
if (new_style.value.is_roll) {
autoplay.value = {
diff --git a/src/components/model-seckill/model-seckill-content.vue b/src/components/model-seckill/model-seckill-content.vue
index bb772b07..75ab6de7 100644
--- a/src/components/model-seckill/model-seckill-content.vue
+++ b/src/components/model-seckill/model-seckill-content.vue
@@ -120,12 +120,9 @@ const props = defineProps({
}),
},
});
-const state = reactive({
- form: props.value,
- data: props.styles,
-});
-// 如果需要解构，确保使用toRefs
-const { form, data } = toRefs(state);
+
+const form = ref(props.value);
+const data = ref(props.styles);
watchEffect(() => {
form.value = props.value;