root
/
jiachenlong
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

弹窗美化版本 v1.2.20

This commit is contained in:
甲辰生产 2026-03-28 23:27:32 +08:00
parent ad24947037
commit 8b6271bb84
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/pages/News.jsx
View File

@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react'
export default function News() { export default function News() {
const [activeTab, setActiveTab] = useState(localStorage.getItem('news_activeTab') || 'seek') const [activeTab, setActiveTab] = useState(localStorage.getItem('news_activeTab') || 'seek')
const [showSeekPublish, setShowSeekPublish] = useState(false) const [showSeekPublish, setShowSeekPublish] = useState(false)
const [customModal, setCustomModal] = useState({show: false, title: '', content: ''})
const [showMySeeks, setShowMySeeks] = useState(false) // 我的寻号 const [showMySeeks, setShowMySeeks] = useState(false) // 我的寻号
const [showContactId, setShowContactId] = useState(null) // 显示联系方式的寻号ID const [showContactId, setShowContactId] = useState(null) // 显示联系方式的寻号ID
const [showCommentId, setShowCommentId] = useState(null) // 显示评论输入的寻号ID const [showCommentId, setShowCommentId] = useState(null) // 显示评论输入的寻号ID
@ -117,7 +118,7 @@ export default function News() {
if (data.message === '匹配成功，已通知发布者') { if (data.message === '匹配成功，已通知发布者') {
setMatchedStatus(prev => ({...prev, [infoId]: 'matched'})) setMatchedStatus(prev => ({...prev, [infoId]: 'matched'}))
setShowContactId(infoId) // 显示联系方式 setShowContactId(infoId) // 显示联系方式
alert('匹配成功！') setCustomModal({show: true, title: '匹配成功', content: '已通知发布者，请等待对方联系'})
fetchInfoList() // 刷新列表 fetchInfoList() // 刷新列表
} }
} catch (e) { } catch (e) {
@ -130,7 +131,7 @@ export default function News() {
try { try {
const res = await fetch(`${API_BASE}/api/information/seek/matched-user/${infoId}`, { headers: { Authorization: `Bearer ${token}` } }) const res = await fetch(`${API_BASE}/api/information/seek/matched-user/${infoId}`, { headers: { Authorization: `Bearer ${token}` } })
const data = await res.json() const data = await res.json()
if (data.matched_user_id) alert(`匹配者: ${data.user_name}, 联系方式: ${data.matched_contact || '未提供'}`) if (data.matched_user_id) setCustomModal({show: true, title: '匹配者信息', content: `用户名: ${data.user_name}\n联系方式: ${data.matched_contact || '未提供'}`})
} catch (e) { console.error(e) } } catch (e) { console.error(e) }
} }
const fetchPublisherInfo = async (infoId) => { const fetchPublisherInfo = async (infoId) => {
@ -139,7 +140,7 @@ export default function News() {
try { try {
const res = await fetch(`${API_BASE}/api/information/seek/publisher/${infoId}`, { headers: { Authorization: `Bearer ${token}` } }) const res = await fetch(`${API_BASE}/api/information/seek/publisher/${infoId}`, { headers: { Authorization: `Bearer ${token}` } })
const data = await res.json() const data = await res.json()
if (data.user_id) alert(`发布者: ${data.user_name}, 联系方式: ${data.contact || '未提供'}`) if (data.user_id) setCustomModal({show: true, title: '发布者信息', content: `用户名: ${data.user_name}\n联系方式: ${data.contact || '未提供'}`})
} catch (e) { console.error(e) } } catch (e) { console.error(e) }
} }
const fetchMatchCollections = async (infoId) => { const fetchMatchCollections = async (infoId) => {
@ -504,7 +505,7 @@ export default function News() {
: 1 : 1
}}> }}>
{(item.is_matched === 'matched' || matchedStatus[item.id] === 'matched') ? '已经匹配' : '尚未匹配'} {(item.is_matched === 'matched' || matchedStatus[item.id] === 'matched') ? '已经匹配' : '尚未匹配'}
{(item.is_matched === 'matched' || matchedStatus[item.id] === 'matched') && <button onClick={() => item.user_id === currentUserId ? fetchMatchedUserInfo(item.id) : fetchPublisherInfo(item.id)} style={{padding:'4px 10px',borderRadius:'4px',fontSize:'12px',background:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? '#10b981' : '#6b7280',border:'none',color:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? '#fb923c' : '#9ca3af',fontWeight:'bold',cursor:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? 'pointer' : 'not-allowed',marginLeft:'4px'}}>{item.user_id === currentUserId ? '匹配者信息' : '发布者信息'}</button>} {(item.is_matched === 'matched' || matchedStatus[item.id] === 'matched') && <button onClick={() => { if(item.user_id === currentUserId) fetchMatchedUserInfo(item.id); else if(item.matched_user_id === currentUserId) fetchPublisherInfo(item.id) }} style={{padding:'4px 10px',borderRadius:'4px',fontSize:'12px',background:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? '#10b981' : '#6b7280',border:'none',color:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? '#fb923c' : '#9ca3af',fontWeight:'bold',cursor:(item.user_id === currentUserId || item.matched_user_id === currentUserId) ? 'pointer' : 'not-allowed',marginLeft:'4px'}}>{item.user_id === currentUserId ? '匹配者信息' : '发布者信息'}</button>}
</span> </span>
</div> </div>
)} )}
@ -768,6 +769,24 @@ export default function News() {
</div> </div>
</div> </div>
)} )}
{customModal.show && (
<div style={{position:'fixed',top:0,left:0,right:0,bottom:0,background:'rgba(0,0,0,0.7)',zIndex:2000,display:'flex',alignItems:'center',justifyContent:'center'}}>
<div style={{background:'linear-gradient(135deg, #1e293b 0%, #0f172a 100%)',borderRadius:'16px',padding:'24px',width:'85%',maxWidth:'380px',boxShadow:'0 20px 60px rgba(0,0,0,0.5)',border:'1px solid rgba(255,255,255,0.1)'}}>
<div style={{textAlign:'center',marginBottom:'20px'}}>
<h3 style={{color:'#10b981',fontSize:'20px',fontWeight:'bold',margin:'0'}}>{customModal.title}</h3>
</div>
<div style={{background:'rgba(0,0,0,0.3)',borderRadius:'12px',padding:'16px',marginBottom:'20px'}}>
{customModal.content.split('\n').map((line, i) => (
<div key={i} style={{color:'#e2e8f0',fontSize:'15px',lineHeight:'2',display:'flex',justifyContent:'space-between'}}>
<span style={{color:'#94a3b8'}}>{line.split(':')[0]}</span>
<span style={{color:'#fbbf24',fontWeight:'600'}}>{line.split(':')[1]}</span>
</div>
))}
</div>
<button onClick={()=>setCustomModal({...customModal,show:false})} style={{width:'100%',padding:'14px',background:'#10b981',border:'none',borderRadius:'10px',color:'#fff',fontSize:'16px',fontWeight:'bold',cursor:'pointer'}}>知道了</button>
</div>
</div>
)}
</div> </div>
) )
} }