189 lines
3.6 KiB
Vue
189 lines
3.6 KiB
Vue
<template>
|
||
<view class="display-page">
|
||
<!-- 页面加载状态 -->
|
||
<Loading type="page" :loading="pageLoading" />
|
||
|
||
<!-- 顶部背景图 -->
|
||
<view class="top-bg">
|
||
<image src="/static/title_bg.png" mode="aspectFill" class="bg-img" />
|
||
</view>
|
||
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||
<view class="navbar-content">
|
||
<view class="navbar-back" @click="handleBack">
|
||
<text class="back-icon">‹</text>
|
||
</view>
|
||
<text class="navbar-title"></text>
|
||
<view class="navbar-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 - 可滚动 -->
|
||
<scroll-view class="content-area" scroll-y
|
||
:style="{ marginTop: (statusBarHeight + 44) + 'px', height: 'calc(100vh - ' + (statusBarHeight + 44) + 'px)' }">
|
||
<view class="content-wrapper">
|
||
<view class="image-card">
|
||
<image v-if="displayImage" class="display-img" :src="displayImage" mode="widthFix"
|
||
@click="previewImage" />
|
||
<view v-else class="image-placeholder">
|
||
<text>暂无内容</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useConfigStore } from '@/store/config.js'
|
||
import { getFullImageUrl } from '@/utils/image.js'
|
||
import Loading from '@/components/Loading/index.vue'
|
||
|
||
const configStore = useConfigStore()
|
||
|
||
const statusBarHeight = ref(20)
|
||
const pageLoading = ref(true)
|
||
|
||
const displayImage = computed(() => {
|
||
const img = configStore.displayPageImage
|
||
return img ? getFullImageUrl(img) : ''
|
||
})
|
||
|
||
const getSystemInfo = () => {
|
||
try {
|
||
const res = uni.getSystemInfoSync()
|
||
statusBarHeight.value = res.statusBarHeight || 20
|
||
} catch (error) {
|
||
console.error('获取系统信息失败:', error)
|
||
}
|
||
}
|
||
|
||
const handleBack = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
const previewImage = () => {
|
||
if (!displayImage.value) return
|
||
uni.previewImage({
|
||
urls: [displayImage.value]
|
||
})
|
||
}
|
||
|
||
const initPage = async () => {
|
||
pageLoading.value = true
|
||
try {
|
||
getSystemInfo()
|
||
configStore.isLoaded = false
|
||
await configStore.loadAppConfig()
|
||
} catch (error) {
|
||
console.error('初始化页面失败:', error)
|
||
} finally {
|
||
pageLoading.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
initPage()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.display-page {
|
||
height: 100vh;
|
||
background-color: #f5f6fa;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 400rpx;
|
||
z-index: 0;
|
||
|
||
.bg-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.custom-navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
|
||
.navbar-content {
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 24rpx;
|
||
|
||
.navbar-back {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.back-icon {
|
||
font-size: 56rpx;
|
||
color: #333;
|
||
font-weight: 300;
|
||
}
|
||
}
|
||
|
||
.navbar-title {
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.navbar-placeholder {
|
||
width: 80rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-area {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.content-wrapper {
|
||
padding: 24rpx 0 80rpx;
|
||
}
|
||
|
||
.image-card {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.display-img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.image-placeholder {
|
||
width: 90%;
|
||
height: 400rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|