From 1f011a2085cc133e112bddfa3f00263db00780da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Tue, 13 Sep 2022 14:57:20 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E5=95=86=E5=93=81?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E7=AB=8B=E5=87=8F=E9=87=91=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E8=81=94=E5=8A=A8=EF=BC=8C=E5=AE=9E=E6=97=B6=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goodDetail/product/preview.js | 30 ------- .../couponTemplate/goodDetail/reduce/main.js | 54 ----------- .../edittemplate/couponReduceDetail.js | 90 +++++++++++++++++++ .../couponconfig.js} | 17 ++-- .../edittemplate/detailstemplate.js | 12 ++- .../edittemplate/goodstemplate.less | 26 +++++- src/pages/exchangepage/edittemplate/main.js | 36 ++++++-- src/pages/exchangepage/edittemplate/reduce.js | 10 +++ 8 files changed, 169 insertions(+), 106 deletions(-) delete mode 100644 src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js delete mode 100644 src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js create mode 100644 src/pages/exchangepage/edittemplate/couponReduceDetail.js rename src/pages/exchangepage/{couponTemplate/goodDetail/product/config.js => edittemplate/couponconfig.js} (94%) diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js b/src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js deleted file mode 100644 index 9d71a2f0..00000000 --- a/src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js +++ /dev/null @@ -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( -
- - -

- -

- { - this.props.detaildata.describe.bg_image&&this.props.detaildata.describe.type==1?:this.props.detaildata.describe.type==3?
:null - } - { - this.props.detaildata.describe.type==2?:null - } - -
- ) - } -} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js b/src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js deleted file mode 100644 index b52d8910..00000000 --- a/src/pages/exchangepage/couponTemplate/goodDetail/reduce/main.js +++ /dev/null @@ -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 ( -
-
-

商品详情页立减金设置

-
-
-
-
样式
- -
- -
- - -
- -
- -
-
-
- ) - } -} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/couponReduceDetail.js b/src/pages/exchangepage/edittemplate/couponReduceDetail.js new file mode 100644 index 00000000..680fb84a --- /dev/null +++ b/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 ( +
+
+

商品详情页立减金设置

+
+
+
+
样式
+ +
+ { this.fontcolor('#ffffff') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}> +
+ +
+
+ + +
+ { this.buttoncolor('#ffffff') }}> + { this.buttoncolor('#04C160') }}> + { this.buttoncolor('#AE99D3') }}> + { this.buttoncolor('#FACD6A') }}> + { this.buttoncolor('#FE7962') }}> +
+ +
+
+ +
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/product/config.js b/src/pages/exchangepage/edittemplate/couponconfig.js similarity index 94% rename from src/pages/exchangepage/couponTemplate/goodDetail/product/config.js rename to src/pages/exchangepage/edittemplate/couponconfig.js index 60aeb3cd..e58a0e04 100644 --- a/src/pages/exchangepage/couponTemplate/goodDetail/product/config.js +++ b/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) { - 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)); } diff --git a/src/pages/exchangepage/edittemplate/detailstemplate.js b/src/pages/exchangepage/edittemplate/detailstemplate.js index 9d71a2f0..620d556c 100644 --- a/src/pages/exchangepage/edittemplate/detailstemplate.js +++ b/src/pages/exchangepage/edittemplate/detailstemplate.js @@ -23,7 +23,17 @@ export default class edittemplate extends React.Component{ { this.props.detaildata.describe.type==2?:null } - + { + this.props.templateType!=2?: +
+
+

￥0.00

+

共省￥0.01

+
+ +
+ } + ) } diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index d8d4821e..c04f70f6 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/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 { diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 9e4b7716..81dce7a8 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/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 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 ? this.setState({ detailactiveshow: true })} detaildata={this.state.product_detail} - /> : + templateType={this.state.showType} + /> : } )} @@ -1250,8 +1266,14 @@ export default class edittemplate extends React.Component { }} setbottomImg={(c) => this.getbottomimgFn(c)} setdetailftc={(c) => this.getdetailfont_color(c)} - />: - ) :this.state.activeNavStatus == 1?: + />: 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?:this.getReduceFontcolor(c)} setReduceButtoncolor={(c)=>this.getReduceButtoncolor(c)}/> } {this.state.preview_visible ? ( diff --git a/src/pages/exchangepage/edittemplate/reduce.js b/src/pages/exchangepage/edittemplate/reduce.js index f6bdd00b..f2700941 100644 --- a/src/pages/exchangepage/edittemplate/reduce.js +++ b/src/pages/exchangepage/edittemplate/reduce.js @@ -17,6 +17,16 @@ export default class edittemplate extends React.Component{
+ { + this.props.templateType==2? +
+
+

￥0.00

+

共省￥0.01

+
+ +
:null + }
) }