xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/coupon/components/CouponItem/index.js

@@ -0,0 +1,176 @@
+const computedBehavior = require('miniprogram-computed').behavior
+Component({
+  /**
+   * 导入计算属性
+   */
+  behaviors: [computedBehavior],
+
+  /**
+   * 启用插槽
+   */
+  options: {
+    multipleSlots: true
+  },
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 优惠券批次id
+    userChooseBatchIdList: {
+      type:Array,
+      value: []
+    },
+    // 优惠券id
+    userChooseCuIdList: {
+      type:Array,
+      value: []
+    },
+    // 能否叠加
+    cantOverlay: {
+      type: Boolean,
+      value: false
+    },
+    // 是否推荐优惠券
+    isRecommendCouponList: {
+      type: Boolean,
+      value: false
+    },
+    // 用户选择的优惠券
+    userChooseCouponList: {
+      type: Array,
+      value: []
+    },
+    // 当前优惠券是否可用
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+    // 单个优惠券左边金额背景颜色，默认渐变背景
+    couponValueBg: { 
+      type: String,
+      value: 'linear-gradient(to right,#FFB073,#FF9D52)'
+    },
+    // 优惠券内容
+    couponContent: {
+      type: Object,
+      value: {}
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    isViewMoreInfo: false,
+  },
+
+  /**
+ * 生命周期函数--监听页面显示
+ */
+  ready: function () {
+    if(this.properties.disabled) {
+      this.setData({
+        isViewMoreInfo: true
+      })
+    }
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+    // 是否展示可叠加文案
+    canOverlayImg(data) {
+      //不是最佳组合    !一张没勾选      选了一张且可叠加
+      if(data.isRecommendCouponList || data.userChooseCouponList.length == 0 || data.isUserChooseCoupon != -1 || data.cantOverlay || data.userChooseBatchIdList.indexOf(data.couponContent.id) !== -1) {
+        return false
+      }           
+      return true
+    },
+    // 是否显示可叠加文案
+    noSuperposition(data) {
+      if (data.userChooseCouponList.length === 0) {
+        return false;
+      }
+      if (data.cantOverlay) {
+        if (data.userChooseCouponList[0].cu_id === data.couponContent.cu_id) {
+          return false;
+        }
+        return true;
+      }
+      if (data.couponContent.is_support_superposition === 0 || (data.userChooseBatchIdList.indexOf(data.couponContent.id) !== -1 && data.userChooseCuIdList.indexOf(data.couponContent.cu_id) === -1)) {
+        return true;
+      }
+      return false;
+    },
+    // 是否用户选择的优惠券
+    isUserChooseCoupon(data) {
+      if (data.userChooseCouponList.length !== 0) {
+        return data.userChooseCouponList.findIndex(item => item.cu_id === data.couponContent.cu_id);
+      } else {
+        return -1;
+      }
+    },
+    // 格式化使用说明
+    getDesInfo (data) {
+      if (!data.couponContent.instructions) {
+        return '';
+      }
+      return data.couponContent.instructions.replace(/\r\n/g, '<br/>');
+    },
+    // 判断金额长度，不同金额区间端显示不同样式
+    isLongNum (data) {
+      if(data.couponContent.price) {
+        let tempPrice = data.couponContent.price / 100;
+          if (data.couponContent.price % 100 === 0) {
+            if (tempPrice.toString().length > 5) {
+              return 'smallLast';
+            } else if (tempPrice.toString().length > 3) {
+              return 'small';
+            } else {
+              return 'normal';
+            }
+          } else {
+            // 含小数点
+            if (tempPrice.toString().length > 7) {
+              return 'smallLast';
+            } else if (tempPrice.toString().length > 5) {
+              return 'small';
+            } else {
+              return 'normal';
+            }
+          }
+      } else {
+        return 'normal';
+      }
+    },
+    // 获取两位小数金额
+    getFixedTwoPriceShow(data) {
+      return (data.couponContent.discount_limit_price/100).toFixed(2)
+    },
+    // 是否显示使用说明
+    showUsingInfo(data) {
+      return (!data.disabled && data.couponContent.invalid_text !== '') || data.couponContent.instructions === '';
+    }
+   },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 显示优惠券使用说明
+    showDes() {
+      this.setData({
+        isViewMoreInfo: !this.properties.isViewMoreInfo
+      })
+    },
+    chooseCoupon() {
+      this.triggerEvent('chooseCoupon', {
+        params: {
+          item: this.data.couponContent,
+        }
+      })
+    }
+  }
+})

