Pine
b4d4ac4258
1. 大厅改为资讯页固定模式：flex+ScrollView 独立滚动，两级tab位于滚动区之外完全固定不被下拉；tab样式统一为药丸渐变 2. 资讯页tab上间距优化（4rpx→18rpx） 3. 所有页面标题区统一三段式：英文分类标签(no) + 中文标题(title) + 中文副标题(sub)，移除所有英文注脚en 4. 所有二级页面(pages-extra)加 back 返回按钮 5. 补齐14个缺失页面的 navigationStyle:custom 和 PageHeader： cert-apply/content-detail/event-detail/my-cert/my-park/my-tasks/ park-apply/park-transfer/pay/pay-qr/plan/scan-login/scan/tasks 6. 大厅PageHeader副标题改为中文描述
71 lines
3.2 KiB
React
71 lines
3.2 KiB
React
import { View, Text, Button } from '@tarojs/components';
|
||
import Taro from '@tarojs/taro';
|
||
import { useState, useEffect } from 'react';
|
||
import { communityPosts, communityLikePost } from '@/utils/hall';
|
||
import { getParksPublic } from '@/utils/park';
|
||
import { isAuthed } from '@/utils/auth';
|
||
import { PageHeader } from '@/components/TopInset';
|
||
import Skeleton from '@/components/skeleton';
|
||
import '@/styles/hall.scss';
|
||
|
||
const TOPICS = ['全部', '交流', '求助', '资源', '经验', '公告'];
|
||
const shortCity = (n) => String(n || '').replace(/(市|自治州|自治县)$/, '');
|
||
|
||
export default function Community() {
|
||
const [topic, setTopic] = useState('全部');
|
||
const [posts, setPosts] = useState(null);
|
||
const [carriers, setCarriers] = useState([]);
|
||
const [err, setErr] = useState('');
|
||
useEffect(() => {
|
||
const t = topic === '全部' ? '' : topic;
|
||
communityPosts({ topic: t }).then((d) => setPosts(d.items || [])).catch((e) => setErr(e.message));
|
||
}, [topic]);
|
||
useEffect(() => { getParksPublic().then((d) => setCarriers((d.items || []).slice(0, 4))).catch(() => {}); }, []);
|
||
|
||
const like = async (id) => {
|
||
if (!isAuthed()) { Taro.showToast({ title: '请先登录', icon: 'none' }); return; }
|
||
try {
|
||
const r = await communityLikePost(id);
|
||
setPosts((ls) => ls.map((p) => (p.id === id ? { ...p, likeCount: p.likeCount + (r.liked ? 1 : -1) } : p)));
|
||
} catch { /* 忽略点赞失败 */ }
|
||
};
|
||
|
||
return (
|
||
<View className="hl-pad page-in">
|
||
<PageHeader back no="COMM" title="社区" sub="交流 · 求助 · 资源 · 经验" />
|
||
<View className="hl-chips">
|
||
{TOPICS.map((t) => (
|
||
<Text key={t} className={`hl-chip${topic === t ? ' on' : ''}`} onClick={() => setTopic(t)}>{t}</Text>
|
||
))}
|
||
</View>
|
||
{err && <Text className="hl-err">{err}</Text>}
|
||
{!posts && !err && <Skeleton />}
|
||
{posts && posts.length === 0 && <Text className="hl-empty">还没有帖子，来发第一帖</Text>}
|
||
{(posts || []).map((p) => (
|
||
<View key={p.id} className="hl-post">
|
||
<View className="hl-post-head">
|
||
<View className="hl-avatar" style={{ width: 64, height: 64, fontSize: 26 }}>
|
||
<Text>{(p.authorName || '·').slice(0, 1)}</Text>
|
||
</View>
|
||
<View>
|
||
<Text className="hl-pauthor">{p.authorName}</Text>
|
||
<Text className="hl-pmeta">{p.topic}{p.pinned ? ' · 置顶' : ''} · {(p.createdAt || '').slice(0, 10)}</Text>
|
||
</View>
|
||
</View>
|
||
<Text className="hl-ptitle">{p.title}</Text>
|
||
<Text className="hl-pcontent">{p.content}</Text>
|
||
<View className="hl-pfoot">
|
||
<Text onClick={() => like(p.id)}>赞 {p.likeCount || 0}</Text>
|
||
<Text>评论 {p.commentCount || 0}</Text>
|
||
</View>
|
||
</View>
|
||
))}
|
||
|
||
<View style={{ display: 'flex', gap: 18, margin: '10rpx 24rpx 30rpx' }}>
|
||
<Button className="hl-btn ghost" onClick={() => Taro.navigateTo({ url: '/pages-extra/community-post/index' })}>发帖</Button>
|
||
<Button className="hl-btn ghost" onClick={() => Taro.navigateTo({ url: '/pages-extra/parks/index' })}>实体社区 · 创业载体</Button>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|