xiaoe_mp_npm 0.5.39 → 0.5.40-alpha2

package/src/coupon/components/CouponItem/index.scss

@@ -0,0 +1,239 @@
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin couponNewWrap{
+  width: 100%;
+  margin-bottom: vmin(26.4);
+  margin-left: auto;
+  margin-right: auto;
+
+  .couponNewV2 {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: vmin(224.4);
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+    border-radius: vmin(8);
+    background-color: #fff;
+
+    // 优惠券不可用样式
+    .disabledState{
+      background-color: #EEEEEE!important;
+      .couponValue{
+          background: #CDCDCD!important;
+      }
+    }
+  
+    .couponValue {
+        width: vmin(228);
+        height: vmin(224.4);
+        background: #FF821F !important;
+        box-sizing: border-box;
+        border-radius: vmin(8) 0 0 vmin(8);
+        .couponPrice {
+            position: relative;
+            width: 100%;
+            height: vmin(99);
+            margin: vmin(31) auto vmin(8);
+            text-align: center;
+            line-height: vmin(99);
+            font-size: vmin(97);
+            font-weight: 500;
+            color: #fff;
+            .fontSmall {
+                font-size: vmin(53) !important;
+            }
+            .fontLastSmall{
+                font-size: vmin(35) !important;
+            }
+  
+            .fixedfont{
+                font-size: vmin(26.4) !important;
+  
+            }
+            .fixedPercent{
+                font-size: vmin(35) !important;
+            }
+            span {
+                position: relative;
+                display: inline-block;
+            }
+             .discountFont,.coupon-symbol{
+                font-size: vmin(35);
+                margin-left: vmin(2);
+                margin-left: -vmin(1);
+            }
+  
+        }
+  
+        .couponUseCondition {
+            width: 100%;
+            overflow: hidden;
+            max-height: vmin(88);
+            line-height: vmin(40);
+            color:#fff;
+            text-align: center;
+        }
+  
+        .couponMaxDiscountNum {
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          margin-bottom: vmin(55);
+          font-size: vmin(10);
+        }
+    }
+  
+    .couponInfo {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: vmin(374);
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: vmin(18) 0 vmin(18) vmin(26.4);
+        border-bottom-right-radius: vmin(8);
+        border-top-right-radius: vmin(8);
+        color:#888888;
+        font-size: vmin(22);
+        text-align: left;
+        span{
+            display: inline-block;
+        }
+        .couponName {
+            width: 100%;
+            line-height: vmin(33);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: vmin(18);
+            color:#505050;
+            font-size: vmin(26.4);
+            font-weight:500;
+        }
+        .couponUseTime {
+            width: 100%;
+            height: vmin(31);
+            line-height: vmin(31);
+            font-size: vmin(22);
+        }
+        .noSuperposition{
+          color: #FF821F;
+        }
+        .moreInfo{
+            display: flex;
+            align-items: center;
+            padding: vmin(2) 0;
+        }
+        .operateBtn{
+            width: vmin(26.4);
+            height: vmin(26.4);
+            cursor: pointer;
+            margin-left: vmin(6.6);
+            background-size: 100% 100%;
+        }
+        .retract{
+            background: url('../../../common/assets/images/coupon/up.svg') center no-repeat;
+        }
+    }
+  
+    .couponState {
+        position: absolute;
+        right: 0;
+        width: vmin(132);
+        height: 100%;
+        .superImg{
+          width: vmin(88);
+          height: vmin(88);
+          background-size: 100% 100%;
+          position: absolute;
+          right: 0;
+        }
+        .coupon-choose-box {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            border-radius: 0 vmin(8) vmin(8) 0;
+  
+            .coupon-choose {
+                width: vmin(44);
+                height: vmin(44);
+                background-size: 100% 100%;
+                border-radius: 50%;
+                box-sizing: border-box;
+                // background: url('../../assets/images/couponSelect/coupon_select.png');
+                background-size: 100% 100%;
+            }
+  
+            .coupon-unchoosed {
+                border: vmin(4) solid #CCC;
+                background: none;
+            }
+        }
+    }
+  }
+
+  &:last-child {
+      margin-bottom: 0;
+  }
+
+  .detailInfo{
+      display: flex;
+      align-items: center;
+      padding: vmin(35);
+      background-color: #FFFAF4;
+      box-sizing: border-box;
+      border-radius: 0 0 0.53vmin 0.53vmin;
+      color: #505050;
+      font-size: vmin(22);
+      background: #FFFAF4;
+      text-align: left;
+
+      // 详细信息不可用优惠券时的字段
+      &.whiteBg{
+        background-color: #fff!important;
+      }
+
+      .disabledHint{
+        width: vmin(30);
+        height: vmin(30);
+        margin-right: vmin(8);
+        transform: translateY(vmin(6));
+      }
+
+      .instructions {
+        font-size: vmin(14);
+        color: #505050;
+        text {
+          white-space: pre-wrap;
+        }
+      }
+  }
+}
+
+
+.couponNewWrap {
+  @include couponNewWrap;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .couponNewWrap {
+    @include couponNewWrap;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .couponNewWrap {
+    @include couponNewWrap;
+  }
+}

package/src/coupon/components/CouponSelect/index.scss

@@ -0,0 +1,319 @@
+@import "../../../common/css/theme.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+
+@mixin popUp {
+    height: 80%;
+    border-radius: vmin(26) vmin(26) 0 0;
+}
+
+@mixin coupon-select-box {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 100vmin;
+    background-color: #F5F6F9;
+    border-radius: vmin(26) vmin(26) 0 0;
+    user-select: none;
+    &.vertical-screen {
+        height: 100%;
+    }
+    &.full-screen {
+        height: vmin(562);
+        overflow: scroll;
+        margin: vmin(97.5) 0;
+
+        .header-content {
+            position: absolute;
+            width: 90vmin;
+        }
+    }
+    .coupon-header {
+        display: flex;
+        flex-direction: column;
+        .header-content {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: vmin(90);
+            padding: 0 vmin(36);
+            top: 0;
+            left: 0;
+            font-size: vmin(32);
+            font-weight: 500;
+            background-color: #ffffff;
+            border-radius: vmin(26) vmin(26) 0 0;
+        }
+        .promo-code-wrap {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 vmin(36);
+            height: vmin(115);
+            background-color: #fff;
+            .promo-code-input {
+                width: vmin(470);
+                height: vmin(84);
+                padding: 0 vmin(22);
+                border: vmin(1) solid #DCDCDC;
+                border-right: none;
+                border-radius: vmin(8) 0 0 vmin(8);
+                color: #333;
+                font-size: vmin(30);
+                user-select: text;
+                box-shadow: none;
+            }
+            .promo-code-input::-webkit-input-placeholder {
+                color: #c8c8c8;
+            }
+            .promo-code-input:disabled {
+                color: #999;
+                background-color: #eee;
+            }
+            .promo-code-btn {
+                width: vmin(180);
+                height: vmin(84);
+                line-height: vmin(84);
+                margin: 0;
+                border: none;
+                border-radius: 0 vmin(8) vmin(8) 0;
+                text-align: center;
+                color: #fff;
+                font-size: vmin(27);
+                cursor: pointer;
+            }
+        }
+        .coupon-code-tip {
+            display: flex;
+            align-items: center;
+            padding: 0 vmin(36);
+            background-color: #fff;
+            height: vmin(40);
+            .tips-img {
+                margin-right: 0.88vmin;
+                width: vmin(30);
+                height: vmin(28);
+            }
+            text {
+                font-size: vmin(26);
+                color: #999;
+            }
+        }
+        .coupon-tab_warp{
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            font-size: vmin(35);
+            padding: 0 vmin(36);
+            font-weight: 700;
+            text-align: center;
+            background-color:#fff;
+            text{
+                display: block;
+            }
+            .tabItem{
+                position: relative;
+                width:50%;
+                height:vmin(106);
+                line-height: vmin(106);
+                text-align: center;
+                cursor: pointer;
+            }
+            .greyColor{
+                color: #999999;
+                font-size: vmin(30);
+                font-weight: normal;
+            }
+            .activeBorder{
+                position:absolute;
+                bottom:0;
+                left:50%;
+                transform: translateX(-50%);
+                width:vmin(44);
+                height:vmin(4);
+                background:#09BB07;
+                border-radius: vmin(4);
+            }
+        }
+        .coupon-tips {
+            display: flex;
+            background: #fff;
+            align-items: center;
+            justify-items: center;
+            padding: vmin(10) vmin(36);
+            justify-content: space-between;
+            .coupon-tips-font {
+                line-height: vmin(55);
+                font-size: vmin(26);
+                font-weight: 500;
+                color: #000;
+                .coupon-money-num {
+                    color: #FF4747;
+                }
+            }
+            .coupon-best-combination {
+                min-width: vmin(211);
+                height: vmin(53);
+                text-align: center;
+                line-height: vmin(55);
+                background: #FF821F;
+                border: 0;
+                margin: 0;
+                border-radius: vmin(44);
+                font-size: vmin(26);
+                font-weight: 500;
+                color: #fff;
+            }
+        }
+    }
+    &.vertical-screen {
+        .coupon-list {
+            overflow: scroll;
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+    .coupon-list {
+        box-sizing: border-box;
+        flex: 1; /* 撑满剩余容器高度 */
+        // overflow: scroll;
+        // -webkit-overflow-scrolling: touch;
+        text-align: center;
+        padding: vmin(26) vmin(35) 0;
+
+        .coupon-item {
+            position: relative;
+            display: flex;
+            margin-bottom: vmin(26);
+            border-radius: vmin(8);
+            background: #fff;
+        }
+
+        .not-use-coupon {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: vmin(114);
+            margin-bottom: vmin(26);
+            border-radius: vmin(8);
+            background: #fff;
+            .not-use-text {
+                width: vmin(558);
+                padding-left: vmin(35);
+                font-size: vmin(30);
+                color: #333;
+                text-align: left;
+            }
+            .choose-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: vmin(132);
+                height: 100%;
+                .choose-inner {
+                    width: vmin(40);
+                    height: vmin(40);
+                    border-radius: 50%;
+                    border: vmin(4) solid #ccc;
+                }
+                .coupon-not-used {
+                    border: none;
+                }
+            }
+        }
+
+    }
+    
+    .coupon-bottom {
+        height: vmin(100);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        .coupon-confirm-button {
+            height: vmin(80);
+            border-radius: vmin(48);
+            line-height: vmin(80);
+            text-align: center;
+            font-size: vmin(30);
+            font-weight: 500;
+            color: #fff;
+        }
+    }
+    &.vertical-screen {
+        .coupon-bottom {
+            padding: 0 vmin(36);
+            .coupon-confirm-button {
+                background: #FF821F;
+                width: vmin(754);
+            }
+        }
+        .promo-code-btn {
+            background-color: #FF821F !important;
+        }
+    }
+    &.full-screen {
+        .coupon-bottom {
+            width: 100%;
+            position: absolute;
+            bottom: 0;
+            .coupon-confirm-button {
+                background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+                width: vmin(712);
+            }
+        }
+        .promo-code-btn {
+            background: linear-gradient(270deg, rgba(254,101,0,1) 0%, rgba(255,65,2,1) 100%);
+        }
+    }
+    .coupon_emptypage{
+        text-align: center;
+        margin: vmin(15) 0 vmin(75) 0;
+        font-size: vmin(26);
+        color:#ADADB4;
+        .coupon_emptyImg{
+            margin-bottom: vmin(16);
+            width: vmin(188);
+            height: vmin(188);
+            background-size: 100% 100%;
+        }
+
+    }
+}
+
+.popUp {
+    @include popUp;
+}
+
+.coupon-select-box {
+    @include coupon-select-box;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+    $deviceWidth: 1536 !global;
+
+    .popUp {
+        @include popUp;
+    }
+
+    .coupon-select-box {
+        @include coupon-select-box;
+    }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+    $deviceWidth: 1536 !global;
+
+    .popUp {
+        @include popUp;
+    }
+    
+    .coupon-select-box {
+        @include coupon-select-box;
+    }
+}