From 31456c8cbca5a5812d1178c63cac57b740671ecd Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Tue, 4 Jan 2022 19:49:14 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=90=BD=E5=9C=B0?= =?UTF-8?q?=E9=A1=B5=E6=95=B4=E6=94=B9=EF=BC=8C=E5=B8=83=E5=B1=80=E6=90=AD?= =?UTF-8?q?=E5=BB=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 2 + src/assets/comm.css | 3 + src/pages/exchangepage/edittemplate/main.js | 248 ++++++++++++------ src/pages/exchangepage/edittemplate/main.less | 145 +++++++++- src/pages/exchangepage/template/main.js | 3 +- src/pages/home/home.js | 4 +- 6 files changed, 314 insertions(+), 91 deletions(-) diff --git a/src/App.js b/src/App.js index adc1833c..59b2541a 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import {Redirect} from "react-router-dom"; import login from './pages/login/login'; import home from './pages/home/home'; +import edittemplate from './pages/exchangepage/edittemplate/main.js' import errpage from "./pages/errpage/errpage" export default class App extends Component { state = { @@ -22,6 +23,7 @@ export default class App extends Component { return ( + ( diff --git a/src/assets/comm.css b/src/assets/comm.css index 6fb3a8a5..54e482c7 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -126,4 +126,7 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{ .delfilebtn{ color: #296bef; cursor: pointer; +} +.fz16{ + font-size: 16px; } \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 2ba8f2fc..7dcfff27 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import { HashRouter as Router, Route, Link } from "react-router-dom"; import { Button ,ColorPicker,ImageUpload,Input ,onUpload} from 'zent'; import "./main.less" +import "../../../assets/comm.css" import { Notify,Switch ,RadioGroup,RadioButton,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu ,BlockLoading} from 'zent'; import Ipt from "../../../components/input/main" import Form from "../../../components/form/main" @@ -16,11 +17,12 @@ export default class edittemplate extends React.Component{ this.state={ color:"#ffffff", text:"等我两分钟", + showType:1,//兑换码/白名单/立减金 model:{ id:"", - images:[], + images:['https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220104/1a07d79a196132fe2fc5a5400c79d23c.png','https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220104/7cf0833811a67b38bd03df45a33afa27.png'], thumb:null, - title:"", + title:"落地页标题", client:1, bg_color:"", button_color:"", @@ -32,7 +34,10 @@ export default class edittemplate extends React.Component{ pageInfo:null, isExchangePage:false, isSystemModel:false, - thumbfile:'' + thumbfile:'', + activityType:'', + activeNavStatus:1, + headfile:'' } this.canvasImgDom=this.canvasImgDom.bind(this); this.canvasImgDomScr=this.canvasImgDomScr.bind(this); @@ -290,12 +295,16 @@ export default class edittemplate extends React.Component{ onListChange(e){ - console.log(77788899) let model = this.state.model; model.list = e.target.value; this.setState({model:model}) } - + onmodelChange(e){ + this.setState({showType:e.target.value}) + } + onactivityChange(e){ + this.setState({activityType:e.target.value}) + } onPreview(){ this.setState({previewData:this.state.model}) @@ -346,7 +355,6 @@ export default class edittemplate extends React.Component{ model.top_img = files[0].src; this.setState({model:model}) } - }; @@ -413,6 +421,27 @@ export default class edittemplate extends React.Component{ 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 = []; @@ -428,9 +457,31 @@ export default class edittemplate extends React.Component{ canvasImgDomScr(e){ this.canvascrol=e; } - + activeChoice(c){ + this.setState({activeNavStatus:c}); + this.createdImgFn(); + } + //向下箭头 + reduceFn(){ + let item=this.state.activeNavStatus; + item-=1; + if(item<1){ + item=1; + } + this.setState({activeNavStatus:item}); + } + //向上箭头 + addFn(){ + let item=this.state.activeNavStatus; + item++; + if(item>3){ + item=3; + } + this.setState({activeNavStatus:item}); + } onUpload = (file, report) => { + let self=this; console.log('上传头像',file); return new Promise((resolve, reject) => { let path = "" @@ -497,17 +548,74 @@ export default class edittemplate extends React.Component{ return(
+
+
+ + 编辑落地页 +
+
+ + + +
+ +
+
+
+ {this.onmodelChange(e)} } value={this.state.showType}> + 兑换码 + 白名单 + 立减金 + +
+ {/* 兑换码 */} +
+
+

落地页:

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

{this.state.model.title}

+ + +
+
+

商品列表页:

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

商品详情页:

+
this.activeChoice(3)} className={this.state.activeNavStatus==3?'activeNav thumbheader' :'thumbheader'}> + +
+
+
+
+ { + this.state.activeNavStatus==1?( +
+ + + +
+ ): this.state.activeNavStatus==2?( +
+ + + +
+ ):
+ + + +
+ } +
-
-
-
-
-
热力预估
-
-
-
+ +
{this.state.model.title}
@@ -534,39 +642,26 @@ export default class edittemplate extends React.Component{
+
{ this.state.isSystemModel ? - (

系统模板-落地页设置

) : (

我的模板-落地页设置

) + (

落地页设置

) : (

落地页设置

) } - - - - - -
-
-
-
- - -
-
-
+ - -
-
落地页页面设置:
+
+
基础设置
- + { let model2 = this.state.model; model2.title = e; @@ -577,16 +672,34 @@ export default class edittemplate extends React.Component{ model2.title = ""; this.setState({model:model2}) }} - value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'250px'} alignment={'left'}/> + value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'}/> - -
- {this.colorChange(e)}} /> - {this.state.model.bg_color} +
样式
+ +
+ + + + + {/* {this.state.model.button_color} */} + 自定义 +
+ + +
+ + + + + + {/* {this.state.model.bg_color} */} + 自定义
+ - - + +
基础图层
+ - + - + + {this.onactivityChange(e)} } value={this.state.activityType}> + 图片 + 富文本 + + + - {/* - {this.onUploadChange3(e)} } - onUpload={this.onUpload} - onError={this.onUploadError} - defaultFileList={this.state.model.thumb ? [{'src':this.state.model.thumb}] : null} - /> - - */} -
商品列表页面设置:
- - {this.onUploadChange4(e)} } - onUpload={this.onUpload} - onError={this.onUploadError} - /> - - - -
- {this.colorChange1(e)}} /> - {this.state.model.button_color} -
- - { this.state.isSystemModel ? ( @@ -691,7 +771,7 @@ export default class edittemplate extends React.Component{ ) : null } - { + {/* { this.state.isExchangePage ? (
@@ -712,7 +792,7 @@ export default class edittemplate extends React.Component{ ) : null } - + */}
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 7f4dd24a..16b9663a 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -814,7 +814,22 @@ position: absolute; right: 0; } - +.perimg{ + position: absolute; + width:50px; + top: 40%; + left: 50%; + cursor: pointer; + margin-left: -270px; +} +.nextimg{ + position: absolute; + width:50px; + top: 40%; + right: 50%; + margin-right: -270px; + cursor: pointer; +} .editor-main { background-color: #fff; -webkit-box-shadow: 0 1px 6px 2px rgba(0,0,0,.03); @@ -822,7 +837,7 @@ margin: 0 auto; position: relative; top: 65px; - height: 400px; + // height: 400px; width: 375px; margin-bottom: 200px; } @@ -1136,7 +1151,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - width: 600px + width:550px } .page-title-control { @@ -1146,7 +1161,51 @@ position: relative; } - +.RootEditor{ + height: 100%; + overflow: scroll; + .zent-color-picker__text[data-zv="9.11.0"],.zent-color-picker__preview[data-zv="9.11.0"] { + width: 24px!important; + height: 24px!important;; + border-radius: 24px!important; + } + .colorItembg,.colorItemfont{ + margin-top: -15px; + .cicle{ + width: 22px; + height: 22px; + display: inline-block; + border-radius: 22px; + box-sizing: border-box; + background: #fff; + border: 1px solid #f1f2f3; + margin-left: 8px; + } + .cicle1{ + background:#EEEEEE; + } + .cicle2{ + background:#000; + } + .cicle6{ + background:#04C160; + } + .cicle3{ + background:#AE99D3; + }.cicle4{ + background:#FACD6A; + }.cicle5{ + background:#FE7962; + } + } + .selfset{ + margin-left: 10px; + padding-left: 10px; + color: #3373F3; + border-left: 1px solid #ccc; + cursor: pointer; + } +} .RootEditor .editor-title { font-size: 14px; line-height: 20px; @@ -1409,4 +1468,82 @@ position: absolute; right: 20px; top: 80px; +} +.edittemplate{ + height: 100vh; + background: #f3f4f5; + + .topHeader{ + width: 100%; + height: 60px; + background: #fff; + border-bottom:1px solid #f3f4f5; + display: flex; + padding: 0 10px; + box-sizing: border-box; + justify-content: space-between; + align-items: center; + img{ + width: 28px; + height: 28px; + cursor: pointer; + } + } +} +#leftComponent{ + position: fixed; + width:350px; + height: 100%; + background: #fff; + .showTypechice{ + display: flex; + justify-content:center; + .zent-radio-button[data-zv="9.11.0"]{ + width: 100px!important; + line-height:20px!important; + + } + margin-top: 15px; + } + .ascriptionCode{ + width: 90%; + margin-top: 30px; + margin: 0 auto; + .item{ + margin-top: 15px; + display: flex; + flex-direction: column; + h3{ + text-align: center; + height: 8%; + display: flex; + justify-content: center; + background: #fff; + align-items: center; + font-size: 10px; + color: #5E5E5E; + border: 1px solid #F2F2F2; + } + img{ + width: 100%; + } + h4{ + font-size: 14px; + font-weight: normal; + } + .thumbheader{ + width: 8vw; + height: 11vw; + background: #F2F2F2; + overflow: hidden; + margin-top: 5px; + align-self: center; + box-sizing: border-box; + cursor: pointer; + &.activeNav{ + border: 5px solid #DDEEFF; + } + } + } + } } \ No newline at end of file diff --git a/src/pages/exchangepage/template/main.js b/src/pages/exchangepage/template/main.js index bf6296e6..6fbbd4d2 100644 --- a/src/pages/exchangepage/template/main.js +++ b/src/pages/exchangepage/template/main.js @@ -60,7 +60,8 @@ export default class mytemplate extends React.Component{ createBox(){ sessionStorage.setItem("pageInfo",0) - 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") } sourceClick(e){ diff --git a/src/pages/home/home.js b/src/pages/home/home.js index b3e4a2b9..fc73fa70 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -73,7 +73,7 @@ import distributoradd from '../distributor/add/add'; import mytempMouldadd from '../exchangepage/template/main.js' -import edittemplate from '../exchangepage/edittemplate/main.js' +// import edittemplate from '../exchangepage/edittemplate/main.js' import myexchangetemplate from '../exchangepage/mytemplate/main.js' import {getUserinfo,handelResponse,postLogOut,getProductInfoSelect} from "../../assets/api.js" let timerstop = null; @@ -406,7 +406,7 @@ export default class App extends Component { - + {/* */}