100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
import { defineStore } from 'pinia'
|
||
|
||
export const useSceneStore = defineStore('scene', {
|
||
state: () => ({
|
||
// 当前场景索引
|
||
currentSceneIndex: 0,
|
||
// 场景数据
|
||
scenes: [
|
||
{
|
||
id: 'qianmen',
|
||
name: '前门商圈',
|
||
title: '前门商圈',
|
||
description: '现场感受舞龙舞狮、京韵大鼓等非遗表演，逛非遗文创市集，买老字号限定年货套餐，让您一站式解锁购、赏、品三重年味。',
|
||
interactivePoint: '点击逛民俗市集，速速收集「非遗福印」',
|
||
image: '/images/qianmen.jpg',
|
||
video: '/videos/qianmen.mp4',
|
||
audio: '/audios/qianmen.mp3'
|
||
},
|
||
{
|
||
id: 'chongwen',
|
||
name: '崇文门商圈',
|
||
title: '崇文商圈',
|
||
description: '崇文喜市年货节，16款国货新品首发亮相，4大特色主题区精彩呈现，节庆饰品、移动书屋、票根联动······',
|
||
interactivePoint: '滑动探索商圈，集齐「国潮福字」',
|
||
image: '/images/chongwen.jpg',
|
||
video: '/videos/chongwen.mp4',
|
||
panorama: 'https://example.com/chongwen-panorama'
|
||
},
|
||
{
|
||
id: 'wangfujing',
|
||
name: '王府井商圈',
|
||
title: '王府井商圈',
|
||
description: '12家知名品牌的首秀首展，线上线下充分联动，凸显国际化、艺术化、节日化定位。在南街门头打造金福临门主题景观、北街门头设置金马迎春装饰装置，同步布局金袋纳福打卡点位及金树挂彩树木亮化工程，全方位营造浓厚节日氛围。',
|
||
interactivePoint: '从南街门头金福临门主题景观进入，路过金袋纳福打卡点位及金树挂彩树木亮化工程，到北街门头金马迎春装饰装置。领取「金袋福卡」',
|
||
image: '/images/wangfujing.jpg',
|
||
video: '/videos/wangfujing.mp4'
|
||
},
|
||
{
|
||
id: 'longfusi',
|
||
name: '隆福寺商圈',
|
||
title: '隆福寺',
|
||
description: '文化市集潮玩地，文艺青年的新春必打卡地来啦！隆福寺新春文化市集将艺术与消费完美融合。',
|
||
interactivePoint: '探索文创好物，点亮「文化福灯」',
|
||
image: '/images/longfusi.jpg',
|
||
video: '/videos/longfusi.mp4'
|
||
},
|
||
{
|
||
id: 'dongzhimen',
|
||
name: '东直门商圈',
|
||
title: '东直门商圈',
|
||
description: '团圆家宴终点站，东直门簋街化身团圆守岁主场。',
|
||
interactivePoint: '美食相关，领取「团圆福筷」',
|
||
image: '/images/dongzhimen.jpg',
|
||
video: '/videos/dongzhimen.mp4'
|
||
}
|
||
],
|
||
// 场景激活状态
|
||
activatedScenes: [],
|
||
// 场景交互状态
|
||
interactiveStatus: {}
|
||
}),
|
||
|
||
getters: {
|
||
// 获取当前场景
|
||
currentScene: (state) => state.scenes[state.currentSceneIndex],
|
||
// 获取场景总数
|
||
sceneCount: (state) => state.scenes.length,
|
||
// 判断场景是否激活
|
||
isSceneActivated: (state) => (sceneId) => state.activatedScenes.includes(sceneId),
|
||
// 判断场景交互是否完成
|
||
isInteractiveComplete: (state) => (sceneId) => state.interactiveStatus[sceneId] === true
|
||
},
|
||
|
||
actions: {
|
||
// 设置当前场景
|
||
setCurrentScene(index) {
|
||
this.currentSceneIndex = index
|
||
},
|
||
|
||
// 激活场景
|
||
activateScene(sceneId) {
|
||
if (!this.activatedScenes.includes(sceneId)) {
|
||
this.activatedScenes.push(sceneId)
|
||
}
|
||
},
|
||
|
||
// 设置场景交互状态
|
||
setInteractiveStatus(sceneId, status) {
|
||
this.interactiveStatus[sceneId] = status
|
||
},
|
||
|
||
// 重置场景状态
|
||
resetSceneState() {
|
||
this.currentSceneIndex = 0
|
||
this.activatedScenes = []
|
||
this.interactiveStatus = {}
|
||
}
|
||
}
|
||
})
|