Skip to content

飞
飞鹤小程序
Commit 3a7a2360 authored by 王炽's avatar 王炽
Browse files
Options

Merge branch 'dev' of http://gitlab2.dui88.com/fh/20250528_FHQ1 into dev

parents 27032a23 00c398fe
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 393 additions and 21 deletions
.DS_Store
View file @ 3a7a2360
No preview for this file type
components/SeckillSection.less
View file @ 3a7a2360
......@@ -293,6 +293,11 @@
border-radius: 0rpx 30rpx 30rpx 30rpx;
position: relative;
// 背景色通过内联样式动态设置
&.no-tr-corner {
// 最后一个 tab 被选中时，取消右上角圆角，避免被 tabs 的滚动容器裁剪
border-radius: 0rpx 0rpx 30rpx 30rpx;
}
}
// 场次商品列表容器
......
components/SeckillSection.vue
View file @ 3a7a2360
......@@ -13,6 +13,53 @@
v-if="creditsSaleData.sessions && creditsSaleData.sessions.length > 1"
:class="getTabContainerClass"
:style="{ backgroundColor: getColor('tabsColor')[itemIndex] }">
<!-- #ifdef MP-WEIXIN -->
<scroll-view scroll-x :scroll-with-animation="true" :scroll-into-view="scrollIntoViewId" style="width: 100%">
<view style="display:flex; width:100%">
<view v-for="(session, index) in creditsSaleData.sessions || []" :key="index" class="tab_item"
:id="`tab-item-${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', 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，最后一个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">
<view class="tab_time_text countdown_display">
<view class="countdown_numbers">
<view v-for="(timeUnit, index) in getCountdownUnits(session.countdown)"
:key="index"
class="countdown_unit">
<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('ongoingStatusTextColor')[itemIndex] }">正在秒杀</text>
</view>
</view>
<!-- 即将开始/已过期状态：开始时间在上，状态文案在下 -->
<view v-else class="tab_content_other">
<view class="tab_time_info">
<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" :style="{ color: getColor('statusTextColor')[itemIndex] }">即将开始</text>
<text v-else class="status_text ended_text" :style="{ color: getColor('statusTextColor')[itemIndex] }">已结束</text>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view v-for="(session, index) in creditsSaleData.sessions || []" :key="index" class="tab_item"
:class="[`item-${itemIndex}`, { active: index === currentSessionIndex }]" @click="currentSessionIndex = index">
<!-- 背景色元素 - 只在active状态下显示 -->
......@@ -50,6 +97,7 @@
</view>
</view>
</view>
<!-- #endif -->
</view>
<!-- 单场次状态显示 -->
......@@ -61,7 +109,7 @@
</view>
<view class="tab_time_info">
<view v-if="creditsSaleData.sessions[0].status === 'ongoing'" class="tab_time_text countdown_display">
<text class="countdown_label">倒计时</text>
<text class="countdown_label" :style="{ color: getColor('countdownColor')[itemIndex] }">倒计时</text>
<view class="countdown_numbers">
<view v-for="(timeUnit, index) in getCountdownUnits(creditsSaleData.sessions[0].countdown)"
:key="index"
......@@ -77,7 +125,7 @@
<!-- 当前选中场次的商品展示区域 -->
<view class="current_session_content"
:class="`item-${itemIndex}`"
:class="[`item-${itemIndex}`, { 'no-tr-corner': isLastTabSelected }]"
:style="{ backgroundColor: getColor('bgColor')[itemIndex] }"
v-if="creditsSaleData.sessions && creditsSaleData.sessions[currentSessionIndex]">
......@@ -106,7 +154,7 @@
<view class="credits_sale_button"
:class="[`item-${itemIndex}`, { disabled: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled }]"
:style="{ background: getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).disabled ? '#B9B9B9' : getColor('buttonGradientColor')[itemIndex] }">
<text class="credits_sale_button_text">{{ getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).text }}</text>
<text class="credits_sale_button_text" :style="{ color: getColor('buttonTextColor')[itemIndex] }">{{ getGoodButtonInfo(good, creditsSaleData.sessions[currentSessionIndex]).text }}</text>
</view>
</view>
</view>
......@@ -117,7 +165,7 @@
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, computed, watch, nextTick } from 'vue';
import { useIntegralStore } from '../stores/integral';
import { throttleTap } from '../utils/index';
......@@ -147,7 +195,7 @@ const getColor = (type) => {
colors = ['#EDE8D6', '#d6e8f7', '#eeeaf3', '#f2e9c7', '#49443f'];
break;
case 'textColor':
colors = ['#000000', '#000000', '#000000', '#000000', '#fbf0e1'];
colors = ['#000000', '#000000', '#000000', '#000000', '#FFF0DF'];
break;
case 'tabsColor':
// Tab切换区域背景色
......@@ -159,15 +207,15 @@ const getColor = (type) => {
break;
case 'goodPriceColor':
// 商品价格颜色
colors = ['#a57e35', '#354a69', '#342e6b', '#754b20', '#eae3be'];
colors = ['#B27C1E', '#284A6C', '#322D6F', '#814912', '#EEE3B9'];
break;
case 'countdownColor':
// 倒计时数字背景色和冒号颜色
colors = ['#a57e35', '#6c8dbf', '#7059a3', '#c3a574', '#030201'];
colors = ['#B27C1E', '#578EC4', '#7556A8', '#CEA46C', '#E7CCA4'];
break;
case 'ongoingStatusTextColor':
// 正在秒杀状态文字颜色
colors = ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#fbf0e1'];
colors = ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#FFF0DF'];
break;
case 'buttonGradientColor':
// 按钮渐变背景色
......@@ -179,9 +227,13 @@ const getColor = (type) => {
'linear-gradient(90deg, #000 0%, #E7CA9F 0.01%, #EBD9C9 100%)'
];
break;
case 'buttonTextColor':
// 按钮文字颜色
colors = ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#030200'];
break;
case 'goodNameColor':
// 商品名称颜色
colors = ['#3c3c3c', '#3c3c3c', '#3c3c3c', '#3c3c3c', '#fbf0e1'];
colors = ['#3c3c3c', '#3c3c3c', '#3c3c3c', '#3c3c3c', '#FFF0DF'];
break;
}
return colors;
......@@ -214,6 +266,14 @@ const creditsSaleData = ref({
// 积分限时购相关数据
const currentSessionIndex = ref(0); // 当前选中的场次索引
const isLastTabSelected = computed(() => {
const total = creditsSaleData.value.sessions?.length || 0;
return total > 0 && currentSessionIndex.value === total - 1;
});
// 小程序端滚动定位：使用 scroll-into-view 目标
const scrollIntoViewId = ref('');
// 注意：只在初始化时设置 scroll-into-view，后续点击不再自动滚动
// 倒计时相关
const countdownTimers = ref({}); // 存储每个场次的倒计时定时器
......@@ -585,6 +645,10 @@ const mapSeckillDataToCreditsSale = (seckillData) => {
// 智能定位场次逻辑
const targetIndex = getTargetSessionIndex(sessions);
currentSessionIndex.value = targetIndex;
// 初始化：小程序端设置一次滚动目标
nextTick(() => {
scrollIntoViewId.value = `tab-item-${currentSessionIndex.value}`;
});
console.log('映射后的秒杀数据:', creditsSaleData.value);
console.log('当前选中场次索引:', currentSessionIndex.value);
......@@ -613,15 +677,15 @@ const generateTestSeckillData = () => {
// 第二场：正在秒杀（30分钟前开始，30分钟后结束）
const session2Start = baseTime - 30 * 60 * 1000; // 30分钟前
const session2End = baseTime + 30 * 60 * 1000; // 30分钟后
const session2End = baseTime - 30 * 60 * 1000; // 30分钟后
// 第三场：即将开始（1小时后开始，2小时后结束）
const session3Start = baseTime + 1 * 60 * 60 * 1000; // 1小时后
const session3End = baseTime + 2 * 60 * 60 * 1000; // 2小时后
const session3Start = baseTime - 1 * 60 * 60 * 1000; // 1小时后
const session3End = baseTime - 2 * 60 * 60 * 1000; // 2小时后
// 第四场：即将开始（2小时后开始，3小时后结束）
const session4Start = baseTime + 2 * 60 * 60 * 1000; // 2小时后
const session4End = baseTime + 3 * 60 * 60 * 1000; // 3小时后
const session4Start = baseTime - 2 * 60 * 60 * 1000; // 2小时后
const session4End = baseTime - 3 * 60 * 60 * 1000; // 3小时后
return {
"code": "000000",
......@@ -847,15 +911,15 @@ 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();
}
} catch (error) {
......
package-lock.json
View file @ 3a7a2360
This diff is collapsed.
project.config.json
View file @ 3a7a2360
......@@ -12,7 +12,16 @@
"outputPath": ""
},
"useCompilerPlugins": false,
"minifyWXML": true
"minifyWXML": true,
"compileWorklet": false,
"uploadWithSourceMap": true,
"packNpmManually": false,
"minifyWXSS": true,
"localPlugins": false,
"disableUseStrict": false,
"condition": false,
"swc": false,
"disableSWC": true
},
"compileType": "miniprogram",
"simulatorPluginLibVersion": {},
......@@ -21,5 +30,6 @@
"include": []
},
"appid": "wxc83b55d61c7fc51d",
"editorSetting": {}
"editorSetting": {},
"libVersion": "3.8.6"
}
\ No newline at end of file
project.private.config.json
View file @ 3a7a2360
......@@ -9,6 +9,14 @@
"preloadBackgroundData": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"compileHotReLoad": true
"compileHotReLoad": true,
"useApiHook": true,
"useApiHostProcess": true,
"useStaticServer": false,
"useLanDebug": false,
"showES6CompileOption": false,
"checkInvalidKey": true,
"ignoreDevUnusedFiles": true,
"bigPackageSizeSupport": false
}
}
\ No newline at end of file
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