forum
This commit is contained in:
jeremygan2021
@@ -1,5 +1,8 @@
|
||||
from django.core.signing import TimestampSigner, BadSignature, SignatureExpired
|
||||
from shop.models import WeChatUser
|
||||
import logging
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
def get_current_wechat_user(request):
|
||||
"""
|
||||
@@ -9,6 +12,7 @@ def get_current_wechat_user(request):
|
||||
"""
|
||||
auth_header = request.headers.get('Authorization')
|
||||
if not auth_header or not auth_header.startswith('Bearer '):
|
||||
logger.warning(f"Authentication failed: Missing or invalid Authorization header. Header: {auth_header}")
|
||||
return None
|
||||
token = auth_header.split(' ')[1]
|
||||
signer = TimestampSigner()
|
||||
@@ -22,6 +26,7 @@ def get_current_wechat_user(request):
|
||||
|
||||
# 如果没找到用户，检查是否是 Web 虚拟 OpenID
|
||||
# 场景：Web 用户已被合并到小程序账号，旧 Web Token 依然有效，指向合并后的账号
|
||||
logger.info(f"User not found for openid: {openid}, checking for merged account...")
|
||||
if openid.startswith('web_'):
|
||||
try:
|
||||
# 格式: web_13800138000
|
||||
@@ -31,10 +36,20 @@ def get_current_wechat_user(request):
|
||||
# 尝试通过手机号查找（查找合并后的主账号）
|
||||
user = WeChatUser.objects.filter(phone_number=phone).first()
|
||||
if user:
|
||||
logger.info(f"Found merged user {user.id} for phone {phone}")
|
||||
return user
|
||||
except Exception:
|
||||
except Exception as e:
|
||||
logger.error(f"Error checking merged account: {e}")
|
||||
pass
|
||||
|
||||
logger.warning(f"Authentication failed: User not found for openid {openid}")
|
||||
return None
|
||||
except (BadSignature, SignatureExpired):
|
||||
except SignatureExpired:
|
||||
logger.warning("Authentication failed: Signature expired")
|
||||
return None
|
||||
except BadSignature:
|
||||
logger.warning("Authentication failed: Bad signature")
|
||||
return None
|
||||
except Exception as e:
|
||||
logger.error(f"Authentication unexpected error: {e}")
|
||||
return None
|
||||
|
||||
@@ -42,6 +42,7 @@
|
||||
"@tarojs/runtime": "3.6.20",
|
||||
"@tarojs/shared": "3.6.20",
|
||||
"@tarojs/taro": "3.6.20",
|
||||
"marked": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"taro-ui": "^3.0.0-alpha.10"
|
||||
|
||||
@@ -31,3 +31,37 @@ export const distributorWithdraw = (amount: number) => request({ url: '/distribu
|
||||
// User
|
||||
export const updateUserInfo = (data: any) => request({ url: '/wechat/update/', method: 'POST', data })
|
||||
export const wechatLogin = (code: string) => request({ url: '/wechat/login/', method: 'POST', data: { code } })
|
||||
|
||||
// Forum / Community
|
||||
export const getTopics = (params: any) => request({ url: '/community/topics/', data: params })
|
||||
export const getTopicDetail = (id: number) => request({ url: `/community/topics/${id}/` })
|
||||
export const createTopic = (data: any) => request({ url: '/community/topics/', method: 'POST', data })
|
||||
export const updateTopic = (id: number, data: any) => request({ url: `/community/topics/${id}/`, method: 'PATCH', data })
|
||||
export const getReplies = (params: any) => request({ url: '/community/replies/', data: params })
|
||||
export const createReply = (data: any) => request({ url: '/community/replies/', method: 'POST', data })
|
||||
export const getStarUsers = () => request({ url: '/users/stars/' })
|
||||
export const getAnnouncements = () => request({ url: '/community/announcements/' })
|
||||
|
||||
// Upload Media for Forum
|
||||
export const uploadMedia = (filePath: string, type: 'image' | 'video') => {
|
||||
const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
|
||||
return Taro.uploadFile({
|
||||
url: `${BASE_URL}/community/media/`,
|
||||
filePath,
|
||||
name: 'file',
|
||||
formData: {
|
||||
media_type: type
|
||||
},
|
||||
header: {
|
||||
'Authorization': `Bearer ${Taro.getStorageSync('token')}`
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.statusCode >= 200 && res.statusCode < 300) {
|
||||
return JSON.parse(res.data)
|
||||
}
|
||||
throw new Error('Upload failed')
|
||||
})
|
||||
}
|
||||
|
||||
import Taro from '@tarojs/taro'
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ export default defineAppConfig({
|
||||
'pages/services/detail',
|
||||
'pages/courses/index',
|
||||
'pages/courses/detail',
|
||||
'pages/forum/index',
|
||||
'pages/goods/detail',
|
||||
'pages/cart/cart',
|
||||
'pages/order/checkout',
|
||||
@@ -21,6 +22,13 @@ export default defineAppConfig({
|
||||
'invite',
|
||||
'withdraw'
|
||||
]
|
||||
},
|
||||
{
|
||||
root: 'subpackages/forum',
|
||||
pages: [
|
||||
'detail/index',
|
||||
'create/index'
|
||||
]
|
||||
}
|
||||
],
|
||||
window: {
|
||||
@@ -48,8 +56,8 @@ export default defineAppConfig({
|
||||
selectedIconPath: "./assets/AI_service_active.png"
|
||||
},
|
||||
{
|
||||
pagePath: "pages/courses/index",
|
||||
text: "VB课程",
|
||||
pagePath: "pages/forum/index",
|
||||
text: "社区",
|
||||
iconPath: "./assets/VR.png",
|
||||
selectedIconPath: "./assets/VR_active.png"
|
||||
},
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import 'taro-ui/dist/style/index.scss';
|
||||
|
||||
page {
|
||||
--primary-cyan: #00f0ff;
|
||||
--primary-green: #00b96b;
|
||||
|
||||
7
miniprogram/src/pages/forum/index.config.ts
Normal file
7
miniprogram/src/pages/forum/index.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '开发者社区',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundColor: '#000000',
|
||||
navigationBarBackgroundColor: '#000000',
|
||||
navigationBarTextStyle: 'white'
|
||||
})
|
||||
219
miniprogram/src/pages/forum/index.scss
Normal file
219
miniprogram/src/pages/forum/index.scss
Normal file
@@ -0,0 +1,219 @@
|
||||
.forum-page {
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
padding-bottom: 40px;
|
||||
color: #fff;
|
||||
|
||||
.hero-section {
|
||||
padding: 40px 20px 20px;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,185,107,0.1) 100%);
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
color: #fff;
|
||||
|
||||
.highlight {
|
||||
color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.at-search-bar {
|
||||
flex: 1;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.at-search-bar__input-cnt {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.at-search-bar__input {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
background-color: #00b96b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-wrapper {
|
||||
background-color: #000;
|
||||
|
||||
.at-tabs__item {
|
||||
color: #888;
|
||||
|
||||
&--active {
|
||||
color: #00b96b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.at-tabs__item-underline {
|
||||
background-color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
padding: 10px;
|
||||
|
||||
.topic-card {
|
||||
background: rgba(20,20,20,0.6);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
|
||||
&.pinned {
|
||||
border-color: rgba(0, 185, 107, 0.4);
|
||||
box-shadow: 0 0 10px rgba(0, 185, 107, 0.1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.tag {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #444;
|
||||
|
||||
&.pinned-tag {
|
||||
border-color: #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.verified-tag {
|
||||
border-color: #00b96b;
|
||||
color: #00b96b;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
color: #aaa;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
margin-bottom: 12px;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
max-height: 150px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
|
||||
.author-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
&.star {
|
||||
color: #ffd700;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.fab {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 40px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #00b96b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 185, 107, 0.4);
|
||||
z-index: 100;
|
||||
|
||||
.at-icon {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
207
miniprogram/src/pages/forum/index.tsx
Normal file
207
miniprogram/src/pages/forum/index.tsx
Normal file
@@ -0,0 +1,207 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro, { usePullDownRefresh, useReachBottom } from '@tarojs/taro'
|
||||
import { View, Text, Image, Button } from '@tarojs/components'
|
||||
import { AtSearchBar, AtTabs, AtIcon, AtActivityIndicator, AtFab } from 'taro-ui'
|
||||
import { getTopics } from '../../api'
|
||||
import { useLogin } from '../../utils/hooks' // Assuming a hook or just use Taro.getStorageSync
|
||||
import './index.scss'
|
||||
|
||||
const ForumList = () => {
|
||||
const [topics, setTopics] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [page, setPage] = useState(1)
|
||||
const [searchText, setSearchText] = useState('')
|
||||
const [currentTab, setCurrentTab] = useState(0)
|
||||
|
||||
const categories = [
|
||||
{ title: '全部', key: 'all' },
|
||||
{ title: '讨论', key: 'discussion' },
|
||||
{ title: '求助', key: 'help' },
|
||||
{ title: '分享', key: 'share' },
|
||||
{ title: '公告', key: 'notice' },
|
||||
]
|
||||
|
||||
const fetchList = async (reset = false) => {
|
||||
if (loading) return
|
||||
if (!reset && !hasMore) return
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const currentPage = reset ? 1 : page
|
||||
const params: any = {
|
||||
page: currentPage,
|
||||
search: searchText,
|
||||
category: categories[currentTab].key !== 'all' ? categories[currentTab].key : undefined
|
||||
}
|
||||
|
||||
const res = await getTopics(params)
|
||||
const newTopics = res.results || res.data || [] // Adjust based on API response structure
|
||||
|
||||
if (reset) {
|
||||
setTopics(newTopics)
|
||||
} else {
|
||||
setTopics(prev => [...prev, ...newTopics])
|
||||
}
|
||||
|
||||
// Check if more data exists (assuming standard pagination)
|
||||
if (res.next || newTopics.length === 10) { // 10 is default page size usually
|
||||
setHasMore(true)
|
||||
setPage(currentPage + 1)
|
||||
} else {
|
||||
setHasMore(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
Taro.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchList(true)
|
||||
}, [currentTab])
|
||||
|
||||
usePullDownRefresh(() => {
|
||||
fetchList(true)
|
||||
})
|
||||
|
||||
useReachBottom(() => {
|
||||
fetchList(false)
|
||||
})
|
||||
|
||||
const handleSearch = (value) => {
|
||||
setSearchText(value)
|
||||
}
|
||||
|
||||
const onSearchConfirm = () => {
|
||||
fetchList(true)
|
||||
}
|
||||
|
||||
const handleTabClick = (value) => {
|
||||
setCurrentTab(value)
|
||||
// useEffect will trigger fetch
|
||||
}
|
||||
|
||||
const navigateToDetail = (id) => {
|
||||
Taro.navigateTo({
|
||||
url: `/subpackages/forum/detail/index?id=${id}`
|
||||
})
|
||||
}
|
||||
|
||||
const navigateToCreate = () => {
|
||||
const token = Taro.getStorageSync('token')
|
||||
if (!token) {
|
||||
Taro.showToast({ title: '请先登录', icon: 'none' })
|
||||
// Optional: Trigger login flow
|
||||
return
|
||||
}
|
||||
Taro.navigateTo({
|
||||
url: '/subpackages/forum/create/index'
|
||||
})
|
||||
}
|
||||
|
||||
const getCategoryLabel = (cat) => {
|
||||
const map = {
|
||||
'help': '求助',
|
||||
'share': '分享',
|
||||
'notice': '公告',
|
||||
'discussion': '讨论'
|
||||
}
|
||||
return map[cat] || '讨论'
|
||||
}
|
||||
|
||||
// Helper to extract first image from markdown
|
||||
const getCoverImage = (content) => {
|
||||
const match = content.match(/!\[.*?\]\((.*?)\)/)
|
||||
return match ? match[1] : null
|
||||
}
|
||||
|
||||
const stripMarkdown = (content) => {
|
||||
return content.replace(/!\[.*?\]\(.*?\)/g, '[图片]').replace(/[#*`]/g, '')
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='forum-page'>
|
||||
<View className='hero-section'>
|
||||
<View className='title'>
|
||||
<Text className='highlight'>Quant Speed</Text> Community
|
||||
</View>
|
||||
<View className='subtitle'>技术交流 · 硬件开发 · 官方支持</View>
|
||||
|
||||
<View className='search-box'>
|
||||
<AtSearchBar
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
onActionClick={onSearchConfirm}
|
||||
onConfirm={onSearchConfirm}
|
||||
placeholder='搜索话题...'
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='tabs-wrapper'>
|
||||
<AtTabs
|
||||
current={currentTab}
|
||||
tabList={categories}
|
||||
onClick={handleTabClick}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='topic-list'>
|
||||
{topics.map(item => (
|
||||
<View
|
||||
key={item.id}
|
||||
className={`topic-card ${item.is_pinned ? 'pinned' : ''}`}
|
||||
onClick={() => navigateToDetail(item.id)}
|
||||
>
|
||||
<View className='card-header'>
|
||||
{item.is_pinned && <Text className='tag pinned-tag'>置顶</Text>}
|
||||
<Text className='tag'>{getCategoryLabel(item.category)}</Text>
|
||||
{item.is_verified_owner && <Text className='tag verified-tag'>认证</Text>}
|
||||
<Text className='card-title'>{item.title}</Text>
|
||||
</View>
|
||||
|
||||
<View className='card-content'>
|
||||
{stripMarkdown(item.content)}
|
||||
</View>
|
||||
|
||||
{getCoverImage(item.content) && (
|
||||
<View className='card-image'>
|
||||
<Image src={getCoverImage(item.content)} mode='aspectFill' />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='card-footer'>
|
||||
<View className='author-info'>
|
||||
<Image className='avatar' src={item.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
|
||||
<Text className={`nickname ${item.author_info?.is_star ? 'star' : ''}`}>
|
||||
{item.author_info?.nickname || '匿名'}
|
||||
</Text>
|
||||
</View>
|
||||
<View className='stats'>
|
||||
<View className='stat-item'>
|
||||
<Text>👁 {item.view_count || 0}</Text>
|
||||
</View>
|
||||
<View className='stat-item'>
|
||||
<Text>💬 {item.replies?.length || 0}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
|
||||
{loading && <View style={{textAlign: 'center', padding: 10}}><AtActivityIndicator color='#00b96b' /></View>}
|
||||
{!loading && topics.length === 0 && <View className='empty-state'>暂无内容</View>}
|
||||
</View>
|
||||
|
||||
<View className='fab' onClick={navigateToCreate}>
|
||||
<AtIcon value='add' size='24' color='#fff' />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForumList
|
||||
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发布话题',
|
||||
backgroundColor: '#000000',
|
||||
navigationBarBackgroundColor: '#000000',
|
||||
navigationBarTextStyle: 'white'
|
||||
})
|
||||
69
miniprogram/src/subpackages/forum/create/create.scss
Normal file
69
miniprogram/src/subpackages/forum/create/create.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
.create-topic-page {
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
padding: 20px;
|
||||
color: #fff;
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid #333;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid #333;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.picker {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: 1px solid #333;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.media-upload {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.upload-btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background-color: #00b96b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
|
||||
&.disabled {
|
||||
background-color: #333;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
136
miniprogram/src/subpackages/forum/create/index.tsx
Normal file
136
miniprogram/src/subpackages/forum/create/index.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React, { useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, Input, Textarea, Button, Picker } from '@tarojs/components'
|
||||
import { createTopic, uploadMedia } from '../../../api'
|
||||
import './create.scss'
|
||||
|
||||
const CreateTopic = () => {
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [categoryIndex, setCategoryIndex] = useState(0)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const categories = [
|
||||
{ key: 'discussion', label: '技术讨论' },
|
||||
{ key: 'help', label: '求助问答' },
|
||||
{ key: 'share', label: '经验分享' },
|
||||
]
|
||||
|
||||
const handleCategoryChange = (e) => {
|
||||
setCategoryIndex(e.detail.value)
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
try {
|
||||
const res = await Taro.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera']
|
||||
})
|
||||
|
||||
const file = res.tempFiles[0]
|
||||
const type = file.fileType === 'video' ? 'video' : 'image'
|
||||
|
||||
Taro.showLoading({ title: '上传中...' })
|
||||
|
||||
const uploadRes = await uploadMedia(file.tempFilePath, type)
|
||||
|
||||
let url = uploadRes.file
|
||||
if (url && !url.startsWith('http')) {
|
||||
const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
|
||||
const host = BASE_URL.replace(/\/api\/?$/, '')
|
||||
if (!url.startsWith('/')) url = '/' + url
|
||||
url = `${host}${url}`
|
||||
}
|
||||
|
||||
const insertText = type === 'video'
|
||||
? `\n<video src="${url}" controls width="100%"></video>\n`
|
||||
: `\n\n`
|
||||
|
||||
setContent(prev => prev + insertText)
|
||||
|
||||
Taro.hideLoading()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.hideLoading()
|
||||
// Only toast if it's an error, not cancel
|
||||
if (error.errMsg && error.errMsg.indexOf('cancel') === -1) {
|
||||
Taro.showToast({ title: '上传失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!title.trim() || !content.trim()) {
|
||||
Taro.showToast({ title: '请填写完整', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await createTopic({
|
||||
title,
|
||||
content,
|
||||
category: categories[categoryIndex].key
|
||||
})
|
||||
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
Taro.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '发布失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='create-topic-page'>
|
||||
<View className='form-item'>
|
||||
<Text className='label'>板块</Text>
|
||||
<Picker range={categories} rangeKey='label' value={categoryIndex} onChange={handleCategoryChange}>
|
||||
<View className='picker'>
|
||||
{categories[categoryIndex].label}
|
||||
</View>
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
<View className='form-item'>
|
||||
<Text className='label'>标题</Text>
|
||||
<Input
|
||||
value={title}
|
||||
onInput={e => setTitle(e.detail.value)}
|
||||
placeholder='请输入标题'
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='form-item'>
|
||||
<Text className='label'>内容 (支持 Markdown)</Text>
|
||||
<Textarea
|
||||
value={content}
|
||||
onInput={e => setContent(e.detail.value)}
|
||||
placeholder='分享你的想法...'
|
||||
maxlength={-1}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='media-upload'>
|
||||
<View className='upload-btn' onClick={handleUpload}>
|
||||
+ 插入图片/视频
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<Button
|
||||
className={`submit-btn ${loading ? 'disabled' : ''}`}
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? '发布中...' : '发布话题'}
|
||||
</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateTopic
|
||||
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '话题详情',
|
||||
backgroundColor: '#000000',
|
||||
navigationBarBackgroundColor: '#000000',
|
||||
navigationBarTextStyle: 'white'
|
||||
})
|
||||
174
miniprogram/src/subpackages/forum/detail/detail.scss
Normal file
174
miniprogram/src/subpackages/forum/detail/detail.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
.forum-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #000;
|
||||
padding-bottom: 80px;
|
||||
color: #fff;
|
||||
|
||||
.topic-card {
|
||||
background: rgba(20,20,20,0.8);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
|
||||
.author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.verified {
|
||||
color: #00b96b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #ddd;
|
||||
|
||||
image {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list {
|
||||
margin-top: 20px;
|
||||
|
||||
.media-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.replies-section {
|
||||
padding: 0 15px;
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
padding-left: 5px;
|
||||
border-left: 3px solid #00b96b;
|
||||
}
|
||||
|
||||
.reply-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
.avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.reply-main {
|
||||
flex: 1;
|
||||
|
||||
.reply-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.nickname {
|
||||
font-weight: bold;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.reply-content {
|
||||
font-size: 14px;
|
||||
color: #eee;
|
||||
line-height: 1.5;
|
||||
|
||||
image {
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #1a1a1a;
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
|
||||
.input-wrapper {
|
||||
flex: 1;
|
||||
background: #333;
|
||||
border-radius: 20px;
|
||||
padding: 8px 15px;
|
||||
|
||||
input {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
color: #00b96b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
202
miniprogram/src/subpackages/forum/detail/index.tsx
Normal file
202
miniprogram/src/subpackages/forum/detail/index.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
|
||||
import { View, Text, Image, Video, RichText, Input, Button } from '@tarojs/components'
|
||||
import { AtActivityIndicator, AtIcon } from 'taro-ui'
|
||||
import { getTopicDetail, createReply, uploadMedia } from '../../../api'
|
||||
import { marked } from 'marked'
|
||||
import './detail.scss'
|
||||
|
||||
const ForumDetail = () => {
|
||||
const router = useRouter()
|
||||
const { id } = router.params
|
||||
|
||||
const [topic, setTopic] = useState<any>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [replyContent, setReplyContent] = useState('')
|
||||
const [sending, setSending] = useState(false)
|
||||
const [htmlContent, setHtmlContent] = useState('')
|
||||
|
||||
const fetchDetail = async () => {
|
||||
try {
|
||||
const res = await getTopicDetail(Number(id))
|
||||
setTopic(res.data)
|
||||
|
||||
// Parse markdown
|
||||
if (res.data.content) {
|
||||
const html = marked.parse(res.data.content)
|
||||
// Basic fix for images to fit screen
|
||||
const styledHtml = (html as string).replace(/<img/g, '<img style="max-width:100%;border-radius:8px;"')
|
||||
setHtmlContent(styledHtml)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchDetail()
|
||||
}
|
||||
}, [id])
|
||||
|
||||
useShareAppMessage(() => {
|
||||
return {
|
||||
title: topic?.title || '技术社区',
|
||||
path: `/subpackages/forum/detail/index?id=${id}`
|
||||
}
|
||||
})
|
||||
|
||||
const handleReplyChange = (e) => {
|
||||
setReplyContent(e.detail.value)
|
||||
}
|
||||
|
||||
const handleUpload = async () => {
|
||||
try {
|
||||
const res = await Taro.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image', 'video'],
|
||||
sourceType: ['album', 'camera']
|
||||
})
|
||||
|
||||
const file = res.tempFiles[0]
|
||||
const type = file.fileType === 'video' ? 'video' : 'image'
|
||||
|
||||
Taro.showLoading({ title: '上传中...' })
|
||||
|
||||
const uploadRes = await uploadMedia(file.tempFilePath, type)
|
||||
|
||||
let url = uploadRes.file
|
||||
// Ensure full URL if needed (backend usually returns relative or absolute)
|
||||
if (url && !url.startsWith('http')) {
|
||||
const BASE_URL = process.env.TARO_APP_API_URL || 'https://market.quant-speed.com/api'
|
||||
const host = BASE_URL.replace(/\/api\/?$/, '')
|
||||
if (!url.startsWith('/')) url = '/' + url
|
||||
url = `${host}${url}`
|
||||
}
|
||||
|
||||
const insertText = type === 'video'
|
||||
? `\n<video src="${url}" controls width="100%"></video>\n`
|
||||
: `\n\n`
|
||||
|
||||
setReplyContent(prev => prev + insertText)
|
||||
|
||||
Taro.hideLoading()
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.hideLoading()
|
||||
Taro.showToast({ title: '上传失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const token = Taro.getStorageSync('token')
|
||||
if (!token) {
|
||||
Taro.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
if (!replyContent.trim()) {
|
||||
Taro.showToast({ title: '请输入内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
setSending(true)
|
||||
try {
|
||||
await createReply({
|
||||
topic: Number(id),
|
||||
content: replyContent
|
||||
})
|
||||
Taro.showToast({ title: '回复成功', icon: 'success' })
|
||||
setReplyContent('')
|
||||
fetchDetail() // Refresh
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
Taro.showToast({ title: '回复失败', icon: 'none' })
|
||||
} finally {
|
||||
setSending(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <View className='forum-detail-page'><AtActivityIndicator mode='center' /></View>
|
||||
if (!topic) return <View className='forum-detail-page'><View style={{padding: 20, textAlign: 'center'}}>话题不存在</View></View>
|
||||
|
||||
return (
|
||||
<View className='forum-detail-page'>
|
||||
<View className='topic-card'>
|
||||
<View className='header'>
|
||||
{topic.is_pinned && <Text style={{color: '#ff4d4f', marginRight: 5, fontSize: 12, border: '1px solid #ff4d4f', padding: '0 4px', borderRadius: 4}}>置顶</Text>}
|
||||
<Text className='title'>{topic.title}</Text>
|
||||
|
||||
<View className='meta'>
|
||||
<View className='author'>
|
||||
<Image className='avatar' src={topic.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
|
||||
<Text>{topic.author_info?.nickname}</Text>
|
||||
{topic.is_verified_owner && <Text className='verified'>✓</Text>}
|
||||
</View>
|
||||
<Text>•</Text>
|
||||
<Text>{new Date(topic.created_at).toLocaleDateString()}</Text>
|
||||
<Text>•</Text>
|
||||
<Text>{topic.view_count} 阅读</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='content'>
|
||||
<RichText nodes={htmlContent} />
|
||||
</View>
|
||||
|
||||
{topic.media && topic.media.length > 0 && (
|
||||
<View className='media-list'>
|
||||
{topic.media.filter(m => m.media_type === 'video').map(m => (
|
||||
<View key={m.id} className='media-item'>
|
||||
<Video src={m.url} controls />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className='replies-section'>
|
||||
<View className='section-title'>{topic.replies?.length || 0} 条回复</View>
|
||||
|
||||
{topic.replies?.map((reply, idx) => (
|
||||
<View key={reply.id} className='reply-card'>
|
||||
<Image className='avatar' src={reply.author_info?.avatar_url || 'https://via.placeholder.com/30'} />
|
||||
<View className='reply-main'>
|
||||
<View className='reply-header'>
|
||||
<Text className='nickname'>{reply.author_info?.nickname}</Text>
|
||||
<Text className='time'>#{idx + 1} • {new Date(reply.created_at).toLocaleDateString()}</Text>
|
||||
</View>
|
||||
<View className='reply-content'>
|
||||
{/* Simple markdown render for replies or just text if complex */}
|
||||
<RichText nodes={marked.parse(reply.content) as string} />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className='reply-bar'>
|
||||
<View className='action-btn' onClick={handleUpload}>
|
||||
<AtIcon value='image' size='20' color='#888' />
|
||||
</View>
|
||||
<View className='input-wrapper'>
|
||||
<Input
|
||||
value={replyContent}
|
||||
onInput={handleReplyChange}
|
||||
placeholder='发表回复...'
|
||||
confirmType='send'
|
||||
onConfirm={handleSubmit}
|
||||
/>
|
||||
</View>
|
||||
<View className='action-btn' onClick={handleSubmit}>
|
||||
{sending ? <AtActivityIndicator size={20} /> : <Text className='send-btn'>发送</Text>}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ForumDetail
|
||||
Reference in New Issue
Block a user