完成编辑器新建编辑功能

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) => {

src/pages/exchangepage/edittemplate/detailsPage.js

@@ -14,9 +14,9 @@ export default class edittemplate extends React.Component{
     super(props)
     this.state={
 		model:{
-			font_color: "",
+			font_color:"#ffffff",
-	    button_color: "",
+	    button_color: "#FACD6A",
-	    describe: {type : 1, content: " ",bg_image:''},
+	    describe: {type :"", content: " ",bg_image:''},
 		}	 
 		}
   }
@@ -199,9 +199,9 @@ export default class edittemplate extends React.Component{
 			 <div className="activeTip">
 			  <FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
         <RadioGroup onChange={(e)=>{this.onactivityChange(e)}  } value={this.state.model.describe.type}>
-       <RadioButton onClick={()=>this.hasItemFn(1)} value={1}>图片</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(1)} value={"1"}>图片</RadioButton>
-       <RadioButton onClick={()=>this.hasItemFn(2)} value={2}>悬浮</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(2)} value={"2"}>悬浮</RadioButton>
-       <RadioButton onClick={()=>this.hasItemFn(3)} value={3}>富文本</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
        </RadioGroup>
          </FormItem>
 				 <Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">

src/pages/exchangepage/edittemplate/goodsPage.js

@@ -17,9 +17,9 @@ export default class edittemplate extends React.Component{
 		model:{
       top_image: "",
 	    list: 1,
-	    font_color:"",
+	    font_color:"#ffffff",
-	    button_color: "",
+	    button_color: "#FACD6A",
-	    describe: {type : 1, content : "",bg_image:''}
+	    describe: {type : "", content : "",bg_image:''}
 		 }
 		}
   }
@@ -268,9 +268,9 @@ export default class edittemplate extends React.Component{
        <div className="activeTip">
         <FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
         <RadioGroup onChange={(e)=>{this.onactivityChange(e)}  } value={this.state.model.describe.type}>
-       <RadioButton onClick={()=>this.hasItemFn(1)} value={1}>图片</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(1)} value={"1"}>图片</RadioButton>
-       <RadioButton onClick={()=>this.hasItemFn(2)} value={2}>悬浮</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(2)} value={"2"}>悬浮</RadioButton>
-       <RadioButton onClick={()=>this.hasItemFn(3)} value={3}>富文本</RadioButton>
+       <RadioButton onClick={()=>this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
        </RadioGroup>
          </FormItem>
         

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -24,7 +24,7 @@ export default class edittemplate extends React.Component{
           this.props.goodsdata.list==1? <button className={this.props.goodsdata.describe.type==1&&this.props.goodsdata.describe.bg_image||this.props.goodsdata.describe.type==3?"exchageBtn bottomBtn":"exchageBtn"} style={{color:this.props.goodsdata.font_color,background:this.props.goodsdata.button_color}}>立即兑换</button>:null
         }
         {
-          this.props.goodsdata.describe.type==1? <img src={this.props.goodsdata.describe.bg_image} alt="" className="bottomTip"/>:this.props.goodsdata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.describe.content}}></div>:null
+          this.props.goodsdata.describe.type==1? <img src={this.props.goodsdata.describe.bg_image} alt="" className={this.props.goodsdata.list==1&&this.props.goodsdata.describe.bg_image?'bottomTip bottomTipview':'bottomTip'}/>:this.props.goodsdata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.describe.content}}></div>:null
         }
         {
           this.props.goodsdata.describe.type==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null

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;

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:''},
+      describe: {type:"",content :"",bg_image:''},
-      bg_color:"",
+      bg_color:"#EEEEEE",
-			font_color:"",
+			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{
         </FormItem>
         <FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
         <RadioGroup onChange={(e)=>{this.onactivityChange(e)}  } value={this.state.model.describe.type}>
-       <RadioButton value={1} onClick={()=>this.hasItemFn(1)}>图片</RadioButton>
+       <RadioButton value={"1"} onClick={()=>this.hasItemFn(1)}>图片</RadioButton>
-       <RadioButton value={2} onClick={()=>this.hasItemFn(2)}>富文本</RadioButton>
+       <RadioButton value={"2"} onClick={()=>this.hasItemFn(2)}>富文本</RadioButton>
        </RadioGroup>
          </FormItem>
          {

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:"",
+			bg_color:"#EEEEEE",
-			font_color:"",
+			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:"",
+	    font_color:"#ffffff",
-	    button_color: "",
+	    button_color: "#FACD6A",
 			describe: {type : "", content : "",bg_image:''},
 		},
 		product_detail:{
-			font_color:'',
+			font_color:"#FACD6A",
-			button_color:'',
+	    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")
+	let myInfoData = JSON.parse(sessionStorage.getItem("pageInfo"))
-	if(myInfo == 0)
+	if(myInfoData)
 	{
+		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})
 			
-		return
+		// }
+		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));
 	}
