hookehuyr

feat(views): 添加动态数据加载和链接字段

- 在Home.vue中添加category_link和post_link字段
- 重构Masters.vue移除示例数据,改为从API加载三师七证数据
- 修改MastersDetail.vue从API加载文章详情数据
......@@ -256,6 +256,7 @@ onMounted(async () => {
name: item.category_name,
cover: item.cover || '',
active: false,
category_link: item.category_link || '',
})) || [];
processSteps.value[0].active = true;
// 三师七证
......@@ -264,6 +265,7 @@ onMounted(async () => {
parent_sn: item.parent_sn,
name: item.category_name,
cover: item.cover || '',
category_link: item.category_link || '',
})) || [];
// 相关新闻
newsItems.value = list?.STDJXGXW?.map(item => ({
......@@ -272,6 +274,7 @@ onMounted(async () => {
title: item.post_title,
date: item.post_date,
image: item.photo || '',
post_link: item.post_link || '',
})) || [];
}
})
......@@ -286,8 +289,8 @@ const viewMore = (type, item) => {
switch (type) {
case '法会流程':
// 跳转页面
if (item?.category_link) {
location.href = item?.category_link;
if (currentStep.value?.category_link) {
location.href = currentStep.value?.category_link;
} else {
// 提示用户没有详情页
showToast('该法会流程没有跳转链接')
......
......@@ -50,67 +50,11 @@ const router = useRouter()
useTitle('三師七證')
// 单列数据(示例)
const singleItems = ref([
{
id: 101,
role: '中国·戒幢律寺',
name: '上明仁传师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 102,
role: '中国·戒幢律寺',
name: '上明仁传师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 103,
role: '中国·戒幢律寺',
name: '上明仁传师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
}
])
// 三师
const singleItems = ref([])
// 双列数据(示例)
const gridItems = ref([
{
id: 201,
role: '传戒师',
name: '上智和法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 202,
role: '教授师',
name: '上德弘法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 203,
role: '羯磨师',
name: '上寂明法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 204,
role: '得戒和尚',
name: '上慧觉法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 205,
role: '引礼师',
name: '上圆道法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
},
{
id: 206,
role: '开导师',
name: '上演真法师',
image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
}
])
// 七证
const gridItems = ref([])
const goDetail = (item) => {
router.push(`/masters/${item.id}`)
......@@ -136,7 +80,20 @@ onMounted(async () => {
// 调用接口获取三师七证数据
const { code, list } = await getSSQZAPI({ pid: pid.value });
if (code) {
console.warn(list);
const singleItemsData = list[0].list;
const gridItemsData = list[1].list;
singleItems.value = singleItemsData.map(item => ({
id: item.id,
role: item.post_excerpt,
name: item.post_title,
image: item.photo
}))
gridItems.value = gridItemsData.map(item => ({
id: item.id,
role: item.post_excerpt,
name: item.post_title,
image: item.photo
}))
}
})
</script>
......
<!--
* @Date: 2025-10-30 20:00:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-02 12:16:55
* @LastEditTime: 2025-11-04 11:28:14
* @FilePath: /stdj_h5/src/views/MastersDetail.vue
* @Description: 文件描述
-->
......@@ -9,11 +9,11 @@
<div class="masters-detail-container">
<section class="single-list">
<div class="item-card">
<img :src="item.src" :alt="item.title" class="item-image" />
<img :src="article_item.src" :alt="article_item.title" class="item-image" />
<div class="item-content">
<div class="item-role">{{ item.role }}</div>
<div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div>
<div class="item-desc">{{ item.desc }}</div>
<div class="item-role">{{ article_item.role }}</div>
<div class="item-name" v-html="formatNameWithSuperscript(article_item.name)"></div>
<div class="item-desc">{{ article_item.desc }}</div>
</div>
</div>
</section>
......@@ -21,18 +21,19 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import { useTitle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router'
// 导入接口
import { getArticleDetailAPI } from '@/api/index.js'
useTitle('三師七證 - 詳情')
const item = ref({
id: 101,
role: '中国·戒幢律寺',
name: '上明仁传师',
src: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
desc: '师法名宗思。字向愿。一九六五年出生,福建泉州人。一九八五年于虎溪岩寺,礼上广下平法师剃度出家。一九八九年于莆田广化寺,依止上妙下湛老和尚求受具足戒。先后任中国佛教协会副秘书长、福建省佛教协会常务副会长、泉州市佛教协会会长、晋江市佛教协会会长、泉州承天寺方丈、晋江庆莲寺住持、龙山寺寺务委员会主任、泉州佛学苑苑长、泉州市人大常委。 二〇一〇年,为承天寺三坛大戒教授律师,主持编修《泉州佛教梵刹文化综览》、《廋松集》「再版」、『传敏法师东西塔浮雕白描』总策划等。'
})
const route = useRoute()
const router = useRouter()
const article_item = ref({})
/**
* 为name字段的第一个文字添加上标效果
......@@ -47,6 +48,32 @@ const formatNameWithSuperscript = (name) => {
return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}
/**
* 加载文章详情
*/
const loadArticleDetail = async () => {
try {
const articleId = route.params.id
const { code, data } = await getArticleDetailAPI({ i: articleId })
if (code) {
// 遍历data对象,将每个元素转换为新的对象格式
article_item.value = {
id: data.id,
role: data.post_excerpt,
name: data.post_title,
src: data?.file_list?.photo?.value,
desc: data.post_content
}
}
} catch (error) {
console.error('加载文章详情失败:', error)
}
}
onMounted(() => {
loadArticleDetail()
})
</script>
......