feat: 更新图片流接口参数及样式优化

- 将图片流接口参数从cid改为i，并更新相关API和视图 - 优化首页栏目按钮样式和响应式布局 - 添加外部链接跳转支持 - 移除Rollup构建中的注释保留配置

feat: 更新图片流接口参数及样式优化
- 将图片流接口参数从cid改为i，并更新相关API和视图 - 优化首页栏目按钮样式和响应式布局 - 添加外部链接跳转支持 - 移除Rollup构建中的注释保留配置
hookehuyr
Commit 1cb29bf97382ca7a46767f0c40eac5d7eb461ece 1cb29bf9 1 parent 1978b8a9
Showing 5 changed files with 64 additions and 54 deletions
src/api/index.js
src/views/Home.vue
src/views/Students.vue
src/views/Volunteers.vue
vite.config.js
--- a/src/api/index.js
View file @1cb29bf
+++ b/src/api/index.js
View file @1cb29bf
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 13:23:09
+ * @LastEditTime: 2025-11-03 15:21:35
  * @FilePath: /stdj_h5/src/api/index.js
  * @Description: 文件描述
  */
@@ -10,6 +10,7 @@ import { fn, fetch } from '@/api/fn';
 const Api = {
   GET_HOME: '/srv/?a=home',
   GET_ARTICLE: '/srv/?a=get_article',
+  GET_ARTICLE_FILE: '/srv/?a=get_article&t=file',
 };
 /**
@@ -53,17 +54,16 @@ export const getSSQZAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, params));
 /**
  * @description: 图片流媒体数据
- * @param {String} cid 分类id
+ * @param {String} i 分类id
  * @param {String} page 页码，默认0
  * @param {String} limit 每页数量，默认10
- * @returns {Object} list
+ * @returns {Object} data
- * @property integer list.id 分类id
+ * @property integer data.id 分类id
- * @property string list.post_title 标题/名称
+ * @property string data.post_title 标题/名称
- * @property string list.post_date 发布日期
+ * @property [object] data.list 封面图列表
- * @property string list.post_excerpt 简介
+ * @property string data.list.value 封面图地址
- * @property string list.photo 封面图
  */
