Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5
This commit is contained in:
zhangds
commit
704b5ff62a
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,12 @@ export default class componentLib extends React.Component {
|
|||
//组件将要销毁阶段
|
||||
componentWillUnmount() {}
|
||||
propcomponentName(item){
|
||||
console.log(39,item);
|
||||
this.props.componentName(item.name);
|
||||
Bus.emit('componentLib',item)
|
||||
if(item.name){
|
||||
Bus.emit('componentLib',item)
|
||||
}
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
|
||||
import { ImageUpload, ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
|
||||
import "@/assets/comm.css"
|
||||
import Form from "@/components/form/main"
|
||||
import FormItem from "@/components/form-item/main"
|
||||
|
|
@ -11,25 +11,32 @@ export default class edittemplate extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
bgimg:''
|
||||
bgimg: '',
|
||||
bgColor: '#f2f3f4'
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount(e) {
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if (config && config.couponList && config.couponList.product_list) {
|
||||
let {bgimg}=config.couponList.product_list.backgroundImg;
|
||||
this.setState({ bgimg});
|
||||
let { bgimg } = config.couponList.product_list.backgroundImg;
|
||||
this.setState({ bgimg });
|
||||
}
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
this.setState({
|
||||
bgColor: color
|
||||
});
|
||||
Bus.emit('globalColor',color)
|
||||
}
|
||||
//顶部banner
|
||||
onUploadChange(files) {
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
this.setState({ bgimg: files[0].src })
|
||||
Bus.emit('bgImg', files[0].src)
|
||||
} else {
|
||||
this.setState({ bgimg: ''})
|
||||
Bus.emit('bgImg','')
|
||||
this.setState({ bgimg: '' })
|
||||
Bus.emit('bgImg', '')
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -89,9 +96,9 @@ export default class edittemplate extends React.Component {
|
|||
|
||||
componentWillUnmount() {
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
let couponList = oldobj.couponList;
|
||||
couponList.product_list.backgroundImg = _.cloneDeep(this.state);
|
||||
oldobj.couponList = couponList;
|
||||
let couponList = oldobj.couponList;
|
||||
couponList.product_list.backgroundImg = _.cloneDeep(this.state);
|
||||
oldobj.couponList = couponList;
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
render() {
|
||||
|
|
@ -102,7 +109,7 @@ export default class edittemplate extends React.Component {
|
|||
</div>
|
||||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<FormItem labelname="覆盖背景:" labelwidth="80px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -116,6 +123,18 @@ export default class edittemplate extends React.Component {
|
|||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColor('#fff') }}></span>
|
||||
<span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColor('#04C160') }}></span>
|
||||
<span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColor('#AE99D3') }}></span>
|
||||
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColor('#FACD6A') }}></span>
|
||||
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColor('#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -197,11 +197,8 @@ export default class edittemplate extends React.Component {
|
|||
<div className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>首页</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<Switch
|
||||
checked={this.state.navlist[0].iswitch}
|
||||
onChange={checked=>this.handleChangeStatus(0,checked)}
|
||||
/></p>
|
||||
<p className="dflexacsa"><span>显示</span>
|
||||
</p>
|
||||
</div>
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<div className="dflexacsa">
|
||||
|
|
@ -246,13 +243,13 @@ export default class edittemplate extends React.Component {
|
|||
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'} />
|
||||
value={this.state.navlist[0].text} placeholder={"首页"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
</div>
|
||||
<div className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>订单</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<p className="dflexacsa"><span className="showType">{this.state.navlist[1].iswitch?'显示':'隐藏'}</span>
|
||||
<Switch
|
||||
checked={this.state.navlist[1].iswitch}
|
||||
onChange={checked=>this.handleChangeStatus(1,checked)}
|
||||
|
|
@ -301,13 +298,13 @@ export default class edittemplate extends React.Component {
|
|||
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'} />
|
||||
value={this.state.navlist[1].text} placeholder={"订单"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
</div>
|
||||
<div className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>我的券</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<p className="dflexacsa"><span className="showType">{this.state.navlist[2].iswitch?'显示':'隐藏'}</span>
|
||||
<Switch
|
||||
checked={this.state.navlist[2].iswitch}
|
||||
onChange={checked=>this.handleChangeStatus(2,checked)}
|
||||
|
|
@ -356,7 +353,7 @@ export default class edittemplate extends React.Component {
|
|||
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'} />
|
||||
value={this.state.navlist[2].text} placeholder={"我的券"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
</div>
|
||||
<div className="color-control">
|
||||
|
|
|
|||
|
|
@ -13,8 +13,10 @@ export default class Searchbar extends React.Component {
|
|||
this.state = {
|
||||
switch:false,
|
||||
shape: 'circular',
|
||||
textAlign: 'left',
|
||||
textAlign: 'center',
|
||||
borderColor: '#333',
|
||||
bgColor:'#a00',
|
||||
fontColor:'#f3f4f5',
|
||||
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)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
|
||||
import { ColorPicker,ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
|
||||
import "@/assets/comm.css"
|
||||
import Form from "@/components/form/main"
|
||||
import FormItem from "@/components/form-item/main"
|
||||
|
|
@ -12,10 +12,12 @@ export default class Title extends React.Component {
|
|||
super(props)
|
||||
this.state = {
|
||||
switch:false,
|
||||
text: '',
|
||||
text: '商品标题',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
fontSize: 1
|
||||
fontSize: 1,
|
||||
comstyle:1,
|
||||
pic:''
|
||||
}
|
||||
}
|
||||
componentWillMount(e) {
|
||||
|
|
@ -50,6 +52,73 @@ export default class Title extends React.Component {
|
|||
this.setState({ fontSize: e.target.value })
|
||||
Bus.emit('fontSize', e.target.value)
|
||||
}
|
||||
styleChange(e){
|
||||
this.setState({ comstyle: e.target.value })
|
||||
Bus.emit('comstyle', e.target.value)
|
||||
}
|
||||
onUploadChange(files) {
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
this.setState({ pic: files[0].src })
|
||||
Bus.emit('titlePic', files[0].src)
|
||||
} else {
|
||||
this.setState({ pic: ''})
|
||||
Bus.emit('titlePic','')
|
||||
}
|
||||
};
|
||||
|
||||
onUploadError = (type, data) => {
|
||||
if (type === 'overMaxAmount') {
|
||||
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
|
||||
} else if (type === 'overMaxSize') {
|
||||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
onUpload = (file, report) => {
|
||||
let self = this;
|
||||
console.log('上传头像', file);
|
||||
return new Promise((resolve, reject) => {
|
||||
let path = ""
|
||||
let formdata = new FormData();
|
||||
formdata.append("file", file)
|
||||
formdata.append("path", "common_image")
|
||||
uploadImg(formdata).then((res) => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
path = req.path;
|
||||
|
||||
}, (err) => {
|
||||
reject();
|
||||
})
|
||||
});
|
||||
|
||||
let count = 0;
|
||||
const update = () => {
|
||||
if (path) {
|
||||
|
||||
resolve(
|
||||
path
|
||||
);
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
if (count < 100) {
|
||||
count += 2;
|
||||
report(count);
|
||||
setTimeout(update, 500);
|
||||
console.log("上传中")
|
||||
}
|
||||
else {
|
||||
|
||||
reject();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
setTimeout(update, 500);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
|
|
@ -60,14 +129,21 @@ export default class Title extends React.Component {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="assembly">
|
||||
<div className='control page-title-control'>
|
||||
<h1 style={{ fontSize: '16px' }}>标题设置</h1>
|
||||
</div>
|
||||
|
||||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="标题文字:" labelwidth="100px">
|
||||
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.styleChange(e) }} value={this.state.comstyle}>
|
||||
<RadioButton value={1}>文字</RadioButton>
|
||||
<RadioButton value={2}>图片</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
{
|
||||
this.state.comstyle==1?<div>
|
||||
<FormItem labelname="标题文字:" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
this.setState({ text: e })
|
||||
Bus.emit('title', e)
|
||||
|
|
@ -104,6 +180,22 @@ export default class Title extends React.Component {
|
|||
<RadioButton value={"big"}>A+</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</div>:<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.pic ? [{ 'src': this.state.pic }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
}
|
||||
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,14 +7,14 @@ 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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,72 +1,79 @@
|
|||
import React from 'react';
|
||||
import React from 'react';
|
||||
import "./main.less"
|
||||
import "../../../assets/comm.css"
|
||||
import './goodstemplate.less'
|
||||
import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
|
||||
import BottomBarView from './couponConfig/bottomBar' //底部栏
|
||||
import {Sweetalert} from 'zent'
|
||||
import { Sweetalert } from 'zent'
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
export default class edittemplate extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state={
|
||||
clientY:0,
|
||||
selectDom:'',
|
||||
icon:''
|
||||
this.state = {
|
||||
clientY: 0,
|
||||
selectDom: '',
|
||||
icon: '',
|
||||
}
|
||||
}
|
||||
opendescFn() {
|
||||
this.props.opendesc(true)
|
||||
}
|
||||
customComponent(e,name,icon){
|
||||
customComponent(e, name, icon) {
|
||||
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
|
||||
let b=this.refs[name];
|
||||
let offset_top=this.refs[name].getBoundingClientRect().top;
|
||||
this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
|
||||
if(name=='searchBar'){
|
||||
this.setState({clientY:0});
|
||||
let b = this.refs[name];
|
||||
let offset_top = this.refs[name].getBoundingClientRect().top;
|
||||
this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon });
|
||||
if (name == 'searchBar') {
|
||||
this.setState({ clientY: 0 });
|
||||
}
|
||||
if(name=='bottomBar'){
|
||||
this.setState({clientY:600});
|
||||
if (name == 'bottomBar') {
|
||||
this.setState({ clientY: 600 });
|
||||
}
|
||||
}
|
||||
deleteFn(){
|
||||
let selectDom=this.state.selectDom;//需删除组件名称
|
||||
deleteFn() {
|
||||
let selectDom = this.state.selectDom;//需删除组件名称
|
||||
Sweetalert.confirm({
|
||||
title:'确认信息',
|
||||
title: '确认信息',
|
||||
content: <p>确认删除该模块？</p>,
|
||||
onConfirm:()=>{
|
||||
this.setState({selectDom:''});
|
||||
Bus.emit('componentLibClose',selectDom)
|
||||
onConfirm: () => {
|
||||
this.setState({ selectDom: '' });
|
||||
Bus.emit('componentLibClose', selectDom)
|
||||
},
|
||||
onCancel:()=>{
|
||||
|
||||
onCancel: () => {
|
||||
|
||||
},
|
||||
parentComponent: this
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let goodsConfig=this.props.goodsdata;
|
||||
console.log(48,goodsConfig);
|
||||
let goodsConfig = this.props.goodsdata;
|
||||
let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
|
||||
let naVisual=bottomBar.navlist.filter(item=>item.iswitch);
|
||||
return (
|
||||
<div className="editor-main goodstemplate" style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
|
||||
<div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` :backgroundImg.bgColor }}>
|
||||
{
|
||||
goodsConfig.search&&goodsConfig.search.iswitch?
|
||||
<div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
|
||||
search && search.iswitch ?
|
||||
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
|
||||
}
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
|
||||
{
|
||||
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
|
||||
}
|
||||
{
|
||||
goodsConfig.picture&&goodsConfig.picture.iswitch? <div onClick={e=>this.customComponent(e,'picture','marketing-tupian')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
|
||||
{
|
||||
picture && picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={picture.img} alt="" className="picture" /></div> : null
|
||||
}
|
||||
{
|
||||
goodsConfig.title&&goodsConfig.title.iswitch?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div></div>:null
|
||||
title && title.iswitch && title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<div className={title.textAlign + ' content-title ' +title.fontSize} style={{ color: title.fontColor, fontWeight: 'bold' }}>{title.text}</div></div> : null
|
||||
}
|
||||
{
|
||||
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
|
||||
title && title.iswitch && title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<img src={title.pic} className="title-pic" />
|
||||
</div> : null
|
||||
}
|
||||
{
|
||||
(title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && picture.img ? <div className="parting-line"></div> : null
|
||||
}
|
||||
{
|
||||
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
|
||||
|
|
@ -81,17 +88,16 @@ 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&&goodsConfig.bottomBar.iswitch? <div ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
|
||||
|
||||
bottomBar && bottomBar.iswitch&&naVisual.length>1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></div> : null
|
||||
|
||||
}
|
||||
{
|
||||
this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
|
||||
<i className={'marketing '+this.state.icon}></i>
|
||||
<b className="split">|</b>
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
</div>:null
|
||||
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
|
||||
<i className={'marketing ' + this.state.icon}></i>
|
||||
<b className="split">|</b>
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
</div> : null
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
}
|
||||
|
||||
.goodstemplate {
|
||||
overflow-y: auto;
|
||||
// overflow-y: auto;
|
||||
.selectBorder {
|
||||
z-index: 2;
|
||||
-webkit-box-sizing: border-box;
|
||||
|
|
@ -129,6 +129,9 @@
|
|||
background: rgba(25,133,255,.2);
|
||||
content: "";
|
||||
}
|
||||
.title-pic{
|
||||
height:40px;
|
||||
}
|
||||
.selectBottomBorder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -153,12 +156,11 @@
|
|||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,21 +80,26 @@ let couponProduct_list = {
|
|||
},
|
||||
backgroundImg: {
|
||||
iswitch:false,
|
||||
bgImg: ''
|
||||
bgImg: '',
|
||||
bgColor:'#f2f3f4'
|
||||
},
|
||||
search: {
|
||||
iswitch: false,
|
||||
shape: 'circular',
|
||||
textAlign: 'left',
|
||||
textAlign: 'center',
|
||||
borderColor: '#333',
|
||||
bgColor:'#a00',
|
||||
fontColor:'#f3f4f5',
|
||||
placeholder: '请输入关键字搜索'
|
||||
},
|
||||
title: {
|
||||
iswitch: false,
|
||||
text: 'circular',
|
||||
text: '商品标题',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
fontSize: 1
|
||||
fontSize: 1,
|
||||
comstyle:1,
|
||||
pic:''
|
||||
},
|
||||
bottomBar: {
|
||||
iswitch:false,
|
||||
|
|
@ -192,6 +197,12 @@ export default class edittemplate extends React.Component {
|
|||
bgImgConfig.backgroundImg.bgImg = prop
|
||||
this.setState({ product_list: bgImgConfig })
|
||||
})
|
||||
Bus.addListener('globalColor', (prop) => {
|
||||
let bgImgConfig = this.state.product_list
|
||||
bgImgConfig.backgroundImg.bgColor = prop
|
||||
this.setState({ product_list: bgImgConfig })
|
||||
})
|
||||
|
||||
Bus.addListener('shape', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.shape = prop
|
||||
|
|
@ -212,7 +223,28 @@ 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('comstyle', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.comstyle = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
Bus.addListener('titlePic', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.pic = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
|
||||
Bus.addListener('title', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.text = prop
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue