Skip to content

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

x

parent 794e0c0e
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 53 deletions
components/SeckillSection.less
View file @ d07bfaea
...@@ -174,14 +174,14 @@ ...@@ -174,14 +174,14 @@
border-radius: 4rpx; border-radius: 4rpx;
text-align: center; text-align: center;
line-height: 36rpx; line-height: 36rpx;
font-size: 16rpx; font-size: 24rpx;
font-weight: bold; font-weight: 400;
} }
.countdown_colon { .countdown_colon {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-size: 16rpx; font-size: 24rpx;
font-weight: bold; font-weight: 400;
margin: 0 2rpx; margin: 0 2rpx;
} }
} }
...@@ -496,6 +496,53 @@ ...@@ -496,6 +496,53 @@
justify-content: space-between; justify-content: space-between;
padding: 40rpx 34rpx; padding: 40rpx 34rpx;
// 正在秒杀状态布局
.single_session_content_ongoing {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
// 未开始/已结束状态布局 - 时间在前，状态在后，无间距
.single_session_content_other {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 0;
.tab_time_info {
margin: 0;
padding: 0;
display: flex;
align-items: center;
.tab_time_text {
&.start_time_text {
font-size: 28rpx;
font-weight: 400;
// 颜色通过内联样式动态设置
}
}
}
.session_status_tag {
margin: 0;
padding: 0;
margin-left: 0;
.status_text {
&.upcoming_text,
&.ended_text {
// 颜色通过内联样式动态设置
font-weight: 400;
font-size: 28rpx;
}
}
}
}
.session_status_tag { .session_status_tag {
&.ongoing { &.ongoing {
.status_text { .status_text {
...@@ -572,8 +619,8 @@ ...@@ -572,8 +619,8 @@
.countdown_colon { .countdown_colon {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-size: 20rpx; font-size: 24rpx;
font-weight: bold; font-weight: 400;
margin: 0 4rpx; margin: 0 4rpx;
} }
} }
......
components/SeckillSection.vue
View file @ d07bfaea
...@@ -41,17 +41,17 @@ ...@@ -41,17 +41,17 @@
</view> </view>
</view> </view>
<view class="session_status_tag ongoing"> <view class="session_status_tag ongoing">
<text class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text> <text class="status_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
</view> </view>
</view> </view>
<!-- 即将开始/已过期状态：开始时间在上，状态文案在下 --> <!-- 即将开始/已过期状态：开始时间在上，状态文案在下 -->
<view v-else class="tab_content_other"> <view v-else class="tab_content_other">
<view class="tab_time_info"> <view class="tab_time_info">
<text class="tab_time_text start_time_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">{{ getStartTime(session) }}</text> <text class="tab_time_text start_time_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">{{ getStartTime(session) }}</text>
</view> </view>
<view class="session_status_tag" :class="session.status"> <view class="session_status_tag" :class="session.status">
<text v-if="session.status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text> <text v-if="session.status === 'upcoming'" class="status_text upcoming_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text> <text v-else class="status_text ended_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">已结束</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -83,17 +83,17 @@ ...@@ -83,17 +83,17 @@
</view> </view>
</view> </view>
<view class="session_status_tag ongoing"> <view class="session_status_tag ongoing">
<text class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text> <text class="status_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
</view> </view>
</view> </view>
<!-- 即将开始/已过期状态：开始时间在上，状态文案在下 --> <!-- 即将开始/已过期状态：开始时间在上，状态文案在下 -->
<view v-else class="tab_content_other"> <view v-else class="tab_content_other">
<view class="tab_time_info"> <view class="tab_time_info">
<text class="tab_time_text start_time_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">{{ getStartTime(session) }}</text> <text class="tab_time_text start_time_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">{{ getStartTime(session) }}</text>
</view> </view>
<view class="session_status_tag" :class="session.status"> <view class="session_status_tag" :class="session.status">
<text v-if="session.status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text> <text v-if="session.status === 'upcoming'" class="status_text upcoming_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text> <text v-else class="status_text ended_text" :style="{ color: index === currentSessionIndex ? getColor('ongoingStatusTextColor')[itemIndex] : getColor('statusTextColor')[itemIndex] }">已结束</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -102,24 +102,32 @@ ...@@ -102,24 +102,32 @@
<!-- 单场次状态显示 --> <!-- 单场次状态显示 -->
<view class="single_session_status" v-else-if="creditsSaleData.sessions && creditsSaleData.sessions.length === 1"> <view class="single_session_status" v-else-if="creditsSaleData.sessions && creditsSaleData.sessions.length === 1">
<view class="session_status_tag" :class="creditsSaleData.sessions[0].status"> <view v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="single_session_content_ongoing">
<text v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text> <view class="session_status_tag" :class="creditsSaleData.sessions[0].status">
<text v-else-if="creditsSaleData.sessions[0].status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text> <text class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text> </view>
</view> <view class="tab_time_info">
<view class="tab_time_info"> <view class="tab_time_text countdown_display">
<view v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="tab_time_text countdown_display"> <text class="countdown_label" :style="{ color: getColor('countdownColor')[itemIndex] }">倒计时</text>
<text class="countdown_label" :style="{ color: getColor('countdownColor')[itemIndex] }">倒计时</text> <view class="countdown_numbers">
<view class="countdown_numbers"> <view v-for="(timeUnit, index) in getCountdownUnits(creditsSaleData.sessions[0].countdown)"
<view v-for="(timeUnit, index) in getCountdownUnits(creditsSaleData.sessions[0].countdown)" :key="index"
:key="index" class="countdown_unit">
class="countdown_unit"> <text class="countdown_number" :style="{ backgroundColor: getColor('countdownColor')[itemIndex] }">{{ timeUnit }}</text>
<text class="countdown_number" :style="{ backgroundColor: getColor('countdownColor')[itemIndex] }">{{ timeUnit }}</text> <text v-if="index < 2" class="countdown_colon" :style="{ color: getColor('countdownColor')[itemIndex] }">:</text>
<text v-if="index < 2" class="countdown_colon" :style="{ color: getColor('countdownColor')[itemIndex] }">:</text> </view>
</view> </view>
</view> </view>
</view> </view>
<text v-else class="tab_time_text start_time_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">{{ getStartTime(creditsSaleData.sessions[0]) }}</text> </view>
<view v-else class="single_session_content_other">
<view class="tab_time_info">
<text class="tab_time_text start_time_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">{{ getStartTime(creditsSaleData.sessions[0]) }}</text>
</view>
<view class="session_status_tag" :class="creditsSaleData.sessions[0].status">
<text v-if="creditsSaleData.sessions[0].status === 'upcoming'" class="status_text upcoming_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">已结束</text>
</view>
</view> </view>
</view> </view>
...@@ -221,7 +229,7 @@ const getColor = (type) => { ...@@ -221,7 +229,7 @@ const getColor = (type) => {
colors = ['#B27C1E', '#578EC4', '#7556A8', '#CEA46C', '#E7CCA4']; colors = ['#B27C1E', '#578EC4', '#7556A8', '#CEA46C', '#E7CCA4'];
break; break;
case 'ongoingStatusTextColor': case 'ongoingStatusTextColor':
// 正在秒杀状态文字颜色 // 被选中的tab的文字颜色（status_text和tab_time_text）
colors = ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#FFF0DF']; colors = ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#FFF0DF'];
break; break;
case 'buttonGradientColor': case 'buttonGradientColor':
...@@ -333,7 +341,7 @@ const getGoodButtonInfo = (good, session) => { ...@@ -333,7 +341,7 @@ const getGoodButtonInfo = (good, session) => {
// 未开始场次 // 未开始场次
if (status === 'upcoming') { if (status === 'upcoming') {
return { text: '即将开始', disabled: true }; return { text: '未开始', disabled: true };
} }
// 已结束场次 // 已结束场次
...@@ -703,19 +711,19 @@ const generateTestSeckillData = () => { ...@@ -703,19 +711,19 @@ const generateTestSeckillData = () => {
// 第一场：已结束（3小时前开始，2小时前结束） // 第一场：已结束（3小时前开始，2小时前结束）
const session1Start = baseTime - 3 * 60 * 60 * 1000; // 3小时前 const session1Start = baseTime - 3 * 60 * 60 * 1000; // 3小时前
const session1End = baseTime - 2 * 60 * 60 * 1000; // 2小时前 const session1End = baseTime - 1 * 60 * 60 * 1000; // 2小时前
// 第二场：正在秒杀（30分钟前开始，30分钟后结束） // 第二场：正在秒杀（30分钟前开始，30分钟后结束）
const session2Start = baseTime - 30 * 60 * 1000; // 30分钟前 const session2Start = baseTime - 30 * 60 * 1000; // 30分钟前
const session2End = baseTime - 30 * 60 * 1000; // 30分钟后 const session2End = baseTime + 30 * 60 * 1000; // 30分钟后
// 第三场：即将开始（1小时后开始，2小时后结束） // 第三场：即将开始（1小时后开始，2小时后结束）
const session3Start = baseTime - 1 * 60 * 60 * 1000; // 1小时后 const session3Start = baseTime + 1 * 60 * 60 * 1000; // 1小时后
const session3End = baseTime - 2 * 60 * 60 * 1000; // 2小时后 const session3End = baseTime + 2 * 60 * 60 * 1000; // 2小时后
// 第四场：即将开始（2小时后开始，3小时后结束） // 第四场：即将开始（2小时后开始，3小时后结束）
const session4Start = baseTime - 2 * 60 * 60 * 1000; // 2小时后 const session4Start = baseTime + 2 * 60 * 60 * 1000; // 2小时后
const session4End = baseTime - 3 * 60 * 60 * 1000; // 3小时后 const session4End = baseTime + 3 * 60 * 60 * 1000; // 3小时后
return { return {
"code": "000000", "code": "000000",
...@@ -741,22 +749,22 @@ const generateTestSeckillData = () => { ...@@ -741,22 +749,22 @@ const generateTestSeckillData = () => {
"priceSale": "200.00", "priceSale": "200.00",
"stock": 10 "stock": 10
}, },
{ // {
"button": {"key": 1, "text": "立即抢购"}, // "button": {"key": 1, "text": "立即抢购"},
"credits": 150, // "credits": 150,
"creditsType": "CREDITS", // "creditsType": "CREDITS",
"creditsTypeName": "积分", // "creditsTypeName": "积分",
"goods": { // "goods": {
"id": 102, // "id": 102,
"goodsName": "测试商品B - 正在进行中", // "goodsName": "测试商品B - 正在进行中",
"goodsImage": ["https://via.placeholder.com/150/4CAF50/FFFFFF?text=GoodB"], // "goodsImage": ["https://via.placeholder.com/150/4CAF50/FFFFFF?text=GoodB"],
"credits": "150", // "credits": "150",
"priceSale": "300.00", // "priceSale": "300.00",
"stock": 5 // "stock": 5
}, // },
"priceSale": "300.00", // "priceSale": "300.00",
"stock": 5 // "stock": 5
} // }
], ],
"sessionKey": "session_1_ongoing", "sessionKey": "session_1_ongoing",
"start": session1Start "start": session1Start
......
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