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-08 18:09:00 +08:00
parent eff0085d73
commit 3063dc1998
8 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/comm.css
View File

@ -172,15 +172,15 @@ input {
}
.center {
text-align: center;
justify-content: center!important;;
}
.left {
text-align: left;
justify-content: flex-start!important;;
}
.right {
text-align: right;
justify-content: flex-end!important;;
}
.square {

5
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
View File

@ -37,7 +37,10 @@ export default class componentLib extends React.Component {
componentWillUnmount() {}
propcomponentName(item){
this.props.componentName(item.name);
Bus.emit('componentLib',item)
if(item.name){
Bus.emit('componentLib',item)
}
}
render() {
return (

52
src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
View File

@ -15,6 +15,8 @@ export default class Searchbar extends React.Component {
shape: 'circular',
textAlign: 'left',
borderColor: '#333',
bgColor:'#a00',
fontColor:'#333',
placeholder: '请输入关键字搜索'
}
}
@ -43,11 +45,31 @@ export default class Searchbar extends React.Component {
});
Bus.emit('borderColor', color)
}
changebgColor = (color) => {
this.setState({
bgColor: color
});
Bus.emit('searchbgColor', color)
}
changefontColor = (color) => {
this.setState({
fontColor: color
});
Bus.emit('searchfontColor', color)
}
borderColorFn(cor) {
this.setState({ borderColor: cor });
Bus.emit('borderColor', cor)
}
bgColorFn(cor) {
this.setState({ bgColor: cor });
Bus.emit('searchbgColor', cor)
}
fontColorFn(cor) {
this.setState({ fontColor: cor });
Bus.emit('searchfontColor', cor)
}
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let couponList = oldobj.couponList;
@ -56,7 +78,7 @@ export default class Searchbar extends React.Component {
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
let { shape, textAlign, borderColor, placeholder } = this.state;
let { shape, textAlign, borderColor, placeholder,bgColor,fontColor } = this.state;
return (
<div className="assembly">
<div className='control page-title-control'>
@ -80,7 +102,7 @@ export default class Searchbar extends React.Component {
<RadioButton value={"right"}>居右</RadioButton>
</RadioGroup>
</FormItem>
<FormItem labelname="框体颜色:" labelwidth="80px">
<FormItem required={false} labelname="框体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#fff') }}></span>
<span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.borderColorFn('#04C160') }}></span>
@ -92,7 +114,31 @@ export default class Searchbar extends React.Component {
</div>
</div>
</FormItem>
<FormItem labelname="提示文字:" prop="title" id="title" labelwidth="100px">
<FormItem required={false} labelname="背景颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
<span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
<span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
<span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
<span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={bgColor} onChange={this.changebgColor} />
</div>
</div>
</FormItem>
<FormItem required={false} labelname="文字颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontColorFn('#fff') }}></span>
<span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontColorFn('#04C160') }}></span>
<span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontColorFn('#AE99D3') }}></span>
<span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontColorFn('#FACD6A') }}></span>
<span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontColorFn('#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={fontColor} onChange={this.changefontColor} />
</div>
</div>
</FormItem>
<FormItem required={false} labelname="提示文字:" labelwidth="100px">
<Ipt onChange={(e) => {
this.setState({ placeholder: e })
Bus.emit('placeholder', e)

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

@ -1,14 +1,16 @@
.searchBar-container{
padding: 4px 0;
box-sizing: border-box;
}
.searchBar{
display: flex;
justify-content: flex-end;
justify-content: space-between;
padding:0 15px;
justify-content: center;
padding:0 10px;
box-sizing: border-box;
i{
width: 16px;
}
.placeholder{
flex: 1;
white-space:nowrap; /* 不换行 */
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */

7
src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
View File

@ -7,15 +7,16 @@ export default class searchBar extends React.Component {
}
render() {
let searchConfig=this.props.searchConfig;
console.log(10,searchConfig);
return (
<div className={searchConfig.shape +' searchBar'} style={{border:'1px solid '+searchConfig.borderColor}}>
<div className="searchBar-container" style={{background:searchConfig.bgColor}}>
<div className={searchConfig.shape +' searchBar '+searchConfig.textAlign} style={{background:searchConfig.borderColor,color:searchConfig.fontColor}}>
<i className='marketing marketing-sousuo' />
<div className={searchConfig.textAlign +' placeholder'}>
<div className='placeholder'>
{searchConfig.placeholder}
</div>
</div>
</div>
)
}
}

6
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -118,7 +118,7 @@
}
.goodstemplate {
overflow-y: auto;
// overflow-y: auto;
.selectBorder {
z-index: 2;
-webkit-box-sizing: border-box;
@ -153,12 +153,12 @@
.searchBar {
width: 80%;
margin: 2% 10%;
margin: 2% 15%;
height: 40px;
line-height: 40px;
padding-left: 15px;
box-sizing: border-box;
border: 1px solid #333;
border:0;
border-radius: 20px;
}
}

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

@ -87,6 +87,8 @@ let couponProduct_list = {
shape: 'circular',
textAlign: 'left',
borderColor: '#333',
bgColor:'#a00',
fontColor:'#333',
placeholder: '请输入关键字搜索'
},
title: {
@ -212,6 +214,16 @@ export default class edittemplate extends React.Component {
searchConfig.search.borderColor = prop
this.setState({ product_list: searchConfig })
})
Bus.addListener('searchbgColor', (prop) => {
let searchConfig = this.state.product_list
searchConfig.search.bgColor = prop
this.setState({ product_list: searchConfig })
})
Bus.addListener('searchfontColor', (prop) => {
let searchConfig = this.state.product_list
searchConfig.search.fontColor = prop
this.setState({ product_list: searchConfig })
})
//标题设置
Bus.addListener('title', (prop) => {
let titleConfig = this.state.product_list

2
src/pages/exchangepage/edittemplate/main.less
View File

@ -8,7 +8,7 @@
// background-color: #f5f7f8;
height: 100%;
left: 0;
margin: 0 485px 0 250px;
margin: 0 430px 0 325px;
overflow-y: scroll;
position: absolute;
right: 0;