落地页预览和新建编辑预览

src/pages/exchangepage/edittemplate/main.js

@@ -64,7 +64,11 @@ export default class edittemplate extends React.Component{
 		isExchangePage:false,
 		isSystemModel:false,
 		activeNavStatus:1,
-		headfile:''
+		headfile:'',
+		activeHeight:667,
+		pageStep:1,
+		showPage:1,
+		setStyle:{width:'282px',height:'547px'},
 		}
 		this.canvasImgDom=this.canvasImgDom.bind(this);
 		this.canvasImgDomScr=this.canvasImgDomScr.bind(this);
@@ -83,6 +87,10 @@ getLandingdata(val){
 				}
 		},500)
 	}
+	onpageChange(e){
+		this.setState({showPage:e.target.value});
+		this.setState({pageStep:e.target.value});
+	}
 
    componentWillMount(e){
 	  let href=window.location.href;
@@ -419,7 +427,7 @@ getLandingdata(val){
 
 	onPreview(){
 		this.setState({previewData:this.state})
-		this.setState({preview_visible:true})
+		this.setState({preview_visible:true,pageStep:1,showPage:1})
 	}
 	//获取商品详情数据
 
@@ -582,7 +590,16 @@ getLandingdata(val){
 		    });
 			
 			};
-		
+			handleSize(width,height){
+				let style={width:width+'px',height:height+'px'};
+				switch(height){
+					case 667:style={width:'282px',height:'547px'};break;
+					case 750:style={width:'282px',height:'609px'};break;
+					case 812:style={width:'262px',height:'612px'};break;
+					case 500:style={width:'358px',height:'500px'};break;
+				}
+				this.setState({setStyle:style,activeHeight:height});
+			}
 			componentWillUnmount(){
 			  if(document.querySelector('canvas')){
 					document.querySelector('canvas').remove();
@@ -768,16 +785,43 @@ getLandingdata(val){
 			   {
 		 this.state.preview_visible ? (
 		 <div>
-					 	 <div className="modal model44"></div>
+		 	 <div className="modal model44" style={{background:'rgba(0,0,0,0.8)'}}></div>
 		<div className="preview-box">
-			   		 <div className="preview-top-bar">
-			   		 <div className="preview-top-back"  ></div>
 		 <Icon type="close" className="preview-top-close"  onClick={(e)=>{this.onClose(e)}}  />
+		 <div style={{height:'100%'}}>
+		 <div className="previewComponent">
+		 <div className="previewbody">
+		 <div className="ctorSize" style={this.state.setStyle}>
+		 <PreviewItem data={this.state.previewData}  ref="preview" step={this.state.pageStep}/>
+		 </div>
+		 
+		 </div>
+	
+		 <div className="left-choice">
+		 
+		 <div className="exchange-page">
+		 <p className="preview-setting">落地页预览:</p>
+		 <section class="screen-size-selector"><div  className={this.state.activeHeight==667?'size active':'size'} onClick={()=>this.handleSize(375,667)}>主流机型<span>375x667</span></div><div className={this.state.activeHeight==750?'size active':'size'}  onClick={()=>this.handleSize(375,750)}>全面屏<span>375x750</span></div><div className={this.state.activeHeight==812?'size active':'size'} onClick={()=>this.handleSize(375,812)}>刘海屏<span>375x812</span></div><div className={this.state.activeHeight==500?'size active':'size'} onClick={()=>this.handleSize(375,500)}>小屏手机<span>375x500</span></div></section>
+		 </div>
+		 
+		 <div className="exchange-page">
+		<p>页面类型:</p>
+			<RadioGroup onChange={(e)=>{this.onpageChange(e)}  } value={this.state.showPage} >
+					<RadioButton value={1} >落地页</RadioButton>
+					<RadioButton value={2} >列表页</RadioButton>
+					<RadioButton   value={3}>详情页</RadioButton>
+		</RadioGroup>
+
+		 </div>
+		 </div>
+		 </div>
+
 		 </div>
-			   		<PreviewItem data={this.state.previewData} ref="preview" />
 		</div>
 		</div>
 		) :null
+		
+		
 	  }            
 				 {
 					 this.state.loading_visible?(

src/pages/exchangepage/main/main.js

@@ -8,7 +8,7 @@ import {
 	Link
 } from "react-router-dom";
 import {
-	Button
+	Button,RadioButton
 } from 'zent';
 import "./main.less"
 import {
@@ -16,6 +16,7 @@ import {
 	Swiper,
 	Dropdown,
 	DropdownPosition,
+	RadioGroup,
 	DropdownClickTrigger,
 	Icon,
 	MenuItem,
@@ -154,6 +155,10 @@ export default class acclist extends React.Component {
 			dataCount: 0,
 			preview_visible:false,
 			preview_url:"",
+			activeHeight:667,
+			pageStep:1,
+			showPage:1,
+			setStyle:{width:'282px',height:'547px'},
 			
 		}
 	}
@@ -162,7 +167,21 @@ export default class acclist extends React.Component {
 
 
 	}
-
+	//预览改变大小
+	handleSize(width,height){
+		let style={width:width+'px',height:height+'px'};
+		switch(height){
+			case 667:style={width:'282px',height:'547px'};break;
+			case 750:style={width:'282px',height:'609px'};break;
+			case 812:style={width:'262px',height:'612px'};break;
+			case 500:style={width:'358px',height:'500px'};break;
+		}
+		this.setState({setStyle:style,activeHeight:height});
+	}
+	onpageChange(e){
+		this.setState({showPage:e.target.value});
+		this.setState({pageStep:e.target.value});
+	}
 	getTableList(data) {
 		if(this.state.key_word)
 		{
@@ -299,7 +318,7 @@ export default class acclist extends React.Component {
 			rowdata.product_detail=row.exchange.product_detail;
 		}
 
-		this.setState({preview_visible:true})
+		this.setState({preview_visible:true,pageStep:1,showPage:1})
 		this.setState({previewData:rowdata})
 		this.setState({preview_url:row.href})
 
@@ -506,23 +525,44 @@ export default class acclist extends React.Component {
 			/TabPage> 
 			{
 		 this.state.preview_visible ? (
-
 		 <div>
-			 	 <div className="modal"></div>
+		 	 <div className="modal model44" style={{background:'rgba(0,0,0,0.8)'}}></div>
 		<div className="preview-box">
-			 <div className="preview-top-bar">
-			 <div className="preview-top-back" onClick={(e)=>{this.onBack(e)}} ></div>
 		 <Icon type="close" className="preview-top-close"  onClick={(e)=>{this.onClose(e)}}  />
+		 <div style={{height:'100%'}}>
+		 <div className="previewComponent">
+		 <div className="previewbody">
+		 <div className="ctorSize" style={this.state.setStyle}>
+		 <PreviewItem data={this.state.previewData}  ref="preview" step={this.state.pageStep}/>
 		 </div>
-			<PreviewItem data={this.state.previewData}  ref="preview" />
 		 
+		 </div>
 	
+		 <div className="left-choice">
+		 
+		 <div className="exchange-page">
+		 <p className="preview-setting">落地页预览:</p>
+		 <section class="screen-size-selector"><div  className={this.state.activeHeight==667?'size active':'size'} onClick={()=>this.handleSize(375,667)}>主流机型<span>375x667</span></div><div className={this.state.activeHeight==750?'size active':'size'}  onClick={()=>this.handleSize(375,750)}>全面屏<span>375x750</span></div><div className={this.state.activeHeight==812?'size active':'size'} onClick={()=>this.handleSize(375,812)}>刘海屏<span>375x812</span></div><div className={this.state.activeHeight==500?'size active':'size'} onClick={()=>this.handleSize(375,500)}>小屏手机<span>375x500</span></div></section>
+		 </div>
+		 
+		 <div className="exchange-page">
+		<p>页面类型:</p>
+			<RadioGroup onChange={(e)=>{this.onpageChange(e)}  } value={this.state.showPage} >
+					<RadioButton value={1} >落地页</RadioButton>
+					<RadioButton value={2} >列表页</RadioButton>
+					<RadioButton   value={3}>详情页</RadioButton>
+		</RadioGroup>
 
 		 </div>
 		 </div>
+		 </div>
 
-			
+		 </div>
+		</div>
+		</div>
 		) :null
+		
+		
 	  }     
 			
 			</div>

src/pages/exchangepage/template/main.js

@@ -8,17 +8,6 @@ import "../../../assets/comm.css"
 
 import PreviewItem from "./preview.js"
 import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom} from "../../../assets/api.js"
-// <div className="block-selector-list">
-// 	         <span className="block-selector-list-label">行业：</span>
-// 	         <div className="block-selector">
-// 	          <div className="block-selector-item active">
-// 	           全部
-// 	          </div>
-// 	          <div className="block-selector-item">
-// 	           通用
-// 	          </div>
-// 	         </div>
-// 	        </div>
 
 window.addEventListener('scroll',function(){
 	console.log('滚动');
@@ -106,6 +95,7 @@ export default class mytemplate extends React.Component{
 				let scrolHeight=event.target.scrollTop;
 				if(scrolHeight>300){
 					this.setState({toTopFlag:true});
+					this.setState({toTopshow:false});
 					let isBottom=event.target.scrollHeight-event.target.clientHeight;
 					if(isBottom==event.target.scrollTop){
  
@@ -166,10 +156,8 @@ export default class mytemplate extends React.Component{
 			window.removeEventListener('scroll', this.bindHandleScroll);
 	}
 	createBox(){
-		// let link = window.location.href.replace(window.location.hash,"#/edittemplate");
 		sessionStorage.removeItem('pageInfo');
 		sessionStorage.setItem('mouldType',1);
-		// window.open(link, "_blank")
 		window.location.href= "/#/edittemplate"
 	}
 	typeClick(e){
@@ -274,8 +262,6 @@ export default class mytemplate extends React.Component{
 		 sessionStorage.setItem("isSort",0)
 		 sessionStorage.setItem('mouldType',1);
 			sessionStorage.setItem('pageChange',0);
-					//  let link = window.location.href.replace(window.location.hash,"#/edittemplate");
-					//  window.open(link, "_blank")
 			if(type){
 				window.location.href= "/#/edittemplate?type="+type;
 			}else{
@@ -289,10 +275,7 @@ export default class mytemplate extends React.Component{
 		}
 		else{
 			sessionStorage.setItem("pageInfo", JSON.stringify(row))
-			// let link = window.location.href.replace(window.location.hash,"#/home/edittemplate");
-			// window.open(link, "_blank")
 			sessionStorage.setItem('mouldType',1);
-			// window.location.href='/#/edittemplate';
 			if(type){
 				window.location.href= "/#/edittemplate?type="+type;
 			}else{