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-06 10:44:39 +08:00
parent 3ef6985135
commit 5fced05579
8 changed files with 91 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/exchangepage/edittemplate/detailsPage.js
View File

@ -13,9 +13,9 @@ export default class edittemplate extends React.Component{
super(props)
this.state={
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'],
button_color:'',
bg_color:''
}
}
}
@ -45,12 +45,16 @@ export default class edittemplate extends React.Component{
// 字体颜色
fontcolor(cor){
this.setState({button_color:cor});
let models=this.state.model;
models.button_color=cor;
this.setState({model:models});
this.props.setdetailftc(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);
}
onUpload = (file, report) => {
@ -99,8 +103,23 @@ export default class edittemplate extends React.Component{
setTimeout(update, 500);
});
};
};
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(){
return(
@ -109,18 +128,18 @@ export default class edittemplate extends React.Component{
<div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div>
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<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 style={{border:this.state.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></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.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span>
</div>
</FormItem>
<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<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.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.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=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></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.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></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.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span>
</div>

42
src/pages/exchangepage/edittemplate/goodsPage.js
View File

@ -44,11 +44,12 @@ export default class edittemplate extends React.Component{
}
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){
@ -98,12 +99,16 @@ export default class edittemplate extends React.Component{
// 字体颜色
fontcolor(cor){
this.setState({button_color:cor});
let models=this.state.model;
models.button_color=cor;
this.setState({model:models});
this.props.setButtoncolor(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);
}
onUpload = (file, report) => {
@ -159,14 +164,13 @@ export default class edittemplate extends React.Component{
componentWillUnmount(){
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
if(oldobj){
oldobj.push(this.state.model);
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
oldobj.goodspage=this.state.model;
}else{
let obj=[]
obj.push(this.state.model);
sessionStorage.setItem('editorConfig',JSON.stringify(obj));
oldobj={}
oldobj.goodspage=this.state.model;
}
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
}
@ -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">
<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 style={{border:this.state.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></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.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span>
</div>
</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">
<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.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.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=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></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.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></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.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span>
</div>

2
src/pages/exchangepage/edittemplate/goodstemplate.js
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 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

3
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

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

41
src/pages/exchangepage/edittemplate/landingPage.js
View File

@ -24,10 +24,9 @@ export default class edittemplate extends React.Component{
componentWillMount(e){
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
if(config){
this.setState({model:config[0]});
if(config&&config.land){
this.setState({model:config.land});
}
}
onactivityChange(e){
@ -92,12 +91,16 @@ export default class edittemplate extends React.Component{
// 字体颜色
fontcolor(cor){
this.setState({button_color:cor});
let model1=this.state.model;
model1.button_color=cor;
this.setState({model:model1});
this.props.landftcolor(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);
}
onUpload = (file, report) => {
@ -149,9 +152,15 @@ export default class edittemplate extends React.Component{
//组件将要销毁阶段
componentWillUnmount(){
let obj=[]
obj.push(this.state.model);
sessionStorage.setItem('editorConfig',JSON.stringify(obj));
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
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>
<FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px">
<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 style={{border:this.state.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 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.model.bg_color=='#EEEEEE'?'2px solid #cbe1fd':'none'}} className="cicle cicle1" onClick={()=>{this.bgcolor('#EEEEEE')}}></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 className="selfset" >自定义</span>
@ -202,11 +211,11 @@ export default class edittemplate extends React.Component{
</FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<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.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.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=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></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.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></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.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 className="selfset" >自定义</span>
</div>

5
src/pages/exchangepage/edittemplate/main.js
View File

@ -75,9 +75,8 @@ getLandingdata(val){
},500)
}
componentWillMount(e){
sessionStorage.removeItem('editorConfig');
let myInfo = sessionStorage.getItem("pageInfo")
console.log("当前状态",myInfo)
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 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

9
src/pages/exchangepage/edittemplate/main.less
View File

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

2
src/pages/order/more/more.js
View File

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