落地页预览和新建编辑预览
This commit is contained in:
red-deng-deng
parent
1a5b64ce16
commit
5b5b74881d
|
|
@ -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();
|
||||
|
|
@ -766,19 +783,46 @@ getLandingdata(val){
|
|||
this.state.showType==3?this.state.activeNavStatus==1?<LandingForm settitle={(c)=>this.getTitle(c)} landbgcolor={(c)=>this.getlandbgcolor(c)} landftcolor={(c)=>this.getlandftcolor(c)} setbanner={(e)=>this.getLandingdata(e)} />:this.state.activeNavStatus==2?<GoodsForm setactiveType={c=>this.getactiveTypeFn(c)} seteditorHtml={c=>this.getEditorHtmlFn(c)} setButtonbgcolor={(c)=>{this.getButtonbgcolor(c)}} setButtoncolor={(c)=>{this.getButtoncolor(c)}} setbottomImg={c=>this.getgoodsbottomimgFn(c)} setbanner={(c)=>this.getGoodsbanner(c)} setarrayType={(c)=>this.getarrayType(c)}/>:<DetailsPage seteditorHtml={c=>this.getdetailEditorHtmlFn(c)} setdetailActive={c=>this.getdetailActiveFn(c)} setdetailbgc={c=>{this.getdetailbgcolor(c)}} setbottomImg={c=>this.getbottomimgFn(c)} setdetailftc={c=>this.getdetailfont_color(c)}/>
|
||||
:this.state.activeNavStatus==1?<WhiteLand landTitle={this.state.model.title} settitle={(c)=>this.getTitle(c)} mouldType={this.state.mouldType} landbgcolor={(c)=>this.getlandbgcolor(c)} landftcolor={(c)=>this.getlandftcolor(c)} setbanner={(e)=>this.getLandingdata(e)} />:this.state.activeNavStatus==2?<Whitegoods setactiveType={c=>this.getactiveTypeFn(c)} seteditorHtml={c=>this.getEditorHtmlFn(c)} setButtonbgcolor={(c)=>{this.getButtonbgcolor(c)}} setButtoncolor={(c)=>{this.getButtoncolor(c)}} setbottomImg={c=>this.getgoodsbottomimgFn(c)} setbanner={(c)=>this.getGoodsbanner(c)} setarrayType={(c)=>this.getarrayType(c)}/>:<Whitedetails seteditorHtml={c=>this.getdetailEditorHtmlFn(c)} setdetailActive={c=>this.getdetailActiveFn(c)} setdetailbgc={c=>{this.getdetailbgcolor(c)}} setbottomImg={c=>this.getbottomimgFn(c)} setdetailftc={c=>this.getdetailfont_color(c)}/>}
|
||||
{
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
<div className="modal model44"></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>
|
||||
<PreviewItem data={this.state.previewData} ref="preview" />
|
||||
</div>
|
||||
</div>
|
||||
) :null
|
||||
}
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
<div className="modal model44" style={{background:'rgba(0,0,0,0.8)'}}></div>
|
||||
<div className="preview-box">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
) :null
|
||||
|
||||
|
||||
}
|
||||
{
|
||||
this.state.loading_visible?(
|
||||
<div className="loadingShow">
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
||||
|
|
@ -505,25 +524,46 @@ export default class acclist extends React.Component {
|
|||
/div> <
|
||||
/TabPage>
|
||||
{
|
||||
this.state.preview_visible ? (
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
<div className="modal model44" style={{background:'rgba(0,0,0,0.8)'}}></div>
|
||||
<div className="preview-box">
|
||||
<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 className="modal"></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>
|
||||
<PreviewItem data={this.state.previewData} ref="preview" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) :null
|
||||
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue