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:
Apple 2022-09-23 14:32:26 +08:00
parent bfcadeeb0b
commit aa47a2e622
9 changed files with 58 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js
View File

@ -8,7 +8,7 @@ export default class bottomBar extends React.Component {
navList:[
{
id:1,
iswitch:true,
iswitch:1,
name:'index',
pic:{
show:'',
@ -18,7 +18,7 @@ export default class bottomBar extends React.Component {
},
{
id:2,
iswitch:true,
iswitch:1,
name:'order',
pic:{
show:'',
@ -28,7 +28,7 @@ export default class bottomBar extends React.Component {
},
{
id:3,
iswitch:true,
iswitch:1,
name:'coupon',
pic:{
show:'',
@ -41,7 +41,6 @@ export default class bottomBar extends React.Component {
}
}
componentWillReceiveProps(nextProps){
console.log(44,nextProps);
let navList=nextProps.bottomBarConfig.navlist;
let naVisual=navList.filter(item=>item.iswitch);
this.setState({navList:naVisual});
@ -50,7 +49,6 @@ export default class bottomBar extends React.Component {
this.setState({active:index});
}
componentDidMount(){
console.log(53);
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
let { navlist, defaultText, selectText, background, iswitch } = config.coupon.product_list.bottomBar;
@ -65,14 +63,14 @@ export default class bottomBar extends React.Component {
return (
<ul className='bottomBar-view' style={{ background:this.props.bottomBarConfig.background? `url('${this.props.bottomBarConfig.background}') center center /cover`:'#f9f9f9'}}>
{
this.state.navList.map((item,index)=>{
this.state.navList.length>1?this.state.navList.map((item,index)=>{
return(
<li onClick={e=>this.clickIcon(e,index)}>
<li onClick={e=>this.clickIcon(e,index)} key={item.id}>
<img src={active==index?item.pic.selectShow:item.pic.show} alt=""/>
<span style={{color:active==index?this.props.bottomBarConfig.selectText:this.props.bottomBarConfig.defaultText}}>{item.text}</span>
</li>
)
})
}):null
}
</ul>
)

3
src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less
View File

@ -26,7 +26,7 @@
//底部栏目
.bottomBar-view {
width: 100%;
height: 50px;
// height: 50px;
background: #f00;
// position: absolute;
// bottom: 0;
@ -36,6 +36,7 @@
.bottomBar-view>li {
flex: 1;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;

1
src/pages/exchangepage/edittemplate/couponCard/goodsPage/componentLib/main.js
View File

@ -33,6 +33,7 @@ export default class componentLib extends React.Component {
}
propcomponentName(item){
this.props.componentName(item.name);
console.log(36,item);
if(item.name){
Bus.emit('componentLib', {attr:item.name,value:1})
}

141
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js
View File

@ -25,64 +25,25 @@ export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
iswitch: true,
iswitch: 1,
comType: 1,
navlist: [
{
id: 1,
iswitch: true,
name: 'index',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png'
},
text: '首页'
},
{
id: 2,
iswitch: true,
name: 'order',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png'
},
text: '订单'
},
{
id: 3,
iswitch: true,
name: 'coupon',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png'
},
text: '我的券'
}
],
navlist: [],
defaultText: '#A6A5B2',
selectText: '#FD6932',
background: 'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
}
}
componentWillMount(e) {
Bus.addListener('componentLib', (prop) => {
if (prop.attr == 'bottomBar') {
this.setState({ iswitch: prop.value })
}
})
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
let { navlist, defaultText, selectText, background, iswitch } = config.coupon.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background, iswitch });
this.setState({...config.coupon.product_list.bottomBar});
}
}
//样式
onstyleChange(e) {
this.setState({ comType: e.target.value });
changeConfig(attr,value){
console.log(36,attr,value);
this.setState({ [attr]: value })
Bus.emit('bottomBarConfig', {attr,value})
}
hasItemFn(c) {
let bottomNav = _.cloneDeep(this.state.navlist);
if (c == 1) {//默认
@ -93,42 +54,37 @@ export default class edittemplate extends React.Component {
bottomNav.forEach(item => {
item.pic.show = '';
item.pic.selectShow = '';
});
}
console.log(8383, bottomNav);
this.setState({ navlist: bottomNav });
Bus.emit('bottomBarConfig', {attr:'navlist',value:bottomNav})
}
//首页/订单/我的券
upImgChange(index, type, files) {
let model = this.state.navlist;
model[index].pic[type] = '';
if (files.length > 0 && files[0].status == "success") {
let model = this.state.navlist;
model[index].pic[type] = files[0].src;
this.setState({ navlist: model })
Bus.emit('navlist', model)
} else {
let model = this.state.navlist;
model[index].pic[type] = '';
this.setState({ navlist: model })
Bus.emit('navlist', model)
}
this.setState({ navlist: model })
Bus.emit('bottomBarConfig', {attr:'navlist',value:model})
};
//背景图
onUploadChange(files) {
let bgImage='';
if (files.length > 0 && files[0].status == "success") {
this.setState({ background: files[0].src })
Bus.emit('background', files[0].src)
} else {
this.setState({ background: '' })
Bus.emit('background', '')
bgImage=files[0].src;
}
this.setState({ background: bgImage })
Bus.emit('bottomBarConfig', {attr:'background',value:bgImage})
}
handleChangeStatus = (index, checked) => {
let model = this.state.navlist;
model[index].iswitch = checked;
model[index].iswitch = checked?1:0;
this.setState({ navlist: model })
Bus.emit('navlist', model)
console.log(86,model);
Bus.emit('bottomBarConfig', {attr:'navlist',value:model})
}
onUploadError = (type, data) => {
@ -138,30 +94,6 @@ export default class edittemplate extends React.Component {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
handleFont = (color) => {
this.setState({
defaultText: color
});
Bus.emit('defaultText', color)
}
handleSelectFont = (color) => {
this.setState({
selectText: color
});
Bus.emit('selectText', color)
}
// 字体颜色
fontcolor(cor) {
this.setState({ defaultText: cor });
Bus.emit('defaultText', cor)
}
//选中颜色
selectfontcolor(cor) {
this.setState({ selectText: cor });
Bus.emit('selectText', cor)
}
onUpload = (file, report) => {
let self = this;
return new Promise((resolve, reject) => {
@ -211,12 +143,11 @@ export default class edittemplate extends React.Component {
<div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>底部栏设置</h1>
</div>
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<div className="activeTip">
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onstyleChange(e) }} value={this.state.comType}>
<RadioGroup onChange={(e) => { this.changeConfig('comType',e.target.value) }} value={this.state.comType}>
<RadioButton onClick={() => this.hasItemFn(1)} value={1}>默认</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={2}>自定义</RadioButton>
</RadioGroup>
@ -228,14 +159,14 @@ export default class edittemplate extends React.Component {
{
bottomMenu.map((item, index) => {
return (
<div className="component-item" >
<div className="component-item" key={index}>
<div className="v-editItem">
<span>{item.category}</span>
{
item.id == 1 ? <p className="dflexacsa"><span>显示</span> </p> : (
<div className="dflexacsa"><span className="showType">{this.state.navlist[index].iswitch ? '显示' : '隐藏'}</span>
<Switch
checked={this.state.navlist[index].iswitch}
checked={this.state.navlist[index].iswitch==1}
onChange={checked => this.handleChangeStatus(index, checked)}
/>
</div>
@ -275,13 +206,13 @@ export default class edittemplate extends React.Component {
let model2 = this.state.navlist;
model2[index].text = e;
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
Bus.emit('titleBarConfig', {attr:'navlist',value:model2})
}}
onClearItem={(e) => {
let model2 = this.state.navlist;
model2[index].text = '';
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
Bus.emit('titleBarConfig', {attr:'navlist',value:model2})
}}
value={this.state.navlist[index].text} placeholder={item.category} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
@ -292,13 +223,13 @@ export default class edittemplate extends React.Component {
<div className="color-control">
<FormItem labelname="默认文字颜色:" labelwidth="140px">
<div className="colorItemfont dflexajce">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.defaultText == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#fff') }}></span>
<span className={this.state.defaultText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.defaultText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.defaultText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.defaultText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.defaultText == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('defaultText','#fff') }}></span>
<span className={this.state.defaultText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('defaultText','#04C160') }}></span>
<span className={this.state.defaultText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('defaultText','#AE99D3') }}></span>
<span className={this.state.defaultText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('defaultText','#FACD6A') }}></span>
<span className={this.state.defaultText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('defaultText','#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={this.state.defaultText} onChange={this.handleFont} />
<ColorPicker className="setbgColor" color={this.state.defaultText} onChange={c=>{this.changeConfig('defaultText',c)}} />
</div>
</div>
</FormItem>
@ -306,13 +237,13 @@ export default class edittemplate extends React.Component {
<div className="color-control">
<FormItem labelname="选中文字颜色:" labelwidth="140px">
<div className="colorItemfont dflexajce">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.selectText == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.selectfontcolor('#fff') }}></span>
<span className={this.state.selectText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.selectfontcolor('#04C160') }}></span>
<span className={this.state.selectText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.selectfontcolor('#AE99D3') }}></span>
<span className={this.state.selectText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.selectfontcolor('#FACD6A') }}></span>
<span className={this.state.selectText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.selectfontcolor('#FE7962') }}></span>
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.selectText == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('selectText','#fff') }}></span>
<span className={this.state.selectText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('selectText','#04C160') }}></span>
<span className={this.state.selectText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('selectText','#AE99D3') }}></span>
<span className={this.state.selectText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('selectText','#FACD6A') }}></span>
<span className={this.state.selectText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('selectText','#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={this.state.selectText} onChange={this.handleSelectFont} />
<ColorPicker className="setbgColor" color={this.state.selectText} onChange={c=>{this.changeConfig('selectText',c)}} />
</div>
</div>
</FormItem>

5
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js
View File

@ -18,11 +18,6 @@ export default class edittemplate extends React.Component {
}
}
componentWillMount(e) {
Bus.addListener('componentLib', (prop) => {
if (prop.attr == 'picture') {
this.setState({ iswitch: prop.value })
}
})
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
let {img,jumpType,jumpUrl}=config.coupon.product_list.picture;

6
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/searchBar.js
View File

@ -21,12 +21,6 @@ export default class Searchbar extends React.Component {
}
componentWillMount(e) {
//关闭
Bus.addListener('componentLib', (prop) => {
console.log(25,prop);
if (prop.attr == 'search') {
this.setState({ iswitch: prop.value })
}
})
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
this.setState({...config.coupon.product_list.search});

5
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js
View File

@ -21,11 +21,6 @@ export default class Title extends React.Component {
}
}
componentWillMount(e) {
Bus.addListener('componentLib', (prop) => {
if (prop.attr == 'title') {
this.setState({ iswitch: prop.value })
}
})
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
this.setState({...config.coupon.product_list.title});

4
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -46,10 +46,12 @@ export default class edittemplate extends React.Component {
render() {
let goodsConfig = this.props.goodsdata;
console.log(49,goodsConfig);
let naVisual = []
if (goodsConfig.bottomBar) {
naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch);
}
console.log(54,naVisual);
return (
<div className="goodstemplate_Xcenter" >
<div className="goodstemplate" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
@ -93,7 +95,7 @@ export default class edittemplate extends React.Component {
</button> : null
}
{
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
}
</div>
{

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

@ -165,10 +165,15 @@ export default class edittemplate extends React.Component {
componentDidMount() {
//开启/关闭自定义组件
Bus.addListener('componentLib', (prop) => {
let couponEditorInfo = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig')))
let coupongoodsConfig = this.state.product_list
console.log(169,prop);
coupongoodsConfig[prop.attr].iswitch = prop.value
this.setState({ product_list: coupongoodsConfig })
if(prop.value==0){
this.setState({componentName:''})
}
couponEditorInfo.coupon.product_list=coupongoodsConfig;
sessionStorage.setItem('editorConfig', JSON.stringify(couponEditorInfo));
})
Bus.addListener('picture', (prop) => {
let coupongoodsConfig = this.state.product_list
@ -194,24 +199,10 @@ export default class edittemplate extends React.Component {
this.setState({ product_list: titleConfig })
})
//底部栏
Bus.addListener('navlist', (prop) => {
Bus.addListener('bottomBarConfig', (prop) => {
console.log(203,prop);
let bottomConfig = this.state.product_list
bottomConfig.bottomBar.navlist = prop
this.setState({ product_list: bottomConfig })
})
Bus.addListener('background', (prop) => {
let bottomConfig = this.state.product_list
bottomConfig.bottomBar.background = prop
this.setState({ product_list: bottomConfig })
})
Bus.addListener('defaultText', (prop) => {
let bottomConfig = this.state.product_list
bottomConfig.bottomBar.defaultText = prop
this.setState({ product_list: bottomConfig })
})
Bus.addListener('selectText', (prop) => {
let bottomConfig = this.state.product_list
bottomConfig.bottomBar.selectText = prop
bottomConfig.bottomBar[prop.attr] = prop.value;
this.setState({ product_list: bottomConfig })
})
setTimeout(() => {
@ -676,9 +667,7 @@ export default class edittemplate extends React.Component {
reduceFn() {
let item = this.state.activeNavStatus
item -= 1
if (item < 1) {
item = 1
}
if (item < 1) item = 1
this.setState({ activeNavStatus: item })
}
preUrlFn() {
@ -691,11 +680,6 @@ export default class edittemplate extends React.Component {
if (item > 3) item = 3
this.setState({ activeNavStatus: item })
}
// 背景颜色
bgcolor(cor) {
this.setState({ bgcolor: cor })
}
showactiveIcon(c) {
this.setState({ activeshow: false })
}