编辑器商品详情页立减金数据联动，实时渲染展示

src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js

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

src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js

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

src/pages/exchangepage/edittemplate/couponReduceDetail.js

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

src/pages/exchangepage/edittemplate/couponconfig.js

@@ -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) {
+		if (config && config.couponList && config.couponList.product_detail) {
-			this.setState({ model: config.exchangeList.product_detail });
+			this.setState({ model: config.couponList.product_detail });
 		}
 	}
 	componentWillUnmount() {
 		let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-		if (oldobj && oldobj.exchangeList) {
+        let couponList = oldobj.couponList;
-			let exchangeList = oldobj.exchangeList
+        couponList.product_detail = _.cloneDeep(this.state.model);
-			exchangeList.product_detail = this.state.model;
+        oldobj.couponList = couponList;
-			oldobj.exchangeList = exchangeList;
-		} else {
-			let exchangeList = {}
-			exchangeList.product_detail = this.state.model;
-			oldobj.exchangeList = exchangeList;
-		}
 		sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
 	}
 

src/pages/exchangepage/edittemplate/detailstemplate.js

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

src/pages/exchangepage/edittemplate/goodstemplate.less

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

src/pages/exchangepage/edittemplate/main.js

@@ -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 CouponGoodsDetailForm from './couponconfig' //优惠券商品详情页
-import CouponReduceDetailForm from '../couponTemplate/goodDetail/reduce/main' //优惠券商品详情页
+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/>
+                  />:<CouponGoodsDetailForm  seteditorHtml={(c) => this.getdetailEditorHtmlFn(c)}
-                ) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponReduceDetailForm/>
+                  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)} />

src/pages/exchangepage/edittemplate/reduce.js

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