feat(页面): 实现页面数据接口对接及功能优化

- 在Masters、NewsDetail、Students和Volunteers页面中对接API接口获取真实数据 - 优化页面跳转逻辑，支持通过参数传递id - 清理未使用的Vant组件声明 - 更新.gitignore文件添加stdj忽略项

feat(页面): 实现页面数据接口对接及功能优化
- 在Masters、NewsDetail、Students和Volunteers页面中对接API接口获取真实数据 - 优化页面跳转逻辑，支持通过参数传递id - 清理未使用的Vant组件声明 - 更新.gitignore文件添加stdj忽略项
hookehuyr
Commit 80fda451db01e8a385cc0086e8acbe584f6812e9 80fda451 1 parent d22d3338
Showing 8 changed files with 124 additions and 76 deletions
.gitignore
src/api/index.js
src/components.d.ts
src/views/Home.vue
src/views/Masters.vue
src/views/NewsDetail.vue
src/views/Students.vue
src/views/Volunteers.vue
--- a/.gitignore
View file @80fda45
+++ b/.gitignore
View file @80fda45
@@ -40,4 +40,6 @@ coverage/
 .eslintcache
 # History
-.history/
\ No newline at end of file
+.history/
+
+stdj
--- a/src/api/index.js
View file @80fda45
+++ b/src/api/index.js
View file @80fda45
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 11:10:04
+ * @LastEditTime: 2025-10-31 13:23:09
  * @FilePath: /stdj_h5/src/api/index.js
  * @Description: 文件描述
  */
--- a/src/components.d.ts
View file @80fda45
+++ b/src/components.d.ts
View file @80fda45
@@ -11,40 +11,11 @@ declare module 'vue' {
     LoadingSpinner: typeof import('./components/LoadingSpinner.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    VanBadge: typeof import('vant/es')['Badge']
     VanButton: typeof import('vant/es')['Button']
-    VanCard: typeof import('vant/es')['Card']
     VanCell: typeof import('vant/es')['Cell']
-    VanCellGroup: typeof import('vant/es')['CellGroup']
-    VanCheckbox: typeof import('vant/es')['Checkbox']
-    VanCollapse: typeof import('vant/es')['Collapse']
-    VanCollapseItem: typeof import('vant/es')['CollapseItem']
-    VanEmpty: typeof import('vant/es')['Empty']
-    VanField: typeof import('vant/es')['Field']
-    VanForm: typeof import('vant/es')['Form']
-    VanGrid: typeof import('vant/es')['Grid']
-    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
-    VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
-    VanNavBar: typeof import('vant/es')['NavBar']
-    VanNoticeBar: typeof import('vant/es')['NoticeBar']
     VanOverlay: typeof import('vant/es')['Overlay']
-    VanProgress: typeof import('vant/es')['Progress']
-    VanRate: typeof import('vant/es')['Rate']
-    VanSidebar: typeof import('vant/es')['Sidebar']
-    VanSidebarItem: typeof import('vant/es')['SidebarItem']
-    VanStep: typeof import('vant/es')['Step']
-    VanSteps: typeof import('vant/es')['Steps']
-    VanSwipe: typeof import('vant/es')['Swipe']
-    VanSwipeItem: typeof import('vant/es')['SwipeItem']
-    VanSwitch: typeof import('vant/es')['Switch']
-    VanTab: typeof import('vant/es')['Tab']
-    VanTabbar: typeof import('vant/es')['Tabbar']
-    VanTabbarItem: typeof import('vant/es')['TabbarItem']
-    VanTabs: typeof import('vant/es')['Tabs']
-    VanTag: typeof import('vant/es')['Tag']
     VideoPlayer: typeof import('./components/VideoPlayer.vue')['default']
-    WaterfallGallery: typeof import('./components/WaterfallGallery.vue')['default']
   }
 }
--- a/src/views/Home.vue
View file @80fda45
+++ b/src/views/Home.vue
View file @80fda45
@@ -99,7 +99,7 @@
               <div class="column-overlay"></div>
               <div class="column-text">
                 <h3 class="column-title">{{ item.name }}</h3>
-                <div class="more-button" @click="viewMore(item.name)">
+                <div class="more-button" @click="viewMore(item.name, item.id)">
                   <span class="more-text">查看更多</span>
                 </div>
               </div>
@@ -284,22 +284,24 @@ watch(currentStep, () => {
 }, { deep: true })
 // 查看更多按钮点击事件
