gxwebsoft/template-10556
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：已知问题

Browse Source
This commit is contained in:
赵忠林
2025-07-22 13:27:07 +08:00
parent 2b5ff62ff0
commit 505afb8c0d
29 changed files with 2144 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app.config.ts
View File

@@ -64,6 +64,13 @@ export default defineAppConfig({
"detail"
]
},
{
"root": "yxtwjr",
"pages": [
"index",
"detail"
]
},
],
window: {
backgroundTextStyle: 'dark',

3
src/expert/detail.tsx
View File

@@ -13,11 +13,10 @@ function Detail() {
// 文章详情
const [item, setItem] = useState<CmsArticle>()
const reload = () => {
const reload = async () => {
getCmsArticle(Number(params.id)).then(data => {
if (data) {
setItem(data)
// Taro.setNavigationBarTitle({title: `${data?.categoryName} - 文章详情`})
}
})
}

37
src/expert/index.tsx
View File

@@ -5,7 +5,7 @@ import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {Image} from '@nutui/nutui-react-taro'
import {InfiniteLoading} from '@nutui/nutui-react-taro'
import {getCmsNavigation} from "@/api/cms/cmsNavigation";
import {getCmsNavigation, pageCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
/**
@@ -15,6 +15,7 @@ import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
const Index = () => {
const {params} = useRouter();
const [navigation, setNavigation] = useState<CmsNavigation>()
const [childCategory, setChildCategory] = useState<CmsNavigation[]>([])
const [page, setPage] = useState(1)
const [hasMore, setHasMore] = useState(true)
const [list, setList] = useState<CmsArticle[]>([])
@@ -30,6 +31,12 @@ const Index = () => {
// 当前栏目信息
const navs = await getCmsNavigation(categoryId);
// 二级栏目
const childCateogry = await pageCmsNavigation({parentId: categoryId});
// 获取子级栏目
if (childCateogry) {
setChildCategory(childCateogry.list)
}
if (navs) {
setNavigation(navs);
Taro.setNavigationBarTitle({title: `${navs.title}`})
@@ -64,12 +71,17 @@ const Index = () => {
}).catch(error => {
console.error('获取数据失败:', error);
setHasMore(false);
}).finally(() => {
Taro.hideLoading()
});
}
const reloadMore = async () => {
const nextPage = page + 1;
console.log('加载更多 - 下一页:', nextPage);
Taro.showLoading({
title: '加载中...',
})
setPage(nextPage);
getList(nextPage);
}
@@ -99,6 +111,29 @@ const Index = () => {
</div>
<div className={'rounded-lg py-3 px-2'}>
<div className={'grid grid-cols-1 gap-3'}>
<div className={'grid grid-cols-2 gap-3'}>
{
// 子级栏目
childCategory.map((item, index) => {
return (
<div
key={index}
className={'flex flex-col justify-center items-center cursor-pointer'}
onClick={() => Taro.navigateTo({url: `/${item.model}/index?id=${item.navigationId}`})}
>
{/* 图片容器 */}
<div className={'w-full mb-2 flex justify-center'}>
<img
className={'object-cover rounded-lg'}
src={item.icon}
alt={item.title || ''}
/>
</div>
</div>
)
})
}
</div>
{
// 终极文章列表
list.map((item, index) => {

7
src/honor/list.tsx
View File

@@ -62,8 +62,13 @@ const List = () => {
const reloadMore = async () => {
const nextPage = page + 1;
console.log('honor/list 加载更多 - 下一页:', nextPage);
Taro.showLoading({
title: '加载中...',
})
setPage(nextPage);
reload(nextPage).then();
reload(nextPage).then().finally(() => {
Taro.hideLoading();
});
}
useEffect(() => {

17
src/pages/index/Video.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { useEffect } from 'react'
const MyPage = () => {
useEffect(() => {
}, [])
return (
<div className={'px-3'}>
<video controls className="w-full max-w-2xl mx-auto">
<source src="https://oss.wsdns.cn/20250722/018be1bd1c8b4cc4a15076ad0578b88d.mp4" type="video/mp4" />
您的浏览器不支持视频播放
</video>
</div>
)
}
export default MyPage

6
src/pages/index/index.tsx
View File

@@ -3,10 +3,11 @@ import Taro from '@tarojs/taro';
import {useEffect, useState} from "react";
import {getSiteInfo} from "@/api/layout";
import Login from "./Login";
import Banner from "./Banner";
// import Banner from "./Banner";
import Menu from "./Menu";
import Image from "./Image";
import SimpleH5TabBar from "@/components/SimpleH5TabBar";
import Video from "./Video";
function Home() {
const [loading, setLoading] = useState<boolean>(false)
@@ -44,7 +45,8 @@ function Home() {
{!IsLogin && search ? (<Login done={handleLogin}/>) : (<>
<Image/>
<Menu/>
<Banner/>
{/*<Banner/>*/}
<Video />
</>)}
{/* H5模式下显示自定义TabBar */}
{process.env.TARO_ENV === 'h5' && <SimpleH5TabBar current={0} />}

4
src/yxtwjr/detail.config.ts Normal file
View File

@@ -0,0 +1,4 @@
export default definePageConfig({
navigationBarTitleText: '优秀退伍军人 - 文章详情',
navigationBarBackgroundColor: '#ffe0e0'
})

11
src/yxtwjr/detail.scss Normal file
View File

@@ -0,0 +1,11 @@
.content{
img{
margin: 12px auto;
max-width: 80%;
background-color: #F2FE03;
padding: 6px;
border-radius: 16px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
margin-bottom: 40px !important;
}
}

46
src/yxtwjr/detail.tsx Normal file
View File

@@ -0,0 +1,46 @@
import {useEffect, useState} from 'react'
import {useRouter} from '@tarojs/taro'
import {Divider} from '@nutui/nutui-react-taro'
import {CmsArticle} from "@/api/cms/cmsArticle/model"
// 显示html富文本
import {View, RichText} from '@tarojs/components'
// import Line from "@/components/Gap";
import {getCmsArticle} from "@/api/cms/cmsArticle";
import './detail.scss';
function Detail() {
const {params} = useRouter();
// 文章详情
const [item, setItem] = useState<CmsArticle>()
const reload = async () => {
getCmsArticle(Number(params.id)).then(data => {
if (data) {
setItem(data)
}
})
}
useEffect(() => {
reload();
}, []);
return (
<div style={{
background: 'linear-gradient(to bottom, #F63D3D, #C01717)',
minHeight: '100vh'
}}>
<div className={'p-3 font-bold text-center text-lg text-[#F2FE03]'}>{item?.title}</div>
<Divider/>
{/*<img src={item?.image} alt={item?.title} />*/}
<View className={'content text-[#F2FE03] text-sm'}>
<RichText
nodes={item?.content || '暂无内容'}
space="nbsp"
/>
</View>
</div>
)
}
export default Detail

5
src/yxtwjr/index.config.ts Normal file
View File

@@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '优秀退伍军人风采',
navigationBarBackgroundColor: '#d32f2f',
navigationBarTextStyle: 'white'
})

186
src/yxtwjr/index.scss Normal file
View File

@@ -0,0 +1,186 @@
.veteran-page {
min-height: 100vh;
background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
.hero-section {
position: relative;
padding: 40px 20px 60px;
background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
overflow: hidden;
.hero-content {
position: relative;
z-index: 2;
text-align: center;
.hero-title {
font-size: 28px;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-subtitle {
font-size: 14px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
margin: 0 auto;
max-width: 320px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
}
.hero-decoration {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
pointer-events: none;
.decoration-circle {
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: rotate 20s linear infinite;
}
.decoration-star {
position: absolute;
bottom: 20px;
right: 30px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid rgba(255, 255, 255, 0.1);
transform: rotate(35deg);
&::before {
content: '';
position: absolute;
left: -15px;
top: 3px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 10px solid rgba(255, 255, 255, 0.1);
transform: rotate(-70deg);
}
}
}
}
.veteran-list {
padding: 20px 15px;
.veteran-card {
background: #fff;
border-radius: 12px;
margin-bottom: 15px;
padding: 20px;
display: flex;
align-items: flex-start;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: 2px solid #d32f2f;
transition: all 0.3s ease;
cursor: pointer;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.veteran-avatar {
flex-shrink: 0;
margin-right: 15px;
.avatar-img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #d32f2f;
background: #f5f5f5;
}
}
.veteran-info {
flex: 1;
.veteran-name {
font-size: 18px;
font-weight: bold;
color: #d32f2f;
margin: 0 0 8px 0;
}
.veteran-description {
font-size: 13px;
line-height: 1.5;
color: #666;
text-align: justify;
}
}
}
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 响应式设计 */
@media (max-width: 375px) {
.veteran-page {
.hero-section {
padding: 30px 15px 50px;
.hero-content {
.hero-title {
font-size: 24px;
}
.hero-subtitle {
font-size: 13px;
}
}
}
.veteran-list {
padding: 15px 10px;
.veteran-card {
padding: 15px;
.veteran-avatar {
.avatar-img {
width: 50px;
height: 50px;
}
}
.veteran-info {
.veteran-name {
font-size: 16px;
}
.veteran-description {
font-size: 12px;
}
}
}
}
}
}

155
src/yxtwjr/index.tsx Normal file
View File

@@ -0,0 +1,155 @@
import {useEffect, useState} from "react";
import {pageCmsArticle} from "@/api/cms/cmsArticle";
import {CmsArticle} from "@/api/cms/cmsArticle/model";
import Taro from '@tarojs/taro'
import {useRouter} from '@tarojs/taro'
import {Image} from '@nutui/nutui-react-taro'
import {InfiniteLoading} from '@nutui/nutui-react-taro'
import {getCmsNavigation} from "@/api/cms/cmsNavigation";
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
/**
* 文章终极列表
* @constructor
*/
const Index = () => {
const {params} = useRouter();
const [navigation, setNavigation] = useState<CmsNavigation>()
const [page, setPage] = useState(1)
const [hasMore, setHasMore] = useState(true)
const [list, setList] = useState<CmsArticle[]>([])
const categoryId = Number(params.id);
const reload = async () => {
console.log('初始化加载 - 分类ID:', categoryId);
// 重置状态
setPage(1);
setList([]);
setHasMore(true);
// 当前栏目信息
const navs = await getCmsNavigation(categoryId);
if (navs) {
setNavigation(navs);
Taro.setNavigationBarTitle({title: `${navs.title}`})
}
// 加载第一页数据
getList(1);
}
// 终极新闻列表
const getList = (currentPage = page) => {
console.log('请求数据 - 页码:', currentPage, '分类ID:', categoryId);
pageCmsArticle({categoryId, page: currentPage}).then(res => {
console.log('获取到数据:', res);
if (res?.list && res?.list.length > 0) {
if (currentPage === 1) {
// 第一页，直接设置
setList(res.list);
} else {
// 后续页面，追加到现有列表
setList(prevList => {
const newList = [...prevList, ...res.list];
console.log('合并后的列表长度:', newList.length);
return newList;
});
}
setHasMore(true);
} else {
console.log('没有更多数据了');
setHasMore(false);
}
}).catch(error => {
console.error('获取数据失败:', error);
setHasMore(false);
}).finally(() => {
Taro.hideLoading()
});
}
const reloadMore = async () => {
const nextPage = page + 1;
console.log('加载更多 - 下一页:', nextPage);
Taro.showLoading({
title: '加载中...',
})
setPage(nextPage);
getList(nextPage);
}
useEffect(() => {
reload().then()
}, [])
return (
<InfiniteLoading
className={'bg-red-200 h-full'}
hasMore={hasMore}
onLoadMore={reloadMore}
loadingText={
<>
加载中
</>
}
loadMoreText={
<>
没有更多了
</>
}>
<div style={{padding: navigation?.span + 'px'}}>
<Image src={navigation?.style} width={'100%'}
height={'auto'}/>
</div>
<div className={'rounded-lg py-3 px-2'}>
<div className={'grid grid-cols-1 gap-3'}>
{
// 终极文章列表
list.map((item, index) => {
return (
<div
key={item.articleId || `article-${index}`}
className={'flex items-center cursor-pointer'}
style={{
border: '3px solid #F2FE03',
backgroundColor: '#C01717',
color: '#F2FE03',
borderRadius: '16px',
}}
onClick={() => Taro.navigateTo({url: `./detail?id=${item.articleId}`})}
>
{/* 图片容器 */}
<div className={'w-full m-3 flex justify-center'}
style={{
width: '108px',
height: '160px',
}}>
<img
className={'object-cover'}
src={item.image}
alt={item.title || ''}
/>
</div>
{/* 标题 */}
<div className={'flex flex-col items-start my-3 text-sm leading-tight'} style={{
color: '#F2FE03'
}}>
<p className={'font-bold py-1'}>{item.title}</p>
<p className={'text-xs line-clamp-6'} style={{
width: '240px',
overflow: 'hidden',
}}>
{item.comments || '暂无'}
</p>
</div>
</div>
)
})
}
</div>
</div>
</InfiniteLoading>
)
}
export default Index