}
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index a026cda1..b5768430 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -1,68 +1,55 @@
-import React from 'react';
+import React from 'react';
import "./main.less"
import "../../../assets/comm.css"
import './goodstemplate.less'
import SearchBarView from './couponCard/couponViewConfig/searchBar' //商品详情搜索栏
import BottomBarView from './couponCard/couponViewConfig/bottomBar' //底部栏
-import {Sweetalert} from 'zent'
+import { Sweetalert } from 'zent'
import Bus from '@/assets/eventBus.js'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
- this.state={
- clientY:0,
- selectDom:'',
- icon:'',
- comName:''
+ this.state = {
+ clientY: 0,
+ selectDom: '',
+ icon: '',
+ comName: ''
}
}
opendescFn() {
this.props.opendesc(true)
}
- customComponent(e,name,icon,comName){
+ customComponent(e, name, icon, comName) {
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
-
- let b=this.refs[name];
-
- let offset_top=this.refs[name].getBoundingClientRect().top;
-
- this.setState({clientY:(offset_top-125),selectDom:name,icon:icon,comName});
-
- if(name=='searchBar'){
-
- this.setState({clientY:0});
-
+ let offset_top = this.refs[name].getBoundingClientRect().top;
+ console.log(25, offset_top - 125);
+ this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon, comName });
+ if (name == 'searchBar') {
+ this.setState({ clientY: 0 });
}
-
- if(name=='bottomBar'){
-
- this.setState({clientY:600});
-
- }
-
}
- deleteFn(){
+ deleteFn() {
- let selectDom=this.state.selectDom;//需删除组件名称
+ let selectDom = this.state.selectDom;//需删除组件名称
Sweetalert.confirm({
- title:'确认信息',
+ title: '确认信息',
content:
,
- onConfirm:()=>{
+ onConfirm: () => {
- this.setState({selectDom:''});
+ this.setState({ selectDom: '' });
- Bus.emit('componentLibClose',selectDom)
+ Bus.emit('componentLibClose', selectDom)
},
- onCancel:()=>{
+ onCancel: () => {
+
-
},
@@ -75,104 +62,104 @@ export default class edittemplate extends React.Component {
render() {
- let goodsConfig=this.props.goodsdata;
- console.log(48,goodsConfig);
- let naVisual=[]
- if(goodsConfig.bottomBar){
- naVisual=goodsConfig.bottomBar.navlist.filter(item=>item.iswitch);
+ let goodsConfig = this.props.goodsdata;
+ console.log(48, goodsConfig);
+ let naVisual = []
+ if (goodsConfig.bottomBar) {
+ naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch);
}
return (
-
+
+
+ {
+
+ goodsConfig.search && goodsConfig.search.iswitch ?
+
+
this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search">
: null
+
+ }
+
+
+
+ {
+
+ !goodsConfig.top_image ?
:
+
+ }
+
+ {
+
+ goodsConfig.picture && goodsConfig.picture.iswitch ?
this.customComponent(e, 'picture', 'marketing-tupian', '图片')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}>
: null
+
+ }
+
+ {
+
+ goodsConfig.title && goodsConfig.title.iswitch && 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 && goodsConfig.title.comstyle == 2 ?
this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
+
+
: null
+
+ }
+
+ {
+
+ goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch && goodsConfig.picture.img ?
: null
+
+ }
+
+ {
+
+ goodsConfig.list == 2 ?
: goodsConfig.list == 3 ?
:
+
+ }
+
+
+
+ {
+
+ goodsConfig.describe.type == 1 ?
: goodsConfig.describe.type == 3 ?
: null
+
+ }
+
+ {
+
+ goodsConfig.describe.type == 2 ?
: null
+
+ }
+ {
+
+ goodsConfig.list == 2 ?
: null
+
+ }
+ {
+ goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ?
this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}>
: null
+ }
+
+
+
{
- goodsConfig.search&&goodsConfig.search.iswitch?
+ this.state.selectDom ?
-
this.customComponent(e,'search','marketing-sousuolan-','搜索栏')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search">
:null
+
{this.state.comName}
+
+
|
+
+
删除
+
+
: null
}
-
-
-
- {
-
- !goodsConfig.top_image ?
:
-
- }
-
- {
-
- goodsConfig.picture&&goodsConfig.picture.iswitch?
this.customComponent(e,'picture','marketing-tupian','图片')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}>
:null
-
- }
-
- {
-
- goodsConfig.title&&goodsConfig.title.iswitch&&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&&goodsConfig.title.comstyle==2?
this.customComponent(e,'title','marketing-fuwenbenkuang','标题')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
-
-
:null
-
- }
-
- {
-
- goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&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.bottomBar&&goodsConfig.bottomBar.iswitch&&naVisual.length>1?
this.customComponent(e,'bottomBar','marketing-list','底部栏')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}>
:null
- }
-
- {
-
- this.state.selectDom?
-
- {this.state.comName}
-
- |
-
- 删除
-
-
:null
-
- }
-
-
-
)
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index 999e664a..9fab1178 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.less
@@ -3,6 +3,9 @@
height: 653px;
background: #F2F7F8;
position: relative;
+ overflow-y: auto;
+ overflow-x: hidden;
+
>.preBtn {
position: absolute;
width: 28px;
@@ -25,9 +28,11 @@
padding: 0 13px;
display: flex;
}
- .parting-line{
- height: 50px;
- }
+
+ .parting-line {
+ height: 50px;
+ }
+
>.goodsPic,
>.goodsPicMatrax {
width: 349px;
@@ -36,6 +41,7 @@
position: relative;
margin-top: -50px;
}
+
>.goodsPicMatrax {
height: auto;
}
@@ -49,12 +55,7 @@
background: #E8EAEC;
border-radius: 44px;
height: 44px;
- margin: 30px 0 0 13px;
-
- &.bottomBtn {
- position: fixed;
- top: 695px;
- }
+ margin: 30px 0 30px 13px;
}
.susactive_tip {
@@ -69,7 +70,7 @@
.bottomactiveTip {
width: 375px;
margin: 10px 0;
- padding: 24px 20px 60px;
+ padding: 24px 20px;
box-sizing: border-box;
background: #fff;
border-radius: 4px;
@@ -79,41 +80,15 @@
p {
width: 335px;
}
- }
- .delete-component {
- display: flex;
- position: absolute;
- top: 0;
- right: -36px;
- -ms-flex-align: center;
- align-items: center;
- padding: 6px 8px;
- border-radius: 2px;
- background: #fff;
- font-size: 14px;
- -webkit-transform: translateX(73px);
- transform: translateX(70px);
- &:before{
- position: absolute;
- left: 0;
- top: 50%;
- border-width: 5px 6px 5px 0;
- border-style: solid;
- border-color: transparent #fff transparent transparent;
- content: "";
- -webkit-transform: translate3d(-100%,-50%,0);
- transform: translate3d(-100%,-50%,0);
- }
- .split{
- padding: 0 5px;
- color: #b4b8b4;
+ .fixbottom {
+ bottom: 0 !important;
}
+
+
}
- .fixbottom{
- bottom: 0!important;
- }
- .payBtn-view{//优惠券支付模块
+ .payBtn-view {
+ //优惠券支付模块
width: 100%;
height: 60px;
position: absolute;
@@ -121,59 +96,64 @@
left: 0;
z-index: 9;
background: #D7D7D7;
- .coupon-price{
+ &.good-Btnview{
+ position: static;
+ margin-top: 50px;
+ }
+ .coupon-price {
display: flex;
flex-direction: column;
flex: 1;
text-align: left;
padding-left: 15px;
- :first-of-type{
+
+ :first-of-type {
color: #FF5533;
- span{
+
+ span {
font-size: 24px;
font-weight: bold;
}
-
+
}
}
- .payBtn{
+
+ .payBtn {
width: 100px;
height: 100%;
border: 0;
}
-
-
- }
-}
-.goodstemplate {
- // overflow-y: auto;
-.selectBorder {
- z-index: 2;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border: 2px solid #1985ff;
- width: 100%;
- height: auto;
- background: rgba(25,133,255,.2);
- content: "";
-}
-.title-pic{
- height:40px;
-}
-.selectBottomBorder {
- position: absolute;
- left: 0;
- bottom: 0;
- z-index: 2;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- border: 2px solid #1985ff;
- width: 100%;
- height: 54px;
- background: rgba(25,133,255,.2);
- content: "";
-}
+
+ }
+
+
+ .selectBorder {
+ z-index: 2;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border: 2px solid #1985ff;
+ width: 100%;
+ height: auto;
+ background: rgba(25, 133, 255, .2);
+ content: "";
+ }
+
+ .title-pic {
+ height: 40px;
+ }
+
+ .selectBottomBorder {
+ z-index: 2;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ border: 2px solid #1985ff;
+ width: 100%;
+ height: 54px;
+ background: rgba(25, 133, 255, .2);
+ content: "";
+ }
+
.bottomactiveTip {
width: 350px;
margin: 12.5px;
@@ -189,7 +169,7 @@
height: 40px;
line-height: 40px;
box-sizing: border-box;
- border:0;
+ border: 0;
border-radius: 20px;
}
}
@@ -197,6 +177,9 @@
.detailstemplate {
position: relative;
background: #fff;
+ overflow-y: auto;
+ overflow-x: hidden;
+
.detail_bottomImg {
width: 100%;
padding-bottom: 30px;
@@ -281,10 +264,12 @@
font-size: 16px;
}
}
-.sort_number{
- border: 0!important;
- border-bottom: 1px solid #e0e0e0!important;
+
+.sort_number {
+ border: 0 !important;
+ border-bottom: 1px solid #e0e0e0 !important;
}
+
//商品详情页区分立减金/权益
.details_type {
position: relative;
@@ -318,22 +303,67 @@
.picture {
width: 100%;
}
+
.goodstemplate::-webkit-scrollbar {
width: 6px;
-
+
+}
+
+.goodstemplate::-webkit-scrollbar-track {
+
+ background-color: #F3F4F5;
+ border-radius: 4px;
+}
+
+.goodstemplate::-webkit-scrollbar-thumb {
+ background-color: #C1C1C1;
+ border-radius: 4px;
+ opacity: 0.7;
+ width: 6px;
+ height: 4px;
+}
+
+
+.goodstemplate_Xcenter {
+ width: 375px;
+ top: 65px;
+ margin: 0 auto;
+ position: relative;
+
+ .delete-component {
+ display: flex;
+ position: absolute;
+ top: 0;
+ right: -36px;
+ -ms-flex-align: center;
+ align-items: center;
+ padding: 6px 8px;
+ border-radius: 2px;
+ background: #fff;
+ font-size: 14px;
+ -webkit-transform: translateX(73px);
+ transform: translateX(70px);
+
+ &:before {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ border-width: 5px 6px 5px 0;
+ border-style: solid;
+ border-color: transparent #fff transparent transparent;
+ content: "";
+ -webkit-transform: translate3d(-100%, -50%, 0);
+ transform: translate3d(-100%, -50%, 0);
+ }
+
+ .split {
+ padding: 0 5px;
+ color: #b4b8b4;
+ }
}
-
- .goodstemplate::-webkit-scrollbar-track {
-
- background-color:#F3F4F5;
- border-radius: 4px;
- }
-
- .goodstemplate::-webkit-scrollbar-thumb {
- background-color:#C1C1C1;
- border-radius: 4px;
- opacity: 0.7;
- width: 6px;
- height: 4px;
- }
\ No newline at end of file
+}
+
+.goodsList-item .goodstemplate_Xcenter {
+ top: 0;
+}
\ No newline at end of file
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index 2f19bb69..fecd6dcc 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@@ -13,7 +13,7 @@ import CouponLandingForm from './couponCard/landPage'; //优惠券落地页表
import CouponComLib from './couponCard/goodsPage/componentLib/main'; //优惠券组件库
import CouponGoodsListForm from './couponCard/goodsPage/config/main'; //优惠券商品列表页
import DetailsPage from './exchange/detailsPage'; //商品详情form页面
-import Detailstemplate from './exchange/detailstemplate'
+import Detailstemplate from './detailstemplate'
import Descteplate from './goodsdesc'
import GoodsForm from './exchange/goodsPage'; //商品页表单
import Goodstemplate from './goodstemplate'
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less
index de5547ef..de05641e 100644
--- a/src/pages/exchangepage/edittemplate/main.less
+++ b/src/pages/exchangepage/edittemplate/main.less
@@ -16,6 +16,7 @@
}
.xj-center-small {
+ z-index: 4;
margin: 0 430px 0 470px;
}
@@ -432,7 +433,7 @@
div {
width: 100%;
- padding: 0 25px;
+ padding: 25px;
line-height: 1.5rem;
font-size: 13px;
box-sizing: border-box;
diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js
index 50cf58b1..96fd595e 100644
--- a/src/pages/exchangepage/template/preview.js
+++ b/src/pages/exchangepage/template/preview.js
@@ -206,23 +206,7 @@ export default class preview extends React.Component {
}
/>
)}
- {propsData.product_list.list == 2 ? (
-
- ) : null}
+
{propsData.product_list.describe.type == 1 ? (
) : null}
+ {propsData.product_list.list == 2 ? (
+
+ ) : null}
{goodsConfig.bottomBar &&
goodsConfig.bottomBar.iswitch &&
naVisual.length > 1 ? (
@@ -315,7 +316,7 @@ export default class preview extends React.Component {
) : null}
{[1, 3].includes(this.props.pageType) ? (