xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,324 @@
+const computedBehavior = require('miniprogram-computed').behavior
+Component({
+  /**
+   * 导入计算属性
+   */
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    usedPromoCode: { // 当前使用的优惠码,码值
+      type: String,
+      value: ''
+    },
+    disableCouponList: { // 不可用优惠券列表
+      type: Array,
+      value: []
+    },
+    couponList: { // 可用优惠券列表
+      type: Array,
+      value: []
+    },
+    chooseCouponList: { // 用户当前选择的优惠券列表
+      type: Array,
+      value: []
+    },
+    recommendCouponList: { // 最佳优惠券列表
+      type: Array,
+      value: []
+    },
+    originPrice: { // 商品购买价
+      type: Number,
+      value: ''
+    },
+    showPopup: { // 是否显示优惠券选择器弹窗
+      type: Boolean,
+      value: false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    userChooseCouponList: [], // 用户选择的优惠券列表
+    isNotUseCoupon: false, // 是否点击不使用优惠券按钮
+    promoCode: '', // 当前输入的优惠码
+    promoCodeReg: /^[a-zA-Z0-9\u4e00-\u9fa5]{6,12}$/,
+    currentPromoCode: '', // 实际使用优惠码
+    curTabIndex: 1, // 优惠券是否可选tab当前下标
+    coupon_tab: [
+      {
+        tabName: '可用优惠券',
+        activeIndex: 1
+
+      }, {
+        tabName: '不可用优惠券',
+        activeIndex: 2
+      }],
+  },
+
+  /**
+   *  计算属性
+   */
+  computed: {
+    // 判断是否使用了优惠码
+    isUsedPromoCode (data) {
+      return !!data.currentPromoCode;
+    },
+    // 优惠券提示文案
+    couponTips (data) {
+      if (data.userChooseCouponList.length !== 0 && !data.isUsedPromoCode) {
+        if (data.isRecommendCouponList) {
+          return `您已选中最佳优惠券组合${data.userChooseCouponList.length}张，共抵扣`;
+        }
+        return `您已选中优惠券${data.userChooseCouponList.length}张，共抵扣`;
+      }
+      return `请选择优惠券`;
+    },
+    // 判断当前选中是否最佳优惠券组合
+    isRecommendCouponList (data) {
+      let recommendCouponIdList = data.recommendCouponList.map(item => {
+        return item.cu_id;
+      });
+      if (data.recommendCouponList.length !== data.userChooseCouponList.length) {
+        return false;
+      }
+      for (let i = 0; i < data.userChooseCouponList.length; i++) {
+        if (recommendCouponIdList.indexOf(data.userChooseCouponList[i].cu_id) === -1) {
+          return false;
+        }
+      }
+      return true;
+    },
+    // 获取推荐优惠券中的优惠券id数组
+    recommendCouponIdList (data) {
+      return data.recommendCouponList.map(item => {
+        return item.cu_id;
+      });
+    },
+    // 获取已选列表项批次id数组
+    userChooseBatchIdList (data) {
+      return data.userChooseCouponList.map(item => {
+        return item.id;
+      });
+    },
+    // 是否选中了不可叠加优惠券，true: 是， false: 否
+    cantOverlay (data) {
+      if (data.userChooseCouponList.length === 1 && (data.userChooseCouponList[0].is_support_superposition === 0)) {
+        return true;
+      }
+      return false;
+    },
+    // 优惠券折扣金额
+    couponDiscountAmount (data) {
+      let miusTotalPrice = 0;
+      for (let i = 0; i < data.userChooseCouponList.length; i++) {
+        let preferential = data.userChooseCouponList[i].discount_price;
+        // 折扣优惠
+        if (data.userChooseCouponList[i].discount_way === 2) {
+          preferential = data.originPrice * Number((1 - data.userChooseCouponList[i].discount_percent / 100).toFixed(2));
+          if (data.userChooseCouponList[i].discount_limit_price) {
+            preferential = Math.min(preferential, data.userChooseCouponList[i].discount_limit_price);
+          }
+        }
+        miusTotalPrice += preferential;
+      }
+      miusTotalPrice = miusTotalPrice > data.originPrice ? data.originPrice : miusTotalPrice;
+      return (miusTotalPrice/100).toFixed(2)
+    },
+    // 获取已选列表项优惠券cu_id数组
+    userChooseCuIdList(data) {
+      return data.userChooseCouponList.map(item => item.cu_id)
+    },
+  },
+
+  observers: {
+    'chooseCouponList': function(data) {
+      this.setData({
+        userChooseCouponList: data
+      })
+    },
+    'usedPromoCode': function(data) {
+      this.setData({
+        promoCode: data,
+        currentPromoCode: data
+      })
+    },
+    'userChooseCouponList': function(data) {
+      this.setData({
+        isNotUseCoupon: data.length === 0
+      })
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 选择优惠券
+    chooseCoupon(e) {
+      let item = e.detail.params.item
+      // 在已经使用优惠码的情况下，用户选择可用优惠券，提示： 请先取消使用优惠码
+      if (this.data.isUsedPromoCode) {
+        // this.vueAlert('请先取消使用优惠码');
+        return false;
+      }
+      // 优惠券列表是否为空
+      if (this.data.userChooseCouponList.length !== 0) {
+        // 当前优惠券是否已被选中
+        if (this.isUserChooseCoupon(item.cu_id) !== -1) {
+          this.data.userChooseCouponList.splice(this.isUserChooseCoupon(item.cu_id), 1);
+          this.setData({
+            userChooseCouponList: this.data.userChooseCouponList
+          })
+        } else {
+          // 当前已选优惠券能否叠加，true即当前优惠券为不可叠加
+          if (this.data.cantOverlay) {
+            this.setData({
+              userChooseCouponList: [item]
+            })
+          } else {
+            // 当前点击优惠券是否为可叠加优惠券
+            if (item.is_support_superposition === 1) {
+              // 已选优惠券中是否有同一批次优惠券
+              let batchIdIndex = this.data.userChooseCouponList.findIndex(content => content.id === item.id);
+              if (batchIdIndex !== -1) {
+                this.data.userChooseCouponList.splice(batchIdIndex, 1);
+                this.setData({
+                  userChooseCouponList: this.data.userChooseCouponList
+                })
+              }
+            } else {
+              this.setData({
+                userChooseCouponList: []
+              })
+            }
+            this.setData({
+              userChooseCouponList: [...this.data.userChooseCouponList,item]
+            })
+          }
+        }
+      } else {
+        this.setData({
+          userChooseCouponList: [item]
+        })
+      }
+    },
+    // 使用优惠码
+    usePromoCode() {
+      if(this.data.isUsedPromoCode) {
+        // 点击取消使用
+        this.setData({
+          promoCode: '',
+          currentPromoCode: ''
+        })
+      } else {
+        if(!this.data.promoCode) {
+          wx.showToast({
+            title: '优惠码为空',
+            icon: 'none',
+            duration: 2000
+          })
+          // 优惠码为空
+          return false;
+        }
+        if(!(/^[a-zA-Z0-9\u4e00-\u9fa5]{6,12}$/.test(this.data.promoCode))) {
+          wx.showToast({
+            title: '优惠码输入错误',
+            icon: 'none',
+            duration: 2000
+          })
+          // 校验优惠码格式是否正确
+          return false;
+        }
+        this.triggerEvent('checkPromoCode', {
+          promoCode: this.data.promoCode,
+          success: () => {
+            this.setData({
+              currentPromoCode: this.data.promoCode,
+              userChooseCouponList: [],
+              isNotUseCoupon: true,
+            })
+            this.confirm();
+          }
+        });
+      }
+    },
+    // 双向绑定优惠码的值
+    getPromoCode(e) {
+      this.setData({
+        promoCode: e.detail.value
+      })
+    },
+    // 使用推荐优惠券组合
+    useRecommendCoupon() {
+      this.setData({
+        promoCode: '',
+        currentPromoCode: '',
+        userChooseCouponList: []
+      })
+      wx.showToast({
+        title: '使用推荐优惠',
+        icon: 'none',
+        duration: 2000
+
+      })
+      this.setData({
+        userChooseCouponList: this.data.recommendCouponList
+      })
+    },
+    // 点击不使用优惠券
+    notUseCoupon() {
+      if(this.data.isNotUseCoupon) {
+        this.setData({
+          isNotUseCoupon: false
+        })
+      } else {
+        this.setData({
+          isNotUseCoupon: true,
+          userChooseCouponList: []
+        })
+      }
+    },
+    // 选中是否可用优惠券列表
+    setTab:function(e) {
+      this.setData({
+        curTabIndex: e.currentTarget.dataset.index
+      });
+    },
+    // 是否用户选择的优惠券
+    isUserChooseCoupon(id) {
+      if (this.data.userChooseCouponList.length !== 0) {
+        return this.data.userChooseCouponList.findIndex(item => item.cu_id === id);
+      } else {
+        return -1;
+      }
+    },
+    // 关闭
+    onClose() {
+      this.setData({
+        currentPromoCode: this.data.usedPromoCode,
+        promoCode: this.data.usedPromoCode,
+        userChooseCouponList: this.data.chooseCouponList,
+      })
+      this.confirm()
+    },
+    confirm() {
+      this.triggerEvent('close', {
+        params: {
+          showPopup: false,
+          chooseCouponList: this.data.userChooseCouponList,
+          usedPromoCode: this.data.currentPromoCode
+        }
+      })
+    },
+    // 返回
+    onBack() {
+      this.setData({
+        showPopup: false
+      });
+    }
+  }
+})

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

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index",
+    "van-popup": "@vant/weapp/popup/index",
+    "van-toast": "@vant/weapp/toast/index",
+    "CouponItem": "../CouponItem/index"
+  }
+}

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

