Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

2022-09-22 18:32:07 +08:00 · 2022-09-22 18:32:07 +08:00 · 0b2b8647b4
parent 0be89c1ed6 571edf3c51
commit 0b2b8647b4
8 changed files with 271 additions and 254 deletions
--- a/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less
+++ b/src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less
@ -28,8 +28,8 @@
    width: 100%;
    height: 50px;
    background: #f00;
-    position: absolute;
-    bottom: 0;
+    // position: absolute;
+    // bottom: 0;
    display: flex;
    justify-content: space-evenly;
 }
--- a/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js
+++ b/src/pages/exchangepage/edittemplate/exchange/detailstemplate.js
@ -1,7 +1,7 @@
 import React from 'react';
-import  "../main.less"
+import  "./main.less"
 import "@/assets/comm.css"
-import '../goodstemplate.less'
+import './goodstemplate.less'
 export default class edittemplate extends React.Component{
  constructor(props){
    super(props)
@ -10,6 +10,7 @@ export default class edittemplate extends React.Component{
    this.props.opendesc(true)
  }
  render(){
+    let detailInfo=this.props.detaildata;
    return(
      <div className="editor-main detailstemplate">
 	       <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
@ -18,19 +19,19 @@ export default class edittemplate extends React.Component{
        <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
+         detailInfo.describe.bg_image&&detailInfo.describe.type==1?<img className="detail_bottomImg" src={detailInfo.describe.bg_image}/>:detailInfo.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:detailInfo.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
+          detailInfo.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
        }
        {
-          [1,3].includes(this.props.templateType)?<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>:
-          <div className="dflexaj payBtn-view">
+          [1,3].includes(this.props.templateType)?<button className={detailInfo.describe.type == 1 && detailInfo.describe.bg_image || detailInfo.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{background:detailInfo.button_color,color:detailInfo.font_color}}>立即兑换</button>:
+          <div  className={'dflexaj payBtn-view good-Btnview'}>
            <div className="coupon-price">
              <p>￥<span>0.00</span></p>
              <p>共省￥0.01</p>
            </div>
-            <button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button>
+            <button className="payBtn" style={{background:detailInfo.button_color,color:detailInfo.font_color}}>立即支付</button>
          </div>
        }
        
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@ -21,25 +21,12 @@ export default class edittemplate extends React.Component {
  }
  customComponent(e, name, icon, comName) {
    //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
-
-    let b=this.refs[name];
-
    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() {
@ -84,8 +71,8 @@ export default class edittemplate extends React.Component {

    return (

-      <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
-
+      <div className="goodstemplate_Xcenter" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
+        <div className="goodstemplate">
          {

            goodsConfig.search && goodsConfig.search.iswitch ?
@ -133,13 +120,7 @@ export default class edittemplate extends React.Component {

          }

-        {

-          goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
-          {goodsConfig.search?'立即购买':'立即兑换'}
-          </button> : null
-
-        }

          {

@ -152,11 +133,20 @@ export default class edittemplate extends React.Component {
            goodsConfig.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

          }
+          {

+            goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
+              {goodsConfig.search ? '立即购买' : '立即兑换'}
+            </button> : null
+
+          }
          {
            goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
          }

+
+        </div>
+
        {

          this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
@ -170,9 +160,6 @@ export default class edittemplate extends React.Component {
          </div> : null

        }
-
-        
-
      </div>

    )
--- 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;
  }
+
  >.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;
    }
-  .payBtn-view{//优惠券支付模块
+
+    
+  }
+  .payBtn-view {
+    //优惠券支付模块
    width: 100%;
    height: 60px;
    position: absolute;
@ -121,14 +96,20 @@
    left: 0;
    z-index: 9;
    background: #D7D7D7;
+    &.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 {
        color: #FF5533;
+
        span {
          font-size: 24px;
          font-weight: bold;
@ -136,6 +117,7 @@

      }
    }
+
    .payBtn {
      width: 100px;
      height: 100%;
@ -144,10 +126,8 @@


  }
-}

-.goodstemplate {
-  // overflow-y: auto;
+
  .selectBorder {
    z-index: 2;
    -webkit-box-sizing: border-box;
@ -158,13 +138,12 @@
    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;
@ -174,6 +153,7 @@
    background: rgba(25, 133, 255, .2);
    content: "";
  }
+
  .bottomactiveTip {
    width: 350px;
    margin: 12.5px;
@ -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;
 }
+
 //商品详情页区分立减金/权益
 .details_type {
  position: relative;
@ -318,6 +303,7 @@
 .picture {
  width: 100%;
 }
+
 .goodstemplate::-webkit-scrollbar {

  width: 6px;
@ -337,3 +323,47 @@
  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;
+    }
+  }
+}
+
+.goodsList-item .goodstemplate_Xcenter {
+  top: 0;
+}
--- 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'
--- 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;
--- 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 ? (
-                  <button
-                    className={
-                      (propsData.product_list.describe.type == 1 &&
-                        propsData.product_list.describe.bg_image) ||
-                      propsData.product_list.describe.type == 3
-                        ? "exchageBtn"
-                        : "exchageBtn"
-                    }
-                    style={{
-                      color: propsData.product_list.font_color,
-                      background: propsData.product_list.button_color,
-                    }}
-                  >
-                    立即兑换
-                  </button>
-                ) : null}
+                
                {propsData.product_list.describe.type == 1 ? (
                  <img
                    src={propsData.product_list.describe.bg_image}
@ -251,6 +235,23 @@ export default class preview extends React.Component {
                    }
                  />
                ) : null}
+                {propsData.product_list.list == 2 ? (
+                  <button
+                    className={
+                      (propsData.product_list.describe.type == 1 &&
+                        propsData.product_list.describe.bg_image) ||
+                      propsData.product_list.describe.type == 3
+                        ? "exchageBtn bottomBtn"
+                        : "exchageBtn"
+                    }
+                    style={{
+                      color: propsData.product_list.font_color,
+                      background: propsData.product_list.button_color,
+                    }}
+                  >
+                    立即兑换
+                  </button>
+                ) : 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) ? (
                  <button
-                    className="exchangeBtn"
+                  className={propsData.product_detail.describe.type == 1 && propsData.product_detail.describe.bg_image || propsData.product_detail.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"}
                    style={{
                      background: propsData.product_detail.button_color,
                      color: propsData.product_detail.font_color,
@ -324,7 +325,7 @@ export default class preview extends React.Component {
                    立即兑换
                  </button>
                ) : (
-                  <div className="dflexaj payBtn-view">
+                  <div className="dflexaj payBtn-view good-Btnview">
                    <div className="coupon-price">
                     <p>￥<span>0.00</span></p>
                      <p>共省￥0.01</p>
--- a/src/pages/exchangepage/template/preview.less
+++ b/src/pages/exchangepage/template/preview.less
@ -113,7 +113,7 @@
 	.textTip_land {
 		position: absolute;
 		top: 0;
-		padding: 70px 25px 0;
+		padding: 70px 25px 10px;
 		line-height: 1.5rem;
 		font-size: 13px;
 		box-sizing: border-box;
@ -186,8 +186,5 @@
 	overflow: hidden;
 }
 .previewComponent .preview-show .bottomBtn {
-	width: 200px;
-	left: 50%;
-	margin-left: -100px;
 	height: 40px;
 }