121 lines
2.8 KiB
Vue
121 lines
2.8 KiB
Vue
<!-- 场景选择页：加载场景列表，点选后保存并返回首页 -->
|
||
<template>
|
||
<view class="page page-base">
|
||
<up-navbar title="选择场所" :fixed="false" :safe-area-inset-top="true" :border="false" />
|
||
|
||
<view v-if="loading" class="state-wrap">
|
||
<up-loading-icon mode="circle" size="48" text="加载中..." />
|
||
</view>
|
||
|
||
<view v-else-if="loadError" class="state-wrap">
|
||
<up-empty mode="wifi" text="加载失败，请检查网络" />
|
||
<up-button type="success" shape="circle" text="重试" class="retry-btn" @click="loadScenes" />
|
||
</view>
|
||
|
||
<view v-else-if="sceneList.length === 0" class="state-wrap">
|
||
<up-empty mode="list" text="暂无场景" />
|
||
</view>
|
||
|
||
<view v-else class="scene-list">
|
||
<view
|
||
v-for="scene in sceneList"
|
||
:key="scene.id"
|
||
class="scene-item"
|
||
:class="{ 'scene-item--active': scene.id === currentSceneId }"
|
||
@click="selectScene(scene)"
|
||
>
|
||
<text class="scene-name">{{ scene.name }}</text>
|
||
<up-icon
|
||
:name="scene.id === currentSceneId ? 'checkmark' : 'arrow-right'"
|
||
:size="scene.id === currentSceneId ? '16' : '14'"
|
||
:color="scene.id === currentSceneId ? '#26c996' : '#c0c4cc'"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getSceneList } from '@/api/scene'
|
||
import { getCurrentScene, setCurrentScene } from '@/store/scene'
|
||
import { navigateBack } from '@/utils/navigation'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
loadError: false,
|
||
sceneList: [],
|
||
currentSceneId: getCurrentScene()?.id ?? null
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loadScenes()
|
||
},
|
||
methods: {
|
||
// 拉取场景列表；失败时切换错误态供重试，toast 由请求封装统一弹出。
|
||
async loadScenes() {
|
||
this.loading = true
|
||
this.loadError = false
|
||
try {
|
||
const data = await getSceneList()
|
||
this.sceneList = Array.isArray(data) ? data : []
|
||
} catch (error) {
|
||
this.loadError = true
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
// 选中场景：保存后返回，首页 onShow 回显。
|
||
selectScene(scene) {
|
||
setCurrentScene(scene)
|
||
navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/common.css';
|
||
|
||
.state-wrap {
|
||
margin-top: 120rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.retry-btn {
|
||
margin-top: 40rpx;
|
||
width: 240rpx;
|
||
}
|
||
|
||
.scene-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.scene-item {
|
||
height: 104rpx;
|
||
padding: 0 32rpx;
|
||
margin-bottom: 2rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.scene-item--active {
|
||
background: #e9fff3;
|
||
}
|
||
|
||
.scene-name {
|
||
font-size: 32rpx;
|
||
color: #222;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.scene-item--active .scene-name {
|
||
color: #26c996;
|
||
}
|
||
</style>
|