@@ -0,0 +1,238 @@
+@import "../../../common/css/theme.wxss";
+
+.popUp {
+    height: 80%;
+    border-radius: 26.4rpx 26.4rpx 0 0;
+}
+.coupon-select-box {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 480px;
+    height: 100%;
+    background-color: #F5F6F9;
+    border-radius: 26.4rpx 26.4rpx 0 0;
+    user-select: none;
+    .coupon-header {
+        display: flex;
+        flex-direction: column;
+        .header-content {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            height: 90rpx;
+            padding: 0 36rpx;
+            top: 0;
+            left: 0;
+            font-size: 32rpx;
+            font-weight: 500;
+            background-color: #ffffff;
+            border-radius: 26.4rpx 26.4rpx 0 0;
+        }
+        .promo-code-wrap {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 36rpx;
+            height: 115rpx;
+            background-color: #fff;
+            .promo-code-input {
+                width: 470rpx;
+                height: 84rpx;
+                padding: 0 22rpx;
+                border: 1px solid #DCDCDC;
+                border-right: none;
+                border-radius: 8.8rpx 0 0 8.8rpx;
+                color: #333;
+                font-size: 30.8rpx;
+                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: 180rpx;
+                height: 84rpx;
+                line-height: 84rpx;
+                margin: 0;
+                border: none;
+                border-radius: 0 8.8rpx 8.8rpx 0;
+                text-align: center;
+                color: #fff;
+                background-color: #FF821F !important;
+                font-size: 27.5rpx;
+                cursor: pointer;
+            }
+        }
+        .coupon-code-tip {
+            display: flex;
+            align-items: center;
+            padding: 0 36rpx;
+            background-color: #fff;
+            height: 39.6rpx;
+            .tips-img {
+                margin-right: 6.6rpx;
+                width: 30.8rpx;
+                height: 28.6rpx;
+            }
+            text {
+                font-size: 26.4rpx;
+                color: #999;
+            }
+        }
+        .coupon-tab_warp{
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            font-size: 35.2rpx;
+            padding: 0 36rpx;
+            font-weight: 700;
+            text-align: center;
+            background-color:#fff;
+            text{
+                display: block;
+            }
+            .tabItem{
+                position: relative;
+                width:50%;
+                height:105.6rpx;
+                line-height: 105.6rpx;
+                text-align: center;
+                cursor: pointer;
+            }
+            .greyColor{
+                color: #999999;
+                font-size: 30.8rpx;
+                font-weight: normal;
+            }
+            .activeBorder{
+                position:absolute;
+                bottom:0;
+                left:50%;
+                transform: translateX(-50%);
+                width:44rpx;
+                height:4.4rpx;
+                background:#09BB07;
+                border-radius:3.3rpx;
+            }
+        }
+        .coupon-tips {
+            display: flex;
+            background: #fff;
+            align-items: center;
+            justify-items: center;
+            padding: 10rpx 36rpx;
+            justify-content: space-between;
+            .coupon-tips-font {
+                line-height: 55rpx;
+                font-size: 26.4rpx;
+                font-weight: 500;
+                color: #000;
+                .coupon-money-num {
+                    color: #FF4747;
+                }
+            }
+            .coupon-best-combination {
+                min-width: 211.2rpx;
+                height: 52.8rpx;
+                text-align: center;
+                line-height: 55rpx;
+                background: #FF821F;
+                border: 0;
+                margin: 0;
+                border-radius: 44rpx;
+                font-size: 26.4rpx;
+                font-weight: 500;
+                color: #fff;
+            }
+        }
+    }
+    .coupon-list {
+        box-sizing: border-box;
+        flex: 1; /* 撑满剩余容器高度 */
+        overflow: scroll;
+        -webkit-overflow-scrolling: touch;
+        text-align: center;
+        padding: 26.4rpx 35.2rpx 0;
+
+        .coupon-item {
+            position: relative;
+            display: flex;
+            margin-bottom: 26.4rpx;
+            border-radius: 8.8rpx;
+            background: #fff;
+        }
+
+        .not-use-coupon {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            height: 114.4rpx;
+            margin-bottom: 26.4rpx;
+            border-radius: 8.8rpx;
+            background: #fff;
+            .not-use-text {
+                width: 558.8rpx;
+                padding-left: 35.2rpx;
+                font-size: 30.8rpx;
+                color: #333;
+                text-align: left;
+            }
+            .choose-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 132rpx;
+                height: 100%;
+                .choose-inner {
+                    width: 39.6rpx;
+                    height: 39.6rpx;
+                    border-radius: 50%;
+                    border: 3.3rpx solid #ccc;
+                }
+                .coupon-not-used {
+                    border: none;
+                }
+            }
+        }
+
+    }
+    .coupon-bottom {
+        height: 100rpx;
+        display: flex;
+        padding: 0 36rpx;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+        .coupon-confirm-button {
+            width: 754.6rpx;
+            height: 80.8rpx;
+            border-radius: 48.4rpx;
+            background: #FF821F;
+            line-height: 80.8rpx;
+            text-align: center;
+            font-size: 30.8rpx;
+            font-weight: 500;
+            color: #fff;
+        }
+    }
+    .coupon_emptypage{
+        text-align: center;
+        font-size: 35.2rpx;
+        color:#ADADB4;
+        .coupon_emptyImg{
+            width:428rpx;
+            height: 384rpx;
+            margin: 33rpx auto 0;
+            background-size: 100% 100%;
+        }
+
+    }
+}

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

