## LuckyWheelNoCanvas 奖品列表接口数据集成方案 在电商营销项目中，抽奖组件的奖品数据通常需要从后端接口动态获取，而非硬编码在前端。基于 LuckyWheelNoCanvas 组件实现奖品列表的接口数据驱动，需要建立一套完整的数据流处理机制，涵盖接口请求、数据转换、状态管理和错误处理等关键环节。 ### 1. 接口数据层架构设计 #### 1.1 奖品数据接口规范定义 首先需要定义与后端接口的数据契约规范，确保前后端数据格式的一致性。以下是典型的奖品接口响应数据结构： ```typescript // src/types/prize.interface.ts export interface PrizeApiResponse { code: number; message: string; data: PrizeData[]; timestamp: number; pagination?: { total: number; page: number; pageSize: number; }; } export interface PrizeData { id: number | string; name: string; // 奖品名称 type: PrizeType; // 奖品类型 weight: number; // 抽奖权重 totalStock: number; // 总库存 currentStock: number; // 当前库存 probability?: number; // 计算后的概率 imageUrl?: string; // 奖品图片URL description?: string; // 奖品描述 backgroundColor?: string; // 转盘区块背景色 fontColor?: string; // 文字颜色 isActive: boolean; // 是否启用 startTime?: number; // 生效时间戳 endTime?: number; // 失效时间戳 sortOrder: number; // 显示顺序 } export type PrizeType = | 'physical' // 实物奖品 | 'virtual' // 虚拟奖品 | 'coupon' // 优惠券 | 'points' // 积分 | 'thanks' // 谢谢参与 | 'cash' // 现金红包 | 'vip' // VIP权益 ``` #### 1.2 接口服务层实现 创建专门的 API 服务层来处理奖品数据的获取、更新和同步操作： ```typescript // src/services/prizeApi.service.ts import axios, { AxiosInstance, AxiosResponse } from 'axios'; import type { PrizeApiResponse, PrizeData } from '@/types/prize.interface'; export class PrizeApiService { private readonly apiClient: AxiosInstance; private readonly baseUrl: string; private cacheTimestamp: number = 0; private readonly CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存 constructor(baseURL: string = '/api') { this.baseUrl = baseURL; this.apiClient = axios.create({ baseURL, timeout: 10000, headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } }); // 请求拦截器 - 添加认证token this.apiClient.interceptors.request.use(config => { const token = localStorage.getItem('auth_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // 响应拦截器 - 统一错误处理 this.apiClient.interceptors.response.use( response => response, error => { console.error('API请求失败:', error); return Promise.reject(error); } ); } /** * 获取奖品列表 * @param forceRefresh 是否强制刷新（跳过缓存） * @param activityId 活动ID（可选） */ async fetchPrizeList(forceRefresh: boolean = false, activityId?: string): Promise<PrizeData[]> { // 缓存机制检查 const now = Date.now(); const cacheKey = `prize_list_${activityId || 'default'}`; if (!forceRefresh && now - this.cacheTimestamp < this.CACHE_DURATION) { const cached = localStorage.getItem(cacheKey); if (cached) { try { return JSON.parse(cached); } catch (e) { console.warn('缓存解析失败，重新请求', e); } } } try { const params: Record<string, any> = { timestamp: now, platform: 'web' }; if (activityId) { params.activityId = activityId; } const response: AxiosResponse<PrizeApiResponse> = await this.apiClient.get('/prize/list', { params }); if (response.data.code === 200) { const prizeList = response.data.data; // 数据预处理：计算实时概率 const processedList = this.calculateProbabilities(prizeList); // 更新缓存 localStorage.setItem(cacheKey, JSON.stringify(processedList)); this.cacheTimestamp = now; return processedList; } else { throw new Error(`接口返回错误: ${response.data.message}`); } } catch (error) { console.error('获取奖品列表失败:', error); // 降级处理：返回本地默认数据 return this.getFallbackPrizeList(); } } /** * 获取单个奖品详情 */ async fetchPrizeDetail(prizeId: string | number): Promise<PrizeData | null> { try { const response = await this.apiClient.get(`/prize/detail/${prizeId}`); return response.data.data; } catch (error) { console.error('获取奖品详情失败:', error); return null; } } /** * 更新奖品库存（抽奖后调用） */ async updatePrizeStock(prizeId: string | number, quantity: number = -1): Promise<boolean> { try { const response = await this.apiClient.post('/prize/update-stock', { prizeId, quantity, operation: 'decrement' }); return response.data.code === 200; } catch (error) { console.error('更新库存失败:', error); return false; } } /** * 实时同步奖品数据（WebSocket或轮询） */ setupRealTimeSync(callback: (prizes: PrizeData[]) => void): () => void { let isActive = true; const syncFunction = async () => { if (!isActive) return; try { const prizes = await this.fetchPrizeList(true); callback(prizes); } catch (error) { console.error('实时同步失败:', error); } // 每30秒同步一次 if (isActive) { setTimeout(syncFunction, 30000); } }; // 立即开始同步 syncFunction(); // 返回清理函数 return () => { isActive = false; }; } /** * 计算奖品概率（基于权重和库存） */ private calculateProbabilities(prizes: PrizeData[]): PrizeData[] { // 过滤掉库存为0或未启用的奖品 const availablePrizes = prizes.filter(p => p.isActive && p.currentStock > 0 && (!p.startTime || Date.now() >= p.startTime) && (!p.endTime || Date.now() <= p.endTime) ); // 计算总权重 const totalWeight = availablePrizes.reduce((sum, prize) => sum + prize.weight, 0); // 计算每个奖品的概率 return availablePrizes.map(prize => ({ ...prize, probability: totalWeight > 0 ? (prize.weight / totalWeight) * 100 : 0 })).sort((a, b) => b.weight - a.weight); // 按权重降序排序 } /** * 降级数据：接口失败时的默认奖品列表 */ private getFallbackPrizeList(): PrizeData[] { return [ { id: 1, name: '谢谢参与', type: 'thanks', weight: 50, totalStock: 10000, currentStock: 10000, probability: 50, backgroundColor: '#f5f5f5', fontColor: '#666666', isActive: true, sortOrder: 1 }, { id: 2, name: '10元优惠券', type: 'coupon', weight: 20, totalStock: 1000, currentStock: 1000, probability: 20, backgroundColor: '#fff7e6', fontColor: '#d46b08', isActive: true, sortOrder: 2 } ]; } } // 创建单例实例 export const prizeApiService = new PrizeApiService(process.env.VUE_APP_API_BASEURL); ``` ### 2. 状态管理与数据转换层 #### 2.1 Pinia Store 集成接口数据 创建专门的状态管理 Store 来统一管理奖品数据的状态： ```typescript // src/stores/prizeStore.ts import { defineStore } from 'pinia'; import { ref, computed, watch } from 'vue'; import { prizeApiService } from '@/services/prizeApi.service'; import type { PrizeData } from '@/types/prize.interface'; export const usePrizeStore = defineStore('prize', () => { // 响应式状态 const prizeList = ref<PrizeData[]>([]); const isLoading = ref(false); const lastUpdated = ref<number>(0); const error = ref<string | null>(null); const currentActivityId = ref<string>('default'); // 计算属性 const availablePrizes = computed(() => { return prizeList.value.filter(prize => prize.isActive && prize.currentStock > 0 && (!prize.startTime || Date.now() >= prize.startTime) && (!prize.endTime || Date.now() <= prize.endTime) ); }); const prizeCount = computed(() => availablePrizes.value.length); const totalStock = computed(() => { return availablePrizes.value.reduce((sum, prize) => sum + prize.currentStock, 0); }); const prizesByType = computed(() => { const groups: Record<string, PrizeData[]> = {}; availablePrizes.value.forEach(prize => { if (!groups[prize.type]) { groups[prize.type] = []; } groups[prize.type].push(prize); }); return groups; }); // 异步 Actions const fetchPrizes = async (forceRefresh: boolean = false, activityId?: string) => { isLoading.value = true; error.value = null; try { const targetActivityId = activityId || currentActivityId.value; const prizes = await prizeApiService.fetchPrizeList(forceRefresh, targetActivityId); prizeList.value = prizes; lastUpdated.value = Date.now(); // 如果传入了新的activityId，更新当前活动ID if (activityId) { currentActivityId.value = activityId; } return prizes; } catch (err) { error.value = err instanceof Error ? err.message : '获取奖品数据失败'; console.error('fetchPrizes error:', err); throw err; } finally { isLoading.value = false; } }; const updatePrizeStock = async (prizeId: string | number, quantity: number) => { try { const success = await prizeApiService.updatePrizeStock(prizeId, quantity); if (success) { // 更新本地状态 const prizeIndex = prizeList.value.findIndex(p => p.id === prizeId); if (prizeIndex !== -1) { prizeList.value[prizeIndex].currentStock += quantity; if (prizeList.value[prizeIndex].currentStock < 0) { prizeList.value[prizeIndex].currentStock = 0; } // 重新计算概率 recalculateProbabilities(); } } return success; } catch (err) { console.error('updatePrizeStock error:', err); return false; } }; const recalculateProbabilities = () => { const totalWeight = availablePrizes.value.reduce((sum, prize) => sum + prize.weight, 0); prizeList.value.forEach(prize => { if (prize.isActive && prize.currentStock > 0 && totalWeight > 0) { prize.probability = (prize.weight / totalWeight) * 100; } else { prize.probability = 0; } }); }; // 设置实时同步 const setupRealTimeSync = () => { return prizeApiService.setupRealTimeSync((newPrizes) => { prizeList.value = newPrizes; lastUpdated.value = Date.now(); }); }; // 监听库存变化，自动重新计算概率 watch( () => prizeList.value.map(p => p.currentStock), () => { recalculateProbabilities(); }, { deep: true } ); // 初始化 const init = async () => { await fetchPrizes(); // 启动实时同步 const cleanup = setupRealTimeSync(); // 组件卸载时清理 return cleanup; }; return { // 状态 prizeList, isLoading, lastUpdated, error, currentActivityId, // 计算属性 availablePrizes, prizeCount, totalStock, prizesByType, // Actions fetchPrizes, updatePrizeStock, setupRealTimeSync, init }; }); ``` ### 3. LuckyWheelNoCanvas 组件与接口数据集成 #### 3.1 接口数据格式转换适配器 由于 LuckyWheelNoCanvas 组件需要特定的数据格式，需要创建适配器来转换接口数据： ```typescript // src/utils/prizeAdapter.util.ts import type { PrizeData } from '@/types/prize.interface'; export interface LuckyWheelPrize { name: string; background: string; fonts: Array<{ text: string; top?: string; fontSize?: string; fontColor?: string; fontWeight?: string; }>; imgs?: Array<{ src: string; width?: string; height?: string; top?: string; }>; } export class PrizeAdapter { /** * 将接口数据转换为 LuckyWheelNoCanvas 所需的格式 */ static toLuckyWheelFormat(prizeData: PrizeData[]): LuckyWheelPrize[] { return prizeData.map((prize, index) => ({ name: prize.name, background: prize.backgroundColor || this.getDefaultBackground(prize.type, index), fonts: [ { text: prize.name, top: '15%', fontSize: this.calculateFontSize(prize.name), fontColor: prize.fontColor || '#333333', fontWeight: '600' }, { text: prize.currentStock > 0 ? `${prize.probability?.toFixed(2) || 0}%` : '已抢光', top: '40%', fontSize: '12px', fontColor: prize.currentStock > 0 ? '#666666' : '#ff4d4f' }, ...(prize.currentStock > 0 ? [] : [{ text: '已售罄', top: '60%', fontSize: '10px', fontColor: '#ff4d4f', fontWeight: 'bold' }]) ], imgs: prize.imageUrl ? [{ src: prize.imageUrl, width: '40px', height: '40px', top: '65%' }] : [] })); } /** * 根据奖品类型和索引生成默认背景色 */ private static getDefaultBackground(type: string, index: number): string { const colorMap: Record<string, string[]> = { physical: ['#f6ffed', '#d9f7be', '#b7eb8f'], virtual: ['#e6f7ff', '#bae7ff', '#91d5ff'], coupon: ['#fff7e6', '#ffd591', '#ffa940'], points: ['#f9f0ff', '#efdbff', '#d3adf7'], thanks: ['#f5f5f5', '#d9d9d9', '#bfbfbf'], cash: ['#fff2e8', '#ffbb96', '#ff7a45'], vip: ['#f0f5ff', '#adc6ff', '#85a5ff'] }; const colors = colorMap[type] || ['#ffffff', '#f0f0f0', '#d9d9d9']; return colors[index % colors.length]; } /** * 根据奖品名称长度计算字体大小 */ private static calculateFontSize(name: string): string { const length = name.length; if (length <= 4) return '16px'; if (length <= 6) return '14px'; if (length <= 8) return '12px'; return '10px'; } /** * 根据接口数据生成转盘区块配置 */ static generateBlockConfig(prizeCount: number) { const angle = 360 / prizeCount; return { blockStyle: { padding: '10px', fillStyle: 'transparent' }, prizeAngle: angle, prizeRadius: '80%' }; } } ``` #### 3.2 集成接口数据的 LuckyWheelNoCanvas 组件 ```vue <!-- src/components/ApiDrivenLuckyWheel.vue --> <template> <div class="api-driven-lucky-wheel"> <!-- 加载状态 --> <div v-if="isLoading" class="loading-container"> <div class="loading-spinner"></div> <div class="loading-text">加载奖品数据中...</div> </div> <!-- 错误