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-05 20:59:53 +08:00
parent 2f9aefda30
commit 3ef6985135
3 changed files with 70 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,6 @@ export default class edittemplate extends React.Component{
button_color:"", button_color:"",
top_img:null, top_img:null,
list:1 list:1
}, },
preview_visible:false, preview_visible:false,
previewData:null, previewData:null,
@ -45,6 +44,10 @@ export default class edittemplate extends React.Component{
} }
componentWillMount(e){ 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(){ render(){

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

@ -7,270 +7,33 @@ import { Notify ,RadioGroup,RadioButton} 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 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} from "../../../assets/api.js"
import PreviewItem from "../template/preview.js"
import html2canvas from 'html2canvas'
export default class edittemplate extends React.Component{ export default class edittemplate extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state={ this.state={
color:"#ffffff",
text:"等我两分钟",
showType:1,//兑换码/白名单/立减金
model:{ 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:"落地页标题", title:"落地页标题",
client:1,
bg_color:"", bg_color:"",
button_color:"", button_color:"",
top_img:null, images:[],
},
preview_visible:false,
previewData:null,
pageInfo:null,
isExchangePage:false,
isSystemModel:false,
thumbfile:'',
activityType:'', activityType:'',
activeNavStatus:1, },
headfile:''
} }
this.canvasImgDom=this.canvasImgDom.bind(this);
this.canvasImgDomScr=this.canvasImgDomScr.bind(this);
} }
componentWillMount(e){ componentWillMount(e){
let myInfo = sessionStorage.getItem("pageInfo") let config=JSON.parse(sessionStorage.getItem('editorConfig'));
console.log("当前状态",myInfo) if(config){
if(myInfo == 0) this.setState({model:config[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)
})
});
} }
} }
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){ onactivityChange(e){
this.setState({activityType:e.target.value}) let active=this.state.model;
} active.activityType=e.target.value;
this.setState({model:active})
onPreview(){
this.setState({previewData:this.state.model})
this.setState({preview_visible:true})
} }
//上传顶部banner //上传顶部banner
onUploadChange(files){ onUploadChange(files){
@ -279,18 +42,27 @@ export default class edittemplate extends React.Component{
let model = this.state.model; let model = this.state.model;
model.images[0] = files[0].src; model.images[0] = files[0].src;
this.setState({model:model}) 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); this.props.setbanner(model);
} }
}; };
//上传输入框 //上传输入框
onUploadChange1(files){ onUploadChange1(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[1] = files[0].src; model.images[1] = files[0].src;
this.setState({model:model}) 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); 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){ fontcolor(cor){
@ -419,7 +102,6 @@ export default class edittemplate extends React.Component{
} }
onUpload = (file, report) => { onUpload = (file, report) => {
let self=this; let self=this;
console.log('上传头像',file);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let path = "" let path = ""
let formdata= new FormData(); 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>
<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>
</RadioGroup> </RadioGroup>

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

@ -26,7 +26,7 @@ export default class edittemplate extends React.Component{
//落地页 //落地页
model:{ model:{
id:"", 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, thumb:null,
title:"落地页标题", title:"落地页标题",
client:1, client:1,
@ -365,6 +365,7 @@ getLandingdata(val){
onClose(){ onClose(){
this.setState({preview_visible:false}) this.setState({preview_visible:false})
} }
canvasImgFn(){ canvasImgFn(){
let self=this; let self=this;
let path = null; let path = null;
@ -574,9 +575,14 @@ getLandingdata(val){
<h4>落地页:</h4> <h4>落地页:</h4>
<div onClick={()=>this.activeChoice(1)} className={this.state.activeNavStatus==1?'activeNav thumbheader' :'thumbheader'}> <div onClick={()=>this.activeChoice(1)} className={this.state.activeNavStatus==1?'activeNav thumbheader' :'thumbheader'}>
<h3>{this.state.model.title}</h3> <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"> <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" /> <img src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'} className="thumbcode" />
</div> </div>
<img src={this.state.model.images[3]}/> <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-out">
<div className="xj-viewer-mask" style={{background:this.state.model.bgcolor}} ref={this.canvasImgDomScr}> <div className="xj-viewer-mask" style={{background:this.state.model.bgcolor}} ref={this.canvasImgDomScr}>
<div className="top"> <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>
<div className="center" id="center"> <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" /> <img crossOrigin="anonymous" src={'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'} className="verifycode" />
<div className="submit"></div> <div className="submit"></div>
</div> </div>