xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.js

@@ -0,0 +1,429 @@
+// src/ConfirmOrder/components/GoodsInfo/index.js
+import {
+  RESOURCE_TYPES,
+  OLC_TYPE,
+  ENTITY_GOODS,
+  VALUE_COUPON,
+  OFFLINE_CLASS,
+  MARKETING_LIMIT_DISCOUNT,
+  MARKETING_SEC_KILL,
+  MEMBER,
+  IMG_TEXT,
+  AUDIO,
+  VIDEO,
+  LIVE,
+  SPECIAL_COLUMN,
+  E_BOOK,
+  TRAINING_CAMP,
+  SERVICE_GOODS,
+  SVIP_SPU_TYPE,
+} from "../../../common/utils/constants";
+import {
+  isEmptyObject
+} from "../../../common/utils/index"
+const computedBehavior = require('miniprogram-computed').behavior
+
+Component({
+  behaviors: [computedBehavior],
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    goodsInfo: {
+      type: Object,
+      value: () => {},
+      observer(val) {
+        if (val?.sku_min_purchase && this.data.baseInfo?.count <= val?.sku_min_purchase) {
+          this.setData({
+            count: val.sku_min_purchase
+          })
+        }
+      }
+    },
+    baseInfo: {
+      type: Object,
+      value: () => {}
+    },
+    cartGoodsList: {
+      type: Array,
+      value: () => [],
+    },
+    confirmOrderInfo: {
+      type: Object,
+      value: () => {},
+    },
+    isCart: {
+      type: Number,
+      value: 0,
+    },
+    cartInfoLoaded: {
+      type: Boolean,
+      value: false,
+    },
+    svipInfo: {
+      type: Object,
+      value: () => {},
+    },
+    marketingData: {
+      type: Object,
+      value: () => {},
+    },
+    businessConf: {
+      type: Object,
+      value: () => {},
+    },
+    selectedSku: {
+      type: Object,
+      value: () => {},
+    },
+    prePayParams: {
+      type: Object,
+      value: () => {},
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    goodsCount: 1,
+    first: true
+  },
+  computed: {
+    historyBuy(data) {
+      return data.goodsInfo?.has_buy_num
+    },
+    minCount(data) {
+      return data.goodsInfo?.sku_min_purchase || 1;
+    },
+    maxCount(data) {
+      // 下面三个判断语句都是判断活动的库存限购
+      // 商品限购要跟库存对比。
+      var maxCount = 0
+      if (data.isTeam) {
+        if (data.marketingData && data.marketingData.can_buy_num >= 0) {
+          maxCount = data.marketingData.can_buy_num;
+        }
+      }
+      if (data.isDiscounted) {
+        if (
+          data.marketingData &&
+          data.marketingData.now_stock > 0 &&
+          data.marketingData.all_stock > 0
+        ) {
+          maxCount = data.marketingData.now_stock;
+        }
+      }
+      if (data.isSecKill) {
+        if (
+          data.marketingData &&
+          data.marketingData.event_has_stock &&
+          data.marketingData.event_stocks_left > 0
+        ) {
+          maxCount = data.marketingData.event_stocks_left;
+        }
+      }
+      if (data.sendFriend) {
+        return 1000;
+      }
+
+      //设置了限购
+      if (maxCount === 0 || maxCount > data.goodsInfo?.stock) {
+        maxCount = data.goodsInfo?.stock
+      }
+
+      if (data.goodsInfo?.limit_purchase) {
+        let count = data.goodsInfo?.limit_purchase - (data.goodsInfo?.has_buy_num || 0)
+        count < 0 ? count = 0 : count
+        return count < maxCount ? count : maxCount
+      } else {
+        return maxCount
+      }
+    },
+    showStepper(data) {
+      let spuTypes = [ENTITY_GOODS, VALUE_COUPON, SERVICE_GOODS];
+      return (
+        (spuTypes.includes(data.baseInfo?.spu_type) || data.sendFriend) &&
+        !data.goodsInfo.is_goods_package
+      );
+    },
+    marketingTag(data) {
+      if (data.isDiscounted) {
+        return "限时折扣";
+      } else if (data.isTeam) {
+        return "拼团";
+      } else if (data.isSecKill) {
+        if (data.noSubscribe) {
+          return "";
+        }
+        return "秒杀";
+      }
+      return "";
+    },
+    // 是否送好友下单
+    sendFriend(data) {
+      if (data.baseInfo?.pre_pay_type == 2) {
+        return true;
+      }
+      return false;
+    },
+    goodsPrice(data) {
+      if (data.useSvipPrice) {
+        return data.svipPrice;
+      }
+      // 有营销信息，优先取营销价格
+      if (data.marketingPrice) {
+        return data.marketingPrice;
+      }
+
+      return data.goodsInfo?.piece_price;
+    },
+    specification(data) {
+      if (data.goodsInfo?.spu_type === MEMBER) {
+        return data.memberSpec;
+      }
+      return (
+        (data.goodsInfo?.attr_value &&
+          data.goodsInfo?.attr_value
+          .map((spec) => {
+            return spec?.attr_value;
+          })
+          .join(";")) ||
+        (data.selectedSku &&
+          Object.keys(data.selectedSku)
+          .map((skuKey) => {
+            return data.selectedSku[skuKey];
+          })
+          .join(";"))
+      );
+    },
+    goodsTitleTag(data) {
+      return data.OLCConf && OLC_TYPE[data.OLCConf.teaching_model];
+    },
+    OLCConf(data) {
+      return data.businessConf[OFFLINE_CLASS];
+    },
+    hasGoodsInfo(data) {
+      return !isEmptyObject(data.goodsInfo) || data.cartGoodsList.length;
+    },
+    goodsImgSrc(data) {
+      if (Array.isArray(data.goodsInfo?.goods_img)) {
+        return data.goodsInfo?.goods_img[0];
+      }
+      return data.goodsInfo?.goods_img;
+    },
+    goodsTag(data) {
+      return data.goodsInfo?.goods_tag || RESOURCE_TYPES[data.baseInfo?.spu_type];
+    },
+    useSvipPrice(data) {
+      return (
+        data.supportSvip &&
+        data.svipPrice > 0 &&
+        (data.svipPrice < data.marketingPrice || !data.marketingPrice) &&
+        data.baseInfo?.pre_pay_type != 2
+      );
+    },
+    supportSvip(data) {
+      let svipAvailableGoods = SVIP_SPU_TYPE;
+      return svipAvailableGoods.includes(data.baseInfo?.spu_type);
+    },
+    // 超级会员价
+    svipPrice(data) {
+      let skuPriceInfo = data.svipInfo.sku_svip_price_list;
+      if (skuPriceInfo && data.isSvip) {
+        return skuPriceInfo[data.baseInfo.sku];
+      }
+      return 0;
+    },
+    isSvip(data) {
+      if (data.svipInfo.svip_info && data.svipInfo.svip_info.user_svip_info) {
+        return data.svipInfo.svip_info.user_svip_info.state === 1;
+      }
+      return false;
+    },
+    // 营销价格
+    marketingPrice(data) {
+      if (data.marketingData && data.joinMarketingActivity) {
+        if (data.noSubscribe) {
+          return 0;
+        }
+        let skuInfo =
+          (data.marketingData.specs_info || []).find((specs) => {
+            return specs.specs_id === data.baseInfo.sku;
+          }) || {};
+
+        if (skuInfo.stage_prices && data.baseInfo.step) {
+          let step = Number(data.baseInfo.step);
+          if (skuInfo.stage_prices[step]) {
+            return skuInfo.stage_prices[step].member;
+          }
+        }
+
+        return skuInfo.price || data.marketingData.low_price;
+      }
+      return 0;
+    },
+    // 是否参与了营销活动
+    joinMarketingActivity(data) {
+      return data.isDiscounted || data.isTeam || data.isSecKill;
+    },
+    isDiscounted(data) {
+      return data.marketingData?.activity_type === MARKETING_LIMIT_DISCOUNT;
+    },
+    isSecKill(data) {
+      return (
+        data.marketingData?.activity_type === MARKETING_SEC_KILL &&
+        data.marketingData.in_activity === 1 &&
+        data.marketingData.event_has_stock === 1
+      );
+    },
+    // 是否参加拼团
+    isTeam(data) {
+      return data.baseInfo?.isTeam == "true";
+    },
+    // 如果是秒杀但没有预约
+    noSubscribe(data) {
+      return (
+        data.isSecKill &&
+        data.marketingData.is_subscribe === 1 &&
+        data.marketingData.user_subscribed === 0
+      );
+    },
+    count(data) {
+      return data.prePayParams?.count || data.baseInfo?.count || 1
+    }
+  },
+  observers: {
+    minCount(count) {
+      let event = {
+        detail: count
+      }
+      if (count != 1 && this.data.goodsInfo.sku_min_purchase <= 1) {
+        this.changeVal(event)
+      }
+    },
+  },
+  lifetimes: {
+    attached: function () {
+      this.initStepper();
+    },
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    initStepper() {
+      // 抛出count初始值
+      this.setData({
+        goodsCount: this.data.count
+      })
+      this.countBlur(true);
+    },
+    overlimit(limitType) {
+      if (limitType.detail === 'plus') {
+        if (this.data.goodsInfo?.stock === this.data.count || this.data.count > this.data.goodsInfo?.stock) {
+          wx.showToast({
+            title: '该商品库存不足',
+            icon: 'none',
+            duration: 2000
+          })
+          return
+        }
+        //限购
+        if (this.data.maxCount === this.data.count) {
+          this.data.historyBuy ?
+            wx.showToast({
+              title: `该商品限购${this.data.goodsInfo?.limit_purchase}件哦，你已购买${this.data.historyBuy}件`,
+              icon: 'none',
+              duration: 2000
+            }) :
+            wx.showToast({
+              title: `该商品限购${this.data.goodsInfo?.limit_purchase}件哦`,
+              icon: 'none',
+              duration: 2000
+            })
+        }
+        if (this.data.maxCount < this.data.count) {
+          this.data.historyBuy ?
+            wx.showToast({
+              title: `该商品限购${this.data.goodsInfo?.limit_purchase}件哦，你已购买${this.data.historyBuy}件`,
+              icon: 'none',
+              duration: 2000
+            }) :
+            wx.showToast({
+              title: `该商品限购${this.data.goodsInfo?.limit_purchase}件哦`,
+              icon: 'none',
+              duration: 2000
+            })
+        }
+      }
+      if (limitType.detail === 'minus') {
+        if (this.data.minCount === this.data.count || this.data.minCount > this.data.count) {
+          wx.showToast({
+            title: `该商品${this.data.minCount}件起售哦`,
+            icon: 'none',
+            duration: 2000
+          })
+        }
+      }
+    },
+    changeVal(event) {
+      let data = event.detail
+      if (data <= 0) {
+        data = 1
+      }
+      if (data > 1000) {
+        wx.setStorageSync('toastWarn', 'true')
+      }
+      this.setData({
+        goodsCount: (this.data.first === true && this.data.baseInfo?.count && this.data.baseInfo?.count > Number(data)) ? this.data.baseInfo?.count : Number(data)
+        // (this.data.baseInfo?.count && this.data.baseInfo?.count > Number(data)) ? this.data.baseInfo?.count : Number(data),
+      }, () => {
+        this.setData({
+          first: false
+        })
+        this.countBlur()
+      })
+    },
+    // init 是否初次触发
+    countBlur(init) {
+      if (this.data.count === this.data.goodsCount && init !== true) {
+        return false;
+      }
+      if (!this.data.showStepper) {
+        this.setData({
+          count: 1,
+          goodsCount: 1
+        })
+      }
+      let count = this.data.goodsCount;
+      if (count > this.data.maxCount && this.data.maxCount > 0) {
+        count = this.data.maxCount;
+      }
+      this.triggerEvent("dataChange", {
+        name: "goodsInfo",
+        prePayParams: {
+          count: count,
+        },
+        payParams: {
+          count: count,
+        },
+      });
+      let obj = {
+        ...this.data.baseInfo,
+        count: count
+      };
+      this.triggerEvent("updataData", {
+        baseInfoQuery: obj
+      })
+      if (this.data.first) {
+        this.setData({
+          first: false
+        })
+      }
+    },
+    toPrice(value) {
+      return `￥${((value || 0) / 100).toFixed(2)}`;
+    },
+  }
+})

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ImageData": "./components/ImageData/index",
+    "van-tag": "@vant/weapp/tag/index",
+    "van-stepper": "@vant/weapp/stepper/index",
+    "GoodsCommerce": "./components/GoodsCommerce/index"
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.less

@@ -0,0 +1,182 @@
+.goods-info-wrapper {
+  margin-bottom: 18rpx;
+  background: #fff;
+
+  .goods-info {
+    padding: 32rpx;
+
+    .shop-title {
+      display: flex;
+      align-items: center;
+
+      .shop-img {
+        width: 32rpx;
+        height: 32rpx;
+        margin-right: 16rpx;
+      }
+
+      .shop-name {
+        font-size: 28rpx;
+      }
+    }
+
+    .goods-wrapper {
+      display: flex;
+      margin-top: 32rpx;
+
+      .goods-thumbnail {
+        position: relative;
+        flex: 0 0 180rpx;
+        height: 180rpx;
+        border-radius: 0.08rem;
+        border: 2rpx solid #e5e5e5;
+        overflow: hidden;
+
+        .goods-type {
+          position: absolute;
+          right: 8rpx;
+          bottom: 8rpx;
+          text-size-adjust: none;
+          font-size: 20rpx;
+          background: rgba(51, 51, 51, 0.6);
+          color: #ffffff !important;
+          padding: 8rpx;
+          border-radius: 4rpx;
+        }
+
+        .svip-tag {
+          position: absolute;
+          top: 0;
+          left: 0;
+          padding: 2rpx 8rpx;
+          background: linear-gradient(315deg, #333333 0%, #525252 68%, #333333 100%);
+          border-radius: 8rpx 0px 8rpx 0px;
+        }
+
+        .svip-tag-text {
+          font-size: 20rpx;
+          text-size-adjust: none;
+          color: #ffc266;
+          // background: linear-gradient(90deg, #ffe4ad 0%, #ffc266 100%);
+          // background-clip: text;
+          // -webkit-text-fill-color: transparent;
+        }
+      }
+
+      .goods-detail {
+        flex: 1;
+        margin-left: 24rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 0;
+
+        .goods-title {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          word-break: break-all;
+
+          .goods-tag {
+            margin-right: 4rpx;
+            white-space: nowrap;
+            color: #1472FF;
+            border: 2rpx solid #1472FF;
+            padding: 0 8rpx;
+            border-radius: 4rpx;
+            background-color: #fff;
+            top: -4rpx;
+            position: relative;
+          }
+
+          .goods-name {
+            font-size: 28rpx;
+          }
+        }
+
+        .goods-specification {
+          margin-top: 12rpx;
+          height: 36rpx;
+          color: #999;
+          word-break: break-all;
+        }
+
+        .goods-quantity {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-end;
+          margin-top: 12rpx;
+          width: 100%;
+          color: #999;
+
+          .goods-pay-info {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+          }
+
+          .goods-limit {
+            margin-bottom: 16rpx;
+            display: flex;
+            font-size: 24rpx;
+
+            .border-blue {
+              border: #1472FF .02rem solid;
+              color: rgba(20, 114, 255, 1);
+              padding: 0 8rpx;
+              margin-right: 8rpx;
+              border-radius: 4rpx;
+            }
+
+            .border-orange {
+              border: rgba(255, 120, 31, 1) 2rpx solid;
+              color: rgba(255, 120, 31, 1);
+              padding: 0 8rpx;
+              border-radius: 4rpx;
+            }
+          }
+
+          .goods-price {
+            display: inline-block;
+            margin-right: 8rpx;
+            margin-bottom: 0;
+          }
+
+          .goods-tags {
+            display: inline-block;
+          }
+
+          .goods-tag {
+            display: inline-block;
+            padding: 2rpx 12rpx;
+            font-size: 20rpx;
+            border-radius: 20rpx;
+
+            &+.goods-tag {
+              margin-left: 8rpx;
+            }
+
+            &.marketing-tag {
+              color: #ff781f;
+              background: #fff3eb;
+            }
+
+            &.send-friend {
+              color: #07c160;
+              border: 2rpx solid rgba(7, 193, 96, 0.5);
+            }
+          }
+
+          .goods-counter {
+            flex-shrink: 0;
+
+            .goods-plus, .goods-minus {
+              background: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/miniprogram_dist/ConfirmOrder/components/GoodsInfo/index.wxml

@@ -0,0 +1,75 @@
+<!--src/ConfirmOrder/components/GoodsInfo/index.wxml-->
+<wxs src="./filter.wxs" module="tools" />
+<view class="goods-info-wrapper" wx:if="{{ hasGoodsInfo }}">
+  <view class="goods-info">
+    <view class="shop-title">
+      <!-- <i class="iconfont icon-shop_icon"></i> -->
+      <image src="../../../common/assets/images/shop.png" class="shop-img"></image>
+      <view class="shop-name">{{ confirmOrderInfo.app_info.shop_name }}</view>
+    </view>
+    <view class="goods-wrapper">
+      <view class="goods-thumbnail">
+        <ImageData class="img" wx:if="{{ goodsImgSrc }}" src="{{ goodsImgSrc }}" compressWidth="120" compressHeight="120" showCompress="true"></ImageData>
+        <view class="goods-type" wx:if="{{ goodsInfo.goods_tag_is_show }}">{{ goodsTag }}</view>
+        <view class="svip-tag svip-tag-text" wx:if="{{ useSvipPrice }}">超级会员</view>
+      </view>
+      <view class="goods-detail">
+        <view class="goods-header">
+          <view class="goods-title">
+            <view class="goods-tag ET tag" wx:if="{{ goodsTitleTag }}">{{ goodsTitleTag }}</view>
+            <view class="goods-name">{{ goodsInfo.goods_name }}</view>
+          </view>
+          <view class="goods-specification ET0">{{ specification }}</view>
+        </view>
+        <view class="goods-quantity ET0">
+          <view class="goods-pay-info">
+            <view class="goods-limit" wx:if="{{ showStepper }}">
+              <view class="border-blue" wx:if="{{ goodsInfo.sku_min_purchase > 1 }}">{{ goodsInfo.sku_min_purchase }}件起售</view>
+              <view class="border-orange" wx:if="{{ goodsInfo.limit_purchase }}">限购{{ goodsInfo.limit_purchase }}件</view>
+            </view>
+            <view>
+              <view class="goods-price">
+                ￥{{ tools.toPrice(goodsPrice) }}
+              </view>
+              <view class="goods-tags">
+                <view class="goods-tag marketing-tag" wx:if="{{ marketingTag && !useSvipPrice }}">
+                  {{ marketingTag }}
+                </view>
+                <view class="goods-tag send-friend" wx:if="{{ sendFriend }}">
+                  赠送好友
+                </view>
+              </view>
+            </view>
+          </view>
+          <view class="goods-counter">
+            <van-stepper
+              wx:if="{{ showStepper }}"
+              custom-class="goods-selector" 
+              plus-class="goods-plus" 
+              minus-class="goods-minus" 
+              value="{{ count }}" 
+              max="{{ maxCount || 100000 }}" 
+              min="{{ minCount || 1 }}" 
+              integer="{{ true }}"
+              async-change="{{ true }}"
+              bind:change="changeVal" 
+              bind:blur="countBlur" 
+              bind:plus="countBlur" 
+              bind:minus="countBlur" 
+              bind:overlimit="overlimit"
+            />
+            <view class="goods-count" wx:else>x{{ count }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <GoodsCommerce
+    class="goods-commerce"
+    wx:if="{{ !isCart }}"
+    spuId="{{ baseInfo.id }}"
+    resourceId="{{ baseInfo.resource_id }}"
+    resourceType="{{ baseInfo.resource_type }}"
+    isAlive="{{ baseInfo.isAlive }}"
+  ></GoodsCommerce>
+</view>