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-05 17:44:41 +08:00
parent c199ce1f0a
commit ea9800ddbf
6 changed files with 349 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/assets/comm.css
View File

@ -1,147 +1,200 @@
/* flex布局 */
.dflexaj{
.dflexaj {
display: flex;
align-items: center;
justify-content: space-between;
}
.dflexj{
.dflexj {
display: flex;
justify-content: space-between;
}
.dflexajc{
.dflexajc {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
}
.dflexajcs{
.dflexajcs {
display: flex;
justify-content:flex-start;
justify-content: flex-start;
}
.dflexajce{
.dflexajce {
display: flex;
justify-content:flex-end;
justify-content: flex-end;
}
.dflexac{
.dflexac {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.dflexacs{
.dflexacs {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
.dflexacsa{
.dflexacsa {
display: flex;
justify-content: flex-start;
align-items: center;
}
.dflexa{
.dflexa {
display: flex;
align-items: center;
}
.dfleac{
.dfleac {
display: flex;
justify-content: flex-start;
align-items: center;
}
.dflexs{
.dflexs {
display: flex;
justify-content: flex-start;
flex-direction: column;
}
/* 怪异盒子 */
.boxs{
.boxs {
box-sizing: border-box;
}
/* 边距 */
.ml15{
.ml15 {
margin-left: 15px;
}
.mr15{
.mr15 {
margin-right: 15px;
}
.mt15{
.mt15 {
margin-top: 15px;
}
.pd24{
.pd24 {
padding: 24px;
}
.pd15{
.pd15 {
padding: 15px;
}
.pdr200{
.pdr200 {
padding: 200px;
}
.pdtrl15{
.pdtrl15 {
padding: 15px 15px 9px;
}
.pdtrl20{
.pdtrl20 {
padding: 20px 20px 14px;
}
.mt5{
.mt5 {
margin-top: 5px;
}
.mt24{
margin-top:24px;
.mt24 {
margin-top: 24px;
}
html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
dl,
dd,
dt,
ol,
input {
padding: 0;
margin: 0;
}
/* 颜色 */
.col31{
.col31 {
color: #313233;
}
.maincenter{
.maincenter {
width: 98%;
margin: 0 auto;
min-height:560px;
min-height: 560px;
}
@media screen and (min-width:1700px ){
.maincenter{
@media screen and (min-width:1700px) {
.maincenter {
min-height: 800px;
}
}
/* 表格状态的图标 */
.icon{
.icon {
display: inline-block;
width: 6px;
height: 6px;
background: #f00;
border-radius:3px;
border-radius: 3px;
vertical-align: middle;
/* border: 2px solid rgb(159, 222, 252); */
margin-right: 5px;
}
.delfilebtn{
.delfilebtn {
color: #296bef;
cursor: pointer;
}
.fz16{
.fz16 {
font-size: 16px;
}
.fz12{
font-size: 12px!important;
.fz12 {
font-size: 12px !important;
}
.center{
.center {
text-align: center;
}
.left{
.left {
text-align: left;
}
.right{
.right {
text-align: right;
}
.square{
.square {
border-radius: 0px !important;
}
.mini {
font-size: 12px;
}
.standard {
font-size: 14px;
}
.big {
font-size: 16px;
}

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

@ -12,7 +12,7 @@ export default class Title extends React.Component {
super(props)
this.state = {
switch:false,
text: 'circular',
text: '',
textAlign: 'left',
fontColor: '#333',
fontSize: 1
@ -25,162 +25,32 @@ export default class Title extends React.Component {
this.setState({ text, textAlign, fontColor, fontSize });
}
}
onListChange(e) {
let model = this.state.model;
model.list = e.target.value;
this.setState({ model: model })
this.props.setarrayType(e.target.value);
//文字格式
textAlignChange(e) {
this.setState({ textAlign: e.target.value })
Bus.emit('titleAlign',e.target.value)
}
//活动说明
onactivityChange(e) {
let model1 = this.state.model;
model1.describe.type = e.target.value;
this.setState({ model: model1 })
this.props.setactiveType(e.target.value);
}
hasItemFn(c) {
let model1 = this.state.model;
if (c == model1.describe.type) {
model1.describe.type = '';
this.setState({ model: model1 });
this.props.setactiveType('');
}
}
//顶部banner
onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src;
this.setState({ model: model })
this.props.setbanner(files[0].src);
} else {
let model = this.state.model;
model.top_image = '';
this.setState({ model: model })
this.props.setbanner("");
}
};
//悬浮富文本
getsusEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
}
//富文本
getEditext(c) {
let model1 = this.state.model;
model1.describe.content = c;
this.setState({ model: model1 });
this.props.seteditorHtml(c);
}
//底部描述图
onUploadChange2(files) {
if (files.length > 0 && files[0].status == "success") {
let model1 = this.state.model;
model1.describe.bg_image = files[0].src;
this.setState({ model: model1 })
this.props.setbottomImg(files[0].src);
} else {
let model1 = this.state.model;
model1.describe.bg_image = '';
this.setState({ model: model1 })
this.props.setbottomImg("");
}
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
} else if (type === 'overMaxSize') {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
}
};
handleChange = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.setButtonbgcolor(color);
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.button_color = color;
this.setState({
model: model1
fontColor: color
});
this.props.setButtoncolor(color);
Bus.emit('fontColor',color)
}
// 字体颜色
fontcolor(cor) {
let models = this.state.model;
models.button_color = cor;
this.setState({ model: models });
this.props.setButtoncolor(cor);
this.setState({ fontColor: cor });
Bus.emit('fontColor', cor)
}
// 背景颜色
bgcolor(cor) {
let models = this.state.model;
models.font_color = cor;
this.setState({ model: models });
this.props.setButtonbgcolor(cor);
fontSizeChange(e) {
this.setState({ fontSize: e.target.value })
Bus.emit('fontSize', e.target.value)
}
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'));
let couponList = oldobj.couponList;
@ -197,42 +67,41 @@ export default class Title extends React.Component {
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<FormItem labelname="标题文字:" prop="title" id="title" labelwidth="100px">
<FormItem labelname="标题文字:" labelwidth="100px">
<Ipt onChange={(e) => {
this.setState({ model: model2 })
this.props.settitle(e)
this.setState({ text: e })
Bus.emit('title', e)
}}
onClearItem={(e) => {
let model2 = this.state.model;
model2.title = "";
this.setState({ model: model2 })
this.setState({ text: '' })
Bus.emit('title', '')
}}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
value={this.state.text} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
<FormItem required={false} labelname="文字格式:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居右</RadioButton>
<FormItem required={false} labelname="文字格式:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.textAlignChange(e) }} value={this.state.textAlign}>
<RadioButton value={"left"}>居左</RadioButton>
<RadioButton value={"center"}>居中</RadioButton>
<RadioButton value={"right"}>居右</RadioButton>
</RadioGroup>
</FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></span>
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.fontColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#fff') }}></span>
<span className={this.state.fontColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.fontColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.fontColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.fontColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
<ColorPicker className="setbgColor" color={this.state.fontColor} onChange={this.handleChange1} />
</div>
</div>
</FormItem>
<FormItem required={false} labelname="文字大小:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>A-</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>A</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>A+</RadioButton>
<FormItem required={false} labelname="文字大小:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.fontSizeChange(e) }} value={this.state.fontSize}>
<RadioButton value={"mini"}>A-</RadioButton>
<RadioButton value={"standard"}>A</RadioButton>
<RadioButton value={"big"}>A+</RadioButton>
</RadioGroup>
</FormItem>

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

@ -13,28 +13,31 @@ export default class edittemplate extends React.Component {
render() {
let goodsConfig=this.props.goodsdata;
return (
<div className="editor-main goodstemplate" style={{ background:this.props.goodsdata.backgroundImg&&this.props.goodsdata.backgroundImg.bgImg? `url('${this.props.goodsdata.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?<SearchBarView searchConfig={goodsConfig.search}/>:null
}
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{
!this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.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} />
}
{
this.props.goodsdata.picture? <img src={this.props.goodsdata.picture.img} alt="" className="picture"/>:null
goodsConfig.picture? <img src={goodsConfig.picture.img} alt="" className="picture"/>:null
}
{
this.props.goodsdata.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : this.props.goodsdata.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.title?<div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div>:null
}
{
this.props.goodsdata.list == 2 ? <button className={this.props.goodsdata.describe.type == 1 && this.props.goodsdata.describe.bg_image || this.props.goodsdata.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: this.props.goodsdata.font_color, background: this.props.goodsdata.button_color }}>立即兑换</button> : 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'} />
}
{
this.props.goodsdata.describe.type == 1 ? <img src={this.props.goodsdata.describe.bg_image} alt="" className={this.props.goodsdata.list == 1 && this.props.goodsdata.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : this.props.goodsdata.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: this.props.goodsdata.describe.content }}></div> : null
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>立即兑换</button> : null
}
{
this.props.goodsdata.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 == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : 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
}
</div>
)

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

@ -16,6 +16,14 @@
width:100%;
height: 187px;
}
>.content-title{
position: relative;
z-index: 999;
height: 40px;
line-height: 40px;
margin-bottom: 50px;
padding:0 13px;
}
>.goodsPic,>.goodsPicMatrax{
width:349px;
height: 195px;

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

@ -71,23 +71,23 @@ let couponProduct_list = {
font_color: '#ffffff',
button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' },
picture:{
img:'',
jumpType:'0',//0不跳转 1跳转
jumpUrl:''
picture: {
img: '',
jumpType: '0',//0不跳转 1跳转
jumpUrl: ''
},
backgroundImg:{
bgImg:''
backgroundImg: {
bgImg: ''
},
search:{
switch:false,
shape:'circular',
textAlign:'left',
borderColor:'#333',
placeholder:'请输入关键字搜索'
search: {
switch: false,
shape: 'circular',
textAlign: 'left',
borderColor: '#333',
placeholder: '请输入关键字搜索'
},
title:{
switch:false,
title: {
switch: false,
text: 'circular',
textAlign: 'left',
fontColor: '#333',
@ -101,7 +101,7 @@ export default class edittemplate extends React.Component {
mouldType: 1,//区分是系统模板还是落地页 0-系统模板 1-落地页新增 2-落地页编辑
activeshow: true, //控制商品列表页活动说明显示与否
loading_visible: false,//保存加载效果
componentOfconfig:'',//选择组件库
componentOfconfig: '',//选择组件库
detailactiveshow: true,
pagedisable: false,
showType: 3, //兑换码/白名单/立减金
@ -159,6 +159,27 @@ export default class edittemplate extends React.Component {
searchConfig.search.borderColor = prop
this.setState({ product_list: searchConfig })
})
//标题设置
Bus.addListener('title', (prop) => {
let titleConfig = this.state.product_list
titleConfig.title.text = prop
this.setState({ product_list: titleConfig })
})
Bus.addListener('titleAlign', (prop) => {
let titleConfig = this.state.product_list
titleConfig.title.textAlign = prop
this.setState({ product_list: titleConfig })
})
Bus.addListener('fontColor', (prop) => {
let titleConfig = this.state.product_list
titleConfig.title.fontColor = prop
this.setState({ product_list: titleConfig })
})
Bus.addListener('fontSize', (prop) => {
let titleConfig = this.state.product_list
titleConfig.title.fontSize = prop
this.setState({ product_list: titleConfig })
})
setTimeout(() => {
let img = document.getElementById('center-img')
let center = document.getElementById('center')
@ -212,7 +233,7 @@ export default class edittemplate extends React.Component {
}
whiteList['land'].title = newEditor.title
whiteList['land'].sort = newEditor.sort
//优惠券
//优惠券
let couponList = newEditor.couponList
if (!couponList) {
couponList = {}
@ -224,7 +245,7 @@ export default class edittemplate extends React.Component {
couponList['land'].sort = newEditor.sort
newEditor.exchangeList = exchangeList
newEditor.whiteList = whiteList
newEditor.couponList=couponList;
newEditor.couponList = couponList;
if (template == 1) { //1-白名单 2-兑换码
this.setState({
model: newEditor.whiteList.land,
@ -243,7 +264,7 @@ export default class edittemplate extends React.Component {
this.setState({ pagedisable: true })
}
} else {//新增数据
let obj = {}, whiteList = {}, exchangeList = {},couponList = {}
let obj = {}, whiteList = {}, exchangeList = {}, couponList = {}
let sourceObj = {//模板数据结构
land: model,
product_list,
@ -251,7 +272,7 @@ export default class edittemplate extends React.Component {
}
let sourcecouponObj = {//模板数据结构
land: model,
product_list:couponProduct_list,
product_list: couponProduct_list,
product_detail
}
whiteList = _.cloneDeep(sourceObj);
@ -532,7 +553,7 @@ export default class edittemplate extends React.Component {
let exchangeData = editorData.exchangeList
let { land, product_list, product_detail } = exchangeData;
this.setState({ model: land, product_list, product_detail })
}else if (e.target.value == 2) {
} else if (e.target.value == 2) {
let couponData = editorData.couponList
let { land, product_list, product_detail } = couponData;
this.setState({ model: land, product_list, product_detail })
@ -666,8 +687,8 @@ export default class edittemplate extends React.Component {
}
}
//组件名
componentName(c){
this.setState({componentOfconfig:c});
componentName(c) {
this.setState({ componentOfconfig: c });
}
render() {
return (
@ -732,8 +753,8 @@ export default class edittemplate extends React.Component {
}
/>
) : (
<img src={this.state.model.top_image} id='top' />
)}
<img src={this.state.model.top_image} id='top' />
)}
<div className='hascode'>
{!this.state.model.middle_image ? (
@ -744,8 +765,8 @@ export default class edittemplate extends React.Component {
}
/>
) : (
<img src={this.state.model.middle_image} id='top' />
)}
<img src={this.state.model.middle_image} id='top' />
)}
{this.state.showType == 1 ? (
<img
src={
@ -754,34 +775,34 @@ export default class edittemplate extends React.Component {
className='thumbcode'
/>
) : (
<img
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
}
className='thumbcode'
/>
)}
<img
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
}
className='thumbcode'
/>
)}
</div>
{this.state.model.describe &&
this.state.model.describe.bg_image ? (
<img src={this.state.model.describe.bg_image} />
) : null}
<img src={this.state.model.describe.bg_image} />
) : null}
</div>
</div>
<div className='item'>
<h4>商品列表页:</h4>
<div
onClick={() => this.activeChoice(2)}
className={
this.state.activeNavStatus == 2
? 'activeNav thumbheader'
: 'thumbheader'
}>
<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
}
<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
}
<img
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'
@ -794,16 +815,19 @@ export default class edittemplate extends React.Component {
src={this.state.product_list.top_image}
/>
) : (
<img
className='topbanner'
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
}
/>
)}
{
this.state.product_list.picture? <img src={this.state.product_list.picture.img} alt="" className="picture"/>:null
}
<img
className='topbanner'
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
}
/>
)}
{
this.state.product_list.picture ? <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.list == 2 ? (
<img
className='goodsPic'
@ -819,13 +843,13 @@ export default class edittemplate extends React.Component {
}
/>
) : (
<img
className='goodsPicMatrax'
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
}
/>
)}
<img
className='goodsPicMatrax'
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
}
/>
)}
{this.state.product_list.list == 2 ? (
<button
className={
@ -919,14 +943,14 @@ export default class edittemplate extends React.Component {
</div>
</div>
</div>
{/* 组件库 */}
{
this.state.showType==2&&this.state.activeNavStatus==2? <CouponComLib componentName={(c)=>this.componentName(c)}/>:null
}
{/* 组件库 */}
{
this.state.showType == 2 && this.state.activeNavStatus == 2 ? <CouponComLib componentName={(c) => this.componentName(c)} /> : null
}
</div>
<div className='xj-wrapper' style={{ 'zIndex': '1' }}>
<div className={ this.state.showType==2&&this.state.activeNavStatus==2?'xj-center-small':'xj-center'}>
<div className={this.state.showType == 2 && this.state.activeNavStatus == 2 ? 'xj-center-small' : 'xj-center'}>
{this.state.activeNavStatus == 1 ? (
<div>
<img
@ -962,23 +986,23 @@ export default class edittemplate extends React.Component {
/>
</div>
) : (
<div>
<img
className='perimg'
onClick={this.reduceFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'
}
/>
<img
className='nextimg'
onClick={this.addFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'
}
/>
</div>
)}
<div>
<img
className='perimg'
onClick={this.reduceFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'
}
/>
<img
className='nextimg'
onClick={this.addFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'
}
/>
</div>
)}
<div
className='editor-main'
ref={this.canvasImgDom}
@ -1008,12 +1032,12 @@ export default class edittemplate extends React.Component {
id='top'
/>
) : (
<img
crossOrigin='anonymous'
src={this.state.model.top_image}
id='top'
/>
)}
<img
crossOrigin='anonymous'
src={this.state.model.top_image}
id='top'
/>
)}
</div>
<div className='center' id='center'>
{!this.state.model.middle_image ? (
@ -1024,12 +1048,12 @@ export default class edittemplate extends React.Component {
}
/>
) : (
<img
crossOrigin='anonymous'
id='center-img'
src={this.state.model.middle_image}
/>
)}
<img
crossOrigin='anonymous'
id='center-img'
src={this.state.model.middle_image}
/>
)}
{this.state.showType == 1 ? (
<img
src={
@ -1038,14 +1062,14 @@ export default class edittemplate extends React.Component {
className='verifycode'
/>
) : (
<img
crossOrigin='anonymous'
src={
'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
}
className='verifycode'
/>
)}
<img
crossOrigin='anonymous'
src={
'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
}
className='verifycode'
/>
)}
<div className='submit'></div>
</div>
@ -1054,29 +1078,29 @@ export default class edittemplate extends React.Component {
this.state.model.describe.type == 0 ? null : this.state
.model.describe &&
this.state.model.describe.type == 1 ? (
<img
src={this.state.model.describe.bg_image}
crossOrigin='anonymous'
/>
) : (
<div className='editbg'>
{this.state.model.describe &&
this.state.model.describe.bg_image ? (
<img
src={this.state.model.describe.bg_image}
crossOrigin='anonymous'
className='bgimg'
/>
) : null}
{this.state.model.describe &&
this.state.model.describe.content ? (
<div
dangerouslySetInnerHTML={{
__html: this.state.model.describe.content
}}></div>
) : null}
</div>
)}
) : (
<div className='editbg'>
{this.state.model.describe &&
this.state.model.describe.bg_image ? (
<img
src={this.state.model.describe.bg_image}
crossOrigin='anonymous'
className='bgimg'
/>
) : null}
{this.state.model.describe &&
this.state.model.describe.content ? (
<div
dangerouslySetInnerHTML={{
__html: this.state.model.describe.content
}}></div>
) : null}
</div>
)}
</div>
</div>
</div>
@ -1085,49 +1109,49 @@ export default class edittemplate extends React.Component {
{this.state.activeNavStatus != 2 ? null : this.state.activeshow &&
this.state.product_list.describe.type == 2 &&
this.state.product_list.describe.content ? (
<Descteplate
backPrepage={(c) => this.showactiveIcon(c)}
goodsdata={this.state.product_list}
/>
) : (
<Goodstemplate
opendesc={(c) => this.setState({ activeshow: true })}
goodsdata={this.state.product_list}
/>
)}
<Descteplate
backPrepage={(c) => this.showactiveIcon(c)}
goodsdata={this.state.product_list}
/>
) : (
<Goodstemplate
opendesc={(c) => this.setState({ activeshow: true })}
goodsdata={this.state.product_list}
/>
)}
{this.state.activeNavStatus != 3 ? null : this.state
.detailactiveshow &&
this.state.product_detail.describe.type == 2 &&
this.state.product_detail.describe.content ? (
<Descteplate
backPrepage={(c) => this.showactivedetail(c)}
goodsdata={this.state.product_detail}
/>
) : (
<div>
<div className="details_type">
<RadioGroup
onChange={(e) => {
this.ondetailTypeChange(e)
}}
value={this.state.detailType}>
<RadioButton value={1} >
权益
<Descteplate
backPrepage={(c) => this.showactivedetail(c)}
goodsdata={this.state.product_detail}
/>
) : (
<div>
<div className="details_type">
<RadioGroup
onChange={(e) => {
this.ondetailTypeChange(e)
}}
value={this.state.detailType}>
<RadioButton value={1} >
权益
</RadioButton>
<RadioButton value={2} >
立减金
<RadioButton value={2} >
立减金
</RadioButton>
</RadioGroup>
</RadioGroup>
</div>
{
this.state.detailType == 1 ? <Detailstemplate
opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail}
/> : <Reduce />
}
</div>
{
this.state.detailType == 1 ? <Detailstemplate
opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail}
/> : <Reduce />
}
</div>
)}
)}
</div>
<div
className='xj-center-fixed'
@ -1138,17 +1162,17 @@ export default class edittemplate extends React.Component {
className='schema-editor-container'
data-editor-role='XJWebsitePage'>
{
this.state.showType!=2?(
this.state.showType != 2 ? (
<div className='control page-title-control'>
{this.state.activeNavStatus == 1 ? (
<h1 style={{ fontSize: '16px' }}>落地页设置</h1>
) : this.state.activeNavStatus == 2 ? (
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
) : (
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
)}
</div>
):null
{this.state.activeNavStatus == 1 ? (
<h1 style={{ fontSize: '16px' }}>落地页设置</h1>
) : this.state.activeNavStatus == 2 ? (
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
) : (
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
)}
</div>
) : null
}
{this.state.showType == 3 ? (
this.state.activeNavStatus == 1 ? (
@ -1183,7 +1207,7 @@ export default class edittemplate extends React.Component {
setdetailftc={(c) => this.getdetailfont_color(c)}
/>
) : <ReduceConfig />
) :this.state.showType==1? this.state.activeNavStatus == 1 ? (
) : this.state.showType == 1 ? this.state.activeNavStatus == 1 ? (
<WhiteLand
landTitle={this.state.model.title}
settitle={(c) => this.getTitle(c)}
@ -1216,7 +1240,7 @@ export default class edittemplate extends React.Component {
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)}
/>
) : <ReduceConfig />:this.state.activeNavStatus == 1 ? (//优惠券
) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券
<CouponLandingForm
settitle={(c) => this.getTitle(c)}
landbgcolor={(c) => this.getlandbgcolor(c)}

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

@ -599,6 +599,15 @@
width: 100%;
height: 70px;
}
>.content-title{
position: relative;
z-index: 999;
height: 20px;
line-height:20px;
margin-bottom: 20px;
padding:0 8px;
font-size: 8px;
}
.searchBar{
transform: scale(0.8);
font-size: 10px;