524 lines
18 KiB
Vue
524 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<view class="page-container"
|
|||
|
|
@touchstart="handleTouchStart"
|
|||
|
|
@touchmove="handleTouchMove"
|
|||
|
|
@touchend="handleTouchEnd">
|
|||
|
|
<!-- 顶部栏空间切换 -->
|
|||
|
|
<CustomHeader
|
|||
|
|
:title="currentPageInfo.title"
|
|||
|
|
:subtitle="currentPageInfo.subtitle"
|
|||
|
|
:spaces="spaceOptions"
|
|||
|
|
:selectedIndex="selectedSpaceIndex"
|
|||
|
|
@space-change="handleSpaceChange"
|
|||
|
|
@toggle-side-menu="toggleSideMenu"
|
|||
|
|
/>
|
|||
|
|
<!-- 加载遮罩：请求空间数据时覆盖页面 -->
|
|||
|
|
<view class="loading-overlay" v-if="isLoadingSpaces">
|
|||
|
|
<view class="spinner"></view>
|
|||
|
|
<text class="loading-text">加载中...</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 页面内容区域 -->
|
|||
|
|
<view class="page-content">
|
|||
|
|
<!-- 设备模块 -->
|
|||
|
|
<DeviceTab v-if="currentTabIndex === 0" />
|
|||
|
|
|
|||
|
|
<!-- 房间模块 -->
|
|||
|
|
<RoomTab v-if="currentTabIndex === 1" />
|
|||
|
|
|
|||
|
|
<!-- 通知模块 -->
|
|||
|
|
<NotificationTab v-if="currentTabIndex === 2" ref="notificationTab" />
|
|||
|
|
|
|||
|
|
<!-- 控制模块 -->
|
|||
|
|
<ControlTab v-if="currentTabIndex === 3" :statusTitle="currentStatusTitle" @status-changed="handleStatusChanged" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部导航 -->
|
|||
|
|
<BottomTab
|
|||
|
|
:currentIndex="currentTabIndex"
|
|||
|
|
@tab-change="handleTabChange"
|
|||
|
|
/>
|
|||
|
|
<!-- 侧边菜单 -->
|
|||
|
|
<SideMenu
|
|||
|
|
:visible="showSideMenu"
|
|||
|
|
:logoflag="logoflag"
|
|||
|
|
@close="closeSideMenu"
|
|||
|
|
@menu-click="handleMenuClick"
|
|||
|
|
@add-room="handleAddRoom"
|
|||
|
|
/>
|
|||
|
|
<!-- 无空间展示 -->
|
|||
|
|
<view class="" v-if="!isLoadingSpaces && spaceOptions.length == 0" style="background-color: #F3F5F6;position: fixed;top: 168rpx;left: 0;width: 100%;height: 100vh;z-index: 999;text-align: center;">
|
|||
|
|
<image src="https://api.ccttiot.com/smartmeter/img/static/uKFO4XdQVUgGYJHt4gwn" style="width: 272rpx;height: 272rpx;margin-top: 80rpx;" mode="aspectFill"></image>
|
|||
|
|
<view class="" style="font-weight: 600;font-size: 36rpx;margin-top: 70rpx;color: #3D3D3D;">
|
|||
|
|
{{ $i18n.t('emptySpaceTitle') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="width: 524rpx;margin-top: 30rpx;font-size: 28rpx;color: #727272;margin: auto;">
|
|||
|
|
{{ $i18n.t('emptySpaceDesc') }}
|
|||
|
|
</view>
|
|||
|
|
<view class="" @click="btnaddkj" style="width: 674rpx;height: 100rpx;background: #0F0F0F;border-radius: 60rpx 60rpx 60rpx 60rpx;border: 2rpx solid #0F0F0F;font-size: 36rpx;color: #fff;font-weight: 600;text-align: center;line-height: 100rpx;margin: auto;margin-top: 70rpx;">
|
|||
|
|
+ {{ $i18n.t('addSpace') || $i18n.t('emptySpaceCta') }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import CustomHeader from '@/common/components/CustomHeader.vue'
|
|||
|
|
import BottomTab from '@/common/components/BottomTab.vue'
|
|||
|
|
import SideMenu from '@/common/components/SideMenu.vue'
|
|||
|
|
import DeviceTab from '@/common/components/DeviceTab.vue'
|
|||
|
|
import RoomTab from '@/common/components/RoomTab.vue'
|
|||
|
|
import NotificationTab from '@/common/components/NotificationTab.vue'
|
|||
|
|
import ControlTab from '@/common/components/ControlTab.vue'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
CustomHeader,
|
|||
|
|
BottomTab,
|
|||
|
|
SideMenu,
|
|||
|
|
DeviceTab,
|
|||
|
|
RoomTab,
|
|||
|
|
NotificationTab,
|
|||
|
|
ControlTab
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
currentTabIndex: 0, // 当前选中的标签页索引
|
|||
|
|
showSideMenu: false, // 控制侧边菜单的显示状态
|
|||
|
|
// 加载状态
|
|||
|
|
isLoadingSpaces: true,
|
|||
|
|
// 添加页面配置数据
|
|||
|
|
pageConfigs: [],
|
|||
|
|
// 空间下拉
|
|||
|
|
spaceOptions: [
|
|||
|
|
{ name: 'home', status: '2' }, // 撤防
|
|||
|
|
{ name: 'office', status: '1' }, // 布防
|
|||
|
|
{ name: 'warehouse', status: '3' }, // 夜间
|
|||
|
|
{ name: 'garage', status: '4' } // 紧急
|
|||
|
|
],
|
|||
|
|
selectedSpaceIndex: 0,
|
|||
|
|
// 添加触摸相关数据
|
|||
|
|
touchStartX: 0,
|
|||
|
|
touchStartY: 0,
|
|||
|
|
touchEndX: 0,
|
|||
|
|
touchEndY: 0,
|
|||
|
|
minSwipeDistance: 50, // 最小滑动距离
|
|||
|
|
maxVerticalDistance: 100, // 最大垂直距离（防止误触）
|
|||
|
|
touchStartTime: 0, // 触摸开始时间
|
|||
|
|
maxSwipeTime: 500, // 最大滑动时间（毫秒）
|
|||
|
|
lastSwipeTime: 0, // 上次手势时间
|
|||
|
|
swipeDebounceTime: 300 ,// 手势防抖时间（毫秒）
|
|||
|
|
logoflag:false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 计算当前语言，用于触发更新
|
|||
|
|
currentLanguage() {
|
|||
|
|
return this.$i18n.getCurrentLanguage()
|
|||
|
|
},
|
|||
|
|
currentPageInfo() {
|
|||
|
|
return this.pageConfigs[0] || { title: '', subtitle: '' }
|
|||
|
|
},
|
|||
|
|
// 当前选中空间的状态标题（1-布防 2-撤防 3-夜间 4-紧急）
|
|||
|
|
currentStatusTitle() {
|
|||
|
|
const spaces = Array.isArray(this.spaceOptions) ? this.spaceOptions : []
|
|||
|
|
const index = Math.min(Math.max(0, this.selectedSpaceIndex || 0), spaces.length - 1)
|
|||
|
|
const status = spaces[index] && (spaces[index].status || spaces[index].Status || spaces[index].state)
|
|||
|
|
return this.getStatusTitleByCode(status)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 监听语言变化，强制更新组件
|
|||
|
|
currentLanguage() {
|
|||
|
|
console.log('主页面语言变化:', this.currentLanguage)
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
this.updateSpaceOptions()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// 监听语言变化事件
|
|||
|
|
uni.$on('languageChanged', this.handleLanguageChange)
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
// this.updateSpaceOptions();
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// 移除事件监听
|
|||
|
|
uni.$off('languageChanged', this.handleLanguageChange)
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
console.log('页面加载完成');
|
|||
|
|
if(!uni.getStorageSync('language')){
|
|||
|
|
uni.setStorageSync('language','zh')
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
// 页面显示时强制更新
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
this.updateSpaceOptions()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击跳转添加空间
|
|||
|
|
btnaddkj(){
|
|||
|
|
if(this.logoflag == true){
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/login/index'
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url:'/pages/kongjian/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 触摸开始事件
|
|||
|
|
handleTouchStart(e) {
|
|||
|
|
// 在通知页面时，只有高亮索引为0时才启用手势
|
|||
|
|
if (this.currentTabIndex === 2) {
|
|||
|
|
// 获取通知页面的高亮索引
|
|||
|
|
const notificationTab = this.$refs.notificationTab
|
|||
|
|
if (notificationTab && notificationTab.swiperCurrent !== 0) {
|
|||
|
|
return; // 高亮索引不是0时，禁用手势
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 记录触摸开始位置，无论侧边菜单是否显示
|
|||
|
|
this.touchStartX = e.touches[0].clientX
|
|||
|
|
this.touchStartY = e.touches[0].clientY
|
|||
|
|
this.touchStartTime = Date.now() // 记录触摸开始时间
|
|||
|
|
},
|
|||
|
|
// 触摸移动事件
|
|||
|
|
handleTouchMove(e) {
|
|||
|
|
// 在通知页面时，只有高亮索引为0时才启用手势
|
|||
|
|
if (this.currentTabIndex === 2) {
|
|||
|
|
// 获取通知页面的高亮索引
|
|||
|
|
const notificationTab = this.$refs.notificationTab
|
|||
|
|
if (notificationTab && notificationTab.swiperCurrent !== 0) {
|
|||
|
|
return; // 高亮索引不是0时，禁用手势
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 可以在这里添加实时反馈，比如显示滑动提示
|
|||
|
|
// 暂时保持空实现，避免影响性能
|
|||
|
|
},
|
|||
|
|
// 触摸结束事件
|
|||
|
|
handleTouchEnd(e) {
|
|||
|
|
// 在通知页面时，只有高亮索引为0时才启用手势
|
|||
|
|
if (this.currentTabIndex === 2) {
|
|||
|
|
// 获取通知页面的高亮索引
|
|||
|
|
const notificationTab = this.$refs.notificationTab
|
|||
|
|
if (notificationTab && notificationTab.swiperCurrent !== 0) {
|
|||
|
|
return // 高亮索引不是0时，禁用手势
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const touchEndTime = Date.now()
|
|||
|
|
const deltaTime = touchEndTime - this.touchStartTime
|
|||
|
|
// 防抖检查：避免快速连续触发
|
|||
|
|
if (touchEndTime - this.lastSwipeTime < this.swipeDebounceTime) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.touchEndX = e.changedTouches[0].clientX
|
|||
|
|
this.touchEndY = e.changedTouches[0].clientY
|
|||
|
|
// 计算滑动距离
|
|||
|
|
const deltaX = this.touchEndX - this.touchStartX
|
|||
|
|
const deltaY = Math.abs(this.touchEndY - this.touchStartY)
|
|||
|
|
// 判断是否为有效的左滑手势（隐藏侧边菜单）
|
|||
|
|
if (this.showSideMenu && deltaX < -this.minSwipeDistance && deltaY < this.maxVerticalDistance && deltaTime < this.maxSwipeTime) {
|
|||
|
|
console.log('检测到左滑手势，隐藏侧边菜单')
|
|||
|
|
this.closeSideMenu()
|
|||
|
|
this.lastSwipeTime = touchEndTime // 更新上次手势时间
|
|||
|
|
// 可选：添加触觉反馈
|
|||
|
|
uni.vibrateShort({
|
|||
|
|
type: 'light'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// 判断是否为有效的右滑手势（打开侧边菜单）
|
|||
|
|
else if (!this.showSideMenu && deltaX > this.minSwipeDistance && deltaY < this.maxVerticalDistance && deltaTime < this.maxSwipeTime) {
|
|||
|
|
console.log('检测到右滑手势，打开侧边菜单')
|
|||
|
|
this.toggleSideMenu()
|
|||
|
|
this.lastSwipeTime = touchEndTime // 更新上次手势时间
|
|||
|
|
// 可选：添加触觉反馈
|
|||
|
|
uni.vibrateShort({
|
|||
|
|
type: 'light'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
handleLanguageChange(lang) {
|
|||
|
|
console.log('主页面语言切换事件触发:', lang)
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
this.updateSpaceOptions()
|
|||
|
|
},
|
|||
|
|
// 将状态码映射为标题
|
|||
|
|
getStatusTitleByCode(code) {
|
|||
|
|
const n = Number(code)
|
|||
|
|
// 添加容错处理
|
|||
|
|
const t = this.$i18n && this.$i18n.t ? this.$i18n.t.bind(this.$i18n) : (key) => key
|
|||
|
|
if (n === 1) return t('statusArmed') || '布防'
|
|||
|
|
if (n === 2) return t('statusDisarmed') || '撤防'
|
|||
|
|
if (n === 3) return t('statusNight') || '夜间'
|
|||
|
|
if (n === 4) return t('statusEmergency') || '紧急'
|
|||
|
|
return t('work') || '工作'
|
|||
|
|
},
|
|||
|
|
// 更新主页面配置
|
|||
|
|
updatePageConfigs() {
|
|||
|
|
console.log('更新主页面配置');
|
|||
|
|
// 重新构建页面配置，确保所有文本都通过 $i18n.t() 获取
|
|||
|
|
const spaces = Array.isArray(this.spaceOptions) ? this.spaceOptions : []
|
|||
|
|
const index = Math.min(Math.max(0, this.selectedSpaceIndex || 0), spaces.length - 1)
|
|||
|
|
const status = spaces[index] && (spaces[index].status || spaces[index].Status || spaces[index].state)
|
|||
|
|
const title = this.getStatusTitleByCode(status)
|
|||
|
|
// 添加容错处理
|
|||
|
|
const t = this.$i18n && this.$i18n.t ? this.$i18n.t.bind(this.$i18n) : (key) => key
|
|||
|
|
this.pageConfigs = [
|
|||
|
|
{
|
|||
|
|
title,
|
|||
|
|
subtitle: t('alarmCleared') || '--'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
// 强制更新组件
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
},
|
|||
|
|
// 更新空间下拉选项（示例数据，可替换为实际接口）
|
|||
|
|
updateSpaceOptions() {
|
|||
|
|
this.spaceOptions = []
|
|||
|
|
this.selectedSpaceIndex = 0
|
|||
|
|
this.isLoadingSpaces = true
|
|||
|
|
this.$http.get('/bst/space/list').then(res => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.logoflag = false
|
|||
|
|
this.spaceOptions = res.rows
|
|||
|
|
// 若有本地已选空间，默认选中；否则选中第一个并写入本地
|
|||
|
|
try {
|
|||
|
|
const localKjid = uni.getStorageSync('kjid')
|
|||
|
|
const spaces = Array.isArray(this.spaceOptions) ? this.spaceOptions : []
|
|||
|
|
let matchIndex = 0
|
|||
|
|
if (localKjid !== undefined && localKjid !== null && localKjid !== '') {
|
|||
|
|
const found = spaces.findIndex(s => (s.id || s.spaceId || s.ID || s.Id) == localKjid)
|
|||
|
|
if (found >= 0) {
|
|||
|
|
matchIndex = found
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果空间列表不为空，设置默认选中并写入本地
|
|||
|
|
if (spaces.length > 0) {
|
|||
|
|
this.selectedSpaceIndex = matchIndex
|
|||
|
|
const selected = spaces[matchIndex]
|
|||
|
|
const kjid = selected && (selected.id || selected.spaceId || selected.ID || selected.Id)
|
|||
|
|
if (kjid !== undefined && kjid !== null) {
|
|||
|
|
uni.setStorageSync('kjid', kjid)
|
|||
|
|
uni.setStorageSync('kjobj', selected)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
console.warn('处理本地空间ID失败:', e)
|
|||
|
|
}
|
|||
|
|
// 空间列表加载后，立即根据状态刷新标题
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
}else if(res.code == 401){
|
|||
|
|
this.logoflag = true
|
|||
|
|
}
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.isLoadingSpaces = false
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 顶部空间选择变更
|
|||
|
|
handleSpaceChange(index, item, name) {
|
|||
|
|
this.selectedSpaceIndex = index
|
|||
|
|
console.log('选择空间:', index, item, name)
|
|||
|
|
// 获取新选中的空间信息
|
|||
|
|
const selected = item || (Array.isArray(this.spaceOptions) ? this.spaceOptions[index] : null)
|
|||
|
|
const kjid = selected && (selected.id || selected.spaceId || selected.ID || selected.Id)
|
|||
|
|
if (kjid !== undefined && kjid !== null) {
|
|||
|
|
// 持久化选中的空间ID到本地
|
|||
|
|
uni.setStorageSync('kjid', kjid)
|
|||
|
|
uni.setStorageSync('kjobj', selected)
|
|||
|
|
console.log('已保存 kjid:', kjid)
|
|||
|
|
// 广播全局事件，通知需要依赖空间的模块刷新
|
|||
|
|
console.log('主页面发送空间变化事件:', { kjid, space: selected })
|
|||
|
|
uni.$emit('spaceChanged', { kjid, space: selected })
|
|||
|
|
// 根据当前tab刷新对应的数据
|
|||
|
|
this.refreshCurrentTabData(kjid)
|
|||
|
|
}
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
},
|
|||
|
|
// 根据当前tab刷新对应的数据
|
|||
|
|
refreshCurrentTabData(kjid) {
|
|||
|
|
console.log('刷新当前tab数据，空间ID:', kjid)
|
|||
|
|
switch (this.currentTabIndex) {
|
|||
|
|
case 0: // 设备模块
|
|||
|
|
this.refreshDeviceTab(kjid)
|
|||
|
|
break;
|
|||
|
|
case 1: // 房间模块
|
|||
|
|
this.refreshRoomTab(kjid)
|
|||
|
|
break;
|
|||
|
|
case 2: // 通知模块
|
|||
|
|
this.refreshNotificationTab(kjid)
|
|||
|
|
break;
|
|||
|
|
case 3: // 控制模块
|
|||
|
|
this.refreshControlTab(kjid)
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
console.log('未知的tab索引:', this.currentTabIndex)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 刷新设备模块数据
|
|||
|
|
refreshDeviceTab(kjid) {
|
|||
|
|
console.log('刷新设备模块数据')
|
|||
|
|
// 如果有设备模块的引用，可以调用其刷新方法
|
|||
|
|
// 这里可以根据实际的DeviceTab组件API进行调整
|
|||
|
|
uni.$emit('refreshDeviceData', { kjid })
|
|||
|
|
},
|
|||
|
|
// 刷新房间模块数据
|
|||
|
|
refreshRoomTab(kjid) {
|
|||
|
|
console.log('刷新房间模块数据')
|
|||
|
|
// 如果有房间模块的引用，可以调用其刷新方法
|
|||
|
|
// 这里可以根据实际的RoomTab组件API进行调整
|
|||
|
|
uni.$emit('refreshRoomData', { kjid })
|
|||
|
|
},
|
|||
|
|
// 刷新通知模块数据
|
|||
|
|
refreshNotificationTab(kjid) {
|
|||
|
|
console.log('刷新通知模块数据')
|
|||
|
|
if (this.$refs && this.$refs.notificationTab) {
|
|||
|
|
try {
|
|||
|
|
this.$refs.notificationTab.pageNum = 1
|
|||
|
|
this.$refs.notificationTab.kjid = kjid
|
|||
|
|
this.$refs.notificationTab.getlist()
|
|||
|
|
} catch(err) {
|
|||
|
|
console.warn('通知页刷新失败:', err)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 刷新控制模块数据
|
|||
|
|
refreshControlTab(kjid) {
|
|||
|
|
console.log('刷新控制模块数据')
|
|||
|
|
// 控制模块会自动通过kjid获取最新状态，无需额外操作
|
|||
|
|
// 如果需要强制刷新，可以发送事件
|
|||
|
|
uni.$emit('refreshControlData', { kjid })
|
|||
|
|
},
|
|||
|
|
// 处理标签页切换
|
|||
|
|
handleTabChange(index) {
|
|||
|
|
console.log('点击了标签页:', index)
|
|||
|
|
this.currentTabIndex = index
|
|||
|
|
console.log('切换到标签页:', index)
|
|||
|
|
},
|
|||
|
|
// 侧边菜单相关方法
|
|||
|
|
toggleSideMenu() {
|
|||
|
|
console.log('点击了菜单按钮')
|
|||
|
|
this.showSideMenu = !this.showSideMenu
|
|||
|
|
console.log('侧边菜单状态:', this.showSideMenu)
|
|||
|
|
},
|
|||
|
|
closeSideMenu() {
|
|||
|
|
this.showSideMenu = false
|
|||
|
|
},
|
|||
|
|
handleMenuClick(type) {
|
|||
|
|
console.log('Clicked menu item:', type)
|
|||
|
|
this.closeSideMenu();
|
|||
|
|
// 根据 type 执行不同的操作
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `${this.$i18n.t('clicked')}${type}`,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
handleAddRoom() {
|
|||
|
|
console.log('Add Room clicked')
|
|||
|
|
this.closeSideMenu()
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('addRoomClicked'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 处理控制模块状态变化
|
|||
|
|
handleStatusChanged(data) {
|
|||
|
|
console.log('控制模块状态改变:', data)
|
|||
|
|
// 刷新空间列表以更新状态
|
|||
|
|
this.refreshSpaceStatus(data.spaceId, data.status)
|
|||
|
|
},
|
|||
|
|
// 刷新空间状态
|
|||
|
|
refreshSpaceStatus(spaceId, newStatus) {
|
|||
|
|
// 更新本地存储的空间状态
|
|||
|
|
try {
|
|||
|
|
const currentSpace = uni.getStorageSync('kjobj')
|
|||
|
|
if (currentSpace && currentSpace.id === spaceId) {
|
|||
|
|
currentSpace.status = newStatus
|
|||
|
|
uni.setStorageSync('kjobj', currentSpace)
|
|||
|
|
}
|
|||
|
|
} catch(e) {
|
|||
|
|
console.warn('更新本地空间状态失败:', e)
|
|||
|
|
}
|
|||
|
|
// 更新spaceOptions中对应空间的状态
|
|||
|
|
const spaces = Array.isArray(this.spaceOptions) ? this.spaceOptions : []
|
|||
|
|
const targetIndex = spaces.findIndex(space =>
|
|||
|
|
(space.id || space.spaceId || space.ID || space.Id) == spaceId
|
|||
|
|
)
|
|||
|
|
if (targetIndex >= 0) {
|
|||
|
|
// 直接更新状态
|
|||
|
|
this.spaceOptions[targetIndex].status = newStatus
|
|||
|
|
// 强制更新页面配置以刷新头部显示
|
|||
|
|
this.updatePageConfigs()
|
|||
|
|
console.log('空间状态已更新:', this.spaceOptions[targetIndex])
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: #fff;
|
|||
|
|
height: 100vh;
|
|||
|
|
overflow: hidden;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-container {
|
|||
|
|
background: #fff;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
/* 确保触摸事件能够正常工作 */
|
|||
|
|
touch-action: pan-x pan-y;
|
|||
|
|
/* 防止页面滚动干扰手势识别 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 加载遮罩层样式 */
|
|||
|
|
.loading-overlay {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
z-index: 1000;
|
|||
|
|
background: rgba(255,255,255,0.96);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.spinner {
|
|||
|
|
width: 56rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 6rpx solid #e0e0e0;
|
|||
|
|
border-top-color: #4caf50;
|
|||
|
|
animation: spin 1s linear infinite;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
.loading-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #4caf50;
|
|||
|
|
}
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-content {
|
|||
|
|
padding-bottom: 120rpx; /* 为底部导航留出空间 */
|
|||
|
|
height: 83vh;
|
|||
|
|
overflow: scroll;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
/* 确保内容区域可以正常滚动 */
|
|||
|
|
touch-action: pan-x pan-y;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|