模板预览效果
This commit is contained in:
red-deng-deng
parent
191fa2da54
commit
3b0a3bd09f
|
|
@ -191,6 +191,3 @@ resize: none;
|
|||
z-index: 6;
|
||||
|
||||
}
|
||||
.zent-image-upload-list{
|
||||
width: 500px !important;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { HashRouter as Router, Route, Link } from "react-router-dom";
|
||||
import { Button } from 'zent';
|
||||
import { Button, RadioGroup,RadioButton} from 'zent';
|
||||
import "./main.less"
|
||||
import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Notify } from 'zent';
|
||||
import "../../../assets/comm.css"
|
||||
|
|
@ -19,6 +19,7 @@ import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom}
|
|||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
window.addEventListener('scroll',function(){
|
||||
console.log('滚动');
|
||||
});
|
||||
|
|
@ -33,9 +34,18 @@ export default class mytemplate extends React.Component{
|
|||
sourceIndex:0,
|
||||
page:1,
|
||||
typeIndex:0,
|
||||
showPage:1,//落地页类型
|
||||
activeHeight:667,
|
||||
showType:1,
|
||||
previewData:{},
|
||||
moudleData:{},
|
||||
previewwhite:{},
|
||||
previewexchange:{},
|
||||
system_template:[],
|
||||
pageStep:1,
|
||||
preview_visible:false,
|
||||
topbar:"",
|
||||
setStyle:{width:'282px',height:'547px'},
|
||||
top:"",
|
||||
toTopshow:false,
|
||||
toTopFlag:false,
|
||||
|
|
@ -47,6 +57,21 @@ export default class mytemplate extends React.Component{
|
|||
pageChange(e){
|
||||
|
||||
}
|
||||
onpageChange(e){
|
||||
this.setState({showPage:e.target.value});
|
||||
this.setState({pageStep:e.target.value});
|
||||
}
|
||||
onTypeChange(e){
|
||||
this.setState({showType:e.target.value,pageStep:1,showPage:1});
|
||||
if(e.target.value==1){//白名单
|
||||
let previewwhite={...this.state.previewwhite}
|
||||
this.setState({previewData:previewwhite});
|
||||
}else if(e.target.value==3){//兑换码
|
||||
let previewexchange={...this.state.previewexchange}
|
||||
this.setState({previewexchange:previewexchange});
|
||||
this.setState({previewData:previewexchange});
|
||||
}
|
||||
}
|
||||
clickFn(){
|
||||
|
||||
}
|
||||
|
|
@ -214,22 +239,26 @@ export default class mytemplate extends React.Component{
|
|||
|
||||
onPreview(row){
|
||||
let rowdata={};
|
||||
if(row.page==1){//白名单
|
||||
let exchangedata={}
|
||||
this.setState({moudleData:row});
|
||||
rowdata.model=row.access_conf.land;
|
||||
rowdata.product_list=row.access_conf.product_list;
|
||||
rowdata.product_detail=row.access_conf.product_detail;
|
||||
}else if(row.page==3){
|
||||
rowdata.model=row.exchange.land;
|
||||
rowdata.product_list=row.exchange.product_list;
|
||||
rowdata.product_detail=row.exchange.product_detail;
|
||||
}
|
||||
exchangedata.model=row.exchange.land;
|
||||
exchangedata.product_list=row.exchange.product_list;
|
||||
exchangedata.product_detail=row.exchange.product_detail;
|
||||
this.setState({preview_url:row.href})
|
||||
|
||||
this.setState({preview_visible:true})
|
||||
this.setState({previewData:rowdata})
|
||||
|
||||
this.setState({preview_visible:true,showType:row.page})
|
||||
this.setState({previewwhite:rowdata})
|
||||
this.setState({previewexchange:exchangedata})
|
||||
if(row.page==1){
|
||||
this.setState({previewData:rowdata});
|
||||
}else{
|
||||
this.setState({previewData:exchangedata});
|
||||
}
|
||||
}
|
||||
onUse(row){
|
||||
console.log(258,row);
|
||||
let self=this;
|
||||
if(row.edit == 0)
|
||||
{
|
||||
|
|
@ -287,7 +316,16 @@ export default class mytemplate extends React.Component{
|
|||
mouseoverFn(){
|
||||
this.setState({toTopshow:false});
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div className="mytemplate" >
|
||||
|
|
@ -423,16 +461,49 @@ export default class mytemplate extends React.Component{
|
|||
{
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="modal" 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>
|
||||
<p>落地页类型:</p>
|
||||
<RadioGroup onChange={(e)=>{this.onTypeChange(e)} } value={this.state.showType} >
|
||||
<RadioButton value={3} >兑换码</RadioButton>
|
||||
<RadioButton value={1} >白名单</RadioButton>
|
||||
<RadioButton disabled={true} value={2}>立减金</RadioButton>
|
||||
</RadioGroup>
|
||||
|
||||
</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="touse">
|
||||
<Button type = "primary"
|
||||
onClick={(e)=>{ this.onUse(this.state.moudleData) }}> 使用 </Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) :null
|
||||
|
|
|
|||
|
|
@ -2502,32 +2502,38 @@ div.previewclose {
|
|||
margin-right: 22px
|
||||
}
|
||||
.preview-box{
|
||||
width: 375px;
|
||||
height: 600px;
|
||||
// width: 375px;
|
||||
width:900px;
|
||||
height: 640px;
|
||||
// padding:30px;
|
||||
// box-sizing: border-box;
|
||||
position: fixed;
|
||||
top: 8%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -187.5px;
|
||||
margin-left: -450px;
|
||||
margin-top: -320px;
|
||||
background-color: #FFFFFF;
|
||||
z-index: 99999;
|
||||
}
|
||||
.preview-top-bar{
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
background-color: #cacacb;
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
.preview-top-bar{
|
||||
// width: 100%;
|
||||
// height: 30px;
|
||||
// line-height: 30px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: baseline;
|
||||
.preview-top-back{
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
color: #FFFFFF;
|
||||
padding-right: 300px;
|
||||
}
|
||||
.preview-top-close{
|
||||
font-size: 24px;
|
||||
color: #FFFFFF;
|
||||
|
||||
color: #333;
|
||||
position: absolute;
|
||||
padding-right: 30px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -2569,3 +2575,103 @@ div.previewclose {
|
|||
.toTop-canvas:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.main-preview{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
.previewComponent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// height: calc(100% - 200px);
|
||||
}
|
||||
.previewbody{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.ctorSize{
|
||||
width: 375px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.preview-show{
|
||||
height: 100%;
|
||||
}
|
||||
.left-choice{
|
||||
flex: 1;
|
||||
margin-left: 30px;
|
||||
// height: 300px;
|
||||
height: 100%;
|
||||
padding-top: 50px;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.exchange-page{
|
||||
margin-bottom: 20px;
|
||||
p{
|
||||
padding: 15px 0;
|
||||
font-weight: bold;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.screen-size-selector {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom:10px;
|
||||
margin-top: 20px;
|
||||
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif ;
|
||||
}
|
||||
.screen-size-selector{
|
||||
width: 408px;
|
||||
}
|
||||
.screen-size-selector .size.active {
|
||||
background: rgba(41,107,239,.08);
|
||||
border: 1px solid #2096f5;
|
||||
color: #296bef;
|
||||
font-weight: bold;
|
||||
}
|
||||
.screen-size-selector .size {
|
||||
border: 1px solid #dcdee3;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
height: 48px;
|
||||
line-height: 20px;
|
||||
padding-top: 6px;
|
||||
text-align: center;
|
||||
width: 96px;
|
||||
}
|
||||
.screen-size-selector .size span {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
opacity: .5;
|
||||
font-weight: bold;
|
||||
}
|
||||
.touse{
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.zent-btn[data-zv="9.11.0"] {
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.left-choice .zent-radio-button--checked[data-zv="9.11.0"]{
|
||||
background: rgba(41, 107, 239, 0.08)!important;
|
||||
border: 1px solid #2096f5;
|
||||
color: #296bef;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { Button } from 'zent';
|
||||
import {RadioGroup,RadioButton,Input,openDialog ,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
|
||||
import {RadioGroup,RadioButton,Input,openDialog,Dialog,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
|
||||
import "../../../assets/comm.css"
|
||||
import _ from "lodash";
|
||||
import "./preview.less"
|
||||
|
|
@ -10,7 +10,6 @@ export default class acclist extends React.Component{
|
|||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
step:1,
|
||||
layout:"list",
|
||||
type:1,
|
||||
top_url:"",
|
||||
|
|
@ -30,9 +29,7 @@ export default class acclist extends React.Component{
|
|||
this.setState({activeshow:false});
|
||||
}
|
||||
|
||||
onListChange(e){
|
||||
this.setState({step:e.target.value })
|
||||
}
|
||||
|
||||
opendescFn(){
|
||||
this.setState({activeshow:true});
|
||||
}
|
||||
|
|
@ -43,15 +40,16 @@ export default class acclist extends React.Component{
|
|||
|
||||
this.setState({detailactiveshow:true});
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
let propsData=this.props.data;
|
||||
console.log('预览', propsData);
|
||||
console.log('预览', this.props);
|
||||
return(
|
||||
<div>
|
||||
<div className="preview-show">
|
||||
<div id="preview-bg">
|
||||
{
|
||||
this.state.step==1 ? (
|
||||
this.props.step==1 ? (
|
||||
<div className="landpage" style={{background:propsData.model.bg_color}}>
|
||||
<div className="top">
|
||||
{
|
||||
|
|
@ -77,7 +75,7 @@ export default class acclist extends React.Component{
|
|||
) : null
|
||||
}
|
||||
{
|
||||
this.state.step==2?this.state.activeshow&&propsData.product_list.describe.type==2&&propsData.product_list.describe.content?<Descteplate backPrepage={c=>this.showactiveIcon(c)} goodsdata={propsData.product_list}/>:<div className="goodstemplate" tabindex="0" >
|
||||
this.props.step==2?this.state.activeshow&&propsData.product_list.describe.type==2&&propsData.product_list.describe.content?<Descteplate backPrepage={c=>this.showactiveIcon(c)} goodsdata={propsData.product_list}/>:<div className="goodstemplate" tabindex="0" >
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
{
|
||||
!propsData.product_list.top_image?<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>:<img className="topbanner" src={propsData.product_list.top_image}/>
|
||||
|
|
@ -98,7 +96,7 @@ export default class acclist extends React.Component{
|
|||
}
|
||||
|
||||
{
|
||||
this.state.step==3 ? this.state.detailactiveshow&&propsData.product_detail.describe.type==2&&propsData.product_detail.describe.content?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
|
||||
this.props.step==3 ? this.state.detailactiveshow&&propsData.product_detail.describe.type==2&&propsData.product_detail.describe.content?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
|
||||
<div className="detailstemplate" tabindex="0" >
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
<img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodsbigPic.png'}/>
|
||||
|
|
@ -117,15 +115,8 @@ export default class acclist extends React.Component{
|
|||
|
||||
}
|
||||
</div>
|
||||
<div className="footbar">
|
||||
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.step}>
|
||||
<RadioButton value={1}>落地页</RadioButton>
|
||||
<RadioButton value={2}>列表页</RadioButton>
|
||||
<RadioButton value={3}>详情页</RadioButton>
|
||||
</RadioGroup>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -4,23 +4,30 @@
|
|||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
z-index: 8;
|
||||
}
|
||||
.preview-box{
|
||||
.preview-top-close{
|
||||
padding-left: 28px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
#preview-bg{
|
||||
z-index: 10;
|
||||
height: 600px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 1px #C1C1C1;
|
||||
.goodstemplate, .detailstemplate{
|
||||
height: 600px;
|
||||
height:100%;
|
||||
}
|
||||
.editor-main{
|
||||
top: 0;
|
||||
|
|
@ -47,7 +54,12 @@
|
|||
margin: 0;
|
||||
}
|
||||
.viewdetailBtn{
|
||||
top:660px;
|
||||
top:50%;
|
||||
width:200px;
|
||||
left: 50%;
|
||||
margin-left: -350px;
|
||||
height: 40px;
|
||||
margin-top: 220px!important;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
|
|
@ -117,11 +129,17 @@
|
|||
align-items: center;
|
||||
|
||||
}
|
||||
.verifycode{
|
||||
width: 83px !important;
|
||||
height: 43px;
|
||||
.previewComponent .verifycode{
|
||||
width: 21%!important;
|
||||
height: 18%;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 80px;
|
||||
z-index: 666;
|
||||
right: 9%;
|
||||
top: 39%;
|
||||
border-radius:32px;
|
||||
z-index: 555;
|
||||
}
|
||||
|
||||
.preview-box .previewComponent .exchageBtn{
|
||||
width: 90%;
|
||||
margin: 30px 5%;
|
||||
}
|
||||
Loading…
Reference in New Issue