HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

模板预览效果

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.css
View File

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

103
src/pages/exchangepage/template/main.js
View File

@ -1,7 +1,7 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom"; import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button } from 'zent'; import { Button, RadioGroup,RadioButton} from 'zent';
import "./main.less" import "./main.less"
import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Notify } from 'zent'; import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Notify } from 'zent';
import "../../../assets/comm.css" import "../../../assets/comm.css"
@ -19,6 +19,7 @@ import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom}
// </div> // </div>
// </div> // </div>
// </div> // </div>
window.addEventListener('scroll',function(){ window.addEventListener('scroll',function(){
console.log('滚动'); console.log('滚动');
}); });
@ -33,9 +34,18 @@ export default class mytemplate extends React.Component{
sourceIndex:0, sourceIndex:0,
page:1, page:1,
typeIndex:0, typeIndex:0,
showPage:1,//落地页类型
activeHeight:667,
showType:1,
previewData:{},
moudleData:{},
previewwhite:{},
previewexchange:{},
system_template:[], system_template:[],
pageStep:1,
preview_visible:false, preview_visible:false,
topbar:"", topbar:"",
setStyle:{width:'282px',height:'547px'},
top:"", top:"",
toTopshow:false, toTopshow:false,
toTopFlag:false, toTopFlag:false,
@ -47,6 +57,21 @@ export default class mytemplate extends React.Component{
pageChange(e){ 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(){ clickFn(){
} }
@ -214,22 +239,26 @@ export default class mytemplate extends React.Component{
onPreview(row){ onPreview(row){
let rowdata={}; let rowdata={};
if(row.page==1){//白名单 let exchangedata={}
this.setState({moudleData:row});
rowdata.model=row.access_conf.land; rowdata.model=row.access_conf.land;
rowdata.product_list=row.access_conf.product_list; rowdata.product_list=row.access_conf.product_list;
rowdata.product_detail=row.access_conf.product_detail; rowdata.product_detail=row.access_conf.product_detail;
}else if(row.page==3){ exchangedata.model=row.exchange.land;
rowdata.model=row.exchange.land; exchangedata.product_list=row.exchange.product_list;
rowdata.product_list=row.exchange.product_list; exchangedata.product_detail=row.exchange.product_detail;
rowdata.product_detail=row.exchange.product_detail;
}
this.setState({preview_url:row.href}) this.setState({preview_url:row.href})
this.setState({preview_visible:true,showType:row.page})
this.setState({preview_visible:true}) this.setState({previewwhite:rowdata})
this.setState({previewData:rowdata}) this.setState({previewexchange:exchangedata})
if(row.page==1){
this.setState({previewData:rowdata});
}else{
this.setState({previewData:exchangedata});
}
} }
onUse(row){ onUse(row){
console.log(258,row);
let self=this; let self=this;
if(row.edit == 0) if(row.edit == 0)
{ {
@ -287,7 +316,16 @@ export default class mytemplate extends React.Component{
mouseoverFn(){ mouseoverFn(){
this.setState({toTopshow:false}); 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(){ render(){
return( return(
<div className="mytemplate" > <div className="mytemplate" >
@ -423,16 +461,49 @@ export default class mytemplate extends React.Component{
{ {
this.state.preview_visible ? ( this.state.preview_visible ? (
<div> <div>
<div className="modal"></div> <div className="modal" style={{background:'rgba(0,0,0,0.8)'}}></div>
<div className="preview-box"> <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)}} /> <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>
<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>
</div> </div>
) :null ) :null

134
src/pages/exchangepage/template/main.less
View File

@ -2502,32 +2502,38 @@ div.previewclose {
margin-right: 22px margin-right: 22px
} }
.preview-box{ .preview-box{
width: 375px; // width: 375px;
height: 600px; width:900px;
height: 640px;
// padding:30px;
// box-sizing: border-box;
position: fixed; position: fixed;
top: 8%; top: 50%;
left: 50%; left: 50%;
margin-left: -187.5px; margin-left: -450px;
margin-top: -320px;
background-color: #FFFFFF; background-color: #FFFFFF;
z-index: 99999; 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{ .preview-top-back{
padding-left: 10px; padding-right: 20px;
color: #FFFFFF; color: #FFFFFF;
padding-right: 300px; padding-right: 300px;
} }
.preview-top-close{ .preview-top-close{
font-size: 24px; font-size: 24px;
color: #FFFFFF; color: #333;
position: absolute;
padding-right: 30px;
} }
@ -2569,3 +2575,103 @@ div.previewclose {
.toTop-canvas:hover{ .toTop-canvas:hover{
transform: scale(1.1); 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;
}

25
src/pages/exchangepage/template/preview.js
View File

@ -1,7 +1,7 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button } from 'zent'; 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 "../../../assets/comm.css"
import _ from "lodash"; import _ from "lodash";
import "./preview.less" import "./preview.less"
@ -10,7 +10,6 @@ export default class acclist extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state={ this.state={
step:1,
layout:"list", layout:"list",
type:1, type:1,
top_url:"", top_url:"",
@ -30,9 +29,7 @@ export default class acclist extends React.Component{
this.setState({activeshow:false}); this.setState({activeshow:false});
} }
onListChange(e){
this.setState({step:e.target.value })
}
opendescFn(){ opendescFn(){
this.setState({activeshow:true}); this.setState({activeshow:true});
} }
@ -43,15 +40,16 @@ export default class acclist extends React.Component{
this.setState({detailactiveshow:true}); this.setState({detailactiveshow:true});
} }
render(){ render(){
let propsData=this.props.data; let propsData=this.props.data;
console.log('预览', propsData); console.log('预览', this.props);
return( return(
<div> <div className="preview-show">
<div id="preview-bg"> <div id="preview-bg">
{ {
this.state.step==1 ? ( this.props.step==1 ? (
<div className="landpage" style={{background:propsData.model.bg_color}}> <div className="landpage" style={{background:propsData.model.bg_color}}>
<div className="top"> <div className="top">
{ {
@ -77,7 +75,7 @@ export default class acclist extends React.Component{
) : null ) : 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"/> <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}/> !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" > <div className="detailstemplate" tabindex="0" >
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/> <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'}/> <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>
<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>
</div>
) )
} }
} }

38
src/pages/exchangepage/template/preview.less
View File

@ -4,23 +4,30 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.8);
z-index: 8; z-index: 8;
} }
.preview-box{ .preview-box{
.preview-top-close{ .preview-top-close{
padding-left: 28px; padding-left: 28px;
position: absolute;
top: 30px;
right: 30px;
font-size: 22px;
cursor: pointer;
font-weight: bold;
} }
} }
#preview-bg{ #preview-bg{
z-index: 10; z-index: 10;
height: 600px; height: 100%;
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
background: #fff; background: #fff;
box-shadow: 0 0 1px #C1C1C1; box-shadow: 0 0 1px #C1C1C1;
.goodstemplate, .detailstemplate{ .goodstemplate, .detailstemplate{
height: 600px; height:100%;
} }
.editor-main{ .editor-main{
top: 0; top: 0;
@ -47,7 +54,12 @@
margin: 0; margin: 0;
} }
.viewdetailBtn{ .viewdetailBtn{
top:660px; top:50%;
width:200px;
left: 50%;
margin-left: -350px;
height: 40px;
margin-top: 220px!important;
} }
img{ img{
width: 100%; width: 100%;
@ -117,11 +129,17 @@
align-items: center; align-items: center;
} }
.verifycode{ .previewComponent .verifycode{
width: 83px !important; width: 21%!important;
height: 43px; height: 18%;
position: absolute; position: absolute;
right: 20px; right: 9%;
top: 80px; top: 39%;
z-index: 666; border-radius:32px;
z-index: 555;
}
.preview-box .previewComponent .exchageBtn{
width: 90%;
margin: 30px 5%;
} }