package/miniprogram_dist/coupon/components/CouponItem/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index"
+  }
+}

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

@@ -0,0 +1,208 @@
+.couponNewWrap{
+    width: 100%;
+    margin-bottom: 26.4rpx;
+    margin-left: auto;
+    margin-right: auto;
+   &:last-child {
+        margin-bottom: 0;
+    }
+    .detailInfo{
+        display: flex;
+        align-items: center;
+        padding: 35.2rpx;
+        background-color: #FFFAF4;
+        box-sizing: border-box;
+        border-radius: 0 0 4px 4px;
+        color: #505050;
+        font-size: 22rpx;
+        background: #FFFAF4;
+        text-align: left;
+        .instructions {
+          font-size: 14px;
+          color: #505050;
+          text {
+            white-space: pre-wrap;
+          }
+        }
+    }
+}
+.couponNewV2 {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 224.4rpx;
+    margin-left: auto;
+    margin-right: auto;
+    overflow: hidden;
+    border-radius: 8.8rpx;
+    background-color: #fff;
+
+    .couponValue {
+        width: 228.8rpx;
+        height: 224.4rpx;
+        background: #FF821F !important;
+        box-sizing: border-box;
+        border-radius: 8.8rpx 0 0 8.8rpx;
+        .couponPrice {
+            position: relative;
+            width: 100%;
+            height: 99rpx;
+            margin: 30.8rpx auto 8.8rpx;
+            text-align: center;
+            line-height: 99rpx;
+            font-size: 96.8rpx;
+            font-weight: 500;
+            color: #fff;
+            .fontSmall {
+                font-size: 52.8rpx !important;
+            }
+            .fontLastSmall{
+                font-size: 35.2rpx !important;
+            }
+
+            .fixedfont{
+                font-size: 26.4rpx !important;
+
+            }
+            .fixedPercent{
+                font-size: 35.2rpx !important;
+            }
+            span {
+                position: relative;
+                display: inline-block;
+            }
+             .discountFont,.coupon-symbol{
+                font-size: 35.2rpx;
+                margin-left: 2.2rpx;
+                margin-left: -1.1rpx;
+            }
+
+        }
+
+        .couponUseCondition {
+            width: 100%;
+            overflow: hidden;
+            max-height: 88rpx;
+            line-height: 39.6rpx;
+            color:#fff;
+            text-align: center;
+        }
+
+        .couponMaxDiscountNum {
+          width: 100%;
+          text-align: center;
+          color: #fff;
+          margin-bottom: 55rpx;
+          font-size: 10px;
+        }
+    }
+
+    .couponInfo {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 374rpx;
+        height: 100%;
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: 17.6rpx 0 17.6rpx 26.4rpx;
+        border-bottom-right-radius: 8.8rpx;
+        border-top-right-radius: 8.8rpx;
+        color:#888888;
+        font-size: 22rpx;
+        text-align: left;
+        span{
+            display: inline-block;
+        }
+        .couponName {
+            width: 100%;
+            line-height: 33rpx;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            margin-bottom: 17.6rpx;
+            color:#505050;
+            font-size: 26.4rpx;
+            font-weight:500;
+        }
+        .couponUseTime {
+            width: 100%;
+            height: 30.8rpx;
+            line-height: 30.8rpx;
+            font-size: 22rpx;
+        }
+        .noSuperposition{
+          color: #FF821F;
+        }
+        .moreInfo{
+            display: flex;
+            align-items: center;
+            padding: 2.2rpx 0;
+        }
+        .operateBtn{
+            width: 26.4rpx;
+            height: 26.4rpx;
+            cursor: pointer;
+            margin-left: 6.6rpx;
+            background-size: 100% 100%;
+        }
+        .retract{
+            background: url('../../../common/assets/images/coupon/up.svg') center no-repeat;
+        }
+    }
+
+    .couponState {
+        position: absolute;
+        right: 0;
+        width: 132rpx;
+        height: 100%;
+        .superImg{
+          width: 88rpx;
+          height: 88rpx;
+          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 8.8rpx 8.8rpx 0;
+
+            .coupon-choose {
+                width: 44rpx;
+                height: 44rpx;
+                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: 3.3rpx solid #CCC;
+                background: none;
+            }
+        }
+    }
+}
+// 优惠券不可用样式
+.disabledState{
+    background-color: #EEEEEE!important;
+   .couponValue{
+       background: #CDCDCD!important;
+   }
+}
+// 详细信息不可用优惠券时的字段
+.whiteBg{
+    background-color: #fff!important;
+}
+.disabledHint{
+    width: 30rpx;
+    height: 30rpx;
+    margin-right: 8rpx;
+    transform: translateY(6rpx);
+}

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

@@ -0,0 +1,100 @@
+<!-- 优惠券详情 -->
+<view class="couponNewWrap">
+    <view class="couponNewV2 {{disabled?'disabledState':''}}">
+        <view class="couponValue">
+            <view class="couponPrice">
+                <!-- 满减券 -->
+                <view wx:if="{{couponContent.discount_way === 1}}">
+                    <text class="coupon-symbol">￥</text>
+                    <text style="left: -5.5rpx;" class="{{isLongNum === 'small'?'fontSmall':''}} {{isLongNum === 'smallLast'?'fontLastSmall':''}}">{{price.getPriceShow(couponContent.price)}}<text wx:if="{{couponContent.price % 100 !== 0}}" class="fixedfont">.{{price.getDecimalPriceShow(couponContent.price)}}</text></text>
+                </view>
+                <!-- 折扣券 -->
+                <view wx:if="{{couponContent.discount_way === 2}}">
+                    <text style="left: -5.5rpx;" :class="{{isLongNum === 'small'?'fontSmall':''}} {{isLongNum === 'smallLast'?'fontLastSmall':''}}">{{price.getPriceShow(couponContent.discount_percent,false)}}<text class="fixedPercent" wx:if="{{couponContent.discount_percent % 10 !== 0}}">.{{price.getDecimalPriceShow(couponContent.discount_percent,false)}}</text><text class="discountFont">折</text></text>
+                </view>
+            </view>
+            <view wx:if="{{couponContent.require_price==0}}" class="couponUseCondition t3">无门槛</view>
+            <view wx:if="{{couponContent.require_price!=0}}" class="couponUseCondition t3">{{couponContent.discount_way === 2 ? '满'+couponContent.require_price/100+'元可用':'满'+couponContent.require_price/100+'减'+couponContent.price/100+'元'}}</view>
+            <view class="couponMaxDiscountNum" wx:if="{{couponContent.discount_limit_price}}">最多优惠{{getFixedTwoPriceShow}}元</view>
+        </view>
+        <view class="couponInfo {{couponContent.is_support_superposition?'couponInfo-small':''}}">
+            <view class="couponName">{{couponContent.title.length > 10 ? cutString.getCouponTitle(couponContent.title, 0, 10)+'...':couponContent.title}}</view>
+            <text wx:if="{{couponContent.type === 0}}" class="couponUseHint">部分商品可用</text>
+            <text wx:if="{{couponContent.type === 1}}" class="couponUseHint">全部商品可用</text>
+            <text wx:if="{{couponContent.valid_day}}" class="couponUseTime">
+            {{couponContent.valid_after === 1? '领取次日':'自领取起'}}{{couponContent.valid_day}}天内有效</text>
+            <text class="couponUseTime" wx:if="{{!couponContent.valid_day && couponContent.valid_at && couponContent.invalid_at}}">{{time.formatDate(couponContent.valid_at)}}-{{time.formatDate(couponContent.invalid_at)}}</text>
+            <text wx:if="{{!disabled && noSuperposition}}" class="noSuperposition">此券不可和已勾选券叠加使用</text>
+            <view wx:if="{{showUsingInfo}}" class="moreInfo">使用说明 <image bindtap="showDes" src='../../../common/assets/images/coupon/{{isViewMoreInfo?"up":"down"}}.svg' class="operateBtn"/></view>
+        </view>
+        <view class="couponState">
+            <image wx:if="{{!disabled && canOverlayImg && couponContent.is_support_superposition}}" src="../../../common/assets/images/coupon/superposition_logo.png" class="superImg"/>
+            <view wx:if="{{!disabled}}" class="coupon-choose-box">
+                <image bindtap="chooseCoupon" wx:if="{{isUserChooseCoupon != -1}}" src="../../../common/assets/images/coupon/coupon_select.png" class="coupon-choose"/>
+                <view bindtap="chooseCoupon" wx:else class="coupon-choose coupon-unchoosed"></view>
+            </view>
+        </view>
+    </view>
+    <!-- 使用说明框 -->
+    <view class="detailInfo {{disabled?'whiteBg':''}}" wx:if="{{isViewMoreInfo}}">
+        <view wx:if="{{disabled}}">
+            <image src="../../../common/assets/images/coupon/hint.png" class="disabledHint"/>
+            <text>{{couponContent.invalid_text}}</text>
+        </view>
+        <view wx:else>
+            <view class="instructions">
+              <rich-text nodes="{{getDesInfo || '暂无使用说明'}}"></rich-text>
+            </view>
+        </view>
+    </view>
+</view>
+<wxs module="price">
+    // 获取金额展示
+    var getPriceShow = 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;
+      }
+    }
+    // 获取小数点部分金额显示
+    var getDecimalPriceShow = 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={
+        getPriceShow:getPriceShow,
+        getDecimalPriceShow:getDecimalPriceShow,
+    }
+</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>
+<wxs module="cutString">
+    var getCouponTitle = function (date, start, end) {
+        return date.substring(start, end)
+    }
+    module.exports.getCouponTitle = getCouponTitle;
+</wxs>

