Skip to content

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

seckill

parent 969ab51b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 862 additions and 165 deletions
api/integral.js
View file @ caf8ac57
...@@ -35,4 +35,7 @@ export const getResourceList = () => api.get('/c/resource/list'); ...@@ -35,4 +35,7 @@ export const getResourceList = () => api.get('/c/resource/list');
export const getSigninAndTaskInfoJSON = () => api.get('/c/activity/todo/list'); export const getSigninAndTaskInfoJSON = () => api.get('/c/activity/todo/list');
//签到接口 //签到接口
export const checkInJSON = (activityId) => api.post('/c/activity/todo/checkIn', {activityId}); export const checkInJSON = (activityId) => api.post('/c/activity/todo/checkIn', {activityId});
\ No newline at end of file
//获取秒杀列表
export const getSeckillList = () => api.get('/c/seckill/list');
\ No newline at end of file
package-lock.json
View file @ caf8ac57
This diff is collapsed.
stores/integral.js
View file @ caf8ac57
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { getSigninAndTaskInfoJSON, checkInJSON } from "../api/integral"; import { getSigninAndTaskInfoJSON, checkInJSON, getSeckillList } from "../api/integral";
import signinAndTaskInfoMock from '../mock/getSigninAndTaskInMock.json'; import signinAndTaskInfoMock from '../mock/getSigninAndTaskInMock.json';
import checkInMock from '../mock/checkIndata.json'; import checkInMock from '../mock/checkIndata.json';
export const useIntegralStore = defineStore("integral", { export const useIntegralStore = defineStore("integral", {
...@@ -7,6 +7,7 @@ export const useIntegralStore = defineStore("integral", { ...@@ -7,6 +7,7 @@ export const useIntegralStore = defineStore("integral", {
return { return {
_signinAndTaskInfo: null, _signinAndTaskInfo: null,
_checkInData: null, // 新增：存储签到数据 _checkInData: null, // 新增：存储签到数据
_seckillData: null, // 新增：存储秒杀数据
}; };
}, },
actions: { actions: {
...@@ -32,9 +33,40 @@ export const useIntegralStore = defineStore("integral", { ...@@ -32,9 +33,40 @@ export const useIntegralStore = defineStore("integral", {
return res; return res;
} }
}, },
async getSeckillData(isdebug = false) {
if(isdebug) {
// 使用模拟数据结构
const mockSeckillData = {
sessions: [
{
id: 1,
status: 'ongoing',
countdown: '01:58:59',
timeTags: ['正在秒杀', '18:00开始', '20:00结束'],
goods: [
{
id: 'good1',
name: '商品名称商品名称商称商品名称商称商品名称商称商品名称商品...',
points: 100,
originalPoints: 500,
image: ''
}
]
}
]
};
this._seckillData = mockSeckillData;
return mockSeckillData;
} else {
const res = await getSeckillList();
this._seckillData = res;
return res;
}
},
}, },
getters: { getters: {
signinAndTaskInfo : (state) => {return state._signinAndTaskInfo; }, signinAndTaskInfo : (state) => {return state._signinAndTaskInfo; },
checkInData : (state) => {return state._checkInData; }, checkInData : (state) => {return state._checkInData; },
seckillData : (state) => {return state._seckillData; },
}, },
}); });
\ No newline at end of file
views/Integral.less
View file @ caf8ac57
...@@ -50,6 +50,9 @@ ...@@ -50,6 +50,9 @@
left:50%; left:50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
}
.vip-icon { .vip-icon {
width: 254rpx; width: 254rpx;
height: 268rpx; height: 268rpx;
...@@ -832,10 +835,321 @@ ...@@ -832,10 +835,321 @@
height: 19rpx; height: 19rpx;
} }
} }
.content{ .content{
width: 100%; width: 100%;
height: 180rpx; height: 180rpx;
} }
} // 积分限时购整体区域
.credits_sale_section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
// 标题区域样式 - 参考会员活动
.credits_sale_area {
width: 686rpx;
height: auto;
margin-top: 62rpx;
display: flex;
align-items: center;
justify-content: space-between;
.credits_sale_title {
font-size: 32rpx;
font-weight: bold;
margin-left: 16rpx;
color: #1d1e25;
}
}
// 积分限时购容器样式
.credits_sale_container {
box-sizing: border-box;
width: 686rpx;
background-color: #EDE8D6;
border-radius: 30rpx;
margin-top: 30rpx;
padding: 30rpx;
// Tab切换区域样式 - 匹配截图中的不规则形状效果
.credits_sale_tabs {
border-radius: 25rpx;
display: flex;
position: relative;
overflow: hidden;
background-color: #E5D5B0;
.tab_item {
flex: 1;
text-align: center;
padding: 15rpx 8rpx;
position: relative;
cursor: pointer;
// z-index: 1;
transition: all 0.3s ease;
color: #503404;
&.active {
color: #1C1C1C;
font-weight: bold;
background-color: #EDE8D6;
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;
}
// &::before {
// content: '';
// position: absolute;
// right: -242rpx;
// top: 0;
// width: 30rpx;
// height: 30rpx;
// background-color: #EDE8D6;
// border-radius: 0 30rpx 0 30rpx;
// }
}
.session_status_tag {
margin-bottom: 6rpx;
&.ongoing {
.status_text {
font-size: 18rpx;
color: #b27c1e;
font-weight: bold;
}
}
&.upcoming {
.countdown_text {
font-size: 18rpx;
color: #999;
font-weight: bold;
}
}
}
.tab_time_info {
.tab_time_text {
font-size: 22rpx;
color: #383838;
font-weight: bold;
}
}
// active状态下的文字颜色
&.active {
.session_status_tag {
.status_text,
.countdown_text {
}
}
.tab_time_info {
.tab_time_text {
color: #1C1C1C;
}
}
}
// 非激活状态的文字颜色
.tab_item:not(.active) {
.tab_time_info {
.tab_time_text {
color: #503404;
}
}
}
}
}
// 当前场次内容区域
.current_session_content {
box-sizing: border-box;
margin-top: 20rpx;
border-radius: 25rpx;
position: relative;
}
// 场次商品列表样式
.session_goods_list {
// 商品项基础样式 - 3个及以上商品的基础样式
display: flex;
overflow-x: auto;
gap: 24rpx; // 3个及以上商品间距24rpx
padding-bottom: 10rpx;
// 隐藏滚动条但保持滚动功能
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
.credits_sale_good_item {
flex-shrink: 0;
width: 220rpx; // 固定宽度220rpx
height: 380rpx; // 固定高度380rpx
border-radius: 16rpx;
padding: 15rpx;
display: flex;
flex-direction: column;
.good_info_container {
display: flex;
flex-direction: column;
flex: 1;
}
.good_image_placeholder {
width: 100%;
height: 220rpx; // 正方形，宽度撑满父级
background: #f5f5f5;
border-radius: 10rpx;
margin-bottom: 10rpx;
border: 2rpx dashed #e0e0e0;
position: relative;
overflow: hidden;
.good_image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.good_name {
font-size: 20rpx;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin-bottom: 8rpx;
font-weight: 500;
}
.good_price_container {
display: flex;
align-items: center;
gap: 8rpx;
margin-bottom: 8rpx;
.good_price {
font-size: 22rpx;
color: #b27c1e;
font-weight: bold;
}
.good_original_price {
font-size: 18rpx;
color: #999;
text-decoration: line-through;
}
}
.credits_sale_button {
width: 100%;
height: 50rpx;
background: #b27c1e;
border-radius: 25rpx;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
.credits_sale_button_text {
font-size: 20rpx;
color: #fff;
font-weight: bold;
}
}
}
// 1个商品时的特殊布局
&.goods_count_1 {
display: flex;
justify-content: center;
overflow: visible;
.credits_sale_good_item {
width: 100%;
max-width: 600rpx;
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 25rpx;
border-radius: 20rpx;
.good_image_placeholder {
width: 260rpx;
height: 260rpx;
border-radius: 15rpx;
flex-shrink: 0;
position: relative;
overflow: hidden;
background: #f5f5f5;
.good_image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.good_info_container {
width: 310rpx;
height: 260rpx;
margin-left: 40rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.good_name {
font-size: 28rpx;
margin-bottom: 16rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
white-space: break-spaces;
}
.good_price_container {
margin-bottom: 24rpx;
}
.credits_sale_button {
height: 70rpx;
.credits_sale_button_text {
font-size: 28rpx;
}
}
}
}
// 2个商品时的特殊布局
&.goods_count_2 {
justify-content: center;
gap: 58rpx; // 2个商品间距58rpx
}
}
}
}
\ No newline at end of file
views/Integral.vue
View file @ caf8ac57
This diff is collapsed.
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