Skip to content

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

x

parent a03176d4
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 153 deletions
components/SeckillSection.less
View file @ 99a3c713
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-family: "PingFang SC";
// 标题区域样式 - 参考会员活动 // 标题区域样式 - 参考会员活动
.credits_sale_area { .credits_sale_area {
...@@ -85,7 +86,7 @@ ...@@ -85,7 +86,7 @@
.tab_item { .tab_item {
text-align: center; text-align: center;
padding: 15rpx 8rpx; padding: 20rpx 8rpx;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
color: #503404; color: #503404;
...@@ -107,11 +108,11 @@ ...@@ -107,11 +108,11 @@
// 弧形三角形样式 - 使用base64 SVG背景图 // 弧形三角形样式 - 使用base64 SVG背景图
.triangle-left { .triangle-left {
position: absolute; position: absolute;
left: -99rpx; left: -92rpx;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
width: 200rpx; width: 200rpx;
height: 102%; height: 104%;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -119,11 +120,11 @@ ...@@ -119,11 +120,11 @@
.triangle-right { .triangle-right {
position: absolute; position: absolute;
right: -99rpx; right: -92rpx;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
width: 200rpx; width: 200rpx;
height: 102%; height: 104%;
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -148,7 +149,7 @@ ...@@ -148,7 +149,7 @@
position: relative; position: relative;
.tab_time_info { .tab_time_info {
margin-bottom: 18rpx; margin-bottom: 10rpx;
.tab_time_text { .tab_time_text {
&.countdown_display { &.countdown_display {
...@@ -188,11 +189,15 @@ ...@@ -188,11 +189,15 @@
} }
.session_status_tag { .session_status_tag {
margin: 0 !important;
line-height: 1;
&.ongoing { &.ongoing {
.status_text { .status_text {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-weight: bold; font-weight: bold;
font-size: 20rpx; font-size: 20rpx;
display: block;
line-height: 1;
} }
} }
} }
...@@ -206,23 +211,30 @@ ...@@ -206,23 +211,30 @@
position: relative; position: relative;
.tab_time_info { .tab_time_info {
margin-bottom: 6rpx; margin-bottom: 10rpx;
padding: 0;
line-height: 1;
.tab_time_text { .tab_time_text {
&.start_time_text { &.start_time_text {
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
line-height: 1;
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
} }
} }
} }
.session_status_tag { .session_status_tag {
margin: 0 !important;
line-height: 1;
&.upcoming { &.upcoming {
.upcoming_text { .upcoming_text {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-weight: bold; font-weight: bold;
font-size: 20rpx; font-size: 20rpx;
display: block;
line-height: 1;
} }
} }
...@@ -231,6 +243,8 @@ ...@@ -231,6 +243,8 @@
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-weight: bold; font-weight: bold;
font-size: 20rpx; font-size: 20rpx;
display: block;
line-height: 1;
} }
} }
} }
...@@ -238,13 +252,16 @@ ...@@ -238,13 +252,16 @@
// 保留原有样式作为备用 // 保留原有样式作为备用
.session_status_tag { .session_status_tag {
margin-bottom: 6rpx; margin: 0;
padding: 0;
line-height: 1;
&.ongoing { &.ongoing {
.status_text { .status_text {
color: #1C1C1C; color: #1C1C1C;
font-weight: bold; font-weight: bold;
font-size: 20rpx; font-size: 20rpx;
line-height: 1;
} }
} }
...@@ -252,11 +269,15 @@ ...@@ -252,11 +269,15 @@
.countdown_text { .countdown_text {
color: #666; color: #666;
font-size: 18rpx; font-size: 18rpx;
line-height: 1;
} }
} }
} }
.tab_time_info { .tab_time_info {
margin: 0;
padding: 0;
line-height: 1;
.tab_time_text { .tab_time_text {
font-size: 16rpx; font-size: 16rpx;
color: #666; color: #666;
...@@ -305,7 +326,7 @@ ...@@ -305,7 +326,7 @@
width: 220rpx; // 固定宽度220rpx width: 220rpx; // 固定宽度220rpx
height: 380rpx; // 固定高度380rpx height: 380rpx; // 固定高度380rpx
border-radius: 16rpx; border-radius: 16rpx;
padding: 15rpx; padding: 15rpx 15rpx 39rpx 15rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -362,8 +383,8 @@ ...@@ -362,8 +383,8 @@
.credits_sale_button { .credits_sale_button {
width: 100%; width: 100%;
height: 50rpx; height: 62rpx;
border-radius: 25rpx; border-radius: 50rpx;
color: #fff; color: #fff;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -396,6 +417,7 @@ ...@@ -396,6 +417,7 @@
.credits_sale_good_item { .credits_sale_good_item {
width: 100%; width: 100%;
max-width: 600rpx; max-width: 600rpx;
height: 288rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
...@@ -445,7 +467,8 @@ ...@@ -445,7 +467,8 @@
} }
.credits_sale_button { .credits_sale_button {
height: 70rpx; width: 250rpx;
// height: 70rpx;
} }
} }
} }
...@@ -469,24 +492,24 @@ ...@@ -469,24 +492,24 @@
&.ongoing { &.ongoing {
.status_text { .status_text {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
// font-weight: bold; font-weight: 400;
font-size: 40rpx; font-size: 28rpx;
} }
} }
&.upcoming { &.upcoming {
.upcoming_text { .upcoming_text {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-weight: bold; font-weight: 400;
font-size: 40rpx; font-size: 28rpx;
} }
} }
&.ended { &.ended {
.ended_text { .ended_text {
// 颜色通过内联样式动态设置 // 颜色通过内联样式动态设置
font-weight: bold; font-weight: 400;
font-size: 40rpx; font-size: 28rpx;
} }
} }
} }
...@@ -511,8 +534,8 @@ ...@@ -511,8 +534,8 @@
&.countdown_display { &.countdown_display {
.countdown_label { .countdown_label {
color: #B27C1E; color: #B27C1E;
font-size: 36rpx; font-size: 28rpx;
font-weight: 100; font-weight: 400;
} }
.countdown_numbers { .countdown_numbers {
...@@ -535,8 +558,8 @@ ...@@ -535,8 +558,8 @@
border-radius: 6rpx; border-radius: 6rpx;
text-align: center; text-align: center;
line-height: 34rpx; line-height: 34rpx;
font-size: 18rpx; font-size: 24rpx;
font-weight: bold; font-weight: 400;
} }
.countdown_colon { .countdown_colon {
......
components/SeckillSection.vue
View file @ 99a3c713
...@@ -84,9 +84,9 @@ ...@@ -84,9 +84,9 @@
<!-- 场次商品列表 - 根据商品数量动态调整布局 --> <!-- 场次商品列表 - 根据商品数量动态调整布局 -->
<view class="session_goods_list" <view class="session_goods_list"
:class="getGoodsListClass()"> :class="getGoodsListClass()">
<view v-for="(good, goodIndex) in creditsSaleData.sessions[currentSessionIndex]?.goods || []" <view v-for="(good, goodIndex) in creditsSaleData.sessions[currentSessionIndex]?.goods || []"
:key="goodIndex" class="credits_sale_good_item" :key="goodIndex" class="credits_sale_good_item"
@click="!getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled && handleCreditsSaleClickThrottled(good)"> @click="handleCreditsSaleClickThrottled(good)">
<!-- 商品图片 --> <!-- 商品图片 -->
<view class="good_image_placeholder"> <view class="good_image_placeholder">
<image v-if="good.image" :src="good.image" mode="aspectFill" class="good_image" /> <image v-if="good.image" :src="good.image" mode="aspectFill" class="good_image" />
...@@ -647,22 +647,22 @@ const generateTestSeckillData = () => { ...@@ -647,22 +647,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
...@@ -722,116 +722,116 @@ const generateTestSeckillData = () => { ...@@ -722,116 +722,116 @@ const generateTestSeckillData = () => {
"sessionKey": "session_2_ongoing", "sessionKey": "session_2_ongoing",
"start": session2Start "start": session2Start
}, },
// { {
// "end": session3End, "end": session3End,
// "goods": [ "goods": [
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 300, "credits": 300,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 301, "id": 301,
// "goodsName": "测试商品D - 即将开始", "goodsName": "测试商品D - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"], "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
// "credits": "300", "credits": "300",
// "priceSale": "600.00", "priceSale": "600.00",
// "stock": 3 "stock": 3
// }, },
// "priceSale": "600.00", "priceSale": "600.00",
// "stock": 3 "stock": 3
// }, },
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 250, "credits": 250,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 302, "id": 302,
// "goodsName": "测试商品E - 即将开始", "goodsName": "测试商品E - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"], "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
// "credits": "250", "credits": "250",
// "priceSale": "500.00", "priceSale": "500.00",
// "stock": 6 "stock": 6
// }, },
// "priceSale": "500.00", "priceSale": "500.00",
// "stock": 6 "stock": 6
// }, },
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 180, "credits": 180,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 303, "id": 303,
// "goodsName": "测试商品F - 即将开始", "goodsName": "测试商品F - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"], "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
// "credits": "180", "credits": "180",
// "priceSale": "360.00", "priceSale": "360.00",
// "stock": 12 "stock": 12
// }, },
// "priceSale": "360.00", "priceSale": "360.00",
// "stock": 12 "stock": 12
// } }
// ], ],
// "sessionKey": "session_3_upcoming", "sessionKey": "session_3_upcoming",
// "start": session3Start "start": session3Start
// }, },
// { {
// "end": session4End, "end": session4End,
// "goods": [ "goods": [
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 300, "credits": 300,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 301, "id": 301,
// "goodsName": "测试商品D - 即将开始", "goodsName": "测试商品D - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"], "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
// "credits": "300", "credits": "300",
// "priceSale": "600.00", "priceSale": "600.00",
// "stock": 3 "stock": 3
// }, },
// "priceSale": "600.00", "priceSale": "600.00",
// "stock": 3 "stock": 3
// }, },
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 250, "credits": 250,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 302, "id": 302,
// "goodsName": "测试商品E - 即将开始", "goodsName": "测试商品E - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"], "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
// "credits": "250", "credits": "250",
// "priceSale": "500.00", "priceSale": "500.00",
// "stock": 6 "stock": 6
// }, },
// "priceSale": "500.00", "priceSale": "500.00",
// "stock": 6 "stock": 6
// }, },
// { {
// "button": {"key": 2, "text": "即将开始"}, "button": {"key": 2, "text": "即将开始"},
// "credits": 180, "credits": 180,
// "creditsType": "CREDITS", "creditsType": "CREDITS",
// "creditsTypeName": "积分", "creditsTypeName": "积分",
// "goods": { "goods": {
// "id": 303, "id": 303,
// "goodsName": "测试商品F - 即将开始", "goodsName": "测试商品F - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"], "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
// "credits": "180", "credits": "180",
// "priceSale": "360.00", "priceSale": "360.00",
// "stock": 12 "stock": 12
// }, },
// "priceSale": "360.00", "priceSale": "360.00",
// "stock": 12 "stock": 12
// } }
// ], ],
// "sessionKey": "session_3_upcoming", "sessionKey": "session_3_upcoming",
// "start": session4Start "start": session4Start
// } }
], ],
"id": 1141, "id": 1141,
"name": "测试秒杀", "name": "测试秒杀",
...@@ -849,7 +849,6 @@ const loadSeckillData = async () => { ...@@ -849,7 +849,6 @@ const loadSeckillData = async () => {
// 使用测试数据 // 使用测试数据
// const testData = generateTestSeckillData(); // const testData = generateTestSeckillData();
// mapSeckillDataToCreditsSale(testData); // mapSeckillDataToCreditsSale(testData);
// // // 初始化倒计时
// initCountdowns(); // 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