xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

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

@@ -0,0 +1,249 @@
+/* 主题色 */
+.theme-customize-bg {
+  background-color: #1472FF !important;
+}
+.theme-customize-border {
+  border-color: #1472FF !important;
+}
+.theme-customize-font {
+  color: #1472FF !important;
+}
+.theme-customize-light-new {
+  background-color: #9db8f1 !important;
+}
+.theme-customize-bg-light {
+  background-color: #9db8f1 !important;
+}
+.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-select-box .coupon-header {
+  display: flex;
+  flex-direction: column;
+}
+.coupon-select-box .coupon-header .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;
+}
+.coupon-select-box .coupon-header .promo-code-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 36rpx;
+  height: 115rpx;
+  background-color: #fff;
+}
+.coupon-select-box .coupon-header .promo-code-wrap .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;
+}
+.coupon-select-box .coupon-header .promo-code-wrap .promo-code-input::-webkit-input-placeholder {
+  color: #c8c8c8;
+}
+.coupon-select-box .coupon-header .promo-code-wrap .promo-code-input:disabled {
+  color: #999;
+  background-color: #eee;
+}
+.coupon-select-box .coupon-header .promo-code-wrap .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-select-box .coupon-header .coupon-code-tip {
+  display: flex;
+  align-items: center;
+  padding: 0 36rpx;
+  background-color: #fff;
+  height: 39.6rpx;
+}
+.coupon-select-box .coupon-header .coupon-code-tip .tips-img {
+  margin-right: 6.6rpx;
+  width: 30.8rpx;
+  height: 28.6rpx;
+}
+.coupon-select-box .coupon-header .coupon-code-tip text {
+  font-size: 26.4rpx;
+  color: #999;
+}
+.coupon-select-box .coupon-header .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;
+}
+.coupon-select-box .coupon-header .coupon-tab_warp text {
+  display: block;
+}
+.coupon-select-box .coupon-header .coupon-tab_warp .tabItem {
+  position: relative;
+  width: 50%;
+  height: 105.6rpx;
+  line-height: 105.6rpx;
+  text-align: center;
+  cursor: pointer;
+}
+.coupon-select-box .coupon-header .coupon-tab_warp .greyColor {
+  color: #999999;
+  font-size: 30.8rpx;
+  font-weight: normal;
+}
+.coupon-select-box .coupon-header .coupon-tab_warp .activeBorder {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44rpx;
+  height: 4.4rpx;
+  background: #09BB07;
+  border-radius: 3.3rpx;
+}
+.coupon-select-box .coupon-header .coupon-tips {
+  display: flex;
+  background: #fff;
+  align-items: center;
+  justify-items: center;
+  padding: 10rpx 36rpx;
+  justify-content: space-between;
+}
+.coupon-select-box .coupon-header .coupon-tips .coupon-tips-font {
+  line-height: 55rpx;
+  font-size: 26.4rpx;
+  font-weight: 500;
+  color: #000;
+}
+.coupon-select-box .coupon-header .coupon-tips .coupon-tips-font .coupon-money-num {
+  color: #FF4747;
+}
+.coupon-select-box .coupon-header .coupon-tips .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-select-box .coupon-list {
+  box-sizing: border-box;
+  flex: 1;
+  /* 撑满剩余容器高度 */
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  text-align: center;
+  padding: 26.4rpx 35.2rpx 0;
+}
+.coupon-select-box .coupon-list .coupon-item {
+  position: relative;
+  display: flex;
+  margin-bottom: 26.4rpx;
+  border-radius: 8.8rpx;
+  background: #fff;
+}
+.coupon-select-box .coupon-list .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;
+}
+.coupon-select-box .coupon-list .not-use-coupon .not-use-text {
+  width: 558.8rpx;
+  padding-left: 35.2rpx;
+  font-size: 30.8rpx;
+  color: #333;
+  text-align: left;
+}
+.coupon-select-box .coupon-list .not-use-coupon .choose-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 132rpx;
+  height: 100%;
+}
+.coupon-select-box .coupon-list .not-use-coupon .choose-box .choose-inner {
+  width: 39.6rpx;
+  height: 39.6rpx;
+  border-radius: 50%;
+  border: 3.3rpx solid #ccc;
+}
+.coupon-select-box .coupon-list .not-use-coupon .choose-box .coupon-not-used {
+  border: none;
+}
+.coupon-select-box .coupon-bottom {
+  height: 100rpx;
+  display: flex;
+  padding: 0 36rpx;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+}
+.coupon-select-box .coupon-bottom .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-select-box .coupon_emptypage {
+  text-align: center;
+  font-size: 35.2rpx;
+  color: #ADADB4;
+}
+.coupon-select-box .coupon_emptypage .coupon_emptyImg {
+  width: 428rpx;
+  height: 384rpx;
+  margin: 33rpx auto 0;
+  background-size: 100% 100%;
+}