package/miniprogram_dist/coupon/components/CouponItem/index.wxss

@@ -0,0 +1,195 @@
+.couponNewWrap {
+  width: 100%;
+  margin-bottom: 26.4rpx;
+  margin-left: auto;
+  margin-right: auto;
+}
+.couponNewWrap:last-child {
+  margin-bottom: 0;
+}
+.couponNewWrap .detailInfo {
+  display: flex;
+  align-items: center;
+  padding: 35.2rpx;
+  background-color: #FFFAF4;
+  box-sizing: border-box;
+  border-radius: 0 0 4px 4px;
+  color: #505050;
+  font-size: 22rpx;
+  background: #FFFAF4;
+  text-align: left;
+}
+.couponNewWrap .detailInfo .instructions {
+  font-size: 14px;
+  color: #505050;
+}
+.couponNewWrap .detailInfo .instructions text {
+  white-space: pre-wrap;
+}
+.couponNewV2 {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 224.4rpx;
+  margin-left: auto;
+  margin-right: auto;
+  overflow: hidden;
+  border-radius: 8.8rpx;
+  background-color: #fff;
+}
+.couponNewV2 .couponValue {
+  width: 228.8rpx;
+  height: 224.4rpx;
+  background: #FF821F !important;
+  box-sizing: border-box;
+  border-radius: 8.8rpx 0 0 8.8rpx;
+}
+.couponNewV2 .couponValue .couponPrice {
+  position: relative;
+  width: 100%;
+  height: 99rpx;
+  margin: 30.8rpx auto 8.8rpx;
+  text-align: center;
+  line-height: 99rpx;
+  font-size: 96.8rpx;
+  font-weight: 500;
+  color: #fff;
+}
+.couponNewV2 .couponValue .couponPrice .fontSmall {
+  font-size: 52.8rpx !important;
+}
+.couponNewV2 .couponValue .couponPrice .fontLastSmall {
+  font-size: 35.2rpx !important;
+}
+.couponNewV2 .couponValue .couponPrice .fixedfont {
+  font-size: 26.4rpx !important;
+}
+.couponNewV2 .couponValue .couponPrice .fixedPercent {
+  font-size: 35.2rpx !important;
+}
+.couponNewV2 .couponValue .couponPrice span {
+  position: relative;
+  display: inline-block;
+}
+.couponNewV2 .couponValue .couponPrice .discountFont,
+.couponNewV2 .couponValue .couponPrice .coupon-symbol {
+  font-size: 35.2rpx;
+  margin-left: 2.2rpx;
+  margin-left: -1.1rpx;
+}
+.couponNewV2 .couponValue .couponUseCondition {
+  width: 100%;
+  overflow: hidden;
+  max-height: 88rpx;
+  line-height: 39.6rpx;
+  color: #fff;
+  text-align: center;
+}
+.couponNewV2 .couponValue .couponMaxDiscountNum {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  margin-bottom: 55rpx;
+  font-size: 10px;
+}
+.couponNewV2 .couponInfo {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 374rpx;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 17.6rpx 0 17.6rpx 26.4rpx;
+  border-bottom-right-radius: 8.8rpx;
+  border-top-right-radius: 8.8rpx;
+  color: #888888;
+  font-size: 22rpx;
+  text-align: left;
+}
+.couponNewV2 .couponInfo span {
+  display: inline-block;
+}
+.couponNewV2 .couponInfo .couponName {
+  width: 100%;
+  line-height: 33rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 17.6rpx;
+  color: #505050;
+  font-size: 26.4rpx;
+  font-weight: 500;
+}
+.couponNewV2 .couponInfo .couponUseTime {
+  width: 100%;
+  height: 30.8rpx;
+  line-height: 30.8rpx;
+  font-size: 22rpx;
+}
+.couponNewV2 .couponInfo .noSuperposition {
+  color: #FF821F;
+}
+.couponNewV2 .couponInfo .moreInfo {
+  display: flex;
+  align-items: center;
+  padding: 2.2rpx 0;
+}
+.couponNewV2 .couponInfo .operateBtn {
+  width: 26.4rpx;
+  height: 26.4rpx;
+  cursor: pointer;
+  margin-left: 6.6rpx;
+  background-size: 100% 100%;
+}
+.couponNewV2 .couponInfo .retract {
+  background: url('../../../common/assets/images/coupon/up.svg') center no-repeat;
+}
+.couponNewV2 .couponState {
+  position: absolute;
+  right: 0;
+  width: 132rpx;
+  height: 100%;
+}
+.couponNewV2 .couponState .superImg {
+  width: 88rpx;
+  height: 88rpx;
+  background-size: 100% 100%;
+  position: absolute;
+  right: 0;
+}
+.couponNewV2 .couponState .coupon-choose-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 0 8.8rpx 8.8rpx 0;
+}
+.couponNewV2 .couponState .coupon-choose-box .coupon-choose {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  box-sizing: border-box;
+  background-size: 100% 100%;
+}
+.couponNewV2 .couponState .coupon-choose-box .coupon-unchoosed {
+  border: 3.3rpx solid #CCC;
+  background: none;
+}
+.disabledState {
+  background-color: #EEEEEE !important;
+}
+.disabledState .couponValue {
+  background: #CDCDCD !important;
+}
+.whiteBg {
+  background-color: #fff !important;
+}
+.disabledHint {
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 8rpx;
+  transform: translateY(6rpx);
+}