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-10 20:38:55 +08:00
parent bc75342a8b
commit 9fb475e207
12 changed files with 216 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/api.js
View File

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

12
src/pages/exchangepage/edittemplate/detailsPage.js
View File

@ -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{
<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(2)} value={2}>悬浮</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(3)} value={3}>富文本</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(1)} value={"1"}>图片</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(2)} value={"2"}>悬浮</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
</RadioGroup>
</FormItem>
<Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">

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

@ -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{
<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(2)} value={2}>悬浮</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(3)} value={3}>富文本</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(1)} value={"1"}>图片</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(2)} value={"2"}>悬浮</RadioButton>
<RadioButton onClick={()=>this.hasItemFn(3)} value={"3"}>富文本</RadioButton>
</RadioGroup>
</FormItem>

2
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -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

3
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -112,6 +112,9 @@
width: 100%;
margin-top: 10px;
}
.bottomTipview{
margin-bottom: 30px;
}
.desc-goods{
.descript{
padding: 30px 24px;

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

@ -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{
</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={2} onClick={()=>this.hasItemFn(2)}>富文本</RadioButton>
<RadioButton value={"1"} onClick={()=>this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={()=>this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup>
</FormItem>
{

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

@ -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(
<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>
}
{
this.state.activeNavStatus==1? <div className="editor-main" tabindex="0" ref={this.canvasImgDom}>
<div className="editor-main" tabindex="0" ref={this.canvasImgDom} style={{display:this.state.activeNavStatus==1?'block':'none'}}>
<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" >
<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.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" >
{
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}/>
}

2
src/pages/exchangepage/edittemplate/main.less
View File

@ -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
}

1
src/pages/exchangepage/edittemplate/wangeditorCom.js
View File

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

2
src/pages/exchangepage/mytemplate/main.js
View File

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

4
src/pages/exchangepage/template/preview.js
View File

@ -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>

75
src/pages/exchangepage/template/tt.js Normal file
View File

@ -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
}