WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

古刹文章列表到详细的跳转

Browse Source
This commit is contained in:
WindowBird 2025-08-14 14:17:01 +08:00
parent c5d59a3951
commit 606d69f16f
2 changed files with 299 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
pages/ancient/ancient.vue
View File

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

27
pages/ancient/commponts/ancientItem.vue
View File

@ -1,30 +1,30 @@
<script> <script>
export default { export default {
name: 'ancientItem', name: "ancientItem",
props: { props: {
title: { title: {
type: String, type: String,
default: '往生殿', default: "往生殿",
}, },
description: { description: {
type: String, type: String,
default: '用于祈愿离苦，善缘延续', default: "用于祈愿离苦，善缘延续",
}, },
imageUrl: { imageUrl: {
type: String, type: String,
default: 'https://api.ccttiot.com/image-1754553886458.png', default: "https://api.ccttiot.com/image-1754553886458.png",
}, },
buttonText: { buttonText: {
type: String, type: String,
default: '了解详情', default: "了解详情",
}, },
}, },
methods: { methods: {
handleClick() { handleClick() {
this.$emit('click') this.$emit("click");
}, },
}, },
} };
</script> </script>
<template> <template>
@ -32,8 +32,8 @@
<view class="card-background"> <view class="card-background">
<image <image
v-if="imageUrl" v-if="imageUrl"
:src="imageUrl"
:alt="title" :alt="title"
:src="imageUrl"
class="background-image" class="background-image"
mode="aspectFill" mode="aspectFill"
/> />
@ -53,9 +53,9 @@
</view> </view>
</template> </template>
<style scoped lang="scss"> <style lang="scss" scoped>
/* ==================== 卡片容器 ==================== */ /* ==================== 卡片容器 ==================== */
.ancient-card { .ancient-card {
position: relative; position: relative;
width: 670rpx; width: 670rpx;
height: 286rpx; height: 286rpx;
@ -136,7 +136,6 @@
font-weight: 500; font-weight: 500;
//background: rgba(255, 255, 255, 0.2); //background: rgba(255, 255, 255, 0.2);
//backdrop-filter: blur(10px); // 毛玻璃效果 //backdrop-filter: blur(10px); // 毛玻璃效果
width: 176rpx;
height: 54rpx; height: 54rpx;
border-radius: 33rpx 33rpx 33rpx 33rpx; border-radius: 33rpx 33rpx 33rpx 33rpx;
border: 1rpx solid #ffffff; border: 1rpx solid #ffffff;
@ -159,5 +158,5 @@
} }
} }
} }
} }
</style> </style>