harry
5 years ago
parent
edc9714418
commit
a190075fc5
@ -1,316 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Redirect } from 'react-router';
|
||||
|
||||
import { BrowserRouter as Router, Route} from "react-router-dom";
|
||||
|
||||
import { Switch ,Input,Tooltip,Icon} from 'antd';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import classNames from 'classnames'
|
||||
|
||||
import 'antd/lib/switch/style/index.css'
|
||||
|
||||
import './shixunCss/ShixunCardList.css';
|
||||
import GotoQQgroup from '../../../modal/GotoQQgroup'
|
||||
|
||||
import { on, off } from 'educoder'
|
||||
|
||||
const $ = window.$;
|
||||
|
||||
const Search = Input.Search;
|
||||
|
||||
class ShixunCardList extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
allevent:"desc",
|
||||
mine:0,
|
||||
InputValue: props.keyword || "",
|
||||
typemy:0,
|
||||
hots:0,
|
||||
news:0,
|
||||
shixunid:"",
|
||||
upcircle:false,
|
||||
typekeyid:undefined,
|
||||
goshowqqgtounp:false,
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate = (prevProps, prevState) => {
|
||||
if (this.props.keyword != prevProps.keyword) {
|
||||
this.setState({
|
||||
InputValue: this.props.keyword
|
||||
})
|
||||
}
|
||||
}
|
||||
componentDidMount = () => {
|
||||
on('searchKeywordChange', (event, data) => {
|
||||
// console.log(data)
|
||||
this.Input_search(data)
|
||||
})
|
||||
}
|
||||
componentWillUnmount = () => {
|
||||
off('searchKeywordChange')
|
||||
}
|
||||
|
||||
|
||||
latestHot=(e,key)=>{
|
||||
|
||||
let{upcircle,typekeyid}=this.state;
|
||||
|
||||
let id = e.target.id;
|
||||
$("#"+id).siblings().removeClass("active");
|
||||
$("#"+id).addClass("active");
|
||||
|
||||
let type;
|
||||
|
||||
// if(id==="all"){
|
||||
// type="publish_time";
|
||||
// }
|
||||
if(id==="hot"){
|
||||
type="hot";
|
||||
}else if(id==="new"){
|
||||
type="new";
|
||||
|
||||
}
|
||||
|
||||
if(typekeyid===key){
|
||||
if(upcircle===true){
|
||||
this.setState({
|
||||
upcircle:false,
|
||||
})
|
||||
// this.props.Shixunsupcircles("desc")
|
||||
}else if(upcircle===false){
|
||||
this.setState({
|
||||
upcircle:true,
|
||||
})
|
||||
// this.props.Shixunsupcircles("desc")
|
||||
}
|
||||
}else{
|
||||
this.setState({
|
||||
typekeyid:key
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
this.props.ShixunsState(false,type,"desc");
|
||||
}
|
||||
|
||||
|
||||
onSwitchChange=(e,key)=>{
|
||||
let id=e.target.id
|
||||
$("#"+id).siblings().removeClass("active");
|
||||
$("#"+id).addClass("active");
|
||||
let {typemy,upcircle,typekeyid}=this.state;
|
||||
|
||||
if(typekeyid===key){
|
||||
if(upcircle===true){
|
||||
this.setState({
|
||||
upcircle:false,
|
||||
})
|
||||
this.props.Shixunsupcircles("desc")
|
||||
}else if(upcircle===false){
|
||||
this.setState({
|
||||
upcircle:true
|
||||
})
|
||||
this.props.Shixunsupcircles("asc")
|
||||
}
|
||||
}else{
|
||||
this.setState({
|
||||
typekeyid:key
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
if(typemy===0){
|
||||
this.setState({
|
||||
typemy:1
|
||||
})
|
||||
}else{
|
||||
this.setState({
|
||||
typemy:0
|
||||
})
|
||||
}
|
||||
// allevent
|
||||
this.props.ShixunsSwitch();
|
||||
}
|
||||
//输入框搜索
|
||||
Input_search = (value) => {
|
||||
this.setState({
|
||||
InputValue: value
|
||||
})
|
||||
this.props.OnSearchInput(value,true);
|
||||
}
|
||||
|
||||
Input_searchs = (e) => {
|
||||
this.setState({
|
||||
InputValue: e.target.value
|
||||
})
|
||||
this.props.OnSearchInput(e.target.value,false);
|
||||
}
|
||||
upcircles=(val)=>{
|
||||
if(val==="asc"){
|
||||
this.setState({
|
||||
upcircle:false,
|
||||
})
|
||||
this.props.Shixunsupcircles("desc")
|
||||
}else if(val==="desc"){
|
||||
this.setState({
|
||||
upcircle:true
|
||||
})
|
||||
this.props.Shixunsupcircles("asc")
|
||||
}
|
||||
}
|
||||
|
||||
//头部获取是否已经登录了
|
||||
getUser=(url,type)=>{
|
||||
if(this.props.checkIfLogin()===false){
|
||||
this.props.showLoginDialog()
|
||||
return
|
||||
}
|
||||
if(this.props.checkIfProfileCompleted()===false){
|
||||
this.props.showProfileCompleteDialog()
|
||||
return
|
||||
}
|
||||
if(this.props&&this.props.current_user&&this.props.current_user.is_shixun_marker===false){
|
||||
this.setgoshowqqgtounp(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if(url !== undefined || url!==""){
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 处理弹框
|
||||
setgoshowqqgtounp=(bool)=>{
|
||||
this.setState({
|
||||
goshowqqgtounp:bool
|
||||
})
|
||||
}
|
||||
render(){
|
||||
let {mine,InputValue,upcircle,goshowqqgtounp}=this.state;
|
||||
|
||||
// console.log("NewHeadermygetHelmetapi123123123123");
|
||||
let shixuntype=false;
|
||||
if(this.props&&this.props.mygetHelmetapi!=null){
|
||||
let shixun="/shixuns";
|
||||
let paths="/paths";
|
||||
let courses="/courses";
|
||||
this.props.mygetHelmetapi.navbar.map((item,key)=>{
|
||||
var reg = RegExp(item.link);
|
||||
if(shixun.match(reg)){
|
||||
if(item.hidden===true){
|
||||
shixuntype=true
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="educontent mt20">
|
||||
<div className="clearfix">
|
||||
|
||||
{
|
||||
goshowqqgtounp===true?
|
||||
<GotoQQgroup {...this.state} {...this.props} setgoshowqqgtounp={(bool)=>this.setgoshowqqgtounp(bool)}></GotoQQgroup>
|
||||
:
|
||||
""
|
||||
}
|
||||
|
||||
{/*<div className="fl mr20 font-16 bestChoose shixun_repertoire active"*/}
|
||||
{/*id={"all"}*/}
|
||||
{/*onClick={(e)=>this.latestHot(e,1)}>全部*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="fl mr20 font-16 bestChoose shixun_repertoire"*/}
|
||||
{/*id={mine}*/}
|
||||
{/*onClick={(e)=>this.onSwitchChange(e,2)}>我的*/}
|
||||
{/*</div>*/}
|
||||
|
||||
<div className="fl mr20 font-16 bestChoose shixun_repertoire active"
|
||||
id="new"
|
||||
onClick={(e)=>this.latestHot(e,4)}>最新
|
||||
</div>
|
||||
|
||||
<div className="fl font-16 bestChoose shixun_repertoire"
|
||||
id="hot"
|
||||
onClick={(e)=>this.latestHot(e,3)}>最热
|
||||
</div>
|
||||
|
||||
{shixuntype===true?"":<span className={ "fr font-16 bestChoose color-blue" } onClick={(url)=>this.getUser("/shixuns/new")}>+新建实训项目</span>}
|
||||
|
||||
<div className="fr mr20 mt3">
|
||||
{
|
||||
this.props.middleshixundata&&this.props.middleshixundata.search_tags
|
||||
}
|
||||
</div>
|
||||
{/*<div className="fl font-16 bestChoose shixun_repertoire ml20 mt1"*/}
|
||||
{/*style={{display:upcircle===true?"block":"none"}}*/}
|
||||
{/*// onClick={()=>this.upcircles("asc")}*/}
|
||||
{/*>*/}
|
||||
{/*<Tooltip placement="bottom" title={"升序"}>*/}
|
||||
{/*<Icon type="up-circle" theme="twoTone" />*/}
|
||||
{/*/!*<Icon type="sort-descending" />*!/*/}
|
||||
{/*</Tooltip>*/}
|
||||
{/*</div>*/}
|
||||
{/*<div className="fl font-16 bestChoose shixun_repertoire ml20 mt1"*/}
|
||||
{/*// onClick={()=>this.upcircles("desc")}*/}
|
||||
{/*style={{display:upcircle===true?"none":"block"}}*/}
|
||||
{/*>*/}
|
||||
{/*<Tooltip placement="bottom" title={"降序"}>*/}
|
||||
{/*<Icon type="down-circle" theme="twoTone" />*/}
|
||||
{/*/!*<Icon type="sort-ascending" />*!/*/}
|
||||
{/*</Tooltip>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div className="fr mt3">*/}
|
||||
{/*<Search*/}
|
||||
{/*style={{ width: 300 }}*/}
|
||||
{/*className="search-new-input fl"*/}
|
||||
{/*placeholder="请输入创建者/实训/关卡名称进行搜索"*/}
|
||||
{/*value={InputValue}*/}
|
||||
{/*onInput={this.Input_searchs}*/}
|
||||
{/*onSearch={value => this.Input_search(value)}*/}
|
||||
{/*enterButton*/}
|
||||
{/*/>*/}
|
||||
|
||||
{/* <Search
|
||||
style={{ width: 300 }}
|
||||
className="fl"
|
||||
placeholder="请输入创建者/实训/关卡名称进行搜索"
|
||||
value={InputValue}
|
||||
onInput={this.Input_searchs}
|
||||
onSearch={value => this.Input_search(value)}
|
||||
autoComplete="off"
|
||||
></Search> */}
|
||||
{/*</div>*/}
|
||||
{/*<div className="fr">*/}
|
||||
{/*<span className="fl color-grey-6 mr30 font-16 mt5" id="search_name">{*/}
|
||||
{/*this.props.search_tags === null ? "" : this.props.search_tags*/}
|
||||
{/*}</span>*/}
|
||||
{/*<div className="fl mr5" style={{marginTop:'1px'}}>*/}
|
||||
{/*/!* <div className="controlblue"></div>*/}
|
||||
{/*<span className="controlring"></span> *!/*/}
|
||||
{/*<Switch*/}
|
||||
{/*className="controlbtn mr10 mt10 pr"*/}
|
||||
{/*size="small"*/}
|
||||
{/*style={{marginTop:'1px'}}*/}
|
||||
{/*onChange={this.onSwitchChange}*/}
|
||||
{/*/>*/}
|
||||
{/*</div>*/}
|
||||
{/*<span className="fl font-16 cdefault" data-tip-down="隐藏我学习的实训">隐藏我的</span>*/}
|
||||
|
||||
{/*</div>*/}
|
||||
{/*<span className="fr color-grey-6 mr30 font-16" id="search_name"></span>*/}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ShixunCardList;
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,81 @@
|
||||
import React, { useState, Fragment } from 'react';
|
||||
import GotoQQgroup from '../../../modal/GotoQQgroup'
|
||||
import { Input, Icon } from 'antd'
|
||||
import './shixun-keyword-list.scss'
|
||||
|
||||
function AddonAfter({ callback }) {
|
||||
return <a className='btn-search' onClick={callback}>
|
||||
<Icon type='search' />
|
||||
<span>搜索</span>
|
||||
</a>
|
||||
}
|
||||
export default ({ onChangeLabel, btnUrl, OnSearchInput, checkIfLogin, showLoginDialog, checkIfProfileCompleted, showProfileCompleteDialog, current_user }) => {
|
||||
const [data, setData] = useState({
|
||||
type: 'new',
|
||||
showQQ: false,
|
||||
keyword: '',
|
||||
})
|
||||
|
||||
function onChangeTag(e) {
|
||||
const id = e.target.id
|
||||
setData({ ...data, type: id })
|
||||
onChangeLabel(false, id, "desc")
|
||||
}
|
||||
function onSetKeyword(e) {
|
||||
setData({ ...data, keyword: e.target.value })
|
||||
}
|
||||
|
||||
function callback() {
|
||||
if (keyword) {
|
||||
OnSearchInput(keyword, true)
|
||||
}
|
||||
}
|
||||
|
||||
function setShowQQ(v) {
|
||||
setData({ ...data, showQQ: v })
|
||||
}
|
||||
|
||||
function onNewShiXun() {
|
||||
if (!checkIfLogin()) {
|
||||
showLoginDialog()
|
||||
return
|
||||
}
|
||||
if (!checkIfProfileCompleted()) {
|
||||
showProfileCompleteDialog()
|
||||
return
|
||||
}
|
||||
if (current_user && current_user.is_shixun_marker === false) {
|
||||
setShowQQ(true)
|
||||
return
|
||||
}
|
||||
window.location.href = '/shixuns/new'
|
||||
}
|
||||
|
||||
const { type, keyword, showQQ } = data
|
||||
return (
|
||||
<Fragment>
|
||||
<div className="wrapper">
|
||||
<div className="educontent search-keyword-container">
|
||||
<div className="btn-groups">
|
||||
<a id='new' className={type === 'new' ? 'active' : ''} onClick={onChangeTag} title='最新'>最新</a>
|
||||
<a id='hot' className={type === 'hot' ? 'active' : ''} onClick={onChangeTag} title='最热'>最热</a>
|
||||
</div>
|
||||
<div className='search-container'>
|
||||
<Input onChange={onSetKeyword} value={keyword} addonAfter={<AddonAfter callback={callback} />} defaultValue="" placeholder='请输入课程名称进行搜索' />
|
||||
</div>
|
||||
</div>
|
||||
<a className="btn-new" onClick={onNewShiXun}>
|
||||
<img src={btnUrl} width={40} alt="创建实训" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{
|
||||
showQQ ?
|
||||
<GotoQQgroup goshowqqgtounp={showQQ} setgoshowqqgtounp={setShowQQ}></GotoQQgroup>
|
||||
:
|
||||
""
|
||||
}
|
||||
</Fragment>
|
||||
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
.search-keyword-container {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.ant-input-group-addon {
|
||||
background-color: #4CACFF;
|
||||
}
|
||||
|
||||
.ant-input:focus+.ant-input-group-addon {
|
||||
background-color: #4CACFF !important;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.btn-search {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-groups {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 60px;
|
||||
border-radius: 14px;
|
||||
text-align: center;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
color: #999;
|
||||
background-color: #eee;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #4CACFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-new {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
right: 39px;
|
||||
top: 76px;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
export default ({
|
||||
activeId, id, callback, text
|
||||
}) => {
|
||||
function onClickHandler() {
|
||||
callback(id)
|
||||
}
|
||||
return (
|
||||
<a className={id === activeId ? "shaiItems shixun_repertoire active" : "shaiItems shixun_repertoire"} onClick={onClickHandler}>{text}</a>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
.iconfontShixunSearchBar {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.pt_b_26 {
|
||||
padding: 26px 0px;
|
||||
}
|
||||
|
||||
.diffSelect {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
|
||||
.ant-input-search-button {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.Mousebox {
|
||||
width: 800px !important;
|
||||
}
|
||||
|
||||
.subshaicontent a {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.ant-dropdown {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.shixun_repertoire {
|
||||
cursor: pointer;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item,
|
||||
.ant-dropdown-menu-submenu-title {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
.ant-dropdown-menu-item:hover,
|
||||
.ant-dropdown-menu-submenu-title:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.shaiContent li.shaiItem {
|
||||
padding: 0px 15px;
|
||||
line-height: 32px;
|
||||
height: 32px
|
||||
}
|
||||
|
||||
.shaiTitle {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.shaiItems {
|
||||
padding: 0px 15px;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
float: left;
|
||||
border-radius: 4px;
|
||||
color: #4C4C4C;
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.shaiItems.active {
|
||||
background-color: #4CACFF !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
@ -0,0 +1,101 @@
|
||||
.ml350 {
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
.ml32 {
|
||||
margin-left: 32%;
|
||||
}
|
||||
|
||||
.square-img {
|
||||
min-height: 210px;
|
||||
}
|
||||
|
||||
.task-hide {
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
|
||||
.backFAFAFA {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.demo {
|
||||
width: 500px;
|
||||
background-color: #0dcecb;
|
||||
text-align: center;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.next-loading {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.next-rating-overlay .next-icon {
|
||||
color: #FFA800 !important;
|
||||
}
|
||||
|
||||
.custom-pagination {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.ml425 {
|
||||
margin-left: 42.5%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.shixun-card {
|
||||
|
||||
.edu-tab-con-box {
|
||||
padding: 100px 0px;
|
||||
}
|
||||
|
||||
.ant-modal-body .edu-tab-con-box {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
img.edu-nodata-img {
|
||||
margin: 40px auto 20px;
|
||||
}
|
||||
|
||||
.square-list {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tag-green {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 125px;
|
||||
}
|
||||
|
||||
.tag-org {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.tag-org-name {
|
||||
width: 66px;
|
||||
height: 28px;
|
||||
background: #FF6802;
|
||||
width: 66px;
|
||||
height: 28px;
|
||||
border-radius: 0px 20px 20px 0px;
|
||||
}
|
||||
|
||||
.tag-org-name-test {
|
||||
width: 45px;
|
||||
height: 23px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 19px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.intermediatecenter {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue