diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js index 55d98d62..4418c7f8 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js @@ -7,94 +7,93 @@ import { uploadImg, handelResponse } from "@/assets/api.js" import Ipt from "@/components/input/main" import '@/assets/comm.css' import './comm.less' - +import _ from 'lodash' export default class edittemplate extends React.Component { constructor(props) { super(props) this.state = { - model: { - top_image: "", - list: "2", - font_color: "#000000", - button_color: "#FACD6A", - describe: { type: "", content: "", bg_image: '' }, - checkedLarge: false + switch:false, + comType:1, + 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:'' } } componentWillMount(e) { let config = JSON.parse(sessionStorage.getItem('editorConfig')); if (config && config.couponList && config.couponList.product_list) { - this.setState({ model: config.couponList.product_list }); + let { 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) { - let model1 = this.state.model; - model1.describe.type = e.target.value; - this.setState({ model: model1 }) - this.props.setactiveType(e.target.value); + //样式 + onstyleChange(e) { + this.setState({ comType: 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) { + //首页/订单/我的券 + upImgChange(index,type,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); + let model = this.state.navlist; + model[index].pic[type] = files[0].src; + this.setState({ navlist: model }) } else { - let model = this.state.model; - model.top_image = ''; - this.setState({ model: model }) - this.props.setbanner(""); + let model = this.state.navlist; + model[index].pic[type] =''; + this.setState({ navlist: model }) } }; - - handleChangeLarge = checked => { - 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) { + //背景图 + onUploadChange(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); + this.setState({ background: files[0].src }) } else { - let model1 = this.state.model; - model1.describe.bg_image = ''; - this.setState({ model: model1 }) - this.props.setbottomImg(""); + this.setState({ background: '' }) } - }; - - - + } + handleChangeStatus = (index,checked) => { + let model = this.state.navlist; + model[index].switch= checked; + this.setState({ navlist: model }) + } + onUploadError = (type, data) => { if (type === 'overMaxAmount') { Notify.error(`最多可上传 ${data.maxAmount} 张图片`); @@ -102,41 +101,28 @@ export default class edittemplate extends React.Component { Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); } }; - handleChange = (color) => { - let model1 = this.state.model; - model1.font_color = color; + handleFont = (color) => { this.setState({ - model: model1 + defaultText: color }); - this.props.setButtonbgcolor(color); - } - handleChange1 = (color) => { - let model1 = this.state.model; - model1.button_color = color; + handleSelectFont = (color) => { this.setState({ - model: model1 + selectText: color }); - this.props.setButtoncolor(color); } // 字体颜色 fontcolor(cor) { - let models = this.state.model; - models.button_color = cor; - this.setState({ model: models }); - this.props.setButtoncolor(cor); + this.setState({ defaultText: cor }); } - // 背景颜色 - bgcolor(cor) { - let models = this.state.model; - models.font_color = cor; - this.setState({ model: models }); - this.props.setButtonbgcolor(cor); + //选中颜色 + selectfontcolor(cor){ + this.setState({ selectText: cor }); } + onUpload = (file, report) => { let self = this; - console.log('上传头像', file); return new Promise((resolve, reject) => { let path = "" let formdata = new FormData(); @@ -145,53 +131,36 @@ export default class edittemplate extends React.Component { 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')); - if (oldobj && oldobj.couponList) { - let couponList = oldobj.couponList - couponList.product_list = this.state.model; - oldobj.couponList = couponList; - } else { - oldobj = {} - let couponList = {} - couponList.product_list = this.state.model; - oldobj.couponList = couponList; - } + let couponList = oldobj.couponList; + couponList.product_list.bottomBar = _.cloneDeep(this.state); + oldobj.couponList = couponList; sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); } render() { @@ -204,14 +173,14 @@ export default class edittemplate extends React.Component {
- - { this.onactivityChange(e) }} value={this.state.model.describe.type}> - this.hasItemFn(1)} value={"1"}>默认 - this.hasItemFn(2)} value={"2"}>自定义 + + { this.onstyleChange(e) }} value={this.state.comType}> + this.hasItemFn(1)} value={1}>默认 + this.hasItemFn(2)} value={2}>自定义
- +

(建议上传宽高为100*100像素的.png图片)

@@ -219,8 +188,8 @@ export default class edittemplate extends React.Component { 首页

显示 this.handleChangeStatus(0,checked)} />

@@ -232,9 +201,9 @@ export default class edittemplate extends React.Component { multiple sortable tips="默认图" - onChange={(e) => { this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(0,'show',e) }} 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} /> { this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(0,'selectShow',e) }} 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} />
- + { - let model2 = this.state.model; - model2.title = e; - this.setState({ model: model2 }) - this.props.settitle(e) + let model2 = this.state.navlist; + model2[0].text = e; + this.setState({ navlist: model2 }) }} onClearItem={(e) => { - let model2 = this.state.model; - model2.title = ""; - this.setState({ model: model2 }) + let model2 =this.state.navlist; + model2[0].text = e; + 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'} />
@@ -273,11 +241,11 @@ export default class edittemplate extends React.Component { 订单

显示 this.handleChangeStatus(1,checked)} />

- +
{ this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(1,'show',e) }} 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} /> { this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(1,'show',e) }} 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} />
- + { - let model2 = this.state.model; - model2.title = e; - this.setState({ model: model2 }) - this.props.settitle(e) + let model2 = this.state.navlist; + model2[1].text = e; + this.setState({ navlist: model2 }) }} onClearItem={(e) => { - let model2 = this.state.model; - model2.title = ""; - this.setState({ model: model2 }) + let model2 =this.state.navlist; + model2[1].text = e; + 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'} />
@@ -327,11 +294,11 @@ export default class edittemplate extends React.Component { 我的券

显示 this.handleChangeStatus(2,checked)} />

- +
{ this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(2,'show',e) }} 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} /> { this.onUploadChange(e) }} + onChange={(e) => { this.upImgChange(2,'selectShow',e) }} 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} />
- + { - let model2 = this.state.model; - model2.title = e; - this.setState({ model: model2 }) - this.props.settitle(e) + let model2 = this.state.navlist; + model2[2].text = e; + this.setState({ navlist: model2 }) }} onClearItem={(e) => { - let model2 = this.state.model; - model2.title = ""; - this.setState({ model: model2 }) + let model2 =this.state.navlist; + model2[2].text = e; + 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'} />
- +
- { this.fontcolor('#000000') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> + { this.fontcolor('#fff') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}>
- +
- +
- { this.fontcolor('#f0f') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> + { this.selectfontcolor('#fff') }}> + { this.selectfontcolor('#04C160') }}> + { this.selectfontcolor('#AE99D3') }}> + { this.selectfontcolor('#FACD6A') }}> + { this.selectfontcolor('#FE7962') }}>
- +
- +

(建议上传宽高为750*100像素的图片)

- +
{ this.onUploadChange(e) }} 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} />
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 7750301a..093053e0 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -92,6 +92,44 @@ let couponProduct_list = { textAlign: 'left', fontColor: '#333', 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 {