xiaoe_mp_npm 1.0.11 → 1.0.12-alpha2

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

@@ -7,8 +7,68 @@ $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 {
@@ -20,7 +80,37 @@ $deviceWidth: 750;
     }
 
     .coupon_style1 {
-      height: vmin(184);
+      height: vmin(176);
+      background: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lwho4h4o0bls.png') center no-repeat !important;
+      .couponValue {
+        width: vmin(190); 
+      }
+      .couponName {
+        font-size: vmin(24) !important;
+      }
+      .couponInfo {
+        justify-content: flex-start;
+        padding: vmin(16) vmin(22) vmin(16) vmin(26);
+      }
+      .couponState {
+        position: absolute;
+        right: vmin(12);
+        top: 90%;
+        transform: translateY(-90%);
+        height: vmin(38);
+        line-height: vmin(38);
+        background: #FF5429;
+        border-radius: vmin(38);
+        text-align: center;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: vmin(24);
+        font-weight: 500;
+        &.vertical-btn {
+          width: vmin(88);
+        }
+      }
     }
   }
 
@@ -35,39 +125,44 @@ $deviceWidth: 750;
 
   .coupon_style1 {
     display: flex;
+    align-items: center;
     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);
+          // margin-right: vmin(4);
           font-size: vmin(32);
         }
 
         .coupon-price {
           display: flex;
           font-size: vmin(80);
+          &.discount-percent {
+            margin-top: -1.8vmin;
+          }
         }
 
         .discountFont {
@@ -77,42 +172,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 {
+      flex: 1;
+      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(20);
+      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);
+        color: #333333;
+        font-size: vmin(28);
+        font-weight: 500;
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+      }
+      .moreCouponInfo{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
 
       .couponUseHint {
@@ -120,7 +221,7 @@ $deviceWidth: 750;
       }
 
       .couponUseTime {
-        margin-bottom: 4.8vmin;
+        // margin-bottom: 4.8vmin;
       }
 
       .moreInfo {
@@ -138,27 +239,28 @@ $deviceWidth: 750;
     }
 
     .couponState {
-      position: absolute;
-      right: vmin(16);
-      bottom: vmin(16);
       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;
+      margin-right: vmin(10);
 
       &.fullscreen-btn {
         width: vmin(136);
       }
 
       &.vertical-btn {
-        width: vmin(112);
+        width: vmin(106);
       }
 
       .couponBtn {
         color: rgba(255, 255, 255, 1);
         font-size: vmin(24);
-        font-weight: 700;
+        font-weight: 500;
         text-align: center;
         font-family: "PingFang SC";
       }
@@ -225,7 +327,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 +365,7 @@ $deviceWidth: 750;
         flex-direction: row;
         align-items: flex-end;
         height: vmin(48);
-
+        
         .couponPriceWrap {
           position: relative;
           display: flex;
@@ -341,16 +463,47 @@ $deviceWidth: 750;
 
 @mixin styleType1_wrapper-v {
   &.vertical-screen {
-    width: vmin(264);
-    height: vmin(364);
+    width: vmin(476);
+    height: vmin(176);
     margin: 0 auto;
 
     &.not-pop-card {
+      width: vmin(476);
       margin-bottom: 0;
     }
 
     .coupon_style1 {
-      height: vmin(172);
+      height: vmin(176);
+      background: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lwho4h4o0bls.png') center no-repeat !important;
+      .couponValue {
+        width: vmin(190); 
+      }
+      .couponName {
+        font-size: vmin(24) !important;
+      }
+      .couponInfo {
+        justify-content: flex-start;
+        padding: vmin(16) vmin(22) vmin(16) vmin(26);
+      }
+      .couponState {
+        position: absolute;
+        right: vmin(12);
+        top: 90%;
+        transform: translateY(-90%);
+        height: vmin(38);
+        line-height: vmin(38);
+        background: #FF5429;
+        border-radius: vmin(38);
+        text-align: center;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: vmin(24);
+        font-weight: 500;
+        &.vertical-btn {
+          width: vmin(88);
+        }
+      }
     }
   }
 
@@ -364,31 +517,34 @@ $deviceWidth: 750;
   }
 
   .coupon_style1 {
-    display: block;
-    position: static;
+    display: flex;
+    align-items: center;
+    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);
@@ -400,6 +556,9 @@ $deviceWidth: 750;
           align-items: baseline;
           font-weight: 500;
           font-size: vmin(64) !important;
+          &.discount-percent {
+            margin-top: -1vmin;
+          }
         }
 
         .coupon-price-long {
@@ -432,32 +591,32 @@ $deviceWidth: 750;
     }
 
     .couponInfo {
+      flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      width: 100%;
-      height: vmin(192);
+      // width: 100%;
+      // height: vmin(192);
+      height: 100%;
       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;
-        font-size: vmin(24);
-        line-height: vmin(32);
-        height: vmin(32);
-        width: vmin(232);
-        font-weight: 700;
-        margin-bottom: vmin(8);
+        width: 100%;
+        line-height: vmin(40);
+        color: #333333;
+        font-size: vmin(28);
+        font-weight: 500;
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
       }
 
       .couponUseHint {
@@ -470,20 +629,21 @@ $deviceWidth: 750;
     }
 
     .couponState {
-      position: absolute;
-      right: vmin(16);
-      bottom: vmin(16);
       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;
+      margin-right: vmin(10);
 
       // &.fullscreen-btn {
       //   width: vmin(136);
       // }
       &.vertical-btn {
-        width: vmin(232);
+        width: vmin(106);
       }
 
       .couponBtn {

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}}">
@@ -17,7 +20,7 @@
           </view>
         </block>
         <block wx:if="{{item.discount_way == 2}}">
-          <view class="coupon-price">
+          <view class="coupon-price discount-percent">
             <view>{{price.ToFilter(item.discount_percent, false)}}</view>
             <view wx:if="{{item.discount_percent % 10 != 0 && !aliveMode}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
           </view>
@@ -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>