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

364
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,225 +25,225 @@
<!-- 古刹列表 --> <!-- 古刹列表 -->
<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 {
CommonEnum, CommonEnum,
loading: false, loading: false,
templeList: [], templeList: [],
refreshing: false, // 新增：控制下拉刷新的状态 refreshing: false, // 新增：控制下拉刷新的状态
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({
title: this.error,
icon: 'none',
duration: 2000,
})
}
} catch (error) {
console.error('获取页面数据失败:', error)
this.error = '网络请求失败'
uni.showToast({ uni.showToast({
title: this.error, title: this.error,
icon: 'none', icon: "none",
duration: 2000, duration: 2000,
}) });
} finally {
this.loading = false
} }
}, } catch (error) {
console.error("获取页面数据失败:", error);
// 处理古刹点击事件 this.error = "网络请求失败";
handleTempleClick(temple) { uni.showToast({
console.log('点击了古刹:', temple.title) title: this.error,
icon: "none",
// 如果是默认项，可以特殊处理 duration: 2000,
if (temple.isDefault) { });
uni.navigateTo({ } finally {
url: `/pages/memorial/memorial`, this.loading = false;
}) }
} 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
},
}, },
}
// 处理古刹点击事件
handleTempleClick(temple) {
console.log("点击了古刹:", temple.title);
// 如果是默认项，可以特殊处理
if (temple.isDefault) {
uni.navigateTo({
url: `/pages/memorial/memorial`,
});
} else {
// 示例：跳转到详情页面
uni.navigateTo({
url: `/app/article/tourById?id=${temple.id}`,
});
}
},
// 下拉刷新
async onRefresh() {
this.refreshing = true;
await this.loadPageData();
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;
align-items: center; align-items: center;
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;
font-size: 28rpx; font-size: 28rpx;
display: flex; display: flex;
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;
width: 100%; // 确保占满宽度 width: 100%; // 确保占满宽度
z-index: 10; // 防止被内容覆盖 z-index: 10; // 防止被内容覆盖
.files { .files {
width: 100%; // 图片宽度适配容器 width: 100%; // 图片宽度适配容器
height: 80rpx; // 根据设计图调整高度 height: 80rpx; // 根据设计图调整高度
object-fit: cover; // 保持图片比例 object-fit: cover; // 保持图片比例
}
} }
}
</style> </style>

235
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: {
type: String,
default: '用于祈愿离苦，善缘延续',
},
imageUrl: {
type: String,
default: 'https://api.ccttiot.com/image-1754553886458.png',
},
buttonText: {
type: String,
default: '了解详情',
},
}, },
methods: { description: {
handleClick() { type: String,
this.$emit('click') default: "用于祈愿离苦，善缘延续",
},
}, },
} imageUrl: {
type: String,
default: "https://api.ccttiot.com/image-1754553886458.png",
},
buttonText: {
type: String,
default: "了解详情",
},
},
methods: {
handleClick() {
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,111 +53,110 @@
</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;
border-radius: 16rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
/* ========== 背景层 ========== */ /* ========== 背景层 ========== */
.card-background { .card-background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%;
height: 100%;
background: #3d3d3d;
/* 真实背景图 */
.background-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #3d3d3d; object-fit: cover; // 保持比例填充
opacity: 0.4;
/* 真实背景图 */
.background-image {
width: 100%;
height: 100%;
object-fit: cover; // 保持比例填充
opacity: 0.4;
}
/* 缺省背景（渐变+模糊） */
.placeholder-background {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
filter: blur(8px);
}
} }
/* ========== 内容层 ========== */ /* 缺省背景（渐变+模糊） */
.card-content { .placeholder-background {
position: relative; width: 100%;
z-index: 2; // 确保内容在背景上层
height: 100%; height: 100%;
padding: 40rpx 28rpx; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
filter: blur(8px);
}
}
/* ========== 内容层 ========== */
.card-content {
position: relative;
z-index: 2; // 确保内容在背景上层
height: 100%;
padding: 40rpx 28rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
/* 标题样式 */
.card-title {
width: 160rpx;
height: 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #ffffff;
line-height: 54rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
/* 描述文本 */
.card-description {
margin: 20rpx 0 28rpx 0;
height: 38rpx;
font-weight: 400;
font-size: 28rpx;
color: #ffffff;
line-height: 38rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
/* 按钮样式 */
.card-button {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: flex-start; padding: 0 15rpx;
align-items: flex-start; color: white;
font-size: 14px;
font-weight: 500;
//background: rgba(255, 255, 255, 0.2);
//backdrop-filter: blur(10px); // 毛玻璃效果
height: 54rpx;
border-radius: 33rpx 33rpx 33rpx 33rpx;
border: 1rpx solid #ffffff;
/* 标题样式 */ /* 箭头图标 */
.card-title { .arrow-icon {
width: 160rpx; margin-left: 8px;
height: 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #ffffff;
line-height: 54rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
/* 描述文本 */ .arrow-text {
.card-description { width: 96rpx;
margin: 20rpx 0 28rpx 0; height: 32rpx;
height: 38rpx; font-weight: 400;
font-weight: 400; font-size: 24rpx;
font-size: 28rpx; color: #ffffff;
color: #ffffff; line-height: 32rpx;
line-height: 38rpx; text-align: left;
text-align: left; font-style: normal;
font-style: normal; text-transform: none;
text-transform: none;
}
/* 按钮样式 */
.card-button {
display: flex;
align-items: center;
padding: 0 15rpx;
color: white;
font-size: 14px;
font-weight: 500;
//background: rgba(255, 255, 255, 0.2);
//backdrop-filter: blur(10px); // 毛玻璃效果
width: 176rpx;
height: 54rpx;
border-radius: 33rpx 33rpx 33rpx 33rpx;
border: 1rpx solid #ffffff;
/* 箭头图标 */
.arrow-icon {
margin-left: 8px;
.arrow-text {
width: 96rpx;
height: 32rpx;
font-weight: 400;
font-size: 24rpx;
color: #ffffff;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
} }
} }
} }
} }
}
</style> </style>