From d7b0c04388e91865865a6d42a63f33f9759a7ef4 Mon Sep 17 00:00:00 2001 From: Apple <> Date: Mon, 10 Oct 2022 16:13:21 +0800 Subject: [PATCH] =?UTF-8?q?style:=E8=B0=83=E6=95=B4=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E9=A2=84=E8=A7=88=E5=8C=BA=E5=9F=9F=E5=85=BC=E5=AE=B9?= =?UTF-8?q?=E6=80=A7=EF=BC=8C=E6=90=9C=E7=B4=A2=E6=A0=8F=EF=BC=8C=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E6=A0=8F=E7=9B=AE=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../couponCard/couponViewConfig/comm.less | 10 ++- .../couponCard/couponViewConfig/searchBar.js | 1 + .../edittemplate/goodstemplate.js | 56 ++++++++++------- .../edittemplate/goodstemplate.less | 19 +++--- src/pages/exchangepage/edittemplate/main.less | 4 +- src/pages/exchangepage/template/preview.js | 61 ++++++++++--------- src/pages/exchangepage/template/preview.less | 7 ++- 7 files changed, 96 insertions(+), 62 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less index 7ddffb3c..6d0eb21d 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less +++ b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less @@ -1,6 +1,14 @@ .searchBar-container { padding: 4px 0; box-sizing: border-box; + position: relative; + .preBtn{ + width: 28px; + height: 28px; + position:absolute; + top: 18px; + margin-left: 4%; + } } .searchBar { @@ -8,7 +16,7 @@ justify-content: center; padding: 0 10px; box-sizing: border-box; - + // flex: 1; i { width: 16px; } diff --git a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/searchBar.js b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/searchBar.js index 5979ece3..8cf638b0 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/searchBar.js +++ b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/searchBar.js @@ -9,6 +9,7 @@ export default class searchBar extends React.Component { let searchConfig=this.props.searchConfig; return (
+
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js index 3db26675..b698e240 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.js +++ b/src/pages/exchangepage/edittemplate/goodstemplate.js @@ -6,6 +6,7 @@ import SearchBarView from './couponCard/couponViewConfig/searchBar' //商品详 import BottomBarView from './couponCard/couponViewConfig/bottomBar' //底部栏 import { Sweetalert } from 'zent' import Bus from '@/assets/eventBus.js' + export default class edittemplate extends React.Component { constructor(props) { super(props) @@ -36,7 +37,7 @@ export default class edittemplate extends React.Component { content:

确认删除该模块？

, onConfirm: () => { this.setState({ selectDom: '' }); - Bus.emit('componentLib', {attr:selectDom,value:0}) + Bus.emit('componentLib', { attr: selectDom, value: 0 }) }, onCancel: () => { }, @@ -44,58 +45,71 @@ export default class edittemplate extends React.Component { }); } + //动态设置容器高度 + setHeight() { + let height = 653; + let searchHeight = 0; + let bottomHeight = 0; + let goodsConfig = this.props.goodsdata; + if (goodsConfig.search && goodsConfig.search.iswitch == 1) searchHeight = 60; + if (goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 1) bottomHeight = 50; + return `${height - searchHeight - bottomHeight}px` + } + render() { let goodsConfig = this.props.goodsdata; let naVisual = [] if (goodsConfig.bottomBar) { - naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch==1); + naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch == 1); } return (
-
- { - goodsConfig.search && goodsConfig.search.iswitch==1 ? - -
this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search">
: null - } - + { + goodsConfig.search && goodsConfig.search.iswitch == 1 ? +
this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"> +
: null + } +
+ { !goodsConfig.top_image ? : } { - goodsConfig.picture && goodsConfig.picture.iswitch==1 ?
this.customComponent(e, 'picture', 'marketing-tupian', '图片')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}>
: null + goodsConfig.picture && goodsConfig.picture.iswitch == 1 ?
this.customComponent(e, 'picture', 'marketing-tupian', '图片')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}>
: null } { - goodsConfig.title && goodsConfig.title.iswitch==1 && goodsConfig.title.comstyle == 1 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
{goodsConfig.title.text}
: null + goodsConfig.title && goodsConfig.title.iswitch == 1 && goodsConfig.title.comstyle == 1 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
{goodsConfig.title.text}
: null } { - goodsConfig.title && goodsConfig.title.iswitch==1 && goodsConfig.title.comstyle == 2 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}> + goodsConfig.title && goodsConfig.title.iswitch == 1 && goodsConfig.title.comstyle == 2 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
: null } { - goodsConfig.title && goodsConfig.title.iswitch==1 && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch==1 && goodsConfig.picture.img ?
: null + goodsConfig.title && goodsConfig.title.iswitch == 1 && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch == 1 && goodsConfig.picture.img ?
: null } { goodsConfig.list == 2 ? : goodsConfig.list == 3 ? : } + { + goodsConfig.list == 2 ? : null + } { goodsConfig.describe.type == 1 ? : goodsConfig.describe.type == 3 ?
: null } { goodsConfig.describe.type == 2 ? : null } - { - goodsConfig.list == 2 ? : null - } - { - goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch==1 ?
this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null - } + +
+ { + goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 1 ?
this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null + } { this.state.selectDom ?
{this.state.comName} diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index 9fab1178..622dda14 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -163,17 +163,16 @@ } } - .searchBar { - width: 80%; - margin: 2% 15%; - height: 40px; - line-height: 40px; - box-sizing: border-box; - border: 0; - border-radius: 20px; - } } - +.searchBar { + width: 80%; + margin: 2% 15%; + height: 40px; + line-height: 40px; + box-sizing: border-box; + border: 0; + border-radius: 20px; +} .detailstemplate { position: relative; background: #fff; diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index df678e69..3805293f 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -577,7 +577,9 @@ } .goodsList-item { - .goodstemplate { + pointer-events: none; + ::-webkit-scrollbar {display:none} + .goodstemplate_Xcenter { transform: scale(0.387); transform-origin: 0 0; } diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js index 96fd595e..33143f70 100644 --- a/src/pages/exchangepage/template/preview.js +++ b/src/pages/exchangepage/template/preview.js @@ -33,7 +33,22 @@ export default class preview extends React.Component { this.setState({ detailactiveshow: true }); } componentDidUpdate() { - document.querySelector("#previewbg").scrollTop = 0; + if(this.props.step == 2){ + document.querySelector(".preview-show .goodstemplate").scrollTop = 0; + }else{ + document.querySelector("#previewbg").scrollTop = 0; + } + + } + //动态设置容器高度 + setHeight() { + let height = '100%'; + let searchHeight = 0; + let bottomHeight = 0; + let goodsConfig = this.props.data.product_list; + if (goodsConfig.search && goodsConfig.search.iswitch == 1) searchHeight = '60px'; + if (goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 1) bottomHeight = '50px'; + return `calc(${height} - ${searchHeight} - ${bottomHeight})` } render() { let propsData = this.props.data; @@ -120,16 +135,12 @@ export default class preview extends React.Component { goodsdata={propsData.product_list} /> ) : ( -
- {goodsConfig.search && goodsConfig.search.iswitch ? ( +
+ {goodsConfig.search && goodsConfig.search.iswitch ? ( ) : null} - +
+ {!propsData.product_list.top_image ? ( )} - + {propsData.product_list.list == 2 ? ( + + ) : null} {propsData.product_list.describe.type == 1 ? ( ) : null} - {propsData.product_list.list == 2 ? ( - - ) : null} - {goodsConfig.bottomBar && +
+ {goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ? ( diff --git a/src/pages/exchangepage/template/preview.less b/src/pages/exchangepage/template/preview.less index b6591ec3..f7cc8bc1 100644 --- a/src/pages/exchangepage/template/preview.less +++ b/src/pages/exchangepage/template/preview.less @@ -173,7 +173,9 @@ width: 90%; margin: 30px 5%; } - +.previewComponent .preview-show{ + height: 100%; +} .previewComponent .preview-show .bottomactiveTip { width: 95%; margin-left: 2.5%; @@ -187,4 +189,7 @@ } .previewComponent .preview-show .bottomBtn { height: 40px; +} +.previewComponent .goodstemplate_view{ + height: 100%; } \ No newline at end of file