编辑器落地页整改,布局搭建

This commit is contained in:
red-deng-deng 2022-01-04 19:49:14 +08:00
parent 80c3ebfdcf
commit 31456c8cbc
6 changed files with 314 additions and 91 deletions

View File

@ -7,6 +7,7 @@ import {Redirect} from "react-router-dom";
import login from './pages/login/login';
import home from './pages/home/home';
import edittemplate from './pages/exchangepage/edittemplate/main.js'
import errpage from "./pages/errpage/errpage"
export default class App extends Component {
state = {
@ -22,6 +23,7 @@ export default class App extends Component {
return (
<Router>
<Route path="/login" exact={true} component={login} />
<Route path="/edittemplate" exact={true} component={edittemplate} />
<Route path="/home" component={home} />
<Route exact={true} path="/" render={
()=> (

View File

@ -127,3 +127,6 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
color: #296bef;
cursor: pointer;
}
.fz16{
font-size: 16px;
}

View File

@ -3,6 +3,7 @@ import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button ,ColorPicker,ImageUpload,Input ,onUpload} from 'zent';
import "./main.less"
import "../../../assets/comm.css"
import { Notify,Switch ,RadioGroup,RadioButton,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu ,BlockLoading} from 'zent';
import Ipt from "../../../components/input/main"
import Form from "../../../components/form/main"
@ -16,11 +17,12 @@ export default class edittemplate extends React.Component{
this.state={
color:"#ffffff",
text:"等我两分钟",
showType:1,//兑换码/白名单/立减金
model:{
id:"",
images:[],
images:['https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220104/1a07d79a196132fe2fc5a5400c79d23c.png','https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220104/7cf0833811a67b38bd03df45a33afa27.png'],
thumb:null,
title:"",
title:"落地页标题",
client:1,
bg_color:"",
button_color:"",
@ -32,7 +34,10 @@ export default class edittemplate extends React.Component{
pageInfo:null,
isExchangePage:false,
isSystemModel:false,
thumbfile:''
thumbfile:'',
activityType:'',
activeNavStatus:1,
headfile:''
}
this.canvasImgDom=this.canvasImgDom.bind(this);
this.canvasImgDomScr=this.canvasImgDomScr.bind(this);
@ -290,12 +295,16 @@ export default class edittemplate extends React.Component{
onListChange(e){
console.log(77788899)
let model = this.state.model;
model.list = e.target.value;
this.setState({model:model})
}
onmodelChange(e){
this.setState({showType:e.target.value})
}
onactivityChange(e){
this.setState({activityType:e.target.value})
}
onPreview(){
this.setState({previewData:this.state.model})
@ -346,7 +355,6 @@ export default class edittemplate extends React.Component{
model.top_img = files[0].src;
this.setState({model:model})
}
};
@ -413,6 +421,27 @@ export default class edittemplate extends React.Component{
return imgres;
}
//自动生成截图
createdImgFn(){
let self=this;
let canvasEle=this.canvasImgDom;  //获取元素
html2canvas(canvasEle, {
width:375, //设置canvas的宽度
scale: 1,//缩放
useCORS: true,
height:canvasEle.offsetHeight,
}).then((canvas) => {
//处理你生成的canvas
document.body.appendChild(canvas);
console.log('开始截图');
let a = document.createElement('a');
let file = canvas.toDataURL( );
let thumbimg= self.dataURLtoFile(file,'image/png');
self.setState({headfile:file});
})
}
dataURLtoFile(dataURI, type) {
let binary = atob(dataURI.split(',')[1]);
let array = [];
@ -428,9 +457,31 @@ export default class edittemplate extends React.Component{
canvasImgDomScr(e){
this.canvascrol=e;
}
activeChoice(c){
this.setState({activeNavStatus:c});
this.createdImgFn();
}
//向下箭头
reduceFn(){
let item=this.state.activeNavStatus;
item-=1;
if(item<1){
item=1;
}
this.setState({activeNavStatus:item});
}
//向上箭头
addFn(){
let item=this.state.activeNavStatus;
item++;
if(item>3){
item=3;
}
this.setState({activeNavStatus:item});
}
onUpload = (file, report) => {
let self=this;
console.log('上传头像',file);
return new Promise((resolve, reject) => {
let path = ""
@ -497,16 +548,73 @@ export default class edittemplate extends React.Component{
return(
<div className="edittemplate">
<div className="topHeader">
<div className="dflexaj">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepage.png"/>
<span className="fz16">编辑落地页</span>
</div>
<div>
<Button type="Info" onClick={(e)=>{this.onPreview(e)}} >预览</Button>
<Button type="primary" onClick={(e)=>{this.onSave(e)}} >保存</Button>
</div>
</div>
<div id="leftComponent">
<div className="showTypechice">
<RadioGroup onChange={(e)=>{this.onmodelChange(e)} } value={this.state.showType}>
<RadioButton value={1}>兑换码</RadioButton>
<RadioButton value={2}>白名单</RadioButton>
<RadioButton disabled={true} value={3}>立减金</RadioButton>
</RadioGroup>
</div>
{/* 兑换码 */}
<div className="ascriptionCode">
<div className="item">
<h4>落地页:</h4>
<div onClick={()=>this.activeChoice(1)} className={this.state.activeNavStatus==1?'activeNav thumbheader' :'thumbheader'}>
<h3>{this.state.model.title}</h3>
<img src={this.state.model.images[0]}/>
<img src={this.state.model.images[1]}/>
</div></div>
<div className="item">
<h4>商品列表页:</h4>
<div onClick={()=>this.activeChoice(2)} className={this.state.activeNavStatus==2?'activeNav thumbheader' :'thumbheader'}>
</div>
</div>
<div className="item">
<h4>商品详情页:</h4>
<div onClick={()=>this.activeChoice(3)} className={this.state.activeNavStatus==3?'activeNav thumbheader' :'thumbheader'}>
</div>
</div>
</div>
</div>
<div className="xj-wrapper floatFix" style={{ "z-index": "1"}}>
<div className="xj-center" style={{ "margin-left": "288px"}}>
{
this.state.activeNavStatus==1?(
<div>
<img className="perimg" onClick={this.reduceFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/pre.png'}/>
<img className="nextimg" onClick={this.addFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png'}/>
</div>
): this.state.activeNavStatus==2?(
<div>
<img className="perimg" onClick={this.reduceFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'}/>
<img className="nextimg" onClick={this.addFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png'}/>
</div>
):<div>
<img className="perimg" onClick={this.reduceFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'}/>
<img className="nextimg" onClick={this.addFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'}/>
</div>
}
<div className="editor-main" tabindex="0" ref={this.canvasImgDom}>
<div className="xj-heatmap-btn">
<div className="heatmap-btn-wrapper">
<div className="xj-heatmap-icon">
</div>
<div className="xj-heatmap-text">热力预估</div>
</div>
</div>
<div className="xj-viewer-title">
<span className="xj-viewer-title-line">{this.state.model.title}</span>
</div>
@ -534,39 +642,26 @@ export default class edittemplate extends React.Component{
</div>
<div className="xj-center-fixed" style={{ "margin-left": "288px"}}>
</div>
<div className="xj-rightPanel">
<div className="RootEditor">
<div className="schema-editor-container" data-editor-role="XJWebsitePage">
<div className="control page-title-control">
{
this.state.isSystemModel ?
( <h1>系统模板-落地页设置</h1>) : ( <h1>-</h1>)
( <h1>落地页设置</h1>) : ( <h1></h1>)
}
<div className="page-title-control--content">
</div>
</div>
<div className="btn-tools">
<Button type="primary" onClick={(e)=>{this.onSave(e)}} >保存</Button>
<Button type="Info" onClick={(e)=>{this.onPreview(e)}} >预览</Button>
</div>
<div className="editor-title control title-control">
</div>
<div style={{width:"92%","margin":"0 auto","overflow":"auto", "maxHeight":"700px"}}>
<div style={{marginTop:'15px',fontWeight:'bold'}}>落地页页面设置:</div>
<div style={{width:"92%","margin":"0 auto","overflow":"auto", "maxHeight":"100%"}}>
<div style={{fontWeight:'bold'}}>基础设置</div>
<Form model={this.state.model} rules={rules} ref="form1">
<FormItem labelname="标题" prop="title" id="title" labelwidth="80px">
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
<Ipt onChange={(e)=>{
let model2 = this.state.model;
model2.title = e;
@ -577,16 +672,34 @@ export default class edittemplate extends React.Component{
model2.title = "";
this.setState({model:model2})
}}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'250px'} alignment={'left'}/>
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'}/>
</FormItem>
<FormItem labelname="字体颜色" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItem">
<ColorPicker color={this.state.model.bg_color} onChange={(e)=>{this.colorChange(e)}} />
<span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.bg_color}</span>
<div style={{marginTop:'20px',fontWeight:'bold'}}>样式</div>
<FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac">
<span className="cicle"></span>
<span className="cicle cicle1"></span>
<span className="cicle cicle2"></span>
{/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.button_color}</span> */}
<span className="selfset" >自定义</span>
</div>
</FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac">
<span className="cicle"></span>
<span className="cicle cicle6"></span>
<span className="cicle cicle3"></span>
<span className="cicle cicle4"></span>
<span className="cicle cicle5"></span>
{/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.bg_color}</span> */}
<span className="selfset" >自定义</span>
</div>
<FormItem labelname="落地页banner" prop="top" id="top" labelwidth="80px">
</FormItem>
<div style={{marginTop:'20px',fontWeight:'bold'}}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
@ -603,7 +716,7 @@ export default class edittemplate extends React.Component{
</FormItem>
<FormItem labelname="落地页输入框" prop="center" id="center" labelwidth="80px">
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
@ -620,7 +733,13 @@ export default class edittemplate extends React.Component{
/>
</FormItem>
<FormItem labelname="落地页使用说明" prop="bottom" id="bottom" labelwidth="80px">
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e)=>{this.onactivityChange(e)} } value={this.state.activityType}>
<RadioButton value={1}>图片</RadioButton>
<RadioButton value={2}>富文本</RadioButton>
</RadioGroup>
</FormItem>
<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
@ -635,45 +754,6 @@ export default class edittemplate extends React.Component{
/>
</FormItem>
{/* <FormItem labelname="" prop="thumb" id="thumb" labelwidth="80px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e)=>{this.onUploadChange3(e)} }
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.thumb ? [{'src':this.state.model.thumb}] : null}
/>
</FormItem> */}
<div style={{marginTop:'15px',fontWeight:'bold'}}>商品列表页面设置:</div>
<FormItem labelname="顶部banner" prop="top_img" id="top_img" labelwidth="80px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
defaultFileList={this.state.model.top_img ? [{'src':this.state.model.top_img}] : null}
onChange={(e)=>{this.onUploadChange4(e)} }
onUpload={this.onUpload}
onError={this.onUploadError}
/>
</FormItem>
<FormItem labelname="按钮颜色" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItem">
<ColorPicker color={this.state.model.button_color} onChange={(e)=>{this.colorChange1(e)}} />
<span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.button_color}</span>
</div>
</FormItem>
{
this.state.isSystemModel ? (
<FormItem labelname="权重" prop="sort" id="sort" labelwidth="80px">
@ -691,7 +771,7 @@ export default class edittemplate extends React.Component{
</FormItem>) : null
}
{
{/* {
this.state.isExchangePage ? (
<FormItem labelname="样式选择" prop="list" style={{marginTop:'15px'}}>
<div>
@ -712,7 +792,7 @@ export default class edittemplate extends React.Component{
) : null
}
*/}
</Form>
<div className="bottom-footer">

View File

@ -814,7 +814,22 @@
position: absolute;
right: 0;
}
.perimg{
position: absolute;
width:50px;
top: 40%;
left: 50%;
cursor: pointer;
margin-left: -270px;
}
.nextimg{
position: absolute;
width:50px;
top: 40%;
right: 50%;
margin-right: -270px;
cursor: pointer;
}
.editor-main {
background-color: #fff;
-webkit-box-shadow: 0 1px 6px 2px rgba(0,0,0,.03);
@ -822,7 +837,7 @@
margin: 0 auto;
position: relative;
top: 65px;
height: 400px;
// height: 400px;
width: 375px;
margin-bottom: 200px;
}
@ -1136,7 +1151,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 600px
width:550px
}
.page-title-control {
@ -1146,7 +1161,51 @@
position: relative;
}
.RootEditor{
height: 100%;
overflow: scroll;
.zent-color-picker__text[data-zv="9.11.0"],.zent-color-picker__preview[data-zv="9.11.0"] {
width: 24px!important;
height: 24px!important;;
border-radius: 24px!important;
}
.colorItembg,.colorItemfont{
margin-top: -15px;
.cicle{
width: 22px;
height: 22px;
display: inline-block;
border-radius: 22px;
box-sizing: border-box;
background: #fff;
border: 1px solid #f1f2f3;
margin-left: 8px;
}
.cicle1{
background:#EEEEEE;
}
.cicle2{
background:#000;
}
.cicle6{
background:#04C160;
}
.cicle3{
background:#AE99D3;
}.cicle4{
background:#FACD6A;
}.cicle5{
background:#FE7962;
}
}
.selfset{
margin-left: 10px;
padding-left: 10px;
color: #3373F3;
border-left: 1px solid #ccc;
cursor: pointer;
}
}
.RootEditor .editor-title {
font-size: 14px;
line-height: 20px;
@ -1410,3 +1469,81 @@
right: 20px;
top: 80px;
}
.edittemplate{
height: 100vh;
background: #f3f4f5;
.topHeader{
width: 100%;
height: 60px;
background: #fff;
border-bottom:1px solid #f3f4f5;
display: flex;
padding: 0 10px;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
img{
width: 28px;
height: 28px;
cursor: pointer;
}
}
}
#leftComponent{
position: fixed;
width:350px;
height: 100%;
background: #fff;
.showTypechice{
display: flex;
justify-content:center;
.zent-radio-button[data-zv="9.11.0"]{
width: 100px!important;
line-height:20px!important;
}
margin-top: 15px;
}
.ascriptionCode{
width: 90%;
margin-top: 30px;
margin: 0 auto;
.item{
margin-top: 15px;
display: flex;
flex-direction: column;
h3{
text-align: center;
height: 8%;
display: flex;
justify-content: center;
background: #fff;
align-items: center;
font-size: 10px;
color: #5E5E5E;
border: 1px solid #F2F2F2;
}
img{
width: 100%;
}
h4{
font-size: 14px;
font-weight: normal;
}
.thumbheader{
width: 8vw;
height: 11vw;
background: #F2F2F2;
overflow: hidden;
margin-top: 5px;
align-self: center;
box-sizing: border-box;
cursor: pointer;
&.activeNav{
border: 5px solid #DDEEFF;
}
}
}
}
}

View File

@ -60,7 +60,8 @@ export default class mytemplate extends React.Component{
createBox(){
sessionStorage.setItem("pageInfo",0)
let link = window.location.href.replace(window.location.hash,"#/home/edittemplate");
let link = window.location.href.replace(window.location.hash,"#/edittemplate");
window.open(link, "_blank")
}
sourceClick(e){

View File

@ -73,7 +73,7 @@ import distributoradd from '../distributor/add/add';
import mytempMouldadd from '../exchangepage/template/main.js'
import edittemplate from '../exchangepage/edittemplate/main.js'
// import edittemplate from '../exchangepage/edittemplate/main.js'
import myexchangetemplate from '../exchangepage/mytemplate/main.js'
import {getUserinfo,handelResponse,postLogOut,getProductInfoSelect} from "../../assets/api.js"
let timerstop = null;
@ -406,7 +406,7 @@ export default class App extends Component {
<Route path="/home/distributor" component={distributor} />
<Route path="/home/exchangepage" component={exchangepage} />
<Route path="/home/mytempMould" exact={true} component={mytempMouldadd} />
<Route path="/home/edittemplate" exact={true} component={edittemplate} />
{/* <Route path="/home/edittemplate" exact={true} component={edittemplate} /> */}
<Route path="/home/myexchangetemplate" exact={true} component={myexchangetemplate} />