编辑器底部栏删除/添加组件联动

src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js

@@ -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>
         )

src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less

@@ -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;

src/pages/exchangepage/edittemplate/couponCard/goodsPage/componentLib/main.js

@@ -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})
     }

src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js

@@ -25,64 +25,25 @@ export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      iswitch: true,
+      iswitch: 1,
       comType: 1,
-      navlist: [
+      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: '我的券'
-        }
-      ],
       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({...config.coupon.product_list.bottomBar});
-      this.setState({ navlist, defaultText, selectText, background, iswitch });
     }
   }
-
+  changeConfig(attr,value){
-  //样式
+    console.log(36,attr,value);
-  onstyleChange(e) {
+    this.setState({ [attr]: value })
-    this.setState({ comType: e.target.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 })
+      bgImage=files[0].src;
-      Bus.emit('background', files[0].src)
-    } else {
-      this.setState({ background: '' })
-      Bus.emit('background', '')
     }
+      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 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.fontcolor('#04C160') }}></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.fontcolor('#AE99D3') }}></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.fontcolor('#FACD6A') }}></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.fontcolor('#FE7962') }}></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 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.selectfontcolor('#04C160') }}></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.selectfontcolor('#AE99D3') }}></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.selectfontcolor('#FACD6A') }}></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.selectfontcolor('#FE7962') }}></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>

src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js

@@ -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;

src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/searchBar.js

@@ -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});

src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js

@@ -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});

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -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>
         {

src/pages/exchangepage/edittemplate/main.js

@@ -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
+      bottomConfig.bottomBar[prop.attr] = prop.value;
-      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
       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) {
+    if (item < 1) 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 })
   }