package/miniprogram_dist/coupon/index.css

@@ -0,0 +1,50 @@
+.coupon-panel {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 110rpx;
+  background: #fff;
+}
+.coupon-panel .coupon-left {
+  display: flex;
+  align-items: center;
+}
+.coupon-panel .coupon-left .coupon-title {
+  margin-right: 17.6rpx;
+  line-height: 48.4rpx;
+  font-size: 30.8rpx;
+  color: #333;
+}
+.coupon-panel .coupon-left .coupon-tip {
+  box-sizing: border-box;
+  height: 39.6rpx;
+  line-height: 39.6rpx;
+  padding: 13.2rpx;
+  border-radius: 4.4rpx;
+  font-size: 24.2rpx;
+  color: #FF821F;
+  background: rgba(255, 132, 31, 0.16);
+}
+.coupon-panel .coupon-right {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+}
+.coupon-panel .coupon-right .coupon-value {
+  color: #ff821f;
+  margin-right: 17.6rpx;
+  width: fit-content;
+  font-size: 30.8rpx;
+}
+.coupon-panel .coupon-right .have-no-coupon {
+  margin-right: 17.6rpx;
+  line-height: 44rpx;
+  font-size: 30.8rpx;
+  color: #999;
+}
+.coupon-panel .coupon-right .pay-coupon-img {
+  height: 33rpx;
+}

package/miniprogram_dist/coupon/index.js

