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

2022-09-06 15:56:47 +08:00 · 2022-09-06 15:56:47 +08:00 · 911194dcbb
parent c47be2cc40
commit 911194dcbb
5 changed files with 116 additions and 8 deletions
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
+++ b/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;
-                    this.setState({ navlist: '' })
+                    model2[0].text = '';
+                    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;
-                    this.setState({ navlist: '' })
+                    model2[1].text = '';
+                    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;
-                    this.setState({ navlist: '' })
+                    model2[2].text = '';
+                    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>
--- a/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js
+++ b/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>
+        )
+    }
+}
--- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less
+++ b/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;
+}
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/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>
    )
  }
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/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')