-export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, params));
+export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE_FILE, params));
 /**
  * @description: 文章详情数据
--- a/src/views/Home.vue
View file @1cb29bf
+++ b/src/views/Home.vue
View file @1cb29bf
@@ -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, item.id)">
+                <div class="more-button" @click="viewMore(item.name, item)">
                   <span class="more-text">查看更多</span>
                 </div>
               </div>
@@ -280,24 +280,27 @@ watch(currentStep, () => {
 }, { deep: true })
 // 查看更多按钮点击事件
-const viewMore = (type, id) => {
+const viewMore = (type, item) => {
   switch (type) {
     case '法会流程':
-      console.log('法会流程', currentStep.value);
+      // 跳转页面
-      // TODO: 提供URL跳转页面
+      location.href = item.category_link;
-      location.href = 'http://www.baidu.com'
       break
     case '三师七证':
       // 跳转到三师七证页面的逻辑
-      router.push(`/masters?pid=${id}`)
+      if (item.category_link) {
+        location.href = item.category_link;
+      } else {
+        router.push(`/masters?pid=${item.id}`)
+      }
       break
     case '戒子':
       // 跳转到戒子页面的逻辑
-      router.push(`/students?cid=${id}`)
+      router.push(`/students?i=${item.id}`)
       break
     case '义工':
       // 跳转到义工页面的逻辑
-      router.push(`/volunteers?cid=${id}`)
+      router.push(`/volunteers?i=${item.id}`)
       break
   }
 }
@@ -402,9 +405,12 @@ const attachTransitionEndOnce = (looping) => {
 // 处理新闻点击事件
 const handleNewsClick = (item) => {
-  console.log('点击新闻:', item)
   // 这里可以添加跳转到新闻详情页面的逻辑
-  router.push({ name: 'NewsDetail', params: { id: item.id } })
+  if (item.post_link) {
+    location.href = item.post_link
+  } else {
+    router.push({ name: 'NewsDetail', params: { id: item.id } })
+  }
 }
 </script>
@@ -659,32 +665,32 @@ const handleNewsClick = (item) => {
 /* 中等屏幕 (768px - 1199px) */
 @media (min-width: 768px) and (max-width: 1199px) {
   .column-title {
-    font-size: 1.25rem;
+    font-size: 1.5rem;
   }
   .column-text .more-text {
-    font-size: 0.75rem;
+    font-size: 0.875rem;
   }
   .column-text .more-button {
     height: 2.5rem;
-    width: 6rem;
+    width: 100%;
   }
 }
 /* 小屏幕 (481px - 767px) */
 @media (min-width: 481px) and (max-width: 767px) {
   .column-title {
-    font-size: 1.125rem;
+    font-size: 1.25rem;
   }
   .column-text .more-text {
-    font-size: 0.6875rem;
+    font-size: 0.875rem;
   }
   .column-text .more-button {
     height: 2.25rem;
-    width: 5.5rem;
+    width: 100%;
   }
   .column-text {
@@ -699,16 +705,16 @@ const handleNewsClick = (item) => {
   }
   .column-text .more-text {
-    font-size: 0.625rem;
+    font-size: 0.75rem;
   }
   .column-text .more-button {
     height: 2rem;
-    width: 5rem;
+    width: 100%;
   }
   .column-text {
-    padding: 1rem;
+    padding: 1rem 0.5rem;
   }
 }
@@ -742,7 +748,7 @@ const handleNewsClick = (item) => {
   .column-text .more-button {
     height: 1.75rem;
-    width: 4.5rem;
+    width: 100%;
   }
   .column-text {
@@ -761,6 +767,7 @@ const handleNewsClick = (item) => {
   background-attachment: fixed;
   overflow: hidden;
   background-color: #F2EBDB;
+  padding-bottom: 1.5rem;
 }
 /* 法会流程模块 */
@@ -1090,7 +1097,9 @@ const handleNewsClick = (item) => {
   }
   .more-button {
-    height: 1.75rem;
+    bottom: 0.75rem;
+    left: 1rem;
+    height: 2.5rem;
   }
   .more-text {
@@ -1119,9 +1128,9 @@ const handleNewsClick = (item) => {
   }
   .more-button {
-    bottom: 1rem;
+    bottom: 0.75rem;
     left: 1rem;
-    height: 1.5rem;
+    height: 2rem;
   }
   .more-text {
--- a/src/views/Students.vue
View file @1cb29bf
+++ b/src/views/Students.vue
View file @1cb29bf
 <!--
  * @Date: 2025-10-30 20:52:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 13:19:13
+ * @LastEditTime: 2025-11-03 15:31:32
  * @FilePath: /stdj_h5/src/views/Students.vue
  * @Description: 戒子页面 - 图片瀑布流展示
 -->
@@ -57,7 +57,7 @@ useTitle('同戒录')
 const router = useRouter()
-const cid = ref(router.currentRoute.value.query.cid)
+const i = ref(router.currentRoute.value.query.i)
 // 响应式数据
 const loading = ref(false)
@@ -73,18 +73,18 @@ const onLoad = async () => {
   try {
     // 调用正式接口
-    const response = await getImgStreamAPI({
+    const { code, data } = await getImgStreamAPI({
-      cid: cid.value,
+      i: i.value,
       page: currentPage.value,
       limit: pageSize
     })
-    if (response && response.list) {
+    if (code) {
-      const newData = response.list.map(item => ({
+      const newData = data.list.map(item => ({
         id: item.id,
-        src: item.photo, // 修改为src，用于ImagePreview
+        src: item.value, // 修改为src，用于ImagePreview
-        title: item.post_title,
+        title: item.name,
-        description: item.post_excerpt,
+        description: item.description,
         date: item.post_date,
         height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
       }))
@@ -126,13 +126,13 @@ const distributeImages = (images) => {
 // 图片点击事件 - 使用ImagePreview
 const onImageClick = (item) => {
   console.log('点击图片:', item)
-  
+
   // 获取当前点击图片在所有图片中的索引
   const currentIndex = allImages.value.findIndex(img => img.id === item.id)
-  
+
   // 提取所有图片的src用于预览
   const images = allImages.value.map(img => img.src)
-  
+
   // 显示图片预览
   showImagePreview({
     images,
--- a/src/views/Volunteers.vue
View file @1cb29bf
+++ b/src/views/Volunteers.vue
View file @1cb29bf
 <!--
  * @Date: 2025-01-01 15:20:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 16:43:29
+ * @LastEditTime: 2025-11-03 15:31:15
  * @FilePath: /stdj_h5/src/views/Volunteers.vue
  * @Description: 义工页面 - 图片瀑布流展示
 -->
@@ -57,7 +57,7 @@ useTitle('义工')
 const router = useRouter()
-const cid = ref(router.currentRoute.value.query.cid)
+const i = ref(router.currentRoute.value.query.i)
 // 响应式数据
 const loading = ref(false)
@@ -73,18 +73,18 @@ const onLoad = async () => {
   try {
     // 调用正式接口
-    const response = await getImgStreamAPI({
+    const { code, data } = await getImgStreamAPI({
-      cid: cid.value,
+      i: i.value,
       page: currentPage.value,
       limit: pageSize
     })
-    if (response.code && response.list) {
+    if (code) {
-      const newData = response.list.map(item => ({
+      const newData = data.list.map(item => ({
         id: item.id,
-        src: item.photo,
+        src: item.value,
-        title: item.post_title,
+        title: item.name,
-        description: item.post_content,
+        description: item.description,
         date: item.post_date,
         height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
       }))
--- a/vite.config.js
View file @1cb29bf
+++ b/vite.config.js
View file @1cb29bf
 /*
  * @Date: 2025-10-30 10:27:43
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-30 21:48:53
+ * @LastEditTime: 2025-11-03 09:48:52
  * @FilePath: /stdj_h5/vite.config.js
  * @Description: 文件描述
  */
@@ -100,6 +100,7 @@ export default ({ command, mode }) => {
           chunkFileNames: 'static/js/[name]-[hash].js',
           entryFileNames: 'static/js/[name]-[hash].js',
           assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+          preserveComments: false // 确保 Rollup 层面也不保留
         },
         input: { // 多页面应用模式, 打包时配置，运行配置要处理root
           main: path.resolve(__dirname, 'index.html'),