Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js

@@ -1,5 +1,6 @@
 import React from "react";
 import "./main.less";
+import Bus from '@/assets/eventBus.js'
 let comPonentList=[{
   id:1,
   icon:'marketing-tupian',
@@ -8,12 +9,12 @@ let comPonentList=[{
 },{
   id:2,
   icon:'marketing-beijingtupian',
-  name:'backPicture',
+  name:'backgroundImg',
   desc:'背景图'
 },{
   id:3,
   icon:'marketing-sousuolan-',
-  name:'searchBar',
+  name:'search',
   desc:'搜索栏'
 },{
   id:4,
@@ -36,6 +37,7 @@ export default class componentLib extends React.Component {
   componentWillUnmount() {}
   propcomponentName(item){
     this.props.componentName(item.name);
+    Bus.emit('componentLib',item)
   }
   render() {
     return (

src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js

@@ -13,12 +13,12 @@ export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-     switch:false,
+     iswitch:false,
      comType:1,
      navlist:[
        {
          id:1,
-         switch:false,
+         iswitch:true,
          name:'index',
          pic:{
            show:'',
@@ -28,7 +28,7 @@ export default class edittemplate extends React.Component {
        },
        {
         id:2,
-        switch:false,
+        iswitch:true,
         name:'order',
         pic:{
           show:'',
@@ -38,7 +38,7 @@ export default class edittemplate extends React.Component {
       },
       {
         id:3,
-        switch:false,
+        iswitch:true,
         name:'coupon',
         pic:{
           show:'',
@@ -55,8 +55,8 @@ export default class edittemplate extends React.Component {
   componentWillMount(e) {
     let config = JSON.parse(sessionStorage.getItem('editorConfig'));
     if (config && config.couponList && config.couponList.product_list) {
-      let { navlist, defaultText, selectText, background } = config.couponList.product_list.bottomBar;
+      let { navlist, defaultText, selectText, background,iswitch } = config.couponList.product_list.bottomBar;
-      this.setState({ navlist, defaultText, selectText, background });
+      this.setState({ navlist, defaultText, selectText, background,iswitch });
     }
   }
 
@@ -96,7 +96,7 @@ export default class edittemplate extends React.Component {
   }
   handleChangeStatus = (index,checked) => {
     let model = this.state.navlist;
-    model[index].switch= checked;
+    model[index].iswitch= checked;
     this.setState({ navlist: model })
     Bus.emit('navlist', model)
   }
@@ -199,7 +199,7 @@ export default class edittemplate extends React.Component {
                 <span>首页</span>
                 <p className="dflexacsa"><span className="showType">显示</span>
                   <Switch
-                    checked={this.state.navlist[0].switch}
+                    checked={this.state.navlist[0].iswitch}
                     onChange={checked=>this.handleChangeStatus(0,checked)}
                   /></p>
               </div>
@@ -254,7 +254,7 @@ export default class edittemplate extends React.Component {
                 <span>订单</span>
                 <p className="dflexacsa"><span className="showType">显示</span>
                   <Switch
-                     checked={this.state.navlist[1].switch}
+                     checked={this.state.navlist[1].iswitch}
                      onChange={checked=>this.handleChangeStatus(1,checked)}
                   /></p>
               </div>
@@ -309,7 +309,7 @@ export default class edittemplate extends React.Component {
                 <span>我的券</span>
                 <p className="dflexacsa"><span className="showType">显示</span>
                   <Switch
-                     checked={this.state.navlist[2].switch}
+                     checked={this.state.navlist[2].iswitch}
                      onChange={checked=>this.handleChangeStatus(2,checked)}
                   /></p>
               </div>

src/pages/exchangepage/couponTemplate/goodsPage/config/main.js

@@ -292,7 +292,7 @@ export default class edittemplate extends React.Component {
                 </Form>
               </div>
             </div>
-          ) : this.props.componentName=='picture'?<Picture/>:this.props.componentName=='backPicture'?<Backpicture/>:this.props.componentName=='searchBar'?<SearchBar/>:this.props.componentName=='bottomBar'?<BottomBar/>:this.props.componentName=='title'?<Title/>:null
+          ) : this.props.componentName=='picture'?<Picture/>:this.props.componentName=='backgroundImg'?<Backpicture/>:this.props.componentName=='search'?<SearchBar/>:this.props.componentName=='bottomBar'?<BottomBar/>:this.props.componentName=='title'?<Title/>:null
         }
       </div>
     )

src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js

@@ -11,16 +11,19 @@ export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
+        iswitch:false,
         img:'',
         jumpType:'0',//0不跳转  1跳转
         jumpUrl:''
     }
   }
   componentWillMount(e) {
+   
     let config = JSON.parse(sessionStorage.getItem('editorConfig'));
     if (config && config.couponList && config.couponList.product_list) {
-      let {img,jumpType,jumpUrl}=config.couponList.product_list.picture;
+      let {img,jumpType,jumpUrl,iswitch}=config.couponList.product_list.picture;
-      this.setState({ img,jumpType,jumpUrl });
+      console.log(21,config.couponList.product_list.picture);
+      this.setState({ img,jumpType,jumpUrl,iswitch});
     }
   }
 

src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js

@@ -11,7 +11,7 @@ export default class bottomBar extends React.Component {
     }
     componentWillReceiveProps(nextProps){
         let navList=nextProps.bottomBarConfig.navlist;
-        let naVisual=navList.filter(item=>item.switch);
+        let naVisual=navList.filter(item=>item.iswitch);
         this.setState({navList:naVisual});
         console.log(66,nextProps);
     }

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -4,44 +4,69 @@ import "../../../assets/comm.css"
 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)
     this.state={
       clientY:0,
-      selectDom:'searchBar'
+      selectDom:'',
+      icon:''
     }
   }
   opendescFn() {
     this.props.opendesc(true)
   }
-  customComponent(e,name){
+  customComponent(e,name,icon){
     //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
     let b=this.refs[name];
     let offset_top=this.refs[name].getBoundingClientRect().top;
-    console.log(22,offset_top);
+    this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
-    this.setState({clientY:(offset_top-125),selectDom:name});
+    if(name=='searchBar'){
+      this.setState({clientY:0});
+    }
     if(name=='bottomBar'){
-      this.setState({clientY:600,selectDom:name});
+      this.setState({clientY:600});
     }
   }
+  deleteFn(){
+    let selectDom=this.state.selectDom;//需删除组件名称
+    Sweetalert.confirm({
+      title:'确认信息',
+      content: <p>确认删除该模块？</p>,
+      onConfirm:()=>{
+        this.setState({selectDom:''});
+        Bus.emit('componentLibClose',selectDom)
+      },
+      onCancel:()=>{
+        
+      },
+      parentComponent: this
+    });
+  }
+
   render() {
     let goodsConfig=this.props.goodsdata;
+    console.log(48,goodsConfig);
     return (
       <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
         {
-         goodsConfig.search?
+         goodsConfig.search&&goodsConfig.search.iswitch?
-         <div onClick={e=>this.customComponent(e,'searchBar')} 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? <div  onClick={e=>this.customComponent(e,'picBar')} 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?<div  onClick={e=>this.customComponent(e,'title')} 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
+          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
+        }
+        {
+          goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
         }
         {
           goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.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'} />
@@ -56,14 +81,17 @@ export default class edittemplate extends React.Component {
           goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
         }
         {
-          goodsConfig.bottomBar? <div  ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar')} 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 className="delete-component" style={{top:this.state.clientY}}>
+        {
-         <i className="marketing marketing-beijingtupian"></i>
+          this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
-         <b className="split">|</b>
+          <i className={'marketing '+this.state.icon}></i>
-         <span className="del-color">删除</span>
+          <b className="split">|</b>
-        </div>
+          <span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
+         </div>:null
+        }
+        
       </div>
     )
   }

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -20,15 +20,16 @@
     height: 187px;
   }
 
-  >.content-title {
+  .content-title {
     position: relative;
     z-index: 999;
     height: 40px;
     line-height: 40px;
-    margin-bottom: 50px;
     padding: 0 13px;
   }
-
+ .parting-line{
+   height: 50px;
+ }
   >.goodsPic,
   >.goodsPicMatrax {
     width: 349px;
@@ -37,9 +38,6 @@
     position: relative;
     margin-top: -50px;
   }
-  >.goodsPic{
-    margin-top: 8px;
-  }
   >.goodsPicMatrax {
     height: auto;
   }

src/pages/exchangepage/edittemplate/main.js

@@ -73,33 +73,35 @@ let couponProduct_list = {
   button_color: '#FACD6A',
   describe: { type: '', content: '', bg_image: '' },
   picture: {
+    iswitch:false,
     img: '',
     jumpType: '0',//0不跳转  1跳转
     jumpUrl: ''
   },
   backgroundImg: {
+    iswitch:false,
     bgImg: ''
   },
   search: {
-    switch: false,
+    iswitch: false,
     shape: 'circular',
     textAlign: 'left',
     borderColor: '#333',
     placeholder: '请输入关键字搜索'
   },
   title: {
-    switch: false,
+    iswitch: false,
     text: 'circular',
     textAlign: 'left',
     fontColor: '#333',
     fontSize: 1
   },
   bottomBar: {
-    switch:false,
+    iswitch:false,
     navlist:[
       {
         id:1,
-        switch:false,
+        iswitch:true,
         name:'index',
         pic:{
           show:'',
@@ -109,7 +111,7 @@ let couponProduct_list = {
       },
       {
        id:2,
-       switch:false,
+       iswitch:true,
        name:'order',
        pic:{
          show:'',
@@ -119,7 +121,7 @@ let couponProduct_list = {
      },
      {
        id:3,
-       switch:false,
+       iswitch:true,
        name:'coupon',
        pic:{
          show:'',
@@ -167,6 +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
@@ -751,6 +765,7 @@ export default class edittemplate extends React.Component {
     this.setState({ componentOfconfig: c });
   }
   render() {
+    console.log(761,this.state.product_list);
     return (
       <div className='edittemplate'>
         <div className='topHeader'>
@@ -861,7 +876,7 @@ export default class edittemplate extends React.Component {
                 }>
                 <div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
                   {
-                    this.state.product_list.search ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
+                    this.state.product_list.search&&this.state.product_list.search.iswitch ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
                   }
                   <img
                     src={
@@ -883,10 +898,13 @@ export default class edittemplate extends React.Component {
                       />
                     )}
                   {
-                    this.state.product_list.picture ? <img src={this.state.product_list.picture.img} alt="" className="picture" /> : null
+                    this.state.product_list.picture&&this.state.product_list.picture.iswitch ? <img src={this.state.product_list.picture.img} alt="" className="picture" /> : null
                   }
                   {
-                    this.state.product_list.title ? <div className={this.state.product_list.title.textAlign + '  content-title  ' + this.state.product_list.title.fontSize} style={{ color: this.state.product_list.title.fontColor }}>{this.state.product_list.title.text}</div> : null
+                    this.state.product_list.title&&this.state.product_list.title.iswitch ? <div className={this.state.product_list.title.textAlign + '  content-title  ' + this.state.product_list.title.fontSize} style={{ color: this.state.product_list.title.fontColor }}>{this.state.product_list.title.text}</div> : null
+                  }
+                    {
+                    this.state.product_list.title&&this.state.product_list.title.iswitch&&this.state.product_list.title.text||this.state.product_list.picture&&this.state.product_list.picture.iswitch&&this.state.product_list.picture.img?<div className="parting-line"></div>:null
                   }
                   {this.state.product_list.list == 2 ? (
                     <img
@@ -948,7 +966,7 @@ export default class edittemplate extends React.Component {
                     />
                   ) : null}
                    {
-                      this.state.product_list.bottomBar? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
+                      this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
                     }
                 </div>
               </div>

src/pages/exchangepage/edittemplate/main.less

@@ -602,11 +602,12 @@
 						position: relative;
 						z-index: 999;
 						height: 20px;
-						line-height:20px;
-						margin-bottom: 20px;
 						padding:0 8px; 
 						font-size: 8px;
 					  }
+					  .parting-line{
+						height:15px;
+					}
                     .searchBar{
 						transform: scale(0.8);
 						font-size: 10px;
@@ -656,7 +657,7 @@
 						position: relative;
 						margin-top: -20px;
 					}
-
+                  
 					.bottom_exchageBtn {
 						position: absolute;
 						bottom: 0;
@@ -742,6 +743,6 @@
 #leftComponent .details-reduce{
 	transform: scale(0.5)
 }
-button{
+.exchageBtn{
 	border: 0 !important;
 }