From ab98bd7872c70eacd3209a3d525413b0f301f772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Fri, 9 Sep 2022 11:11:40 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A0=87=E9=A2=98=E6=96=87?= =?UTF-8?q?=E5=AD=97Tab=E5=88=87=E6=8D=A2=EF=BC=8C=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=A0=8F=E6=96=B0=E5=A2=9E=E4=BC=A0=E5=9B=BE=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E9=A2=84=E8=A7=88=E5=8C=BA=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goodsPage/config/searchBar.js | 4 +- .../couponTemplate/goodsPage/config/title.js | 104 +++++++++++++++++- .../edittemplate/goodstemplate.js | 83 +++++++------- .../edittemplate/goodstemplate.less | 3 + src/pages/exchangepage/edittemplate/main.js | 21 +++- 5 files changed, 164 insertions(+), 51 deletions(-) diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js index b8ced255..6739a7c5 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js @@ -13,10 +13,10 @@ export default class Searchbar extends React.Component { this.state = { switch:false, shape: 'circular', - textAlign: 'left', + textAlign: 'center', borderColor: '#333', bgColor:'#a00', - fontColor:'#333', + fontColor:'#fff', placeholder: '请输入关键字搜索' } } diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js index 6e3c52fe..f7828b4e 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ColorPicker, Notify, RadioGroup, RadioButton } from 'zent'; +import { ColorPicker,ImageUpload, Notify, RadioGroup, RadioButton } from 'zent'; import "@/assets/comm.css" import Form from "@/components/form/main" import FormItem from "@/components/form-item/main" @@ -12,10 +12,12 @@ export default class Title extends React.Component { super(props) this.state = { switch:false, - text: '', + text: '商品标题', textAlign: 'left', fontColor: '#333', - fontSize: 1 + fontSize: 1, + comstyle:1, + pic:'' } } componentWillMount(e) { @@ -50,6 +52,73 @@ export default class Title extends React.Component { this.setState({ fontSize: e.target.value }) Bus.emit('fontSize', e.target.value) } + styleChange(e){ + this.setState({ comstyle: e.target.value }) + Bus.emit('comstyle', e.target.value) + } + onUploadChange(files) { + if (files.length > 0 && files[0].status == "success") { + this.setState({ pic: files[0].src }) + Bus.emit('titlePic', files[0].src) + } else { + this.setState({ pic: ''}) + Bus.emit('titlePic','') + } + }; + + onUploadError = (type, data) => { + if (type === 'overMaxAmount') { + Notify.error(`最多可上传 ${data.maxAmount} 张图片`); + } else if (type === 'overMaxSize') { + Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); + } + }; + 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')); @@ -60,14 +129,21 @@ export default class Title extends React.Component { } render() { return ( -
+

标题设置

