编辑器联动逻辑处理

This commit is contained in:
red-deng-deng 2022-01-06 10:44:39 +08:00
parent 3ef6985135
commit 5fced05579
8 changed files with 91 additions and 58 deletions

View File

@ -13,9 +13,9 @@ export default class edittemplate extends React.Component{
super(props) super(props)
this.state={ this.state={
model:{ model:{
id:"",
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'], 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'],
button_color:'',
bg_color:''
} }
} }
} }
@ -45,12 +45,16 @@ export default class edittemplate extends React.Component{
// 字体颜色 // 字体颜色
fontcolor(cor){ fontcolor(cor){
this.setState({button_color:cor}); let models=this.state.model;
models.button_color=cor;
this.setState({model:models});
this.props.setdetailftc(cor); this.props.setdetailftc(cor);
} }
// 背景颜色 // 背景颜色
bgcolor(cor){ bgcolor(cor){
this.setState({bg_color:cor}); let models=this.state.model;
models.bg_color=cor;
this.setState({model:models});
this.props.setdetailbgc(cor); this.props.setdetailbgc(cor);
} }
onUpload = (file, report) => { onUpload = (file, report) => {
@ -100,7 +104,22 @@ export default class edittemplate extends React.Component{
}); });
}; };
componentWillMount(){
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
if(config&&config.detailpage){
this.setState({model:config.detailpage});
}
}
componentWillUnmount(){
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
if(oldobj){
oldobj.detailpage=this.state.model;
}else{
oldobj={}
oldobj.detailpage=this.state.model;
}
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
}
render(){ render(){
return( return(
@ -109,18 +128,18 @@ export default class edittemplate extends React.Component{
<div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div> <div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div>
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> <FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" > <div className="colorItembg dfleac" >
<span className="cicle" style={{border:this.state.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span> <span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
<span style={{border:this.state.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span> <span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
</div> </div>
</FormItem> </FormItem>
<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span style={{border:this.state.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span> <span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
<span style={{border:this.state.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span> <span style={{border:this.state.model.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
<span style={{border:this.state.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span> <span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
<span style={{border:this.state.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span> <span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
<span style={{border:this.state.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span> <span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
</div> </div>

View File

@ -44,11 +44,12 @@ export default class edittemplate extends React.Component{
} }
componentWillMount(e){ componentWillMount(e){
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
if(config){
this.setState({model:config[1]});
}
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
if(config&&config.goodspage){
this.setState({model:config.goodspage});
}
console.log(47,this.state.model);
} }
onListChange(e){ onListChange(e){
@ -98,12 +99,16 @@ export default class edittemplate extends React.Component{
// 字体颜色 // 字体颜色
fontcolor(cor){ fontcolor(cor){
this.setState({button_color:cor}); let models=this.state.model;
models.button_color=cor;
this.setState({model:models});
this.props.setButtoncolor(cor); this.props.setButtoncolor(cor);
} }
// 背景颜色 // 背景颜色
bgcolor(cor){ bgcolor(cor){
this.setState({bg_color:cor}); let models=this.state.model;
models.bg_color=cor;
this.setState({model:models});
this.props.setButtonbgcolor(cor); this.props.setButtonbgcolor(cor);
} }
onUpload = (file, report) => { onUpload = (file, report) => {
@ -159,15 +164,14 @@ export default class edittemplate extends React.Component{
componentWillUnmount(){ componentWillUnmount(){
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig')); let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
if(oldobj){ if(oldobj){
oldobj.push(this.state.model); oldobj.goodspage=this.state.model;
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
}else{ }else{
let obj=[] oldobj={}
obj.push(this.state.model); oldobj.goodspage=this.state.model;
sessionStorage.setItem('editorConfig',JSON.stringify(obj));
}
} }
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
}
render(){ render(){
@ -188,8 +192,8 @@ export default class edittemplate extends React.Component{
{ {
this.state.model.list==1?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list==1?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" > <div className="colorItembg dfleac" >
<span className="cicle" style={{border:this.state.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span> <span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
<span style={{border:this.state.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span> <span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
</div> </div>
</FormItem>:null </FormItem>:null
@ -197,11 +201,11 @@ export default class edittemplate extends React.Component{
{ {
this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span style={{border:this.state.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span> <span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
<span style={{border:this.state.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span> <span style={{border:this.state.model.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
<span style={{border:this.state.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span> <span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
<span style={{border:this.state.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span> <span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
<span style={{border:this.state.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span> <span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
</div> </div>

View File

@ -13,7 +13,7 @@ export default class edittemplate extends React.Component{
<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={this.props.goodsdata.banner}/> <img className="topbanner" src={this.props.goodsdata.banner}/>
{ {
this.props.goodsdata.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.props.goodsdata.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/list.png'}/> this.props.goodsdata.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.props.goodsdata.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
} }
{ {
this.props.goodsdata.list==1? <button className="exchageBtn" style={{color:this.props.goodsdata.ftcolor,background:this.props.goodsdata.bgcolor}}>立即兑换</button>:null this.props.goodsdata.list==1? <button className="exchageBtn" style={{color:this.props.goodsdata.ftcolor,background:this.props.goodsdata.bgcolor}}>立即兑换</button>:null

View File

@ -29,7 +29,7 @@
justify-content: center; justify-content: center;
width:349px; width:349px;
color: #fff; color: #fff;
background: #ccc; background: #E8EAEC;
border-radius: 36px; border-radius: 36px;
height: 36px; height: 36px;
margin:30px 0 0 13px; margin:30px 0 0 13px;
@ -59,5 +59,6 @@
align-items: center; align-items: center;
position: absolute; position: absolute;
bottom: 2%; bottom: 2%;
color: #fff;
} }
} }

View File

@ -24,10 +24,9 @@ export default class edittemplate extends React.Component{
componentWillMount(e){ componentWillMount(e){
let config=JSON.parse(sessionStorage.getItem('editorConfig')); let config=JSON.parse(sessionStorage.getItem('editorConfig'));
if(config){ if(config&&config.land){
this.setState({model:config[0]}); this.setState({model:config.land});
} }
} }
onactivityChange(e){ onactivityChange(e){
@ -92,12 +91,16 @@ export default class edittemplate extends React.Component{
// 字体颜色 // 字体颜色
fontcolor(cor){ fontcolor(cor){
this.setState({button_color:cor}); let model1=this.state.model;
model1.button_color=cor;
this.setState({model:model1});
this.props.landftcolor(cor); this.props.landftcolor(cor);
} }
// 背景颜色 // 背景颜色
bgcolor(cor){ bgcolor(cor){
this.setState({bg_color:cor}); let model1=this.state.model;
model1.bg_color=cor;
this.setState({model:model1});
this.props.landbgcolor(cor); this.props.landbgcolor(cor);
} }
onUpload = (file, report) => { onUpload = (file, report) => {
@ -149,9 +152,15 @@ export default class edittemplate extends React.Component{
//组件将要销毁阶段 //组件将要销毁阶段
componentWillUnmount(){ componentWillUnmount(){
let obj=[]
obj.push(this.state.model); let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
sessionStorage.setItem('editorConfig',JSON.stringify(obj)); if(oldobj){
oldobj.land=this.state.model;
}else{
oldobj={}
oldobj.land=this.state.model;
}
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
} }
@ -192,9 +201,9 @@ export default class edittemplate extends React.Component{
<div style={{marginTop:'20px',marginBottom:'15px',fontWeight:'bold'}}>样式</div> <div style={{marginTop:'20px',marginBottom:'15px',fontWeight:'bold'}}>样式</div>
<FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px"> <FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac"> <div className="colorItembg dfleac">
<span className="cicle" style={{border:this.state.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span> <span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
<span style={{border:this.state.bg_color=='#EEEEEE'?'2px solid #cbe1fd':'none'}} className="cicle cicle1" onClick={()=>{this.bgcolor('#EEEEEE')}}></span> <span style={{border:this.state.model.bg_color=='#EEEEEE'?'2px solid #cbe1fd':'none'}} className="cicle cicle1" onClick={()=>{this.bgcolor('#EEEEEE')}}></span>
<span style={{border:this.state.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span> <span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
{/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.button_color}</span> */} {/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.button_color}</span> */}
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
@ -202,11 +211,11 @@ export default class edittemplate extends React.Component{
</FormItem> </FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span style={{border:this.state.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span> <span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
<span style={{border:this.state.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span> <span style={{border:this.state.model.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
<span style={{border:this.state.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span> <span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
<span style={{border:this.state.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span> <span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
<span style={{border:this.state.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span> <span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
{/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.bg_color}</span> */} {/* <span style={{"margin-top":"10px","margin-left":"10px","font-size":"16px"}}>{this.state.model.bg_color}</span> */}
<span className="selfset" >自定义</span> <span className="selfset" >自定义</span>
</div> </div>

View File

@ -75,9 +75,8 @@ getLandingdata(val){
},500) },500)
} }
componentWillMount(e){ componentWillMount(e){
sessionStorage.removeItem('editorConfig');
let myInfo = sessionStorage.getItem("pageInfo") let myInfo = sessionStorage.getItem("pageInfo")
console.log("当前状态",myInfo) console.log("当前状态",myInfo)
if(myInfo == 0) if(myInfo == 0)
@ -595,7 +594,7 @@ getLandingdata(val){
<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={this.state.goodsConfigure.banner}/> <img className="topbanner" src={this.state.goodsConfigure.banner}/>
{ {
this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.goodsConfigure.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/list.png'}/> this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.goodsConfigure.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
} }
{ {
this.state.goodsConfigure.list==1? <button className="exchageBtn" style={{color:this.state.goodsConfigure.ftcolor,background:this.state.goodsConfigure.bgcolor}}>立即兑换</button>:null this.state.goodsConfigure.list==1? <button className="exchageBtn" style={{color:this.state.goodsConfigure.ftcolor,background:this.state.goodsConfigure.bgcolor}}>立即兑换</button>:null

View File

@ -1488,7 +1488,7 @@
background: #fff; background: #fff;
border-bottom:1px solid #f3f4f5; border-bottom:1px solid #f3f4f5;
display: flex; display: flex;
padding: 0 10px; padding: 0 24px 0 15px;
box-sizing: border-box; box-sizing: border-box;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -1566,9 +1566,10 @@
.exchangeBtn{ .exchangeBtn{
font-size: 10px; font-size: 10px;
width: 100%; width: 100%;
background: #eee; background: #E8EAEC;
height: 16px; height: 16px;
border-radius: 8px; border-radius: 8px;
color:#fff;
position: absolute; position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1609,10 +1610,10 @@
.exchageBtn{ .exchageBtn{
width:90%; width:90%;
height: 30px; height: 30px;
font-size: 12px; font-size: 8px;
color: #fff; color: #fff;
height: 20px; height: 20px;
background: #ccc; background: #E8EAEC;
border-radius: 15px; border-radius: 15px;
margin:10% 5%; margin:10% 5%;
} }

View File

@ -160,7 +160,7 @@ export default class order extends React.Component{
</li> </li>
<li> <li>
<span>映射商品</span> <span>映射商品</span>
<font>爱奇艺>[官方-爱奇艺-黄金会员周卡]</font> <font>{orderDetail_data.map_product_name}</font>
</li> </li>
<li> <li>
<span>官方价</span> <span>官方价</span>