diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 2103076f..1b86e380 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/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(); @@ -766,19 +783,46 @@ getLandingdata(val){ this.state.showType==3?this.state.activeNavStatus==1?this.getTitle(c)} landbgcolor={(c)=>this.getlandbgcolor(c)} landftcolor={(c)=>this.getlandftcolor(c)} setbanner={(e)=>this.getLandingdata(e)} />:this.state.activeNavStatus==2?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)}/>: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?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?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)}/>: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 ? ( -
-
-
-
-
- {this.onClose(e)}} /> -
- -
-
- ) :null - } + this.state.preview_visible ? ( +
+
+
+ {this.onClose(e)}} /> +
+
+
+
+ +
+ +
+ +
+ +
+

落地页预览:

+
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500
+
+ +
+

页面类型:

+ {this.onpageChange(e)} } value={this.state.showPage} > + 落地页 + 列表页 + 详情页 + + +
+
+
+ +
+
+
+ ) :null + + + } { this.state.loading_visible?(
diff --git a/src/pages/exchangepage/main/main.js b/src/pages/exchangepage/main/main.js index 5e9c6fb7..0d9f5850 100644 --- a/src/pages/exchangepage/main/main.js +++ b/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}) @@ -505,25 +524,46 @@ export default class acclist extends React.Component { /div> < /TabPage> { - this.state.preview_visible ? ( + this.state.preview_visible ? ( +
+
+
+ {this.onClose(e)}} /> +
+
+
+
+ +
+ +
+ +
+ +
+

落地页预览:

+
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500
+
+ +
+

页面类型:

+ {this.onpageChange(e)} } value={this.state.showPage} > + 落地页 + 列表页 + 详情页 + -
-
-
-
-
{this.onBack(e)}} >
- {this.onClose(e)}} /> -
- - - - -
-
- - - ) : null - } +
+
+
+ +
+
+
+ ) :null + + + }
) diff --git a/src/pages/exchangepage/template/main.js b/src/pages/exchangepage/template/main.js index 4b9568ee..35495468 100644 --- a/src/pages/exchangepage/template/main.js +++ b/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" -//
-// 行业： -//
-//
-// 全部 -//
-//
-// 通用 -//
-//
-//
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{