-
- + + { this.styleChange(e) }} value={this.state.comstyle}> + 文字 + 图片 + + + { + this.state.comstyle==1?
+ { this.setState({ text: e }) Bus.emit('title', e) @@ -104,6 +180,22 @@ export default class Title extends React.Component { A+ +
: + { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.pic ? [{ 'src': this.state.pic }] : null} + onError={this.onUploadError} + /> + + } +
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index a6f8828d..99f95c5c 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -1,72 +1,78 @@ -import React from 'react'; +import React from 'react'; import "./main.less" import "../../../assets/comm.css" import './goodstemplate.less' import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏 import BottomBarView from './couponConfig/bottomBar' //底部栏 -import {Sweetalert} from 'zent' +import { Sweetalert } from 'zent' import Bus from '@/assets/eventBus.js' export default class edittemplate extends React.Component { constructor(props) { super(props) - this.state={ - clientY:0, - selectDom:'', - icon:'' + this.state = { + clientY: 0, + selectDom: '', + icon: '' } } opendescFn() { this.props.opendesc(true) } - customComponent(e,name,icon){ + customComponent(e, name, icon) { //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置 - let b=this.refs[name]; - let offset_top=this.refs[name].getBoundingClientRect().top; - this.setState({clientY:(offset_top-125),selectDom:name,icon:icon}); - if(name=='searchBar'){ - this.setState({clientY:0}); + let b = this.refs[name]; + let offset_top = this.refs[name].getBoundingClientRect().top; + this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon }); + if (name == 'searchBar') { + this.setState({ clientY: 0 }); } - if(name=='bottomBar'){ - this.setState({clientY:600}); + if (name == 'bottomBar') { + this.setState({ clientY: 600 }); } } - deleteFn(){ - let selectDom=this.state.selectDom;//需删除组件名称 + deleteFn() { + let selectDom = this.state.selectDom;//需删除组件名称 Sweetalert.confirm({ - title:'确认信息', + title: '确认信息', content:

确认删除该模块？

, - onConfirm:()=>{ - this.setState({selectDom:''}); - Bus.emit('componentLibClose',selectDom) + onConfirm: () => { + this.setState({ selectDom: '' }); + Bus.emit('componentLibClose', selectDom) }, - onCancel:()=>{ - + onCancel: () => { + }, parentComponent: this }); } render() { - let goodsConfig=this.props.goodsdata; - console.log(48,goodsConfig); + let goodsConfig = this.props.goodsdata; + let {backgroundImg,search,picture,title,bottomBar}=goodsConfig; return ( -
+
{ - goodsConfig.search&&goodsConfig.search.iswitch? -
this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search">
:null + search && search.iswitch ? +
this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search">
: null } { !goodsConfig.top_image ? : } - { - goodsConfig.picture&&goodsConfig.picture.iswitch?
this.customComponent(e,'picture','marketing-tupian')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}>
:null + { + picture && picture.iswitch ?
this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}>
: null } { - goodsConfig.title&&goodsConfig.title.iswitch?
this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
{goodsConfig.title.text}
:null + title && title.iswitch && title.comstyle == 1 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}> +
{title.text}
: null } { - goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?
:null + title && title.iswitch && title.comstyle == 2 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}> + +
: null + } + { + (title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && picture.img ?
: null } { goodsConfig.list == 2 ? : goodsConfig.list == 3 ? : @@ -81,17 +87,16 @@ export default class edittemplate extends React.Component { goodsConfig.describe.type == 2 ? : null } { - goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch?
this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}>
:null - + bottomBar && bottomBar.iswitch ?
this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null + } { - this.state.selectDom?
- - | - 删除 -
:null + this.state.selectDom ?
+ + | + 删除 +
: null } -
) } diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index 814628d7..fec19c6a 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -129,6 +129,9 @@ background: rgba(25,133,255,.2); content: ""; } +.title-pic{ + height:40px; +} .selectBottomBorder { position: absolute; left: 0; diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 04bf0d15..aad13b2b 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -85,18 +85,20 @@ let couponProduct_list = { search: { iswitch: false, shape: 'circular', - textAlign: 'left', + textAlign: 'center', borderColor: '#333', bgColor:'#a00', - fontColor:'#333', + fontColor:'#fff', placeholder: '请输入关键字搜索' }, title: { iswitch: false, - text: 'circular', + text: '商品标题', textAlign: 'left', fontColor: '#333', - fontSize: 1 + fontSize: 1, + comstyle:1, + pic:'' }, bottomBar: { iswitch:false, @@ -225,6 +227,17 @@ export default class edittemplate extends React.Component { this.setState({ product_list: searchConfig }) }) //标题设置 + Bus.addListener('comstyle', (prop) => { + let titleConfig = this.state.product_list + titleConfig.title.comstyle = prop + this.setState({ product_list: titleConfig }) + }) + Bus.addListener('titlePic', (prop) => { + let titleConfig = this.state.product_list + titleConfig.title.pic = prop + this.setState({ product_list: titleConfig }) + }) + Bus.addListener('title', (prop) => { let titleConfig = this.state.product_list titleConfig.title.text = prop