-const viewMore = (type) => {
+const viewMore = (type, id) => {
   switch (type) {
     case '法会流程':
       console.log('法会流程', currentStep.value);
+      // TODO: 提供URL跳转页面
+      location.href = 'http://www.baidu.com'
       break
     case '三师七证':
       // 跳转到三师七证页面的逻辑
-      router.push('/masters')
+      router.push(`/masters?pid=${id}`)
       break
     case '戒子':
       // 跳转到戒子页面的逻辑
-      router.push('/students')
+      router.push(`/students?cid=${id}`)
       break
     case '义工':
       // 跳转到义工页面的逻辑
-      router.push('/volunteers')
+      router.push(`/volunteers?cid=${id}`)
       break
   }
 }
@@ -406,7 +408,7 @@ const attachTransitionEndOnce = (looping) => {
 const handleNewsClick = (item) => {
   console.log('点击新闻:', item)
   // 这里可以添加跳转到新闻详情页面的逻辑
-  router.push({ name: 'NewsDetail', params: { id: item.date } })
+  router.push({ name: 'NewsDetail', params: { id: item.id } })
 }
 </script>
--- a/src/views/Masters.vue
View file @80fda45
+++ b/src/views/Masters.vue
View file @80fda45
@@ -39,10 +39,13 @@
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useTitle } from '@vueuse/core';
+// 导入接口
+import { getSSQZAPI } from '@/api/index.js'
+
 const router = useRouter()
 useTitle('三師七證')
@@ -112,6 +115,16 @@ const gridItems = ref([
 const goDetail = (item) => {
   router.push(`/masters/${item.id}`)
 }
+
+const pid = ref(router.currentRoute.value.query.pid)
+
+onMounted(async () => {
+  // 调用接口获取三师七证数据
+  const { code, list } = await getSSQZAPI({ pid: pid.value });
+  if (code) {
+    console.warn(list);
+  }
+})
 </script>
 <style scoped>
--- a/src/views/NewsDetail.vue
View file @80fda45
+++ b/src/views/NewsDetail.vue
View file @80fda45
@@ -30,6 +30,10 @@
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { Toast } from 'vant'
+import dayjs from 'dayjs'
+
+// 导入接口
+import { getArticleDetailAPI } from '@/api/index.js'
 const route = useRoute()
 const router = useRouter()
@@ -60,21 +64,31 @@ const article = ref({
 })
 // 组件挂载时加载数据
-onMounted(() => {
+onMounted(async () => {
   const articleId = route.params.id
-  console.log('Loading article data for ID:', articleId)
+  const { code, data } = await getArticleDetailAPI({ i: articleId })
-  // 这里可以根据ID加载具体的文章数据
+  if (code) {
+    article.value = {
+      ...data,
+      id: data.id,
+      title: data.post_title,
+      content: data.post_content,
+      publishDate: dayjs(data.post_date).format('YYYY-MM-DD HH:mm:ss'),
+      author: data.post_author,
+      coverImage: data.photo,
+    }
+  }
 })
 </script>
 <style scoped>
 .page-container {
-  min-height: 100vh;
   background: #f5f5f5;
 }
 .content-container {
   background-color: #F2EBDB;
+  min-height: 100vh;
 }
 .article-header {
--- a/src/views/Students.vue
View file @80fda45
+++ b/src/views/Students.vue
View file @80fda45
 <!--
  * @Date: 2025-10-30 20:52:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-30 21:22:42
+ * @LastEditTime: 2025-10-31 13:19:13
  * @FilePath: /stdj_h5/src/views/Students.vue
  * @Description: 戒子页面 - 图片瀑布流展示
 -->
@@ -71,15 +71,22 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { generateWaterfallData } from '@/utils/mockData'
 import { useTitle } from '@vueuse/core';
+import { useRouter } from 'vue-router'
+
+// 导入接口
+import { getImgStreamAPI } from '@/api/index.js'
 useTitle('同戒录')
+const router = useRouter()
+
+const cid = ref(router.currentRoute.value.query.cid)
+
 // 响应式数据
 const loading = ref(false)
 const finished = ref(false)
-const currentPage = ref(1)
+const currentPage = ref(0) // API使用0作为起始页码
 const pageSize = 10
 const allImages = ref([])
 const columns = reactive([[], []])
@@ -92,21 +99,37 @@ const selectedImage = ref(null)
 const onLoad = async () => {
   loading.value = true
-  // 模拟网络延迟
-  await new Promise(resolve => setTimeout(resolve, 1000))
-
   try {
-    const newData = generateWaterfallData(currentPage.value, pageSize)
+    // 调用正式接口
-
+    const response = await getImgStreamAPI({
-    if (newData.length === 0) {
+      cid: cid.value,
-      finished.value = true
+      page: currentPage.value,
+      limit: pageSize
+    })
+
+    if (response.code && response.list) {
+      const newData = response.list.map(item => ({
+        id: item.id,
+        url: item.photo,
+        title: item.post_title,
+        description: item.post_content,
+        date: item.post_date,
+        height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
+      }))
+
+      if (newData.length === 0) {
+        finished.value = true
+      } else {
+        allImages.value.push(...newData)
+        distributeImages(newData)
+        currentPage.value++
+      }
     } else {
-      allImages.value.push(...newData)
+      finished.value = true
-      distributeImages(newData)
-      currentPage.value++
     }
   } catch (error) {
     console.error('加载数据失败:', error)
+    finished.value = true
   } finally {
     loading.value = false
   }
--- a/src/views/Volunteers.vue
View file @80fda45
+++ b/src/views/Volunteers.vue
View file @80fda45
 <!--
  * @Date: 2025-01-01 15:20:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-30 21:15:28
+ * @LastEditTime: 2025-10-31 13:20:49
  * @FilePath: /stdj_h5/src/views/Volunteers.vue
  * @Description: 义工页面 - 图片瀑布流展示
 -->
@@ -49,16 +49,16 @@
         <div class="close-btn" @click="closeOverlay">
           <van-icon name="cross" size="1.5rem" color="#fff" />
         </div>
-        
+
         <!-- 图片展示 -->
         <div class="overlay-image-wrapper">
-          <img 
+          <img
-            :src="selectedImage?.url" 
+            :src="selectedImage?.url"
             :alt="selectedImage?.title"
             class="overlay-image"
           />
         </div>
-        
+
         <!-- 描述内容 -->
         <div class="overlay-description">
           <h3 class="overlay-title">{{ selectedImage?.title }}</h3>
@@ -71,15 +71,22 @@
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
-import { generateWaterfallData } from '@/utils/mockData'
 import { useTitle } from '@vueuse/core';
+import { useRouter } from 'vue-router'
+
+// 导入接口
+import { getImgStreamAPI } from '@/api/index.js'
 useTitle('义工')
+const router = useRouter()
+
+const cid = ref(router.currentRoute.value.query.cid)
+
 // 响应式数据
 const loading = ref(false)
 const finished = ref(false)
-const currentPage = ref(1)
+const currentPage = ref(0) // API使用0作为起始页码
 const pageSize = 10
 const allImages = ref([])
 const columns = reactive([[], []])
@@ -92,21 +99,37 @@ const selectedImage = ref(null)
 const onLoad = async () => {
   loading.value = true
-  // 模拟网络延迟
-  await new Promise(resolve => setTimeout(resolve, 1000))
-
   try {
-    const newData = generateWaterfallData(currentPage.value, pageSize)
+    // 调用正式接口
-
+    const response = await getImgStreamAPI({
-    if (newData.length === 0) {
+      cid: cid.value,
-      finished.value = true
+      page: currentPage.value,
+      limit: pageSize
+    })
+
+    if (response.code && response.list) {
+      const newData = response.list.map(item => ({
+        id: item.id,
+        src: item.photo,
+        title: item.post_title,
+        description: item.post_content,
+        date: item.post_date,
+        height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
+      }))
+
+      if (newData.length === 0) {
+        finished.value = true
+      } else {
+        allImages.value.push(...newData)
+        distributeImages(newData)
+        currentPage.value++
+      }
     } else {
-      allImages.value.push(...newData)
+      finished.value = true
-      distributeImages(newData)
-      currentPage.value++
     }
   } catch (error) {
     console.error('加载数据失败:', error)
+    finished.value = true
   } finally {
     loading.value = false
   }
@@ -376,22 +399,22 @@ onMounted(() => {
     max-height: 85vh;
     border-radius: 0.75rem;
   }
-  
+
   .close-btn {
     top: 0.75rem;
     right: 0.75rem;
     width: 2rem;
     height: 2rem;
   }
-  
+
   .overlay-description {
     padding: 1rem;
   }
-  
+
   .overlay-title {
     font-size: 1.125rem;
   }
-  
+
   .overlay-text {
     font-size: 0.875rem;
   }