HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
许红梅 2022-09-06 15:56:47 +08:00
parent c47be2cc40
commit 911194dcbb
5 changed files with 116 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
View File

@ -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>

37
src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js Normal file
View File

@ -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>
)
}
}

28
src/pages/exchangepage/edittemplate/couponConfig/comm.less
View File

@ -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;
}

7
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -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>
)
}

21
src/pages/exchangepage/edittemplate/main.js
View File

@ -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')