-	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})
-			
-		}
-		this.setState({model:model})
-	}
-   }
 	 async  onSave(){
-		// if(this.state.model.images.toString()!=info.images.toString()){
+		
+		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();
-			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)
 
+		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(
       <div className="edittemplate">
 			<div className="topHeader">
@@ -548,7 +513,6 @@ getLandingdata(val){
 		  <div>
 			<Button type="Info"  onClick={(e)=>{this.onPreview(e)}}  >预览</Button>
 			<Button type="primary" onClick={(e)=>{this.onSave(e)}} >保存</Button>
-			
 			</div>
 			
 			</div>
@@ -577,7 +541,7 @@ getLandingdata(val){
 						<img    src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'} className="thumbcode" />
 						</div>
 						{
-							this.state.model.describe.bg_image?<img src={this.state.model.describe.bg_image}/>:null
+							this.state.model.describe&&this.state.model.describe.bg_image?<img src={this.state.model.describe.bg_image}/>:null
 						}
 						
 
@@ -595,7 +559,7 @@ getLandingdata(val){
             this.state.product_list.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.product_list.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
 					}
 					{
-						this.state.product_list.list==1?	<button className={this.state.product_list.describe.bg_image||this.state.product_list.describe.type==3?"exchageBtn bottom_exchageBtn":"exchageBtn"} style={{color:this.state.product_list.font_color,background:this.state.product_list.button_color}}>立即兑换</button>:null
+						this.state.product_list.list==1?	<button className={this.state.product_list.describe&&this.state.product_list.describe.bg_image||this.state.product_list.describe.type==3?"exchageBtn bottom_exchageBtn":"exchageBtn"} style={{color:this.state.product_list.font_color,background:this.state.product_list.button_color}}>立即兑换</button>:null
 					}
 				  {
             this.state.product_list.describe.type==1? <img className="bottom_Img" src={this.state.product_list.describe.bg_image} alt="" />:this.state.product_list.describe.type==3?<div className="bottom_activeTip" dangerouslySetInnerHTML = {{ __html:this.state.product_list.describe.content}}></div>:null
@@ -645,8 +609,7 @@ getLandingdata(val){
 				<img className="nextimg" onClick={this.addFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'}/>
 			</div>
 			}
-			{
+				<div className="editor-main"  tabindex="0" ref={this.canvasImgDom} style={{display:this.state.activeNavStatus==1?'block':'none'}}>
-					this.state.activeNavStatus==1? <div className="editor-main"  tabindex="0" ref={this.canvasImgDom}>
 	       
 					<div className="xj-viewer-title">
 						<span className="xj-viewer-title-line">{this.state.model.title}</span>
@@ -672,9 +635,15 @@ getLandingdata(val){
 					</div>
 					 <div className="bottom">
 					 {
-						this.state.model.describe.type==0?null:this.state.model.describe.type==1?<img src={this.state.model.describe.bg_image} crossOrigin="anonymous"/>:<div className="editbg" >
+						this.state.model.describe&&this.state.model.describe.type==0?null:this.state.model.describe&&this.state.model.describe.type==1?<img src={this.state.model.describe.bg_image} crossOrigin="anonymous"/>:<div className="editbg" >
-						<img src={this.state.model.describe.bg_image} crossOrigin="anonymous" className="bgimg" />
+						
-							<div dangerouslySetInnerHTML = {{ __html:this.state.model.describe.content}}></div>
+						{
+							this.state.model.describe&&this.state.model.describe.bg_image?<img src={this.state.model.describe.bg_image} crossOrigin="anonymous" className="bgimg" />:null
+						}
+						{
+								this.state.model.describe&&this.state.model.describe.content?	<div dangerouslySetInnerHTML = {{__html:this.state.model.describe.content}}></div>:null
+						}
+						
 						</div>
 					 }
 						
@@ -682,8 +651,7 @@ getLandingdata(val){
 							</div>
 						</div>
 					</div>
-				</div>:null
+				</div>
-			}
 	    {
 			this.state.activeNavStatus!=2?null:this.state.activeshow&&this.state.product_list.describe.type==2&&this.state.product_list.describe.content?<Descteplate backPrepage={c=>this.showactiveIcon(c)} goodsdata={this.state.product_list}/>:<Goodstemplate opendesc={c=>this.setState({activeshow:true})} goodsdata={this.state.product_list}/>
 			}

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
 }
 

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);
 

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")
 		
 	}

src/pages/exchangepage/template/preview.js

@@ -83,7 +83,7 @@ export default class acclist extends React.Component{
 				!propsData.product_list.top_image?<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>:<img className="topbanner" src={propsData.product_list.top_image}/>
 			}
 			{
-			propsData.product_list.list==1?<img className="swiperType" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.jpg" />:propsData.product_list.list==3?<img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
+			propsData.product_list.list==1?<img className="swiperType" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiperview.png" />:propsData.product_list.list==3?<img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrixview.png'}/>:<img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listview.png'}/>
 			}
 			{
 				propsData.product_list.list==1? <button className={propsData.product_list.describe.type==1&&propsData.product_list.describe.bg_image||propsData.product_list.describe.type==3?"exchageBtn bottomBtn":"exchageBtn"} style={{color:propsData.product_list.font_color,background:propsData.product_list.button_color}}>立即兑换</button>: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?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
 					<div className="detailstemplate" tabindex="0"  >
 					<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
-				 <img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailtop.png'}/> 
+				 <img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodsbigPic.png'}/> 
 				 <p className="splitLine"></p>
 				 <img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/viewIpt.png'}/>
 				 <p className="splitLine"></p>

src/pages/exchangepage/template/tt.js

@@ -0,0 +1,75 @@
+{
+		this.state.step==2?propsData.product_list.list==1? <div id="rotation" >
+		<div className="top">
+		 {
+			 propsData.product_list.top_image? <img src={propsData.product_list.top_image} className="top-bg"/>: <img src={'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} className="top-bg"/>
+		 }
+			 <div className="title"> </div>
+		</div>
+		<div className="center">
+		<div className="center-img">
+			<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.jpg"/>
+		</div>
+		</div>
+		<div className="bottom">
+			<div class="exchangeBtn"  onClick="exchangeBtn()" style={{background:propsData.product_list.button_color,color:propsData.product_list.font_color}}>
+			立  即  兑  换
+			</div>
+		</div>
+	 </div>:propsData.product_list.list==2?<div id="list">
+       <div className="top">
+        <img src={propsData.product_list.top_image} className="top-bg"/>
+        <div className="title"> </div>
+       </div>
+       <div className="center">
+        <ul class="listcommity">
+          {
+            productData.map((item, index) => {
+              if(index < 6)
+              {
+              return(
+                  <li key={index}>
+                    <div>
+                      <img src={item.img_url} alt=""/>
+                       <span className="product-name">{item.name}</span>
+                    </div>
+                    <span className="product-exchange"    style={{background: propsData.product_list.button_color}} onClick="exchangeBtn(item)">兑换</span>
+                  </li>
+              )
+              }
+              
+              })
+           } 
+      </ul>
+			{
+				productData.product_list.describe&&productData.product_list.describe.type==1?<img src={productData.product_list.describe.bg_image}/>:null
+			}
+       </div>
+    </div>: <div id="matrix">
+       <div className="top" >
+        <img src={propsData.product_list.top_image} className="top-bg" />
+        <div className="title"> </div>
+       </div>
+       <div className="center">
+        <ul className="listcommity">
+      {
+       productData.map((item, index) => {
+         return(
+        <li className="product_item">
+          <div className="product-img">
+              <img src={item.img_url} />
+          </div>  
+             <div className="product-name">{item.name}</div>
+        </li>
+        )
+      })
+      }
+      </ul>
+      </div>
+		
+			{
+				propsData.product_list.describe&&propsData.product_list.describe.type==2?<img className="susactive_Tip" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
+			}
+		</div>:null
+		
+	}