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:
red-deng-deng 2022-01-07 19:36:01 +08:00
parent 03316222ee
commit a5b6ec64a3
10 changed files with 473 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/exchangepage/edittemplate/detailsPage.js
View File

@ -1,11 +1,12 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Button ,ImageUpload,Input ,onUpload} from 'zent'; import { Button ,ImageUpload,Input ,ColorPicker,onUpload} from 'zent';
import "./main.less" import "./main.less"
import "../../../assets/comm.css" 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 Ipt from "../../../components/input/main"
import Form from "../../../components/form/main" import Form from "../../../components/form/main"
import Wangeditor from './wangeditorCom.js'
import FormItem from "../../../components/form-item/main" import FormItem from "../../../components/form-item/main"
import {uploadImg,handelResponse,addTheme,putMyTheme,putTheme,putSystemTemplate,addSystemTemplate} from "../../../assets/api.js" import {uploadImg,handelResponse,addTheme,putMyTheme,putTheme,putSystemTemplate,addSystemTemplate} from "../../../assets/api.js"
export default class edittemplate extends React.Component{ export default class edittemplate extends React.Component{
@ -15,24 +16,64 @@ export default class edittemplate extends React.Component{
model:{ model:{
images:[], images:[],
button_color:'', button_color:'',
bg_color:'' bg_color:'',
suseditorHtml:'',
editorHtml:'',
activityType:''
} }
} }
} }
//活动说明 //活动说明
onactivityChange(e){ 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){ onUploadChange(files){
if(files.length > 0 && files[0].status == "success") if(files.length > 0 && files[0].status == "success")
{ {
let model = this.state.model; let model1 = this.state.model;
model.images[0] = files[0].src; model1.images[0] = files[0].src;
this.setState({model:model}) 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) => { onUploadError = (type, data) => {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
@ -128,32 +169,40 @@ export default class edittemplate extends React.Component{
<div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div> <div style={{fontWeight:'bold',marginBottom:'20px'}}>样式</div>
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px"> <FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" > <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:'1px solid #f1f2f3'}} className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } 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={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span> <p className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /></p>
</div> </div>
</FormItem> </FormItem>
<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <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:'1px solid #f1f2f3'}} className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"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 className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"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 className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"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 className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"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={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span> <p className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /></p>
</div> </div>
</FormItem> </FormItem>
<div style={{marginTop:'20px',fontWeight:'bold'}}>基础图层</div> <div style={{marginTop:'20px',fontWeight:'bold'}}>基础图层</div>
<div className="activeTip">
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px"> <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={1}>图片</RadioButton>
<RadioButton value={2}>悬浮</RadioButton> <RadioButton value={2}>悬浮</RadioButton>
<RadioButton value={3}>富文本</RadioButton> <RadioButton value={3}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px"> <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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -164,9 +213,10 @@ export default class edittemplate extends React.Component{
onChange={(e)=>{this.onUploadChange(e)} } onChange={(e)=>{this.onUploadChange(e)} }
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.images[0] ? [{'src':this.state.model.images[2]}] : null} defaultFileList={this.state.model.images[0] ? [{'src':this.state.model.images[0]}] : null}
/> />
</FormItem> </FormItem>:this.state.model.activityType==2?<Wangeditor pageType="detaileditor" setEdittext={c=>this.getsusEditext(c)} />:<Wangeditor pageType="goodeditor" setEdittext={c=>this.getEditext(c)}/>
}
</Form> </Form>
</div> </div>
) )

11
src/pages/exchangepage/edittemplate/detailstemplate.js
View File