@@ -0,0 +1,75 @@
+<!-- 优惠券选择器 -->
+<van-popup bind:close="onClose" show="{{ showPopup }}" position="bottom" custom-class="popUp">
+    <view title="优惠券/码" class="coupon-select-box">
+        <view class="coupon-header">
+            <!-- 弹框header -->
+            <view class="header-content">
+                <view class="header-back pl-36">
+                    <van-icon name="arrow-left" bindtap="onClose" />
+                </view>
+                <view class="header-title">优惠券/码</view>
+                <view class="header-close pr-36">
+                    <van-icon name="cross" bindtap="onClose" />
+                </view>
+            </view>
+            <!-- 使用优惠码 -->
+            <view class="promo-code-wrap">
+                <input class="promo-code-input" placeholder="请输入优惠码" disabled="{{isUsedPromoCode}}" type="text" bindinput="getPromoCode" value="{{promoCode}}" maxlength="12"/>
+                <button class="theme-customize-bg theme-customize-font-black promo-code-btn"  bindtap="usePromoCode">
+                {{ isUsedPromoCode ? '取消使用' : '使用' }}
+                </button>
+            </view>
+            <!-- 使用优惠券选择器 -->
+            <view class="coupon-code-tip">
+                <image class="tips-img" src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/kfgh9ha90lf1kyxyrpd.png"/>
+                <text>优惠码与优惠券不可叠加使用</text>
+            </view>
+            <view class="coupon-tab_warp">
+                <view class="tabItem" wx:for="{{coupon_tab}}" wx:key="activeIndex" wx:for-index="index" wx:for-item="item" bindtap="setTab" data-index="{{item.activeIndex}}">
+                    <text class="tabTitle {{curTabIndex !== item.activeIndex?'greyColor':''}}">{{item.activeIndex === 1 ?item.tabName+'('+couponList.length+')' : item.tabName+'('+disableCouponList.length+')'}}</text>
+                    <text class="activeBorder theme-customize-bg" wx:if="{{curTabIndex === item.activeIndex}}"></text>
+                </view>
+            </view>
+            <view class="coupon-tips">
+                <view class="coupon-tips-font">{{ couponTips }}<text class="coupon-money-num" wx:if="{{userChooseCouponList.length !== 0 && !isUsedPromoCode}}">￥{{ couponDiscountAmount }}</text>
+                </view>
+                <button wx:if="{{!(isUsedPromoCode || isRecommendCouponList)}}" bindtap="useRecommendCoupon" class="coupon-best-combination">使用推荐优惠</button>
+            </view>
+        </view>
+        <!-- 可用优惠券 -->
+        <view wx:if="{{curTabIndex === 1}}" class="coupon-list">
+            <view wx:if="{{couponList.length>0}}">
+                <view wx:for-index="index" wx:for-item="item" wx:for="{{couponList}}" class="coupon-item">
+                    <CouponItem userChooseBatchIdList="{{userChooseBatchIdList}}" userChooseCuIdList="{{userChooseCuIdList}}" cantOverlay="{{cantOverlay}}" isRecommendCouponList="{{}}" userChooseCouponList="{{userChooseCouponList}}" cantOverlay="{{cantOverlay}}" style="width: 100%" noSuperposition="{{noSuperposition}}" data-item="{{item}}" couponContent="{{item}}" bindchooseCoupon="chooseCoupon" dateInDetail="true">
+                    </CouponItem>
+                </view>
+                <view class="not-use-coupon" bindtap="notUseCoupon">
+                    <view class="not-use-text">不使用优惠券</view>
+                    <view class="choose-box">
+                        <image src="../../../common/assets/images/coupon/coupon_select.png" wx:if="{{isNotUseCoupon}}" class="choose-inner coupon-not-used" />
+                        <view wx:else class="choose-inner"></view>
+                    </view>
+                </view>
+            </view>
+            <view class="coupon_emptypage" wx:else >
+                <image src="../../../common/assets/images/coupon/emptypage.svg" class="coupon_emptyImg"/>
+                <view>您暂无可使用的优惠券</view>
+            </view>
+        </view>
+        <!-- 不可用优惠券 -->
+        <view class="coupon-list disabledList" wx:if="{{curTabIndex==2}}">
+            <view wx:if="{{disableCouponList.length > 0}}">
+                <view wx:for-index="index" wx:for-item="item" wx:for="{{disableCouponList}}" class="coupon-item">
+                    <CouponItem style="width: 100%" couponContent="{{item}}" disabled="true" :dateInDetail="true"></CouponItem>
+                </view>
+            </view>
+            <view class="coupon_emptypage" wx:else>
+                <image src="../../../common/assets/images/coupon/emptypage.svg" class="coupon_emptyImg"/>
+                <view>您暂无不可用的优惠券</view>
+            </view>
+        </view>
+        <view class="coupon-bottom">
+            <button class="coupon-confirm-button" bindtap="confirm">确  定</button>
+        </view>
+    </view>
+</van-popup>