古刹文章列表到详细的跳转
This commit is contained in:
WindowBird
parent
c5d59a3951
commit
606d69f16f
|
|
@ -3,18 +3,18 @@
|
|||
<custom-navbar ref="customNavbar" title="古刹巡礼" />
|
||||
<tile-grid />
|
||||
<scroll-view
|
||||
class="scroll-container"
|
||||
scroll-y="true"
|
||||
refresher-enabled="true"
|
||||
:refresher-triggered="refreshing"
|
||||
class="scroll-container"
|
||||
refresher-enabled="true"
|
||||
scroll-y="true"
|
||||
@refresherrefresh="onRefresh"
|
||||
>
|
||||
<view class="header">
|
||||
<!-- 状态展示 -->
|
||||
<status-display
|
||||
v-if="loading && templeList.length === 0"
|
||||
type="loading"
|
||||
loading-text="加载中..."
|
||||
type="loading"
|
||||
/>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
|
|
@ -25,225 +25,225 @@
|
|||
|
||||
<!-- 古刹列表 -->
|
||||
<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
|
||||
:key="defaultTemple.id"
|
||||
:title="defaultTemple.title"
|
||||
:button-text="defaultTemple.buttonText"
|
||||
:description="defaultTemple.description"
|
||||
:image-url="defaultTemple.imageUrl"
|
||||
:button-text="defaultTemple.buttonText"
|
||||
@click="handleTempleClick(defaultTemple)"
|
||||
:title="defaultTemple.title"
|
||||
class="temple-card default-temple"
|
||||
@click="handleTempleClick(defaultTemple)"
|
||||
/>
|
||||
<!-- 动态数据项 -->
|
||||
<ancient-item
|
||||
v-for="(temple, index) in templeList"
|
||||
:key="temple.id"
|
||||
:title="temple.title"
|
||||
:button-text="temple.buttonText"
|
||||
:description="temple.description"
|
||||
:image-url="temple.imageUrl"
|
||||
:button-text="temple.buttonText"
|
||||
@click="handleTempleClick(temple)"
|
||||
:title="temple.title"
|
||||
class="temple-card"
|
||||
@click="handleTempleClick(temple)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<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>
|
||||
</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'
|
||||
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 = '网络请求失败'
|
||||
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',
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 处理古刹点击事件
|
||||
handleTempleClick(temple) {
|
||||
console.log('点击了古刹:', temple.title)
|
||||
|
||||
// 如果是默认项，可以特殊处理
|
||||
if (temple.isDefault) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/memorial/memorial`,
|
||||
})
|
||||
} 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
|
||||
},
|
||||
} 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.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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background: #faf8f3;
|
||||
}
|
||||
.page {
|
||||
background: #faf8f3;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
height: 80vh; /* 确保scroll-view占满屏幕高度 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.scroll-container {
|
||||
height: 80vh; /* 确保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;
|
||||
}
|
||||
.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-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;
|
||||
}
|
||||
.temple-card {
|
||||
width: 100%;
|
||||
//margin-bottom: 20rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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; // 保持图片比例
|
||||
}
|
||||
.bottom {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%; // 确保占满宽度
|
||||
z-index: 10; // 防止被内容覆盖
|
||||
.files {
|
||||
width: 100%; // 图片宽度适配容器
|
||||
height: 80rpx; // 根据设计图调整高度
|
||||
object-fit: cover; // 保持图片比例
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ancientItem',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '往生殿',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '用于祈愿离苦，善缘延续',
|
||||
},
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: 'https://api.ccttiot.com/image-1754553886458.png',
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: '了解详情',
|
||||
},
|
||||
export default {
|
||||
name: "ancientItem",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "往生殿",
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit('click')
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "用于祈愿离苦，善缘延续",
|
||||
},
|
||||
}
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: "https://api.ccttiot.com/image-1754553886458.png",
|
||||
},
|
||||
buttonText: {
|
||||
type: String,
|
||||
default: "了解详情",
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$emit("click");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
<view class="card-background">
|
||||
<image
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
:alt="title"
|
||||
:src="imageUrl"
|
||||
class="background-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
|
|
@ -53,111 +53,110 @@
|
|||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* ==================== 卡片容器 ==================== */
|
||||
.ancient-card {
|
||||
position: relative;
|
||||
width: 670rpx;
|
||||
height: 286rpx;
|
||||
border-radius: 16rpx;
|
||||
<style lang="scss" scoped>
|
||||
/* ==================== 卡片容器 ==================== */
|
||||
.ancient-card {
|
||||
position: relative;
|
||||
width: 670rpx;
|
||||
height: 286rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
/* ========== 背景层 ========== */
|
||||
.card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* ========== 背景层 ========== */
|
||||
.card-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #3d3d3d;
|
||||
|
||||
/* 真实背景图 */
|
||||
.background-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #3d3d3d;
|
||||
|
||||
/* 真实背景图 */
|
||||
.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);
|
||||
}
|
||||
object-fit: cover; // 保持比例填充
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* ========== 内容层 ========== */
|
||||
.card-content {
|
||||
position: relative;
|
||||
z-index: 2; // 确保内容在背景上层
|
||||
/* 缺省背景（渐变+模糊） */
|
||||
.placeholder-background {
|
||||
width: 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;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
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); // 毛玻璃效果
|
||||
height: 54rpx;
|
||||
border-radius: 33rpx 33rpx 33rpx 33rpx;
|
||||
border: 1rpx solid #ffffff;
|
||||
|
||||
/* 标题样式 */
|
||||
.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;
|
||||
}
|
||||
/* 箭头图标 */
|
||||
.arrow-icon {
|
||||
margin-left: 8px;
|
||||
|
||||
/* 描述文本 */
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user