@ -7,8 +7,11 @@ export default class edittemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
} }
opendescFn(){
this.props.opendesc(true)
}
render(){ render(){
console.log(11,this.props.detaildata);
return( return(
<div className="editor-main detailstemplate" tabindex="0" > <div className="editor-main detailstemplate" tabindex="0" >
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/> <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
@ -16,6 +19,12 @@ export default class edittemplate extends React.Component{
<p className="splitLine"></p> <p className="splitLine"></p>
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/> <img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
<p className="splitLine"></p> <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> <button className="exchangeBtn" style={{background:this.props.detaildata.ftcolor,color:this.props.detaildata.bgcolor}}>立即兑换</button>
</div> </div>
) )

98
src/pages/exchangepage/edittemplate/goodsPage.js
View File

@ -1,7 +1,7 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom"; 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 "./main.less"
import "../../../assets/comm.css" import "../../../assets/comm.css"
import { Notify,Switch ,RadioGroup,RadioButton,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu ,BlockLoading} from 'zent'; 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 PreviewItem from "../template/preview.js"
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import Goodstemplate from './goodstemplate' import Goodstemplate from './goodstemplate'
const ColorBoard = ColorPicker.ColorBoard; import Wangeditor from './wangeditorCom.js'
export default class edittemplate extends React.Component{ export default class edittemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
@ -29,7 +29,10 @@ export default class edittemplate extends React.Component{
bg_color:"", bg_color:"",
button_color:"", button_color:"",
top_img:null, top_img:null,
list:1 list:1,
activityType:'',
editorHtml:'',
suseditorHtml:''
}, },
preview_visible:false, preview_visible:false,
previewData:null, previewData:null,
@ -37,7 +40,7 @@ export default class edittemplate extends React.Component{
isExchangePage:false, isExchangePage:false,
isSystemModel:false, isSystemModel:false,
thumbfile:'', thumbfile:'',
activityType:'',
activeNavStatus:1, activeNavStatus:1,
headfile:'' headfile:''
} }
@ -61,7 +64,10 @@ export default class edittemplate extends React.Component{
} }
//活动说明 //活动说明
onactivityChange(e){ 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 //顶部banner
@ -72,19 +78,42 @@ export default class edittemplate extends React.Component{
model.images[0] = files[0].src; model.images[0] = files[0].src;
this.setState({model:model}) this.setState({model:model})
this.props.setbanner(files[0].src); 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){ onUploadChange2(files){
if(files.length > 0 && files[0].status == "success") if(files.length > 0 && files[0].status == "success")
{ {
let model = this.state.model; let model = this.state.model;
model.images[2] = files[0].src; 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}`); 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){ 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"> this.state.model.list==1?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" > <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 className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'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={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
<span className="selfset" >自定义</span> <p className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /></p>
</div> </div>
</FormItem>:null </FormItem>:null
} }
{ {
this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <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 className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} 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 className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"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 className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"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 className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"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={this.state.model.button_color=='#FE7962'?"activecicle cicle cicle5":"cicle cicle5"} onClick={()=>{this.fontcolor('#FE7962')}}></span>
<span className="selfset" >自定义</span> <p className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
</p>
</div> </div>
</FormItem>:null </FormItem>:null
@ -231,15 +279,21 @@ export default class edittemplate extends React.Component{
/> />
</FormItem> </FormItem>
<div className="activeTip">
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px"> <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={1}>图片</RadioButton>
<RadioButton value={2}>悬浮</RadioButton> <RadioButton value={2}>悬浮</RadioButton>
<RadioButton value={3}>富文本</RadioButton> <RadioButton value={3}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -252,8 +306,10 @@ export default class edittemplate extends React.Component{
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.images[2] ? [{'src':this.state.model.images[2]}] : null} 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)}/>
}
</FormItem>
</Form> </Form>
</div> </div>

27
src/pages/exchangepage/edittemplate/goodsdesc.js Normal file
View File

@ -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>
)
}
}

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

@ -7,18 +7,31 @@ export default class edittemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
} }
opendescFn(){
this.props.opendesc(true)
}
render(){ render(){
return( return(
<div className="editor-main goodstemplate" tabindex="0" > <div className="editor-main goodstemplate" tabindex="0" >
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/> <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
<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?<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> </div>
) )
} }

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

@ -2,6 +2,8 @@
height: 653px; height: 653px;
background: #F2F7F8; background: #F2F7F8;
position: relative; position: relative;
overflow-y: auto;
overflow-x: hidden;
>.preBtn{ >.preBtn{
position: absolute; position: absolute;
width: 28px; width: 28px;
@ -33,11 +35,39 @@
border-radius: 36px; border-radius: 36px;
height: 36px; height: 36px;
margin:30px 0 0 13px; 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{ .detailstemplate{
position: relative; position: relative;
background: #fff; background: #fff;
padding-bottom: 20px;
.detail_bottomImg{
width: 100%;
}
.topBanner{ .topBanner{
width: 100%; width: 100%;
height: 373px; height: 373px;
@ -51,14 +81,51 @@
width: 100%; width: 100%;
} }
.exchangeBtn{ .exchangeBtn{
width: 100%; width:370px;
height: 44px; height: 44px;
border-radius: 22px; border-radius: 22px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: absolute; position: fixed;
bottom: 2%; margin-left: 2.5px;
// bottom: 2%;
top: 750px;
color: #fff; 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;
}
}

18
src/pages/exchangepage/edittemplate/landingPage.js
View File

@ -234,9 +234,9 @@ export default class edittemplate extends React.Component{
<div style={{marginTop:'20px',marginBottom:'15px',fontWeight:'bold'}}>样式</div> <div style={{marginTop:'20px',marginBottom:'15px',fontWeight:'bold'}}>样式</div>
<FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px"> <FormItem labelname="背景颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac"> <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 className="cicle" style={{border:'1px solid #f1f2f3'}} className={this.state.model.bg_color=='#ffffff'?"cicle activecicle":"cicle" } 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 className={this.state.model.bg_color=='#EEEEEE'?"activecicle cicle cicle1":"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={this.state.model.bg_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
<p className="selfset" onClick={this.setBgColorFn.bind(this)}> <p className="selfset" onClick={this.setBgColorFn.bind(this)}>
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /> <ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
</p> </p>
@ -244,11 +244,11 @@ export default class edittemplate extends React.Component{
</FormItem> </FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<div className="colorItemfont dfleac"> <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:'1px solid #f1f2f3'}} className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"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 className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"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 className={this.state.model.button_color=='#AE99D3'?"activecicle cicle cicle3":"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 className={this.state.model.button_color=='#FACD6A'?"activecicle cicle cicle4":"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 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)}> <p className="selfset" onClick={this.setFtColorFn.bind(this)}>
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /> <ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
</p> </p>
@ -332,7 +332,7 @@ export default class edittemplate extends React.Component{
</FormItem>:null </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 ? ( this.state.isSystemModel ? (
<FormItem labelname="权重" prop="sort" id="sort" labelwidth="80px"> <FormItem labelname="权重" prop="sort" id="sort" labelwidth="80px">

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

@ -13,6 +13,7 @@ import PreviewItem from "../template/preview.js"
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import Goodstemplate from './goodstemplate' import Goodstemplate from './goodstemplate'
import Detailstemplate from './detailstemplate' import Detailstemplate from './detailstemplate'
import Descteplate from "./goodsdesc"
import LandingForm from './landingPage' //落地页表单 import LandingForm from './landingPage' //落地页表单
import GoodsForm from './goodsPage' //商品页表单 import GoodsForm from './goodsPage' //商品页表单
import DetailsPage from './detailsPage' //商品详情页面 import DetailsPage from './detailsPage' //商品详情页面
@ -22,6 +23,8 @@ export default class edittemplate extends React.Component{
this.state={ this.state={
color:"#ffffff", color:"#ffffff",
text:"等我两分钟", text:"等我两分钟",
activeshow:true,//控制显示
detailactiveshow:true,
showType:1,//兑换码/白名单/立减金 showType:1,//兑换码/白名单/立减金
//落地页 //落地页
model:{ model:{
@ -41,11 +44,17 @@ export default class edittemplate extends React.Component{
list:1, list:1,
banner:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png', banner:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png',
ftcolor:'', ftcolor:'',
bgcolor:'' bgcolor:'',
bottomimg:'',
editorHtml:'',
activeType:''
}, },
detailConfigure:{ detailConfigure:{
ftcolor:'', ftcolor:'',
bgcolor:'' bgcolor:'',
editorHtml:'',
images:[],
activeType:''
}, },
preview_visible:false, preview_visible:false,
previewData:null, previewData:null,
@ -89,13 +98,11 @@ getLandingdata(val){
if(myInfo == 1) if(myInfo == 1)
{ {
this.setState({isSystemModel:true}) this.setState({isSystemModel:true})
console.log(7777)
return; return;
} }
if(myInfo) if(myInfo)
{ {
myInfo = JSON.parse(myInfo) myInfo = JSON.parse(myInfo)
let model = { let model = {
id:myInfo.id, id:myInfo.id,
images:myInfo.images.length == 3 ? myInfo.images : this.state.model.images , images:myInfo.images.length == 3 ? myInfo.images : this.state.model.images ,
@ -111,24 +118,17 @@ getLandingdata(val){
this.setState({isSystemModel:true}) this.setState({isSystemModel:true})
model.sort = myInfo.sort; model.sort = myInfo.sort;
} }
if(myInfo.href) if(myInfo.href)
{ {
model.list = parseInt(myInfo.list) model.list = parseInt(myInfo.list)
model.use = myInfo.use model.use = myInfo.use
model.link = myInfo.link model.link = myInfo.link
model.edit= myInfo.edit model.edit= myInfo.edit
model.href= myInfo.href model.href= myInfo.href
this.setState({isExchangePage:true}) this.setState({isExchangePage:true})
} }
this.setState({model:model}) this.setState({model:model})
} }
} }
async onSave(){ async onSave(){
@ -212,12 +212,6 @@ getLandingdata(val){
// } // }
// else{ // else{
// if(this.state.model.id > 0) // if(this.state.model.id > 0)
// { // {
@ -265,8 +259,6 @@ getLandingdata(val){
// Notify.error(err) // Notify.error(err)
// }) // })
// }); // });
// }else{ // }else{
// addTheme(formdata).then((res)=>{ // addTheme(formdata).then((res)=>{
// handelResponse(res,(req,msg)=>{ // handelResponse(res,(req,msg)=>{
@ -279,16 +271,7 @@ getLandingdata(val){
// Notify.error(err) // Notify.error(err)
// }) // })
// }); // });
// } // }
// } // }
// } // }
} }
@ -302,6 +285,7 @@ getLandingdata(val){
getlandftcolor(c){ getlandftcolor(c){
let landConfig=this.state.landConfigure; let landConfig=this.state.landConfigure;
} }
getTitle(c){ getTitle(c){
let landConfig=this.state.model; let landConfig=this.state.model;
landConfig.title=c; landConfig.title=c;
@ -313,6 +297,11 @@ getLandingdata(val){
goodsConfig.banner=c; goodsConfig.banner=c;
this.setState({goodsConfig:goodsConfig}); this.setState({goodsConfig:goodsConfig});
} }
getbottomimgFn(c){
let goodsConfig=this.state.goodsConfigure;
goodsConfig.bottomimg=c;
this.setState({goodsConfig:goodsConfig});
}
//获取商品排列方式 //获取商品排列方式
getarrayType(c){ getarrayType(c){
let goodsConfig=this.state.goodsConfigure; let goodsConfig=this.state.goodsConfigure;
@ -325,6 +314,29 @@ getLandingdata(val){
goodsConfig.ftcolor=c; goodsConfig.ftcolor=c;
this.setState({goodsConfig:goodsConfig}); 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){ getButtoncolor(c){
let goodsConfig=this.state.goodsConfigure; let goodsConfig=this.state.goodsConfigure;
@ -351,6 +363,11 @@ getLandingdata(val){
detailConfig.bgcolor=c; detailConfig.bgcolor=c;
this.setState({detailConfigure:detailConfig}); this.setState({detailConfigure:detailConfig});
} }
getbottomimgFn(c){
let detailConfig=this.state.detailConfigure;
detailConfig.images[0]=c;
this.setState({detailConfigure:detailConfig});
}
onUploadChange(files){ onUploadChange(files){
if(files.length > 0 && files[0].status == "success") if(files.length > 0 && files[0].status == "success")
{ {
@ -484,6 +501,9 @@ getLandingdata(val){
bgcolor(cor){ bgcolor(cor){
this.setState({bg_color:cor}); this.setState({bg_color:cor});
} }
showactiveIcon(c){
this.setState({activeshow:false});
}
onUpload = (file, report) => { onUpload = (file, report) => {
let self=this; let self=this;
console.log('上传头像',file); console.log('上传头像',file);
@ -596,14 +616,22 @@ getLandingdata(val){
<div onClick={()=>this.activeChoice(2)} className={this.state.activeNavStatus==2?'activeNav thumbheader' :'thumbheader'}> <div onClick={()=>this.activeChoice(2)} className={this.state.activeNavStatus==2?'activeNav thumbheader' :'thumbheader'}>
<div className="goodsList-item" tabindex="0" > <div className="goodsList-item" tabindex="0" >
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/> <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
<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.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? <button className="exchageBtn" style={{color:this.state.goodsConfigure.ftcolor,background:this.state.goodsConfigure.bgcolor}}>立即兑换</button>:null
} }
{
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> </div>
</div> </div>
@ -617,6 +645,7 @@ 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'}/> <img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
<p className="splitLine"></p> <p className="splitLine"></p>
<button className="exchangeBtn" style={{background:this.state.detailConfigure.ftcolor,color:this.state.detailConfigure.bgcolor}}>立即兑换</button> <button className="exchangeBtn" style={{background:this.state.detailConfigure.ftcolor,color:this.state.detailConfigure.bgcolor}}>立即兑换</button>
</div> </div>
</div> </div>
</div> </div>
@ -684,12 +713,13 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
</div>:null </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>
<div className="xj-center-fixed" style={{ "margin-left": "288px"}}> <div className="xj-center-fixed" style={{ "margin-left": "288px"}}>
</div> </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>) ( <h1 style={{fontSize:'16px'}}>落地页设置</h1>) : this.state.activeNavStatus==2 ? ( <h1 style={{fontSize:'16px'}}>商品列表页设置</h1>):( <h1 style={{fontSize:'16px'}}>商品详情页设置</h1>)
} }
</div> </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 ? ( this.state.preview_visible ? (
<div> <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)}} /> <Icon type="close" className="preview-top-close" onClick={(e)=>{this.onClose(e)}} />
</div> </div>
<PreviewItem data={this.state.previewData} ref="preview" /> <PreviewItem data={this.state.previewData} ref="preview" />
</div> </div>
</div> </div>
) :null ) :null
} }
</div> </div>
</div> </div>
</div> </div>

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

@ -1183,33 +1183,75 @@
} }
.colorItembg,.colorItemfont{ .colorItembg,.colorItemfont{
margin-top: -15px; 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{ .cicle{
width: 22px; width: 22px;
height: 22px; height: 22px;
display: inline-block; display: inline-block;
border-radius: 22px; border-radius: 22px;
// box-sizing: border-box;
background: #fff; background: #fff;
position: relative;
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
z-index: 55;
&.activecicle::before{
border:1px solid #cbe1fd;
} }
.cicle1{
background:#EEEEEE;
}
.cicle2{
background:#000;
} }
.cicle6{ .cicle6{
background:#04C160; background:#04C160;
&.activecicle::before{
border:1px solid #04C160;
} }
}
.cicle3{ .cicle3{
background:#AE99D3; background:#AE99D3;
}.cicle4{ &.activecicle::before{
border:1px solid #AE99D3;
}
}
.cicle4{
background:#FACD6A; background:#FACD6A;
&.activecicle::before{
border:1px solid #FACD6A;
}
}.cicle5{ }.cicle5{
background:#FE7962; 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{ .selfset{
margin-left: 10px; margin-left: 10px;
@ -1622,9 +1664,33 @@ div{
} }
.goodsList-item{ .goodsList-item{
position: relative; position: relative;
height: 100%;
overflow: hidden;
.topbanner{ .topbanner{
width: 100%; 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{ .preBtn{
position: absolute; position: absolute;
width: 14px; width: 14px;
@ -1636,7 +1702,13 @@ div{
width:90%; width:90%;
margin-left: 5%; margin-left: 5%;
position: relative; position: relative;
margin-top: -30px; margin-top: -20px;
}
.bottom_exchageBtn{
position: absolute;
bottom: 0;
left: 0;
margin: 0 5% 3%!important;
} }
.exchageBtn{ .exchageBtn{
width:90%; width:90%;

13
src/pages/exchangepage/edittemplate/wangeditorCom.js
View File

@ -32,11 +32,18 @@ export default class wangeditor extends React.Component{
}; };
editor.create() 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(){ render(){
return( return(
<div id="wangeditorDom"></div> <div id="wangeditorDom"></div>