From 911194dcbbce53f23d25480972863fe519e82f77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Tue, 6 Sep 2022 15:56:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=90=BD=E5=9C=B0=E9=A1=B5?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E6=90=9C=E7=B4=A2=E6=A0=8F=E8=81=94?= =?UTF-8?q?=E5=8A=A8=E9=85=8D=E7=BD=AE=E9=A2=84=E8=A7=88=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goodsPage/config/bottomBar.js | 31 ++++++++++++---- .../edittemplate/couponConfig/bottomBar.js | 37 +++++++++++++++++++ .../edittemplate/couponConfig/comm.less | 28 ++++++++++++++ .../edittemplate/goodstemplate.js | 7 +++- src/pages/exchangepage/edittemplate/main.js | 21 +++++++++++ 5 files changed, 116 insertions(+), 8 deletions(-) create mode 100644 src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js index 4418c7f8..6c2faa4a 100644 --- 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'} /> @@ -279,12 +292,14 @@ export default class edittemplate extends React.Component { { 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'} /> @@ -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'} /> diff --git a/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js b/src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js new file mode 100644 index 00000000..57e3204a --- /dev/null +++ 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 ( + + ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/couponConfig/comm.less b/src/pages/exchangepage/edittemplate/couponConfig/comm.less index 2ecaf6ae..4608fa4b 100644 --- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less +++ b/src/pages/exchangepage/edittemplate/couponConfig/comm.less @@ -14,4 +14,32 @@ 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; } \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index a025b1f3..ec00ed6b 100644 --- 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 ? : null } + { + goodsConfig.bottomBar? :null + + } ) } diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 093053e0..52082b49 100644 --- 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')