落地页编辑器删除组件后页面交互处理

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -5,6 +5,7 @@ import './goodstemplate.less'
 import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
 import BottomBarView from './couponConfig/bottomBar' //底部栏
 import {Sweetalert} from 'zent'
+import Bus from '@/assets/eventBus.js'
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -30,11 +31,13 @@ export default class edittemplate extends React.Component {
     }
   }
   deleteFn(){
+    let selectDom=this.state.selectDom;//需删除组件名称
     Sweetalert.confirm({
       title:'确认信息',
       content: <p>确认删除该模块？</p>,
       onConfirm:()=>{
-
+        this.setState({selectDom:''});
+        Bus.emit('componentLibClose',selectDom)
       },
       onCancel:()=>{
         
@@ -50,14 +53,14 @@ export default class edittemplate extends React.Component {
       <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
         {
          goodsConfig.search&&goodsConfig.search.iswitch?
-         <div onClick={e=>this.customComponent(e,'searchBar','marketing-sousuolan-')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
+         <div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
         }
         <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
         {
           !goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
         }
          {
-          goodsConfig.picture&&goodsConfig.picture.iswitch? <div  onClick={e=>this.customComponent(e,'picBar','marketing-tupian')} ref="picBar"  className={this.state.selectDom=='picBar'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
+          goodsConfig.picture&&goodsConfig.picture.iswitch? <div  onClick={e=>this.customComponent(e,'picture','marketing-tupian')} ref="picture"  className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
         }
         {
           goodsConfig.title&&goodsConfig.title.iswitch?<div  onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div  className={goodsConfig.title.textAlign +'  content-title  '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div></div>:null
@@ -85,7 +88,7 @@ export default class edittemplate extends React.Component {
           this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
           <i className={'marketing '+this.state.icon}></i>
           <b className="split">|</b>
-          <span className="del-color" onClick={this.deleteFn}>删除</span>
+          <span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
          </div>:null
         }
         

src/pages/exchangepage/edittemplate/main.js

@@ -169,11 +169,18 @@ export default class edittemplate extends React.Component {
     this.setState({ model: val })
   }
   componentDidMount() {
+    //开启
     Bus.addListener('componentLib', (prop) => {
       let coupongoodsConfig = this.state.product_list
       coupongoodsConfig[prop.name].iswitch= true
       this.setState({ product_list: coupongoodsConfig })
     })
+    //关闭
+    Bus.addListener('componentLibClose', (prop) => {
+      let coupongoodsConfig = this.state.product_list
+      coupongoodsConfig[prop].iswitch= false
+      this.setState({ product_list: coupongoodsConfig,componentOfconfig: '' })
+    })
     Bus.addListener('picture', (prop) => {
       let coupongoodsConfig = this.state.product_list
       coupongoodsConfig.picture.img = prop