@@ -0,0 +1,205 @@
+import {checkPromoCode} from '../common/api/coupon'
+
+Component({
+  /**
+   * 数据监听
+   */
+  observers: {
+    'usedPromoCode, chooseCouponList, couponList, recommendCouponList': function() {
+      this.setData({
+        msg: this.choosedType()
+      })
+    },
+    'prePayInfo': function(data) {
+      if(data) {
+        this.setData({
+          couponDiscount: data?.coupon_discount || 0,
+          usedPromoCode: data?.promo_code || '',
+          couponList: data?.coupon?.valid || [],
+          disableCouponList: data?.coupon?.invalid || [],
+          recommendCouponList: data?.coupon?.recommend?.list || [],
+          chooseCouponList: data?.promo_code ? []
+          : data?.coupon?.choose_use_coupon?.list || [],
+          originalPrice: data?.original_price,
+          goodsPrice:  data?.goods_price
+        })
+        if(!this.data.setCoupon) {
+          let chooseCouponList = this.changeCouponId(this.data.chooseCouponList)
+          this.setPricingInfoFirst(chooseCouponList, this.data.usedPromoCode)
+          this.setData({
+            setCoupon: true
+          })
+        }
+      }
+    },
+  },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 批价返回参数
+    prePayInfo: {
+      type: Object,
+      value: {}
+    },
+    // 批价校验优惠码参数
+    checkCodeParams: {
+      type: Object,
+      value: {}
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    setCoupon: false, // 判断是否第一次进来
+    msg: '', // 文案提示
+    showPopup: false, // 是否显示弹窗
+    couponDiscount: 0, // 选择 优惠券/码 去批价，实际抵扣的金额
+    couponList: [], // 可用优惠券列表
+    disableCouponList: [], // 不可用优惠券列表
+    chooseCouponList: [], // 当前选中的优惠券
+    recommendCouponList: [], // 最佳优惠券
+    usedPromoCode: '', // 当前使用的优惠码
+    originalPrice: 0, // 商品原价
+    goodsPrice: 0, // 商品实际价格
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 将传过来的优惠券列表数组  转换成 优惠券id 数组
+    changeCouponId(list) {
+      const arr = [];
+      for (let i = 0; i < list.length; i++) {
+          arr[i] = list[i].cu_id;
+      }
+      return arr
+  },
+    // 确认选择优惠券/码
+    closeCouponSelect(e) {
+      if (!this.isCouponListEqual(e.detail.params.chooseCouponList, this.data.chooseCouponList) || e.detail.params.usedPromoCode !== this.data.usedPromoCode) {
+        this.setData({
+          chooseCouponList: e.detail.params.chooseCouponList,
+          usedPromoCode: e.detail.params.usedPromoCode
+        })
+        let cuId
+        if (Object.keys(this.data.chooseCouponList).length === 0) {
+            cuId = 'couponNoUse'
+        } else {
+            cuId = this.changeCouponId(this.data.chooseCouponList)
+        }
+        this.setPricingInfo(cuId, e.detail.params.usedPromoCode)
+      }
+      this.setData({
+        showPopup: e.detail.params.showPopup,
+      })
+    },
+    setPricingInfoFirst(cu_id, promo_code) {
+      this.triggerEvent('dataChange', {
+        name: "couponSelect",
+        payParams: {
+          cu_id: cu_id,
+          promo_code: promo_code
+        }
+      })
+    },
+    setPricingInfo(cu_id, promo_code) {
+      this.triggerEvent('dataChange', {
+        name: "couponSelect",
+        payParams: {
+          cu_id: cu_id,
+          promo_code: promo_code
+        },
+        prePayParams: {
+          cu_id: cu_id,
+          promo_code: promo_code
+        }
+      })
+    },
+    // 判断两个优惠券列表是否相等
+    isCouponListEqual(usedCoupon, choosedCoupon) {
+      if (choosedCoupon.length !== usedCoupon.length) {
+          return false;
+      }
+      for (let i = 0; i < usedCoupon.length; i++) {
+          if (this.beforeCouponList(choosedCoupon).indexOf(usedCoupon[i].cu_id) === -1) {
+              return false;
+          }
+      }
+      return true;
+    },
+    // 遍历原先数组的列表
+    beforeCouponList(list) {
+      return list.map(item => item.cu_id);
+    },
+    // 展示优惠券选择器弹窗
+    showCouponSelect() {
+      this.setData({
+        showPopup: true
+      })
+    },
+    // 判断两个优惠券列表是否相等
+    isCouponListEqual (curUsedCoupon, curChoosedCoupon) {
+      let usedCoupon = typeof (curUsedCoupon) === 'string' ? [] : curUsedCoupon;
+      let chooseCouponList = typeof (curChoosedCoupon) === 'string' ? [] : curChoosedCoupon;
+      if (chooseCouponList.length !== usedCoupon.length) {
+        return false;
+      }
+      for (let i = 0; i < usedCoupon.length; i++) {
+        if (this.beforeCouponList(chooseCouponList).indexOf(usedCoupon[i].cu_id) === -1) {
+          return false;
+        }
+      }
+      return true;
+    },
+    // 点击使用优惠码，验证优惠码是否可用
+     checkPromoCodeCanUse(e) {
+      const params = {
+          ...this.data.checkCodeParams,
+          cu_id: '',
+          promo_code: e.detail.promoCode,
+          original_price: this.data.originalPrice
+      };
+      checkPromoCode(params)
+      .then((res) => {
+        if(res.data.code === 0) {
+          // 优惠码可用，调用 couponSelect 组件的成功回调. 会关闭选择优惠码的面板
+          e.detail.success()
+        } else {
+          wx.showToast({
+            title: res.data.msg,
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      })
+      .catch(err => {
+        // 处理优惠码不可用的情况， toast 提示
+        console.error(err)
+      })
+  },
+    // 遍历原先数组的列表
+    beforeCouponList (list) {
+      return list.map(item => {
+        return item.cu_id;
+      });
+    },
+    // 判断当前显示文案
+    choosedType () {
+      console.log('properties', this.properties)
+      if (this.properties.usedPromoCode) {
+        return `已选优惠码`;
+      }
+      if (this.properties.couponList.length > 0 && this.properties.chooseCouponList.length === 0) {
+        return `${this.properties.couponList.length}张可用`;
+      } else if (this.properties.chooseCouponList.length > 0){
+        return this.isCouponListEqual(this.properties.chooseCouponList, this.properties.recommendCouponList) ? `已选推荐优惠（${this.properties.recommendCouponList.length}张）` : `已选${this.properties.chooseCouponList.length}张优惠券`;
+      }
+
+      return '';
+    },
+  },
+})

package/miniprogram_dist/coupon/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "CouponSelect": "./components/CouponSelect/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

package/miniprogram_dist/coupon/index.less

@@ -0,0 +1,51 @@
+.confrim-order {
+    padding: 0 32rpx;
+    // margin-bottom: 16rpx;
+    background: #FFF;
+    .coupon-panel {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 88rpx;
+        .coupon-left {
+            display: flex;
+            align-items: center;
+            .coupon-title {
+                margin-right: 17.6rpx;
+                line-height: 48.4rpx;
+                font-size: 28rpx;
+                color: #333;
+            }
+            .coupon-tip {
+                box-sizing: border-box;
+                height: 39.6rpx;
+                line-height: 39.6rpx;
+                padding: 0 13.2rpx;
+                border-radius: 4.4rpx;
+                font-size: 24.2rpx;
+                color: #FF821F;
+                background: rgba(255, 132, 31, 0.16);
+            }
+        }
+        .coupon-right {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: flex-end;
+            .coupon-value {
+                color: #ff821f;
+                margin-right: 8rpx;
+                width: fit-content;
+                font-size: 28rpx;
+            }
+            .have-no-coupon {
+                margin-right: 8rpx;
+                line-height: 44rpx;
+                font-size: 28rpx;
+                color: #999;
+            }
+        }
+    }
+}

package/miniprogram_dist/coupon/index.wxml

@@ -0,0 +1,24 @@
+<!-- 订单处优惠券选择器入口 -->
+<view class="confrim-order">
+    <view class="coupon-panel">
+        <view class="coupon-left">
+            <span class="coupon-title">优惠券/码</span>
+            <span wx:if="{{msg}}" class="coupon-tip"> {{msg}}</span>
+        </view>
+        <view bindtap="showCouponSelect" class="coupon-right">
+            <span wx:if="{{couponDiscount != 0}}" class="coupon-value">
+                -¥ {{coupon.couponDiscount(couponDiscount)}}
+            </span>
+            <span wx:elif="{{couponList.length === 0}}" class="have-no-coupon">无可用优惠券</span>
+            <van-icon name="arrow" color="#999" />
+        </view>
+    </view>
+</view>
+<wxs module="coupon">
+    var  couponDiscount= function(num) {
+        return (num/100).toFixed(2);
+    }
+    module.exports.couponDiscount = couponDiscount;
+</wxs>
+<CouponSelect bindcheckPromoCode="checkPromoCodeCanUse" bind:close="closeCouponSelect" showPopup="{{showPopup}}" disableCouponList="{{disableCouponList}}" couponList="{{couponList}}" usedPromoCode="{{usedPromoCode}}" chooseCouponList="{{chooseCouponList}}" recommendCouponList="{{recommendCouponList}}" originPrice="{{goodsPrice}}" ></CouponSelect>
+  

package/miniprogram_dist/coupon/index.wxss

@@ -0,0 +1,50 @@
+.confrim-order {
+  padding: 0 32rpx;
+  background: #FFF;
+}
+.confrim-order .coupon-panel {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 88rpx;
+}
+.confrim-order .coupon-panel .coupon-left {
+  display: flex;
+  align-items: center;
+}
+.confrim-order .coupon-panel .coupon-left .coupon-title {
+  margin-right: 17.6rpx;
+  line-height: 48.4rpx;
+  font-size: 28rpx;
+  color: #333;
+}
+.confrim-order .coupon-panel .coupon-left .coupon-tip {
+  box-sizing: border-box;
+  height: 39.6rpx;
+  line-height: 39.6rpx;
+  padding: 0 13.2rpx;
+  border-radius: 4.4rpx;
+  font-size: 24.2rpx;
+  color: #FF821F;
+  background: rgba(255, 132, 31, 0.16);
+}
+.confrim-order .coupon-panel .coupon-right {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: flex-end;
+}
+.confrim-order .coupon-panel .coupon-right .coupon-value {
+  color: #ff821f;
+  margin-right: 8rpx;
+  width: fit-content;
+  font-size: 28rpx;
+}
+.confrim-order .coupon-panel .coupon-right .have-no-coupon {
+  margin-right: 8rpx;
+  line-height: 44rpx;
+  font-size: 28rpx;
+  color: #999;
+}