落地页编辑存储关联
This commit is contained in:
red-deng-deng
parent
2f9aefda30
commit
3ef6985135
|
|
@ -29,7 +29,6 @@ export default class edittemplate extends React.Component{
|
|||
button_color:"",
|
||||
top_img:null,
|
||||
list:1
|
||||
|
||||
},
|
||||
preview_visible:false,
|
||||
previewData:null,
|
||||
|
|
@ -45,6 +44,10 @@ export default class edittemplate extends React.Component{
|
|||
}
|
||||
|
||||
componentWillMount(e){
|
||||
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if(config){
|
||||
this.setState({model:config[1]});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +156,18 @@ export default class edittemplate extends React.Component{
|
|||
|
||||
|
||||
|
||||
componentWillUnmount(){
|
||||
let oldobj=JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if(oldobj){
|
||||
oldobj.push(this.state.model);
|
||||
sessionStorage.setItem('editorConfig',JSON.stringify(oldobj));
|
||||
}else{
|
||||
let obj=[]
|
||||
obj.push(this.state.model);
|
||||
sessionStorage.setItem('editorConfig',JSON.stringify(obj));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
render(){
|
||||
|
|
|
|||
|
|
@ -7,270 +7,33 @@ import { Notify ,RadioGroup,RadioButton} from 'zent';
|
|||
import Ipt from "../../../components/input/main"
|
||||
import Form from "../../../components/form/main"
|
||||
import FormItem from "../../../components/form-item/main"
|
||||
import {uploadImg,handelResponse,addTheme,putMyTheme,putTheme,putSystemTemplate,addSystemTemplate} from "../../../assets/api.js"
|
||||
import PreviewItem from "../template/preview.js"
|
||||
import html2canvas from 'html2canvas'
|
||||
import {uploadImg,handelResponse} from "../../../assets/api.js"
|
||||
export default class edittemplate extends React.Component{
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state={
|
||||
color:"#ffffff",
|
||||
text:"等我两分钟",
|
||||
showType:1,//兑换码/白名单/立减金
|
||||
model:{
|
||||
id:"",
|
||||
images:['https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png','https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'],
|
||||
thumb:null,
|
||||
title:"落地页标题",
|
||||
client:1,
|
||||
bg_color:"",
|
||||
button_color:"",
|
||||
top_img:null,
|
||||
},
|
||||
preview_visible:false,
|
||||
previewData:null,
|
||||
pageInfo:null,
|
||||
isExchangePage:false,
|
||||
isSystemModel:false,
|
||||
thumbfile:'',
|
||||
images:[],
|
||||
activityType:'',
|
||||
activeNavStatus:1,
|
||||
headfile:''
|
||||
},
|
||||
}
|
||||
this.canvasImgDom=this.canvasImgDom.bind(this);
|
||||
this.canvasImgDomScr=this.canvasImgDomScr.bind(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
componentWillMount(e){
|
||||
let myInfo = sessionStorage.getItem("pageInfo")
|
||||
console.log("当前状态",myInfo)
|
||||
if(myInfo == 0)
|
||||
{
|
||||
|
||||
return
|
||||
}
|
||||
if(myInfo == 1)
|
||||
{
|
||||
this.setState({isSystemModel:true})
|
||||
console.log(7777)
|
||||
return;
|
||||
}
|
||||
if(myInfo)
|
||||
{
|
||||
myInfo = JSON.parse(myInfo)
|
||||
|
||||
let model = {
|
||||
id:myInfo.id,
|
||||
images:this.state.model.images ,
|
||||
bg_color:myInfo.bg_color,
|
||||
button_color:myInfo.button_color,
|
||||
client:myInfo.client,
|
||||
top_img:myInfo.top_img,
|
||||
title:myInfo.title,
|
||||
thumb:myInfo.thumb
|
||||
}
|
||||
if(sessionStorage.getItem("isSort") == 1 && myInfo.creator == 0)
|
||||
{
|
||||
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(){
|
||||
let thumbresult=null;
|
||||
//存缩略图
|
||||
let info = sessionStorage.getItem("pageInfo")
|
||||
if(info)
|
||||
{
|
||||
info = JSON.parse(info)
|
||||
}
|
||||
|
||||
|
||||
if(!this.state.model.images[0])
|
||||
{
|
||||
Notify.error("没上落地页banner")
|
||||
return;
|
||||
}
|
||||
if(!this.state.model.images[1])
|
||||
{
|
||||
Notify.error("没上传落地页输入框")
|
||||
return;
|
||||
}
|
||||
if(!this.state.model.images[2])
|
||||
{
|
||||
Notify.error("没上传落地页使用说明")
|
||||
return;
|
||||
}
|
||||
if(!this.state.model.top_img)
|
||||
{
|
||||
Notify.error("没上传顶部banner")
|
||||
return;
|
||||
}
|
||||
// if(!this.state.model.thumb)
|
||||
// {
|
||||
// Notify.error("没上传缩略图")
|
||||
// return;
|
||||
// }
|
||||
|
||||
var re = new RegExp("^([1-9][0-9]*){1,3}$");
|
||||
if (this.state.isSystemModel && !re.test(this.state.model.sort)) {
|
||||
Notify.error("权重请输入正整数")
|
||||
return;
|
||||
}
|
||||
if(this.state.model.images.toString()!=info.images.toString()){
|
||||
thumbresult =await this.canvasImgFn();
|
||||
if(!thumbresult){
|
||||
return
|
||||
}
|
||||
}
|
||||
let formdata = {
|
||||
"title": this.state.model.title,
|
||||
"client": 1,
|
||||
"thumb": this.state.model.thumb,
|
||||
"bg_color": this.state.model.bg_color,
|
||||
"file": "",
|
||||
"scope": "",
|
||||
"images": this.state.model.images,
|
||||
"button_color" : this.state.model.button_color,
|
||||
"top_img": this.state.model.top_img
|
||||
}
|
||||
console.log("当前链接")
|
||||
console.log(info.href)
|
||||
|
||||
if(info.href)
|
||||
{
|
||||
formdata.list = this.state.model.list
|
||||
formdata.use = this.state.model.use
|
||||
formdata.link = this.state.model.link
|
||||
formdata.edit= this.state.model.edit
|
||||
formdata.href= this.state.model.href
|
||||
|
||||
|
||||
putTheme(this.state.model.id,formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
|
||||
this.props.history.push('/home/exchangepage');
|
||||
return
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if(this.state.model.id > 0)
|
||||
{
|
||||
|
||||
if(this.state.isSystemModel == true)
|
||||
{
|
||||
formdata.sort = this.state.model.sort;
|
||||
putSystemTemplate(this.state.model.id,formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
|
||||
this.props.history.push('/home/system/my-mould');
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
}
|
||||
else{
|
||||
putMyTheme(this.state.model.id,formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
|
||||
this.props.history.push('/home/myexchangetemplate');
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
||||
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if(config){
|
||||
this.setState({model:config[0]});
|
||||
}
|
||||
|
||||
}
|
||||
else{
|
||||
if(this.state.isSystemModel == true)
|
||||
{
|
||||
formdata.sort = this.state.model.sort;
|
||||
addSystemTemplate(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
setTimeout(() => {
|
||||
this.props.history.push('/home/system/my-mould');
|
||||
}, 2000);
|
||||
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
}else{
|
||||
addTheme(formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
setTimeout(() => {
|
||||
this.props.history.push('/home/myexchangetemplate');
|
||||
}, 2000);
|
||||
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
onactivityChange(e){
|
||||
this.setState({activityType:e.target.value})
|
||||
}
|
||||
|
||||
onPreview(){
|
||||
this.setState({previewData:this.state.model})
|
||||
this.setState({preview_visible:true})
|
||||
let active=this.state.model;
|
||||
active.activityType=e.target.value;
|
||||
this.setState({model:active})
|
||||
}
|
||||
//上传顶部banner
|
||||
onUploadChange(files){
|
||||
|
|
@ -279,18 +42,27 @@ export default class edittemplate extends React.Component{
|
|||
let model = this.state.model;
|
||||
model.images[0] = files[0].src;
|
||||
this.setState({model:model})
|
||||
this.props.setbanner(model);
|
||||
}else{
|
||||
let model = this.state.model;
|
||||
model.images[0] = '';
|
||||
this.setState({model:model})
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
};
|
||||
|
||||
//上传输入框
|
||||
onUploadChange1(files){
|
||||
|
||||
if(files.length > 0 && files[0].status == "success")
|
||||
{
|
||||
let model = this.state.model;
|
||||
model.images[1] = files[0].src;
|
||||
this.setState({model:model})
|
||||
this.props.setbanner(model);
|
||||
}else{
|
||||
let model = this.state.model;
|
||||
model.images[1] ='';
|
||||
this.setState({model:model})
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
};
|
||||
|
|
@ -316,96 +88,7 @@ export default class edittemplate extends React.Component{
|
|||
};
|
||||
|
||||
|
||||
onBack(){
|
||||
this.refs.preview.popPage()
|
||||
}
|
||||
onClose(){
|
||||
this.setState({preview_visible:false})
|
||||
}
|
||||
canvasImgFn(){
|
||||
let self=this;
|
||||
let path = null;
|
||||
let canvasEle=this.canvasImg; //获取元素
|
||||
let scrolDom=this.canvascrol;
|
||||
scrolDom.pageYoffset = 0;
|
||||
scrolDom.scrollTop = 0;
|
||||
let dom=document.querySelector('.xj-viewer-mask');
|
||||
let dom2=document.querySelector('.editor-main');
|
||||
dom.style.height =scrolDom.scrollHeight+'px';
|
||||
dom2.style.height =scrolDom.scrollHeight*1+50+'px';
|
||||
dom.style.maxHeight =scrolDom.scrollHeight+'px';
|
||||
let imgres=html2canvas(canvasEle, {
|
||||
width:375, //设置canvas的宽度
|
||||
scale: 1,//缩放
|
||||
useCORS: true,
|
||||
allowTaint:false,
|
||||
height:canvasEle.offsetHeight,
|
||||
}).then(async (canvas) => {
|
||||
//处理你生成的canvas
|
||||
document.body.appendChild(canvas);
|
||||
let a = document.createElement('a');
|
||||
let file = canvas.toDataURL( );
|
||||
let thumbimg= self.dataURLtoFile(file,'image/png');
|
||||
self.setState({thumbfile:file});
|
||||
|
||||
let imgformdata= new FormData();
|
||||
let fileOfBlob = new File([thumbimg], new Date()+'.png');
|
||||
imgformdata.append("file",fileOfBlob)
|
||||
imgformdata.append("path","common_image")
|
||||
let pathimg=await uploadImg(imgformdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
path = req.path;
|
||||
let model=self.state.model;
|
||||
model.thumb=req.path;
|
||||
self.setState({model});
|
||||
},(err)=>{
|
||||
|
||||
})
|
||||
});
|
||||
dom.style.height ='100%';
|
||||
dom.style.maxHeight ='600px';
|
||||
dom2.style.height ='600px';
|
||||
return path;
|
||||
})
|
||||
return imgres;
|
||||
}
|
||||
|
||||
//自动生成截图
|
||||
createdImgFn(){
|
||||
|
||||
let self=this;
|
||||
let canvasEle=this.canvasImgDom; //获取元素
|
||||
html2canvas(canvasEle, {
|
||||
width:375, //设置canvas的宽度
|
||||
scale: 1,//缩放
|
||||
useCORS: true,
|
||||
height:canvasEle.offsetHeight,
|
||||
}).then((canvas) => {
|
||||
//处理你生成的canvas
|
||||
document.body.appendChild(canvas);
|
||||
console.log('开始截图');
|
||||
let a = document.createElement('a');
|
||||
let file = canvas.toDataURL( );
|
||||
let thumbimg= self.dataURLtoFile(file,'image/png');
|
||||
self.setState({headfile:file});
|
||||
|
||||
})
|
||||
}
|
||||
dataURLtoFile(dataURI, type) {
|
||||
let binary = atob(dataURI.split(',')[1]);
|
||||
let array = [];
|
||||
for(let i = 0; i < binary.length; i++) {
|
||||
array.push(binary.charCodeAt(i));
|
||||
}
|
||||
return new Blob([new Uint8Array(array)], {type:type });
|
||||
}
|
||||
|
||||
canvasImgDom(e){
|
||||
this.canvasImg=e;
|
||||
}
|
||||
canvasImgDomScr(e){
|
||||
this.canvascrol=e;
|
||||
}
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor){
|
||||
|
|
@ -419,7 +102,6 @@ export default class edittemplate extends React.Component{
|
|||
}
|
||||
onUpload = (file, report) => {
|
||||
let self=this;
|
||||
console.log('上传头像',file);
|
||||
return new Promise((resolve, reject) => {
|
||||
let path = ""
|
||||
let formdata= new FormData();
|
||||
|
|
@ -465,7 +147,12 @@ export default class edittemplate extends React.Component{
|
|||
|
||||
};
|
||||
|
||||
|
||||
//组件将要销毁阶段
|
||||
componentWillUnmount(){
|
||||
let obj=[]
|
||||
obj.push(this.state.model);
|
||||
sessionStorage.setItem('editorConfig',JSON.stringify(obj));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -562,7 +249,7 @@ export default class edittemplate extends React.Component{
|
|||
|
||||
</FormItem>
|
||||
<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>
|
||||
</RadioGroup>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default class edittemplate extends React.Component{
|
|||
//落地页
|
||||
model:{
|
||||
id:"",
|
||||
images:['https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png','https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'],
|
||||
images:[],
|
||||
thumb:null,
|
||||
title:"落地页标题",
|
||||
client:1,
|
||||
|
|
@ -365,6 +365,7 @@ getLandingdata(val){
|
|||
onClose(){
|
||||
this.setState({preview_visible:false})
|
||||
}
|
||||
|
||||
canvasImgFn(){
|
||||
let self=this;
|
||||
let path = null;
|
||||
|
|
@ -574,9 +575,14 @@ getLandingdata(val){
|
|||
<h4>落地页:</h4>
|
||||
<div onClick={()=>this.activeChoice(1)} className={this.state.activeNavStatus==1?'activeNav thumbheader' :'thumbheader'}>
|
||||
<h3>{this.state.model.title}</h3>
|
||||
<img src={this.state.model.images[0]}/>
|
||||
{
|
||||
!this.state.model.images[0]?<img id="top" src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png'}/>:<img src={this.state.model.images[0]} id="top"/>
|
||||
}
|
||||
|
||||
<div className="hascode">
|
||||
<img src={this.state.model.images[1]}/>
|
||||
{
|
||||
!this.state.model.images[1]?<img id="top" src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'}/>:<img src={this.state.model.images[0]} id="top"/>
|
||||
}
|
||||
<img src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'} className="thumbcode" />
|
||||
</div>
|
||||
<img src={this.state.model.images[3]}/>
|
||||
|
|
@ -646,11 +652,16 @@ this.state.goodsConfigure.list==1?<img className="goodsPic" src={'https://lsxdem
|
|||
<div className="xj-viewer-out">
|
||||
<div className="xj-viewer-mask" style={{background:this.state.model.bgcolor}} ref={this.canvasImgDomScr}>
|
||||
<div className="top">
|
||||
<img crossOrigin="anonymous" src={this.state.model.images[0]} id="top" />
|
||||
{
|
||||
!this.state.model.images[0]? <img src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png'} id="top" />: <img crossOrigin="anonymous" src={this.state.model.images[0]} id="top" />
|
||||
}
|
||||
|
||||
</div>
|
||||
<div className="center" id="center">
|
||||
<img crossOrigin="anonymous" id="center-img" src={this.state.model.images[1]} />
|
||||
|
||||
{
|
||||
!this.state.model.images[1]?<img id="center-img" src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'}/>: <img crossOrigin="anonymous" id="center-img" src={this.state.model.images[1]} />
|
||||
}
|
||||
<img crossOrigin="anonymous" src={'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'} className="verifycode" />
|
||||
<div className="submit"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue