hookehuyr

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

- 将图片流接口参数从cid改为i,并更新相关API和视图
- 优化首页栏目按钮样式和响应式布局
- 添加外部链接跳转支持
- 移除Rollup构建中的注释保留配置
/*
* @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
* @property integer list.id 分类id
* @property string list.post_title 标题/名称
* @property string list.post_date 发布日期
* @property string list.post_excerpt 简介
* @property string list.photo 封面图
* @returns {Object} data
* @property integer data.id 分类id
* @property string data.post_title 标题/名称
* @property [object] data.list 封面图列表
* @property string data.list.value 封面图地址
*/
export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, params));
export const getImgStreamAPI = (params) => fn(fetch.get(Api.GET_ARTICLE_FILE, params));
/**
* @description: 文章详情数据
......
......@@ -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 = 'http://www.baidu.com'
// 跳转页面
location.href = item.category_link;
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)
// 这里可以添加跳转到新闻详情页面的逻辑
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 {
......
<!--
* @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({
cid: cid.value,
const { code, data } = await getImgStreamAPI({
i: i.value,
page: currentPage.value,
limit: pageSize
})
if (response && response.list) {
const newData = response.list.map(item => ({
if (code) {
const newData = data.list.map(item => ({
id: item.id,
src: item.photo, // 修改为src,用于ImagePreview
title: item.post_title,
description: item.post_excerpt,
src: item.value, // 修改为src,用于ImagePreview
title: item.name,
description: item.description,
date: item.post_date,
height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
}))
......
<!--
* @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({
cid: cid.value,
const { code, data } = await getImgStreamAPI({
i: i.value,
page: currentPage.value,
limit: pageSize
})
if (response.code && response.list) {
const newData = response.list.map(item => ({
if (code) {
const newData = data.list.map(item => ({
id: item.id,
src: item.photo,
title: item.post_title,
description: item.post_content,
src: item.value,
title: item.name,
description: item.description,
date: item.post_date,
height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
}))
......
/*
* @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'),
......