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-08 18:19:33 +08:00
parent 4105fa5789
commit 8f5cb6a122
4 changed files with 126 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,7 @@ export default class edittemplate extends React.Component{
model:{
font_color: "",
button_color: "",
describe: {type : 1, content: "<p>xxxxx</p>",bg_image:''},
describe: {type : 1, content: " ",bg_image:''},
}
}
}

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

@ -29,7 +29,7 @@ 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:"",
font_color:"",
},
@ -39,12 +39,12 @@ export default class edittemplate extends React.Component{
list: 1,
font_color:"",
button_color: "",
describe: {type : 1, content : "",bg_image:''},
describe: {type : "", content : "",bg_image:''},
},
product_detail:{
font_color:'',
button_color:'',
describe:{type: 1, content: "",bg_image:''},
describe:{type: "", content: "",bg_image:''},
},
preview_visible:false,
previewData:null,
@ -271,7 +271,7 @@ getLandingdata(val){
}
//
getlandftcolor(c){
let landConfig=this.state.landConfigure;
let landConfig=this.state.model;
landConfig.font_color=c;
this.setState({model:landConfig});
}
@ -294,6 +294,7 @@ getLandingdata(val){
}
//获取商品排列方式
getarrayType(c){
console.log(297,c);
let goodsConfig=this.state.product_list;
goodsConfig.list=c;
this.setState({product_list:goodsConfig});
@ -338,7 +339,7 @@ getLandingdata(val){
}
onPreview(){
this.setState({previewData:this.state.model})
this.setState({previewData:this.state})
this.setState({preview_visible:true})
}
//获取商品详情数据
@ -689,7 +690,7 @@ getLandingdata(val){
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}/>
}
{
this.state.activeNavStatus!=3?null:this.state.detailactiveshow&&this.state.product_detail.activeType==2&&this.state.product_detail.editorHtml?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={this.state.product_detail}/>:<Detailstemplate opendesc={c=>this.setState({detailactiveshow:true})} detaildata={this.state.product_detail}/>
this.state.activeNavStatus!=3?null:this.state.detailactiveshow&&this.state.product_detail.describe.type==2&&this.state.product_detail.describe.content?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={this.state.product_detail}/>:<Detailstemplate opendesc={c=>this.setState({detailactiveshow:true})} detaildata={this.state.product_detail}/>
}

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

