完成落地页编辑器搜索栏联动配置预览效果

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

@@ -8,6 +8,7 @@ import Ipt from "@/components/input/main"
 import '@/assets/comm.css'
 import './comm.less'
 import _ from 'lodash'
+import Bus from '@/assets/eventBus.js'
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -61,7 +62,8 @@ export default class edittemplate extends React.Component {
 
   //样式
   onstyleChange(e) {
-    this.setState({ comType: e.target.value })
+    this.setState({ comType: e.target.value });
+
   }
 
   hasItemFn(c) {
@@ -74,24 +76,29 @@ export default class edittemplate extends React.Component {
       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)
     }
   };
   //背景图
   onUploadChange(files){
     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','')
     }
   }
   handleChangeStatus = (index,checked) => {
     let model = this.state.navlist;
     model[index].switch= checked;
     this.setState({ navlist: model })
+    Bus.emit('navlist', model)
   }
   
   onUploadError = (type, data) => {
@@ -105,20 +112,24 @@ export default class edittemplate extends React.Component {
     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) => {
@@ -227,11 +238,13 @@ export default class edittemplate extends React.Component {
                   let model2 = this.state.navlist;
                   model2[0].text = e;
                   this.setState({ navlist: model2 })
+                  Bus.emit('navlist', model2)
                 }}
                   onClearItem={(e) => {
                     let model2 =this.state.navlist;
-                    model2[0].text = e;
+                    model2[0].text = '';
-                    this.setState({ navlist: '' })
+                    this.setState({ navlist: model2 })
+                    Bus.emit('navlist', model2)
                   }}
                   value={this.state.navlist[0].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>
@@ -279,12 +292,14 @@ export default class edittemplate extends React.Component {
                 <Ipt onChange={(e) => {
                   let model2 = this.state.navlist;
                   model2[1].text = e;
+                  Bus.emit('navlist', model2)
                   this.setState({ navlist: model2 })
                 }}
                   onClearItem={(e) => {
                     let model2 =this.state.navlist;
-                    model2[1].text = e;
+                    model2[1].text = '';
-                    this.setState({ navlist: '' })
+                    Bus.emit('navlist', model2)
+                    this.setState({ navlist: model2 })
                   }}
                   value={this.state.navlist[1].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>
@@ -333,11 +348,13 @@ export default class edittemplate extends React.Component {
                   let model2 = this.state.navlist;
                   model2[2].text = e;
                   this.setState({ navlist: model2 })
+                  Bus.emit('navlist', model2)
                 }}
                   onClearItem={(e) => {
                     let model2 =this.state.navlist;
-                    model2[2].text = e;
+                    model2[2].text = '';
-                    this.setState({ navlist: '' })
+                    this.setState({ navlist:model2})
+                    Bus.emit('navlist', model2)
                   }}
                   value={this.state.navlist[2].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import "./comm.less"
+import '@/assets/comm.css'
+export default class bottomBar extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state={
+            navList:[],
+            active:0
+        }
+    }
+    componentWillReceiveProps(nextProps){
+        let navList=nextProps.bottomBarConfig.navlist;
+        let naVisual=navList.filter(item=>item.switch);
+        this.setState({navList:naVisual});
+    }
+    clickIcon(e,index){
+        this.setState({active:index});
+    }
+    render() {
+        let active=this.state.active;
+        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)=>{
+                    return(
+                        <li onClick={e=>this.clickIcon(e,index)}>
+                            <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> 
+                    )
+                })
+            }
+            </ul>
+        )
+    }
+}

src/pages/exchangepage/edittemplate/couponConfig/comm.less

@@ -15,3 +15,31 @@
         text-overflow:ellipsis;
     }
 }
+//底部栏目
+.bottomBar-view{
+    width: 100%;
+    height: 50px;
+    background: #f00;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: space-evenly;
+}
+.bottomBar-view>li{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+}
+.bottomBar-view>li>img{
+    width: 20px;
+    height: 20px;
+    // padding-bottom:5px;
+}
+.bottomBar-view>li>span{
+    padding-top: 5px;
+    font-size: 12px;
+}

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -2,7 +2,8 @@ import React  from 'react';
 import "./main.less"
 import "../../../assets/comm.css"
 import './goodstemplate.less'
-import SearchBarView from './couponConfig/searchBar' //商品详情立减金页面
+import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
+import BottomBarView from './couponConfig/bottomBar' //底部栏
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -39,6 +40,10 @@ 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? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>:null
+         
+        }
       </div>
     )
   }

src/pages/exchangepage/edittemplate/main.js

@@ -218,6 +218,27 @@ export default class edittemplate extends React.Component {
       titleConfig.title.fontSize = prop
       this.setState({ product_list: titleConfig })
     })
+    //底部栏
+    Bus.addListener('navlist', (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
+      this.setState({ product_list: bottomConfig })
+    })
     setTimeout(() => {
       let img = document.getElementById('center-img')
       let center = document.getElementById('center')