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:
许红梅 2022-09-13 14:57:20 +08:00
parent 080532a25c
commit 1f011a2085
8 changed files with 169 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js
View File

@ -1,30 +0,0 @@
import React from 'react';
import "./main.less"
import "../../../assets/comm.css"
import './goodstemplate.less'
export default class edittemplate extends React.Component{
constructor(props){
super(props)
}
opendescFn(){
this.props.opendesc(true)
}
render(){
return(
<div className="editor-main detailstemplate">
<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'}/>
<p className="splitLine"></p>
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
<p className="splitLine"></p>
{
this.props.detaildata.describe.bg_image&&this.props.detaildata.describe.type==1?<img className="detail_bottomImg" src={this.props.detaildata.describe.bg_image}/>:this.props.detaildata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.detaildata.describe.content}}></div>:null
}
{
this.props.detaildata.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
}
<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>
</div>
)
}
}

54
src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js
View File

@ -1,54 +0,0 @@
import React from 'react';
import { ColorPicker} from 'zent';
import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main"
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
model: {
font_color: "#AB582F",
button_color: "#fff",
describe: { type: "", content: " ", bg_image: '' },
}
}
}
handleChange = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.button_color = color;
this.setState({
model: model1
});
}
render() {
return (
<div>
<div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>商品详情页立减金设置</h1>
</div>
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<div style={{ fontWeight: 'bold', marginBottom: '20px' }}>样式</div>
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
<div className="colorItembg dfleac" >
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} />
</div>
</FormItem>
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
<div className="colorItemfont dfleac">
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} />
</div>
</FormItem>
</Form>
</div>
</div>
)
}
}

90
src/pages/exchangepage/edittemplate/couponReduceDetail.js Normal file
View File

@ -0,0 +1,90 @@
import React from 'react';
import { ColorPicker } from 'zent';
import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main"
import _ from "lodash";
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
font_color: "#AB582F",
button_color: "#FACD6A",
}
}
changeFontcor = (color) => {
this.setState({
font_color: color
});
this.props.setReduceFontcolor(color);
}
changeButtoncor = (color) => {
this.setState({
button_color: color
});
this.props.setReduceButtoncolor(color);
}
fontcolor(color) {
this.setState({
font_color: color
});
this.props.setReduceFontcolor(color);
}
buttoncolor(color) {
this.setState({
button_color: color
});
this.props.setReduceButtoncolor(color);
}
componentWillMount(e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.couponList && config.couponList.product_detail) {
let { font_color, button_color } = config.couponList.product_detail.reduce;
this.setState({ font_color, button_color });
}
}
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let couponList = oldobj.couponList;
couponList.product_detail.reduce = _.cloneDeep(this.state);
oldobj.couponList = couponList;
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
return (
<div>
<div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>商品详情页立减金设置</h1>
</div>
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1">
<div style={{ fontWeight: 'bold', marginBottom: '20px' }}>样式</div>
<FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span className={this.state.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.fontcolor('#ffffff') }}></span>
<span className={this.state.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.font_color} onChange={this.changeFontcor} />
</div>
</div>
</FormItem>
<FormItem labelname="背景颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span className={this.state.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} style={{ border: '1px solid #f1f2f3' }} onClick={() => { this.buttoncolor('#ffffff') }}></span>
<span className={this.state.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.buttoncolor('#04C160') }}></span>
<span className={this.state.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.buttoncolor('#AE99D3') }}></span>
<span className={this.state.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.buttoncolor('#FACD6A') }}></span>
<span className={this.state.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.buttoncolor('#FE7962') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.button_color} onChange={this.changeButtoncor} />
</div>
</div>
</FormItem>
</Form>
</div>
</div>
)
}
}

17
src/pages/exchangepage/couponTemplate/goodDetail/product/config.js → src/pages/exchangepage/edittemplate/couponconfig.js
View File

@ -4,6 +4,7 @@ import "@/assets/comm.css"
import Form from "@/components/form/main"
import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js'
import FormItem from "@/components/form-item/main"
import _ from "lodash";
import { uploadImg, handelResponse, addTheme, putMyTheme, putTheme, putSystemTemplate, addSystemTemplate } from "@/assets/api.js"
export default class edittemplate extends React.Component {
constructor(props) {
@ -138,21 +139,15 @@ export default class edittemplate extends React.Component {
}
componentWillMount() {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
if (config && config.exchangeList && config.exchangeList.product_detail) {
this.setState({ model: config.exchangeList.product_detail });
if (config && config.couponList && config.couponList.product_detail) {
this.setState({ model: config.couponList.product_detail });
}
}
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.exchangeList) {
let exchangeList = oldobj.exchangeList
exchangeList.product_detail = this.state.model;
oldobj.exchangeList = exchangeList;
} else {
let exchangeList = {}
exchangeList.product_detail = this.state.model;
oldobj.exchangeList = exchangeList;
}
let couponList = oldobj.couponList;
couponList.product_detail = _.cloneDeep(this.state.model);
oldobj.couponList = couponList;
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}

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

@ -23,7 +23,17 @@ export default class edittemplate extends React.Component{
{
this.props.detaildata.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
}
<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>
{
this.props.templateType!=2?<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>:
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button>
</div>
}
</div>
)
}

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

