Merge branch 'dev_aliyun' of http://bdgit.educoder.net/Hjqreturn/educoder into dev_aliyun
cxt
6 years ago
commit
b55d1514b0
@ -1,52 +1,58 @@
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { SnackbarHOC } from 'educoder';
|
||||
|
||||
|
||||
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../Loading';
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
|
||||
const PathsDetail = Loadable({
|
||||
loader: () => import('./PathDetail/PathDetailIndex'),
|
||||
loading:Loading,
|
||||
})
|
||||
const PathsNew = Loadable({
|
||||
loader: () => import('./PathNew'),
|
||||
loading:Loading,
|
||||
})
|
||||
const Statistics = Loadable({
|
||||
loader: () => import('./SchoolStatistics/Statistics'),
|
||||
loading:Loading
|
||||
})
|
||||
|
||||
const ShixunPaths = Loadable({
|
||||
loader: () => import('./ShixunPaths'),
|
||||
loading:Loading,
|
||||
})
|
||||
|
||||
|
||||
class Index extends Component{
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Switch {...this.props}>
|
||||
<Route path="/paths/:pathId/statistics" component = {Statistics} {...this.props} {...this.state}></Route>
|
||||
<Route path="/paths/new" exact
|
||||
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||
></Route>
|
||||
<Route path="/paths/:pathId/edit" exact
|
||||
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||
></Route>
|
||||
<Route path="/paths/:pathId" exact component = {PathsDetail} {...this.props} {...this.state}></Route>
|
||||
<Route exact path="/paths" exact component={ShixunPaths} {...this.props} {...this.state}></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { SnackbarHOC } from 'educoder';
|
||||
|
||||
|
||||
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../Loading';
|
||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||
|
||||
const PathsDetail = Loadable({
|
||||
loader: () => import('./PathDetail/PathDetailIndex'),
|
||||
loading:Loading,
|
||||
})
|
||||
const PathsNew = Loadable({
|
||||
loader: () => import('./PathNew'),
|
||||
loading:Loading,
|
||||
})
|
||||
const Statistics = Loadable({
|
||||
loader: () => import('./SchoolStatistics/Statistics'),
|
||||
loading:Loading
|
||||
})
|
||||
|
||||
const ShixunPaths = Loadable({
|
||||
loader: () => import('./ShixunPaths'),
|
||||
loading:Loading,
|
||||
})
|
||||
|
||||
|
||||
class Index extends Component{
|
||||
constructor(props) {
|
||||
super(props)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Switch {...this.props}>
|
||||
<Route path="/paths/:pathId/statistics" component = {Statistics} {...this.props} {...this.state}></Route>
|
||||
|
||||
<Route path="/paths/new" exact
|
||||
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||
></Route>
|
||||
<Route path="/paths/:pathId/edit" exact
|
||||
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||
></Route>
|
||||
|
||||
<Route path="/paths/:pathId" exact
|
||||
render={(props)=>(<PathsDetail {...this.props} {...this.state} {...props}/>)}
|
||||
></Route>
|
||||
|
||||
{/*<Route path="/paths/:pathId" exact component = {PathsDetail} {...this.props} {...this.state}></Route>*/}
|
||||
<Route exact path="/paths" exact component={ShixunPaths} {...this.props} {...this.state}></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default SnackbarHOC() ( TPMIndexHOC(Index) );
|
||||
@ -1,238 +1,241 @@
|
||||
import React,{ Component } from "react";
|
||||
import { Modal,Radio,Input,Tooltip } from "antd";
|
||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||
import SendPanel from "./sendPanel.js";
|
||||
import { getImageUrl } from 'educoder';
|
||||
import axios from 'axios';
|
||||
import Modals from '../../modals/Modals';
|
||||
import './DetailTop.css';
|
||||
|
||||
const Search = Input.Search;
|
||||
const RadioGroup = Radio.Group;
|
||||
class DetailTop extends Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
cardsModalcancel:this.cardsModalcancel,
|
||||
cardsModalsave:this.cardsModalsave,
|
||||
Modalstype:false,
|
||||
Modalstopval:"",
|
||||
Modalsbottomval:'',
|
||||
loadtype:false,
|
||||
deletepathtype:false,
|
||||
cardsModalsavetype:false
|
||||
}
|
||||
}
|
||||
|
||||
allow_deletepath=()=>{
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"是否删除路径?",
|
||||
deletepathtype:true
|
||||
})
|
||||
}
|
||||
|
||||
applyissuePath=()=>{
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"发布申请已提交，请等待管理员的审核",
|
||||
Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
|
||||
loadtype:true
|
||||
})
|
||||
}
|
||||
|
||||
cancelissuePath=()=>{
|
||||
let pathId=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathId+"/cancel_publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
|
||||
}else if(result.data.status===1){
|
||||
window.location.href = "/paths/" + result.data.subject_id
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
reovkissuePath=()=>{
|
||||
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"是否确认撤销发布",
|
||||
Modalsbottomval:"确认后，回退到编辑状态",
|
||||
cardsModalsavetype:true,
|
||||
})
|
||||
|
||||
}
|
||||
reovkissuePaths=()=>{
|
||||
let pathId=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathId+"/cancel_has_publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
|
||||
}else if(result.data.status===1){
|
||||
this.setState({
|
||||
cardsModalsavetype:false,
|
||||
loadtype:false,
|
||||
deletepathtype:false
|
||||
})
|
||||
window.location.href = "/paths/" + result.data.subject_id
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
cardsModalcancel=()=>{
|
||||
this.setState({
|
||||
Modalstype:false,
|
||||
Modalsbottomval:'',
|
||||
loadtype:false,
|
||||
deletepathtype:false
|
||||
})
|
||||
}
|
||||
|
||||
cardsModalsave=()=>{
|
||||
let {loadtype,deletepathtype}=this.state;
|
||||
|
||||
//删除路径
|
||||
if(deletepathtype===true){
|
||||
let pathid=this.props.match.params.pathId;
|
||||
const deleteUrl = `/paths/`+pathid+`.json`;
|
||||
axios.delete(deleteUrl).then((response) => {
|
||||
const status = response.data.status
|
||||
if (status === 1) {
|
||||
window.location.href = "/paths";
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
//申请发布
|
||||
if(loadtype===true){
|
||||
|
||||
let pathid=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathid+"/publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval: result.data.message,
|
||||
})
|
||||
}else if(result.data.status===1){
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
|
||||
}
|
||||
this.setState({
|
||||
Modalstype:false,
|
||||
Modalsbottomval:''
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
let{detailInfoList}=this.props;
|
||||
let{Modalstype,Modalstopval,cardsModalcancel,cardsModalsave,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
|
||||
const radioStyle = {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
};
|
||||
|
||||
return(
|
||||
<div className="subhead">
|
||||
<Modals
|
||||
modalsType={Modalstype}
|
||||
modalsTopval={Modalstopval}
|
||||
modalsBottomval={Modalsbottomval}
|
||||
modalCancel={cardsModalcancel}
|
||||
modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
|
||||
loadtype={loadtype}
|
||||
>
|
||||
</Modals>
|
||||
{
|
||||
detailInfoList &&
|
||||
<div className="subhead_content">
|
||||
<div className="font-28 color-white clearfix">
|
||||
<span className="fl lineh-40">
|
||||
{detailInfoList.name}
|
||||
|
||||
</span>
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||
<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" data-tip-down="编辑">
|
||||
<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
|
||||
</Link>:""
|
||||
}
|
||||
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||
<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"} className="user_default_btn edu-greenback-btn fr font-18"
|
||||
>
|
||||
学习统计
|
||||
</Link>:""
|
||||
}
|
||||
|
||||
{ detailInfoList.allow_send === true &&
|
||||
<SendPanel {...this.props} {...this.state}></SendPanel>
|
||||
}
|
||||
|
||||
</div>
|
||||
<div className="clearfix mt20">
|
||||
{
|
||||
detailInfoList &&
|
||||
<ul className="fl color-grey-eb pathInfo">
|
||||
{ detailInfoList.stages_count!=0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
|
||||
{ detailInfoList.stage_shixuns_count!=0 ? <li><span>实训</span><span className="ml5">{ detailInfoList.stage_shixuns_count}</span></li> : ""}
|
||||
{ detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
|
||||
{ detailInfoList.challenges_count!=0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
|
||||
{ detailInfoList.subject_score!=0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
|
||||
{ detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
|
||||
</ul>
|
||||
}
|
||||
<div className="fr pr">
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
|
||||
className={detailInfoList.publish_status===-1?"fl font-18 color-white mt5 mr20":"fl font-18 color-white mt5"}
|
||||
style={{opacity: '0.6'}} onClick={this.allow_deletepath}
|
||||
>删除路径</a>:""}
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===0&&detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_bluebg_btn font-18 fl ml40 userbluebgfont"
|
||||
onClick={this.applyissuePath}
|
||||
>申请发布</a>:""
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===1 && detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40"
|
||||
onClick={this.cancelissuePath}
|
||||
>撤销申请</a>:""
|
||||
}
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40"
|
||||
onClick={this.reovkissuePath}
|
||||
>撤销发布</a>:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
import React,{ Component } from "react";
|
||||
import { Modal,Radio,Input,Tooltip } from "antd";
|
||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||
import SendPanel from "./sendPanel.js";
|
||||
import { getImageUrl } from 'educoder';
|
||||
import axios from 'axios';
|
||||
import Modals from '../../modals/Modals';
|
||||
import './DetailTop.css';
|
||||
|
||||
const Search = Input.Search;
|
||||
const RadioGroup = Radio.Group;
|
||||
class DetailTop extends Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
cardsModalcancel:this.cardsModalcancel,
|
||||
cardsModalsave:this.cardsModalsave,
|
||||
Modalstype:false,
|
||||
Modalstopval:"",
|
||||
Modalsbottomval:'',
|
||||
loadtype:false,
|
||||
deletepathtype:false,
|
||||
cardsModalsavetype:false
|
||||
}
|
||||
}
|
||||
|
||||
allow_deletepath=()=>{
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"是否删除路径?",
|
||||
deletepathtype:true
|
||||
})
|
||||
}
|
||||
|
||||
applyissuePath=()=>{
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"发布申请已提交，请等待管理员的审核",
|
||||
Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
|
||||
loadtype:true
|
||||
})
|
||||
}
|
||||
|
||||
cancelissuePath=()=>{
|
||||
let pathId=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathId+"/cancel_publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
|
||||
}else if(result.data.status===1){
|
||||
window.location.href = "/paths/" + result.data.subject_id
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
reovkissuePath=()=>{
|
||||
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval:"是否确认撤销发布",
|
||||
Modalsbottomval:"确认后，回退到编辑状态",
|
||||
cardsModalsavetype:true,
|
||||
})
|
||||
|
||||
}
|
||||
reovkissuePaths=()=>{
|
||||
let pathId=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathId+"/cancel_has_publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
|
||||
}else if(result.data.status===1){
|
||||
this.setState({
|
||||
cardsModalsavetype:false,
|
||||
loadtype:false,
|
||||
deletepathtype:false
|
||||
})
|
||||
window.location.href = "/paths/" + result.data.subject_id
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
cardsModalcancel=()=>{
|
||||
this.setState({
|
||||
Modalstype:false,
|
||||
Modalsbottomval:'',
|
||||
loadtype:false,
|
||||
deletepathtype:false
|
||||
})
|
||||
}
|
||||
|
||||
cardsModalsave=()=>{
|
||||
let {loadtype,deletepathtype}=this.state;
|
||||
|
||||
//删除路径
|
||||
if(deletepathtype===true){
|
||||
let pathid=this.props.match.params.pathId;
|
||||
const deleteUrl = `/paths/`+pathid+`.json`;
|
||||
axios.delete(deleteUrl).then((response) => {
|
||||
const status = response.data.status
|
||||
if (status === 1) {
|
||||
window.location.href = "/paths";
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
}
|
||||
|
||||
//申请发布
|
||||
if(loadtype===true){
|
||||
|
||||
let pathid=this.props.match.params.pathId;
|
||||
let url ="/paths/"+pathid+"/publish.json";
|
||||
axios.get(url).then((result)=>{
|
||||
if(result.status===200){
|
||||
if(result.data.status===0){
|
||||
this.setState({
|
||||
Modalstype:true,
|
||||
Modalstopval: result.data.message,
|
||||
})
|
||||
}else if(result.data.status===1){
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
}).catch((error)=>{
|
||||
console.log(error);
|
||||
})
|
||||
|
||||
}
|
||||
this.setState({
|
||||
Modalstype:false,
|
||||
Modalsbottomval:''
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
let{detailInfoList}=this.props;
|
||||
let{Modalstype,Modalstopval,cardsModalcancel,cardsModalsave,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
|
||||
const radioStyle = {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
};
|
||||
|
||||
return(
|
||||
<div className="subhead">
|
||||
<Modals
|
||||
modalsType={Modalstype}
|
||||
modalsTopval={Modalstopval}
|
||||
modalsBottomval={Modalsbottomval}
|
||||
modalCancel={cardsModalcancel}
|
||||
modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
|
||||
loadtype={loadtype}
|
||||
>
|
||||
</Modals>
|
||||
{
|
||||
detailInfoList &&
|
||||
<div className="subhead_content">
|
||||
<div className="font-28 color-white clearfix">
|
||||
<span className="fl lineh-40">
|
||||
{detailInfoList.name}
|
||||
|
||||
</span>
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||
<Tooltip placement="bottom" title={"编辑"}>
|
||||
<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" >
|
||||
<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
|
||||
</Link>
|
||||
</Tooltip>
|
||||
:""
|
||||
}
|
||||
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||
<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"} className="user_default_btn edu-greenback-btn fr font-18"
|
||||
>
|
||||
学习统计
|
||||
</Link>:""
|
||||
}
|
||||
|
||||
{ detailInfoList.allow_send === true &&
|
||||
<SendPanel {...this.props} {...this.state}></SendPanel>
|
||||
}
|
||||
|
||||
</div>
|
||||
<div className="clearfix mt20">
|
||||
{
|
||||
detailInfoList &&
|
||||
<ul className="fl color-grey-eb pathInfo">
|
||||
{ detailInfoList.stages_count!=0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
|
||||
{ detailInfoList.stage_shixuns_count!=0 ? <li><span>实训</span><span className="ml5">{ detailInfoList.stage_shixuns_count}</span></li> : ""}
|
||||
{ detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
|
||||
{ detailInfoList.challenges_count!=0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
|
||||
{ detailInfoList.subject_score!=0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
|
||||
{ detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
|
||||
</ul>
|
||||
}
|
||||
<div className="fr pr">
|
||||
{detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
|
||||
className={detailInfoList.publish_status===-1?"fl font-18 color-white mt5 mr20":"fl font-18 color-white mt5"}
|
||||
style={{opacity: '0.6'}} onClick={this.allow_deletepath}
|
||||
>删除路径</a>:""}
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===0&&detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_bluebg_btn font-18 fl ml40 userbluebgfont"
|
||||
onClick={this.applyissuePath}
|
||||
>申请发布</a>:""
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===1 && detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40"
|
||||
onClick={this.cancelissuePath}
|
||||
>撤销申请</a>:""
|
||||
}
|
||||
|
||||
{
|
||||
detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
|
||||
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40"
|
||||
onClick={this.reovkissuePath}
|
||||
>撤销发布</a>:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default DetailTop;
|
||||
@ -0,0 +1,104 @@
|
||||
import React, { Component } from 'react';
|
||||
import "./secureCode.css";
|
||||
|
||||
/**
|
||||
* An TextInput with Icon and check
|
||||
* 带图标检查的输入框
|
||||
*/
|
||||
class CheckInputysl extends Component {
|
||||
constructor(){
|
||||
super();
|
||||
this.state = {
|
||||
isMove:false,
|
||||
start:0,
|
||||
moveLength:0,
|
||||
clear:false,
|
||||
move:0,
|
||||
width:0
|
||||
};
|
||||
this.onMouseUp = this.onMouseUp.bind(this);
|
||||
this.onMouseDown = this.onMouseDown.bind(this);
|
||||
this.onMouseMove = this.onMouseMove.bind(this);
|
||||
}
|
||||
componentDidMount() {
|
||||
let dragHandler = document.getElementById("dragHandler");
|
||||
dragHandler.addEventListener("mousedown", this.onMouseDown);
|
||||
}
|
||||
onMouseDown(e){
|
||||
console.log("28");
|
||||
document.addEventListener("mousemove", this.onMouseMove);
|
||||
document.addEventListener("mouseup", this.onMouseUp);
|
||||
let event=e||window.event;
|
||||
this.setState({
|
||||
isMove:true,
|
||||
start:event.pageX
|
||||
});
|
||||
}
|
||||
onMouseUp(e){
|
||||
console.log("38");
|
||||
let event=e||window.event;
|
||||
this.setState({
|
||||
isMove:false,
|
||||
});
|
||||
let drag = window.getComputedStyle(this.verifyDOM);
|
||||
let handler = window.getComputedStyle(this.handlerDOM);
|
||||
let moveLength = event.clientX-this.verifyDOM.offsetLeft - Number.parseInt(handler.width) / 2;
|
||||
// console.log(drag.width);
|
||||
let maxWidth = Number.parseInt(drag.width) - Number.parseInt(handler.width);
|
||||
console.log("moveLength="+moveLength);
|
||||
console.log("maxWidth="+maxWidth);
|
||||
if(moveLength <= maxWidth){ //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
|
||||
this.setState({
|
||||
move:0,
|
||||
width:0
|
||||
});
|
||||
document.removeEventListener("mousemove", this.onMouseMove);
|
||||
document.removeEventListener("mouseup", this.onMouseUp);
|
||||
}
|
||||
if(this.props.onDrag){
|
||||
this.props.onDrag(this.state.clear);
|
||||
}
|
||||
}
|
||||
onMouseMove(e){
|
||||
console.log("63");
|
||||
let event=e||window.event;
|
||||
let drag = window.getComputedStyle(this.verifyDOM);
|
||||
let handler = window.getComputedStyle(this.handlerDOM);
|
||||
let moveLength = event.clientX-this.verifyDOM.offsetLeft - Number.parseInt(handler.width) / 2;
|
||||
let maxWidth = Number.parseInt(drag.width) - Number.parseInt(handler.width);
|
||||
if(this.state.isMove){
|
||||
if(moveLength<0){
|
||||
moveLength=0
|
||||
}else if(moveLength >= maxWidth){
|
||||
moveLength=maxWidth;
|
||||
this.removeMouseMove();
|
||||
}
|
||||
this.setState({
|
||||
move:moveLength,
|
||||
width:moveLength
|
||||
});
|
||||
}
|
||||
}
|
||||
//清空事件
|
||||
removeMouseMove(){
|
||||
this.setState({
|
||||
clear:true
|
||||
});
|
||||
let dragHandler = document.getElementById("dragHandler");
|
||||
dragHandler.removeEventListener("mousedown", this.onMouseDown);
|
||||
document.removeEventListener("mousemove", this.onMouseMove);
|
||||
document.removeEventListener("mouseup", this.onMouseUp);
|
||||
this.props.dragOkCallback();
|
||||
}
|
||||
render(){
|
||||
return (
|
||||
<div id="drag" className="nl-drag-verify" ref={dom => {this.verifyDOM = dom}} style={{"color":this.state.clear ? "#fff" : "#252535"}}>
|
||||
<div className="drag_bg" ref={dom => {this.bgDOM = dom}} style={{"width":this.state.width}}></div>
|
||||
<div className="drag_text">{this.state.clear ? "验证通过" : "拖动滑块验证"}</div>
|
||||
<div id="dragHandler" className={this.state.clear? "handler handler_ok_bg" : "handler handler_bg"} style={{"left":this.state.move}} ref={dom => {this.handlerDOM = dom}}></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ( CheckInputysl );
|
||||
@ -0,0 +1,42 @@
|
||||
#drag{
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
min-width: 300px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
}
|
||||
#drag .handler{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: move;
|
||||
}
|
||||
.handler_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;}
|
||||
|
||||
.handler_ok_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}
|
||||
|
||||
#drag .drag_bg{
|
||||
background-color: #7ac23c;
|
||||
height: 38px;
|
||||
width: 0px;
|
||||
}
|
||||
#drag .drag_text{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
-o-user-select:none;
|
||||
-ms-user-select:none;
|
||||
}
|
||||
|
||||
/* }*/
|
||||
/*//.handler_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;}*/
|
||||
/*//.handler_ok_bg{ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}*/
|
||||
Loading…
Reference in new issue