@ -1,14 +1,10 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { HashRouter as Router, Route, Link } from "react-router-dom";
import { Button } from 'zent';
import {RadioGroup,RadioButton,Input,openDialog ,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
import "../../../assets/comm.css"
import _ from "lodash";
import "./preview.less"
export default class acclist extends React.Component{
constructor(props){
super(props)
@ -16,98 +12,25 @@ export default class acclist extends React.Component{
step:1,
layout:"list",
type:1,
top_url:""
top_url:"",
top_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png',
middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png',
}
}
componentDidMount(e){
setTimeout(()=>{
let img = document.getElementById("preview-center-img")
let center = document.getElementById("preview-center")
center.style.height = (img.clientHeight -2) + "px";
},500)
}
exchangeBtn(){
}
popPage(){
if(this.state.step == 2)
{
setTimeout(()=>{
let img = document.getElementById("preview-center-img")
let center = document.getElementById("preview-center")
img.onload=function(){
center.style.height = (img.clientHeight -2) + "px";
}
},500)
}
if(this.state.step > 1)
{
let step = this.state.step - 1;
this.setState({step : step })
}
}
pushPage(){
if(this.state.step < 2)
{
let step = this.state.step + 1;
this.setState({step : step })
}
}
onListChange(e){
this.setState({type:e.target.value })
if(e.target.value == 1)
{
this.setState({layout:"list"})
}
if(e.target.value == 2)
{
this.setState({layout:"rotation"})
}
if(e.target.value ==3)
{
this.setState({layout:"matrix"})
}
this.setState({step:e.target.value })
}
render(){
const productData = [
{
"id": 641,
"batch_id": "285464532271284225",
"name": "腾讯视频VIP",
"price": "12.00",
"face_value": "12.00",
"item_id": 101,
"item_name": "优酷周卡",
"exchange_account_type": 1,
"goods_category_id": null,
"goods_category_name": null,
"img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/youku.png",
"create_time": null,
"update_time": "2021-10-22 10:22:38",
"position": 0,
"status": 1,
"send_method": null
},{
{
"id": 641,
"batch_id": "285464532271284225",
"name": "腾讯视频VIP",
@ -197,201 +120,122 @@ export default class acclist extends React.Component{
"status": 1,
"send_method": null
},
{
"id": 643,
"batch_id": "285464532271284225",
"name": "优酷视频VIP",
"price": "14.00",
"face_value": "14.00",
"item_id": 104,
"item_name": "优酷年卡",
"exchange_account_type": 4,
"goods_category_id": null,
"goods_category_name": null,
"img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/youku.png",
"create_time": null,
"update_time": "2021-10-22 14:10:14",
"position": 0,
"status": 1,
"send_method": null
},
{
"id": 645,
"batch_id": "285464532271284225",
"name": "爱奇艺VIP",
"price": "16.00",
"face_value": "16.00",
"item_id": 128,
"item_name": "QQ音乐绿钻月卡",
"exchange_account_type": 4,
"goods_category_id": null,
"goods_category_name": null,
"img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/qqmusic.png",
"create_time": null,
"update_time": "2021-10-22 14:10:18",
"position": 0,
"status": 1,
"send_method": null
},
{
"id": 645,
"batch_id": "285464532271284225",
"name": "爱奇艺VIP",
"price": "16.00",
"face_value": "16.00",
"item_id": 128,
"item_name": "QQ音乐绿钻月卡",
"exchange_account_type": 4,
"goods_category_id": null,
"goods_category_name": null,
"img_url": "https://lsxdemall.oss-cn-beijing.aliyuncs.com/productLogo/qqmusic.png",
"create_time": null,
"update_time": "2021-10-22 14:10:18",
"position": 0,
"status": 1,
"send_method": null
}
];
let propsData=this.props.data;
console.log('预览', propsData.product_list.list);
return(
<div>
<div id="preview-bg">
{
this.state.step==1 ? (
<div onClick={(e)=>this.pushPage(e)}>
<div>
<div className="top">
<img src={this.props.data.images[0]} id="top"/>
{
propsData.model.top_image?<img src={propsData.model.top_image} id="top"/>:<img src={this.state.top_image} id="top"/>
}
</div>
<div className="center" id="preview-center">
<img id="preview-center-img" src={this.props.data.images[1]} style={{"position": "absolute","z-index": "1"}}/>
{
propsData.model.middle_image?<img id="preview-center-img" src={propsData.model.middle_image} />:<img id="preview-center-img" src={this.state.middle_image}/>
}
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/verify.png" className="verifycode"/>
<div className="submit"></div>
</div>
<div className="bottom">
<img src={this.props.data.images[2]} />
{
propsData.model.describe.bg_image?<img src={propsData.model.describe.bg_image} />:null
}
{
propsData.model.describe.content?<div className="textTip_land" dangerouslySetInnerHTML = {{ __html:propsData.model.describe.content}}></div>:null
}
</div>
</div>
) : null
}
{
this.state.step==2 ? (
this.state.layout == "rotation" ?
(
<div id="rotation" onClick={(e)=>this.pushPage(e)}>
<div className="top">
<img src={this.props.data.top_img} 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:this.props.data.button_color}}>
立 即 兑 换
</div>
</div>
</div>
): this.state.layout == "list" ? (
<div id="list">
<div className="top">
<img src={this.props.data.top_img} 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: this.props.data.button_color}} onClick="exchangeBtn(item)">兑换</span>
</li>
)
}
})
}
</ul>
</div>
</div>
) : (
<div id="matrix" onClick={(e)=>this.pushPage(e)}>
<div className="top" >
<img src={this.props.data.top_img} 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>
</div>
) :null
) : null
}
{
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}}>
立 即 兑 换
</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>
</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>
</div>:null
}
{
this.state.step==3 ? (
<div>
<div>
sdsdfsdf
</div>
) : null
}
</div>
<div className="footbar">
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.type}>
<RadioButton value={1}>列表</RadioButton>
<RadioButton value={2}>轮播</RadioButton>
<RadioButton value={3}>矩阵</RadioButton>
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.step}>
<RadioButton value={1}>落地页</RadioButton>
<RadioButton value={2}>列表页</RadioButton>
<RadioButton value={3}>详情页</RadioButton>
</RadioGroup>
</div>

34
src/pages/exchangepage/template/preview.less
View File

@ -9,7 +9,7 @@
}
#preview-bg{
z-index: 10;
max-height: 600px;
height: 600px;
position: relative;
overflow-y: auto;
background: #fff;
@ -35,9 +35,20 @@
.bottom{
width: 100%;
height: auto;
vertical-align: middle;
vertical-align: middle;
position: relative;
}
.textTip_land{
position: absolute;
top: 0;
padding:60px 24px 24px;
line-height: 1.4rem;
font-size: 13px;
box-sizing: border-box;
}
#preview-center-img{
width: 100%;
}
.key{
position: absolute;
top: 38px;
@ -156,9 +167,6 @@
background-color: #F4F6F9;
position: relative;
list-style: none;
.top{
position: absolute;
top: -40px;
@ -172,8 +180,7 @@
text-align: center;
}
img{
width: 100%;
height: 200px;
height:200px;
position: absolute;
top: 0px;
}
@ -187,10 +194,11 @@
ul{
width: 96%;
margin: 0 auto;
margin-top: 90px;
margin-top: 110px;
background: #F4F6F9;
}
li{ width: 100%;
height: 80px;
height: 60px;
border-radius: 5px;
padding: 0.14rem;
box-sizing: border-box;
@ -248,7 +256,7 @@
}
img{
position: absolute;
top: -50px;
height: 200px;
}
}
@ -256,10 +264,10 @@
.center{
width: 95%;
height: 75%;
height:46%;
background: #FFFFFF;
position: absolute;
top: 280px;
top: 320px;
left: 50%;
margin: -47.5%;
border-radius: 5px;