完成营销系统编辑器搜索栏框体颜色及文本对齐配置
This commit is contained in:
许红梅
parent
e54d19407f
commit
c199ce1f0a
|
|
@ -142,3 +142,6 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
|
|||
.right{
|
||||
text-align: right;
|
||||
}
|
||||
.square{
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { uploadImg, handelResponse } from "@/assets/api.js"
|
|||
import Ipt from "@/components/input/main"
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
import _ from 'lodash'
|
||||
export default class edittemplate extends React.Component {
|
||||
export default class Searchbar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
|
|
@ -44,7 +44,6 @@ export default class edittemplate extends React.Component {
|
|||
Bus.emit('borderColor', color)
|
||||
}
|
||||
|
||||
// 字体颜色
|
||||
borderColorFn(cor) {
|
||||
this.setState({ borderColor: cor });
|
||||
Bus.emit('borderColor', cor)
|
||||
|
|
@ -83,7 +82,7 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem>
|
||||
<FormItem labelname="框体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#f0f') }}></span>
|
||||
<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>
|
||||
<span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.borderColorFn('#AE99D3') }}></span>
|
||||
<span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.borderColorFn('#FACD6A') }}></span>
|
||||
|
|
@ -102,7 +101,7 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ placeholder: '' })
|
||||
Bus.emit('placeholder', '')
|
||||
}}
|
||||
value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={18} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={10} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,23 +5,24 @@ import Form from "@/components/form/main"
|
|||
import FormItem from "@/components/form-item/main"
|
||||
import { uploadImg, handelResponse } from "@/assets/api.js"
|
||||
import Ipt from "@/components/input/main"
|
||||
export default class edittemplate extends React.Component {
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
import _ from 'lodash'
|
||||
export default class Title extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
model: {
|
||||
top_image: "",
|
||||
list: "2",
|
||||
font_color: "#f1f2f3",
|
||||
button_color: "#FACD6A",
|
||||
describe: { type: "", content: "", bg_image: '' }
|
||||
}
|
||||
switch:false,
|
||||
text: 'circular',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
fontSize: 1
|
||||
}
|
||||
}
|
||||
componentWillMount(e) {
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if (config && config.couponList && config.couponList.product_list) {
|
||||
this.setState({ model: config.couponList.product_list });
|
||||
let { text, textAlign, fontColor, fontSize } = config.couponList.product_list.title;
|
||||
this.setState({ text, textAlign, fontColor, fontSize });
|
||||
}
|
||||
}
|
||||
onListChange(e) {
|
||||
|
|
@ -182,16 +183,9 @@ export default class edittemplate extends React.Component {
|
|||
};
|
||||
componentWillUnmount() {
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if (oldobj && oldobj.couponList) {
|
||||
let couponList = oldobj.couponList
|
||||
couponList.product_list = this.state.model;
|
||||
let couponList = oldobj.couponList;
|
||||
couponList.product_list.title = _.cloneDeep(this.state);
|
||||
oldobj.couponList = couponList;
|
||||
} else {
|
||||
oldobj = {}
|
||||
let couponList = {}
|
||||
couponList.product_list = this.state.model;
|
||||
oldobj.couponList = couponList;
|
||||
}
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
render() {
|
||||
|
|
@ -205,8 +199,6 @@ export default class edittemplate extends React.Component {
|
|||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="标题文字:" prop="title" id="title" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,9 @@
|
|||
}
|
||||
.placeholder{
|
||||
flex: 1;
|
||||
white-space:nowrap; /* 不换行 */
|
||||
overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
||||
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ export default class searchBar extends React.Component {
|
|||
let searchConfig=this.props.searchConfig;
|
||||
console.log(10,searchConfig);
|
||||
return (
|
||||
<div className="searchBar">
|
||||
<div className={searchConfig.shape +' searchBar'} style={{border:'1px solid '+searchConfig.borderColor}}>
|
||||
<i className='marketing marketing-sousuo' />
|
||||
<div className={searchConfig.textAlign +' placeholder'}>
|
||||
{searchConfig.placeholder}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import Whitegoods from './whitegoods' //白名单商品页面
|
|||
import Whitedetails from './whitedetails' //白名单详情页
|
||||
import Reduce from './reduce' //商品详情页立减金
|
||||
import ReduceConfig from './reduceConfig' //商品详情立减金页面
|
||||
import SearchBarView from './couponConfig/searchBar' //商品详情立减金页面
|
||||
// 优惠券
|
||||
import CouponLandingForm from '../couponTemplate/landingPage/config/main' //优惠券落地页表单
|
||||
import CouponGoodsListForm from '../couponTemplate/goodsPage/config/main' //优惠券商品列表页
|
||||
|
|
@ -84,6 +85,13 @@ let couponProduct_list = {
|
|||
textAlign:'left',
|
||||
borderColor:'#333',
|
||||
placeholder:'请输入关键字搜索'
|
||||
},
|
||||
title:{
|
||||
switch:false,
|
||||
text: 'circular',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
fontSize: 1
|
||||
}
|
||||
}
|
||||
export default class edittemplate extends React.Component {
|
||||
|
|
@ -146,6 +154,11 @@ export default class edittemplate extends React.Component {
|
|||
searchConfig.search.placeholder = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('borderColor', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.borderColor = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
setTimeout(() => {
|
||||
let img = document.getElementById('center-img')
|
||||
let center = document.getElementById('center')
|
||||
|
|
@ -766,6 +779,9 @@ export default class edittemplate extends React.Component {
|
|||
: 'thumbheader'
|
||||
}>
|
||||
<div className='goodsList-item' style={{ background:this.state.product_list.backgroundImg&&this.state.product_list.backgroundImg.bgImg? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
|
||||
{
|
||||
this.state.product_list.search?<SearchBarView searchConfig={this.state.product_list.search}/>:null
|
||||
}
|
||||
<img
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'
|
||||
|
|
|
|||
|
|
@ -595,12 +595,19 @@
|
|||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.topbanner {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.searchBar{
|
||||
transform: scale(0.8);
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.marketing{
|
||||
width: 10px;
|
||||
}
|
||||
.bottom_Img {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue