Skip to content

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

x

parent 3fc02de3
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 57 deletions
components/SeckillSection.less
View file @ 6570c19b
......@@ -19,6 +19,23 @@
font-weight: bold;
margin-left: 16rpx;
color: #1d1e25;
// 不同等级的文字颜色
&.item-0 {
color: #503404; // LV1 深金色
}
&.item-1 {
color: #284A6C; // LV2 深蓝色
}
&.item-2 {
color: #322D6F; // LV3 深紫色
}
&.item-3 {
color: #503404; // LV4 深金色
}
&.item-4 {
color: #FFF0DF; // LV5 浅金色
}
}
}
......@@ -26,9 +43,9 @@
.credits_sale_container {
box-sizing: border-box;
width: 686rpx;
background-color: #EDE8D6;
border-radius: 30rpx;
margin-top: 30rpx;
// 背景色通过内联样式动态设置
// Tab切换区域样式 - 匹配截图中的不规则形状效果
.credits_sale_tabs {
......@@ -36,8 +53,8 @@
border-radius: 30rpx; // 与容器圆角保持一致
display: flex;
position: relative;
overflow: hidden;
background-color: #E5D5B0;
overflow: visible; // 改为visible，让三角形能显示出来
// 背景色通过内联样式动态设置
padding-bottom: 20px;
// 2场秒杀：平分区域
......@@ -78,32 +95,43 @@
&.active {
color: #1C1C1C;
font-weight: bold;
background-color: #EDE8D6;
background-color: transparent;
position: relative;
}
// &::after {
// content: '';
// position: absolute;
// right: -65rpx;
// top: 0;
// width: 116rpx;
// height: 100%;
// background-color: #EDE8D6;
// transform: skewX(30deg);
// border-radius: 0 30rpx 0 30rpx;
// z-index: -1;
// }
// &::before {
// content: '';
// position: absolute;
// right: -242rpx;
// top: 0;
// width: 30rpx;
// height: 30rpx;
// background-color: #EDE8D6;
// border-radius: 0 30rpx 0 30rpx;
// }
// 弧形三角形样式 - 使用base64 SVG背景图
.triangle-left {
position: absolute;
left: -100rpx;
top: 0;
pointer-events: none;
width: 200rpx;
height: 102%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.triangle-right {
position: absolute;
right: -100rpx;
top: 0;
pointer-events: none;
width: 200rpx;
height: 102%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
// 背景色元素样式
.tab_bg_element {
position: absolute;
left: 50rpx;
right: 50rpx;
top: 0;
bottom: -2rpx;
// 背景色通过内联样式动态设置
}
// 多场秒杀内容区域样式
......@@ -112,6 +140,7 @@
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
.tab_time_info {
margin-bottom: 18rpx;
......@@ -169,6 +198,7 @@
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
.tab_time_info {
margin-bottom: 6rpx;
......@@ -235,8 +265,8 @@
padding-top: 20rpx;
margin-top: -40rpx;
border-radius: 0rpx 30rpx 30rpx 30rpx;
background-color: #EDE8D6;
position: relative;
// 背景色通过内联样式动态设置
}
// 场次商品列表容器
......@@ -336,6 +366,23 @@
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;
cursor: not-allowed;
......
components/SeckillSection.vue
View file @ 6570c19b
......@@ -2,18 +2,25 @@
<view class="credits_sale_section" v-if="shouldShowSection">
<!-- 标题区域 -->
<view class="credits_sale_area">
<text class="credits_sale_title">积分限时购</text>
<text class="credits_sale_title" :class="`item-${itemIndex}`" :style="{ color: getColor('textColor')[itemIndex] }">积分限时购</text>
</view>
<!-- 积分限时购内容容器 -->
<view class="credits_sale_container">
<!-- 积分限时购内容容器 -->
<view class="credits_sale_container" :class="`item-${itemIndex}`" :style="{ backgroundColor: getColor('bgColor')[itemIndex] }">
<!-- 场次Tab切换区域 -->
<view class="credits_sale_tabs"
v-if="creditsSaleData.sessions && creditsSaleData.sessions.length > 1"
:class="getTabContainerClass">
:class="getTabContainerClass"
:style="{ backgroundColor: getColor('tabsColor')[itemIndex] }">
<view v-for="(session, index) in creditsSaleData.sessions || []" :key="index" class="tab_item"
:class="{ active: index === currentSessionIndex }" @click="currentSessionIndex = index">
: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>
<!-- 左侧弧形三角形 - 使用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>
<!-- 正在秒杀状态：倒计时在上，文案在下 -->
<view v-if="session.status === 'ongoing'" class="tab_content_ongoing">
<view class="tab_time_info">
......@@ -70,6 +77,8 @@
<!-- 当前选中场次的商品展示区域 -->
<view class="current_session_content"
:class="`item-${itemIndex}`"
:style="{ backgroundColor: getColor('bgColor')[itemIndex] }"
v-if="creditsSaleData.sessions && creditsSaleData.sessions[currentSessionIndex]">
<!-- 场次商品列表 - 根据商品数量动态调整布局 -->
......@@ -94,7 +103,8 @@
</view>
<!-- 立即抢购按钮 -->
<view class="credits_sale_button"
:class="{ disabled: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled }"
:class="[`item-${itemIndex}`, { disabled: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled }]"
:style="{ backgroundColor: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled ? '#B9B9B9' : getColor('buttonColor')[itemIndex] }"
@click="!getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled && handleCreditsSaleClickThrottled(good)">
<text class="credits_sale_button_text">{{ getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).text }}</text>
</view>
......@@ -116,6 +126,10 @@ const props = defineProps({
isdebug: {
type: Boolean,
default: false
},
itemIndex: {
type: Number,
default: 0
}
});
......@@ -125,6 +139,52 @@ const emit = defineEmits(['credits-sale-click']);
// Store
const integralStore = useIntegralStore();
// 皮肤颜色配置 - 从Integral页面复用的颜色系统
const getColor = (type) => {
let colors = '';
switch (type) {
case 'bgColor':
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'];
break;
case 'tabsColor':
// Tab切换区域背景色
colors = ['#e5d5b0', '#a9cce8', '#d7c9ee', '#e6d7a5', '#2b221d'];
break;
}
return colors;
};
// 生成左侧三角形SVG的URL编码
const getTriangleLeftSvg = (itemIndex) => {
const color = getColor('bgColor')[itemIndex];
// 使用原始路径数据，只调整SVG尺寸
const svg = `<svg width="50" height="60" viewBox="0 0 43.51 52" xmlns="http://www.w3.org/2000/svg">
<path d="M43.51 0 C37.14 0 31.37 3.79061 28.836 9.64622 L14.684 42.3538 C12.15 48.2094 6.38 52 0 52 H43.51 V0Z" fill="${color}" />
</svg>`;
return `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}")`;
};
// 生成右侧三角形SVG的URL编码
const getTriangleRightSvg = (itemIndex) => {
const color = getColor('bgColor')[itemIndex];
// 使用原始路径数据，只调整SVG尺寸
const svg = `<svg width="50" height="60" viewBox="0 0 43.51 52" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 C6.37 0 12.14 3.79061 14.674 9.64622 L28.826 42.3538 C31.36 48.2094 37.13 52 43.51 52 H0 V0Z" fill="${color}" />
</svg>`;
return `url("data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}")`;
};
// 积分限时购数据 - 秒杀场次
const creditsSaleData = ref({
sessions: []
......@@ -525,21 +585,21 @@ const generateTestSeckillData = () => {
const now = new Date();
const baseTime = now.getTime();
// 第一场：已结束（2小时前开始，1小时前结束）
const session1Start = baseTime - 2 * 60 * 60 * 1000; // 2小时前
const session1End = baseTime - 1 * 60 * 60 * 1000; // 1小时前
// 第一场：已结束（3小时前开始，2小时前结束）
const session1Start = baseTime - 3 * 60 * 60 * 1000; // 3小时前
const session1End = baseTime - 2 * 60 * 60 * 1000; // 2小时前
// 第二场：已结束（1小时前开始，30分钟前结束）
const session2Start = baseTime - 1 * 60 * 60 * 1000; // 1小时前
const session2End = baseTime - 30 * 60 * 1000; // 30分钟前
// 第二场：已结束（2小时前开始，1小时前结束）
const session2Start = baseTime - 2 * 60 * 60 * 1000; // 2小时前
const session2End = baseTime - 1 * 60 * 60 * 1000; // 1小时前
// 第三场：即将开始（20秒后开始，30秒后结束）
const session3Start = baseTime + 20 * 1000; // 20秒后
const session3End = baseTime + 30 * 1000; // 30秒后
// 第三场：即将开始（1小时后开始，2小时后结束）
const session3Start = baseTime + 1 * 60 * 60 * 1000; // 1小时后
const session3End = baseTime + 2 * 60 * 60 * 1000; // 2小时后
// 第四场：即将开始（40分钟后开始，50分钟后结束）
const session4Start = baseTime + 40 * 60 * 1000; // 40分钟后
const session4End = baseTime + 50 * 60 * 1000; // 50分钟后
// 第四场：即将开始（2小时后开始，3小时后结束）
const session4Start = baseTime + 2 * 60 * 60 * 1000; // 2小时后
const session4End = baseTime + 3 * 60 * 60 * 1000; // 3小时后
return {
"code": "000000",
......@@ -733,18 +793,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);
}
......
views/Integral.vue
View file @ 6570c19b
......@@ -272,7 +272,7 @@
</view>
</view>
<!-- 积分限时购 -->
<SeckillSection :isdebug="isdebug" @credits-sale-click="handleCreditsSaleClick" />
<SeckillSection :isdebug="isdebug" :itemIndex="itemIndex" @credits-sale-click="handleCreditsSaleClick" />
<!-- 邀请得好礼组件 -->
<InviteGift v-if="true" class="invite_container" :itemIndex="itemIndex" @invite="handleInviteClick" @record="handleRecordClick" />
<!-- 会员活动 -->
......
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