首页支持不同参数page和aid进行页面跳转和文章跳转
This commit is contained in:
minimaxagent1
parent
fe2c53f01b
commit
8537f196df
|
|
@ -95,6 +95,13 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/article/article-detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "文章详情",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/institutionalStructure/donationRecord",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
|
|
|
|||
229
pages/article/article-detail.vue
Normal file
229
pages/article/article-detail.vue
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<!-- 自定义导航栏 -->
|
||||
<custom-navbar :title="articleData.title || '文章详情'" />
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<view v-if="loading" class="loading-container">
|
||||
<view class="loading-content">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<view v-else-if="articleData" class="article-container">
|
||||
<!-- 文章标题 -->
|
||||
<view class="article-header">
|
||||
<text class="article-title">{{ articleData.title }}</text>
|
||||
<text v-if="articleData.subtitle" class="article-subtitle">{{ articleData.subtitle }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 文章封面图 -->
|
||||
<view v-if="articleData.coverUrl" class="article-cover">
|
||||
<image :src="articleData.coverUrl" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 文章内容 -->
|
||||
<view class="article-content">
|
||||
<rich-text :nodes="articleData.content"></rich-text>
|
||||
</view>
|
||||
|
||||
<!-- 文章信息 -->
|
||||
<view class="article-info">
|
||||
<text class="info-item">发布时间：{{ formatTime(articleData.createTime) }}</text>
|
||||
<text v-if="articleData.templeName" class="info-item">寺庙：{{ articleData.templeName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<view v-else class="error-container">
|
||||
<view class="error-content">
|
||||
<text>内容加载失败</text>
|
||||
<button class="retry-btn" @click="loadArticleData">重新加载</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomNavbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
articleData: null,
|
||||
articleId: null
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 从页面参数或本地存储获取文章数据
|
||||
if (options.id) {
|
||||
this.articleId = options.id;
|
||||
this.loadArticleData();
|
||||
} else {
|
||||
// 从本地存储获取文章数据
|
||||
const storedArticle = uni.getStorageSync('currentArticle');
|
||||
if (storedArticle) {
|
||||
this.articleData = storedArticle;
|
||||
this.loading = false;
|
||||
// 清除本地存储
|
||||
uni.removeStorageSync('currentArticle');
|
||||
} else {
|
||||
this.loading = false;
|
||||
uni.showToast({
|
||||
title: '文章数据不存在',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 加载文章数据
|
||||
async loadArticleData() {
|
||||
if (!this.articleId) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
try {
|
||||
const { getArticleById } = await import('@/api/article/article.js');
|
||||
const response = await getArticleById(this.articleId);
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
this.articleData = response.data;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: response.msg || '获取文章失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取文章详情失败:', error);
|
||||
uni.showToast({
|
||||
title: '网络错误',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatTime(timeStr) {
|
||||
if (!timeStr) return '';
|
||||
const date = new Date(timeStr);
|
||||
return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.loading-container,
|
||||
.error-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60vh;
|
||||
}
|
||||
|
||||
.loading-content,
|
||||
.error-content {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx 40rpx;
|
||||
background-color: #4C97E7;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
padding: 30rpx;
|
||||
background-color: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.article-subtitle {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.article-cover {
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.article-content {
|
||||
margin-bottom: 30rpx;
|
||||
line-height: 1.8;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
|
||||
:deep(p) {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
:deep(a) {
|
||||
color: #4C97E7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
:deep(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.article-info {
|
||||
padding-top: 30rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
|
||||
.info-item {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -368,9 +368,78 @@ import { getArticleById } from "../../api/article/article.js";
|
|||
}
|
||||
},
|
||||
|
||||
// 页面跳转方法 - 使用路由仓库
|
||||
navigateToPage(pageType) {
|
||||
navigateToPage(pageType);
|
||||
// 兼容两种跳转方式：page路由跳转 或 aid文章详情跳转
|
||||
async navigateToPage(item, index) {
|
||||
try {
|
||||
console.log('导航项信息:', item);
|
||||
console.log('导航项索引:', index);
|
||||
|
||||
// 优先使用page字段进行路由跳转
|
||||
if (item.page) {
|
||||
console.log('使用page字段进行路由跳转:', item.page);
|
||||
// 导入路由工具
|
||||
const { navigateToPage: routerNavigate } = await import("../../utils/router.js");
|
||||
routerNavigate(item.page);
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果没有page字段，则使用aid进行文章详情跳转
|
||||
if (item.aid) {
|
||||
console.log('使用aid字段获取文章详情:', item.aid);
|
||||
|
||||
// 显示加载提示
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
|
||||
// 调用API获取文章详情
|
||||
const response = await getArticleById(item.aid);
|
||||
|
||||
// 隐藏加载提示
|
||||
uni.hideLoading();
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
console.log('获取文章详情成功:', response.data);
|
||||
|
||||
// 将文章数据存储到本地，供目标页面使用
|
||||
uni.setStorageSync('currentArticle', response.data);
|
||||
|
||||
// 直接跳转到文章详情页面
|
||||
uni.navigateTo({
|
||||
url: '/pages/article/article-detail',
|
||||
fail: (err) => {
|
||||
console.error('跳转到文章详情页面失败:', err);
|
||||
uni.showToast({
|
||||
title: '页面跳转失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('获取文章详情失败:', response);
|
||||
uni.showToast({
|
||||
title: '获取内容失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.error('导航项既没有page字段也没有aid字段:', item);
|
||||
uni.showToast({
|
||||
title: '配置错误',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
// 隐藏加载提示
|
||||
uni.hideLoading();
|
||||
|
||||
console.error('导航跳转出错:', error);
|
||||
uni.showToast({
|
||||
title: '网络错误',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user