105 lines
2.2 KiB
Vue
105 lines
2.2 KiB
Vue
<template>
|
|
<view class="team-page">
|
|
<!-- 加载状态 -->
|
|
<Loading v-if="pageLoading" type="page" :loading="true" />
|
|
|
|
<!-- 团队介绍图片 -->
|
|
<view v-else class="team-content">
|
|
<template v-if="teamImages.length > 0">
|
|
<image
|
|
v-for="(item, index) in teamImages"
|
|
:key="index"
|
|
:src="item"
|
|
mode="scaleToFill"
|
|
class="team-image"
|
|
/>
|
|
</template>
|
|
|
|
<!-- 无数据时显示空状态 -->
|
|
<view v-else class="empty-state">
|
|
<image src="/static/ic_empty.png" mode="aspectFit" class="empty-icon" />
|
|
<text class="empty-text">暂无团队介绍</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* 团队页面
|
|
* 展示团队介绍图片，全屏无导航栏
|
|
*/
|
|
import { ref, onMounted } from 'vue'
|
|
import { getTeamInfo } from '@/api/team.js'
|
|
import Loading from '@/components/Loading/index.vue'
|
|
|
|
// 页面状态
|
|
const pageLoading = ref(true)
|
|
const teamImages = ref([])
|
|
|
|
/**
|
|
* 加载团队介绍数据
|
|
*/
|
|
async function loadTeamInfo() {
|
|
pageLoading.value = true
|
|
try {
|
|
const res = await getTeamInfo()
|
|
if (res && res.code === 0 && res.data) {
|
|
const images = res.data.images || res.data.list || res.data
|
|
if (Array.isArray(images)) {
|
|
teamImages.value = images.map(item =>
|
|
typeof item === 'string' ? item : (item.imageUrl || item)
|
|
)
|
|
} else {
|
|
teamImages.value = []
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('加载团队介绍失败:', error)
|
|
uni.showToast({ title: '加载失败，请稍后重试', icon: 'none' })
|
|
} finally {
|
|
pageLoading.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadTeamInfo()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/styles/variables.scss';
|
|
|
|
.team-page {
|
|
min-height: 100vh;
|
|
background-color: $bg-white;
|
|
}
|
|
|
|
.team-content {
|
|
.team-image {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
|
|
.empty-icon {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: $spacing-lg;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: $font-size-md;
|
|
color: $text-placeholder;
|
|
}
|
|
}
|
|
</style>
|