模板预览效果

This commit is contained in:
red-deng-deng 2022-01-25 19:09:17 +08:00
parent 191fa2da54
commit 3b0a3bd09f
5 changed files with 254 additions and 71 deletions

View File

@ -191,6 +191,3 @@ resize: none;
z-index: 6;
}
.zent-image-upload-list{
width: 500px !important;
}

View File

@ -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

View File

@ -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;
}

View File

@ -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>
)
}
}

View File

@ -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%;
}