Commit f98e5a10 authored by wty's avatar wty

优化子类样式等

parent 31ee1c6f
import './ContentItem.scss' import './ContentItem.scss'
import defaultIcon from '../../static/defaultIcon.png'
import notFollow from '../../static/notFollow.png' import notFollow from '../../static/notFollow.png'
import followed from '../../static/followed.png' import followed from '../../static/followed.png'
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {Root} from "../../dataCenter/Root"; import {Root} from "../../dataCenter/Root";
function ContentItem(props) { function ContentItem(props) {
const {dataCenter, fetchData, updateIndex} = useContext(Root) const {dataCenter, fetchData} = useContext(Root)
const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, toolBoxId} = props.value const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, toolBoxId} = props.value
const [isFollow, setIsFollow] = useState(false) const [isFollow, setIsFollow] = useState(false)
const [itemIcon, setItemIcon] = useState(toolBoxIcon) const [itemIcon, setItemIcon] = useState(toolBoxIcon)
...@@ -22,14 +21,13 @@ function ContentItem(props) { ...@@ -22,14 +21,13 @@ function ContentItem(props) {
_follow.splice(index, 1) _follow.splice(index, 1)
} }
fetchData('/users/follow', {follow: JSON.stringify(_follow), userId: dataCenter.userInfo.uid}) fetchData('/users/follow', {follow: JSON.stringify(_follow), userId: dataCenter.userInfo.uid})
.then(() => updateIndex()) .then(() => fetchData('/users/getUser', {}, 'userInfo'))
.then(() => fetchData('/users/getUser',{},'userInfo'))
} }
useEffect(() => { useEffect(() => {
if (dataCenter.userInfo?.follow.includes(toolBoxId)) { if (dataCenter.userInfo?.follow.includes(toolBoxId)) {
setIsFollow(true) setIsFollow(true)
}else { } else {
setIsFollow(false) setIsFollow(false)
} }
}, [dataCenter.toolBox, dataCenter.userInfo]) }, [dataCenter.toolBox, dataCenter.userInfo])
...@@ -41,7 +39,7 @@ function ContentItem(props) { ...@@ -41,7 +39,7 @@ function ContentItem(props) {
!itemIcon && <div className="defaultIcon">{toolBoxName[0]}</div> !itemIcon && <div className="defaultIcon">{toolBoxName[0]}</div>
} }
{ {
itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/> itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/>
} }
</div> </div>
......
import './Content.scss' import './Content.scss'
import ContentItem from "./ContentItem"; import ContentItemAdmin from "./ContentItemAdmin";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {Root} from "../../dataCenter/Root"; import {Root} from "../../dataCenter/Root";
function Content(props) { function Content(props) {
const {dataCenter} = useContext(Root) const {dataCenter} = useContext(Root)
return ( return (
<div className="content"> <div className="content">
{ {
dataCenter.childType?.length ? dataCenter?.toolBox?.filter(v => { dataCenter?.toolBox?.length ? dataCenter.toolBox.map(v => {
if (dataCenter.childTypeId === 'all') return true
else return v.childTypeId === dataCenter.childTypeId
}).map(v => {
return ( return (
<ContentItem key={v['toolBoxId']} value={v}/> <ContentItemAdmin key={v['toolBoxId']} value={v}/>
) )
}) })
: :
......
...@@ -5,18 +5,17 @@ import followed from '../../static/followed.png' ...@@ -5,18 +5,17 @@ import followed from '../../static/followed.png'
import setting from '../../static/setting.svg' import setting from '../../static/setting.svg'
import trash from '../../static/trash.svg' import trash from '../../static/trash.svg'
import dragIcon from '../../static/dragIcon.svg' import dragIcon from '../../static/dragIcon.svg'
import { useContext, useState } from "react"; import {useContext, useState} from "react";
import { PopContext, Root } from "../../dataCenter/Root"; import {PopContext, Root} from "../../dataCenter/Root";
import PopToolBoxConfig from "../Pop_ToolBoxConfig/Pop_toolBoxConfig";
import ToolModal from "../../modal/ToolModal" import ToolModal from "../../modal/ToolModal"
function ContentItem(props) { function ContentItemAdmin(props) {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const { fetchData, updateIndex } = useContext(Root) const {fetchData} = useContext(Root)
const { showPop } = useContext(PopContext) const {showPop} = useContext(PopContext)
const { toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId } = props.value const {toolBoxIcon, toolBoxName, toolBoxDesc, toolBoxUrl, follow, toolBoxId} = props.value
const [itemIcon, setItemIcon] = useState(toolBoxIcon) const [itemIcon, setItemIcon] = useState(toolBoxIcon)
...@@ -24,25 +23,29 @@ function ContentItem(props) { ...@@ -24,25 +23,29 @@ function ContentItem(props) {
window.location.href = url window.location.href = url
} }
const deleteItem = toolBoxId => { const deleteItem = toolBoxId => {
fetchData('/delete/deleteToolBoxById', { toolBoxId }) fetchData('/delete/deleteToolBoxById', {toolBoxId})
.then(() => updateIndex())
} }
return ( return (
<div className="content-item"> <div className="content-item">
<div className="content-adminTool"> <div className="content-adminTool">
<img src={dragIcon} alt="" /> <img src={dragIcon} alt=""/>
<img src={setting} alt="" onClick={() => setVisible(true)} /> <img src={setting} alt="" onClick={() => setVisible(true)}/>
<img src={trash} alt="" onClick={() => deleteItem(toolBoxId)} /> <img src={trash} alt="" onClick={() => deleteItem(toolBoxId)}/>
</div> </div>
<div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}> <div className="item-icon" onClick={() => jumpUrl(toolBoxUrl)}>
<img src={itemIcon} alt='' onError={(e) => setItemIcon(defaultIcon)} /> {
!itemIcon && <div className="defaultIcon">{toolBoxName[0]}</div>
}
{
itemIcon && <img src={itemIcon} alt='' onError={e => setItemIcon(null)}/>
}
</div> </div>
<div className="item-name" onClick={() => jumpUrl(toolBoxUrl)}>{toolBoxName}</div> <div className="item-name" onClick={() => jumpUrl(toolBoxUrl)}>{toolBoxName}</div>
<div className="item-desc">{toolBoxDesc}</div> <div className="item-desc">{toolBoxDesc}</div>
<a className='item-url' href={toolBoxUrl}>{toolBoxUrl}</a> <a className='item-url' href={toolBoxUrl}>{toolBoxUrl}</a>
<div className="follow"> <div className="follow">
<img className='icon-follow' src={follow ? followed : notFollow} alt="" /> <img className='icon-follow' src={follow ? followed : notFollow} alt=""/>
收藏 收藏
</div> </div>
{visible && <ToolModal {visible && <ToolModal
...@@ -57,4 +60,4 @@ function ContentItem(props) { ...@@ -57,4 +60,4 @@ function ContentItem(props) {
) )
} }
export default ContentItem export default ContentItemAdmin
import logo from "../../static/logo.png"; import logo from "../../static/logo.png";
import './index.scss' import './index.scss'
import ToolType from "../../component/ToolType/ToolType"; import ToolType from "../../component/ToolType/ToolType";
import Content from "../../component/Content/Content"; import Content from '../../component/ContentAdmin/Content'
import {PopContext, Root} from "../../dataCenter/Root"; import {PopContext, Root} from "../../dataCenter/Root";
import {useContext, useEffect, useState} from "react"; import {useContext, useEffect, useState} from "react";
import {NEED_UPDATE_INDEX} from "../../dataCenter/action"; import {NEED_UPDATE_INDEX} from "../../dataCenter/action";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment