From 9fb475e207b5acea32962587b400f62e1e134b0a Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Mon, 10 Jan 2022 20:38:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E6=96=B0=E5=BB=BA=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/api.js | 6 +- .../exchangepage/edittemplate/detailsPage.js | 12 +- .../exchangepage/edittemplate/goodsPage.js | 12 +- .../edittemplate/goodstemplate.js | 2 +- .../edittemplate/goodstemplate.less | 3 + .../exchangepage/edittemplate/landingPage.js | 12 +- src/pages/exchangepage/edittemplate/main.js | 252 ++++++++---------- src/pages/exchangepage/edittemplate/main.less | 2 +- .../edittemplate/wangeditorCom.js | 1 + src/pages/exchangepage/mytemplate/main.js | 2 +- src/pages/exchangepage/template/preview.js | 4 +- src/pages/exchangepage/template/tt.js | 75 ++++++ 12 files changed, 216 insertions(+), 167 deletions(-) create mode 100644 src/pages/exchangepage/template/tt.js diff --git a/src/assets/api.js b/src/assets/api.js index 1f19f8c1..1d26aa27 100644 --- a/src/assets/api.js +++ b/src/assets/api.js @@ -11,7 +11,7 @@ if (process.env.NODE_ENV == "production") { // 生成环境 baseurl = "https://marketapi.1688sup.com" } - +let testzyg='http://192.168.6.110:8056'; // export let HOST = host; // export let API_URL = api_url; @@ -798,7 +798,7 @@ export const getThemeChoice= (data) => { //新增落地页模板 export const addTheme= (data) => { - return req('post', baseurl + "/plan/theme",data) + return req('post', testzyg + "/plan/theme",data) } //编辑落地页模板 export const putTheme= (id,data) => { @@ -806,7 +806,7 @@ export const putTheme= (id,data) => { } //我的模板列表查询 export const getTheme= (data) => { - return req('get', baseurl + "/plan/theme",data) + return req('get', testzyg + "/plan/theme",data) } //克隆落地页模板 export const cloneTheme= (data) => { diff --git a/src/pages/exchangepage/edittemplate/detailsPage.js b/src/pages/exchangepage/edittemplate/detailsPage.js index de9e9547..03e65314 100644 --- a/src/pages/exchangepage/edittemplate/detailsPage.js +++ b/src/pages/exchangepage/edittemplate/detailsPage.js @@ -14,9 +14,9 @@ export default class edittemplate extends React.Component{ super(props) this.state={ model:{ - font_color: "", - button_color: "", - describe: {type : 1, content: " ",bg_image:''}, + font_color:"#ffffff", + button_color: "#FACD6A", + describe: {type :"", content: " ",bg_image:''}, } } } @@ -199,9 +199,9 @@ export default class edittemplate extends React.Component{
{this.onactivityChange(e)} } value={this.state.model.describe.type}> - this.hasItemFn(1)} value={1}>图片 - this.hasItemFn(2)} value={2}>悬浮 - this.hasItemFn(3)} value={3}>富文本 + this.hasItemFn(1)} value={"1"}>图片 + this.hasItemFn(2)} value={"2"}>悬浮 + this.hasItemFn(3)} value={"3"}>富文本 diff --git a/src/pages/exchangepage/edittemplate/goodsPage.js b/src/pages/exchangepage/edittemplate/goodsPage.js index b831f700..ff0ef24d 100644 --- a/src/pages/exchangepage/edittemplate/goodsPage.js +++ b/src/pages/exchangepage/edittemplate/goodsPage.js @@ -17,9 +17,9 @@ export default class edittemplate extends React.Component{ model:{ top_image: "", list: 1, - font_color:"", - button_color: "", - describe: {type : 1, content : "",bg_image:''} + font_color:"#ffffff", + button_color: "#FACD6A", + describe: {type : "", content : "",bg_image:''} } } } @@ -268,9 +268,9 @@ export default class edittemplate extends React.Component{
{this.onactivityChange(e)} } value={this.state.model.describe.type}> - this.hasItemFn(1)} value={1}>图片 - this.hasItemFn(2)} value={2}>悬浮 - this.hasItemFn(3)} value={3}>富文本 + this.hasItemFn(1)} value={"1"}>图片 + this.hasItemFn(2)} value={"2"}>悬浮 + this.hasItemFn(3)} value={"3"}>富文本 diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index 52e09c90..58b8bc76 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -24,7 +24,7 @@ export default class edittemplate extends React.Component{ this.props.goodsdata.list==1? :null } { - this.props.goodsdata.describe.type==1? :this.props.goodsdata.describe.type==3?
:null + this.props.goodsdata.describe.type==1? :this.props.goodsdata.describe.type==3?
:null } { this.props.goodsdata.describe.type==2?:null diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index fb14c37b..b227911e 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -112,6 +112,9 @@ width: 100%; margin-top: 10px; } +.bottomTipview{ + margin-bottom: 30px; +} .desc-goods{ .descript{ padding: 30px 24px; diff --git a/src/pages/exchangepage/edittemplate/landingPage.js b/src/pages/exchangepage/edittemplate/landingPage.js index 3c844936..296a438e 100644 --- a/src/pages/exchangepage/edittemplate/landingPage.js +++ b/src/pages/exchangepage/edittemplate/landingPage.js @@ -19,9 +19,9 @@ export default class edittemplate extends React.Component{ title:"落地页标题", top_image: "", middle_image: "", - describe: {type: 1,content :"",bg_image:''}, - bg_color:"", - font_color:"", + describe: {type:"",content :"",bg_image:''}, + bg_color:"#EEEEEE", + font_color:"#000000", }, } } @@ -30,6 +30,8 @@ export default class edittemplate extends React.Component{ let config=JSON.parse(sessionStorage.getItem('editorConfig')); if(config&&config.land){ this.setState({model:config.land}); + }else{ + } } handleChange = (color) => { @@ -286,8 +288,8 @@ export default class edittemplate extends React.Component{ {this.onactivityChange(e)} } value={this.state.model.describe.type}> - this.hasItemFn(1)}>图片 - this.hasItemFn(2)}>富文本 + this.hasItemFn(1)}>图片 + this.hasItemFn(2)}>富文本 { diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index db203bc6..8cb80acd 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -30,20 +30,21 @@ export default class edittemplate extends React.Component{ top_image: "", middle_image: "", describe: {type:"",content :"",bg_image:''}, - bg_color:"", - font_color:"", + bg_color:"#EEEEEE", + font_color:"#000000", + thumb:'' }, //商品列表 product_list:{ - top_image: "https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png", + top_image: "", list: 1, - font_color:"", - button_color: "", + font_color:"#ffffff", + button_color: "#FACD6A", describe: {type : "", content : "",bg_image:''}, }, product_detail:{ - font_color:'', - button_color:'', + font_color:"#FACD6A", + button_color: "#ffffff", describe:{type: "", content: "",bg_image:''}, }, preview_visible:false, @@ -51,7 +52,6 @@ export default class edittemplate extends React.Component{ pageInfo:null, isExchangePage:false, isSystemModel:false, - thumbfile:'', activeNavStatus:1, headfile:'' } @@ -77,105 +77,98 @@ getLandingdata(val){ componentWillMount(e){ sessionStorage.removeItem('editorConfig'); - let myInfo = sessionStorage.getItem("pageInfo") - if(myInfo == 0) + let myInfoData = JSON.parse(sessionStorage.getItem("pageInfo")) + if(myInfoData) { - - return - } - if(myInfo == 1) - { - this.setState({isSystemModel:true}) - return; - } - if(myInfo) - { - myInfo = JSON.parse(myInfo) - let model = { - id:myInfo.id, - images:myInfo.images.length == 3 ? myInfo.images : this.state.model.images , - bg_color:myInfo.bg_color, - button_color:myInfo.button_color, - client:myInfo.client, - top_image:myInfo.top_image, - 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}) + let writeData = {} + writeData.title=myInfoData.title; + writeData.thumb= myInfoData.thumb; + writeData.page= myInfoData.showType; + writeData.type_id=0; + writeData.client=1; + writeData.describe=myInfoData.describe; + writeData.top_image=myInfoData.top_image; + writeData.middle_image=myInfoData.middle_image; + writeData.bg_color=myInfoData.bg_color; + writeData.font_color=myInfoData.font_color; + let product_list=myInfoData.product_list; + let product_detail=myInfoData.product_detail; + // 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}) + // } + this.setState({model:writeData}) + this.setState({product_list,product_detail}) + let newObj={} + newObj.land=writeData; + newObj.product_list=product_list; + newObj.product_detail=product_detail; + sessionStorage.setItem('editorConfig',JSON.stringify(newObj)); } - } + } async onSave(){ - // if(this.state.model.images.toString()!=info.images.toString()){ - let thumbresult =await this.canvasImgFn(); - console.log(137,thumbresult); - // if(!thumbresult){ - // return - // } - // } - // 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_image) - // { - // Notify.error("没上传顶部banner") - // return; - // } - // var re = new RegExp("^([1-9][0-9]*){1,3}$"); - // if (this.state.isSystemModel && !re.test(this.state.model.sort)) { - // Notify.error("权重请输入正整数") - // 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_image": this.state.model.top_image - // } - // console.log("当前链接") - // console.log(info.href) - + if(!this.state.model.top_image) + { + Notify.clear(); + Notify.error("没上落地页顶部banner") + this.setState({activeNavStatus:1}); + return; + } + if(!this.state.model.middle_image) + { + Notify.clear(); + Notify.error("没上传落地页输入框") + this.setState({activeNavStatus:1}); + return; + } + if(!this.state.product_list.top_image) + { + Notify.clear(); + Notify.error("没上传商品列表页顶部banner") + this.setState({activeNavStatus:2}); + return; + } + this.setState({activeNavStatus:1}); + this.canvasImg.style.display='block'; + let thumbresult =await this.canvasImgFn(); + + let formdata = { + "title": this.state.model.title, + "thumb": this.state.model.thumb, + "page": this.state.showType, + "type_id":0, + "client":1, + "top_image" : this.state.model.top_image, + "middle_image" : this.state.model.middle_image, + "bg_color":this.state.model.bg_color, + "font_color" : this.state.model.font_color, + "describe" : this.state.model.describe, + "product_list":this.state.product_list, + "product_detail":this.state.product_detail + } + console.log(164,formdata); + addTheme(formdata).then((res)=>{ + handelResponse(res,(req,msg)=>{ + Notify.success(msg) + setTimeout(() => { + this.props.history.push('/home/myexchangetemplate'); + }, 2000); + },(err)=>{ + Notify.error(err) + }) + }); // if(info.href) // { // console.log(111111) @@ -370,7 +363,7 @@ getLandingdata(val){ let path = null; let canvasEle=this.canvasImg;　　//获取元素 let scrolDom=this.canvascrol; - scrolDom.pageYoffset = 0; + console.log(351,this); scrolDom.scrollTop = 0; let dom=document.querySelector('.xj-viewer-mask'); let dom2=document.querySelector('.editor-main'); @@ -389,8 +382,6 @@ getLandingdata(val){ 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) @@ -412,28 +403,6 @@ getLandingdata(val){ }) 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 = []; @@ -451,7 +420,6 @@ getLandingdata(val){ } activeChoice(c){ this.setState({activeNavStatus:c}); - this.createdImgFn(); } //向下箭头 reduceFn(){ @@ -529,15 +497,12 @@ getLandingdata(val){ setTimeout(update, 500); }); - }; - - + }; render(){ - console.log(564,this.state); return(
@@ -548,7 +513,6 @@ getLandingdata(val){
-
@@ -577,7 +541,7 @@ getLandingdata(val){
{ - this.state.model.describe.bg_image?:null + this.state.model.describe&&this.state.model.describe.bg_image?:null } @@ -595,7 +559,7 @@ getLandingdata(val){ this.state.product_list.list==1?:this.state.product_list.list==3?: } { - this.state.product_list.list==1? :null + this.state.product_list.list==1? :null } { this.state.product_list.describe.type==1? :this.state.product_list.describe.type==3?
:null @@ -645,8 +609,7 @@ getLandingdata(val){
} - { - this.state.activeNavStatus==1?
+
{this.state.model.title} @@ -672,9 +635,15 @@ getLandingdata(val){
{ - this.state.model.describe.type==0?null:this.state.model.describe.type==1?:
- -
+ this.state.model.describe&&this.state.model.describe.type==0?null:this.state.model.describe&&this.state.model.describe.type==1?:
+ + { + this.state.model.describe&&this.state.model.describe.bg_image?:null + } + { + this.state.model.describe&&this.state.model.describe.content?
:null + } +
} @@ -682,8 +651,7 @@ getLandingdata(val){
-
:null - } +
{ this.state.activeNavStatus!=2?null:this.state.activeshow&&this.state.product_list.describe.type==2&&this.state.product_list.describe.content?this.showactiveIcon(c)} goodsdata={this.state.product_list}/>:this.setState({activeshow:true})} goodsdata={this.state.product_list}/> } diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 68fb9580..185d1100 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -826,7 +826,6 @@ cursor: pointer; } .editor-main { - background-color: #fff; -webkit-box-shadow: 0 1px 6px 2px rgba(0,0,0,.03); box-shadow: 0 1px 6px 2px rgba(0,0,0,.03); margin: 0 auto; @@ -861,6 +860,7 @@ height: 50px; justify-content: center; width: 100%; + background: #fff; z-index: 1999 } diff --git a/src/pages/exchangepage/edittemplate/wangeditorCom.js b/src/pages/exchangepage/edittemplate/wangeditorCom.js index 7f66bdcc..81617fbd 100644 --- a/src/pages/exchangepage/edittemplate/wangeditorCom.js +++ b/src/pages/exchangepage/edittemplate/wangeditorCom.js @@ -27,6 +27,7 @@ export default class wangeditor extends React.Component{ ] // 注意，先配置 height ，再执行 create() editor.config.onchange = function (newHtml) { + console.log(30,newHtml); self.setState({editorHtml:newHtml}); self.props.setEdittext(newHtml); diff --git a/src/pages/exchangepage/mytemplate/main.js b/src/pages/exchangepage/mytemplate/main.js index fe4ffe49..d792fdde 100644 --- a/src/pages/exchangepage/mytemplate/main.js +++ b/src/pages/exchangepage/mytemplate/main.js @@ -107,7 +107,7 @@ export default class acclist extends React.Component{ - let link = window.location.href.replace(window.location.hash, "#/home/edittemplate"); + let link = window.location.href.replace(window.location.hash, "#/edittemplate"); window.open(link, "_blank") } diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js index 2788a005..8290fc9c 100644 --- a/src/pages/exchangepage/template/preview.js +++ b/src/pages/exchangepage/template/preview.js @@ -83,7 +83,7 @@ export default class acclist extends React.Component{ !propsData.product_list.top_image?: } { - propsData.product_list.list==1?:propsData.product_list.list==3?: + propsData.product_list.list==1?:propsData.product_list.list==3?: } { propsData.product_list.list==1? :null @@ -101,7 +101,7 @@ export default class acclist extends React.Component{ this.state.step==3 ? this.state.detailactiveshow&&propsData.product_detail.describe.type==2&&propsData.product_detail.describe.content?this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
- +

diff --git a/src/pages/exchangepage/template/tt.js b/src/pages/exchangepage/template/tt.js new file mode 100644 index 00000000..b0af61b4 --- /dev/null +++ b/src/pages/exchangepage/template/tt.js @@ -0,0 +1,75 @@ +{ + this.state.step==2?propsData.product_list.list==1?
+
+ { + propsData.product_list.top_image? : + } +
+
+
+
+ +
+
+
+
+ 立 即 兑 换 +
+
+
:propsData.product_list.list==2?
+
+ +
+
+
+
    + { + productData.map((item, index) => { + if(index < 6) + { + return( +
  • +
    + + {item.name} +
    + 兑换 +
    • + ) + } + + }) + } +
+ { + productData.product_list.describe&&productData.product_list.describe.type==1?:null + } +
+
:
+
+ +
+
+
+
    + { + productData.map((item, index) => { + return( +
  • +
    + +
    +
    {item.name}
    +
    • + ) + }) + } +
+
+ + { + propsData.product_list.describe&&propsData.product_list.describe.type==2?:null + } +
:null + + } \ No newline at end of file