Merge branch 'white_line' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into white_line

src/pages/exchangepage/edittemplate/main.js

@@ -152,7 +152,7 @@ getLandingdata(val){
 		if(!this.state.model.top_image)
 		{
 			Notify.clear();
-			Notify.error("请上落地页顶部banner")
+			Notify.error("请上传落地页顶部banner")
 			this.setState({activeNavStatus:1});
 			return;
 		}

src/pages/exchangepage/template/main.js

@@ -19,7 +19,9 @@ import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom}
 // 	          </div>
 // 	         </div>
 // 	        </div>
-
+window.addEventListener('scroll',function(){
+	console.log('滚动');
+});
 export default class mytemplate extends React.Component{
   constructor(props){
     super(props)
@@ -29,11 +31,15 @@ export default class mytemplate extends React.Component{
 	  typeList:[{id:-1,title:"全部"}],
 		tabIndex:0,
 		sourceIndex:0,
+		page:1,
 		typeIndex:0,
 		system_template:[],
 		preview_visible:false,
 		topbar:"",
 		 top:"",
+		 toTopshow:false,
+		 toTopFlag:false,
+		 endreq:true,
 		 center:"",
 		  bottom:""
     }
@@ -45,9 +51,7 @@ export default class mytemplate extends React.Component{
    
 	}
 	   componentDidMount(e){
-			  //监听滚动条滚动事件
+			  
-				let component=document.querySelector('.mytemplate');
- 
 			 let self=this;
 		
 			getThemeType().then(res=>{
@@ -62,7 +66,7 @@ export default class mytemplate extends React.Component{
 			  })
 			  }).catch(err=>{
 			});
-			let data={page:1,limit:10000}
+			let data={page:1,limit:10}
 			getSystemTemplate(data).then(res=>{
 			  handelResponse(res,(req,msg)=>{
 				this.setState({system_template:req.data})
@@ -72,13 +76,67 @@ export default class mytemplate extends React.Component{
 			  })
 			  }).catch(err=>{
 			});
-			
+			//监听滚动条滚动事件
+			this.refs.component.addEventListener('scroll',(event)=>{
+				let scrolHeight=event.target.scrollTop;
+				if(scrolHeight>300){
+					this.setState({toTopFlag:true});
+					let isBottom=event.target.scrollHeight-event.target.clientHeight;
+					if(isBottom==event.target.scrollTop){
+ 
+						let endreq=this.state.endreq;
+						if(endreq){
+							let page=this.state.page;//请求
+							page=page+1;
+							console.log(91,this.state);
+							let data={page:page,limit:10}
+							if(this.state.sourceIndex==0){//系统模板
+								if(this.state.typeIndex!=0){
+									data.type_id=this.state.typeIndex;
+								}
+								let preResult=this.state.system_template;
+								getSystemTemplate(data).then(res=>{
+								handelResponse(res,(req,msg)=>{
+									if(req.data.length>0){
+										let addres=preResult.concat(req.data)
+										this.setState({system_template:addres,page:page})
+									}else{
+										this.setState({endreq:false});
+									}
+									
+								},(err)=>{
+								
+							})
+							}).catch(err=>{
+						});
+							}else{
+								let preResult=this.state.system_template;
+								getTheme(data).then(res=>{
+									handelResponse(res,(req,msg)=>{
+										if(req.data.length>0){
+											let addres=preResult.concat(req.data)
+											this.setState({system_template:addres,page:page})
+										}else{
+											this.setState({endreq:false});
+										}
+								
+										 
+									},(err)=>{
+									 
+									})
+									}).catch(err=>{
+								});
+							}
+							
+						}
+					}
+				}else{
+					this.setState({toTopFlag:false});
+				}
+			})
 		   
 		 }
-		 bindHandleScroll = (event) => {
+ 
-			console.log('滚动事件');
-			console.log('滚动事件',event);
-    }
 		 componentWillUnmount() {
 			window.removeEventListener('scroll', this.bindHandleScroll);
 	}
@@ -90,25 +148,30 @@ export default class mytemplate extends React.Component{
 		window.location.href= "/#/edittemplate"
 	}
 	typeClick(e){
-		this.setState({typeIndex:e})
+		this.setState({typeIndex:e,page:1,endreq:true})
-		if(e == -1)//全部
+		if(e ==0)//全部
 		{
-			let data={page:1,limit:10000}
+			let data={page:1,limit:10}
 			getSystemTemplate(data).then(res=>{
 			  handelResponse(res,(req,msg)=>{
 				  console.log(req)
-				this.setState({system_template:req.data})
+				 this.setState({system_template:req.data})
+				 if(req.data.length<10){
+					this.setState({endreq:false});
+				 }
 			  },(err)=>{
 				 
 			  })
 			  }).catch(err=>{
 			});
 		}else{
-			let data={type_id:e,page:1,limit:10000}
+			let data={type_id:e,page:1,limit:10}
 			getSystemTemplate(data).then(res=>{
 			  handelResponse(res,(req,msg)=>{
 				this.setState({system_template:req.data})
-			     
+				if(req.data.length<10){
+					this.setState({endreq:false});
+				 }
 			  },(err)=>{
 				 
 			  })
@@ -118,14 +181,14 @@ export default class mytemplate extends React.Component{
 		}
 	}
 	sourceClick(e){
-		this.setState({sourceIndex:e})
+		this.setState({sourceIndex:e,page:1,endreq:true})
-
+   
 		if(e == 0)
 		{
-			let data={page:1,limit:10000}
+			let data={page:1,limit:10}
 			getSystemTemplate(data).then(res=>{
 			  handelResponse(res,(req,msg)=>{
-				  console.log(req)
+ 
 				this.setState({system_template:req.data})
 			     
 			  },(err)=>{
@@ -135,7 +198,7 @@ export default class mytemplate extends React.Component{
 			});
 		}
 		else{
-			let data={page:1,limit:10000}
+			let data={page:1,limit:10}
 			getTheme(data).then(res=>{
 			  handelResponse(res,(req,msg)=>{
 				this.setState({system_template:req.data})
@@ -206,6 +269,12 @@ export default class mytemplate extends React.Component{
 			sessionStorage.setItem('pageChange',0);
 		}
 		
+	}
+	toTop(){
+		this.refs.component.scrollTo({
+			top:0,    
+			behavior:'smooth',
+	});
 	}
 	onBack(){
 	  this.refs.preview.popPage()
@@ -213,12 +282,17 @@ export default class mytemplate extends React.Component{
 	onClose(){
 		this.setState({preview_visible:false})
 	}
+	mouseupFn(){
+		this.setState({toTopshow:true});
+	}
+	mouseoverFn(){
+		this.setState({toTopshow:false});
+	}
  
-
   render(){
     return(
-      <div className="mytemplate">
+      <div className="mytemplate" >
-	   <div className="scroller-page" >
+	   <div className="scroller-page" ref="component" >
 	 
 	    <div className="scroller-page-banner basic">
 	     <div className="scroller-page-banner-content">
@@ -230,7 +304,7 @@ export default class mytemplate extends React.Component{
 	     </div>
 	     <div className="scroller-page-banner-mask"></div>
 	    </div> 
-	    <div className="scroller-page-body">
+	    <div className="scroller-page-body" >
 	     <div className="scroller-page-body-content">
 	      <div className="scroller-page-body-content-inner">
 	       <div className="xj-simple-tabs scroller-page-tabs">
@@ -327,19 +401,16 @@ export default class mytemplate extends React.Component{
 			  			 )
 			  			})
 			  }
-			  
-			  
-		
-			
-		
-	         
-	
-			 
-			 
-			 
-			  
 	         </div>
-					 <div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>到底部了哟,没有了哦</div>
+					 {
+						 this.state.toTopFlag?<div ref="toTop" className="toTop-canvas" onMouseEnter={this.mouseupFn.bind(this)} onMouseLeave={this.mouseoverFn.bind(this)}>
+						 <img className="toTopBtn" onClick={this.toTop.bind(this)} src={this.state.toTopshow?'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/totopbtn.svg':'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/willtotop.svg'} alt=""/>
+						 </div>:null
+					 }
+					 
+					 <div style={{textAlign:'center',color:'#BBC1D2',marginBottom:'15px'}}>
+					 {this.state.endreq?'正在加载中...':'到底部了哟,没有了哦'}
+					 </div>
 	        </div>
 	       </div>
 	      </div>

src/pages/exchangepage/template/main.less

@@ -2253,7 +2253,7 @@ div.previewclose {
 }
 
 .scroller-page {
-	height: 100%;
+	height: 95vh;
 	overflow: auto;
 	position: relative;
 	top: -2px
@@ -2430,7 +2430,7 @@ div.previewclose {
 
 .scroller-page-body {
 	height: 100%;
-	overflow: scroll;
+	// overflow: scroll;
 	padding-top: 150px;
 	position: relative
 }
@@ -2548,3 +2548,24 @@ div.previewclose {
 	background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
 	z-index: 1;
 }
+.toTop-canvas{
+	width: 60px;
+	height: 60px;
+	border-radius: 60px;
+	background: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 1px 2px 3px 3px #eee;
+	position: fixed;
+	right: 2vh;
+	bottom:2vh;
+	cursor: pointer;
+}
+.toTopBtn{
+	width: 40px;
+	fill-opacity: 0.2;
+}
+.toTop-canvas:hover{
+	transform: scale(1.1);
+}