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

编辑器数据组装，流程测试

This commit is contained in:
许红梅 2022-09-07 18:23:54 +08:00
parent 76d5fbd79f
commit 2a70efa63d
9 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
View File

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import "./main.less"; import "./main.less";
import Bus from '@/assets/eventBus.js'
let comPonentList=[{ let comPonentList=[{
id:1, id:1,
icon:'marketing-tupian', icon:'marketing-tupian',
@ -8,12 +9,12 @@ let comPonentList=[{
},{ },{
id:2, id:2,
icon:'marketing-beijingtupian', icon:'marketing-beijingtupian',
name:'backPicture', name:'backgroundImg',
desc:'背景图' desc:'背景图'
},{ },{
id:3, id:3,
icon:'marketing-sousuolan-', icon:'marketing-sousuolan-',
name:'searchBar', name:'search',
desc:'搜索栏' desc:'搜索栏'
},{ },{
id:4, id:4,
@ -36,6 +37,7 @@ export default class componentLib extends React.Component {
componentWillUnmount() {} componentWillUnmount() {}
propcomponentName(item){ propcomponentName(item){
this.props.componentName(item.name); this.props.componentName(item.name);
Bus.emit('componentLib',item)
} }
render() { render() {
return ( return (

20
src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
View File

@ -13,12 +13,12 @@ export default class edittemplate extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
switch:false, iswitch:false,
comType:1, comType:1,
navlist:[ navlist:[
{ {
id:1, id:1,
switch:false, iswitch:true,
name:'index', name:'index',
pic:{ pic:{
show:'', show:'',
@ -28,7 +28,7 @@ export default class edittemplate extends React.Component {
}, },
{ {
id:2, id:2,
switch:false, iswitch:true,
name:'order', name:'order',
pic:{ pic:{
show:'', show:'',
@ -38,7 +38,7 @@ export default class edittemplate extends React.Component {
}, },
{ {
id:3, id:3,
switch:false, iswitch:true,
name:'coupon', name:'coupon',
pic:{ pic:{
show:'', show:'',
@ -55,8 +55,8 @@ export default class edittemplate extends React.Component {
componentWillMount(e) { componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_list) { if (config && config.couponList && config.couponList.product_list) {
let { navlist, defaultText, selectText, background } = config.couponList.product_list.bottomBar; let { navlist, defaultText, selectText, background,iswitch } = config.couponList.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background }); this.setState({ navlist, defaultText, selectText, background,iswitch });
} }
} }
@ -96,7 +96,7 @@ export default class edittemplate extends React.Component {
} }
handleChangeStatus = (index,checked) => { handleChangeStatus = (index,checked) => {
let model = this.state.navlist; let model = this.state.navlist;
model[index].switch= checked; model[index].iswitch= checked;
this.setState({ navlist: model }) this.setState({ navlist: model })
Bus.emit('navlist', model) Bus.emit('navlist', model)
} }
@ -199,7 +199,7 @@ export default class edittemplate extends React.Component {
<span>首页</span> <span>首页</span>
<p className="dflexacsa"><span className="showType">显示</span> <p className="dflexacsa"><span className="showType">显示</span>
<Switch <Switch
checked={this.state.navlist[0].switch} checked={this.state.navlist[0].iswitch}
onChange={checked=>this.handleChangeStatus(0,checked)} onChange={checked=>this.handleChangeStatus(0,checked)}
/></p> /></p>
</div> </div>
@ -254,7 +254,7 @@ export default class edittemplate extends React.Component {
<span>订单</span> <span>订单</span>
<p className="dflexacsa"><span className="showType">显示</span> <p className="dflexacsa"><span className="showType">显示</span>
<Switch <Switch
checked={this.state.navlist[1].switch} checked={this.state.navlist[1].iswitch}
onChange={checked=>this.handleChangeStatus(1,checked)} onChange={checked=>this.handleChangeStatus(1,checked)}
/></p> /></p>
</div> </div>
@ -309,7 +309,7 @@ export default class edittemplate extends React.Component {
<span>我的券</span> <span>我的券</span>
<p className="dflexacsa"><span className="showType">显示</span> <p className="dflexacsa"><span className="showType">显示</span>
<Switch <Switch
checked={this.state.navlist[2].switch} checked={this.state.navlist[2].iswitch}
onChange={checked=>this.handleChangeStatus(2,checked)} onChange={checked=>this.handleChangeStatus(2,checked)}
/></p> /></p>
</div> </div>

2
src/pages/exchangepage/couponTemplate/goodsPage/config/main.js
View File

@ -292,7 +292,7 @@ export default class edittemplate extends React.Component {
</Form> </Form>
</div> </div>
</div> </div>
) : this.props.componentName=='picture'?<Picture/>:this.props.componentName=='backPicture'?<Backpicture/>:this.props.componentName=='searchBar'?<SearchBar/>:this.props.componentName=='bottomBar'?<BottomBar/>:this.props.componentName=='title'?<Title/>:null ) : this.props.componentName=='picture'?<Picture/>:this.props.componentName=='backgroundImg'?<Backpicture/>:this.props.componentName=='search'?<SearchBar/>:this.props.componentName=='bottomBar'?<BottomBar/>:this.props.componentName=='title'?<Title/>:null
} }
</div> </div>
) )

7
src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
View File

@ -11,16 +11,19 @@ export default class edittemplate extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
iswitch:false,
img:'', img:'',
jumpType:'0',//0不跳转 1跳转 jumpType:'0',//0不跳转 1跳转
jumpUrl:'' jumpUrl:''
} }
} }
componentWillMount(e) { componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_list) { if (config && config.couponList && config.couponList.product_list) {
let {img,jumpType,jumpUrl}=config.couponList.product_list.picture; let {img,jumpType,jumpUrl,iswitch}=config.couponList.product_list.picture;
this.setState({ img,jumpType,jumpUrl }); console.log(21,config.couponList.product_list.picture);
this.setState({ img,jumpType,jumpUrl,iswitch});
} }
} }

2
src/pages/exchangepage/edittemplate/couponConfig/bottomBar.js
View File

@ -11,7 +11,7 @@ export default class bottomBar extends React.Component {
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
let navList=nextProps.bottomBarConfig.navlist; let navList=nextProps.bottomBarConfig.navlist;
let naVisual=navList.filter(item=>item.switch); let naVisual=navList.filter(item=>item.iswitch);
this.setState({navList:naVisual}); this.setState({navList:naVisual});
console.log(66,nextProps); console.log(66,nextProps);
} }

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

@ -4,44 +4,66 @@ import "../../../assets/comm.css"
import './goodstemplate.less' import './goodstemplate.less'
import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏 import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from './couponConfig/bottomBar' //底部栏 import BottomBarView from './couponConfig/bottomBar' //底部栏
import {Sweetalert} from 'zent'
export default class edittemplate extends React.Component { export default class edittemplate extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state={ this.state={
clientY:0, clientY:0,
selectDom:'searchBar' selectDom:'',
icon:''
} }
} }
opendescFn() { opendescFn() {
this.props.opendesc(true) this.props.opendesc(true)
} }
customComponent(e,name){ customComponent(e,name,icon){
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置 //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
let b=this.refs[name]; let b=this.refs[name];
let offset_top=this.refs[name].getBoundingClientRect().top; let offset_top=this.refs[name].getBoundingClientRect().top;
console.log(22,offset_top); this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
this.setState({clientY:(offset_top-125),selectDom:name}); if(name=='searchBar'){
this.setState({clientY:0});
}
if(name=='bottomBar'){ if(name=='bottomBar'){
this.setState({clientY:600,selectDom:name}); this.setState({clientY:600});
} }
} }
deleteFn(){
Sweetalert.confirm({
title:'确认信息',
content: <p>确认删除该模块？</p>,
onConfirm:()=>{
},
onCancel:()=>{
},
parentComponent: this
});
}
render() { render() {
let goodsConfig=this.props.goodsdata; let goodsConfig=this.props.goodsdata;
console.log(48,goodsConfig);
return ( 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:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
{ {
goodsConfig.search? goodsConfig.search&&goodsConfig.search.iswitch?
<div onClick={e=>this.customComponent(e,'searchBar')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null <div onClick={e=>this.customComponent(e,'searchBar','marketing-sousuolan-')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
} }
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" /> <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.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? <div onClick={e=>this.customComponent(e,'picBar')} ref="picBar" className={this.state.selectDom=='picBar'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null goodsConfig.picture&&goodsConfig.picture.iswitch? <div onClick={e=>this.customComponent(e,'picBar','marketing-tupian')} ref="picBar" className={this.state.selectDom=='picBar'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
} }
{ {
goodsConfig.title?<div onClick={e=>this.customComponent(e,'title')} 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 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
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.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'} /> 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'} />
@ -56,14 +78,17 @@ 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.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? <div ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>: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
} }
<div className="delete-component" style={{top:this.state.clientY}}> {
<i className="marketing marketing-beijingtupian"></i> this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
<i className={'marketing '+this.state.icon}></i>
<b className="split">|</b> <b className="split">|</b>
<span className="del-color">删除</span> <span className="del-color" onClick={this.deleteFn}>删除</span>
</div> </div>:null
}
</div> </div>
) )
} }

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

@ -20,15 +20,16 @@
height: 187px; height: 187px;
} }
>.content-title { .content-title {
position: relative; position: relative;
z-index: 999; z-index: 999;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
margin-bottom: 50px;
padding: 0 13px; padding: 0 13px;
} }
.parting-line{
height: 50px;
}
>.goodsPic, >.goodsPic,
>.goodsPicMatrax { >.goodsPicMatrax {
width: 349px; width: 349px;
@ -37,9 +38,6 @@
position: relative; position: relative;
margin-top: -50px; margin-top: -50px;
} }
>.goodsPic{
margin-top: 8px;
}
>.goodsPicMatrax { >.goodsPicMatrax {
height: auto; height: auto;
} }

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

@ -73,33 +73,35 @@ let couponProduct_list = {
button_color: '#FACD6A', button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' }, describe: { type: '', content: '', bg_image: '' },
picture: { picture: {
iswitch:false,
img: '', img: '',
jumpType: '0',//0不跳转 1跳转 jumpType: '0',//0不跳转 1跳转
jumpUrl: '' jumpUrl: ''
}, },
backgroundImg: { backgroundImg: {
iswitch:false,
bgImg: '' bgImg: ''
}, },
search: { search: {
switch: false, iswitch: false,
shape: 'circular', shape: 'circular',
textAlign: 'left', textAlign: 'left',
borderColor: '#333', borderColor: '#333',
placeholder: '请输入关键字搜索' placeholder: '请输入关键字搜索'
}, },
title: { title: {
switch: false, iswitch: false,
text: 'circular', text: 'circular',
textAlign: 'left', textAlign: 'left',
fontColor: '#333', fontColor: '#333',
fontSize: 1 fontSize: 1
}, },
bottomBar: { bottomBar: {
switch:false, iswitch:false,
navlist:[ navlist:[
{ {
id:1, id:1,
switch:false, iswitch:true,
name:'index', name:'index',
pic:{ pic:{
show:'', show:'',
@ -109,7 +111,7 @@ let couponProduct_list = {
}, },
{ {
id:2, id:2,
switch:false, iswitch:true,
name:'order', name:'order',
pic:{ pic:{
show:'', show:'',
@ -119,7 +121,7 @@ let couponProduct_list = {
}, },
{ {
id:3, id:3,
switch:false, iswitch:true,
name:'coupon', name:'coupon',
pic:{ pic:{
show:'', show:'',
@ -167,6 +169,11 @@ export default class edittemplate extends React.Component {
this.setState({ model: val }) this.setState({ model: val })
} }
componentDidMount() { componentDidMount() {
Bus.addListener('componentLib', (prop) => {
let coupongoodsConfig = this.state.product_list
coupongoodsConfig[prop.name].iswitch= true
this.setState({ product_list: coupongoodsConfig })
})
Bus.addListener('picture', (prop) => { Bus.addListener('picture', (prop) => {
let coupongoodsConfig = this.state.product_list let coupongoodsConfig = this.state.product_list
coupongoodsConfig.picture.img = prop coupongoodsConfig.picture.img = prop
@ -751,6 +758,7 @@ export default class edittemplate extends React.Component {
this.setState({ componentOfconfig: c }); this.setState({ componentOfconfig: c });
} }
render() { render() {
console.log(761,this.state.product_list);
return ( return (
<div className='edittemplate'> <div className='edittemplate'>
<div className='topHeader'> <div className='topHeader'>
@ -861,7 +869,7 @@ export default class edittemplate extends React.Component {
}> }>
<div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}> <div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
{ {
this.state.product_list.search ? <SearchBarView searchConfig={this.state.product_list.search} /> : null this.state.product_list.search&&this.state.product_list.search.iswitch ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
} }
<img <img
src={ src={
@ -883,10 +891,13 @@ export default class edittemplate extends React.Component {
/> />
)} )}
{ {
this.state.product_list.picture ? <img src={this.state.product_list.picture.img} alt="" className="picture" /> : null this.state.product_list.picture&&this.state.product_list.picture.iswitch ? <img src={this.state.product_list.picture.img} alt="" className="picture" /> : null
} }
{ {
this.state.product_list.title ? <div className={this.state.product_list.title.textAlign + ' content-title ' + this.state.product_list.title.fontSize} style={{ color: this.state.product_list.title.fontColor }}>{this.state.product_list.title.text}</div> : null this.state.product_list.title&&this.state.product_list.title.iswitch ? <div className={this.state.product_list.title.textAlign + ' content-title ' + this.state.product_list.title.fontSize} style={{ color: this.state.product_list.title.fontColor }}>{this.state.product_list.title.text}</div> : null
}
{
this.state.product_list.title&&this.state.product_list.title.iswitch&&this.state.product_list.title.text||this.state.product_list.picture&&this.state.product_list.picture.iswitch&&this.state.product_list.picture.img?<div className="parting-line"></div>:null
} }
{this.state.product_list.list == 2 ? ( {this.state.product_list.list == 2 ? (
<img <img
@ -948,7 +959,7 @@ export default class edittemplate extends React.Component {
/> />
) : null} ) : null}
{ {
this.state.product_list.bottomBar? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
} }
</div> </div>
</div> </div>

7
src/pages/exchangepage/edittemplate/main.less
View File

@ -602,11 +602,12 @@
position: relative; position: relative;
z-index: 999; z-index: 999;
height: 20px; height: 20px;
line-height:20px;
margin-bottom: 20px;
padding:0 8px; padding:0 8px;
font-size: 8px; font-size: 8px;
} }
.parting-line{
height:15px;
}
.searchBar{ .searchBar{
transform: scale(0.8); transform: scale(0.8);
font-size: 10px; font-size: 10px;
@ -742,6 +743,6 @@
#leftComponent .details-reduce{ #leftComponent .details-reduce{
transform: scale(0.5) transform: scale(0.5)
} }
button{ .exchageBtn{
border: 0 !important; border: 0 !important;
} }