feat(scene): 新增场景选择页(列表加载/错误重试/点选返回)
This commit is contained in:
parent
3ffdce0ec5
commit
8af15703f0
|
|
@ -0,0 +1,119 @@
|
||||||
|
<!-- 场景选择页:加载场景列表,点选后保存并返回首页 -->
|
||||||
|
<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="error" 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 {
|
||||||
|
this.sceneList = (await getSceneList()) || []
|
||||||
|
} 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>
|
||||||
Loading…
Reference in New Issue