HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

完成标题文字Tab切换，配置栏新增传图，优化预览区代码

This commit is contained in:
许红梅 2022-09-09 11:11:40 +08:00
parent 90635e1a83
commit ab98bd7872
5 changed files with 164 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
View File

@ -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: '请输入关键字搜索'
}
}

104
src/pages/exchangepage/couponTemplate/goodsPage/config/title.js
View File

@ -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 (
<div>
<div className="assembly">
<div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>标题设置</h1>
</div>
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<FormItem labelname="标题文字:" labelwidth="100px">
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.styleChange(e) }} value={this.state.comstyle}>
<RadioButton value={1}>文字</RadioButton>
<RadioButton value={2}>图片</RadioButton>
</RadioGroup>
</FormItem>
{
this.state.comstyle==1?<div>
<FormItem labelname="标题文字:" labelwidth="100px">
<Ipt onChange={(e) => {
this.setState({ text: e })
Bus.emit('title', e)
@ -104,6 +180,22 @@ export default class Title extends React.Component {
<RadioButton value={"big"}>A+</RadioButton>
</RadioGroup>
</FormItem>
</div>:<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload}
defaultFileList={this.state.pic ? [{ 'src': this.state.pic }] : null}
onError={this.onUploadError}
/>
</FormItem>
}
</Form>
</div>

83
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -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: <p>确认删除该模块？</p>,
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 (
<div className="editor-main goodstemplate" style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
<div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
{
goodsConfig.search&&goodsConfig.search.iswitch?
<div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
search && search.iswitch ?
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
}
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
}
{
goodsConfig.picture&&goodsConfig.picture.iswitch? <div onClick={e=>this.customComponent(e,'picture','marketing-tupian')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
{
picture && picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={picture.img} alt="" className="picture" /></div> : null
}
{
goodsConfig.title&&goodsConfig.title.iswitch?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div></div>:null
title && title.iswitch && title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
<div className={title.textAlign + ' content-title ' +title.fontSize} style={{ color: title.fontColor, fontWeight: 'bold' }}>{title.text}</div></div> : null
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
title && title.iswitch && title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
<img src={title.pic} className="title-pic" />
</div> : null
}
{
(title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && picture.img ? <div className="parting-line"></div> : null
}
{
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
@ -81,17 +87,16 @@ export default class edittemplate extends React.Component {
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
}
{
goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch? <div ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
bottomBar && bottomBar.iswitch ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></div> : null
}
{
this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
<i className={'marketing '+this.state.icon}></i>
<b className="split">|</b>
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
</div>:null
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
<i className={'marketing ' + this.state.icon}></i>
<b className="split">|</b>
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
</div> : null
}
</div>
)
}

3
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -129,6 +129,9 @@
background: rgba(25,133,255,.2);
content: "";
}
.title-pic{
height:40px;
}
.selectBottomBorder {
position: absolute;
left: 0;

21
src/pages/exchangepage/edittemplate/main.js
View File

@ -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