完成落地页编辑器底部栏数据组装
This commit is contained in:
parent
b04840493a
commit
c47be2cc40
|
@ -7,93 +7,92 @@ import { uploadImg, handelResponse } from "@/assets/api.js"
|
||||||
import Ipt from "@/components/input/main"
|
import Ipt from "@/components/input/main"
|
||||||
import '@/assets/comm.css'
|
import '@/assets/comm.css'
|
||||||
import './comm.less'
|
import './comm.less'
|
||||||
|
import _ from 'lodash'
|
||||||
export default class edittemplate extends React.Component {
|
export default class edittemplate extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.state = {
|
this.state = {
|
||||||
model: {
|
switch:false,
|
||||||
top_image: "",
|
comType:1,
|
||||||
list: "2",
|
navlist:[
|
||||||
font_color: "#000000",
|
{
|
||||||
button_color: "#FACD6A",
|
id:1,
|
||||||
describe: { type: "", content: "", bg_image: '' },
|
switch:false,
|
||||||
checkedLarge: false
|
name:'index',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'首页'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
switch:false,
|
||||||
|
name:'order',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'订单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:3,
|
||||||
|
switch:false,
|
||||||
|
name:'coupon',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'我的券'
|
||||||
}
|
}
|
||||||
|
],
|
||||||
|
defaultText:'',
|
||||||
|
selectText:'',
|
||||||
|
background:''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
componentWillMount(e) {
|
componentWillMount(e) {
|
||||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||||
if (config && config.couponList && config.couponList.product_list) {
|
if (config && config.couponList && config.couponList.product_list) {
|
||||||
this.setState({ model: config.couponList.product_list });
|
let { navlist, defaultText, selectText, background } = config.couponList.product_list.bottomBar;
|
||||||
|
this.setState({ navlist, defaultText, selectText, background });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
onListChange(e) {
|
|
||||||
let model = this.state.model;
|
|
||||||
model.list = e.target.value;
|
|
||||||
this.setState({ model: model })
|
|
||||||
this.props.setarrayType(e.target.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
//活动说明
|
//样式
|
||||||
onactivityChange(e) {
|
onstyleChange(e) {
|
||||||
let model1 = this.state.model;
|
this.setState({ comType: e.target.value })
|
||||||
model1.describe.type = e.target.value;
|
|
||||||
this.setState({ model: model1 })
|
|
||||||
this.props.setactiveType(e.target.value);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hasItemFn(c) {
|
hasItemFn(c) {
|
||||||
let model1 = this.state.model;
|
|
||||||
if (c == model1.describe.type) {
|
|
||||||
model1.describe.type = '';
|
|
||||||
this.setState({ model: model1 });
|
|
||||||
this.props.setactiveType('');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//顶部banner
|
//首页/订单/我的券
|
||||||
onUploadChange(files) {
|
upImgChange(index,type,files) {
|
||||||
if (files.length > 0 && files[0].status == "success") {
|
if (files.length > 0 && files[0].status == "success") {
|
||||||
let model = this.state.model;
|
let model = this.state.navlist;
|
||||||
model.top_image = files[0].src;
|
model[index].pic[type] = files[0].src;
|
||||||
this.setState({ model: model })
|
this.setState({ navlist: model })
|
||||||
this.props.setbanner(files[0].src);
|
|
||||||
} else {
|
} else {
|
||||||
let model = this.state.model;
|
let model = this.state.navlist;
|
||||||
model.top_image = '';
|
model[index].pic[type] ='';
|
||||||
this.setState({ model: model })
|
this.setState({ navlist: model })
|
||||||
this.props.setbanner("");
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
//背景图
|
||||||
handleChangeLarge = checked => {
|
onUploadChange(files){
|
||||||
this.setState({ checkedLarge: checked });
|
|
||||||
}
|
|
||||||
//富文本
|
|
||||||
getEditext(c) {
|
|
||||||
let model1 = this.state.model;
|
|
||||||
model1.describe.content = c;
|
|
||||||
this.setState({ model: model1 });
|
|
||||||
this.props.seteditorHtml(c);
|
|
||||||
}
|
|
||||||
|
|
||||||
//底部描述图
|
|
||||||
onUploadChange2(files) {
|
|
||||||
if (files.length > 0 && files[0].status == "success") {
|
if (files.length > 0 && files[0].status == "success") {
|
||||||
let model1 = this.state.model;
|
this.setState({ background: files[0].src })
|
||||||
model1.describe.bg_image = files[0].src;
|
|
||||||
this.setState({ model: model1 })
|
|
||||||
this.props.setbottomImg(files[0].src);
|
|
||||||
} else {
|
} else {
|
||||||
let model1 = this.state.model;
|
this.setState({ background: '' })
|
||||||
model1.describe.bg_image = '';
|
}
|
||||||
this.setState({ model: model1 })
|
}
|
||||||
this.props.setbottomImg("");
|
handleChangeStatus = (index,checked) => {
|
||||||
|
let model = this.state.navlist;
|
||||||
|
model[index].switch= checked;
|
||||||
|
this.setState({ navlist: model })
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onUploadError = (type, data) => {
|
onUploadError = (type, data) => {
|
||||||
if (type === 'overMaxAmount') {
|
if (type === 'overMaxAmount') {
|
||||||
|
@ -102,41 +101,28 @@ export default class edittemplate extends React.Component {
|
||||||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
handleChange = (color) => {
|
handleFont = (color) => {
|
||||||
let model1 = this.state.model;
|
|
||||||
model1.font_color = color;
|
|
||||||
this.setState({
|
this.setState({
|
||||||
model: model1
|
defaultText: color
|
||||||
});
|
});
|
||||||
this.props.setButtonbgcolor(color);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
handleChange1 = (color) => {
|
handleSelectFont = (color) => {
|
||||||
let model1 = this.state.model;
|
|
||||||
model1.button_color = color;
|
|
||||||
this.setState({
|
this.setState({
|
||||||
model: model1
|
selectText: color
|
||||||
});
|
});
|
||||||
this.props.setButtoncolor(color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 字体颜色
|
// 字体颜色
|
||||||
fontcolor(cor) {
|
fontcolor(cor) {
|
||||||
let models = this.state.model;
|
this.setState({ defaultText: cor });
|
||||||
models.button_color = cor;
|
|
||||||
this.setState({ model: models });
|
|
||||||
this.props.setButtoncolor(cor);
|
|
||||||
}
|
}
|
||||||
// 背景颜色
|
//选中颜色
|
||||||
bgcolor(cor) {
|
selectfontcolor(cor){
|
||||||
let models = this.state.model;
|
this.setState({ selectText: cor });
|
||||||
models.font_color = cor;
|
|
||||||
this.setState({ model: models });
|
|
||||||
this.props.setButtonbgcolor(cor);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpload = (file, report) => {
|
onUpload = (file, report) => {
|
||||||
let self = this;
|
let self = this;
|
||||||
console.log('上传头像', file);
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let path = ""
|
let path = ""
|
||||||
let formdata = new FormData();
|
let formdata = new FormData();
|
||||||
|
@ -145,53 +131,36 @@ export default class edittemplate extends React.Component {
|
||||||
uploadImg(formdata).then((res) => {
|
uploadImg(formdata).then((res) => {
|
||||||
handelResponse(res, (req, msg) => {
|
handelResponse(res, (req, msg) => {
|
||||||
path = req.path;
|
path = req.path;
|
||||||
|
|
||||||
}, (err) => {
|
}, (err) => {
|
||||||
reject();
|
reject();
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
let count = 0;
|
let count = 0;
|
||||||
const update = () => {
|
const update = () => {
|
||||||
if (path) {
|
if (path) {
|
||||||
|
|
||||||
resolve(
|
resolve(
|
||||||
path
|
path
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
||||||
if (count < 100) {
|
if (count < 100) {
|
||||||
count += 2;
|
count += 2;
|
||||||
report(count);
|
report(count);
|
||||||
setTimeout(update, 500);
|
setTimeout(update, 500);
|
||||||
console.log("上传中")
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
|
||||||
reject();
|
reject();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
setTimeout(update, 500);
|
setTimeout(update, 500);
|
||||||
});
|
});
|
||||||
|
|
||||||
};
|
};
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||||
if (oldobj && oldobj.couponList) {
|
let couponList = oldobj.couponList;
|
||||||
let couponList = oldobj.couponList
|
couponList.product_list.bottomBar = _.cloneDeep(this.state);
|
||||||
couponList.product_list = this.state.model;
|
|
||||||
oldobj.couponList = couponList;
|
oldobj.couponList = couponList;
|
||||||
} else {
|
|
||||||
oldobj = {}
|
|
||||||
let couponList = {}
|
|
||||||
couponList.product_list = this.state.model;
|
|
||||||
oldobj.couponList = couponList;
|
|
||||||
}
|
|
||||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
|
@ -204,14 +173,14 @@ export default class edittemplate extends React.Component {
|
||||||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||||
<Form model={this.state.model} ref="form1">
|
<Form model={this.state.model} ref="form1">
|
||||||
<div className="activeTip">
|
<div className="activeTip">
|
||||||
<FormItem required={false} labelname="组件样式:" prop="bottom" id="bottom" labelwidth="100px">
|
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
|
||||||
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
|
<RadioGroup onChange={(e) => { this.onstyleChange(e) }} value={this.state.comType}>
|
||||||
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>默认</RadioButton>
|
<RadioButton onClick={() => this.hasItemFn(1)} value={1}>默认</RadioButton>
|
||||||
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>自定义</RadioButton>
|
<RadioButton onClick={() => this.hasItemFn(2)} value={2}>自定义</RadioButton>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<FormItem required={false} labelname="上传图标:" prop="bottom" id="bottom" labelwidth="100px">
|
<FormItem required={false} labelname="上传图标:" labelwidth="100px">
|
||||||
<p className="tips">(建议上传宽高为<span>100*100</span>像素的<span>.png</span>图片)</p>
|
<p className="tips">(建议上传宽高为<span>100*100</span>像素的<span>.png</span>图片)</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<div className="component-item">
|
<div className="component-item">
|
||||||
|
@ -219,8 +188,8 @@ export default class edittemplate extends React.Component {
|
||||||
<span>首页</span>
|
<span>首页</span>
|
||||||
<p className="dflexacsa"><span className="showType">显示</span>
|
<p className="dflexacsa"><span className="showType">显示</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={this.state.checkedLarge}
|
checked={this.state.navlist[0].switch}
|
||||||
onChange={this.handleChangeLarge}
|
onChange={checked=>this.handleChangeStatus(0,checked)}
|
||||||
/></p>
|
/></p>
|
||||||
</div>
|
</div>
|
||||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||||
|
@ -232,9 +201,9 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="默认图"
|
tips="默认图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(0,'show',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[0].pic.show ? [{ 'src': this.state.navlist[0].pic.show }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
|
@ -244,28 +213,27 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="选中图"
|
tips="选中图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(0,'selectShow',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[0].pic.selectShow ? [{ 'src': this.state.navlist[0].pic.selectShow }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem labelname="导航文本:" prop="title" id="title" labelwidth="100px">
|
<FormItem labelname="导航文本:" labelwidth="100px">
|
||||||
<Ipt onChange={(e) => {
|
<Ipt onChange={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 = this.state.navlist;
|
||||||
model2.title = e;
|
model2[0].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: model2 })
|
||||||
this.props.settitle(e)
|
|
||||||
}}
|
}}
|
||||||
onClearItem={(e) => {
|
onClearItem={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 =this.state.navlist;
|
||||||
model2.title = "";
|
model2[0].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: '' })
|
||||||
}}
|
}}
|
||||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
value={this.state.navlist[0].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<div className="component-item">
|
<div className="component-item">
|
||||||
|
@ -273,11 +241,11 @@ export default class edittemplate extends React.Component {
|
||||||
<span>订单</span>
|
<span>订单</span>
|
||||||
<p className="dflexacsa"><span className="showType">显示</span>
|
<p className="dflexacsa"><span className="showType">显示</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={this.state.checkedLarge}
|
checked={this.state.navlist[1].switch}
|
||||||
onChange={this.handleChangeLarge}
|
onChange={checked=>this.handleChangeStatus(1,checked)}
|
||||||
/></p>
|
/></p>
|
||||||
</div>
|
</div>
|
||||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
<FormItem labelname="添加图片:" labelwidth="100px">
|
||||||
<div className="dflexacsa">
|
<div className="dflexacsa">
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
className="zent-image-upload-demo choice-up-image"
|
className="zent-image-upload-demo choice-up-image"
|
||||||
|
@ -286,9 +254,9 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="默认图"
|
tips="默认图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(1,'show',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[1].pic.show ? [{ 'src': this.state.navlist[1].pic.show }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
|
@ -298,28 +266,27 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="选中图"
|
tips="选中图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(1,'show',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[1].pic.selectShow ? [{ 'src': this.state.navlist[1].pic.selectShow }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem labelname="导航文本:" prop="title" id="title" labelwidth="100px">
|
<FormItem labelname="导航文本:" labelwidth="100px">
|
||||||
<Ipt onChange={(e) => {
|
<Ipt onChange={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 = this.state.navlist;
|
||||||
model2.title = e;
|
model2[1].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: model2 })
|
||||||
this.props.settitle(e)
|
|
||||||
}}
|
}}
|
||||||
onClearItem={(e) => {
|
onClearItem={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 =this.state.navlist;
|
||||||
model2.title = "";
|
model2[1].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: '' })
|
||||||
}}
|
}}
|
||||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
value={this.state.navlist[1].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<div className="component-item">
|
<div className="component-item">
|
||||||
|
@ -327,11 +294,11 @@ export default class edittemplate extends React.Component {
|
||||||
<span>我的券</span>
|
<span>我的券</span>
|
||||||
<p className="dflexacsa"><span className="showType">显示</span>
|
<p className="dflexacsa"><span className="showType">显示</span>
|
||||||
<Switch
|
<Switch
|
||||||
checked={this.state.checkedLarge}
|
checked={this.state.navlist[2].switch}
|
||||||
onChange={this.handleChangeLarge}
|
onChange={checked=>this.handleChangeStatus(2,checked)}
|
||||||
/></p>
|
/></p>
|
||||||
</div>
|
</div>
|
||||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
<FormItem labelname="添加图片:" labelwidth="100px">
|
||||||
<div className="dflexacsa">
|
<div className="dflexacsa">
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
className="zent-image-upload-demo choice-up-image"
|
className="zent-image-upload-demo choice-up-image"
|
||||||
|
@ -340,9 +307,9 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="默认图"
|
tips="默认图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(2,'show',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[2].pic.show ? [{ 'src': this.state.navlist[2].pic.show }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
|
@ -352,64 +319,63 @@ export default class edittemplate extends React.Component {
|
||||||
multiple
|
multiple
|
||||||
sortable
|
sortable
|
||||||
tips="选中图"
|
tips="选中图"
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.upImgChange(2,'selectShow',e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.navlist[2].pic.selectShow ? [{ 'src': this.state.navlist[2].pic.selectShow }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem labelname="导航文本:" prop="title" id="title" labelwidth="100px">
|
<FormItem labelname="导航文本:" labelwidth="100px">
|
||||||
<Ipt onChange={(e) => {
|
<Ipt onChange={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 = this.state.navlist;
|
||||||
model2.title = e;
|
model2[2].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: model2 })
|
||||||
this.props.settitle(e)
|
|
||||||
}}
|
}}
|
||||||
onClearItem={(e) => {
|
onClearItem={(e) => {
|
||||||
let model2 = this.state.model;
|
let model2 =this.state.navlist;
|
||||||
model2.title = "";
|
model2[2].text = e;
|
||||||
this.setState({ model: model2 })
|
this.setState({ navlist: '' })
|
||||||
}}
|
}}
|
||||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
value={this.state.navlist[2].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<div className="color-control">
|
<div className="color-control">
|
||||||
<FormItem labelname="选中文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px">
|
<FormItem labelname="默认文字颜色:" labelwidth="140px">
|
||||||
<div className="colorItemfont dflexajce">
|
<div className="colorItemfont dflexajce">
|
||||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#000000') }}></span>
|
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.defaultText == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#fff') }}></span>
|
||||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
<span className={this.state.defaultText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
<span className={this.state.defaultText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
<span className={this.state.defaultText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
<span className={this.state.defaultText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||||
<div className="selfset">
|
<div className="selfset">
|
||||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
<ColorPicker className="setbgColor" color={this.state.defaultText} onChange={this.handleFont} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<div className="color-control">
|
<div className="color-control">
|
||||||
<FormItem labelname="默认文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px">
|
<FormItem labelname="选中文字颜色:" labelwidth="140px">
|
||||||
<div className="colorItemfont dflexajce">
|
<div className="colorItemfont dflexajce">
|
||||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></span>
|
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.selectText == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.selectfontcolor('#fff') }}></span>
|
||||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
<span className={this.state.selectText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.selectfontcolor('#04C160') }}></span>
|
||||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
<span className={this.state.selectText == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.selectfontcolor('#AE99D3') }}></span>
|
||||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
<span className={this.state.selectText == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.selectfontcolor('#FACD6A') }}></span>
|
||||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
<span className={this.state.selectText == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.selectfontcolor('#FE7962') }}></span>
|
||||||
<div className="selfset">
|
<div className="selfset">
|
||||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
<ColorPicker className="setbgColor" color={this.state.selectText} onChange={this.handleSelectFont} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
<FormItem required={false} labelname="背景图:" prop="bottom" id="bottom" labelwidth="100px">
|
<FormItem required={false} labelname="背景图:" labelwidth="100px">
|
||||||
<p className="tips">(建议上传宽高为<span>750*100</span>像素的图片)</p>
|
<p className="tips">(建议上传宽高为<span>750*100</span>像素的图片)</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<div className="component-item backpic-item">
|
<div className="component-item backpic-item">
|
||||||
|
|
||||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
<FormItem labelname="添加图片:" labelwidth="100px">
|
||||||
<div className="dflexacsa">
|
<div className="dflexacsa">
|
||||||
<ImageUpload
|
<ImageUpload
|
||||||
className="zent-image-upload-demo choice-up-image"
|
className="zent-image-upload-demo choice-up-image"
|
||||||
|
@ -419,7 +385,7 @@ export default class edittemplate extends React.Component {
|
||||||
sortable
|
sortable
|
||||||
onChange={(e) => { this.onUploadChange(e) }}
|
onChange={(e) => { this.onUploadChange(e) }}
|
||||||
onUpload={this.onUpload}
|
onUpload={this.onUpload}
|
||||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
defaultFileList={this.state.background ? [{ 'src': this.state.background }] : null}
|
||||||
onError={this.onUploadError}
|
onError={this.onUploadError}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -92,6 +92,44 @@ let couponProduct_list = {
|
||||||
textAlign: 'left',
|
textAlign: 'left',
|
||||||
fontColor: '#333',
|
fontColor: '#333',
|
||||||
fontSize: 1
|
fontSize: 1
|
||||||
|
},
|
||||||
|
bottomBar: {
|
||||||
|
switch:false,
|
||||||
|
navlist:[
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
switch:false,
|
||||||
|
name:'index',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'首页'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
switch:false,
|
||||||
|
name:'order',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'订单'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:3,
|
||||||
|
switch:false,
|
||||||
|
name:'coupon',
|
||||||
|
pic:{
|
||||||
|
show:'',
|
||||||
|
selectShow:''
|
||||||
|
},
|
||||||
|
text:'我的券'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
defaultText:'',
|
||||||
|
selectText:'',
|
||||||
|
background:''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default class edittemplate extends React.Component {
|
export default class edittemplate extends React.Component {
|
||||||
|
|
Loading…
Reference in New Issue