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 "./main.less";
import Bus from '@/assets/eventBus.js'
let comPonentList=[{
id:1,
icon:'marketing-tupian',
@ -8,12 +9,12 @@ let comPonentList=[{
},{
id:2,
icon:'marketing-beijingtupian',
name:'backPicture',
name:'backgroundImg',
desc:'背景图'
},{
id:3,
icon:'marketing-sousuolan-',
name:'searchBar',
name:'search',
desc:'搜索栏'
},{
id:4,
@ -36,6 +37,7 @@ export default class componentLib extends React.Component {
componentWillUnmount() {}
propcomponentName(item){
this.props.componentName(item.name);
Bus.emit('componentLib',item)
}
render() {
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) {
super(props)
this.state = {
switch:false,
iswitch:false,
comType:1,
navlist:[
{
id:1,
switch:false,
iswitch:true,
name:'index',
pic:{
show:'',
@ -28,7 +28,7 @@ export default class edittemplate extends React.Component {
},
{
id:2,
switch:false,
iswitch:true,
name:'order',
pic:{
show:'',
@ -38,7 +38,7 @@ export default class edittemplate extends React.Component {
},
{
id:3,
switch:false,
iswitch:true,
name:'coupon',
pic:{
show:'',
@ -55,8 +55,8 @@ export default class edittemplate extends React.Component {
componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_list) {
let { navlist, defaultText, selectText, background } = config.couponList.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background });
let { navlist, defaultText, selectText, background,iswitch } = config.couponList.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background,iswitch });
}
}
@ -96,7 +96,7 @@ export default class edittemplate extends React.Component {
}
handleChangeStatus = (index,checked) => {
let model = this.state.navlist;
model[index].switch= checked;
model[index].iswitch= checked;
this.setState({ navlist: model })
Bus.emit('navlist', model)
}
@ -199,7 +199,7 @@ export default class edittemplate extends React.Component {
<span>首页</span>
<p className="dflexacsa"><span className="showType">显示</span>
<Switch
checked={this.state.navlist[0].switch}
checked={this.state.navlist[0].iswitch}
onChange={checked=>this.handleChangeStatus(0,checked)}
/></p>
</div>
@ -254,7 +254,7 @@ export default class edittemplate extends React.Component {
<span>订单</span>
<p className="dflexacsa"><span className="showType">显示</span>
<Switch
checked={this.state.navlist[1].switch}
checked={this.state.navlist[1].iswitch}
onChange={checked=>this.handleChangeStatus(1,checked)}
/></p>
</div>
@ -309,7 +309,7 @@ export default class edittemplate extends React.Component {
<span>我的券</span>
<p className="dflexacsa"><span className="showType">显示</span>
<Switch
checked={this.state.navlist[2].switch}
checked={this.state.navlist[2].iswitch}
onChange={checked=>this.handleChangeStatus(2,checked)}
/></p>
</div>

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

@ -292,7 +292,7 @@ export default class edittemplate extends React.Component {
</Form>
</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>
)

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

@ -11,16 +11,19 @@ export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
iswitch:false,
img:'',
jumpType:'0',//0不跳转 1跳转
jumpUrl:''
}
}
componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_list) {
let {img,jumpType,jumpUrl}=config.couponList.product_list.picture;
this.setState({ img,jumpType,jumpUrl });
let {img,jumpType,jumpUrl,iswitch}=config.couponList.product_list.picture;
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){
let navList=nextProps.bottomBarConfig.navlist;
let naVisual=navList.filter(item=>item.switch);
let naVisual=navList.filter(item=>item.iswitch);
this.setState({navList:naVisual});
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 SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from './couponConfig/bottomBar' //底部栏
import {Sweetalert} from 'zent'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state={
clientY:0,
selectDom:'searchBar'
selectDom:'',
icon:''
}
}
opendescFn() {
this.props.opendesc(true)
}
customComponent(e,name){
customComponent(e,name,icon){
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
let b=this.refs[name];
let offset_top=this.refs[name].getBoundingClientRect().top;
console.log(22,offset_top);
this.setState({clientY:(offset_top-125),selectDom:name});
this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
if(name=='searchBar'){
this.setState({clientY:0});
}
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() {
let goodsConfig=this.props.goodsdata;
console.log(48,goodsConfig);
return (
<div className="editor-main goodstemplate" style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
{
goodsConfig.search?
<div onClick={e=>this.customComponent(e,'searchBar')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
goodsConfig.search&&goodsConfig.search.iswitch?
<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" />
{
!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'} />
@ -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.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>
<span className="del-color">删除</span>
</div>
<span className="del-color" onClick={this.deleteFn}>删除</span>
</div>:null
}
</div>
)
}

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

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

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

@ -73,33 +73,35 @@ let couponProduct_list = {
button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' },
picture: {
iswitch:false,
img: '',
jumpType: '0',//0不跳转 1跳转
jumpUrl: ''
},
backgroundImg: {
iswitch:false,
bgImg: ''
},
search: {
switch: false,
iswitch: false,
shape: 'circular',
textAlign: 'left',
borderColor: '#333',
placeholder: '请输入关键字搜索'
},
title: {
switch: false,
iswitch: false,
text: 'circular',
textAlign: 'left',
fontColor: '#333',
fontSize: 1
},
bottomBar: {
switch:false,
iswitch:false,
navlist:[
{
id:1,
switch:false,
iswitch:true,
name:'index',
pic:{
show:'',
@ -109,7 +111,7 @@ let couponProduct_list = {
},
{
id:2,
switch:false,
iswitch:true,
name:'order',
pic:{
show:'',
@ -119,7 +121,7 @@ let couponProduct_list = {
},
{
id:3,
switch:false,
iswitch:true,
name:'coupon',
pic:{
show:'',
@ -167,6 +169,11 @@ export default class edittemplate extends React.Component {
this.setState({ model: val })
}
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) => {
let coupongoodsConfig = this.state.product_list
coupongoodsConfig.picture.img = prop
@ -751,6 +758,7 @@ export default class edittemplate extends React.Component {
this.setState({ componentOfconfig: c });
}
render() {
console.log(761,this.state.product_list);
return (
<div className='edittemplate'>
<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' }}>
{
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
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 ? (
<img
@ -948,7 +959,7 @@ export default class edittemplate extends React.Component {
/>
) : 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>

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

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