完成编辑器背景图联动

This commit is contained in:
许红梅 2022-09-02 14:09:39 +08:00
parent ada8132384
commit d94593cdcf
6 changed files with 29 additions and 120 deletions

View File

@ -5,96 +5,34 @@ 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 Ipt from "@/components/input/main" import Ipt from "@/components/input/main"
import _ from "lodash";
import Bus from '@/assets/eventBus.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: { bgimg:''
top_image: "",
list: "2",
font_color: "#f1f2f3",
button_color: "#FACD6A",
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.couponList && config.couponList.product_list) { if (config && config.couponList && config.couponList.product_list) {
this.setState({ model: config.couponList.product_list }); let {bgimg}=config.couponList.product_list.backgroundImg;
this.setState({ bgimg});
} }
} }
onListChange(e) {
let model = this.state.model;
model.list = e.target.value;
this.setState({ model: model })
this.props.setarrayType(e.target.value);
}
//活动说明
onactivityChange(e) {
let model1 = this.state.model;
model1.describe.type = e.target.value;
this.setState({ model: model1 })
this.props.setactiveType(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 //顶部banner
onUploadChange(files) { onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model; this.setState({ bgimg: files[0].src })
model.top_image = files[0].src; Bus.emit('bgImg', files[0].src)
this.setState({ model: model })
this.props.setbanner(files[0].src);
} else { } else {
let model = this.state.model; this.setState({ bgimg: ''})
model.top_image = ''; Bus.emit('bgImg','')
this.setState({ model: model })
this.props.setbanner("");
} }
}; };
//悬浮富文本
getsusEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
}
//富文本
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") {
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;
model1.describe.bg_image = '';
this.setState({ model: model1 })
this.props.setbottomImg("");
}
};
onUploadError = (type, data) => { onUploadError = (type, data) => {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`); Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
@ -102,38 +40,6 @@ 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); console.log('上传头像', file);
@ -180,18 +86,12 @@ export default class edittemplate extends React.Component {
}); });
}; };
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.backgroundImg = _.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() {
@ -200,7 +100,6 @@ export default class edittemplate extends React.Component {
<div className='control page-title-control'> <div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>背景图设置</h1> <h1 style={{ fontSize: '16px' }}>背景图设置</h1>
</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.model} ref="form1"> <Form model={this.state.model} ref="form1">
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
@ -213,7 +112,7 @@ export default class edittemplate extends React.Component {
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
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.bgimg ? [{ 'src': this.state.bgimg }] : null}
onError={this.onUploadError} onError={this.onUploadError}
/> />
</FormItem> </FormItem>

View File

@ -96,7 +96,6 @@ export default class edittemplate extends React.Component {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let couponList = oldobj.couponList; let couponList = oldobj.couponList;
couponList.product_list.picture = _.cloneDeep(this.state); couponList.product_list.picture = _.cloneDeep(this.state);
console.log(100,couponList);
oldobj.couponList = couponList; oldobj.couponList = couponList;
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
} }

View File

@ -11,7 +11,7 @@ export default class edittemplate extends React.Component {
} }
render() { render() {
return ( return (
<div className="editor-main goodstemplate" > <div className="editor-main goodstemplate" style={{ background:this.props.goodsdata.backgroundImg&&this.props.goodsdata.backgroundImg.bgImg? `url('${this.props.goodsdata.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" /> <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{ {
!this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.top_image} /> !this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.top_image} />

View File

@ -179,3 +179,4 @@
.picture{ .picture{
width: 100%; width: 100%;
} }

View File

@ -74,6 +74,9 @@ let couponProduct_list = {
img:'', img:'',
jumpType:'0',//0不跳转 1跳转 jumpType:'0',//0不跳转 1跳转
jumpUrl:'' jumpUrl:''
},
backgroundImg:{
bgImg:''
} }
} }
export default class edittemplate extends React.Component { export default class edittemplate extends React.Component {
@ -115,6 +118,13 @@ export default class edittemplate extends React.Component {
coupongoodsConfig.picture.img = prop coupongoodsConfig.picture.img = prop
this.setState({ product_list: coupongoodsConfig }) this.setState({ product_list: coupongoodsConfig })
}) })
//背景图
Bus.addListener('bgImg', (prop) => {
let bgImgConfig = this.state.product_list
bgImgConfig.backgroundImg.bgImg = prop
this.setState({ product_list: bgImgConfig })
})
setTimeout(() => { setTimeout(() => {
let img = document.getElementById('center-img') let img = document.getElementById('center-img')
let center = document.getElementById('center') let center = document.getElementById('center')
@ -728,12 +738,13 @@ export default class edittemplate extends React.Component {
<h4>商品列表页:</h4> <h4>商品列表页:</h4>
<div <div
onClick={() => this.activeChoice(2)} onClick={() => this.activeChoice(2)}
className={ className={
this.state.activeNavStatus == 2 this.state.activeNavStatus == 2
? 'activeNav thumbheader' ? 'activeNav thumbheader'
: 'thumbheader' : 'thumbheader'
}> }>
<div className='goodsList-item' > <div className='goodsList-item' style={{ background:this.state.product_list.backgroundImg&&this.state.product_list.backgroundImg.bgImg? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
<img <img
src={ src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'

View File

@ -587,7 +587,6 @@
border: 1px solid #f1f2f3; border: 1px solid #f1f2f3;
align-self: center; align-self: center;
cursor: pointer; cursor: pointer;
&.activeNav { &.activeNav {
border: 5px solid #DDEEFF; border: 5px solid #DDEEFF;
} }