From 3ef6985135962118a65d738e95589ae77722b629 Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Wed, 5 Jan 2022 20:59:53 +0800 Subject: [PATCH] =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E5=85=B3=E8=81=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exchangepage/edittemplate/goodsPage.js | 22 +- .../exchangepage/edittemplate/landingPage.js | 379 ++---------------- src/pages/exchangepage/edittemplate/main.js | 27 +- 3 files changed, 70 insertions(+), 358 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/goodsPage.js b/src/pages/exchangepage/edittemplate/goodsPage.js index c499a519..ec7e0373 100644 --- a/src/pages/exchangepage/edittemplate/goodsPage.js +++ b/src/pages/exchangepage/edittemplate/goodsPage.js @@ -28,8 +28,7 @@ export default class edittemplate extends React.Component{ bg_color:"", button_color:"", top_img:null, - list:1 - + list:1 }, preview_visible:false, previewData:null, @@ -45,7 +44,11 @@ export default class edittemplate extends React.Component{ } componentWillMount(e){ - + let config=JSON.parse(sessionStorage.getItem('editorConfig')); + if(config){ + this.setState({model:config[1]}); + } + } onListChange(e){ @@ -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(){ diff --git a/src/pages/exchangepage/edittemplate/landingPage.js b/src/pages/exchangepage/edittemplate/landingPage.js index 9daa992c..865eea59 100644 --- a/src/pages/exchangepage/edittemplate/landingPage.js +++ b/src/pages/exchangepage/edittemplate/landingPage.js @@ -7,271 +7,34 @@ 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:"", + title:"落地页标题", + bg_color:"", button_color:"", - top_img:null, + images:[], + activityType:'', }, - preview_visible:false, - previewData:null, - pageInfo:null, - isExchangePage:false, - isSystemModel:false, - thumbfile:'', - 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}) - - } + let config=JSON.parse(sessionStorage.getItem('editorConfig')); + if(config){ + this.setState({model:config[0]}); + } + } - 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){ - 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 onUploadChange(files){ if(files.length > 0 && files[0].status == "success") @@ -280,19 +43,28 @@ export default class edittemplate extends React.Component{ 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); + } }; //上传使用说明 onUploadChange2(files){ @@ -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{ - {this.onactivityChange(e)} } value={this.state.activityType}> + {this.onactivityChange(e)} } value={this.state.model.activityType}> 图片 富文本 diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 0e0aafd3..f54e3915 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -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, @@ -207,7 +207,7 @@ getLandingdata(val){ }); } - + else{ @@ -364,7 +364,8 @@ getLandingdata(val){ } onClose(){ this.setState({preview_visible:false}) - } + } + canvasImgFn(){ let self=this; let path = null; @@ -574,9 +575,14 @@ getLandingdata(val){

落地页:

this.activeChoice(1)} className={this.state.activeNavStatus==1?'activeNav thumbheader' :'thumbheader'}>

{this.state.model.title}

- + { + !this.state.model.images[0]?: + } +
- + { + !this.state.model.images[1]?: + }
@@ -646,11 +652,16 @@ this.state.goodsConfigure.list==1?
- + { + !this.state.model.images[0]? : + } +
- - + + { + !this.state.model.images[1]?: + }