diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js index 43c93071..1a7c6a56 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js +++ b/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 ( diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js index 6c2faa4a..e463f953 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js +++ b/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; - this.setState({ navlist, defaultText, selectText, background }); + let { navlist, defaultText, selectText, background,iswitch } = config.couponList.product_list.bottomBar; + 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 { 首页

显示 this.handleChangeStatus(0,checked)} />

@@ -254,7 +254,7 @@ export default class edittemplate extends React.Component { 订单

显示 this.handleChangeStatus(1,checked)} />

@@ -309,7 +309,7 @@ export default class edittemplate extends React.Component { 我的券

显示 this.handleChangeStatus(2,checked)} />

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js index d6ca7f02..2f9060ad 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js @@ -292,7 +292,7 @@ export default class edittemplate extends React.Component { - ) : this.props.componentName=='picture'?:this.props.componentName=='backPicture'?:this.props.componentName=='searchBar'?:this.props.componentName=='bottomBar'?:this.props.componentName=='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> ) diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js index 68eb3385..577b8dee 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js +++ b/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; - this.setState({ img,jumpType,jumpUrl }); + let {img,jumpType,jumpUrl,iswitch}=config.couponList.product_list.picture; + console.log(21,config.couponList.product_list.picture); + this.setState({ img,jumpType,jumpUrl,iswitch}); } } diff --git a/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js b/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js index 23c2ceae..1db98797 100644 --- a/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js +++ b/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); } diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index f4948fcd..d5e0c9a0 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -4,44 +4,66 @@ import "../../../assets/comm.css" import './goodstemplate.less' import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏 import BottomBarView from './couponConfig/bottomBar' //底部栏 +import {Sweetalert} from 'zent' 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}); + this.setState({clientY:(offset_top-125),selectDom:name,icon:icon}); + if(name=='searchBar'){ + this.setState({clientY:0}); + } if(name=='bottomBar'){ - this.setState({clientY:600,selectDom:name}); + this.setState({clientY:600}); } } + deleteFn(){ + Sweetalert.confirm({ + title:'确认信息', + content: <p>确认删除该模块?</p>, + onConfirm:()=>{ + + }, + 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? - <div onClick={e=>this.customComponent(e,'searchBar')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null + 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 } <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,'picBar','marketing-tupian')} ref="picBar" className={this.state.selectDom=='picBar'?'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 +78,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> - <b className="split">|</b> - <span className="del-color">删除</span> - </div> + { + 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> + </div>:null + } + </div> ) } diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index f3f4a117..f6fc1aaa 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/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; } diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 0c4fa199..d5dc3dc6 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/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,11 @@ 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('picture', (prop) => { let coupongoodsConfig = this.state.product_list coupongoodsConfig.picture.img = prop @@ -751,6 +758,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 +869,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 +891,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 +959,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> diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 4ee0a026..5c031010 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/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; } \ No newline at end of file