编辑器商品列表页面活动说明切换，悬浮配置
This commit is contained in:
red-deng-deng
parent
03316222ee
commit
a5b6ec64a3
|
|
@ -1,11 +1,12 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { Button ,ImageUpload,Input ,onUpload} from 'zent';
|
||||
import { Button ,ImageUpload,Input ,ColorPicker,onUpload} from 'zent';
|
||||
import "./main.less"
|
||||
import "../../../assets/comm.css"
|
||||
import { Notify ,RadioGroup,RadioButton} from 'zent';
|
||||
import { Notify ,RadioGroup,RadioButton,Tooltip,Icon} from 'zent';
|
||||
import Ipt from "../../../components/input/main"
|
||||
import Form from "../../../components/form/main"
|
||||
import Wangeditor from './wangeditorCom.js'
|
||||
import FormItem from "../../../components/form-item/main"
|
||||
import {uploadImg,handelResponse,addTheme,putMyTheme,putTheme,putSystemTemplate,addSystemTemplate} from "../../../assets/api.js"
|
||||
export default class edittemplate extends React.Component{
|
||||
|
|
@ -15,24 +16,64 @@ export default class edittemplate extends React.Component{
|
|||
model:{
|
||||
images:[],
|
||||
button_color:'',
|
||||
bg_color:''
|
||||
bg_color:'',
|
||||
suseditorHtml:'',
|
||||
editorHtml:'',
|
||||
activityType:''
|
||||
}
|
||||
}
|
||||
}
|
||||
//活动说明
|
||||
onactivityChange(e){
|
||||
this.setState({activityType:e.target.value})
|
||||
let model1=this.state.model;
|
||||
model1.activityType=e.target.value;
|
||||
this.setState({model:model1})
|
||||
this.props.setdetailActive(e.target.value);
|
||||
}
|
||||
//悬浮富文本
|
||||
getsusEditext(c){
|
||||
let model1=this.state.model;
|
||||
model1.suseditorHtml=c;
|
||||
this.setState({model:model1});
|
||||
this.props.seteditorHtml(c);
|
||||
}
|
||||
//富文本
|
||||
getEditext(c){
|
||||
let model1=this.state.model;
|
||||
model1.editorHtml=c;
|
||||
this.setState({model:model1});
|
||||
this.props.seteditorHtml(c);
|
||||
}
|
||||
onUploadChange(files){
|
||||
if(files.length > 0 && files[0].status == "success")
|
||||
{
|
||||
let model = this.state.model;
|
||||
model.images[0] = files[0].src;
|
||||
this.setState({model:model})
|
||||
let model1 = this.state.model;
|
||||
model1.images[0] = files[0].src;
|
||||
this.setState({model:model1})
|
||||
this.props.setbottomImg(files[0].src);
|
||||
}else{
|
||||
let model1 = this.state.model;
|
||||
model1.images[0] = '';
|
||||
this.setState({model:model1})
|
||||
this.props.setbottomImg("");
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = (color) => {
|
||||
let model1=this.state.model;
|
||||
model1.bg_color=color;
|
||||
this.setState({
|
||||
model:model1
|
||||
});
|
||||
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
let model1=this.state.model;
|
||||
model1.button_color=color;
|
||||
this.setState({
|
||||
model:model1
|
||||
});
|
||||
}
|
||||
|
||||
onUploadError = (type, data) => {
|
||||
if (type === 'overMaxAmount') {
|
||||
|
|
@ -128,45 +169,54 @@ export default class edittemplate extends React.Component{
|
|||
<div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div>
|
||||
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||
<div className="colorItembg dfleac" >
|
||||
<span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<span className="selfset" >自定义</span>
|
||||
<span style={{border:'1px solid #f1f2f3'}} className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<p className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /></p>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<span className="selfset" >自定义</span>
|
||||
<span style={{border:'1px solid #f1f2f3'}} className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"cicle cicle3"} onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"cicle cicle4"} onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span className={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<p className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /></p>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<div style={{marginTop:'20px',fontWeight:'bold'}}>基础图层</div>
|
||||
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<RadioGroup onChange={(e)=>{this.onactivityChange(e)} } value={this.state.activityType}>
|
||||
<div className="activeTip">
|
||||
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<RadioGroup onChange={(e)=>{this.onactivityChange(e)} } value={this.state.model.activityType}>
|
||||
<RadioButton value={1}>图片</RadioButton>
|
||||
<RadioButton value={2}>悬浮</RadioButton>
|
||||
<RadioButton value={3}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname=" " prop="bottom" id="bottom" 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}
|
||||
onError={this.onUploadError}
|
||||
defaultFileList={this.state.model.images[0] ? [{'src':this.state.model.images[2]}] : null}
|
||||
/>
|
||||
</FormItem>
|
||||
<Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">
|
||||
<Icon type="help-circle" className="imgTip" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
{
|
||||
this.state.model.activityType==1?<FormItem required={false} labelname=" " prop="bottom" id="bottom" 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}
|
||||
onError={this.onUploadError}
|
||||
defaultFileList={this.state.model.images[0] ? [{'src':this.state.model.images[0]}] : null}
|
||||
/>
|
||||
</FormItem>:this.state.model.activityType==2?<Wangeditor pageType="detaileditor" setEdittext={c=>this.getsusEditext(c)} />:<Wangeditor pageType="goodeditor" setEdittext={c=>this.getEditext(c)}/>
|
||||
}
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -7,8 +7,11 @@ export default class edittemplate extends React.Component{
|
|||
constructor(props){
|
||||
super(props)
|
||||
}
|
||||
opendescFn(){
|
||||
this.props.opendesc(true)
|
||||
}
|
||||
render(){
|
||||
|
||||
console.log(11,this.props.detaildata);
|
||||
return(
|
||||
<div className="editor-main detailstemplate" tabindex="0" >
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
|
|
@ -16,6 +19,12 @@ export default class edittemplate extends React.Component{
|
|||
<p className="splitLine"></p>
|
||||
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
|
||||
<p className="splitLine"></p>
|
||||
{
|
||||
this.props.detaildata.images&&this.props.detaildata.images.length>0?<img className="detail_bottomImg" src={this.props.detaildata.images[0]}/>:this.props.detaildata.activeType==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.detaildata.editorHtml}}></div>:null
|
||||
}
|
||||
{
|
||||
this.props.detaildata.activeType==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
}
|
||||
<button className="exchangeBtn" style={{background:this.props.detaildata.ftcolor,color:this.props.detaildata.bgcolor}}>立即兑换</button>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import ReactDOM from 'react-dom';
|
||||
import React, { Component } from 'react';
|
||||
import { HashRouter as Router, Route, Link } from "react-router-dom";
|
||||
import { Button ,ColorPicker,ImageUpload,Input ,onUpload} from 'zent';
|
||||
import { Button ,ColorPicker,ImageUpload,Input,Tooltip,onUpload} from 'zent';
|
||||
import "./main.less"
|
||||
import "../../../assets/comm.css"
|
||||
import { Notify,Switch ,RadioGroup,RadioButton,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu ,BlockLoading} from 'zent';
|
||||
|
|
@ -12,7 +12,7 @@ import {uploadImg,handelResponse,addTheme,putMyTheme,putTheme,putSystemTemplate,
|
|||
import PreviewItem from "../template/preview.js"
|
||||
import html2canvas from 'html2canvas'
|
||||
import Goodstemplate from './goodstemplate'
|
||||
const ColorBoard = ColorPicker.ColorBoard;
|
||||
import Wangeditor from './wangeditorCom.js'
|
||||
export default class edittemplate extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
|
|
@ -29,7 +29,10 @@ export default class edittemplate extends React.Component{
|
|||
bg_color:"",
|
||||
button_color:"",
|
||||
top_img:null,
|
||||
list:1
|
||||
list:1,
|
||||
activityType:'',
|
||||
editorHtml:'',
|
||||
suseditorHtml:''
|
||||
},
|
||||
preview_visible:false,
|
||||
previewData:null,
|
||||
|
|
@ -37,7 +40,7 @@ export default class edittemplate extends React.Component{
|
|||
isExchangePage:false,
|
||||
isSystemModel:false,
|
||||
thumbfile:'',
|
||||
activityType:'',
|
||||
|
||||
activeNavStatus:1,
|
||||
headfile:''
|
||||
}
|
||||
|
|
@ -61,7 +64,10 @@ export default class edittemplate extends React.Component{
|
|||
}
|
||||
//活动说明
|
||||
onactivityChange(e){
|
||||
this.setState({activityType:e.target.value})
|
||||
let model1=this.state.model;
|
||||
model1.activityType=e.target.value;
|
||||
this.setState({model:model1})
|
||||
this.props.setactiveType(e.target.value);
|
||||
}
|
||||
|
||||
//顶部banner
|
||||
|
|
@ -72,19 +78,42 @@ export default class edittemplate extends React.Component{
|
|||
model.images[0] = files[0].src;
|
||||
this.setState({model:model})
|
||||
this.props.setbanner(files[0].src);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
}else{
|
||||
let model = this.state.model;
|
||||
model.images[0] ='';
|
||||
this.setState({model:model})
|
||||
this.props.setbanner("");
|
||||
}
|
||||
};
|
||||
//悬浮富文本
|
||||
getsusEditext(c){
|
||||
let model1=this.state.model;
|
||||
model1.suseditorHtml=c;
|
||||
this.setState({model:model1});
|
||||
this.props.seteditorHtml(c);
|
||||
}
|
||||
//富文本
|
||||
getEditext(c){
|
||||
let model1=this.state.model;
|
||||
model1.editorHtml=c;
|
||||
this.setState({model:model1});
|
||||
this.props.seteditorHtml(c);
|
||||
}
|
||||
|
||||
//底部描述图
|
||||
onUploadChange2(files){
|
||||
if(files.length > 0 && files[0].status == "success")
|
||||
{
|
||||
let model = this.state.model;
|
||||
model.images[2] = files[0].src;
|
||||
this.setState({model:model})
|
||||
}
|
||||
|
||||
this.setState({model:model})
|
||||
this.props.setbottomImg(files[0].src);
|
||||
}else{
|
||||
let model = this.state.model;
|
||||
model.images[2] ='';
|
||||
this.setState({model:model})
|
||||
this.props.setbottomImg("");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -96,7 +125,23 @@ export default class edittemplate extends React.Component{
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
handleChange = (color) => {
|
||||
let model1=this.state.model;
|
||||
model1.bg_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
|
||||
});
|
||||
this.props.setButtoncolor(color);
|
||||
}
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor){
|
||||
|
|
@ -193,21 +238,24 @@ export default class edittemplate extends React.Component{
|
|||
{
|
||||
this.state.model.list==1?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||
<div className="colorItembg dfleac" >
|
||||
<span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<span className="selfset" >自定义</span>
|
||||
<span className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<p className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /></p>
|
||||
</div>
|
||||
</FormItem>:null
|
||||
}
|
||||
{
|
||||
this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#04C160'?'2px solid #cbe1fd':'none'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #cbe1fd':'none'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #cbe1fd':'none'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #cbe1fd':'none'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<span className="selfset" >自定义</span>
|
||||
<span className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"cicle cicle3"} onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"cicle cicle4"} onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span className={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<p className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</FormItem>:null
|
||||
|
|
@ -231,29 +279,37 @@ export default class edittemplate extends React.Component{
|
|||
/>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<div className="activeTip">
|
||||
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<RadioGroup onChange={(e)=>{this.onactivityChange(e)} } value={this.state.activityType}>
|
||||
<RadioGroup onChange={(e)=>{this.onactivityChange(e)} } value={this.state.model.activityType}>
|
||||
<RadioButton value={1}>图片</RadioButton>
|
||||
<RadioButton value={2}>悬浮</RadioButton>
|
||||
<RadioButton value={3}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e)=>{this.onUploadChange2(e)} }
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
defaultFileList={this.state.model.images[2] ? [{'src':this.state.model.images[2]}] : null}
|
||||
/>
|
||||
|
||||
</FormItem>
|
||||
<Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">
|
||||
<Icon type="help-circle" className="imgTip" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
{
|
||||
this.state.model.activityType==1?<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e)=>{this.onUploadChange2(e)} }
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
defaultFileList={this.state.model.images[2] ? [{'src':this.state.model.images[2]}] : null}
|
||||
/>
|
||||
</FormItem>:this.state.model.activityType==2?<Wangeditor pageType="goodsuseditor" setEdittext={c=>this.getsusEditext(c)} />:<Wangeditor pageType="goodeditor" setEdittext={c=>this.getEditext(c)}/>
|
||||
}
|
||||
|
||||
|
||||
</Form>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import ReactDOM from "react-dom"
|
||||
import React,{Component} from 'react'
|
||||
import './goodstemplate.less'
|
||||
export default class goodsdesc extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
|
||||
}
|
||||
}
|
||||
backPre(){
|
||||
this.props.backPrepage(0);
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div className="editor-main goodstemplate desc-goods" >
|
||||
<p>
|
||||
活动规则
|
||||
</p>
|
||||
<img onClick={this.backPre.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
<div className="descript" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.editorHtml}}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -6,19 +6,32 @@ import './goodstemplate.less'
|
|||
export default class edittemplate extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
}
|
||||
}
|
||||
opendescFn(){
|
||||
this.props.opendesc(true)
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div className="editor-main goodstemplate" tabindex="0" >
|
||||
|
||||
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
<img className="topbanner" src={this.props.goodsdata.banner}/>
|
||||
{
|
||||
!this.props.goodsdata.banner?<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>:<img className="topbanner" src={this.props.goodsdata.banner}/>
|
||||
}
|
||||
|
||||
{
|
||||
this.props.goodsdata.list==1?<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'}/>
|
||||
}
|
||||
{
|
||||
this.props.goodsdata.list==1? <button className="exchageBtn" style={{color:this.props.goodsdata.ftcolor,background:this.props.goodsdata.bgcolor}}>立即兑换</button>:null
|
||||
}
|
||||
|
||||
this.props.goodsdata.list==1? <button className={this.props.goodsdata.bottomimg||this.props.goodsdata.activeType==3?"exchageBtn bottomBtn":"exchageBtn"} style={{color:this.props.goodsdata.ftcolor,background:this.props.goodsdata.bgcolor}}>立即兑换</button>:null
|
||||
}
|
||||
{
|
||||
this.props.goodsdata.activeType==1? <img src={this.props.goodsdata.bottomimg} alt="" className="bottomTip"/>:this.props.goodsdata.activeType==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.editorHtml}}></div>:null
|
||||
}
|
||||
{
|
||||
this.props.goodsdata.activeType==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
height: 653px;
|
||||
background: #F2F7F8;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
>.preBtn{
|
||||
position: absolute;
|
||||
width: 28px;
|
||||
|
|
@ -33,11 +35,39 @@
|
|||
border-radius: 36px;
|
||||
height: 36px;
|
||||
margin:30px 0 0 13px;
|
||||
&.bottomBtn{
|
||||
position: fixed;
|
||||
top:695px;
|
||||
}
|
||||
}
|
||||
.susactive_tip{
|
||||
position: fixed;
|
||||
top: 143px;
|
||||
margin-left: 300px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.bottomactiveTip{
|
||||
width: 349px;
|
||||
margin:10px 13px 0;
|
||||
padding: 24px 20px 60px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 13px 2px #f1f2f3;
|
||||
line-height: 1.5rem;
|
||||
p{
|
||||
width: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailstemplate{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
padding-bottom: 20px;
|
||||
.detail_bottomImg{
|
||||
width: 100%;
|
||||
}
|
||||
.topBanner{
|
||||
width: 100%;
|
||||
height: 373px;
|
||||
|
|
@ -51,14 +81,51 @@
|
|||
width: 100%;
|
||||
}
|
||||
.exchangeBtn{
|
||||
width: 100%;
|
||||
width:370px;
|
||||
height: 44px;
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
position: fixed;
|
||||
margin-left: 2.5px;
|
||||
// bottom: 2%;
|
||||
top: 750px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.activeTip{
|
||||
position: relative;
|
||||
.imgTip{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 60px;
|
||||
margin-top: -10px;
|
||||
color: #BABBBD;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.bottomTip{
|
||||
width: 100%;
|
||||
}
|
||||
.desc-goods{
|
||||
.descript{
|
||||
padding: 30px 24px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5rem;
|
||||
background: #fff;
|
||||
color: #45464b!important;
|
||||
height: 100%;
|
||||
}
|
||||
>p{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #f7f8f9;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -234,9 +234,9 @@ export default class edittemplate extends React.Component{
|
|||
<div style={{marginTop:'20px',marginBottom:'15px',fontWeight:'bold'}}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||
<div className="colorItembg dfleac">
|
||||
<span className="cicle" style={{border:this.state.model.bg_color=='#ffffff'?'2px solid #cbe1fd':'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.bg_color=='#EEEEEE'?'2px solid #cbe1fd':'none'}} className="cicle cicle1" onClick={()=>{this.bgcolor('#EEEEEE')}}></span>
|
||||
<span style={{border:this.state.model.bg_color=='#000000'?'2px solid #cbe1fd':'none'}} className="cicle cicle2" onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<span className="cicle" style={{border:'1px solid #f1f2f3'}} className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.bg_color=='#EEEEEE'?"activecicle cicle cicle1":"cicle cicle1"} onClick={()=>{this.bgcolor('#EEEEEE')}}></span>
|
||||
<span className={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||
<p className="selfset" onClick={this.setBgColorFn.bind(this)}>
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
|
||||
</p>
|
||||
|
|
@ -244,11 +244,11 @@ export default class edittemplate extends React.Component{
|
|||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{border:this.state.model.button_color=='#ffffff'?'2px solid #fff':'2px solid #fff'}} className="cicle" onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#04C160'?'2px solid #fff':'2px solid #04C160'}} className="cicle cicle6" onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#AE99D3'?'2px solid #fff':'2px solid #AE99D3'}} className="cicle cicle3" onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FACD6A'?'2px solid #fff':'2px solid #FACD6A'}} className="cicle cicle4" onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span style={{border:this.state.model.button_color=='#FE7962'?'2px solid #fff':'2px solid #FE7962'}} className="cicle cicle5" onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<span style={{border:'1px solid #f1f2f3'}} className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||
<span className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"cicle cicle3"} onClick={()=>{this.fontcolor('#AE99D3')}}></span>
|
||||
<span className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"cicle cicle4"} onClick={()=>{this.fontcolor('#FACD6A')}}></span>
|
||||
<span className={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span>
|
||||
<p className="selfset" onClick={this.setFtColorFn.bind(this)}>
|
||||
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
|
||||
</p>
|
||||
|
|
@ -332,7 +332,7 @@ export default class edittemplate extends React.Component{
|
|||
|
||||
</FormItem>:null
|
||||
}
|
||||
{this.state.model.activityType==2?<Wangeditor setEdittext={c=>this.getEditext(c)}/>:null}
|
||||
{this.state.model.activityType==2?<Wangeditor pageType="landeditor" setEdittext={c=>this.getEditext(c)}/>:null}
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<FormItem labelname="权重" prop="sort" id="sort" labelwidth="80px">
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import PreviewItem from "../template/preview.js"
|
|||
import html2canvas from 'html2canvas'
|
||||
import Goodstemplate from './goodstemplate'
|
||||
import Detailstemplate from './detailstemplate'
|
||||
import Descteplate from "./goodsdesc"
|
||||
import LandingForm from './landingPage' //落地页表单
|
||||
import GoodsForm from './goodsPage' //商品页表单
|
||||
import DetailsPage from './detailsPage' //商品详情页面
|
||||
|
|
@ -22,6 +23,8 @@ export default class edittemplate extends React.Component{
|
|||
this.state={
|
||||
color:"#ffffff",
|
||||
text:"等我两分钟",
|
||||
activeshow:true,//控制显示
|
||||
detailactiveshow:true,
|
||||
showType:1,//兑换码/白名单/立减金
|
||||
//落地页
|
||||
model:{
|
||||
|
|
@ -41,11 +44,17 @@ export default class edittemplate extends React.Component{
|
|||
list:1,
|
||||
banner:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png',
|
||||
ftcolor:'',
|
||||
bgcolor:''
|
||||
bgcolor:'',
|
||||
bottomimg:'',
|
||||
editorHtml:'',
|
||||
activeType:''
|
||||
},
|
||||
detailConfigure:{
|
||||
ftcolor:'',
|
||||
bgcolor:''
|
||||
bgcolor:'',
|
||||
editorHtml:'',
|
||||
images:[],
|
||||
activeType:''
|
||||
},
|
||||
preview_visible:false,
|
||||
previewData:null,
|
||||
|
|
@ -89,13 +98,11 @@ getLandingdata(val){
|
|||
if(myInfo == 1)
|
||||
{
|
||||
this.setState({isSystemModel:true})
|
||||
console.log(7777)
|
||||
return;
|
||||
}
|
||||
if(myInfo)
|
||||
{
|
||||
myInfo = JSON.parse(myInfo)
|
||||
|
||||
let model = {
|
||||
id:myInfo.id,
|
||||
images:myInfo.images.length == 3 ? myInfo.images : this.state.model.images ,
|
||||
|
|
@ -111,24 +118,17 @@ getLandingdata(val){
|
|||
this.setState({isSystemModel:true})
|
||||
model.sort = myInfo.sort;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(myInfo.href)
|
||||
{
|
||||
|
||||
model.list = parseInt(myInfo.list)
|
||||
model.use = myInfo.use
|
||||
model.link = myInfo.link
|
||||
model.edit= myInfo.edit
|
||||
model.href= myInfo.href
|
||||
|
||||
this.setState({isExchangePage:true})
|
||||
|
||||
}
|
||||
|
||||
this.setState({model:model})
|
||||
|
||||
}
|
||||
}
|
||||
async onSave(){
|
||||
|
|
@ -212,12 +212,6 @@ getLandingdata(val){
|
|||
// }
|
||||
|
||||
// else{
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// if(this.state.model.id > 0)
|
||||
// {
|
||||
|
||||
|
|
@ -265,8 +259,6 @@ getLandingdata(val){
|
|||
// Notify.error(err)
|
||||
// })
|
||||
// });
|
||||
|
||||
|
||||
// }else{
|
||||
// addTheme(formdata).then((res)=>{
|
||||
// handelResponse(res,(req,msg)=>{
|
||||
|
|
@ -279,16 +271,7 @@ getLandingdata(val){
|
|||
// Notify.error(err)
|
||||
// })
|
||||
// });
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
@ -302,6 +285,7 @@ getLandingdata(val){
|
|||
getlandftcolor(c){
|
||||
let landConfig=this.state.landConfigure;
|
||||
}
|
||||
|
||||
getTitle(c){
|
||||
let landConfig=this.state.model;
|
||||
landConfig.title=c;
|
||||
|
|
@ -313,6 +297,11 @@ getLandingdata(val){
|
|||
goodsConfig.banner=c;
|
||||
this.setState({goodsConfig:goodsConfig});
|
||||
}
|
||||
getbottomimgFn(c){
|
||||
let goodsConfig=this.state.goodsConfigure;
|
||||
goodsConfig.bottomimg=c;
|
||||
this.setState({goodsConfig:goodsConfig});
|
||||
}
|
||||
//获取商品排列方式
|
||||
getarrayType(c){
|
||||
let goodsConfig=this.state.goodsConfigure;
|
||||
|
|
@ -325,6 +314,29 @@ getLandingdata(val){
|
|||
goodsConfig.ftcolor=c;
|
||||
this.setState({goodsConfig:goodsConfig});
|
||||
}
|
||||
//富文本
|
||||
getEditorHtmlFn(c){
|
||||
let goodsConfig=this.state.goodsConfigure;
|
||||
goodsConfig.editorHtml=c;
|
||||
this.setState({goodsConfig:goodsConfig});
|
||||
}
|
||||
//详情页
|
||||
getdetailEditorHtmlFn(c){
|
||||
let detailpage=this.state.detailConfigure;
|
||||
detailpage.editorHtml=c;
|
||||
this.setState({detailConfigure:detailpage});
|
||||
}
|
||||
getdetailActiveFn(c){
|
||||
let detailpage=this.state.detailConfigure;
|
||||
detailpage.activeType=c;
|
||||
this.setState({detailConfigure:detailpage});
|
||||
}
|
||||
//活动说明类型
|
||||
getactiveTypeFn(c){
|
||||
let goodsConfig=this.state.goodsConfigure;
|
||||
goodsConfig.activeType=c;
|
||||
this.setState({goodsConfig:goodsConfig});
|
||||
}
|
||||
//字体颜色
|
||||
getButtoncolor(c){
|
||||
let goodsConfig=this.state.goodsConfigure;
|
||||
|
|
@ -351,6 +363,11 @@ getLandingdata(val){
|
|||
detailConfig.bgcolor=c;
|
||||
this.setState({detailConfigure:detailConfig});
|
||||
}
|
||||
getbottomimgFn(c){
|
||||
let detailConfig=this.state.detailConfigure;
|
||||
detailConfig.images[0]=c;
|
||||
this.setState({detailConfigure:detailConfig});
|
||||
}
|
||||
onUploadChange(files){
|
||||
if(files.length > 0 && files[0].status == "success")
|
||||
{
|
||||
|
|
@ -484,6 +501,9 @@ getLandingdata(val){
|
|||
bgcolor(cor){
|
||||
this.setState({bg_color:cor});
|
||||
}
|
||||
showactiveIcon(c){
|
||||
this.setState({activeshow:false});
|
||||
}
|
||||
onUpload = (file, report) => {
|
||||
let self=this;
|
||||
console.log('上传头像',file);
|
||||
|
|
@ -596,14 +616,22 @@ getLandingdata(val){
|
|||
<div onClick={()=>this.activeChoice(2)} className={this.state.activeNavStatus==2?'activeNav thumbheader' :'thumbheader'}>
|
||||
<div className="goodsList-item" tabindex="0" >
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
<img className="topbanner" src={this.state.goodsConfigure.banner}/>
|
||||
{
|
||||
this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.goodsConfigure.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.state.goodsConfigure.list==1? <button className="exchageBtn" style={{color:this.state.goodsConfigure.ftcolor,background:this.state.goodsConfigure.bgcolor}}>立即兑换</button>:null
|
||||
this.state.goodsConfigure.banner?<img className="topbanner" src={this.state.goodsConfigure.banner}/>:<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>
|
||||
}
|
||||
|
||||
{
|
||||
this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.goodsConfigure.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.state.goodsConfigure.list==1? <button className={this.state.goodsConfigure.bottomimg||this.state.goodsConfigure.activeType==3?"exchageBtn bottom_exchageBtn":"exchageBtn"} style={{color:this.state.goodsConfigure.ftcolor,background:this.state.goodsConfigure.bgcolor}}>立即兑换</button>:null
|
||||
}
|
||||
{
|
||||
this.state.goodsConfigure.activeType==1? <img className="bottom_Img" src={this.state.goodsConfigure.bottomimg} alt="" />:this.state.goodsConfigure.activeType==3?<div className="bottom_activeTip" dangerouslySetInnerHTML = {{ __html:this.state.goodsConfigure.editorHtml}}></div>:null
|
||||
}
|
||||
{
|
||||
this.state.goodsConfigure.activeType==2?<img className="susactive_Tip" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -617,7 +645,8 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
|
|||
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
|
||||
<p className="splitLine"></p>
|
||||
<button className="exchangeBtn" style={{background:this.state.detailConfigure.ftcolor,color:this.state.detailConfigure.bgcolor}}>立即兑换</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -684,12 +713,13 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
|
|||
</div>:null
|
||||
}
|
||||
{
|
||||
this.state.activeNavStatus==2?<Goodstemplate goodsdata={this.state.goodsConfigure}/>:null
|
||||
this.state.activeNavStatus!=2?null:this.state.activeshow&&this.state.goodsConfigure.activeType==2&&this.state.goodsConfigure.editorHtml?<Descteplate backPrepage={c=>this.showactiveIcon(c)} goodsdata={this.state.goodsConfigure}/>:<Goodstemplate opendesc={c=>this.setState({activeshow:true})} goodsdata={this.state.goodsConfigure}/>
|
||||
}
|
||||
{
|
||||
this.state.activeNavStatus==3?<Detailstemplate detaildata={this.state.detailConfigure}/>:null
|
||||
{
|
||||
this.state.activeNavStatus!=3?null:this.state.detailactiveshow&&this.state.detailConfigure.activeType==2&&this.state.detailConfigure.editorHtml?<Descteplate backPrepage={c=>this.showactiveIcon(c)} goodsdata={this.state.goodsConfigure}/>:<Detailstemplate opendesc={c=>this.setState({detailactiveshow:true})} detaildata={this.state.detailConfigure}/>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div className="xj-center-fixed" style={{ "margin-left": "288px"}}>
|
||||
</div>
|
||||
|
|
@ -703,20 +733,10 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
|
|||
( <h1 style={{fontSize:'16px'}}>落地页设置</h1>) : this.state.activeNavStatus==2 ? ( <h1 style={{fontSize:'16px'}}>商品列表页设置</h1>):( <h1 style={{fontSize:'16px'}}>商品详情页设置</h1>)
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
this.state.activeNavStatus==1?<LandingForm settitle={(c)=>this.getTitle(c)} landbgcolor={(c)=>this.getlandbgcolor(c)} landftcolor={(c)=>this.getlandftcolor(c)} setbanner={(e)=>this.getLandingdata(e)}/>:this.state.activeNavStatus==2?<GoodsForm setButtonbgcolor={(c)=>{this.getButtonbgcolor(c)}} setButtoncolor={(c)=>{this.getButtoncolor(c)}} setbanner={(c)=>this.getGoodsbanner(c)} setarrayType={(c)=>this.getarrayType(c)}/>:<DetailsPage setdetailbgc={c=>{this.getdetailbgcolor(c)}} setdetailftc={c=>this.getdetailftcolor(c)}/>
|
||||
this.state.activeNavStatus==1?<LandingForm settitle={(c)=>this.getTitle(c)} landbgcolor={(c)=>this.getlandbgcolor(c)} landftcolor={(c)=>this.getlandftcolor(c)} setbanner={(e)=>this.getLandingdata(e)} />:this.state.activeNavStatus==2?<GoodsForm setactiveType={c=>this.getactiveTypeFn(c)} seteditorHtml={c=>this.getEditorHtmlFn(c)} setButtonbgcolor={(c)=>{this.getButtonbgcolor(c)}} setButtoncolor={(c)=>{this.getButtoncolor(c)}} setbottomImg={c=>this.getbottomimgFn(c)} setbanner={(c)=>this.getGoodsbanner(c)} setarrayType={(c)=>this.getarrayType(c)}/>:<DetailsPage seteditorHtml={c=>this.getdetailEditorHtmlFn(c)} setdetailActive={c=>this.getdetailActiveFn(c)} setdetailbgc={c=>{this.getdetailbgcolor(c)}} setbottomImg={c=>this.getbottomimgFn(c)} setdetailftc={c=>this.getdetailftcolor(c)}/>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
|
|
@ -727,19 +747,10 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
|
|||
<Icon type="close" className="preview-top-close" onClick={(e)=>{this.onClose(e)}} />
|
||||
</div>
|
||||
<PreviewItem data={this.state.previewData} ref="preview" />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
) :null
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1183,33 +1183,75 @@
|
|||
}
|
||||
.colorItembg,.colorItemfont{
|
||||
margin-top: -15px;
|
||||
.cicle::before{
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top:-4px;
|
||||
left: -4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 28px;
|
||||
background: transparent;
|
||||
border:1px solid #fff;
|
||||
|
||||
}
|
||||
.cicle{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
border-radius: 22px;
|
||||
// box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cicle1{
|
||||
background:#EEEEEE;
|
||||
}
|
||||
.cicle2{
|
||||
background:#000;
|
||||
z-index: 55;
|
||||
&.activecicle::before{
|
||||
border:1px solid #cbe1fd;
|
||||
}
|
||||
|
||||
}
|
||||
.cicle6{
|
||||
background:#04C160;
|
||||
&.activecicle::before{
|
||||
border:1px solid #04C160;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cicle3{
|
||||
background:#AE99D3;
|
||||
}.cicle4{
|
||||
&.activecicle::before{
|
||||
border:1px solid #AE99D3;
|
||||
}
|
||||
}
|
||||
|
||||
.cicle4{
|
||||
background:#FACD6A;
|
||||
&.activecicle::before{
|
||||
border:1px solid #FACD6A;
|
||||
}
|
||||
}.cicle5{
|
||||
background:#FE7962;
|
||||
&.activecicle::before{
|
||||
border:1px solid #FE7962;
|
||||
}
|
||||
}
|
||||
.cicle1{
|
||||
background:#EEEEEE;
|
||||
&.activecicle::before{
|
||||
border:1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
.cicle2{
|
||||
background:#000;
|
||||
&.activecicle::before{
|
||||
border:1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.selfset{
|
||||
margin-left: 10px;
|
||||
|
|
@ -1622,9 +1664,33 @@ div{
|
|||
}
|
||||
.goodsList-item{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.topbanner{
|
||||
width: 100%;
|
||||
}
|
||||
.bottom_Img{
|
||||
width: 100%;
|
||||
}
|
||||
.bottom_activeTip{
|
||||
width: 7.2vw;
|
||||
margin-left: 0.4vw;
|
||||
padding: 6px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 13px 2px #f1f2f3;
|
||||
box-sizing: border-box;
|
||||
line-height:15px;
|
||||
padding-bottom: 60px;
|
||||
font-size: 8px;
|
||||
}
|
||||
.susactive_Tip{
|
||||
position: fixed;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: -7vw;
|
||||
margin-left:-1.8vw;
|
||||
}
|
||||
.preBtn{
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
|
|
@ -1636,7 +1702,13 @@ div{
|
|||
width:90%;
|
||||
margin-left: 5%;
|
||||
position: relative;
|
||||
margin-top: -30px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
.bottom_exchageBtn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 0 5% 3%!important;
|
||||
}
|
||||
.exchageBtn{
|
||||
width:90%;
|
||||
|
|
|
|||
|
|
@ -32,11 +32,18 @@ export default class wangeditor extends React.Component{
|
|||
|
||||
};
|
||||
editor.create()
|
||||
if(config&&config.land){
|
||||
editor.txt.html(config.land.editorHtml)
|
||||
}
|
||||
|
||||
//列表悬浮富文本
|
||||
let editext="";
|
||||
if(this.props.pageType=='landeditor'){
|
||||
editext=config&&config.land?config.land.editorHtml:''
|
||||
}else if(this.props.pageType=='goodeditor'){
|
||||
editext=config&&config.goodspage?config.goodspage.editorHtml:''
|
||||
}else if(this.props.pageType=='goodsuseditor'){
|
||||
editext=config&&config.goodspage?config.goodspage.suseditorHtml:''
|
||||
}
|
||||
editor.txt.html(editext)
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div id="wangeditorDom"></div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue