From aa47a2e622b7090a2ce5db78eb6b5d34b7c1e5e0 Mon Sep 17 00:00:00 2001 From: Apple <> Date: Fri, 23 Sep 2022 14:32:26 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=BA=95=E9=83=A8?= =?UTF-8?q?=E6=A0=8F=E5=88=A0=E9=99=A4/=E6=B7=BB=E5=8A=A0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../couponCard/couponViewConfig/bottomBar.js | 14 +- .../couponCard/couponViewConfig/comm.less | 3 +- .../couponCard/goodsPage/componentLib/main.js | 1 + .../couponCard/goodsPage/config/bottomBar.js | 141 +++++------------- .../couponCard/goodsPage/config/picture.js | 5 - .../couponCard/goodsPage/config/searchBar.js | 6 - .../couponCard/goodsPage/config/title.js | 5 - .../edittemplate/goodstemplate.js | 4 +- src/pages/exchangepage/edittemplate/main.js | 36 ++--- 9 files changed, 58 insertions(+), 157 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js index 3f665fc6..4976e6c8 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js +++ b/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 ( ) diff --git a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less index 4af860a2..7ddffb3c 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less +++ b/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; diff --git a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/componentLib/main.js b/src/pages/exchangepage/edittemplate/couponCard/goodsPage/componentLib/main.js index 33276d60..98e0f9fb 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/componentLib/main.js +++ b/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}) } diff --git a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js b/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js index 3d5fac9c..a48e34d9 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js +++ b/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: [ - { - 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 {

底部栏设置

-
- { this.onstyleChange(e) }} value={this.state.comType}> + { this.changeConfig('comType',e.target.value) }} value={this.state.comType}> this.hasItemFn(1)} value={1}>默认 this.hasItemFn(2)} value={2}>自定义 @@ -228,14 +159,14 @@ export default class edittemplate extends React.Component { { bottomMenu.map((item, index) => { return ( -
+
{item.category} { item.id == 1 ?

显示

: (
{this.state.navlist[index].iswitch ? '显示' : '隐藏'} this.handleChangeStatus(index, checked)} />
@@ -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'} /> @@ -292,13 +223,13 @@ export default class edittemplate extends React.Component {
- { this.fontcolor('#fff') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> + { this.changeConfig('defaultText','#fff') }}> + { this.changeConfig('defaultText','#04C160') }}> + { this.changeConfig('defaultText','#AE99D3') }}> + { this.changeConfig('defaultText','#FACD6A') }}> + { this.changeConfig('defaultText','#FE7962') }}>
- + {this.changeConfig('defaultText',c)}} />
@@ -306,13 +237,13 @@ export default class edittemplate extends React.Component {
- { this.selectfontcolor('#fff') }}> - { this.selectfontcolor('#04C160') }}> - { this.selectfontcolor('#AE99D3') }}> - { this.selectfontcolor('#FACD6A') }}> - { this.selectfontcolor('#FE7962') }}> + { this.changeConfig('selectText','#fff') }}> + { this.changeConfig('selectText','#04C160') }}> + { this.changeConfig('selectText','#AE99D3') }}> + { this.changeConfig('selectText','#FACD6A') }}> + { this.changeConfig('selectText','#FE7962') }}>
- + {this.changeConfig('selectText',c)}} />
diff --git a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js b/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js index a5aed06b..3e08eafe 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js +++ b/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; diff --git a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/searchBar.js b/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/searchBar.js index 73649e6e..ab584b0a 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/searchBar.js +++ b/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}); diff --git a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js b/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js index f5363d99..5bccd070 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js +++ b/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}); diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index f2b7ed3c..52257719 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/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 (
@@ -93,7 +95,7 @@ export default class edittemplate extends React.Component { : null } { - goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ?
this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null + goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch ?
this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null }
{ diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index e474379d..c9bfb3ef 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/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 - 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 }) }