xiaoe_mp_npm 1.0.10 → 1.0.12-alpha1

package/miniprogram_dist/CouponList/components/CouponItem/index.scss

@@ -7,12 +7,72 @@ $deviceWidth: 750;
 // 互动页优惠券卡片样式
 @mixin styleType1_wrapper {
   &.pop-card {
-    width: vmin(484);
+    width: vmin(280);
     margin-bottom: 0;
+    position: relative;
+    height: 100%;
+    &.vertical-screen {
+      width: vmin(280);
+      height: 100%;
+      .coupon_style1 {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: 100%;
+        min-height: vmin(400);
+        background-image: none;
+        .couponValue {
+          padding: vmin(40) vmin(16) vmin(16) vmin(16);
+          width: 100%;
+          height: vmin(200);
+          background: rgba(255, 120, 31, 1);
+          color: #fff;
+          border-radius: vmin(16) vmin(16) 0 0;
+        }
+    
+        .couponInfo {
+          flex: 1;
+          background: rgba(255, 255, 255, 1);
+          padding: vmin(16) vmin(16) vmin(30) vmin(16);
+          border-radius: 0 0 vmin(16) vmin(16);
+    
+          .couponName {
+            height: vmin(32);
+            line-height: vmin(32);
+            font-size: vmin(28);
+            width: vmin(244);
+            font-weight: 500;
+            margin-bottom: vmin(8);
+            -webkit-line-clamp: 1;
+
+          }
+        }
+    
+        .couponState {
+          position: absolute;
+          left: vmin(16);
+          top: 95%;
+          transform: translateY(-95%);
+          height: vmin(48);
+          line-height: vmin(48);
+          border-radius: vmin(8);
+    
+          &.fullscreen-btn {
+            width: 90%;
+          }
+    
+          &.vertical-btn {
+            width: 88%;
+          }
+    
+        }
+      }
+    }
+    
   }
 
   &.vertical-screen {
-    width: vmin(476);
+    width: vmin(686);
     margin: 0 auto;
 
     &.not-pop-card {
@@ -20,7 +80,7 @@ $deviceWidth: 750;
     }
 
     .coupon_style1 {
-      height: vmin(184);
+      height: vmin(190);
     }
   }
 
@@ -37,28 +97,29 @@ $deviceWidth: 750;
     display: flex;
     position: relative;
     width: 100%;
-
+    background: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lw67cw3y0qse.png') center no-repeat;
+    background-size: 100% 100%;
     // height: vmin(184);
     .couponValue {
-      padding: vmin(16);
-      min-width: vmin(186);
-      height: 100%;
-      background: rgba(255, 120, 31, 1);
-      color: #fff;
+      width: vmin(192);
+      color: #FF5429;
       // padding: vmin(16);
+      box-sizing: border-box;
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
       align-items: center;
-      box-sizing: border-box;
-      border-radius: vmin(16) 0 0 vmin(16);
-
+      justify-content: center;
+      position: relative;
+      .giftCouponName{
+        font-size: vmin(36);
+        font-weight: 500;
+      }
       .couponPriceWrap {
         position: relative;
         display: flex;
         flex-direction: row;
         align-items: baseline;
-        font-weight: 700;
+        font-weight: 600;
 
         .coupon-symbol {
           margin-right: vmin(4);
@@ -77,42 +138,48 @@ $deviceWidth: 750;
       }
 
       .couponUseCondition {
-        color: rgba(255, 255, 255, 1);
+        color: #FF5429;
         font-size: vmin(24);
         font-weight: 500;
         font-family: "PingFang SC";
         text-align: center;
         line-height: vmin(32);
+        padding-top: vmin(16);
       }
     }
 
     .couponInfo {
+      position: relative;
       display: flex;
       flex-direction: column;
-      justify-content: flex-start;
-      width: vmin(510);
+      justify-content: space-around;
+      max-width: vmin(340);
       height: 100%;
       box-sizing: border-box;
-      background: rgba(255, 255, 255, 1);
-      padding: vmin(16) 0 vmin(16) vmin(16);
-      color: rgba(153, 153, 153, 1);
+      padding: vmin(16) 0 vmin(16) vmin(26);
+      color: #999999;
       font-size: vmin(20);
       line-height: vmin(24);
       font-weight: 400;
       text-align: left;
-      border-radius: 0 vmin(16) vmin(16) 0;
 
       .couponName {
-        color: rgba(51, 51, 51, 1);
-        font-size: vmin(24);
-        line-height: vmin(32);
-        height: vmin(32);
-        width: vmin(246);
-        font-weight: 700;
-        margin-bottom: vmin(8);
+        width: 100%;
+        line-height: vmin(40);
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        margin-bottom: 2.13vmin;
+        color: #333333;
+        font-size: vmin(28);
+        font-weight: 500;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .moreCouponInfo{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
 
       .couponUseHint {
@@ -120,7 +187,7 @@ $deviceWidth: 750;
       }
 
       .couponUseTime {
-        margin-bottom: 4.8vmin;
+        // margin-bottom: 4.8vmin;
       }
 
       .moreInfo {
@@ -140,12 +207,17 @@ $deviceWidth: 750;
     .couponState {
       position: absolute;
       right: vmin(16);
-      bottom: vmin(16);
+      top: 50%;
+      transform: translateY(-50%);
+      // width: vmin(100);
       height: vmin(48);
       line-height: vmin(48);
-      border-radius: vmin(8);
-      border: 0;
-      background: rgba(255, 120, 31, 1);
+      background: #FF5429;
+      border-radius: vmin(48);
+      text-align: center;
+      color: #fff;
+      border: none;
+      cursor: pointer;
 
       &.fullscreen-btn {
         width: vmin(136);
@@ -225,7 +297,27 @@ $deviceWidth: 750;
       width: 100%;
       height: 100%;
     }
-
+    .giftCouponInfo{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: baseline;
+      color: #FF5429;
+      position: relative;
+      height: 100%;
+      width: vmin(272);
+      font-size: vmin(20);
+      line-height: vmin(24);
+      font-weight: 400;
+      padding: 0 vmin(16);
+      .giftCouponName{
+        font-size: vmin(36);
+        font-weight: 500;
+        height: vmin(32);
+        line-height: vmin(32);
+        margin-bottom: vmin(40);
+      }
+    }
     .couponInfo {
       display: inline-flex;
       flex-direction: column;
@@ -243,7 +335,7 @@ $deviceWidth: 750;
         flex-direction: row;
         align-items: flex-end;
         height: vmin(48);
-
+        
         .couponPriceWrap {
           position: relative;
           display: flex;
@@ -341,16 +433,17 @@ $deviceWidth: 750;
 
 @mixin styleType1_wrapper-v {
   &.vertical-screen {
-    width: vmin(264);
+    width: vmin(686);
     height: vmin(364);
     margin: 0 auto;
 
     &.not-pop-card {
+      width: vmin(686);
       margin-bottom: 0;
     }
 
     .coupon_style1 {
-      height: vmin(172);
+      height: vmin(190);
     }
   }
 
@@ -364,31 +457,33 @@ $deviceWidth: 750;
   }
 
   .coupon_style1 {
-    display: block;
-    position: static;
+    display: flex;
+    position: relative;
     width: 100%;
-
+    background: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lw67cw3y0qse.png') center no-repeat;
+    background-size: 100% 100%;
     // height: vmin(184);
     .couponValue {
       padding: vmin(25) 0;
       min-width: unset;
-      height: vmin(172);
-      background: rgba(255, 120, 31, 1);
-      color: #fff;
+      color: #FF5429;
       // padding: vmin(16);
       display: flex;
       flex-direction: column;
-      justify-content: space-around;
       align-items: center;
-      box-sizing: border-box;
-      border-radius: vmin(16) vmin(16) 0 0;
-
+      justify-content: center;
+      position: relative;
+      
+      .giftCouponName{
+        font-size: vmin(36);
+        font-weight: 500;
+      }
       .couponPriceWrap {
         position: relative;
         display: flex;
         flex-direction: row;
-        align-items: center;
-        font-weight: 700;
+        align-items: baseline;
+        font-weight: 600;
 
         .coupon-symbol {
           margin-right: vmin(4);
@@ -438,14 +533,12 @@ $deviceWidth: 750;
       width: 100%;
       height: vmin(192);
       box-sizing: border-box;
-      background: rgba(255, 255, 255, 1);
       padding: vmin(16);
-      color: rgba(153, 153, 153, 1);
+      color: #999999;
       font-size: vmin(20);
       line-height: vmin(20);
       font-weight: 400;
       text-align: left;
-      border-radius: 0 0 vmin(16) vmin(16);
 
       .couponName {
         color: #333;
@@ -453,11 +546,14 @@ $deviceWidth: 750;
         line-height: vmin(32);
         height: vmin(32);
         width: vmin(232);
-        font-weight: 700;
+        font-weight: 500;
         margin-bottom: vmin(8);
         overflow: hidden;
-        white-space: nowrap;
+        // white-space: nowrap;
         text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
 
       .couponUseHint {
@@ -472,12 +568,17 @@ $deviceWidth: 750;
     .couponState {
       position: absolute;
       right: vmin(16);
-      bottom: vmin(16);
+      top: 50%;
+      transform: translateY(-50%);
+      // width: vmin(100);
       height: vmin(48);
       line-height: vmin(48);
-      border-radius: vmin(8);
-      border: 0;
-      background: rgba(255, 120, 31, 1);
+      background: #FF5429;
+      border-radius: vmin(48);
+      text-align: center;
+      color: #fff;
+      border: none;
+      cursor: pointer;
 
       // &.fullscreen-btn {
       //   width: vmin(136);

package/miniprogram_dist/CouponList/components/CouponItem/index.wxml

@@ -6,7 +6,10 @@
   catchtap
 >
   <view class="coupon_style1" catchtap="getCouponFunction">
-    <view class="couponValue">
+    <view wx:if="{{item.coupon_type == 6}}" class="couponValue">
+      <view class="giftCouponName">礼品券</view>
+    </view>
+    <view wx:else class="couponValue">
       <view class="couponPriceWrap {{item.discount_way == 2 && aliveMode?'couponPriceWrap-discount-v':''}}">
         <!-- discount_way优惠方式 1-满减券 2-折扣券 -->
         <block wx:if="{{item.discount_way == 1}}">
@@ -38,24 +41,29 @@
       <view class="couponName">
         {{item.title}}
       </view>
-      <text class="couponUseHint"
-            wx:if="{{item.type == 0}}">部分商品可用</text>
-      <text class="couponUseHint"
-            wx:if="{{item.type == 2}}">部分商品不可用</text>
-      <text class="couponUseHint"
-            wx:if="{{item.type == 1}}">全部商品可用</text>
-      <text class="couponUseTime"
-            wx:if="{{item.valid_day}}">{{ item.valid_after == 1 ? '领取次日' : '自领取起' }}{{ item.valid_day }}天内有效</text>
-      <text class="couponUseTime"
-            wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">{{ time.formatDate(item.valid_at) }}-{{ time.formatDate(item.invalid_at) }}</text>
-
-      <view wx:if="{{item.instructions != '' && !isFullScreenPopCard}}"
+      <view class="moreCouponInfo" wx:if="{{item.coupon_type != 6}}">
+        <text class="couponUseHint"
+              wx:if="{{item.type == 0}}">部分商品可用</text>
+        <text class="couponUseHint"
+              wx:if="{{item.type == 2}}">部分商品不可用</text>
+        <text class="couponUseHint"
+              wx:if="{{item.type == 1}}">全部商品可用</text>
+        <text class="couponUseTime"
+              wx:if="{{item.valid_day}}">{{ item.valid_after == 1 ? '领取次日' : '自领取起' }}{{ item.valid_day }}天内有效</text>
+        <text class="couponUseTime"
+              wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">{{ time.formatDateToMinte(item.invalid_at) }}到期</text>
+      </view>
+      <view wx:else>
+        <text class="couponUseTime"
+              wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">{{ time.formatDateToMinte(item.invalid_at) }}到期</text>
+      </view>
+      <!-- <view wx:if="{{item.instructions != '' && !isFullScreenPopCard}}"
             class="moreInfo"
             catchtap="handleLook">
         <text>使用说明</text>
         <image src='../../../common/assets/images/coupon/{{is_viewUsingInfo?"up":"down"}}.svg'
                class="operateBtn" />
-      </view>
+      </view> -->
     </view>
 
     <!-- 右边优惠券领用状态 -->
@@ -99,7 +107,13 @@
     <image src="../../../common/assets/images/coupon/coupon_bg.png"
            class="coupons-styles2-bg" />
     <!-- 左边优惠券信息，包括价值，门槛和有效日期 -->
-    <view class="couponInfo">
+    <view wx:if="{{item.coupon_type == 6}}" class="giftCouponInfo">
+      <view class="giftCouponName">礼品券</view>
+      <view wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">
+        {{ time.formatDateToMinte(item.invalid_at) }}到期
+      </view>
+    </view>
+    <view  wx:else class="couponInfo">
       <view class="couponInfoTop">
         <view class="couponPriceWrap">
           <!-- discount_way优惠方式 1-满减券 2-折扣券 -->
@@ -130,7 +144,7 @@
         <view class="couponUseTime"
               wx:if="{{item.valid_day}}">{{ item.valid_after == 1 ? '领取次日' : '自领取起' }}{{ item.valid_day }}天内有效</view>
         <view class="couponUseTime"
-              wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">{{ time.formatDate(item.valid_at) }}-{{ time.formatDate(item.invalid_at) }}</view>
+              wx:if="{{!item.valid_day && item.valid_at && item.invalid_at}}">{{ time.formatDateToMinte(item.invalid_at) }}到期</view>
       </view>
     </view>
     <!-- 右边优惠券领用状态 -->
@@ -196,5 +210,13 @@
   return date;
   }
   }
-  module.exports.formatDate = formatDate;
+  // 时间精确到分
+  var formatDateToMinte = function(date) {
+    var lastIndex = date.lastIndexOf(":");
+    return date.substring(0, lastIndex).replace(getRegExp('-','g'), '.');
+  };
+  module.exports = {
+    formatDate: formatDate,
+    formatDateToMinte: formatDateToMinte
+  };
 </wxs>