262 lines
6.8 KiB
Vue
262 lines
6.8 KiB
Vue
<template>
|
|
<view class="page">
|
|
<custom-navbar
|
|
ref="customNavbar"
|
|
title="古刹巡礼"
|
|
/>
|
|
<tile-grid/>
|
|
<scroll-view
|
|
class="scroll-container"
|
|
scroll-y="true"
|
|
refresher-enabled="true"
|
|
:refresher-triggered="refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
>
|
|
<view class="header" >
|
|
<!-- 状态展示 -->
|
|
<status-display
|
|
v-if="loading && templeList.length === 0"
|
|
type="loading"
|
|
loading-text="加载中..."
|
|
/>
|
|
|
|
<!-- 错误状态 -->
|
|
<view v-else-if="error" class="error-container">
|
|
<view class="error-text">{{ error }}</view>
|
|
<button class="retry-button" @click="loadPageData">重新加载</button>
|
|
</view>
|
|
|
|
<!-- 古刹列表 -->
|
|
<view v-else class="temple-list">
|
|
<view v-if="templeList.length === 0" class="no-data">
|
|
暂无古刹数据
|
|
</view>
|
|
<!-- 默认项 -->
|
|
<ancient-item
|
|
:key="defaultTemple.id"
|
|
:title="defaultTemple.title"
|
|
:description="defaultTemple.description"
|
|
:image-url="defaultTemple.imageUrl"
|
|
:button-text="defaultTemple.buttonText"
|
|
@click="handleTempleClick(defaultTemple)"
|
|
class="temple-card default-temple"
|
|
/>
|
|
<!-- 动态数据项 -->
|
|
<ancient-item
|
|
v-for="(temple, index) in templeList"
|
|
:key="temple.id"
|
|
:title="temple.title"
|
|
:description="temple.description"
|
|
:image-url="temple.imageUrl"
|
|
:button-text="temple.buttonText"
|
|
@click="handleTempleClick(temple)"
|
|
class="temple-card"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="bottom">
|
|
<image :src="CommonEnum.BOTTOM_TILES" mode="aspectFit" class="files"></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CommonEnum from "../../enum/common";
|
|
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
|
import StatusDisplay from "../../components/status-display/status-display.vue";
|
|
import AncientItem from "./commponts/ancientItem.vue";
|
|
import { getTempleTours } from "../../api/article/article.js";
|
|
import PageScrollMixin from "../../mixins/page-scroll-mixin.js";
|
|
|
|
export default {
|
|
mixins: [PageScrollMixin],
|
|
components: {
|
|
CustomNavbar,
|
|
StatusDisplay,
|
|
'ancient-item': AncientItem
|
|
},
|
|
data() {
|
|
return {
|
|
CommonEnum,
|
|
loading: false,
|
|
templeList: [],
|
|
refreshing: false, // 新增：控制下拉刷新的状态
|
|
error: null, // 新增：错误状态
|
|
// 硬编码的默认项
|
|
defaultTemple: {
|
|
id: 'default-temple',
|
|
title: '往生殿',
|
|
description: "用于祈愿离苦，善缘延续",
|
|
imageUrl: 'https://api.ccttiot.com/image-1754553886458.png', // 默认图片路径
|
|
buttonText: '了解详情',
|
|
detail: '万佛塔是一座具有重要历史价值的古建筑...',
|
|
templeName: '万佛塔',
|
|
isDefault: true // 标记为默认项
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 页面加载时获取数据
|
|
this.loadPageData()
|
|
},
|
|
methods: {
|
|
// 加载页面数据
|
|
async loadPageData() {
|
|
this.loading = true
|
|
this.error = null // 清除之前的错误
|
|
try {
|
|
const response = await getTempleTours()
|
|
if (response.code === 200 && response.data) {
|
|
// 转换数据格式以适配组件
|
|
this.templeList = response.data
|
|
.filter(item => item.coverUrl) // 只显示有封面的项目
|
|
.map(item => ({
|
|
id: item.id || Math.random().toString(36).substr(2, 9),
|
|
title: item.title || '未知古刹',
|
|
description: item.subtitle || '暂无描述',
|
|
imageUrl: item.coverUrl,
|
|
buttonText: '了解详情',
|
|
detail: item.content || '',
|
|
templeName: item.templeName
|
|
}))
|
|
} else {
|
|
console.error('获取古刹数据失败:', response.msg)
|
|
this.error = response.msg || '获取数据失败'
|
|
uni.showToast({
|
|
title: this.error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('获取页面数据失败:', error)
|
|
this.error = '网络请求失败'
|
|
uni.showToast({
|
|
title: this.error,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
|
|
// 处理古刹点击事件
|
|
handleTempleClick(temple) {
|
|
console.log('点击了古刹:', temple.title)
|
|
|
|
// 如果是默认项，可以特殊处理
|
|
if (temple.isDefault) {
|
|
uni.showToast({
|
|
title: `查看${temple.title}详情（默认项）`,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// 可以跳转到默认项的详情页面
|
|
// uni.navigateTo({
|
|
// url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}&isDefault=true`
|
|
// })
|
|
} else {
|
|
// 普通项的处理
|
|
uni.showToast({
|
|
title: `查看${temple.title}详情`,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
// 示例：跳转到详情页面
|
|
// uni.navigateTo({
|
|
// url: `/pages/ancient/detail?id=${temple.id}&title=${temple.title}`
|
|
// })
|
|
}
|
|
},
|
|
|
|
// 下拉刷新
|
|
async onRefresh() {
|
|
this.refreshing = true;
|
|
await this.loadPageData();
|
|
this.refreshing = false;
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background: #FAF8F3;
|
|
}
|
|
|
|
.scroll-container {
|
|
height: 100vh; /* 确保scroll-view占满屏幕高度 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
padding-bottom: 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.temple-list {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
|
|
}
|
|
|
|
.temple-card {
|
|
width: 100%;
|
|
//margin-bottom: 20rpx;
|
|
align-items: center;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 40rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.error-container {
|
|
text-align: center;
|
|
padding: 40rpx;
|
|
color: #f00;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.retry-button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 32rpx;
|
|
line-height: 1;
|
|
}
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%; // 确保占满宽度
|
|
z-index: 10; // 防止被内容覆盖
|
|
.files {
|
|
width: 100%; // 图片宽度适配容器
|
|
height: 80rpx; // 根据设计图调整高度
|
|
object-fit: cover; // 保持图片比例
|
|
}
|
|
}
|
|
</style> |