@ -3,9 +3,6 @@
height: 653px;
background: #F2F7F8;
position: relative;
// overflow-y: auto;
// overflow-x: auto;
>.preBtn {
position: absolute;
width: 28px;
@ -115,6 +112,29 @@
.fixbottom{
bottom: 0!important;
}
.payBtn-view{//优惠券支付模块
width: 100%;
height: 60px;
position: absolute;
bottom: 0;
left: 0;
z-index: 9999;
background: #D7D7D7;
.coupon-price{
display: flex;
flex-direction: column;
flex: 1;
text-align: right;
padding-right: 15px;
}
.payBtn{
width: 100px;
height: 100%;
border: 0;
}
}
}
.goodstemplate {

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

@ -11,7 +11,7 @@ import Detailstemplate from './detailstemplate'
import Descteplate from './goodsdesc'
import LandingForm from './landingPage' //落地页表单
import GoodsForm from './goodsPage' //商品页表单
import DetailsPage from './detailsPage' //商品详情页面
import DetailsPage from './detailsPage' //商品详情form页面
import WhiteLand from './whiteLand' //白名单落地页
import Whitegoods from './whitegoods' //白名单商品页面
import Whitedetails from './whitedetails' //白名单详情页
@ -22,8 +22,8 @@ import BottomBarView from './couponConfig/bottomBar'
// 优惠券
import CouponLandingForm from '../couponTemplate/landingPage/config/main' //优惠券落地页表单
import CouponGoodsListForm from '../couponTemplate/goodsPage/config/main' //优惠券商品列表页
import CouponGoodsDetailForm from '../couponTemplate/goodDetail/product/config' //优惠券商品详情页
import CouponReduceDetailForm from '../couponTemplate/goodDetail/reduce/main' //优惠券商品详情页
import CouponGoodsDetailForm from './couponconfig' //优惠券商品详情页
import CouponReduceDetailForm from './couponReduceDetail' //优惠券立减金详情页
import CouponComLib from '../couponTemplate/goodsPage/componentLib/main' //优惠券组件库
// import
import _ from 'lodash'
@ -51,7 +51,11 @@ let product_list = {
let product_detail = {
font_color: '#ffffff',
button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' }
describe: { type: '', content: '', bg_image: '' },
reduce:{
font_color: "#AB582F",
button_color: "#FACD6A",
}
}
//优惠券商品列表
let couponProduct_list = {
@ -619,6 +623,7 @@ export default class edittemplate extends React.Component {
detailpage.describe.type = c
this.setState({ product_detail: detailpage })
}
//活动说明类型
getactiveTypeFn(c) {
let goodsConfig = this.state.product_list
@ -675,6 +680,16 @@ export default class edittemplate extends React.Component {
detailConfig.describe.bg_image = c
this.setState({ product_detail: detailConfig })
}
getReduceButtoncolor(c) {
let reducedetailConfig = this.state.product_detail
reducedetailConfig.reduce.button_color = c
this.setState({ product_detail: reducedetailConfig })
}
getReduceFontcolor(c) {
let reducedetailConfig = this.state.product_detail
reducedetailConfig.reduce.font_color = c
this.setState({ product_detail: reducedetailConfig })
}
onClose() {
this.setState({ preview_visible: false })
}
@ -1126,7 +1141,8 @@ export default class edittemplate extends React.Component {
this.state.detailType == 1 ? <Detailstemplate
opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail}
/> : <Reduce />
templateType={this.state.showType}
/> : <Reduce templateType={this.state.showType} detaildata={this.state.product_detail}/>
}
</div>
)}
@ -1250,8 +1266,14 @@ export default class edittemplate extends React.Component {
}}
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)}
/>:<CouponGoodsDetailForm/>
) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponReduceDetailForm/>
/>:<CouponGoodsDetailForm seteditorHtml={(c) => this.getdetailEditorHtmlFn(c)}
setdetailActive={(c) => this.getdetailActiveFn(c)}
setdetailbgc={(c) => {
this.getdetailbgcolor(c)
}}
setbottomImg={(c) => this.getbottomimgFn(c)}
setdetailftc={(c) => this.getdetailfont_color(c)}/>
) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponReduceDetailForm setReduceFontcolor={(c)=>this.getReduceFontcolor(c)} setReduceButtoncolor={(c)=>this.getReduceButtoncolor(c)}/>
}
{this.state.preview_visible ? (
<PreviewEffect previewData={this.state.previewData} showType={this.state.showType} onCloseFn={this.onClose.bind(this)} />

10
src/pages/exchangepage/edittemplate/reduce.js
View File

@ -17,6 +17,16 @@ export default class edittemplate extends React.Component{
<div className="editor-main goodstemplate details-reduce">
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png" alt="" className="reduce-pic"/>
{
this.props.templateType==2?
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button className="payBtn" style={{background:this.props.detaildata.reduce.button_color,color:this.props.detaildata.reduce.font_color}}>立即支付</button>
</div>:null
}
</div>
)
}