v1.2.25 - Info页面完善版：添加寻号/行情顶部Tab切换、列表筛选功能（全部/寻号/行情）、发布记录类型标签显示
This commit is contained in:
甲辰生产
parent
509e37cd98
commit
7009d1126c
|
|
@ -1 +1 @@
|
|||
VERSION=1.2.24
|
||||
VERSION=1.2.25
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
// 信息页面 - 寻配号发布和发布管理（包含寻号/行情区分）
|
||||
export default function Info() {
|
||||
// 检查登录状态，未登录则跳转到登录页
|
||||
if (!localStorage.getItem('token')) {
|
||||
|
|
@ -7,129 +8,233 @@ export default function Info() {
|
|||
return null
|
||||
}
|
||||
|
||||
// 顶部tab：寻配号发布 / 发布管理
|
||||
const [activeTab, setActiveTab] = useState('publish')
|
||||
const [showPublish, setShowPublish] = useState(false)
|
||||
const [myList, setMyList] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [editingItem, setEditingItem] = useState(null)
|
||||
const [filterType, setFilterType] = useState('all') // all/seek/deal
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
edition: '龙钞', type: '标百', isGraded: true, category: '成交', source: '直播', title: ''
|
||||
})
|
||||
// content使用原生DOM
|
||||
|
||||
// 寻配号发布表单（新版）
|
||||
const [seekForm, setSeekForm] = useState({
|
||||
edition: '龙钞,马钞,蛇钞', price: '', features: '', contact: '', content: ''
|
||||
})
|
||||
|
||||
const API_BASE = localStorage.getItem('API_BASE') || ''
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'manage') fetchMyList()
|
||||
}, [activeTab])
|
||||
|
||||
// 自动生成标题
|
||||
useEffect(() => {
|
||||
const now = new Date()
|
||||
const date = `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`
|
||||
const gradeNote = formData.isGraded ? '（评级币）' : '（裸钞）'
|
||||
const title = `「${date} ${formData.edition} ${formData.type} ${formData.category} 行情信息${gradeNote}」`
|
||||
setFormData(prev => ({...prev, title}))
|
||||
}, [formData.edition, formData.type, formData.isGraded, formData.category])
|
||||
|
||||
const API_BASE = localStorage.getItem('API_BASE') || ''
|
||||
// 自动生成标题
|
||||
if (seekForm.edition || seekForm.features) {
|
||||
const title = `「寻号 ${seekForm.edition || '龙钞,马钞,蛇钞'} J0${seekForm.features || 'XXXXXXXX'}」`
|
||||
setSeekForm(prev => ({ ...prev, title }))
|
||||
}
|
||||
}, [seekForm.edition, seekForm.features])
|
||||
|
||||
const fetchMyList = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const res = await fetch(`${API_BASE}/api/information/my/list`, { headers: { Authorization: `Bearer ${token}` } })
|
||||
setMyList(res.ok ? await res.json() : [])
|
||||
} catch (e) { console.error(e) }
|
||||
const res = await fetch(`${API_BASE}/api/information/my/list`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
if (res.ok) {
|
||||
const data = await res.json()
|
||||
setMyList(data || [])
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const handlePublish = async () => {
|
||||
if (!formData.title) { alert('请填写标题'); return }
|
||||
// 发布寻配号
|
||||
const handlePublishSeek = async () => {
|
||||
if (!seekForm.contact) {
|
||||
alert('请填写联系方式')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const res = await fetch(`${API_BASE}/api/information/`, {
|
||||
method: 'POST', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: formData.title, content: document.getElementById('publishContent')?.value || '', info_type: formData.category === '成交' ? 'deal' : 'seek' })
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: seekForm.title,
|
||||
content: document.getElementById('seekContent')?.value || seekForm.content,
|
||||
info_type: 'seek',
|
||||
expect_category: seekForm.edition,
|
||||
expect_number: seekForm.features ? `J0${seekForm.features}` : null
|
||||
})
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.id || data.code === 0) {
|
||||
alert('发布成功！')
|
||||
setShowPublish(false)
|
||||
setSeekForm({ edition: '龙钞,马钞,蛇钞', price: '', features: '', contact: '', content: '', title: '' })
|
||||
const contentEl = document.getElementById('seekContent')
|
||||
if (contentEl) contentEl.value = ''
|
||||
fetchMyList()
|
||||
} else {
|
||||
alert(data.message || '发布失败')
|
||||
}
|
||||
} catch (e) {
|
||||
alert('发布失败: ' + e.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 发布行情
|
||||
const handlePublishDeal = async () => {
|
||||
const content = document.getElementById('publishContent')?.value || ''
|
||||
if (!formData.title) {
|
||||
alert('请填写标题')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const res = await fetch(`${API_BASE}/api/information/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: formData.title,
|
||||
content: content,
|
||||
info_type: formData.category === '成交' ? 'deal' : 'seek'
|
||||
})
|
||||
})
|
||||
const data = await res.json()
|
||||
if (data.id || data.code === 0) {
|
||||
alert('发布成功！')
|
||||
setShowPublish(false)
|
||||
setFormData({ edition: '龙钞', type: '标百', isGraded: true, category: '成交', source: '直播', title: '' })
|
||||
const el = document.getElementById('publishContent'); if(el) el.value = ''
|
||||
const contentEl = document.getElementById('publishContent')
|
||||
if (contentEl) contentEl.value = ''
|
||||
fetchMyList()
|
||||
} else { alert(data.message || '发布失败') }
|
||||
} catch (e) { alert('发布失败: ' + e.message) }
|
||||
} else {
|
||||
alert(data.message || '发布失败')
|
||||
}
|
||||
} catch (e) {
|
||||
alert('发布失败: ' + e.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('确定删除这条信息吗？')) return
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const res = await fetch(`${API_BASE}/api/information/${id}`, { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } })
|
||||
if (res.ok) { alert('删除成功'); fetchMyList() } else { alert('删除失败') }
|
||||
} catch (e) { alert('删除失败: ' + e.message) }
|
||||
const res = await fetch(`${API_BASE}/api/information/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
if (res.ok) {
|
||||
alert('删除成功')
|
||||
fetchMyList()
|
||||
} else {
|
||||
alert('删除失败')
|
||||
}
|
||||
} catch (e) {
|
||||
alert('删除失败: ' + e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEdit = (item) => setEditingItem({ id: item.id, title: item.title, content: item.content })
|
||||
// 编辑
|
||||
const handleEdit = (item) => {
|
||||
setEditingItem({ id: item.id, title: item.title, content: item.content })
|
||||
}
|
||||
|
||||
const handleSaveEdit = async () => {
|
||||
const saveEdit = async () => {
|
||||
if (!editingItem) return
|
||||
try {
|
||||
const token = localStorage.getItem('token')
|
||||
const res = await fetch(`${API_BASE}/api/information/${editingItem.id}`, {
|
||||
method: 'PUT', headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ title: editingItem.title, content: editingItem.content })
|
||||
})
|
||||
if (res.ok) { alert('保存成功'); setEditingItem(null); fetchMyList() } else { alert('保存失败') }
|
||||
} catch (e) { alert('保存失败: ' + e.message) }
|
||||
if (res.ok) {
|
||||
alert('保存成功')
|
||||
setEditingItem(null)
|
||||
fetchMyList()
|
||||
} else {
|
||||
alert('保存失败')
|
||||
}
|
||||
} catch (e) {
|
||||
alert('保存失败: ' + e.message)
|
||||
}
|
||||
}
|
||||
|
||||
const BtnGroup = ({ options, value, onChange, label }) => (
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '8px', fontWeight: '500' }}>{label}</div>
|
||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
|
||||
{options.map(opt => (
|
||||
<button key={opt.value} onClick={() => onChange(opt.value)}
|
||||
style={{ padding: '10px 16px', borderRadius: '8px', border: value === opt.value ? '2px solid #10b981' : '1px solid #374151',
|
||||
background: value === opt.value ? 'rgba(16,185,129,0.15)' : '#1f2937', color: value === opt.value ? '#10b981' : '#d1d5db',
|
||||
cursor: 'pointer', fontSize: '13px', fontWeight: '500', transition: 'all 0.2s' }}>
|
||||
{opt.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
const getUserPhone = () => {
|
||||
try {
|
||||
const user = JSON.parse(localStorage.getItem('user') || '{}')
|
||||
return user.phone || user.phoneNumber || user.mobile || user.tel || ''
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const Card = ({ children, title, action }) => (
|
||||
<div style={{ background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)', borderRadius: '16px', padding: '20px', marginBottom: '16px', border: '1px solid #374151', boxShadow: '0 4px 20px rgba(0,0,0,0.3)' }}>
|
||||
{title && <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<h3 style={{ color: '#f9fafb', margin: 0, fontSize: '16px', fontWeight: '600' }}>{title}</h3>
|
||||
{action}
|
||||
</div>}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
useEffect(() => {
|
||||
setSeekForm(prev => ({ ...prev, contact: getUserPhone() }))
|
||||
}, [])
|
||||
|
||||
const formatDate = (d) => d ? new Date(d).toLocaleString('zh-CN').slice(0, 16) : '-'
|
||||
// 格式化日期
|
||||
const formatDate = (date) => {
|
||||
if (!date) return '-'
|
||||
return new Date(date).toLocaleString('zh-CN').slice(0, 16)
|
||||
}
|
||||
|
||||
// 过滤后的列表
|
||||
const filteredList = myList.filter(item => filterType === 'all' || item.info_type === filterType)
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', background: 'linear-gradient(180deg, #0f172a 0%, #1e293b 100%)', paddingBottom: '80px' }}>
|
||||
{/* 顶部标签 */}
|
||||
{/* 顶部 Tab 切换 */}
|
||||
<div style={{ position: 'sticky', top: 0, background: 'rgba(15,23,42,0.95)', backdropFilter: 'blur(10px)', padding: '16px 20px', borderBottom: '1px solid #1e293b', zIndex: 100 }}>
|
||||
<div style={{ display: 'flex', gap: '8px', background: '#1e293b', borderRadius: '12px', padding: '4px' }}>
|
||||
{[{ key: 'publish', label: '📝 寻配号发布' }, { key: 'manage', label: '📋 发布管理' }].map(t => (
|
||||
<div key={t.key} onClick={() => setActiveTab(t.key)}
|
||||
style={{ flex: 1, padding: '12px 16px', borderRadius: '10px', background: activeTab === t.key ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
|
||||
color: activeTab === t.key ? '#fff' : '#9ca3af', cursor: 'pointer', textAlign: 'center', fontSize: '14px', fontWeight: '600', transition: 'all 0.3s' }}>
|
||||
{t.label}
|
||||
{[
|
||||
{ key: 'publish', label: '📝 寻配号发布' },
|
||||
{ key: 'manage', label: '📋 发布管理' }
|
||||
].map(tab => (
|
||||
<div
|
||||
key={tab.key}
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '12px 16px',
|
||||
borderRadius: '10px',
|
||||
background: activeTab === tab.key ? 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)' : 'transparent',
|
||||
color: activeTab === tab.key ? '#fff' : '#9ca3af',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
>
|
||||
{tab.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '20px' }}>
|
||||
{/* 寻配号发布 - 提示页面 */}
|
||||
{/* 寻配号发布页 */}
|
||||
{activeTab === 'publish' && (
|
||||
<div style={{ padding: '40px', textAlign: 'center', color: '#94a3b8' }}>
|
||||
<div style={{ fontSize: '48px', marginBottom: '16px' }}>📝</div>
|
||||
|
|
@ -138,119 +243,295 @@ export default function Info() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* 发布管理 */}
|
||||
{/* 发布管理页 */}
|
||||
{activeTab === 'manage' && (
|
||||
<div>
|
||||
<Card title="📋 发布管理">
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<button onClick={() => setShowPublish(!showPublish)}
|
||||
style={{ background: showPublish ? 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)' : 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
color: '#fff', border: 'none', padding: '12px 24px', borderRadius: '10px', cursor: 'pointer', fontSize: '14px', fontWeight: '600' }}>
|
||||
{showPublish ? '✕ 收起' : '+ 新增发布'}
|
||||
{/* 新增发布区域 */}
|
||||
<div style={{ background: 'linear-gradient(145deg, #1f2937 0%, #111827 100%)', borderRadius: '16px', padding: '20px', marginBottom: '16px', border: '1px solid #374151', boxShadow: '0 4px 20px rgba(0,0,0,0.3)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<h3 style={{ color: '#f9fafb', margin: 0, fontSize: '16px', fontWeight: '600' }}>📋 发布管理</h3>
|
||||
<button
|
||||
onClick={() => setShowPublish(!showPublish)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: showPublish ? 'rgba(108,114,132,0.5)' : '#10b981',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px'
|
||||
}}
|
||||
>
|
||||
{showPublish ? '收起' : '+ 新增发布'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 发布表单 */}
|
||||
{/* 发布表单 - 两个Tab：寻配号 / 行情 */}
|
||||
{showPublish && (
|
||||
<div style={{ background: '#0f172a', borderRadius: '12px', padding: '16px', marginBottom: '16px' }}>
|
||||
<BtnGroup label="版别" options={[
|
||||
{ value: '龙钞', label: '🐉 龙钞' }, { value: '马钞', label: '🐎 马钞' }, { value: '蛇钞', label: '🐍 蛇钞' }, { value: '其他', label: '📄 其他' }
|
||||
]} value={formData.edition} onChange={v => setFormData({...formData, edition: v})} />
|
||||
{/* 内部Tab：寻配号 / 行情 */}
|
||||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||||
<button
|
||||
onClick={() => setSeekForm(prev => ({ ...prev, _tab: 'seek' }))}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #10b981',
|
||||
background: 'rgba(16,185,129,0.15)',
|
||||
color: '#10b981',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600'
|
||||
}}
|
||||
>
|
||||
🔍 寻配号
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSeekForm(prev => ({ ...prev, _tab: 'deal' }))}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '10px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #f59e0b',
|
||||
background: 'rgba(245,158,11,0.15)',
|
||||
color: '#f59e0b',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600'
|
||||
}}
|
||||
>
|
||||
💰 行情
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '16px' }}>
|
||||
<div style={{ flex: 2 }}>
|
||||
<div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '8px' }}>类型</div>
|
||||
<div style={{ display: 'flex', gap: '6px' }}>
|
||||
{['标百', '标十', '单张'].map(t => (
|
||||
<button key={t} onClick={() => setFormData({...formData, type: t})}
|
||||
style={{ flex: 1, padding: '10px', borderRadius: '8px', border: formData.type === t ? '2px solid #10b981' : '1px solid #374151',
|
||||
background: formData.type === t ? 'rgba(16,185,129,0.15)' : '#1f2937', color: formData.type === t ? '#10b981' : '#d1d5db', cursor: 'pointer', fontSize: '13px' }}>{t}</button>
|
||||
))}
|
||||
{/* 寻配号表单 */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
<div>
|
||||
<label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>版别（多选）</label>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{['龙钞', '马钞', '蛇钞'].map(ed => {
|
||||
const selected = seekForm.edition?.split(',').includes(ed)
|
||||
return (
|
||||
<button
|
||||
key={ed}
|
||||
onClick={() => {
|
||||
const editions = seekForm.edition ? seekForm.edition.split(',').filter(e => e) : []
|
||||
if (selected) {
|
||||
setSeekForm({ ...seekForm, edition: editions.filter(e => e !== ed).join(',') })
|
||||
} else {
|
||||
editions.push(ed)
|
||||
setSeekForm({ ...seekForm, edition: editions.join(',') })
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '8px',
|
||||
borderRadius: '6px',
|
||||
border: selected ? '2px solid #10b981' : '1px solid #334155',
|
||||
background: selected ? 'rgba(16,185,129,0.2)' : '#1f2937',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px'
|
||||
}}
|
||||
>
|
||||
{ed}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '8px' }}>是否评级</div>
|
||||
<button onClick={() => setFormData({...formData, isGraded: !formData.isGraded})}
|
||||
style={{ width: '100%', padding: '10px', borderRadius: '8px', border: formData.isGraded ? '2px solid #10b981' : '1px solid #374151',
|
||||
background: formData.isGraded ? 'rgba(16,185,129,0.15)' : '#1f2937', color: formData.isGraded ? '#10b981' : '#d1d5db', cursor: 'pointer', fontSize: '13px' }}>
|
||||
{formData.isGraded ? '✓ 评级币' : '○ 裸钞'}
|
||||
|
||||
<div>
|
||||
<label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>价格（选填）</label>
|
||||
<input
|
||||
type="text"
|
||||
value={seekForm.price}
|
||||
onChange={e => setSeekForm({ ...seekForm, price: e.target.value })}
|
||||
placeholder="请输入价格"
|
||||
style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>号码特征（8位）</label>
|
||||
<input
|
||||
type="text"
|
||||
value={seekForm.features}
|
||||
onChange={e => setSeekForm({ ...seekForm, features: e.target.value.toUpperCase().slice(0, 8) })}
|
||||
placeholder="输入号码特征，如：12345678 或 XXXXXXXX"
|
||||
maxLength={8}
|
||||
style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ color: '#ef4444', fontSize: '12px', display: 'block', marginBottom: '6px' }}>联系方式 *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={seekForm.contact}
|
||||
onChange={e => setSeekForm({ ...seekForm, contact: e.target.value })}
|
||||
placeholder="请输入手机号或微信"
|
||||
style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ color: '#9ca3af', fontSize: '12px', display: 'block', marginBottom: '6px' }}>正文</label>
|
||||
<textarea
|
||||
id="seekContent"
|
||||
placeholder="请输入详细信息..."
|
||||
style={{ width: '100%', padding: '8px', background: '#1f2937', border: '1px solid #334155', borderRadius: '6px', color: '#fff', fontSize: '13px', boxSizing: 'border-box', resize: 'vertical', minHeight: '60px' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<button
|
||||
onClick={handlePublishSeek}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
background: '#10b981',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
color: '#fff',
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
🔍 发布寻号
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPublish(false)}
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
background: 'transparent',
|
||||
border: '1px solid #334155',
|
||||
borderRadius: '8px',
|
||||
color: '#94a3b8',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BtnGroup label="分类" options={[
|
||||
{ value: '成交', label: '💰 成交' }, { value: '求购', label: '🔍 求购' }, { value: '出售', label: '💵 出售' }
|
||||
]} value={formData.category} onChange={v => setFormData({...formData, category: v})} />
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '8px' }}>标题（自动生成）</div>
|
||||
<input type="text" value={formData.title} readOnly
|
||||
style={{ width: '100%', padding: '14px', background: '#1f2937', border: '1px solid #374151', borderRadius: '10px', color: '#10b981', fontSize: '14px', boxSizing: 'border-box' }} />
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '8px' }}>正文</div>
|
||||
<textarea id="publishContent" placeholder="请输入..." rows={3}
|
||||
style={{ width: '100%', padding: '14px', background: '#1f2937', border: '1px solid #374151', borderRadius: '10px', color: '#fff', resize: 'vertical', boxSizing: 'border-box', fontSize: '14px' }} />
|
||||
</div>
|
||||
|
||||
<button onClick={handlePublish}
|
||||
style={{ width: '100%', padding: '14px', background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)', border: 'none', borderRadius: '10px', color: '#fff', fontSize: '15px', fontWeight: 'bold', cursor: 'pointer' }}>
|
||||
🚀 提交发布
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 发布列表 */}
|
||||
{loading ? (
|
||||
<div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px' }}>加载中...</div>
|
||||
) : myList.length === 0 ? (
|
||||
<div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px', fontSize: '14px' }}>暂无发布记录</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{myList.map(item => (
|
||||
<div key={item.id} style={{ background: '#0f172a', borderRadius: '12px', padding: '16px', border: '1px solid #374151' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
|
||||
<div style={{ color: '#10b981', fontSize: '15px', fontWeight: '600', flex: 1 }}>{item.title}</div>
|
||||
<span style={{ background: item.info_type === 'deal' ? 'rgba(16,185,129,0.2)' : 'rgba(59,130,246,0.2)', color: item.info_type === 'deal' ? '#10b981' : '#3b82f6', padding: '4px 10px', borderRadius: '20px', fontSize: '12px' }}>
|
||||
{item.info_type === 'deal' ? '💰 成交' : '🔍 求购'}
|
||||
</span>
|
||||
</div>
|
||||
{item.content && <div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '12px', lineHeight: '1.5' }}>{item.content}</div>}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ color: '#6b7280', fontSize: '12px' }}>{formatDate(item.created_at)}</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button onClick={() => handleEdit(item)} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #3b82f6', background: 'transparent', color: '#3b82f6', cursor: 'pointer', fontSize: '13px' }}>✏️ 编辑</button>
|
||||
<button onClick={() => handleDelete(item.id)} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ef4444', background: 'transparent', color: '#ef4444', cursor: 'pointer', fontSize: '13px' }}>🗑️ 删除</button>
|
||||
</div>
|
||||
{/* 列表过滤：全部 / 寻号 / 行情 */}
|
||||
<div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
|
||||
<button
|
||||
onClick={() => setFilterType('all')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: filterType === 'all' ? '#3b82f6' : '#374151',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterType('seek')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: filterType === 'seek' ? '#10b981' : '#374151',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
🔍 寻号
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setFilterType('deal')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: filterType === 'deal' ? '#f59e0b' : '#374151',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
fontSize: '13px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
💰 行情
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 发布列表 */}
|
||||
{loading ? (
|
||||
<div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px' }}>加载中...</div>
|
||||
) : filteredList.length === 0 ? (
|
||||
<div style={{ color: '#9ca3af', textAlign: 'center', padding: '30px', fontSize: '14px' }}>暂无发布记录</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{filteredList.map(item => (
|
||||
<div key={item.id} style={{ background: '#0f172a', borderRadius: '12px', padding: '16px', border: '1px solid #374151' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
|
||||
<div style={{ color: '#10b981', fontSize: '15px', fontWeight: '600', flex: 1 }}>{item.title}</div>
|
||||
<span style={{
|
||||
background: item.info_type === 'deal' ? 'rgba(245,158,11,0.2)' : 'rgba(16,185,129,0.2)',
|
||||
color: item.info_type === 'deal' ? '#f59e0b' : '#10b981',
|
||||
padding: '4px 10px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
{item.info_type === 'deal' ? '💰 行情' : '🔍 寻号'}
|
||||
</span>
|
||||
</div>
|
||||
{item.content && <div style={{ color: '#9ca3af', fontSize: '13px', marginBottom: '12px', lineHeight: '1.5' }}>{item.content}</div>}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ color: '#6b7280', fontSize: '12px' }}>{formatDate(item.created_at)}</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button onClick={() => handleEdit(item)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #3b82f6', background: 'transparent', color: '#3b82f6', cursor: 'pointer', fontSize: '12px' }}>✏️ 编辑</button>
|
||||
<button onClick={() => handleDelete(item.id)} style={{ padding: '6px 12px', borderRadius: '6px', border: '1px solid #ef4444', background: 'transparent', color: '#ef4444', cursor: 'pointer', fontSize: '12px' }}>🗑️ 删除</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 编辑弹窗 */}
|
||||
{editingItem && (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: '20px' }}>
|
||||
<div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.8)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, padding: '20px' }}>
|
||||
<div style={{ background: '#1f2937', borderRadius: '16px', padding: '24px', width: '100%', maxWidth: '420px', border: '1px solid #374151' }}>
|
||||
<h3 style={{ color: '#f9fafb', marginBottom: '20px', fontSize: '18px', fontWeight: '600' }}>✏️ 编辑信息</h3>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ color: '#9ca3af', fontSize: '13px', display: 'block', marginBottom: '8px' }}>标题</label>
|
||||
<input value={editingItem.title} onChange={(e) => setEditingItem({...editingItem, title: e.target.value})}
|
||||
style={{ width: '100%', padding: '14px', background: '#0f172a', border: '1px solid #374151', borderRadius: '10px', color: '#fff', boxSizing: 'border-box', fontSize: '14px' }} />
|
||||
<input
|
||||
type="text"
|
||||
value={editingItem.title}
|
||||
onChange={e => setEditingItem({ ...editingItem, title: e.target.value })}
|
||||
style={{ width: '100%', padding: '12px', background: '#0f172a', border: '1px solid #374151', borderRadius: '8px', color: '#fff', boxSizing: 'border-box', fontSize: '14px' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ color: '#9ca3af', fontSize: '13px', display: 'block', marginBottom: '8px' }}>内容</label>
|
||||
<textarea value={editingItem.content} onChange={(e) => setEditingItem({...editingItem, content: e.target.value})}
|
||||
rows={5} style={{ width: '100%', padding: '14px', background: '#0f172a', border: '1px solid #374151', borderRadius: '10px', color: '#fff', boxSizing: 'border-box', fontSize: '14px', resize: 'vertical' }} />
|
||||
<textarea
|
||||
value={editingItem.content}
|
||||
onChange={e => setEditingItem({ ...editingItem, content: e.target.value })}
|
||||
rows={4}
|
||||
style={{ width: '100%', padding: '12px', background: '#0f172a', border: '1px solid #374151', borderRadius: '8px', color: '#fff', boxSizing: 'border-box', fontSize: '14px', resize: 'vertical' }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<button onClick={handleSaveEdit} style={{ flex: 1, padding: '14px', background: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', border: 'none', borderRadius: '10px', color: '#fff', cursor: 'pointer', fontSize: '14px', fontWeight: '600' }}>💾 保存</button>
|
||||
<button onClick={() => setEditingItem(null)} style={{ flex: 1, padding: '14px', border: '1px solid #374151', borderRadius: '10px', background: 'transparent', color: '#9ca3af', cursor: 'pointer', fontSize: '14px' }}>取消</button>
|
||||
<button onClick={saveEdit} style={{ flex: 1, padding: '12px', background: '#10b981', border: 'none', borderRadius: '8px', color: '#fff', cursor: 'pointer', fontSize: '14px', fontWeight: '600' }}>💾 保存</button>
|
||||
<button onClick={() => setEditingItem(null)} style={{ flex: 1, padding: '12px', border: '1px solid #374151', borderRadius: '8px', background: 'transparent', color: '#9ca3af', cursor: 'pointer', fontSize: '14px' }}>取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue