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

Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

This commit is contained in:
zhangds 2022-09-21 18:06:58 +08:00
parent 530fe828db c877a44579
commit 86f4bad792
7 changed files with 346 additions and 548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js
View File

@ -204,7 +204,7 @@ export default class edittemplate extends React.Component {
<p className="dflexacsa"><span>显示</span> <p className="dflexacsa"><span>显示</span>
</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"

133
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/main.js
View File

@ -25,81 +25,60 @@ export default class couponGoodConfig extends React.Component {
} }
componentWillMount(e) { componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
this.setState({ model: config.coupon.product_list }); this.setState({ model: config.coupon.product_list });
} }
} configChange(attr,e) {
onListChange(e) {
let model = this.state.model; let model = this.state.model;
model.list = e.target.value; model[attr]= e.target.value;
this.setState({ model: model }) this.setState({ model: model })
this.props.setarrayType(e.target.value); this.props.setGoodConfig({attr,value:e.target.value});
} }
//活动说明 //活动说明
onactivityChange(e) { explainChange(attr,e){
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.type = e.target.value; model1.describe[attr] = e.target.value;
this.setState({ model: model1 }) this.setState({ model: model1 })
this.props.setactiveType(e.target.value); this.props.setexplainConfig({attr,value:e.target.value});
} }
hasItemFn(c) { hasItemFn(c) {
let model1 = this.state.model; let model1 = this.state.model;
if (c == model1.describe.type) { if (c == model1.describe.type) {
model1.describe.type = ''; model1.describe.type = '';
this.setState({ model: model1 }); this.setState({ model: model1 });
this.props.setactiveType(''); this.props.setexplainConfig({attr:'type',value:''});
} }
} }
//顶部banner //顶部banner
onUploadChange(files) { onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(files[0].src);
} else {
let model = this.state.model; let model = this.state.model;
model.top_image = ''; model.top_image = '';
this.setState({ model: model }) this.props.setGoodConfig({attr:'top_image',value:''});
this.props.setbanner(""); if (files.length > 0 && files[0].status == "success") {
model.top_image = files[0].src;
this.props.setGoodConfig({attr:'top_image',value:files[0].src});
} }
}; this.setState({ model: model })
};
//悬浮富文本 //悬浮富文本
getsusEditext(c) { getsusEditext(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.content = c; model1.describe.content = c;
this.setState({ model: model1 }); this.setState({ model: model1 });
this.props.seteditorHtml(c); this.props.setexplainConfig({attr:'content',value:c});
}
//富文本
getEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
} }
//底部描述图 //底部描述图
onUploadChange2(files) { onUploadChange2(files) {
if (files.length > 0 && files[0].status == "success") {
let model1 = this.state.model;
model1.describe.bg_image = files[0].src;
this.setState({ model: model1 })
this.props.setbottomImg(files[0].src);
} else {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.bg_image = ''; model1.describe.bg_image = '';
this.setState({ model: model1 }) this.props.setexplainConfig({attr:'bg_image',value:''});
this.props.setbottomImg(""); if (files.length > 0 && files[0].status == "success") {
model1.describe.bg_image = files[0].src;
this.props.setexplainConfig({attr:'bg_image',value:files[0].src});
} }
this.setState({ model: model1 })
}; };
onUploadError = (type, data) => { onUploadError = (type, data) => {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`); Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
@ -107,41 +86,16 @@ export default class couponGoodConfig extends React.Component {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
handleChange = (color) => { controlColor = (attr,color) => {
let model1 = this.state.model; let model1 = this.state.model;
model1.font_color = color; model1[attr] = color;
this.setState({ this.setState({
model: model1 model: model1
}); });
this.props.setButtonbgcolor(color); this.props.setGoodConfig({attr,value:color});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.button_color = color;
this.setState({
model: model1
});
this.props.setButtoncolor(color);
}
// 字体颜色
fontcolor(cor) {
let models = this.state.model;
models.button_color = cor;
this.setState({ model: models });
this.props.setButtoncolor(cor);
}
// 背景颜色
bgcolor(cor) {
let models = this.state.model;
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();
@ -187,16 +141,9 @@ export default class couponGoodConfig extends React.Component {
}; };
componentWillUnmount() { componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.coupon) {
let coupon = oldobj.coupon let coupon = oldobj.coupon
coupon.product_list = this.state.model; coupon.product_list = this.state.model;
oldobj.coupon = coupon; oldobj.coupon = coupon;
} else {
oldobj = {}
let coupon = {}
coupon.product_list = this.state.model;
oldobj.coupon = coupon;
}
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
} }
render() { render() {
@ -212,8 +159,8 @@ export default class couponGoodConfig extends React.Component {
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
<div style={{ fontWeight: 'bold' }}>样式</div> <div style={{ fontWeight: 'bold' }}>样式</div>
<div style={{ marginBottom: '24px' }}> <div style={{ marginBottom: '24px' }}>
<FormItem labelname="" prop="list" labelwidth="0px" required={false}> <FormItem labelname="" labelwidth="0px" required={false}>
<RadioGroup onChange={(e) => { this.onListChange(e) }} value={this.state.model.list}> <RadioGroup onChange={(e) => { this.configChange('list',e) }} value={this.state.model.list}>
<RadioButton value={"2"}>轮播</RadioButton> <RadioButton value={"2"}>轮播</RadioButton>
<RadioButton value={"1"}>列表</RadioButton> <RadioButton value={"1"}>列表</RadioButton>
<RadioButton value={"3"}>矩阵</RadioButton> <RadioButton value={"3"}>矩阵</RadioButton>
@ -221,31 +168,31 @@ export default class couponGoodConfig extends React.Component {
</FormItem> </FormItem>
</div> </div>
{ {
this.state.model.list == 2 ? <FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItembg dfleac" > <div className="colorItembg dfleac" >
<span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.bgcolor('#ffffff') }}></span> <span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('font_color','#ffffff') }}></span>
<span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span> <span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('font_color','#000000') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} /></div> <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c=>this.controlColor('font_color',c)} /></div>
</div> </div>
</FormItem> : null </FormItem> : null
} }
{ {
this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.fontcolor('#ffffff') }}></span> <span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('button_color','#ffffff') }}></span>
<span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span> <span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('button_color','#04C160') }}></span>
<span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span> <span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('button_color','#AE99D3') }}></span>
<span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span> <span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('button_color','#FACD6A') }}></span>
<span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span> <span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('button_color','#FE7962') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /> <ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={c=>this.controlColor('button_color',c)} />
</div> </div>
</div> </div>
</FormItem> : null </FormItem> : null
} }
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -262,8 +209,8 @@ export default class couponGoodConfig extends React.Component {
</FormItem> </FormItem>
<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.explainChange('type',e) }} value={this.state.model.describe.type}>
<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>
<RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton> <RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
@ -274,7 +221,7 @@ export default class couponGoodConfig extends React.Component {
</Tooltip> </Tooltip>
</div> </div>
{ {
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px"> this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -287,7 +234,7 @@ export default class couponGoodConfig extends React.Component {
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null} defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/> />
</FormItem> : this.state.model.describe.type == 2 ? <CouponWangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <CouponWangeditor pageType="goodeditor" setEdittext={c => this.getEditext(c)} /> : null </FormItem> : this.state.model.describe.type == 2 ? <CouponWangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <CouponWangeditor pageType="goodeditor" setEdittext={c => this.getsusEditext(c)} /> : null
} }
</Form> </Form>
</div> </div>

2
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/picture.js
View File

@ -106,7 +106,7 @@ export default class edittemplate extends React.Component {
</div> </div>
<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} ref="form1"> <Form model={this.state} ref="form1">
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="添加图片:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}

2
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/title.js
View File

@ -185,7 +185,7 @@ export default class Title extends React.Component {
<RadioButton value={"big"}>A+</RadioButton> <RadioButton value={"big"}>A+</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
</div>:<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px"> </div>:<FormItem labelname="添加图片:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}

153
src/pages/exchangepage/edittemplate/exchange/goodsPage.js
View File

@ -21,80 +21,61 @@ export default class edittemplate extends React.Component {
} }
componentWillMount(e) { componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.exchangeList && config.exchangeList.product_list) {
this.setState({ model: config.exchangeList.product_list }); this.setState({ model: config.exchangeList.product_list });
} }
} configChange(attr,e) {
onListChange(e) {
let model = this.state.model; let model = this.state.model;
model.list = e.target.value; model[attr]= e.target.value;
this.setState({ model: model }) this.setState({ model: model })
this.props.setarrayType(e.target.value); this.props.setGoodConfig({attr,value:e.target.value});
} }
//活动说明 //活动说明
onactivityChange(e) { explainChange(attr,e){
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.type = e.target.value; model1.describe[attr] = e.target.value;
this.setState({ model: model1 }) this.setState({ model: model1 })
this.props.setactiveType(e.target.value); this.props.setexplainConfig({attr,value:e.target.value});
} }
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) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(files[0].src);
} else {
let model = this.state.model;
model.top_image = '';
this.setState({ model: model })
this.props.setbanner("");
}
};
//悬浮富文本 //悬浮富文本
getsusEditext(c) { getsusEditext(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.content = c; model1.describe.content = c;
this.setState({ model: model1 }); this.setState({ model: model1 });
this.props.seteditorHtml(c); this.props.setexplainConfig({attr:'content',value:c});
} }
//富文本 hasItemFn(c) {
getEditext(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.content = c; if (c == model1.describe.type) {
model1.describe.type = '';
this.setState({ model: model1 }); this.setState({ model: model1 });
this.props.seteditorHtml(c); this.props.setexplainConfig({attr:'type',value:''});
}
} }
//底部描述图 //顶部banner
onUploadChange2(files) { onUploadChange(files) {
let model = this.state.model;
model.top_image = '';
this.props.setGoodConfig({attr:'top_image',value:''});
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model1 = this.state.model; model.top_image = files[0].src;
model1.describe.bg_image = files[0].src; this.props.setGoodConfig({attr:'top_image',value:files[0].src});
this.setState({ model: model1 })
this.props.setbottomImg(files[0].src);
} else {
let model1 = this.state.model;
model1.describe.bg_image = '';
this.setState({ model: model1 })
this.props.setbottomImg("");
} }
this.setState({ model: model })
}; };
//底部描述图
onUploadChange2(files) {
let model1 = this.state.model;
model1.describe.bg_image = '';
this.props.setexplainConfig({attr:'bg_image',value:''});
if (files.length > 0 && files[0].status == "success") {
model1.describe.bg_image = files[0].src;
this.props.setexplainConfig({attr:'bg_image',value:files[0].src});
}
this.setState({ model: model1 })
};
onUploadError = (type, data) => { onUploadError = (type, data) => {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
@ -103,41 +84,17 @@ export default class edittemplate extends React.Component {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
handleChange = (color) => { controlColor = (attr,color) => {
let model1 = this.state.model; let model1 = this.state.model;
model1.font_color = color; model1[attr] = color;
this.setState({ this.setState({
model: model1 model: model1
}); });
this.props.setButtonbgcolor(color); this.props.setGoodConfig({attr,value:color});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.button_color = color;
this.setState({
model: model1
});
this.props.setButtoncolor(color);
} }
// 字体颜色
fontcolor(cor) {
let models = this.state.model;
models.button_color = cor;
this.setState({ model: models });
this.props.setButtoncolor(cor);
}
// 背景颜色
bgcolor(cor) {
let models = this.state.model;
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();
@ -151,18 +108,14 @@ export default class edittemplate extends React.Component {
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);
@ -174,8 +127,6 @@ export default class edittemplate extends React.Component {
reject(); reject();
} }
} }
}; };
setTimeout(update, 500); setTimeout(update, 500);
}); });
@ -201,8 +152,8 @@ export default class edittemplate extends React.Component {
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
<div style={{ fontWeight: 'bold' }}>样式</div> <div style={{ fontWeight: 'bold' }}>样式</div>
<div style={{ marginBottom: '24px' }}> <div style={{ marginBottom: '24px' }}>
<FormItem labelname="" prop="list" labelwidth="0px" required={false}> <FormItem labelname="" labelwidth="0px" required={false}>
<RadioGroup onChange={(e) => { this.onListChange(e) }} value={this.state.model.list}> <RadioGroup onChange={(e) => { this.configChange('list',e) }} value={this.state.model.list}>
<RadioButton value={"2"}>轮播</RadioButton> <RadioButton value={"2"}>轮播</RadioButton>
<RadioButton value={"1"}>列表</RadioButton> <RadioButton value={"1"}>列表</RadioButton>
<RadioButton value={"3"}>矩阵</RadioButton> <RadioButton value={"3"}>矩阵</RadioButton>
@ -210,31 +161,31 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
</div> </div>
{ {
this.state.model.list == 2 ? <FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItembg dfleac" > <div className="colorItembg dfleac" >
<span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.bgcolor('#ffffff') }}></span> <span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('font_color','#ffffff') }}></span>
<span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span> <span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('font_color','#000000') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} /></div> <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c=>this.controlColor('font_color',c)} /></div>
</div> </div>
</FormItem> : null </FormItem> : null
} }
{ {
this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.fontcolor('#ffffff') }}></span> <span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('button_color','#ffffff') }}></span>
<span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span> <span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('button_color','#04C160') }}></span>
<span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span> <span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('button_color','#AE99D3') }}></span>
<span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span> <span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('button_color','#FACD6A') }}></span>
<span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span> <span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('button_color','#FE7962') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /> <ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={c=>this.controlColor('button_color',c)} />
</div> </div>
</div> </div>
</FormItem> : null </FormItem> : null
} }
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -251,8 +202,8 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
<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.explainChange('type',e) }} value={this.state.model.describe.type}>
<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>
<RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton> <RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
@ -263,7 +214,7 @@ export default class edittemplate extends React.Component {
</Tooltip> </Tooltip>
</div> </div>
{ {
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px"> this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -276,7 +227,7 @@ export default class edittemplate extends React.Component {
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null} defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/> />
</FormItem> : this.state.model.describe.type == 2 ? <Wangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <Wangeditor pageType="goodeditor" setEdittext={c => this.getEditext(c)} /> : null </FormItem> : this.state.model.describe.type == 2 ? <Wangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <Wangeditor pageType="goodeditor" setEdittext={c => this.getsusEditext(c)} /> : null
} }
</Form> </Form>
</div> </div>

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

@ -589,36 +589,25 @@ export default class edittemplate extends React.Component {
landConfig[c.attr]=c.value; landConfig[c.attr]=c.value;
this.setState({ model: landConfig }) this.setState({ model: landConfig })
} }
//商品列表页基础配置
//获取商品列表页数据 getGoodConfig(c){
getGoodsbanner(c) {
let goodsConfig = this.state.product_list let goodsConfig = this.state.product_list
goodsConfig.top_image = c goodsConfig[c.attr] = c.value;
this.setState({ product_list: goodsConfig }) this.setState({ product_list: goodsConfig })
} }
//商品列表页说明配置
getexplainConfig(c){
let goodsConfig = this.state.product_list
goodsConfig.describe[c.attr] = c.value
this.setState({ product_list: goodsConfig })
}
getgoodsbottomimgFn(c) { getgoodsbottomimgFn(c) {
let goodsConfig = this.state.product_list let goodsConfig = this.state.product_list
goodsConfig.describe.bg_image = c goodsConfig.describe.bg_image = c
this.setState({ product_list: goodsConfig }) this.setState({ product_list: goodsConfig })
} }
//获取商品排列方式
getarrayType(c) {
let goodsConfig = this.state.product_list
goodsConfig.list = c
this.setState({ product_list: goodsConfig })
}
//获取背景颜色
getButtonbgcolor(c) {
let goodsConfig = this.state.product_list
goodsConfig.font_color = c
this.setState({ product_list: goodsConfig })
}
//富文本
getEditorHtmlFn(c) {
let goodsConfig = this.state.product_list
goodsConfig.describe.content = c
this.setState({ product_list: goodsConfig })
}
//详情页 //详情页
getdetailEditorHtmlFn(c) { getdetailEditorHtmlFn(c) {
let detailpage = this.state.product_detail let detailpage = this.state.product_detail
@ -631,18 +620,8 @@ export default class edittemplate extends React.Component {
this.setState({ product_detail: detailpage }) this.setState({ product_detail: detailpage })
} }
//活动说明类型
getactiveTypeFn(c) {
let goodsConfig = this.state.product_list
goodsConfig.describe.type = c
this.setState({ product_list: goodsConfig })
}
//字体颜色
getButtoncolor(c) {
let goodsConfig = this.state.product_list
goodsConfig.button_color = c
this.setState({ product_list: goodsConfig })
}
onmodelChange(e) { onmodelChange(e) {
let editorData = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig'))) let editorData = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig')))
let holdData; let holdData;
@ -1170,17 +1149,8 @@ export default class edittemplate extends React.Component {
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
<GoodsForm <GoodsForm
setactiveType={(c) => this.getactiveTypeFn(c)} setexplainConfig={(c) => this.getexplainConfig(c)}
seteditorHtml={(c) => this.getEditorHtmlFn(c)} setGoodConfig={(c) => this.getGoodConfig(c)}
setButtonbgcolor={(c) => {
this.getButtonbgcolor(c)
}}
setButtoncolor={(c) => {
this.getButtoncolor(c)
}}
setbottomImg={(c) => this.getgoodsbottomimgFn(c)}
setbanner={(c) => this.getGoodsbanner(c)}
setarrayType={(c) => this.getarrayType(c)}
/> />
) : this.state.detailType == 1 ? ( ) : this.state.detailType == 1 ? (
<DetailsPage <DetailsPage
@ -1189,7 +1159,6 @@ export default class edittemplate extends React.Component {
setdetailbgc={(c) => { setdetailbgc={(c) => {
this.getdetailbgcolor(c) this.getdetailbgcolor(c)
}} }}
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)} setdetailftc={(c) => this.getdetailfont_color(c)}
/> />
) : <ReduceConfig /> ) : <ReduceConfig />
@ -1202,17 +1171,8 @@ export default class edittemplate extends React.Component {
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
<Whitegoods <Whitegoods
setactiveType={(c) => this.getactiveTypeFn(c)} setexplainConfig={(c) => this.getexplainConfig(c)}
seteditorHtml={(c) => this.getEditorHtmlFn(c)} setGoodConfig={(c) => this.getGoodConfig(c)}
setButtonbgcolor={(c) => {
this.getButtonbgcolor(c)
}}
setButtoncolor={(c) => {
this.getButtoncolor(c)
}}
setbottomImg={(c) => this.getgoodsbottomimgFn(c)}
setbanner={(c) => this.getGoodsbanner(c)}
setarrayType={(c) => this.getarrayType(c)}
/> />
) : this.state.detailType == 1 ? ( ) : this.state.detailType == 1 ? (
<Whitedetails <Whitedetails
@ -1221,7 +1181,6 @@ export default class edittemplate extends React.Component {
setdetailbgc={(c) => { setdetailbgc={(c) => {
this.getdetailbgcolor(c) this.getdetailbgcolor(c)
}} }}
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)} setdetailftc={(c) => this.getdetailfont_color(c)}
/> />
) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券 ) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券
@ -1232,18 +1191,9 @@ export default class edittemplate extends React.Component {
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
<CouponGoodsListForm <CouponGoodsListForm
setactiveType={(c) => this.getactiveTypeFn(c)}
seteditorHtml={(c) => this.getEditorHtmlFn(c)}
setButtonbgcolor={(c) => {
this.getButtonbgcolor(c)
}}
setButtoncolor={(c) => {
this.getButtoncolor(c)
}}
componentName={this.state.componentOfconfig} componentName={this.state.componentOfconfig}
setbottomImg={(c) => this.getgoodsbottomimgFn(c)} setexplainConfig={(c) => this.getexplainConfig(c)}
setbanner={(c) => this.getGoodsbanner(c)} setGoodConfig={(c) => this.getGoodConfig(c)}
setarrayType={(c) => this.getarrayType(c)}
/> />
) : this.state.detailType == 1 ? ( ) : this.state.detailType == 1 ? (
this.state.activeNavStatus == 1 ? this.state.activeNavStatus == 1 ?

272
src/pages/exchangepage/edittemplate/whiteList/whitegoods.js
View File

@ -1,105 +1,84 @@
import React from 'react'; import React from 'react';
import { ColorPicker,ImageUpload,Tooltip,Notify ,RadioGroup,RadioButton,Icon} from 'zent'; import { ColorPicker, ImageUpload, Tooltip, Notify, RadioGroup, RadioButton, Icon } from 'zent';
import "../main.less" import "../main.less"
import "@/assets/comm.css" import "@/assets/comm.css"
import Form from "@/components/form/main" import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main" import FormItem from "@/components/form-item/main"
import {uploadImg,handelResponse} from "@/assets/api.js" import { uploadImg, handelResponse } from "@/assets/api.js"
import Wangeditor from './whitewangeditor.js' import Wangeditor from './whitewangeditor.js'
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:{ model: {
top_image: "", top_image: "",
list: "2", list: "2",
font_color:"#ffffff", font_color: "#ffffff",
button_color: "#FACD6A", button_color: "#FACD6A",
describe: {type : "", content : "",bg_image:''} describe: { type: "", content: "", bg_image: '' }
} }
} }
} }
componentWillMount(e){ componentWillMount(e) {
let config=JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if(config&&config.whiteList&&config.whiteList.product_list){ if (config && config.whiteList && config.whiteList.product_list) {
this.setState({model:config.whiteList.product_list}); this.setState({ model: config.whiteList.product_list });
} }
} }
configChange(attr, e) {
onListChange(e){
let model = this.state.model; let model = this.state.model;
model.list = e.target.value; model[attr] = e.target.value;
this.setState({model:model}) this.setState({ model: model })
this.props.setarrayType(e.target.value); this.props.setGoodConfig({ attr, value: e.target.value });
} }
//活动说明 //活动说明
onactivityChange(e){ explainChange(attr, e) {
let model1=this.state.model; let model1 = this.state.model;
model1.describe.type=e.target.value; model1.describe[attr] = e.target.value;
this.setState({model:model1}) this.setState({ model: model1 })
this.props.setactiveType(e.target.value); this.props.setexplainConfig({ attr, value: e.target.value });
} }
hasItemFn(c) {
hasItemFn(c){ let model1 = this.state.model;
let model1=this.state.model; if (c == model1.describe.type) {
if(c==model1.describe.type){ model1.describe.type = '';
model1.describe.type=''; this.setState({ model: model1 });
this.setState({model:model1}); this.props.setexplainConfig({ attr: 'type', value: '' });
this.props.setactiveType('');
} }
} }
//顶部banner //顶部banner
onUploadChange(files){ onUploadChange(files) {
if(files.length > 0 && files[0].status == "success")
{
let model = this.state.model; let model = this.state.model;
model.top_image= files[0].src; model.top_image = '';
this.setState({model:model}) this.props.setGoodConfig({ attr: 'top_image', value: '' });
this.props.setbanner(files[0].src); if (files.length > 0 && files[0].status == "success") {
}else{ model.top_image = files[0].src;
let model = this.state.model; this.props.setGoodConfig({ attr: 'top_image', value: files[0].src });
model.top_image='';
this.setState({model:model})
this.props.setbanner("");
} }
this.setState({ model: model })
}; };
//悬浮富文本 //悬浮富文本
getsusEditext(c){ getsusEditext(c) {
let model1=this.state.model; let model1 = this.state.model;
model1.describe.content=c; model1.describe.content = c;
this.setState({model:model1}); this.setState({ model: model1 });
this.props.seteditorHtml(c); this.props.setexplainConfig({attr:'content',value:c});
} }
//富文本
getEditext(c){
let model1=this.state.model;
model1.describe.content=c;
this.setState({model:model1});
this.props.seteditorHtml(c);
}
//底部描述图 //底部描述图
onUploadChange2(files){ onUploadChange2(files) {
if(files.length > 0 && files[0].status == "success")
{
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.bg_image= files[0].src; model1.describe.bg_image = '';
this.setState({model:model1}) this.props.setexplainConfig({ attr: 'bg_image', value: '' });
this.props.setbottomImg(files[0].src); if (files.length > 0 && files[0].status == "success") {
}else{ model1.describe.bg_image = files[0].src;
let model1 = this.state.model; this.props.setexplainConfig({ attr: 'bg_image', value: files[0].src });
model1.describe.bg_image='';
this.setState({model:model1})
this.props.setbottomImg("");
} }
this.setState({ model: model1 })
}; };
onUploadError = (type, data) => { onUploadError = (type, data) => {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`); Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
@ -107,66 +86,32 @@ export default class edittemplate extends React.Component{
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
handleChange = (color) => {
let model1=this.state.model;
model1.font_color=color;
this.setState({
model:model1
});
this.props.setButtonbgcolor(color);
}
handleChange1 = (color) => {
let model1=this.state.model;
model1.button_color=color;
this.setState({
model:model1
});
this.props.setButtoncolor(color);
}
// 字体颜色
fontcolor(cor){
let models=this.state.model;
models.button_color=cor;
this.setState({model:models});
this.props.setButtoncolor(cor);
}
// 背景颜色
bgcolor(cor){
let models=this.state.model;
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();
formdata.append("file",file) formdata.append("file", file)
formdata.append("path","common_image") formdata.append("path", "common_image")
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;
@ -174,7 +119,7 @@ export default class edittemplate extends React.Component{
setTimeout(update, 500); setTimeout(update, 500);
console.log("上传中") console.log("上传中")
} }
else{ else {
reject(); reject();
} }
@ -186,33 +131,40 @@ export default class edittemplate extends React.Component{
}); });
}; };
controlColor = (attr, color) => {
let model1 = this.state.model;
model1[attr] = color;
componentWillUnmount(){ this.setState({
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig')); model: model1
if(oldobj&&oldobj.whiteList){ });
let whiteList=oldobj.whiteList; this.props.setGoodConfig({ attr, value: color });
whiteList.product_list=this.state.model;
oldobj.whiteList=whiteList;
}else{
let whiteList={}
whiteList.product_list=this.state.model;
oldobj.whiteList=whiteList;
}
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
} }
render(){ componentWillUnmount() {
return( let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
<div style={{width:"92%","margin":"0 auto","overflow":"auto", "maxHeight":"100%"}}> if (oldobj && oldobj.whiteList) {
let whiteList = oldobj.whiteList;
whiteList.product_list = this.state.model;
oldobj.whiteList = whiteList;
} else {
let whiteList = {}
whiteList.product_list = this.state.model;
oldobj.whiteList = whiteList;
}
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
return (
<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 style={{fontWeight:'bold'}}>样式</div> <div style={{ fontWeight: 'bold' }}>样式</div>
<div style={{marginBottom:'24px'}}> <div style={{ marginBottom: '24px' }}>
<FormItem labelname="" prop="list" labelwidth="0px" required={false}> <FormItem labelname="" labelwidth="0px" required={false}>
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.model.list}> <RadioGroup onChange={(e) => { this.configChange('list', e) }} value={this.state.model.list}>
<RadioButton value={"2"}>轮播</RadioButton> <RadioButton value={"2"}>轮播</RadioButton>
<RadioButton value={"1"}>列表</RadioButton> <RadioButton value={"1"}>列表</RadioButton>
<RadioButton value={"3"}>矩阵</RadioButton> <RadioButton value={"3"}>矩阵</RadioButton>
@ -220,34 +172,34 @@ export default class edittemplate extends React.Component{
</FormItem> </FormItem>
</div> </div>
{ {
this.state.model.list==2?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItembg dfleac" > <div className="colorItembg dfleac" >
<span className={this.state.model.font_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span> <span className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('font_color', '#ffffff') }}></span>
<span className={this.state.model.font_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span> <span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('font_color', '#000000') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} /></div> <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c => this.controlColor('font_color', c)} /></div>
</div> </div>
</FormItem>:null </FormItem> : null
} }
{ {
this.state.model.list==2?<FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px"> this.state.model.list == 2 ? <FormItem labelname="按钮颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <div className="colorItemfont dfleac">
<span className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.fontcolor('#ffffff')}}></span> <span className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.controlColor('button_color', '#ffffff') }}></span>
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span> <span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('button_color', '#04C160') }}></span>
<span className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"cicle cicle3"} onClick={()=>{this.fontcolor('#AE99D3')}}></span> <span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('button_color', '#AE99D3') }}></span>
<span className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"cicle cicle4"} onClick={()=>{this.fontcolor('#FACD6A')}}></span> <span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('button_color', '#FACD6A') }}></span>
<span className={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span> <span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('button_color', '#FE7962') }}></span>
<div className="selfset" > <div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /> <ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={c => this.controlColor('button_color', c)} />
</div> </div>
</div> </div>
</FormItem>:null </FormItem> : null
} }
<div style={{marginTop:'20px',fontWeight:'bold'}}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -255,21 +207,19 @@ export default class edittemplate extends React.Component{
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e)=>{this.onUploadChange(e)} } onChange={(e) => { this.onUploadChange(e) }}
onError={this.onUploadError}
onUpload={this.onUpload} onUpload={this.onUpload}
defaultFileList={ this.state.model.top_image ? [{'src':this.state.model.top_image}] : null } defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError} onError={this.onUploadError}
/> />
</FormItem> </FormItem>
<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.explainChange('type', e) }} value={this.state.model.describe.type}>
<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>
<RadioButton onClick={()=>this.hasItemFn(3)} value={"3"}>富文本</RadioButton> <RadioButton onClick={() => this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
@ -278,7 +228,7 @@ export default class edittemplate extends React.Component{
</Tooltip> </Tooltip>
</div> </div>
{ {
this.state.model.describe.type==1?<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px"> this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -286,12 +236,12 @@ export default class edittemplate extends React.Component{
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e)=>{this.onUploadChange2(e)} } onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{'src':this.state.model.describe.bg_image}] : null} defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/> />
</FormItem>:this.state.model.describe.type==2?<Wangeditor pageType="goodsuseditor" setEdittext={c=>this.getsusEditext(c)} />:this.state.model.describe.type==3?<Wangeditor pageType="goodeditor" setEdittext={c=>this.getEditext(c)}/>:null </FormItem> : this.state.model.describe.type == 2 ? <Wangeditor pageType="goodsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <Wangeditor pageType="goodeditor" setEdittext={c => this.getsusEditext(c)} /> : null
} }