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:
Apple 2022-09-22 13:45:22 +08:00
parent 2c0d558cb8
commit 70723332c8
7 changed files with 167 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/bottomBar.js
View File

@ -41,6 +41,7 @@ export default class bottomBar extends React.Component {
}
}
componentWillReceiveProps(nextProps){
console.log(44,nextProps);
let navList=nextProps.bottomBarConfig.navlist;
let naVisual=navList.filter(item=>item.iswitch);
this.setState({navList:naVisual});
@ -48,7 +49,18 @@ export default class bottomBar extends React.Component {
clickIcon(e,index){
this.setState({active:index});
}
componentDidMount(){
console.log(53);
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
let { navlist, defaultText, selectText, background, iswitch } = config.coupon.product_list.bottomBar;
this.setState({ defaultText, selectText, background, iswitch });
let naVisual=navlist.filter(item=>item.iswitch);
this.setState({navList:naVisual});
}
}
render() {
console.log(53,this.state);
let active=this.state.active;
return (
<ul className='bottomBar-view' style={{ background:this.props.bottomBarConfig.background? `url('${this.props.bottomBarConfig.background}') center center /cover`:'#f9f9f9'}}>

368
src/pages/exchangepage/edittemplate/couponCard/goodsPage/config/bottomBar.js
View File

@ -8,59 +8,72 @@ import _ from 'lodash';
import React from 'react';
import { ColorPicker, ImageUpload, Notify, RadioButton, RadioGroup, Switch } from 'zent';
import './comm.less';
// 底部栏配置
let bottomMenu = [{
id: 1,
category: '首页',
},
{
id: 2,
category: '订单',
},
{
id: 3,
category: '我的券',
}]
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
iswitch:true,
comType:1,
navlist:[
{
id:1,
iswitch:true,
name:'index',
pic:{
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png'
},
text:'首页'
},
{
id:2,
iswitch:true,
name:'order',
pic:{
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png'
iswitch: true,
comType: 1,
navlist: [
{
id: 1,
iswitch: true,
name: 'index',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png'
},
text: '首页'
},
text:'订单'
},
{
id:3,
iswitch:true,
name:'coupon',
pic:{
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png'
{
id: 2,
iswitch: true,
name: 'order',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png'
},
text: '订单'
},
text:'我的券'
}
],
defaultText:'#A6A5B2',
selectText:'#FD6932',
background:''
{
id: 3,
iswitch: true,
name: 'coupon',
pic: {
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png',
selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png'
},
text: '我的券'
}
],
defaultText: '#A6A5B2',
selectText: '#FD6932',
background: 'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
}
}
componentWillMount(e) {
Bus.addListener('componentLibClose', (prop) => {
if(prop=='bottomBar'){
this.setState({iswitch:false})
if (prop == 'bottomBar') {
this.setState({ iswitch: false })
}
})
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.coupon && config.coupon.product_list) {
let { navlist, defaultText, selectText, background,iswitch } = config.coupon.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background,iswitch });
let { navlist, defaultText, selectText, background, iswitch } = config.coupon.product_list.bottomBar;
this.setState({ navlist, defaultText, selectText, background, iswitch });
}
}
@ -71,21 +84,24 @@ export default class edittemplate extends React.Component {
}
hasItemFn(c) {
let bottomNav=_.cloneDeep(this.state.navlist);
if(c==1){//默认
}else{
bottomNav.forEach(item=>{
item.pic.show='';
item.pic.selectShow='';
let bottomNav = _.cloneDeep(this.state.navlist);
if (c == 1) {//默认
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
let { navlist } = config.coupon.product_list.bottomBar;
bottomNav = _.cloneDeep(navlist);
} else {
bottomNav.forEach(item => {
item.pic.show = '';
item.pic.selectShow = '';
});
}
console.log(8383,bottomNav);
this.setState({navlist:bottomNav});
});
}
console.log(8383, bottomNav);
this.setState({ navlist: bottomNav });
}
//首页/订单/我的券
upImgChange(index,type,files) {
upImgChange(index, type, files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.navlist;
model[index].pic[type] = files[0].src;
@ -93,24 +109,24 @@ export default class edittemplate extends React.Component {
Bus.emit('navlist', model)
} else {
let model = this.state.navlist;
model[index].pic[type] ='';
model[index].pic[type] = '';
this.setState({ navlist: model })
Bus.emit('navlist', model)
}
};
//背景图
onUploadChange(files){
onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") {
this.setState({ background: files[0].src })
Bus.emit('background', files[0].src)
} else {
this.setState({ background: '' })
Bus.emit('background','')
Bus.emit('background', '')
}
}
handleChangeStatus = (index,checked) => {
handleChangeStatus = (index, checked) => {
let model = this.state.navlist;
model[index].iswitch= checked;
model[index].iswitch = checked;
this.setState({ navlist: model })
Bus.emit('navlist', model)
}
@ -141,7 +157,7 @@ export default class edittemplate extends React.Component {
Bus.emit('defaultText', cor)
}
//选中颜色
selectfontcolor(cor){
selectfontcolor(cor) {
this.setState({ selectText: cor });
Bus.emit('selectText', cor)
}
@ -189,7 +205,7 @@ export default class edittemplate extends React.Component {
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
console.log(192,this.state);
console.log(192, this.state);
return (
<div className="bottomBar">
<div className='control page-title-control'>
@ -199,180 +215,82 @@ export default class edittemplate extends React.Component {
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<div className="activeTip">
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onstyleChange(e) }} value={this.state.comType}>
<RadioButton onClick={() => this.hasItemFn(1)} value={1}>默认</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={2}>自定义</RadioButton>
</RadioGroup>
</FormItem>
</div>
<FormItem required={false} labelname="上传图标:" labelwidth="100px">
<FormItem required={false} labelname="上传图标:" labelwidth="100px">
<p className="tips">（建议上传宽高为<span>100*100</span>像素的<span>.png</span>图片）</p>
</FormItem>
<div className="component-item" >
<div className="v-editItem">
<span>首页</span>
<p className="dflexacsa"><span>显示</span>
</p>
</div>
<FormItem labelname="添加图片:" labelwidth="100px" key={1}>
<div className="dflexacsa">
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="默认图"
onChange={(e) => { this.upImgChange(0,'show',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[0].pic.show ? [{ 'src': this.state.navlist[0].pic.show }] : null}
onError={this.onUploadError}
/>
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="选中图"
onChange={(e) => { this.upImgChange(0,'selectShow',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[0].pic.selectShow ? [{ 'src': this.state.navlist[0].pic.selectShow }] : null}
onError={this.onUploadError}
/>
</div>
</FormItem>
<FormItem labelname="导航文本:" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.navlist;
model2[0].text = e;
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
}}
onClearItem={(e) => {
let model2 =this.state.navlist;
model2[0].text = '';
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
}}
value={this.state.navlist[0].text} placeholder={"首页"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
</div>
<div className="component-item">
<div className="v-editItem">
<span>订单</span>
<p className="dflexacsa"><span className="showType">{this.state.navlist[1].iswitch?'显示':'隐藏'}</span>
<Switch
checked={this.state.navlist[1].iswitch}
onChange={checked=>this.handleChangeStatus(1,checked)}
/></p>
</div>
<FormItem labelname="添加图片:" labelwidth="100px" key={2}>
<div className="dflexacsa" >
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="默认图"
onChange={(e) => { this.upImgChange(1,'show',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[1].pic.show ? [{ 'src': this.state.navlist[1].pic.show }] : null}
onError={this.onUploadError}
/>
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="选中图"
onChange={(e) => { this.upImgChange(1,'show',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[1].pic.selectShow ? [{ 'src': this.state.navlist[1].pic.selectShow }] : null}
onError={this.onUploadError}
/>
</div>
</FormItem>
<FormItem labelname="导航文本:" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.navlist;
model2[1].text = e;
Bus.emit('navlist', model2)
this.setState({ navlist: model2 })
}}
onClearItem={(e) => {
let model2 =this.state.navlist;
model2[1].text = '';
Bus.emit('navlist', model2)
this.setState({ navlist: model2 })
}}
value={this.state.navlist[1].text} placeholder={"订单"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
</div>
<div className="component-item">
<div className="v-editItem">
<span>我的券</span>
<p className="dflexacsa"><span className="showType">{this.state.navlist[2].iswitch?'显示':'隐藏'}</span>
<Switch
checked={this.state.navlist[2].iswitch}
onChange={checked=>this.handleChangeStatus(2,checked)}
/></p>
</div>
<FormItem labelname="添加图片:" labelwidth="100px" key={3}>
<div className="dflexacsa" >
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="默认图"
onChange={(e) => { this.upImgChange(2,'show',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[2].pic.show ? [{ 'src': this.state.navlist[2].pic.show }] : null}
onError={this.onUploadError}
/>
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="选中图"
onChange={(e) => { this.upImgChange(2,'selectShow',e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[2].pic.selectShow ? [{ 'src': this.state.navlist[2].pic.selectShow }] : null}
onError={this.onUploadError}
/>
</div>
</FormItem>
<FormItem labelname="导航文本:" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.navlist;
model2[2].text = e;
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
}}
onClearItem={(e) => {
let model2 =this.state.navlist;
model2[2].text = '';
this.setState({ navlist:model2})
Bus.emit('navlist', model2)
}}
value={this.state.navlist[2].text} placeholder={"我的券"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
</div>
{
bottomMenu.map((item, index) => {
return (
<div className="component-item" >
<div className="v-editItem">
<span>{item.category}</span>
{
item.id == 1 ? <p className="dflexacsa"><span>显示</span> </p> : (
<div className="dflexacsa"><span className="showType">{this.state.navlist[index].iswitch ? '显示' : '隐藏'}</span>
<Switch
checked={this.state.navlist[index].iswitch}
onChange={checked => this.handleChangeStatus(index, checked)}
/>
</div>
)
}
</div>
<FormItem labelname="添加图片:" labelwidth="100px">
<div className="dflexacsa" key={this.state.navlist[index].pic.show}>
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="默认图"
onChange={(e) => { this.upImgChange(index, 'show', e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[index].pic.show ? [{ 'src': this.state.navlist[index].pic.show }] : null}
onError={this.onUploadError}
/>
<ImageUpload
className="zent-image-upload-demo choice-up-image"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="选中图"
onChange={(e) => { this.upImgChange(index, 'selectShow', e) }}
onUpload={this.onUpload}
defaultFileList={this.state.navlist[index].pic.selectShow ? [{ 'src': this.state.navlist[index].pic.selectShow }] : null}
onError={this.onUploadError}
/>
</div>
</FormItem>
<FormItem labelname="导航文本:" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.navlist;
model2[index].text = e;
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
}}
onClearItem={(e) => {
let model2 = this.state.navlist;
model2[index].text = '';
this.setState({ navlist: model2 })
Bus.emit('navlist', model2)
}}
value={this.state.navlist[index].text} placeholder={item.category} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
</div>
)
})
}
<div className="color-control">
<FormItem labelname="默认文字颜色:" labelwidth="140px">
<FormItem labelname="默认文字颜色:" labelwidth="140px">
<div className="colorItemfont dflexajce">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.defaultText == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#fff') }}></span>
<span className={this.state.defaultText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
@ -386,7 +304,7 @@ export default class edittemplate extends React.Component {
</FormItem>
</div>
<div className="color-control">
<FormItem labelname="选中文字颜色:" labelwidth="140px">
<FormItem labelname="选中文字颜色:" labelwidth="140px">
<div className="colorItemfont dflexajce">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.selectText == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.selectfontcolor('#fff') }}></span>
<span className={this.state.selectText == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.selectfontcolor('#04C160') }}></span>
@ -399,12 +317,12 @@ export default class edittemplate extends React.Component {
</div>
</FormItem>
</div>
<FormItem required={false} labelname="背景图:" labelwidth="100px">
<FormItem required={false} labelname="背景图:" labelwidth="100px">
<p className="tips">（建议上传宽高为<span>750*100</span>像素的图片）</p>
</FormItem>
<div className="component-item backpic-item">
<FormItem labelname="添加图片:" labelwidth="100px">
<FormItem labelname="添加图片:" labelwidth="100px">
<div className="dflexacsa">
<ImageUpload
className="zent-image-upload-demo choice-up-image"

2
src/pages/exchangepage/edittemplate/couponCard/landPage.js
View File

@ -154,7 +154,7 @@ export default class couponLandpage extends React.Component {
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
{
this.state.mouldType != 0? <div style={{ fontWeight: 'bold'}}>基础设置{this.state.mouldType}</div>:null
this.state.mouldType != 0? <div style={{ fontWeight: 'bold'}}>基础设置</div>:null
}
<Form model={this.state.model} ref="form1">
{

2
src/pages/exchangepage/edittemplate/exchange/landingPage.js
View File

@ -237,7 +237,7 @@ export default class edittemplate extends React.Component {
</FormItem>
) : null
}
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<div style={{ marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<FormItem labelname="背景颜色:" labelwidth="80px">
<div className="colorItembg dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('bg_color','#ffffff') }}></span>

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

@ -1,45 +1,25 @@
import React from 'react';
import "./main.less"
import "../../../assets/comm.css"
import './goodstemplate.less'
import SearchBarView from './couponCard/couponViewConfig/searchBar' //商品详情搜索栏
import BottomBarView from './couponCard/couponViewConfig/bottomBar' //底部栏
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:'',
comName:''
}
}
opendescFn() {
this.props.opendesc(true)
}
customComponent(e,name,icon,comName){
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
let b=this.refs[name];

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

@ -128,7 +128,7 @@ let couponProduct_list = {
],
defaultText:'#A6A5B2',
selectText:'#FD6932',
background:''
background:'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
}
}
export default class edittemplate extends React.Component {
@ -837,7 +837,7 @@ export default class edittemplate extends React.Component {
<div className='hascode'>
<img src={this.state.showType==8?this.state.model.white_image?this.state.model.white_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png':this.state.model.middle_image?this.state.model.middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} id='top' />
{[1,4].includes(this.state.showType)? (
{[1,8].includes(this.state.showType)? (
<img
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'
@ -998,7 +998,7 @@ export default class edittemplate extends React.Component {
id='center-img'
src={this.state.showType==8?this.state.model.white_image?this.state.model.white_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png':this.state.model.middle_image?this.state.model.middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'}
/>
{[1,4].includes(this.state.showType) ? (
{[1,8].includes(this.state.showType) ? (
<img
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'

9
src/pages/exchangepage/edittemplate/whiteList/whiteLand.js
View File

@ -144,10 +144,12 @@ export default class edittemplate extends React.Component {
render() {
return (
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
<div style={{ fontWeight: 'bold'}}>基础设置</div>
{
this.props.mouldType == 0?null:<div style={{ fontWeight: 'bold'}}>基础设置</div>
}
<Form model={this.state.model} ref="form1">
{
this.props.mouldType == 0?null:
<FormItem labelname="落地页标题:" labelwidth="100px">
<Ipt onChange={(e) => {
let model2 = this.state.model;
@ -155,7 +157,6 @@ export default class edittemplate extends React.Component {
this.setState({ model: model2 })
this.props.landConfig({attr:'title',value:e});
}}
disabled={this.props.mouldType == 0}
onClearItem={(e) => {
let model2 = this.state.model;
model2.title = "";
@ -164,7 +165,7 @@ export default class edittemplate extends React.Component {
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
}
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<div style={{ marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<FormItem labelname="背景颜色:" labelwidth="80px">
<div className="colorItembg dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('bg_color','#ffffff') }}></span>