From ea2efa7f18d503ab21d99387fcfdcfeb4b8bcc41 Mon Sep 17 00:00:00 2001 From: Apple <> Date: Thu, 22 Sep 2022 15:20:59 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=A8=A1=E7=89=88=E6=B5=81?= =?UTF-8?q?=E7=A8=8B=E8=87=AA=E6=B5=8B=EF=BC=8C=E7=BB=86=E8=8A=82=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edittemplate/couponCard/landPage.js | 2 +- .../edittemplate/exchange/detailstemplate.js | 2 +- .../edittemplate/exchange/landingPage.js | 2 +- .../edittemplate/goodstemplate.less | 19 +- src/pages/exchangepage/edittemplate/main.js | 495 ++++++++---------- src/pages/exchangepage/edittemplate/main.less | 9 +- src/pages/exchangepage/edittemplate/reduce.js | 3 +- src/pages/exchangepage/template/preview.js | 4 +- 8 files changed, 251 insertions(+), 285 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/couponCard/landPage.js b/src/pages/exchangepage/edittemplate/couponCard/landPage.js index 2385c4a9..f00d4bf4 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/landPage.js +++ b/src/pages/exchangepage/edittemplate/couponCard/landPage.js @@ -206,7 +206,7 @@ export default class couponLandpage extends React.Component { multiple sortable tips="单张图片不超过 5M" - onChange={(e) => { this.this.onUploadChange(e,'top_image') }} + onChange={(e) => { this.onUploadChange(e,'top_image') }} onUpload={this.onUpload} defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} onError={this.onUploadError} diff --git a/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js b/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js index dd89193e..69857afc 100644 --- a/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js +++ b/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js @@ -27,7 +27,7 @@ export default class edittemplate extends React.Component{ [1,3].includes(this.props.templateType)?:
-

￥0.00

+

￥0.00

共省￥0.01

diff --git a/src/pages/exchangepage/edittemplate/exchange/landingPage.js b/src/pages/exchangepage/edittemplate/exchange/landingPage.js index 362766cb..b22683e7 100644 --- a/src/pages/exchangepage/edittemplate/exchange/landingPage.js +++ b/src/pages/exchangepage/edittemplate/exchange/landingPage.js @@ -227,7 +227,7 @@ export default class edittemplate extends React.Component { { this.state.isSystemModel ? ( - this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} /> + this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} width={'300px'} className="sort_number"/> ) : null } { diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index 2e9decad..999e664a 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -125,8 +125,16 @@ display: flex; flex-direction: column; flex: 1; - text-align: right; - padding-right: 15px; + text-align: left; + padding-left: 15px; + :first-of-type{ + color: #FF5533; + span{ + font-size: 24px; + font-weight: bold; + } + + } } .payBtn{ width: 100px; @@ -273,7 +281,10 @@ font-size: 16px; } } - +.sort_number{ + border: 0!important; + border-bottom: 1px solid #e0e0e0!important; +} //商品详情页区分立减金/权益 .details_type { position: relative; @@ -292,7 +303,7 @@ /*商品详情页-立减金*/ .details-reduce { - background: #fff; + background: #F3F5F7; position: relative; .reduce-pic { diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index 371b0a33..2f19bb69 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -50,7 +50,7 @@ let product_detail = { font_color: '#ffffff', button_color: '#FACD6A', describe: { type: '', content: '', bg_image: '' }, - reduce:{ + reduce: { font_color: "#AB582F", button_color: "#FACD6A", } @@ -64,23 +64,23 @@ let couponProduct_list = { button_color: '#FACD6A', describe: { type: '', content: '', bg_image: '' }, picture: { - iswitch:false, + iswitch: false, img: '', jumpType: '0',//0不跳转 1跳转 jumpUrl: '' }, backgroundImg: { - iswitch:false, + iswitch: false, bgImg: '', - bgColor:'#f2f3f4' + bgColor: '#f2f3f4' }, search: { iswitch: false, shape: 'circular', textAlign: 'center', borderColor: '#FFFAF5', - bgColor:'#FFD8BB', - fontColor:'#ADADAD', + bgColor: '#FFD8BB', + fontColor: '#ADADAD', placeholder: '请输入商品名称' }, title: { @@ -89,46 +89,46 @@ let couponProduct_list = { textAlign: 'left', fontColor: '#333', fontSize: 1, - comstyle:1, - pic:'' + comstyle: 1, + pic: '' }, bottomBar: { - iswitch:false, - navlist:[ + iswitch: false, + navlist: [ { - id:1, - iswitch:true, - name:'index', - pic:{ - show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png', - selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png' + id: 1, + iswitch: true, + name: 'index', + pic: { + show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png', + selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png' }, - text:'首页' + text: '首页' }, { - id:2, - iswitch:true, - name:'order', - pic:{ - show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png', - selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png' - }, - text:'订单' - }, - { - id:3, - iswitch:true, - name:'coupon', - pic:{ - show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png', - selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png' - }, - text:'我的券' - } + id: 2, + iswitch: true, + name: 'order', + pic: { + show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png', + selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png' + }, + text: '订单' + }, + { + id: 3, + iswitch: true, + name: 'coupon', + pic: { + show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png', + selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png' + }, + text: '我的券' + } ], - defaultText:'#A6A5B2', - selectText:'#FD6932', - background:'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png' + defaultText: '#A6A5B2', + selectText: '#FD6932', + background: 'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png' } } export default class edittemplate extends React.Component { @@ -136,6 +136,7 @@ export default class edittemplate extends React.Component { super(props) this.state = { mouldType: 1,//区分是系统模板还是落地页 0-系统模板 1-落地页新增 2-落地页编辑 + systemTitle: '',//控制系统模版标题回显 activeshow: true, //控制商品列表页活动说明显示与否 loading_visible: false,//保存加载效果 componentOfconfig: '',//选择组件库 @@ -168,14 +169,14 @@ export default class edittemplate extends React.Component { //开启 Bus.addListener('componentLib', (prop) => { let coupongoodsConfig = this.state.product_list - coupongoodsConfig[prop.name].iswitch= true + coupongoodsConfig[prop.name].iswitch = true this.setState({ product_list: coupongoodsConfig }) }) //关闭 Bus.addListener('componentLibClose', (prop) => { let coupongoodsConfig = this.state.product_list - coupongoodsConfig[prop].iswitch= false - this.setState({ product_list: coupongoodsConfig,componentOfconfig: '' }) + coupongoodsConfig[prop].iswitch = false + this.setState({ product_list: coupongoodsConfig, componentOfconfig: '' }) }) Bus.addListener('picture', (prop) => { let coupongoodsConfig = this.state.product_list @@ -193,7 +194,7 @@ export default class edittemplate extends React.Component { bgImgConfig.backgroundImg.bgColor = prop this.setState({ product_list: bgImgConfig }) }) - + Bus.addListener('shape', (prop) => { let searchConfig = this.state.product_list searchConfig.search.shape = prop @@ -235,7 +236,7 @@ export default class edittemplate extends React.Component { titleConfig.title.pic = prop this.setState({ product_list: titleConfig }) }) - + Bus.addListener('title', (prop) => { let titleConfig = this.state.product_list titleConfig.title.text = prop @@ -341,22 +342,22 @@ export default class edittemplate extends React.Component { coupon['land'].title = newEditor.title coupon['land'].sort = newEditor.sort - newEditor.exchangeList = exchangeList - newEditor.whiteList = whiteList - newEditor.coupon = coupon; + newEditor.exchangeList = exchangeList + newEditor.whiteList = whiteList + newEditor.coupon = coupon; if (template == 1) { //1-白名单 3-兑换码 this.setState({ model: newEditor.whiteList.land, product_list: newEditor.whiteList.product_list, product_detail: newEditor.whiteList.product_detail }) - } else if (template ==3){ + } else if (template == 3) { this.setState({ model: newEditor.exchangeList.land, product_list: newEditor.exchangeList.product_list, product_detail: newEditor.exchangeList.product_detail }) - }else{ + } else { this.setState({ model: newEditor.coupon.land, product_list: newEditor.coupon.product_list, @@ -368,7 +369,7 @@ export default class edittemplate extends React.Component { this.setState({ pagedisable: true }) } } else {//新增数据 - console.log(369,sessionStorage.getItem('editorConfig')); + console.log(369, sessionStorage.getItem('editorConfig')); let obj = {}, whiteList = {}, exchangeList = {}, coupon = {} let sourceObj = {//模板数据结构 land: model, @@ -452,7 +453,7 @@ export default class edittemplate extends React.Component { _.omit(infoWhite.land, ['title', 'sort']); formdata.exchange = infoExchange formdata.access_conf = infoWhite - formdata.coupon=infoCoupon + formdata.coupon = infoCoupon if (myInfoData) { //编辑 putSystemTemplate(myInfoData.id, formdata).then((res) => { @@ -495,7 +496,7 @@ export default class edittemplate extends React.Component { infoExchange.product_detail = exchangeState.product_detail delete infoExchange.land.sort delete infoExchange.land.title - switch(this.state.showType){ + switch (this.state.showType) { case 3://兑换码 formdata.exchange = infoExchange; break; @@ -564,8 +565,8 @@ export default class edittemplate extends React.Component { formdata.exchange = infoExchange } else if (this.state.showType == 1) { formdata.access_conf = infoExchange - }else{ - formdata.coupon=infoExchange; + } else { + formdata.coupon = infoExchange; } putTheme(myInfoData.id, formdata).then((res) => { handelResponse( @@ -588,27 +589,27 @@ export default class edittemplate extends React.Component { getlandConfig(c) { console.log(578); let landConfig = this.state.model - landConfig[c.attr]=c.value; + landConfig[c.attr] = c.value; this.setState({ model: landConfig }) } //商品列表页基础配置 - getGoodConfig(c){ + getGoodConfig(c) { let goodsConfig = this.state.product_list goodsConfig[c.attr] = c.value; this.setState({ product_list: goodsConfig }) } //商品列表页说明配置 - getexplainConfig(c){ + getexplainConfig(c) { let goodsConfig = this.state.product_list goodsConfig.describe[c.attr] = c.value this.setState({ product_list: goodsConfig }) } - //商品详情页基础配置 - getGoodDetailConfig(c){ - let detailpage = this.state.product_detail - detailpage[c.attr] = c.value; - this.setState({ product_detail: detailpage }) -} + //商品详情页基础配置 + getGoodDetailConfig(c) { + let detailpage = this.state.product_detail + detailpage[c.attr] = c.value; + this.setState({ product_detail: detailpage }) + } //商品详情页配置更新 getdetailActiveFn(c) { let detailpage = this.state.product_detail @@ -617,30 +618,39 @@ export default class edittemplate extends React.Component { } onmodelChange(e) { let editorData = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig'))) + if (this.state.mouldType == 0 && e.target.value != 3) { + this.setState({ systemTitle: editorData.exchangeList.land.title }); + } let holdData; - switch(e.target.value){ + switch (e.target.value) { case 1: - holdData= editorData.whiteList; + holdData = editorData.whiteList; break; case 3: - holdData= editorData.exchangeList + holdData = editorData.exchangeList break; default: - let {activeNavStatus,showType,model}=this.state; - if(activeNavStatus==1&&[4,8].includes(showType)){//落地页 - editorData.coupon.land=model; + let { activeNavStatus, showType, model,product_list,product_detail } = this.state; + if (activeNavStatus == 1 && [4, 8].includes(showType)) {//落地页 + editorData.coupon.land = model; } - sessionStorage.setItem('editorConfig',JSON.stringify(editorData)); - holdData= editorData.coupon + if (activeNavStatus == 2 && [4, 8].includes(showType)) {//列表页 + editorData.coupon.product_list = product_list; + } + if (activeNavStatus == 3 && [4, 8].includes(showType)) {//详情页 + editorData.coupon.product_detail = product_detail; + } + sessionStorage.setItem('editorConfig', JSON.stringify(editorData)); + holdData = editorData.coupon break; } let { land, product_list, product_detail } = holdData; - this.setState({ showType: e.target.value, activeNavStatus: 1,model: land, product_list, product_detail }) + this.setState({ showType: e.target.value, activeNavStatus: 1, model: land, product_list, product_detail }) } onPreview() { - let previewInfo=_.cloneDeep(this.state); - previewInfo.land=this.state.model; - this.setState({ previewData:previewInfo}) + let previewInfo = _.cloneDeep(this.state); + previewInfo.land = this.state.model; + this.setState({ previewData: previewInfo }) this.setState({ preview_visible: true, }) @@ -738,9 +748,7 @@ export default class edittemplate extends React.Component { addFn() { let item = this.state.activeNavStatus item++ - if (item > 3) { - item = 3 - } + if (item > 3) item = 3 this.setState({ activeNavStatus: item }) } @@ -765,7 +773,7 @@ export default class edittemplate extends React.Component { this.setState({ componentOfconfig: c }); } render() { - console.log(761,this.state); + console.log(761, this.state); return (
@@ -823,21 +831,16 @@ export default class edittemplate extends React.Component { ? 'activeNav thumbheader' : 'thumbheader' }> -

{this.state.model.title}

- {!this.state.model.top_image ? ( - - ) : ( - - )} - + {this.state.mouldType == 0 && this.state.showType != 3} +

{this.state.mouldType == 0 && this.state.showType != 3 ? this.state.systemTitle : this.state.model.title}

+
- - {[1,8].includes(this.state.showType)? ( + + {[1, 8].includes(this.state.showType) ? ( ) : ( - - )} + + )}
{this.state.model.describe && this.state.model.describe.bg_image ? ( - - ) : null} + + ) : null}
@@ -869,10 +872,10 @@ export default class edittemplate extends React.Component { : 'thumbheader' }>
- this.setState({ activeshow: true })} - goodsdata={this.state.product_list} - /> + this.setState({ activeshow: true })} + goodsdata={this.state.product_list} + />
@@ -886,7 +889,7 @@ export default class edittemplate extends React.Component { : 'thumbheader' }>
- { + { this.state.detailType == 1 ? this.setState({ detailactiveshow: true })} detaildata={this.state.product_detail} @@ -898,73 +901,36 @@ export default class edittemplate extends React.Component {
{/* 组件库 */} { - [4,8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? this.componentName(c)} /> : null + [4, 8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? this.componentName(c)} /> : null }
-
- {this.state.activeNavStatus == 1 ? ( -
- - -
- ) : this.state.activeNavStatus == 2 ? ( -
- - -
- ) : ( -
- - -
- )} -
+
+ + +
+
- {this.state.model.title} + {this.state.mouldType == 0 && this.state.showType != 3 ? this.state.systemTitle : this.state.model.title}
- {!this.state.model.top_image ? ( - - ) : ( - - )} +
- {[1,8].includes(this.state.showType) ? ( + {[1, 8].includes(this.state.showType) ? ( ) : ( - - )} + + )}
@@ -1022,29 +980,29 @@ export default class edittemplate extends React.Component { this.state.model.describe.type == 0 ? null : this.state .model.describe && this.state.model.describe.type == 1 ? ( + + ) : ( +
+ {this.state.model.describe && + this.state.model.describe.bg_image ? ( - ) : ( -
- {this.state.model.describe && - this.state.model.describe.bg_image ? ( - - ) : null} - {this.state.model.describe && - this.state.model.describe.content ? ( -
- ) : null} -
- )} + ) : null} + {this.state.model.describe && + this.state.model.describe.content ? ( +
+ ) : null} +
+ )}
@@ -1053,70 +1011,66 @@ export default class edittemplate extends React.Component { {this.state.activeNavStatus != 2 ? null : this.state.activeshow && this.state.product_list.describe.type == 2 && this.state.product_list.describe.content ? ( - this.showactiveIcon(c)} - goodsdata={this.state.product_list} - /> - ) : ( - this.setState({ activeshow: true })} - goodsdata={this.state.product_list} - /> - )} + this.showactiveIcon(c)} + goodsdata={this.state.product_list} + /> + ) : ( + this.setState({ activeshow: true })} + goodsdata={this.state.product_list} + /> + )} {this.state.activeNavStatus != 3 ? null : this.state .detailactiveshow && this.state.product_detail.describe.type == 2 && this.state.product_detail.describe.content ? ( - this.showactivedetail(c)} - goodsdata={this.state.product_detail} - /> - ) : ( -
-
- { - this.ondetailTypeChange(e) - }} - value={this.state.detailType}> - - 权益 + this.showactivedetail(c)} + goodsdata={this.state.product_detail} + /> + ) : ( +
+
+ { + this.ondetailTypeChange(e) + }} + value={this.state.detailType}> + + 权益 - - 立减金 + + 立减金 - -
- { - this.state.detailType == 1 ? this.setState({ detailactiveshow: true })} - detaildata={this.state.product_detail} - templateType={this.state.showType} - /> : - } +
- )} + { + this.state.detailType == 1 ? this.setState({ detailactiveshow: true })} + detaildata={this.state.product_detail} + templateType={this.state.showType} + /> : + } +
+ )}
-
+
-
- {[1,3].includes(this.state.showType)? ( -
- {this.state.activeNavStatus == 1 ? ( -

落地页设置

- ) : this.state.activeNavStatus == 2 ? ( -

商品列表页设置

- ) : ( -

商品详情页设置

- )} -
- ) : null +
+ {[1, 3].includes(this.state.showType) ? ( +
+ {this.state.activeNavStatus == 1 ? ( +

落地页设置

+ ) : this.state.activeNavStatus == 2 ? ( +

商品列表页设置

+ ) : ( +

商品详情页设置

+ )} +
+ ) : null } {this.state.showType == 3 ? ( this.state.activeNavStatus == 1 ? ( @@ -1166,13 +1120,13 @@ export default class edittemplate extends React.Component { /> ) : this.state.detailType == 1 ? ( this.state.activeNavStatus == 1 ? - this.getdetailActiveFn(c)} - setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} - />: this.getdetailActiveFn(c)} - setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}/> - ) :this.state.activeNavStatus == 1?:this.getReduceFontcolor(c)} setReduceButtoncolor={(c)=>this.getReduceButtoncolor(c)}/> + this.getdetailActiveFn(c)} + setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} + /> : this.getdetailActiveFn(c)} + setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} /> + ) : this.state.activeNavStatus == 1 ? : this.getReduceFontcolor(c)} setReduceButtoncolor={(c) => this.getReduceButtoncolor(c)} /> } {this.state.preview_visible ? ( @@ -1180,12 +1134,7 @@ export default class edittemplate extends React.Component { {this.state.loading_visible ? (
- +
) : null}
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index e8e4f163..de5547ef 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -465,7 +465,12 @@ .edittemplate { height: 100vh; background: #f3f4f5; - + .save_loading{ + position: fixed; + top: 30%; + left: 50%; + z-index: 999999; + } .zent-image-upload-item-thumb[data-zv="9.11.0"] { border: 1px dashed #f1f2f3; } @@ -491,7 +496,7 @@ #leftComponent { position: fixed; - width: 300px; + width: 330px; height: 100%; background: #fff; diff --git a/src/pages/exchangepage/edittemplate/reduce.js b/src/pages/exchangepage/edittemplate/reduce.js index 7f4f7b56..3e781f9e 100644 --- a/src/pages/exchangepage/edittemplate/reduce.js +++ b/src/pages/exchangepage/edittemplate/reduce.js @@ -13,6 +13,7 @@ export default class edittemplate extends React.Component { this.props.opendesc(true) } render() { + console.log(16,this.props.detaildata); return (
@@ -22,7 +23,7 @@ export default class edittemplate extends React.Component {
-

￥0.00

+

￥0.00

共省￥0.01

diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js index 34fbb20f..50cf58b1 100644 --- a/src/pages/exchangepage/template/preview.js +++ b/src/pages/exchangepage/template/preview.js @@ -326,7 +326,7 @@ export default class preview extends React.Component { ) : (
-

￥0.00

+

￥0.00

共省￥0.01