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 React, { Component } from 'react';
|
||||||
|
|
||||||
import { SnackbarHOC } from 'educoder';
|
import { SnackbarHOC } from 'educoder';
|
||||||
|
|
||||||
|
|
||||||
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
|
||||||
import Loadable from 'react-loadable';
|
import Loadable from 'react-loadable';
|
||||||
import Loading from '../../Loading';
|
import Loading from '../../Loading';
|
||||||
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
|
||||||
|
|
||||||
const PathsDetail = Loadable({
|
const PathsDetail = Loadable({
|
||||||
loader: () => import('./PathDetail/PathDetailIndex'),
|
loader: () => import('./PathDetail/PathDetailIndex'),
|
||||||
loading:Loading,
|
loading:Loading,
|
||||||
})
|
})
|
||||||
const PathsNew = Loadable({
|
const PathsNew = Loadable({
|
||||||
loader: () => import('./PathNew'),
|
loader: () => import('./PathNew'),
|
||||||
loading:Loading,
|
loading:Loading,
|
||||||
})
|
})
|
||||||
const Statistics = Loadable({
|
const Statistics = Loadable({
|
||||||
loader: () => import('./SchoolStatistics/Statistics'),
|
loader: () => import('./SchoolStatistics/Statistics'),
|
||||||
loading:Loading
|
loading:Loading
|
||||||
})
|
})
|
||||||
|
|
||||||
const ShixunPaths = Loadable({
|
const ShixunPaths = Loadable({
|
||||||
loader: () => import('./ShixunPaths'),
|
loader: () => import('./ShixunPaths'),
|
||||||
loading:Loading,
|
loading:Loading,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
class Index extends Component{
|
class Index extends Component{
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Switch {...this.props}>
|
<Switch {...this.props}>
|
||||||
<Route path="/paths/:pathId/statistics" component = {Statistics} {...this.props} {...this.state}></Route>
|
<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 path="/paths/new" exact
|
||||||
></Route>
|
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||||
<Route path="/paths/:pathId/edit" exact
|
></Route>
|
||||||
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
<Route path="/paths/:pathId/edit" exact
|
||||||
></Route>
|
render={(props)=>(<PathsNew {...this.props} {...this.state} {...props}/>)}
|
||||||
<Route path="/paths/:pathId" exact component = {PathsDetail} {...this.props} {...this.state}></Route>
|
></Route>
|
||||||
<Route exact path="/paths" exact component={ShixunPaths} {...this.props} {...this.state}></Route>
|
|
||||||
</Switch>
|
<Route path="/paths/:pathId" exact
|
||||||
</div>
|
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) );
|
export default SnackbarHOC() ( TPMIndexHOC(Index) );
|
||||||
@ -1,238 +1,241 @@
|
|||||||
import React,{ Component } from "react";
|
import React,{ Component } from "react";
|
||||||
import { Modal,Radio,Input,Tooltip } from "antd";
|
import { Modal,Radio,Input,Tooltip } from "antd";
|
||||||
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
|
||||||
import SendPanel from "./sendPanel.js";
|
import SendPanel from "./sendPanel.js";
|
||||||
import { getImageUrl } from 'educoder';
|
import { getImageUrl } from 'educoder';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import Modals from '../../modals/Modals';
|
import Modals from '../../modals/Modals';
|
||||||
import './DetailTop.css';
|
import './DetailTop.css';
|
||||||
|
|
||||||
const Search = Input.Search;
|
const Search = Input.Search;
|
||||||
const RadioGroup = Radio.Group;
|
const RadioGroup = Radio.Group;
|
||||||
class DetailTop extends Component{
|
class DetailTop extends Component{
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props)
|
super(props)
|
||||||
this.state={
|
this.state={
|
||||||
cardsModalcancel:this.cardsModalcancel,
|
cardsModalcancel:this.cardsModalcancel,
|
||||||
cardsModalsave:this.cardsModalsave,
|
cardsModalsave:this.cardsModalsave,
|
||||||
Modalstype:false,
|
Modalstype:false,
|
||||||
Modalstopval:"",
|
Modalstopval:"",
|
||||||
Modalsbottomval:'',
|
Modalsbottomval:'',
|
||||||
loadtype:false,
|
loadtype:false,
|
||||||
deletepathtype:false,
|
deletepathtype:false,
|
||||||
cardsModalsavetype:false
|
cardsModalsavetype:false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
allow_deletepath=()=>{
|
allow_deletepath=()=>{
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:true,
|
Modalstype:true,
|
||||||
Modalstopval:"是否删除路径?",
|
Modalstopval:"是否删除路径?",
|
||||||
deletepathtype:true
|
deletepathtype:true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
applyissuePath=()=>{
|
applyissuePath=()=>{
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:true,
|
Modalstype:true,
|
||||||
Modalstopval:"发布申请已提交，请等待管理员的审核",
|
Modalstopval:"发布申请已提交，请等待管理员的审核",
|
||||||
Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
|
Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
|
||||||
loadtype:true
|
loadtype:true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
cancelissuePath=()=>{
|
cancelissuePath=()=>{
|
||||||
let pathId=this.props.match.params.pathId;
|
let pathId=this.props.match.params.pathId;
|
||||||
let url ="/paths/"+pathId+"/cancel_publish.json";
|
let url ="/paths/"+pathId+"/cancel_publish.json";
|
||||||
axios.get(url).then((result)=>{
|
axios.get(url).then((result)=>{
|
||||||
if(result.status===200){
|
if(result.status===200){
|
||||||
if(result.data.status===0){
|
if(result.data.status===0){
|
||||||
|
|
||||||
}else if(result.data.status===1){
|
}else if(result.data.status===1){
|
||||||
window.location.href = "/paths/" + result.data.subject_id
|
window.location.href = "/paths/" + result.data.subject_id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
console.log(error);
|
console.log(error);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
reovkissuePath=()=>{
|
reovkissuePath=()=>{
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:true,
|
Modalstype:true,
|
||||||
Modalstopval:"是否确认撤销发布",
|
Modalstopval:"是否确认撤销发布",
|
||||||
Modalsbottomval:"确认后，回退到编辑状态",
|
Modalsbottomval:"确认后，回退到编辑状态",
|
||||||
cardsModalsavetype:true,
|
cardsModalsavetype:true,
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
reovkissuePaths=()=>{
|
reovkissuePaths=()=>{
|
||||||
let pathId=this.props.match.params.pathId;
|
let pathId=this.props.match.params.pathId;
|
||||||
let url ="/paths/"+pathId+"/cancel_has_publish.json";
|
let url ="/paths/"+pathId+"/cancel_has_publish.json";
|
||||||
axios.get(url).then((result)=>{
|
axios.get(url).then((result)=>{
|
||||||
if(result.status===200){
|
if(result.status===200){
|
||||||
if(result.data.status===0){
|
if(result.data.status===0){
|
||||||
|
|
||||||
}else if(result.data.status===1){
|
}else if(result.data.status===1){
|
||||||
this.setState({
|
this.setState({
|
||||||
cardsModalsavetype:false,
|
cardsModalsavetype:false,
|
||||||
loadtype:false,
|
loadtype:false,
|
||||||
deletepathtype:false
|
deletepathtype:false
|
||||||
})
|
})
|
||||||
window.location.href = "/paths/" + result.data.subject_id
|
window.location.href = "/paths/" + result.data.subject_id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
console.log(error);
|
console.log(error);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
cardsModalcancel=()=>{
|
cardsModalcancel=()=>{
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:false,
|
Modalstype:false,
|
||||||
Modalsbottomval:'',
|
Modalsbottomval:'',
|
||||||
loadtype:false,
|
loadtype:false,
|
||||||
deletepathtype:false
|
deletepathtype:false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
cardsModalsave=()=>{
|
cardsModalsave=()=>{
|
||||||
let {loadtype,deletepathtype}=this.state;
|
let {loadtype,deletepathtype}=this.state;
|
||||||
|
|
||||||
//删除路径
|
//删除路径
|
||||||
if(deletepathtype===true){
|
if(deletepathtype===true){
|
||||||
let pathid=this.props.match.params.pathId;
|
let pathid=this.props.match.params.pathId;
|
||||||
const deleteUrl = `/paths/`+pathid+`.json`;
|
const deleteUrl = `/paths/`+pathid+`.json`;
|
||||||
axios.delete(deleteUrl).then((response) => {
|
axios.delete(deleteUrl).then((response) => {
|
||||||
const status = response.data.status
|
const status = response.data.status
|
||||||
if (status === 1) {
|
if (status === 1) {
|
||||||
window.location.href = "/paths";
|
window.location.href = "/paths";
|
||||||
}
|
}
|
||||||
}).catch((error) => {
|
}).catch((error) => {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
//申请发布
|
//申请发布
|
||||||
if(loadtype===true){
|
if(loadtype===true){
|
||||||
|
|
||||||
let pathid=this.props.match.params.pathId;
|
let pathid=this.props.match.params.pathId;
|
||||||
let url ="/paths/"+pathid+"/publish.json";
|
let url ="/paths/"+pathid+"/publish.json";
|
||||||
axios.get(url).then((result)=>{
|
axios.get(url).then((result)=>{
|
||||||
if(result.status===200){
|
if(result.status===200){
|
||||||
if(result.data.status===0){
|
if(result.data.status===0){
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:true,
|
Modalstype:true,
|
||||||
Modalstopval: result.data.message,
|
Modalstopval: result.data.message,
|
||||||
})
|
})
|
||||||
}else if(result.data.status===1){
|
}else if(result.data.status===1){
|
||||||
window.location.reload();
|
window.location.reload();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).catch((error)=>{
|
}).catch((error)=>{
|
||||||
console.log(error);
|
console.log(error);
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
Modalstype:false,
|
Modalstype:false,
|
||||||
Modalsbottomval:''
|
Modalsbottomval:''
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
let{detailInfoList}=this.props;
|
let{detailInfoList}=this.props;
|
||||||
let{Modalstype,Modalstopval,cardsModalcancel,cardsModalsave,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
|
let{Modalstype,Modalstopval,cardsModalcancel,cardsModalsave,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
|
||||||
const radioStyle = {
|
const radioStyle = {
|
||||||
display: 'block',
|
display: 'block',
|
||||||
height: '30px',
|
height: '30px',
|
||||||
lineHeight: '30px',
|
lineHeight: '30px',
|
||||||
};
|
};
|
||||||
|
|
||||||
return(
|
return(
|
||||||
<div className="subhead">
|
<div className="subhead">
|
||||||
<Modals
|
<Modals
|
||||||
modalsType={Modalstype}
|
modalsType={Modalstype}
|
||||||
modalsTopval={Modalstopval}
|
modalsTopval={Modalstopval}
|
||||||
modalsBottomval={Modalsbottomval}
|
modalsBottomval={Modalsbottomval}
|
||||||
modalCancel={cardsModalcancel}
|
modalCancel={cardsModalcancel}
|
||||||
modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
|
modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
|
||||||
loadtype={loadtype}
|
loadtype={loadtype}
|
||||||
>
|
>
|
||||||
</Modals>
|
</Modals>
|
||||||
{
|
{
|
||||||
detailInfoList &&
|
detailInfoList &&
|
||||||
<div className="subhead_content">
|
<div className="subhead_content">
|
||||||
<div className="font-28 color-white clearfix">
|
<div className="font-28 color-white clearfix">
|
||||||
<span className="fl lineh-40">
|
<span className="fl lineh-40">
|
||||||
{detailInfoList.name}
|
{detailInfoList.name}
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||||
<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" data-tip-down="编辑">
|
<Tooltip placement="bottom" title={"编辑"}>
|
||||||
<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
|
<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" >
|
||||||
</Link>:""
|
<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"
|
}
|
||||||
>
|
|
||||||
学习统计
|
{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
|
||||||
</Link>:""
|
<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"} className="user_default_btn edu-greenback-btn fr font-18"
|
||||||
}
|
>
|
||||||
|
学习统计
|
||||||
{ detailInfoList.allow_send === true &&
|
</Link>:""
|
||||||
<SendPanel {...this.props} {...this.state}></SendPanel>
|
}
|
||||||
}
|
|
||||||
|
{ detailInfoList.allow_send === true &&
|
||||||
</div>
|
<SendPanel {...this.props} {...this.state}></SendPanel>
|
||||||
<div className="clearfix mt20">
|
}
|
||||||
{
|
|
||||||
detailInfoList &&
|
</div>
|
||||||
<ul className="fl color-grey-eb pathInfo">
|
<div className="clearfix mt20">
|
||||||
{ 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 &&
|
||||||
{ detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
|
<ul className="fl color-grey-eb pathInfo">
|
||||||
{ detailInfoList.challenges_count!=0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
|
{ detailInfoList.stages_count!=0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
|
||||||
{ detailInfoList.subject_score!=0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
|
{ detailInfoList.stage_shixuns_count!=0 ? <li><span>实训</span><span className="ml5">{ detailInfoList.stage_shixuns_count}</span></li> : ""}
|
||||||
{ detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
|
{ detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
|
||||||
</ul>
|
{ 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> : ""}
|
||||||
<div className="fr pr">
|
{ detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
|
||||||
{detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
|
</ul>
|
||||||
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}
|
<div className="fr pr">
|
||||||
>删除路径</a>:""}
|
{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}
|
||||||
detailInfoList.publish_status===0&&detailInfoList.allow_statistics===true?
|
>删除路径</a>:""}
|
||||||
<a className="user_default_btn user_bluebg_btn font-18 fl ml40 userbluebgfont"
|
|
||||||
onClick={this.applyissuePath}
|
{
|
||||||
>申请发布</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===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>:""
|
detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
|
||||||
}
|
<a className="user_default_btn user_grey_btn font-18 fl pointer ml40"
|
||||||
</div>
|
onClick={this.reovkissuePath}
|
||||||
</div>
|
>撤销发布</a>:""
|
||||||
</div>
|
}
|
||||||
}
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
}
|
||||||
}
|
|
||||||
}
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
export default DetailTop;
|
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