diff --git a/src/assets/comm.css b/src/assets/comm.css index 8a9b1485..5a849ae7 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -133,3 +133,12 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{ .fz12{ font-size: 12px!important; } +.center{ + text-align: center; +} +.left{ + text-align: left; +} +.right{ + text-align: right; +} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less b/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less index 6254b3ab..48af7074 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less @@ -1,48 +1,73 @@ -.component-item{ +.component-item { display: flex; flex-direction: column; padding: 16px 8px; margin-bottom: 8px; background: #f5faff; } -.component-item .v-editItem{ + +.component-item .v-editItem { font-size: 14px; display: flex; - justify-content:space-between; + justify-content: space-between; align-items: center; } -.component-item .v-editItem>span{ + +.component-item .v-editItem>span { color: #999; } -.component-item .showType{ + +.component-item .showType { margin-right: 10px; - color: #333!important; + color: #333 !important; } -.bottomBar .form-compontent{ - padding-top:0; - .choice-up-image{ + +.bottomBar .form-compontent { + padding-top: 0; + + .choice-up-image { margin-right: 15px; - .zent-image-upload-tips[data-zv="9.12.7"]{ + + .zent-image-upload-tips[data-zv="9.12.7"] { text-align: center; color: #333; } } - .colorItemfont{ - margin-top: 0; - } -} -.tips{ - color: #999; - span{ - color:#f00; + + .colorItemfont { + margin-top: 0; } } -.color-control{ + +.assembly { + .form-Item { + margin-bottom: 15px; + } + + .form-compontent { + padding-top: 0; + + .colorItemfont { + margin-top: 0; + } + } + +} + +.tips { + color: #999; + + span { + color: #f00; + } +} + +.color-control { margin-top: 10px; display: flex; justify-content: space-between; } -.backpic-item{ +.backpic-item { margin-bottom: 30px; } \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js index 341132f6..68eb3385 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js @@ -102,7 +102,7 @@ export default class edittemplate extends React.Component { render() { console.log(105,this.state); return ( -
+

图片设置

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js index 29517e78..453e4133 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js @@ -5,245 +5,105 @@ import Form from "@/components/form/main" import FormItem from "@/components/form-item/main" import { uploadImg, handelResponse } from "@/assets/api.js" import Ipt from "@/components/input/main" +import Bus from '@/assets/eventBus.js' +import _ from 'lodash' export default class edittemplate extends React.Component { constructor(props) { super(props) this.state = { - model: { - top_image: "", - list: "2", - font_color: "#f1f2f3", - button_color: "#FACD6A", - describe: { type: "", content: "", bg_image: '' } - } + switch:false, + shape: 'circular', + textAlign: 'left', + borderColor: '#333', + placeholder: '请输入关键字搜索' } } 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 { shape, textAlign, borderColor, placeholder } = config.couponList.product_list.search; + this.setState({ shape, textAlign, borderColor, placeholder }); } } - onListChange(e) { - let model = this.state.model; - model.list = e.target.value; - this.setState({ model: model }) - this.props.setarrayType(e.target.value); + //形状 + shapeChange(e) { + this.setState({ shape: e.target.value }) + Bus.emit('shape', e.target.value) + } + //文字 + textChange(e) { + this.setState({ textAlign: e.target.value }) + Bus.emit('textAlign', 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 - 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) { - 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) => { - if (type === 'overMaxAmount') { - Notify.error(`最多可上传 ${data.maxAmount} 张图片`); - } else if (type === 'overMaxSize') { - Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); - } - }; - handleChange = (color) => { - let model1 = this.state.model; - model1.font_color = color; + changeBorder = (color) => { this.setState({ - model: model1 + borderColor: color }); - this.props.setButtonbgcolor(color); - - } - handleChange1 = (color) => { - let model1 = this.state.model; - model1.button_color = color; - this.setState({ - model: model1 - }); - this.props.setButtoncolor(color); + Bus.emit('borderColor', color) } // 字体颜色 - fontcolor(cor) { - let models = this.state.model; - models.button_color = cor; - this.setState({ model: models }); - this.props.setButtoncolor(cor); + borderColorFn(cor) { + this.setState({ borderColor: cor }); + Bus.emit('borderColor', cor) } - // 背景颜色 - bgcolor(cor) { - let models = this.state.model; - models.font_color = cor; - this.setState({ model: models }); - this.props.setButtonbgcolor(cor); - } - onUpload = (file, report) => { - let self = this; - console.log('上传头像', file); - return new Promise((resolve, reject) => { - let path = "" - let formdata = new FormData(); - formdata.append("file", file) - formdata.append("path", "common_image") - uploadImg(formdata).then((res) => { - handelResponse(res, (req, msg) => { - path = req.path; - - }, (err) => { - reject(); - }) - }); - - let count = 0; - const update = () => { - if (path) { - - resolve( - path - ); - - } - else { - - if (count < 100) { - count += 2; - report(count); - setTimeout(update, 500); - console.log("上传中") - } - else { - - reject(); - } - } - - - }; - setTimeout(update, 500); - }); - - }; componentWillUnmount() { let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); - 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.search = _.cloneDeep(this.state); + oldobj.couponList = couponList; sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); } render() { + let { shape, textAlign, borderColor, placeholder } = this.state; return ( -
+

搜索栏设置

-
+
- - { this.onactivityChange(e) }} value={this.state.model.describe.type}> - this.hasItemFn(1)} value={"1"}>圆形 - this.hasItemFn(2)} value={"2"}>方形 + + { this.shapeChange(e) }} value={shape}> + 圆形 + 方形
- - { this.onactivityChange(e) }} value={this.state.model.describe.type}> - this.hasItemFn(1)} value={"1"}>居左 - this.hasItemFn(2)} value={"2"}>居中 - this.hasItemFn(2)} value={"2"}>居右 - - - -
- { this.fontcolor('#f0f') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> -
- + + { this.textChange(e) }} value={textAlign}> + 居左 + 居中 + 居右 + + + +
+ { this.borderColorFn('#f0f') }}> + { this.borderColorFn('#04C160') }}> + { this.borderColorFn('#AE99D3') }}> + { this.borderColorFn('#FACD6A') }}> + { this.borderColorFn('#FE7962') }}> +
+ +
-
- + - { - let model2 = this.state.model; - model2.title = e; - this.setState({ model: model2 }) - this.props.settitle(e) - }} - onClearItem={(e) => { - let model2 = this.state.model; - model2.title = ""; - this.setState({ model: model2 }) + { + this.setState({ placeholder: e }) + Bus.emit('placeholder', e) }} - value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} /> - + onClearItem={(e) => { + this.setState({ placeholder: '' }) + Bus.emit('placeholder', '') + }} + value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={18} height={'36px'} width={'300px'} alignment={'left'} /> +
diff --git a/src/pages/exchangepage/edittemplate/couponConfig/comm.less b/src/pages/exchangepage/edittemplate/couponConfig/comm.less new file mode 100644 index 00000000..bf67db71 --- /dev/null +++ b/src/pages/exchangepage/edittemplate/couponConfig/comm.less @@ -0,0 +1,13 @@ +.searchBar{ + display: flex; + justify-content: flex-end; + justify-content: space-between; + padding:0 15px; + box-sizing: border-box; + i{ + width: 16px; + } + .placeholder{ + flex: 1; + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js new file mode 100644 index 00000000..8131412d --- /dev/null +++ b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js @@ -0,0 +1,21 @@ +import React from 'react'; +import "./comm.less" +import '@/assets/comm.css' +export default class searchBar extends React.Component { + constructor(props) { + super(props) + } + render() { + let searchConfig=this.props.searchConfig; + console.log(10,searchConfig); + return ( +
+ +
+ {searchConfig.placeholder} +
+ +
+ ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index 897e01a9..ce7c3983 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -2,6 +2,7 @@ import React from 'react'; import "./main.less" import "../../../assets/comm.css" import './goodstemplate.less' +import SearchBarView from './couponConfig/searchBar' //商品详情立减金页面 export default class edittemplate extends React.Component { constructor(props) { super(props) @@ -10,8 +11,12 @@ export default class edittemplate extends React.Component { this.props.opendesc(true) } render() { + let goodsConfig=this.props.goodsdata; return (
+ { + goodsConfig.search?:null + } { !this.props.goodsdata.top_image ? : diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index b97e241e..f99e0b55 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -71,7 +71,17 @@ width: 310px; } } - + .searchBar{ + width: 80%; + margin-left:10%; + margin-top: 2%; + height: 40px; + line-height: 40px; + padding-left: 15px; + box-sizing: border-box; + border: 1px solid #333; + border-radius: 20px; + } } .detailstemplate{ @@ -179,4 +189,3 @@ .picture{ width: 100%; } - diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 05701350..43880695 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -77,6 +77,13 @@ let couponProduct_list = { }, backgroundImg:{ bgImg:'' + }, + search:{ + switch:false, + shape:'circular', + textAlign:'left', + borderColor:'#333', + placeholder:'请输入关键字搜索' } } export default class edittemplate extends React.Component { @@ -124,7 +131,21 @@ export default class edittemplate extends React.Component { bgImgConfig.backgroundImg.bgImg = prop this.setState({ product_list: bgImgConfig }) }) - + Bus.addListener('shape', (prop) => { + let searchConfig = this.state.product_list + searchConfig.search.shape = prop + this.setState({ product_list: searchConfig }) + }) + Bus.addListener('textAlign', (prop) => { + let searchConfig = this.state.product_list + searchConfig.search.textAlign = prop + this.setState({ product_list: searchConfig }) + }) + Bus.addListener('placeholder', (prop) => { + let searchConfig = this.state.product_list + searchConfig.search.placeholder = prop + this.setState({ product_list: searchConfig }) + }) setTimeout(() => { let img = document.getElementById('center-img') let center = document.getElementById('center')