hookehuyr

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

- 在Home.vue中添加category_link和post_link字段
- 重构Masters.vue移除示例数据,改为从API加载三师七证数据
- 修改MastersDetail.vue从API加载文章详情数据
...@@ -256,6 +256,7 @@ onMounted(async () => { ...@@ -256,6 +256,7 @@ onMounted(async () => {
256 name: item.category_name, 256 name: item.category_name,
257 cover: item.cover || '', 257 cover: item.cover || '',
258 active: false, 258 active: false,
259 + category_link: item.category_link || '',
259 })) || []; 260 })) || [];
260 processSteps.value[0].active = true; 261 processSteps.value[0].active = true;
261 // 三师七证 262 // 三师七证
...@@ -264,6 +265,7 @@ onMounted(async () => { ...@@ -264,6 +265,7 @@ onMounted(async () => {
264 parent_sn: item.parent_sn, 265 parent_sn: item.parent_sn,
265 name: item.category_name, 266 name: item.category_name,
266 cover: item.cover || '', 267 cover: item.cover || '',
268 + category_link: item.category_link || '',
267 })) || []; 269 })) || [];
268 // 相关新闻 270 // 相关新闻
269 newsItems.value = list?.STDJXGXW?.map(item => ({ 271 newsItems.value = list?.STDJXGXW?.map(item => ({
...@@ -272,6 +274,7 @@ onMounted(async () => { ...@@ -272,6 +274,7 @@ onMounted(async () => {
272 title: item.post_title, 274 title: item.post_title,
273 date: item.post_date, 275 date: item.post_date,
274 image: item.photo || '', 276 image: item.photo || '',
277 + post_link: item.post_link || '',
275 })) || []; 278 })) || [];
276 } 279 }
277 }) 280 })
...@@ -286,8 +289,8 @@ const viewMore = (type, item) => { ...@@ -286,8 +289,8 @@ const viewMore = (type, item) => {
286 switch (type) { 289 switch (type) {
287 case '法会流程': 290 case '法会流程':
288 // 跳转页面 291 // 跳转页面
289 - if (item?.category_link) { 292 + if (currentStep.value?.category_link) {
290 - location.href = item?.category_link; 293 + location.href = currentStep.value?.category_link;
291 } else { 294 } else {
292 // 提示用户没有详情页 295 // 提示用户没有详情页
293 showToast('该法会流程没有跳转链接') 296 showToast('该法会流程没有跳转链接')
......
...@@ -50,67 +50,11 @@ const router = useRouter() ...@@ -50,67 +50,11 @@ const router = useRouter()
50 50
51 useTitle('三師七證') 51 useTitle('三師七證')
52 52
53 -// 单列数据(示例) 53 +// 三师
54 -const singleItems = ref([ 54 +const singleItems = ref([])
55 - {
56 - id: 101,
57 - role: '中国·戒幢律寺',
58 - name: '上明仁传师',
59 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
60 - },
61 - {
62 - id: 102,
63 - role: '中国·戒幢律寺',
64 - name: '上明仁传师',
65 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
66 - },
67 - {
68 - id: 103,
69 - role: '中国·戒幢律寺',
70 - name: '上明仁传师',
71 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
72 - }
73 -])
74 55
75 -// 双列数据(示例) 56 +// 七证
76 -const gridItems = ref([ 57 +const gridItems = ref([])
77 - {
78 - id: 201,
79 - role: '传戒师',
80 - name: '上智和法师',
81 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
82 - },
83 - {
84 - id: 202,
85 - role: '教授师',
86 - name: '上德弘法师',
87 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
88 - },
89 - {
90 - id: 203,
91 - role: '羯磨师',
92 - name: '上寂明法师',
93 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
94 - },
95 - {
96 - id: 204,
97 - role: '得戒和尚',
98 - name: '上慧觉法师',
99 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
100 - },
101 - {
102 - id: 205,
103 - role: '引礼师',
104 - name: '上圆道法师',
105 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
106 - },
107 - {
108 - id: 206,
109 - role: '开导师',
110 - name: '上演真法师',
111 - image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg'
112 - }
113 -])
114 58
115 const goDetail = (item) => { 59 const goDetail = (item) => {
116 router.push(`/masters/${item.id}`) 60 router.push(`/masters/${item.id}`)
...@@ -136,7 +80,20 @@ onMounted(async () => { ...@@ -136,7 +80,20 @@ onMounted(async () => {
136 // 调用接口获取三师七证数据 80 // 调用接口获取三师七证数据
137 const { code, list } = await getSSQZAPI({ pid: pid.value }); 81 const { code, list } = await getSSQZAPI({ pid: pid.value });
138 if (code) { 82 if (code) {
139 - console.warn(list); 83 + const singleItemsData = list[0].list;
84 + const gridItemsData = list[1].list;
85 + singleItems.value = singleItemsData.map(item => ({
86 + id: item.id,
87 + role: item.post_excerpt,
88 + name: item.post_title,
89 + image: item.photo
90 + }))
91 + gridItems.value = gridItemsData.map(item => ({
92 + id: item.id,
93 + role: item.post_excerpt,
94 + name: item.post_title,
95 + image: item.photo
96 + }))
140 } 97 }
141 }) 98 })
142 </script> 99 </script>
......
1 <!-- 1 <!--
2 * @Date: 2025-10-30 20:00:25 2 * @Date: 2025-10-30 20:00:25
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-11-02 12:16:55 4 + * @LastEditTime: 2025-11-04 11:28:14
5 * @FilePath: /stdj_h5/src/views/MastersDetail.vue 5 * @FilePath: /stdj_h5/src/views/MastersDetail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
9 <div class="masters-detail-container"> 9 <div class="masters-detail-container">
10 <section class="single-list"> 10 <section class="single-list">
11 <div class="item-card"> 11 <div class="item-card">
12 - <img :src="item.src" :alt="item.title" class="item-image" /> 12 + <img :src="article_item.src" :alt="article_item.title" class="item-image" />
13 <div class="item-content"> 13 <div class="item-content">
14 - <div class="item-role">{{ item.role }}</div> 14 + <div class="item-role">{{ article_item.role }}</div>
15 - <div class="item-name" v-html="formatNameWithSuperscript(item.name)"></div> 15 + <div class="item-name" v-html="formatNameWithSuperscript(article_item.name)"></div>
16 - <div class="item-desc">{{ item.desc }}</div> 16 + <div class="item-desc">{{ article_item.desc }}</div>
17 </div> 17 </div>
18 </div> 18 </div>
19 </section> 19 </section>
...@@ -21,18 +21,19 @@ ...@@ -21,18 +21,19 @@
21 </template> 21 </template>
22 22
23 <script setup> 23 <script setup>
24 -import { ref } from 'vue' 24 +import { ref, onMounted } from 'vue'
25 import { useTitle } from '@vueuse/core'; 25 import { useTitle } from '@vueuse/core';
26 +import { useRoute, useRouter } from 'vue-router'
27 +
28 +// 导入接口
29 +import { getArticleDetailAPI } from '@/api/index.js'
26 30
27 useTitle('三師七證 - 詳情') 31 useTitle('三師七證 - 詳情')
28 32
29 -const item = ref({ 33 +const route = useRoute()
30 - id: 101, 34 +const router = useRouter()
31 - role: '中国·戒幢律寺', 35 +
32 - name: '上明仁传师', 36 +const article_item = ref({})
33 - src: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
34 - desc: '师法名宗思。字向愿。一九六五年出生,福建泉州人。一九八五年于虎溪岩寺,礼上广下平法师剃度出家。一九八九年于莆田广化寺,依止上妙下湛老和尚求受具足戒。先后任中国佛教协会副秘书长、福建省佛教协会常务副会长、泉州市佛教协会会长、晋江市佛教协会会长、泉州承天寺方丈、晋江庆莲寺住持、龙山寺寺务委员会主任、泉州佛学苑苑长、泉州市人大常委。 二〇一〇年,为承天寺三坛大戒教授律师,主持编修《泉州佛教梵刹文化综览》、《廋松集》「再版」、『传敏法师东西塔浮雕白描』总策划等。'
35 -})
36 37
37 /** 38 /**
38 * 为name字段的第一个文字添加上标效果 39 * 为name字段的第一个文字添加上标效果
...@@ -47,6 +48,32 @@ const formatNameWithSuperscript = (name) => { ...@@ -47,6 +48,32 @@ const formatNameWithSuperscript = (name) => {
47 48
48 return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}` 49 return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
49 } 50 }
51 +
52 +/**
53 + * 加载文章详情
54 + */
55 +const loadArticleDetail = async () => {
56 + try {
57 + const articleId = route.params.id
58 + const { code, data } = await getArticleDetailAPI({ i: articleId })
59 + if (code) {
60 + // 遍历data对象,将每个元素转换为新的对象格式
61 + article_item.value = {
62 + id: data.id,
63 + role: data.post_excerpt,
64 + name: data.post_title,
65 + src: data?.file_list?.photo?.value,
66 + desc: data.post_content
67 + }
68 + }
69 + } catch (error) {
70 + console.error('加载文章详情失败:', error)
71 + }
72 +}
73 +
74 +onMounted(() => {
75 + loadArticleDetail()
76 +})
50 </script> 77 </script>
51 78
52 79
......