xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,288 @@
+// 互动页优惠券卡片样式
+.styleType1_wrapper {
+  width: 476rpx;
+  margin: 0 auto;
+  margin-bottom: 32rpx;
+  .coupon_style1 {
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 184rpx;
+    .couponValue {
+      width: 198rpx;
+      height: 100%;
+      background: rgba(255,120,31,1);
+      color: #fff;
+      padding: 16rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+      box-sizing: border-box;
+      border-radius: 16rpx 0 0 16rpx;
+      .couponPriceWrap {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        font-weight: 700;
+        .coupon-symbol {
+          margin-right: 4rpx;
+          font-size: 32rpx;
+        }
+        .coupon-price {
+          display: flex;
+          font-size: 80rpx;
+        }
+        .discountFont{
+          font-size: 32rpx;
+          font-weight: 500;
+        }
+      }
+      .couponUseCondition {
+        height: 32rpx;
+        color: rgba(255,255,255,1);
+        font-size: 24rpx;
+        font-weight: 500;
+        font-family: "PingFang SC";
+        text-align: center;
+        line-height: 32rpx;
+      }
+    }
+    .couponInfo {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      width: 278rpx;
+      height: 100%;
+      box-sizing: border-box;
+      background: rgba(255,255,255,1);
+      padding: 16rpx 0 16rpx 16rpx;
+      color: rgba(153,153,153,1);
+      font-size: 20rpx;
+      line-height: 24rpx;
+      font-weight: 400;
+      text-align: left;
+      border-radius: 0 16rpx 16rpx 0;
+      .couponName {
+        color: rgba(51,51,51,1);
+        font-size: 24rpx;
+        line-height: 32rpx;
+        height: 32rpx;
+        width: 246rpx;
+        font-weight: 700;
+        margin-bottom: 8rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .couponUseHint {
+        margin-bottom: 4rpx;
+      }
+      .couponUseTime {
+        margin-bottom: 36rpx;
+      }
+      .moreInfo {
+        display: flex;
+        cursor: pointer;
+        align-items: center;
+        .operateBtn {
+          width: 24rpx;
+          height: 24rpx;
+          margin-left: 6rpx;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .couponState {
+      position: absolute;
+      right: 16rpx;
+      bottom: 16rpx;
+      width: 112rpx;
+      height: 48rpx;
+      line-height: 48rpx;
+      border-radius: 28rpx;
+      border: 0;
+      background: rgba(255,120,31,1);
+      .couponBtn {
+        color: rgba(255,255,255,1);
+        font-size: 24rpx;
+        font-weight: 700;
+        text-align: center;
+        font-family: "PingFang SC";
+      }
+    }
+    .hasReceivedStatus {
+      position: absolute;
+      top: 0rpx;
+      right: 0rpx;
+      width: 98rpx;
+      height: 114rpx;
+    }
+  }
+  .detailInfo{
+    width: 100%;
+    display: flex;
+    background-color: rgba(255,245.82,239.7,1);
+    box-sizing: border-box;
+    border-radius: 0 0 4px 4px;
+    padding: 16rpx;
+    color: rgba(102,102,102,1);
+    font-size: 20rpx;
+    text-align: left;
+    .disabledHint {
+      width: 28rpx;
+      margin-right: 10rpx;
+  }
+    .instructions {
+      word-break: break-all;
+      .remark {
+        color: rgba(51,51,51,1);
+        margin-bottom: 8rpx;
+      }
+    }
+  }
+}
+// 优惠券不可用样式
+.disabledState {
+  background-color: #eeeeee !important;
+  .couponValue {
+      background: #cdcdcd !important;
+  }
+}
+// 详细信息不可用优惠券时的字段
+.whiteBg {
+  background-color: #fff !important;
+}
+.disabledHint {
+  width: 28rpx;
+  margin-right: 10rpx;
+}
+
+// 非高亮态样式
+.unselectState {
+  background: #cdcdcd !important;
+}
+
+
+// 一行单个优惠券样式
+.styleType2_wrapper {
+  margin-bottom: 24rpx;
+  margin-right: 16rpx;
+  .coupon_style2 {
+    display: flex;
+    flex-direction: row;
+    color: rgba(255,120,31,1);
+    position: relative;
+    overflow: hidden;
+    width: 336rpx;
+    height: 160rpx;
+    flex-shrink: 0;
+    .coupons-styles2-bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+    }
+    .couponInfo {
+        display: inline-flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        padding-left: 16rpx;
+        width: 272rpx;
+        height: 100%;
+        font-family: "PingFang SC";
+        font-size: 20rpx;
+        line-height: 24rpx;
+        .couponInfoTop {
+            padding-top: 16rpx;
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            height: 48rpx;
+            .couponPriceWrap {
+                position: relative;
+                display: flex;
+                flex-direction: row;
+                align-items: baseline;
+                font-weight: 700;
+                height: 48rpx;
+                line-height: 48rpx;
+                .coupon-symbol {
+                  margin-right: 4rpx;
+                  font-size: 24rpx;
+                }
+                .coupon-price {
+                  display: flex;
+                  font-size: 48rpx;
+                }
+                .discountFont{
+                  font-size: 24rpx;
+                  font-weight: 500;
+                  margin-left: 4rpx;
+                }
+            }
+            
+        }
+        .couponInfoBottom {
+          font-weight: 400;
+          line-height: 24rpx;
+          position: relative;
+          margin-top: 6rpx;
+          .priceLimit {
+            margin-bottom: 4rpx;
+            .couponUseCondition {
+               font-size: 20rpx;
+               font-weight: 400;
+           }
+          }
+          .couponUseHint {
+            margin-bottom: 4rpx;
+          }
+        }
+        
+    }
+    .couponStatewrapper {
+      width: 62rpx;
+      height: 100%;
+      /* -webkit-align-self: center; */
+      -ms-flex-item-align: center;
+      align-self: center;
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      .couponBtn {
+          writing-mode: vertical-lr;
+          letter-spacing: 10rpx;
+          font-size: 24rpx;
+          font-weight: 700;
+          font-family: "PingFang SC";
+      }
+      &:before {
+          content: " ";
+          display: block;
+          width: 100%;
+          height: 114rpx;
+          border-left: 2rpx dashed rgba(255,120,31,1);
+          -webkit-transform: scale(1.3);
+          transform: scale(0.7, 1.1);
+          position: absolute;
+          left: -10rpx;
+          top: 23rpx;
+      }
+      
+    }
+    .hasReceivedStatus {
+      position: absolute;
+      top: 0rpx;
+      right: 0rpx;
+      width: 98rpx;
+      height: 114rpx;
+    }
+  }
+}
+

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

@@ -0,0 +1,191 @@
+<!-- 优惠券形式分为2类：一行和列表 -->
+<!-- styleType===1 时是互动页讲师发放优惠券时的优惠券列表形式 -->
+<view class="styleType1_wrapper" wx:if="{{styleType === 1}}">
+  <view class="coupon_style1" catchtap="getCoupon">
+    <view class="couponValue">
+      <view class="couponPriceWrap">
+        <!-- discount_way优惠方式 1-满减券 2-折扣券 -->
+        <block wx:if="{{item.discount_way == 1}}">
+          <view class="coupon-symbol">￥</view>
+          <view style="font-size: {{isLongNumStyle1}}" class="coupon-price" >
+            <view>{{price.ToFilter(item.price)}}</view>
+            <view wx:if="{{item.price % 100 != 0}}">.{{ price.fixedFont(item.price) }}</view>
+          </view>
+        </block>
+        <block wx:if="{{item.discount_way == 2}}">
+          <view class="coupon-price">
+            <view>{{price.ToFilter(item.discount_percent, false)}}</view>
+            <view wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
+          </view>
+          <view class="discountFont">折</view>
+        </block>
+      </view>
+      <view wx:if="{{item.require_price == 0}}"
+            class="couponUseCondition">无门槛</view>
+      <view wx:if="{{item.require_price != 0}}"
+            class="couponUseCondition">
+        满{{item.require_price / 100}}元可用
+      </view>
+    </view>
+
+    <view class="couponInfo">
+      <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 != ''}}"
+            class="moreInfo"
+            catchtap="handleLook">
+        <text>使用说明</text>
+        <image src='../../../common/assets/images/coupon/{{is_viewUsingInfo?"up":"down"}}.svg'
+               class="operateBtn" />
+      </view>
+    </view>
+
+    <!-- 右边优惠券领用状态 -->
+    <view class="couponState" wx:if="{{coupon_type == 1 || coupon_type == 2}}">
+      <view class="couponBtn" hidden="{{!(coupon_type == 1)}}">领取</view>
+      <view class="couponBtn" hidden="{{!(coupon_type == 2)}}">继续领</view>
+    </view>
+    <!-- 已领取标识 -->
+    <image class="hasReceivedStatus"
+            wx:if="{{ coupon_type == 6 || coupon_type == 2}}"
+            src="../../../common/assets/images/coupon/has_receive.png"></image>
+    <!-- 已抢光标识 -->
+    <image class="hasReceivedStatus"
+           wx:elif="{{ coupon_type == 3}}"
+            src="../../../common/assets/images/coupon/finished.png"></image>
+    <!-- 已失效标识 -->
+    <image class="hasReceivedStatus"
+            wx:elif="{{ coupon_type == 4 || coupon_type == 7 || coupon_type == 5}}"
+            src="../../../common/assets/images/coupon/failed.png"></image>
+  </view>
+  
+  <!-- 使用说明框 -->
+  <view class="detailInfo" wx:if="{{is_viewUsingInfo}}">
+      <view class="instructions">
+        <view wx:if="{{item.instructions}}" class="remark">【使用说明】</view>
+        <rich-text nodes="{{getDesInfo || '暂无使用说明'}}"></rich-text>
+      </view>
+  </view>
+</view>
+
+
+<!-- 一行的优惠卷形式 styleType === 2时是点击底部按钮进入商品列表时展现的一行优惠券形式-->
+
+<view class="styleType2_wrapper"
+      wx:if="{{styleType === 2}}">
+  <view class="coupon_style2" catchtap="getCoupon">
+    <!-- 背景图 -->
+    <image src="../../../common/assets/images/coupon/coupon_bg.png"
+           class="coupons-styles2-bg" />
+    <!-- 左边优惠券信息，包括价值，门槛和有效日期 -->
+    <view class="couponInfo">
+      <view class="couponInfoTop">
+        <view class="couponPriceWrap">
+          <!-- discount_way优惠方式 1-满减券 2-折扣券 -->
+          <block wx:if="{{item.discount_way == 1}}">
+            <view class="coupon-symbol">￥</view>
+            <view style="font-size: {{isLongNumStyle2}}" class="coupon-price" >
+              <view>{{price.ToFilter(item.price)}}</view>
+              <view wx:if="{{item.price % 100 != 0}}">.{{ price.fixedFont(item.price) }}</view>
+            </view>
+          </block>
+          <block wx:if="{{item.discount_way == 2}}">
+            <view class="coupon-price">
+              <view>{{price.ToFilter(item.discount_percent, false)}}</view>
+              <view wx:if="{{item.discount_percent % 10 != 0}}">.{{ price.fixedFont(item.discount_percent, false) }}</view>
+            </view>
+            <view class="discountFont">折</view>
+          </block>
+        </view>
+      </view>
+      <view class="couponInfoBottom">
+        <view class="priceLimit">
+          <view wx:if="{{item.require_price == 0}}" class="couponUseCondition">无门槛</view>
+          <view wx:if="{{item.require_price != 0}}" class="couponUseCondition">满{{item.require_price / 100}}元可用</view>
+        </view>
+        <view class="couponUseHint" wx:if="{{item.type == 0}}">部分商品可用</view>
+        <view class="couponUseHint" wx:if="{{item.type == 2}}">部分商品不可用</view>
+        <view class="couponUseHint" wx:if="{{item.type == 1}}">全部商品可用</view>
+        <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>
+      </view>
+    </view>
+    <!-- 右边优惠券领用状态 -->
+    <view class="couponStatewrapper" wx:if="{{coupon_type == 1 || coupon_type == 2}}">
+        <view class="couponBtn" hidden="{{!(coupon_type == 1)}}">领取</view>
+        <view class="couponBtn" hidden="{{!(coupon_type == 2)}}">继续领</view>
+    </view>
+    <!-- 已领取标识 -->
+    <image class="hasReceivedStatus"
+            wx:if="{{ coupon_type == 6 || coupon_type == 2}}"
+            src="../../../common/assets/images/coupon/has_receive.png"></image>
+    <!-- 已抢光标识 -->
+    <image class="hasReceivedStatus"
+           wx:elif="{{ coupon_type == 3}}"
+            src="../../../common/assets/images/coupon/finished.png"></image>
+    <!-- 已失效标识 -->
+    <image class="hasReceivedStatus"
+            wx:elif="{{ coupon_type == 4 || coupon_type == 7 || coupon_type == 5}}"
+            src="../../../common/assets/images/coupon/failed.png"></image>
+  </view>
+</view>
+
+
+<wxs module="price">
+  // 做数值过滤，value-要处理的数字 ToFix2-默认保留两位，默认转分转元，除以100。其他除以10(如折扣)
+  var ToFilter = function(data, ToFix2 = true) {
+  var result = (data / 100).toString();
+  if (!ToFix2) {
+  result = (data / 10).toString();
+  }
+  if (result.indexOf('.') > 0) {
+  return result.split('.')[0];
+  } else {
+  return result;
+  }
+  }
+  // 小数点后的样式补充 ToFix2-默认保留2位,其他保留1位
+  var fixedFont = function(data, ToFix2 = true) {
+  if (data) {
+  var result = (data / 100).toString();
+  if (!ToFix2) {
+  result = (data / 10).toString();
+  }
+  if (result.toString().indexOf('.') > -1) {
+  return result.split('.')[1];
+  } else {
+  return '';
+  }
+  }
+  }
+  module.exports={
+  ToFilter:ToFilter,
+  fixedFont:fixedFont,
+  }
+</wxs>
+<wxs module="time">
+  // 时间精确到日期
+  var formatDate = function (date) {
+  var execStr = date.split(" ", 1);
+  if (execStr && execStr[0]) {
+  return execStr[0].replace(getRegExp('-','g'), '.');
+  } else {
+  return date;
+  }
+  }
+  module.exports.formatDate = formatDate;
+</wxs>