Skip to content

飞
飞鹤小程序
Commit 106e7846 authored by spc's avatar spc
Browse files
Options

Merge branch 'feihesanqi_20251014' of http://gitlab.dui88.com/fh/20250528_FHQ1... 

Merge branch 'feihesanqi_20251014' of http://gitlab.dui88.com/fh/20250528_FHQ1 into feihesanqi_20251014t pu:
parents ee263c3a c38cce16
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 209 deletions
components/SeckillSection.less
View file @ 106e7846
......@@ -130,7 +130,7 @@
left: 50rpx;
right: 50rpx;
top: 0;
bottom: -2rpx;
bottom: -18rpx;
// 背景色通过内联样式动态设置
}
......@@ -163,7 +163,7 @@
display: inline-block;
width: 36rpx;
height: 36rpx;
background-color: #B27C1E;
// 背景色通过内联样式动态设置
color: #fff;
border-radius: 4rpx;
text-align: center;
......@@ -173,7 +173,7 @@
}
.countdown_colon {
color: #B27C1E;
// 颜色通过内联样式动态设置
font-size: 16rpx;
font-weight: bold;
margin: 0 2rpx;
......@@ -329,7 +329,7 @@
.good_name {
font-size: 24rpx;
color: #3C3C3C;
// 颜色通过内联样式动态设置
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -358,30 +358,13 @@
.credits_sale_button {
width: 100%;
height: 50rpx;
background: #b27c1e;
border-radius: 25rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
// 不同等级的按钮颜色 - 基于Integral模块的jifen颜色
&.item-0 {
background: linear-gradient(90deg, #5f3c27 0%, #d7aa72 100%);
}
&.item-1 {
background: linear-gradient(90deg, #385e85 0%, #6c9bc9 100%);
}
&.item-2 {
background: linear-gradient(90deg, #403294 0%, #756ae0 100%);
}
&.item-3 {
background: linear-gradient(90deg, #5f3c27 0%, #d4a468 100%);
}
&.item-4 {
background: linear-gradient(90deg, #f6c79c 0%, #d4a468 100%);
}
// 背景色通过内联样式动态设置
&.disabled {
background: #B9B9B9;
......@@ -541,7 +524,7 @@
display: inline-block;
width: 34rpx;
height: 34rpx;
background-color: #B27C1E;
// 背景色通过内联样式动态设置
color: #fff;
border-radius: 6rpx;
text-align: center;
......@@ -551,7 +534,7 @@
}
.countdown_colon {
color: #B27C1E;
// 颜色通过内联样式动态设置
font-size: 20rpx;
font-weight: bold;
margin: 0 4rpx;
......
components/SeckillSection.vue
View file @ 106e7846
......@@ -16,11 +16,11 @@
<view v-for="(session, index) in creditsSaleData.sessions || []" :key="index" class="tab_item"
:class="[`item-${itemIndex}`, { active: index === currentSessionIndex }]" @click="currentSessionIndex = index">
<!-- 背景色元素 - 只在active状态下显示 -->
<view v-if="index === currentSessionIndex" class="tab_bg_element" :style="{ left: index > 0 ? '50rpx' : '0', backgroundColor: getColor('bgColor')[itemIndex] }"></view>
<view v-if="index === currentSessionIndex" class="tab_bg_element" :style="{ left: index > 0 ? '50rpx' : '0', right: index < creditsSaleData.sessions.length - 1 ? '50rpx' : '0', backgroundColor: getColor('bgColor')[itemIndex] }"></view>
<!-- 左侧弧形三角形 - 使用base64 SVG，第一个tab不显示 -->
<view v-if="index === currentSessionIndex && index > 0" class="triangle-left" :style="{ backgroundImage: getTriangleLeftSvg(itemIndex) }"></view>
<!-- 右侧弧形三角形 - 使用base64 SVG -->
<view v-if="index === currentSessionIndex" class="triangle-right" :style="{ backgroundImage: getTriangleRightSvg(itemIndex) }"></view>
<!-- 右侧弧形三角形 - 使用base64 SVG，最后一个tab不显示 -->
<view v-if="index === currentSessionIndex && index < creditsSaleData.sessions.length - 1" class="triangle-right" :style="{ backgroundImage: getTriangleRightSvg(itemIndex) }"></view>
<!-- 正在秒杀状态：倒计时在上，文案在下 -->
<view v-if="session.status === 'ongoing'" class="tab_content_ongoing">
<view class="tab_time_info">
......@@ -29,14 +29,14 @@
<view v-for="(timeUnit, index) in getCountdownUnits(session.countdown)"
:key="index"
class="countdown_unit">
<text class="countdown_number">{{ timeUnit }}</text>
<text v-if="index < 2" class="countdown_colon">:</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>
</view>
</view>
</view>
</view>
<view class="session_status_tag ongoing">
<text class="status_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
<text class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text>
</view>
</view>
<!-- 即将开始/已过期状态：开始时间在上，状态文案在下 -->
......@@ -55,7 +55,7 @@
<!-- 单场次状态显示 -->
<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" :style="{ color: getColor('statusTextColor')[itemIndex] }">正在秒杀</text>
<text v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="status_text" :style="{ color: getColor('ongoingStatusTextColor')[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>
......@@ -66,8 +66,8 @@
<view v-for="(timeUnit, index) in getCountdownUnits(creditsSaleData.sessions[0].countdown)"
:key="index"
class="countdown_unit">
<text class="countdown_number">{{ timeUnit }}</text>
<text v-if="index < 2" class="countdown_colon">:</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>
</view>
</view>
</view>
......@@ -93,7 +93,7 @@
<!-- 商品信息容器 -->
<view class="good_info_container">
<!-- 商品信息 -->
<text class="good_name">{{ good.name }}</text>
<text class="good_name" :style="{ color: getColor('goodNameColor')[itemIndex] }">{{ good.name }}</text>
<!-- 积分价格 -->
<view class="good_price_container">
<text class="good_price" :style="{ color: getColor('goodPriceColor')[itemIndex] }">{{ good.points }}积分</text>
......@@ -104,7 +104,7 @@
<!-- 立即抢购按钮 -->
<view class="credits_sale_button"
:class="[`item-${itemIndex}`, { disabled: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled }]"
:style="{ backgroundColor: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled ? '#B9B9B9' : getColor('buttonColor')[itemIndex] }"
:style="{ background: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled ? '#B9B9B9' : getColor('buttonGradientColor')[itemIndex] }"
@click="!getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled && handleCreditsSaleClickThrottled(good)">
<text class="credits_sale_button_text">{{ getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).text }}</text>
</view>
......@@ -147,15 +147,7 @@ const getColor = (type) => {
colors = ['#EDE8D6', '#d6e8f7', '#eeeaf3', '#f2e9c7', '#49443f'];
break;
case 'textColor':
colors = ['#503404', '#284a6c', '#322d6f', '#503404', '#fff0df'];
break;
case 'buttonColor':
// 基于Integral模块中jifen的currentPoints颜色
colors = ['#5f3c27', '#385e85', '#403294', '#5f3c27', '#f6c79c'];
break;
case 'accentColor':
// 基于Integral模块中jifen的totalPoints颜色
colors = ['#d7aa72', '#6c9bc9', '#756ae0', '#d4a468', '#d4a468'];
colors = ['#000000', '#000000', '#000000', '#000000', '#fbf0e1'];
break;
case 'tabsColor':
// Tab切换区域背景色
......@@ -169,6 +161,28 @@ const getColor = (type) => {
// 商品价格颜色
colors = ['#a57e35', '#354a69', '#342e6b', '#754b20', '#eae3be'];
break;
case 'countdownColor':
// 倒计时数字背景色和冒号颜色
colors = ['#a57e35', '#6c8dbf', '#7059a3', '#c3a574', '#030201'];
break;
case 'ongoingStatusTextColor':
// 正在秒杀状态文字颜色
colors = ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#fbf0e1'];
break;
case 'buttonGradientColor':
// 按钮渐变背景色
colors = [
'linear-gradient(90deg, #916633 0%, #AB7A44 100%)',
'linear-gradient(90deg, #5089C1 0%, #6FA2D5 100%)',
'linear-gradient(90deg, #7253A5 0%, #9879CC 100%)',
'linear-gradient(90deg, #CDA36B 0%, #E0B97D 100%)',
'linear-gradient(90deg, #000000 0%, #2C1500 100%)'
];
break;
case 'goodNameColor':
// 商品名称颜色
colors = ['#3c3c3c', '#3c3c3c', '#3c3c3c', '#3c3c3c', '#fbf0e1'];
break;
}
return colors;
};
......@@ -653,171 +667,171 @@ const generateTestSeckillData = () => {
"sessionKey": "session_1_ongoing",
"start": session1Start
},
{
"end": session2End,
"goods": [
{
"button": {"key": 1, "text": "立即抢购"},
"credits": 200,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 201,
"goodsName": "限时秒杀商品A - 正在进行中",
"goodsImage": ["https://via.placeholder.com/150/FF6B35/FFFFFF?text=SeckillA"],
"credits": "200",
"priceSale": "400.00",
"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_ongoing",
"start": session2Start
},
{
"end": session3End,
"goods": [
{
"button": {"key": 2, "text": "即将开始"},
"credits": 300,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 301,
"goodsName": "测试商品D - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
"credits": "300",
"priceSale": "600.00",
"stock": 3
},
"priceSale": "600.00",
"stock": 3
},
{
"button": {"key": 2, "text": "即将开始"},
"credits": 250,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 302,
"goodsName": "测试商品E - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
"credits": "250",
"priceSale": "500.00",
"stock": 6
},
"priceSale": "500.00",
"stock": 6
},
{
"button": {"key": 2, "text": "即将开始"},
"credits": 180,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 303,
"goodsName": "测试商品F - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
"credits": "180",
"priceSale": "360.00",
"stock": 12
},
"priceSale": "360.00",
"stock": 12
}
],
"sessionKey": "session_3_upcoming",
"start": session3Start
},
{
"end": session4End,
"goods": [
{
"button": {"key": 2, "text": "即将开始"},
"credits": 300,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 301,
"goodsName": "测试商品D - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
"credits": "300",
"priceSale": "600.00",
"stock": 3
},
"priceSale": "600.00",
"stock": 3
},
{
"button": {"key": 2, "text": "即将开始"},
"credits": 250,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 302,
"goodsName": "测试商品E - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
"credits": "250",
"priceSale": "500.00",
"stock": 6
},
"priceSale": "500.00",
"stock": 6
},
{
"button": {"key": 2, "text": "即将开始"},
"credits": 180,
"creditsType": "CREDITS",
"creditsTypeName": "积分",
"goods": {
"id": 303,
"goodsName": "测试商品F - 即将开始",
"goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
"credits": "180",
"priceSale": "360.00",
"stock": 12
},
"priceSale": "360.00",
"stock": 12
}
],
"sessionKey": "session_3_upcoming",
"start": session4Start
}
// {
// "end": session2End,
// "goods": [
// {
// "button": {"key": 1, "text": "立即抢购"},
// "credits": 200,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 201,
// "goodsName": "限时秒杀商品A - 正在进行中",
// "goodsImage": ["https://via.placeholder.com/150/FF6B35/FFFFFF?text=SeckillA"],
// "credits": "200",
// "priceSale": "400.00",
// "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_ongoing",
// "start": session2Start
// },
// {
// "end": session3End,
// "goods": [
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 300,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 301,
// "goodsName": "测试商品D - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
// "credits": "300",
// "priceSale": "600.00",
// "stock": 3
// },
// "priceSale": "600.00",
// "stock": 3
// },
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 250,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 302,
// "goodsName": "测试商品E - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
// "credits": "250",
// "priceSale": "500.00",
// "stock": 6
// },
// "priceSale": "500.00",
// "stock": 6
// },
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 180,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 303,
// "goodsName": "测试商品F - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
// "credits": "180",
// "priceSale": "360.00",
// "stock": 12
// },
// "priceSale": "360.00",
// "stock": 12
// }
// ],
// "sessionKey": "session_3_upcoming",
// "start": session3Start
// },
// {
// "end": session4End,
// "goods": [
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 300,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 301,
// "goodsName": "测试商品D - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/9C27B0/FFFFFF?text=GoodD"],
// "credits": "300",
// "priceSale": "600.00",
// "stock": 3
// },
// "priceSale": "600.00",
// "stock": 3
// },
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 250,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 302,
// "goodsName": "测试商品E - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/FF9800/FFFFFF?text=GoodE"],
// "credits": "250",
// "priceSale": "500.00",
// "stock": 6
// },
// "priceSale": "500.00",
// "stock": 6
// },
// {
// "button": {"key": 2, "text": "即将开始"},
// "credits": 180,
// "creditsType": "CREDITS",
// "creditsTypeName": "积分",
// "goods": {
// "id": 303,
// "goodsName": "测试商品F - 即将开始",
// "goodsImage": ["https://via.placeholder.com/150/795548/FFFFFF?text=GoodF"],
// "credits": "180",
// "priceSale": "360.00",
// "stock": 12
// },
// "priceSale": "360.00",
// "stock": 12
// }
// ],
// "sessionKey": "session_3_upcoming",
// "start": session4Start
// }
],
"id": 1141,
"name": "测试秒杀",
......
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