Skip to content

飞
飞鹤小程序
Commit d7641b87 authored by jt's avatar jt
Browse files
Options

秒杀样式调整

parent 732b2a01
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 35 deletions
components/SeckillSection.less
View file @ d7641b87
......@@ -159,7 +159,7 @@
.status_text {
color: #1C1C1C;
font-weight: bold;
font-size: 28rpx;
font-size: 20rpx;
}
}
}
......@@ -176,9 +176,9 @@
.tab_time_text {
&.start_time_text {
font-size: 36rpx;
font-size: 30rpx;
font-weight: 100;
color: #B27C1E;
color: #503404;
}
}
}
......@@ -188,7 +188,7 @@
.upcoming_text {
color: #1C1C1C;
font-weight: bold;
font-size: 28rpx;
font-size: 20rpx;
}
}
......@@ -196,7 +196,7 @@
.ended_text {
color: #1C1C1C;
font-weight: bold;
font-size: 28rpx;
font-size: 20rpx;
}
}
}
......@@ -300,14 +300,13 @@
}
.good_name {
font-size: 20rpx;
color: #333;
font-size: 24rpx;
color: #3C3C3C;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin-bottom: 8rpx;
font-weight: 500;
}
.good_price_container {
......@@ -317,14 +316,13 @@
margin-bottom: 8rpx;
.good_price {
font-size: 22rpx;
color: #FF6B35;
font-weight: bold;
font-size: 24rpx;
color: #B27C1E;
}
.good_original_price {
font-size: 18rpx;
color: #999;
font-size: 20rpx;
color: #999999;
text-decoration: line-through;
}
}
......@@ -341,18 +339,17 @@
transition: all 0.3s ease;
&.disabled {
background: #ccc;
background: #B9B9B9;
cursor: not-allowed;
}
.credits_sale_button_text {
font-size: 20rpx;
font-size: 24rpx;
color: #fff;
font-weight: bold;
}
&.disabled .credits_sale_button_text {
color: #999;
color: #fff;
}
}
}
......@@ -415,10 +412,6 @@
.credits_sale_button {
height: 70rpx;
.credits_sale_button_text {
font-size: 28rpx;
}
}
}
}
......@@ -436,13 +429,13 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
padding: 40rpx 34rpx;
.session_status_tag {
&.ongoing {
.status_text {
color: #1d1e25;
font-weight: bold;
// font-weight: bold;
font-size: 40rpx;
}
}
......@@ -475,9 +468,9 @@
// 开始时间样式（即将开始状态）
&.start_time_text {
font-size: 36rpx;
font-size: 30rpx;
font-weight: 100;
color: #B27C1E;
color: #503404;
}
// 倒计时数字样式
......
components/SeckillSection.vue
View file @ d7641b87
<template>
<view class="credits_sale_section" v-if="true">
<view class="credits_sale_section" v-if="shouldShowSection">
<!-- 标题区域 -->
<view class="credits_sale_area">
<text class="credits_sale_title">积分限时购</text>
......@@ -204,6 +204,20 @@ const getGoodButtonInfo = (good, session) => {
return { text: '立即秒杀', disabled: false };
};
// 判断是否应该显示整个section
const shouldShowSection = computed(() => {
// 检查是否有有效的秒杀数据
const hasSessions = creditsSaleData.value && creditsSaleData.value.sessions && creditsSaleData.value.sessions.length > 0;
console.log('shouldShowSection 检查:', {
hasSessions,
sessionsLength: creditsSaleData.value?.sessions?.length || 0,
creditsSaleData: creditsSaleData.value
});
return hasSessions;
});
// 获取Tab容器类名 - 使用计算属性
const getTabContainerClass = computed(() => {
const sessionCount = creditsSaleData.value.sessions?.length || 0;
......@@ -277,6 +291,8 @@ const mapSeckillDataToCreditsSale = (seckillData) => {
console.log('接口数据格式错误');
return;
}
console.log('开始处理接口数据，configs长度:', seckillData.data.configs.length);
const sessions = seckillData.data.configs.map((config, index) => {
// 判断场次状态
......@@ -351,8 +367,54 @@ const mapSeckillDataToCreditsSale = (seckillData) => {
};
});
// 按开始时间从早到晚排序
sessions.sort((a, b) => {
// 从timeTags中提取开始时间进行比较
const getStartTimeFromTags = (session) => {
const timeTag = session.timeTags.find(tag => tag.includes('开始') && /^\d{2}:\d{2}开始$/.test(tag));
if (timeTag) {
const timeStr = timeTag.replace('开始', '');
const [hours, minutes] = timeStr.split(':').map(Number);
return hours * 60 + minutes; // 转换为分钟数进行比较
}
return 0;
};
return getStartTimeFromTags(a) - getStartTimeFromTags(b);
});
creditsSaleData.value.sessions = sessions;
// 自动定位到正在秒杀的场次
const ongoingSessions = sessions.filter(session => session.status === 'ongoing');
if (ongoingSessions.length > 0) {
// 如果有多个正在秒杀的场次，选择开始时间最早的
const earliestOngoingSession = ongoingSessions.reduce((earliest, current) => {
const getStartTimeFromTags = (session) => {
const timeTag = session.timeTags.find(tag => tag.includes('开始') && /^\d{2}:\d{2}开始$/.test(tag));
if (timeTag) {
const timeStr = timeTag.replace('开始', '');
const [hours, minutes] = timeStr.split(':').map(Number);
return hours * 60 + minutes;
}
return 0;
};
return getStartTimeFromTags(current) < getStartTimeFromTags(earliest) ? current : earliest;
});
// 找到最早场次的索引
const targetIndex = sessions.findIndex(session => session.id === earliestOngoingSession.id);
if (targetIndex !== -1) {
currentSessionIndex.value = targetIndex;
}
} else {
// 没有正在秒杀的场次，定位到第一个
currentSessionIndex.value = 0;
}
console.log('映射后的秒杀数据:', creditsSaleData.value);
console.log('当前选中场次索引:', currentSessionIndex.value);
};
// 处理积分抢购点击事件
......@@ -367,16 +429,20 @@ const generateTestSeckillData = () => {
const baseTime = now.getTime();
// 第一场：正在进行中（1小时前开始，1小时后结束）
const session1Start = baseTime - 60 * 60 * 1000; // 1小时前
const session1End = baseTime + 60 * 60 * 1000; // 1小时后
const session1Start = baseTime - 1 * 60 * 60 * 1000; // 1小时前
const session1End = baseTime + 2 * 60 * 60 * 1000; // 1小时后
// 第二场：即将开始（2小时后开始，4小时后结束）
const session2Start = baseTime + 2 * 60 * 60 * 1000; // 2小时后
const session2End = baseTime + 4 * 60 * 60 * 1000; // 4小时后
const session2Start = baseTime + 1 * 60 * 60 * 1000; // 2小时后
const session2End = baseTime + 2 * 60 * 60 * 1000; // 4小时后
// 第三场：即将开始（4小时后开始，6小时后结束）
const session3Start = baseTime + 4 * 60 * 60 * 1000; // 4小时后
const session3End = baseTime + 6 * 60 * 60 * 1000; // 6小时后
const session3Start = baseTime - 3 * 60 * 60 * 1000; // 4小时后
const session3End = baseTime + 4 * 60 * 60 * 1000; // 6小时后
// 第四场：即将开始（8小时后开始，10小时后结束）
const session4Start = baseTime + 5 * 60 * 60 * 1000; // 8小时后
const session4End = baseTime + 6 * 60 * 60 * 1000; // 10小时后
return {
"code": "000000",
......@@ -501,7 +567,7 @@ const generateTestSeckillData = () => {
"start": session3Start
},
{
"end": session3End,
"end": session4End,
"goods": [
{
"button": {"key": 2, "text": "即将开始"},
......@@ -553,7 +619,7 @@ const generateTestSeckillData = () => {
}
],
"sessionKey": "session_3_upcoming",
"start": session3Start
"start": session4Start
}
],
"id": 1141,
......@@ -572,7 +638,7 @@ const loadSeckillData = async () => {
// 使用测试数据
// const testData = generateTestSeckillData();
// mapSeckillDataToCreditsSale(testData);
// // 初始化倒计时
// // // 初始化倒计时
// initCountdowns();
// 如果需要真实数据，可以取消注释下面的代码
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment