Skip to content

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

x

parent 3730162c
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 37 deletions
components/SeckillSection.less
View file @ 51f86cca
......@@ -185,7 +185,7 @@
.session_status_tag {
&.ongoing {
.status_text {
color: #1C1C1C;
// 颜色通过内联样式动态设置
font-weight: bold;
font-size: 20rpx;
}
......@@ -207,7 +207,7 @@
&.start_time_text {
font-size: 30rpx;
font-weight: 100;
color: #503404;
// 颜色通过内联样式动态设置
}
}
}
......@@ -215,7 +215,7 @@
.session_status_tag {
&.upcoming {
.upcoming_text {
color: #1C1C1C;
// 颜色通过内联样式动态设置
font-weight: bold;
font-size: 20rpx;
}
......@@ -223,7 +223,7 @@
&.ended {
.ended_text {
color: #1C1C1C;
// 颜色通过内联样式动态设置
font-weight: bold;
font-size: 20rpx;
}
......@@ -345,7 +345,7 @@
.good_price {
font-size: 24rpx;
color: #B27C1E;
// 颜色通过内联样式动态设置
}
.good_original_price {
......@@ -479,7 +479,7 @@
.session_status_tag {
&.ongoing {
.status_text {
color: #1d1e25;
// 颜色通过内联样式动态设置
// font-weight: bold;
font-size: 40rpx;
}
......@@ -487,7 +487,7 @@
&.upcoming {
.upcoming_text {
color: #1d1e25;
// 颜色通过内联样式动态设置
font-weight: bold;
font-size: 40rpx;
}
......@@ -495,7 +495,7 @@
&.ended {
.ended_text {
color: #1d1e25;
// 颜色通过内联样式动态设置
font-weight: bold;
font-size: 40rpx;
}
......@@ -505,7 +505,7 @@
.tab_time_info {
.tab_time_text {
font-size: 20rpx;
color: #B27C1E;
// 颜色通过内联样式动态设置
font-weight: bold;
display: flex;
align-items: center;
......@@ -515,7 +515,7 @@
&.start_time_text {
font-size: 30rpx;
font-weight: 100;
color: #503404;
// 颜色通过内联样式动态设置
}
// 倒计时数字样式
......
components/SeckillSection.vue
View file @ 51f86cca
......@@ -36,17 +36,17 @@
</view>
</view>
<view class="session_status_tag ongoing">
<text class="status_text">正在秒杀</text>
<text class="status_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
</view>
</view>
<!-- 即将开始/已过期状态：开始时间在上，状态文案在下 -->
<view v-else class="tab_content_other">
<view class="tab_time_info">
<text class="tab_time_text start_time_text">{{ getStartTime(session) }}</text>
<text class="tab_time_text start_time_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">{{ getStartTime(session) }}</text>
</view>
<view class="session_status_tag" :class="session.status">
<text v-if="session.status === 'upcoming'" class="status_text upcoming_text">即将开始</text>
<text v-else class="status_text ended_text">已结束</text>
<text v-if="session.status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text>
</view>
</view>
</view>
......@@ -55,9 +55,9 @@
<!-- 单场次状态显示 -->
<view class="single_session_status" v-else-if="creditsSaleData.sessions && creditsSaleData.sessions.length === 1">
<view class="session_status_tag" :class="creditsSaleData.sessions[0].status">
<text v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="status_text">正在秒杀</text>
<text v-else-if="creditsSaleData.sessions[0].status === 'upcoming'" class="status_text upcoming_text">即将开始</text>
<text v-else class="status_text ended_text">已结束</text>
<text v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="status_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
<text v-else-if="creditsSaleData.sessions[0].status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text>
</view>
<view class="tab_time_info">
<view v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="tab_time_text countdown_display">
......@@ -71,7 +71,7 @@
</view>
</view>
</view>
<text v-else class="tab_time_text start_time_text">{{ getStartTime(creditsSaleData.sessions[0]) }}</text>
<text v-else class="tab_time_text start_time_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">{{ getStartTime(creditsSaleData.sessions[0]) }}</text>
</view>
</view>
......@@ -96,7 +96,7 @@
<text class="good_name">{{ good.name }}</text>
<!-- 积分价格 -->
<view class="good_price_container">
<text class="good_price">{{ good.points }}积分</text>
<text class="good_price" :style="{ color: getColor('goodPriceColor')[itemIndex] }">{{ good.points }}积分</text>
<text class="good_original_price"
v-if="good.originalPoints && good.originalPoints !== good.points">{{
good.originalPoints }}积分</text>
......@@ -161,6 +161,14 @@ const getColor = (type) => {
// Tab切换区域背景色
colors = ['#e5d5b0', '#a9cce8', '#d7c9ee', '#e6d7a5', '#2b221d'];
break;
case 'statusTextColor':
// 状态文字和时间文字颜色
colors = ['#503404', '#284a6c', '#322d6f', '#513403', '#f7d1a0'];
break;
case 'goodPriceColor':
// 商品价格颜色
colors = ['#a57e35', '#354a69', '#342e6b', '#754b20', '#eae3be'];
break;
}
return colors;
};
......@@ -589,9 +597,9 @@ const generateTestSeckillData = () => {
const session1Start = baseTime - 3 * 60 * 60 * 1000; // 3小时前
const session1End = baseTime - 2 * 60 * 60 * 1000; // 2小时前
// 第二场：已结束（2小时前开始，1小时前结束）
const session2Start = baseTime - 2 * 60 * 60 * 1000; // 2小时前
const session2End = baseTime - 1 * 60 * 60 * 1000; // 1小时前
// 第二场：正在秒杀（30分钟前开始，30分钟后结束）
const session2Start = baseTime - 30 * 60 * 1000; // 30分钟前
const session2End = baseTime + 30 * 60 * 1000; // 30分钟后
// 第三场：即将开始（1小时后开始，2小时后结束）
const session3Start = baseTime + 1 * 60 * 60 * 1000; // 1小时后
......@@ -649,23 +657,55 @@ const generateTestSeckillData = () => {
"end": session2End,
"goods": [
{
"button": {"key": 2, "text": "即将开始"},
"button": {"key": 1, "text": "立即抢购"},
"credits": 200,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 201,
"goodsName": "测试商品C - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/2196F3/FFFFFF?text=GoodC"],
"goodsName": "限时秒杀商品A - 正在进行中",
"goodsImage": ["https://via.placeholder.com/150/FF6B35/FFFFFF?text=SeckillA"],
"credits": "200",
"priceSale": "400.00",
"stock": 8
"stock": 15
},
"priceSale": "400.00",
"stock": 15
},
{
"button": {"key": 1, "text": "立即抢购"},
"credits": 300,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 202,
"goodsName": "限时秒杀商品B - 正在进行中",
"goodsImage": ["https://via.placeholder.com/150/4CAF50/FFFFFF?text=SeckillB"],
"credits": "300",
"priceSale": "600.00",
"stock": 8
},
"priceSale": "600.00",
"stock": 8
},
{
"button": {"key": 1, "text": "立即抢购"},
"credits": 150,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 203,
"goodsName": "限时秒杀商品C - 正在进行中",
"goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=SeckillC"],
"credits": "150",
"priceSale": "300.00",
"stock": 12
},
"priceSale": "300.00",
"stock": 12
}
],
"sessionKey": "session_2_upcoming",
"sessionKey": "session_2_ongoing",
"start": session2Start
},
{
......@@ -793,18 +833,18 @@ const generateTestSeckillData = () => {
const loadSeckillData = async () => {
try {
// 使用测试数据
const testData = generateTestSeckillData();
mapSeckillDataToCreditsSale(testData);
// // 初始化倒计时
initCountdowns();
// const testData = generateTestSeckillData();
// mapSeckillDataToCreditsSale(testData);
// // // 初始化倒计时
// initCountdowns();
// 如果需要真实数据，可以取消注释下面的代码
// const seckillData = await integralStore.getSeckillData(props.isdebug);
// if (seckillData) {
// mapSeckillDataToCreditsSale(seckillData);
// // 初始化倒计时
// initCountdowns();
// }
const seckillData = await integralStore.getSeckillData(props.isdebug);
if (seckillData) {
mapSeckillDataToCreditsSale(seckillData);
// 初始化倒计时
initCountdowns();
}
} catch (error) {
console.error('获取秒杀数据失败:', error);
}
......
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