图片设置
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 (
-
+
搜索栏设置
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')