xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/Sku/goods-info/index.wxss

@@ -0,0 +1,48 @@
+.sku-header-img-wrap {
+  position: relative;
+  width: 180rpx;
+  height: 180rpx;
+  margin: 24rpx 0 24rpx;
+  overflow: hidden;
+  background: #f7f8fa;
+  border-radius: 8rpx;
+  flex-shrink: 0;
+}
+.sku-header-img-wrap .thumb {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.sku-header-goods-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 32rpx 40rpx 24rpx 20px;
+}
+.red {
+  color: #ee0a24;
+}
+.font28 {
+  font-size: 46rpx;
+}
+.sku-header {
+  margin: 0 32rpx;
+  display: flex;
+}
+.sku-header .sku-header-goods-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 32rpx 40rpx 24rpx 20px;
+}
+.sku-header .sku-header-goods-info .sku-activity-wrap {
+  font-size: 12px;
+  background-color: rgba(255, 76, 81, 0.2);
+  color: #ff4c51;
+  padding: 2px 6px;
+  border-radius: 10px;
+  min-width: 60rpx;
+  width: max-content;
+}

package/miniprogram_dist/Sku/index/index.js

@@ -0,0 +1,280 @@
+const computedBehavior = require('miniprogram-computed').behavior
+import { fenToYuan } from '../../common/utils/currency'
+import { isSkuChoosable, isAllSelected, getSkuComb, getSelectedSkuValues, getSkuImgValue } from '../../common/utils//helper'
+
+
+Component({
+  behaviors: [computedBehavior],
+
+  options: {
+    multipleSlots: true,
+    styleIsolation: 'shared'
+  },
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    show: {
+      type: Boolean,
+    },
+    skuTree: {
+      type: Array,
+      value: [],
+    },
+    skuList: {
+      type: Array,
+      value: []
+    },
+    // 默认商品 sku 缩略图
+    picture: String,
+    // 默认价格（单位分）
+    price: {
+      type: String,
+      value: '',
+    },
+    // 商品总库存
+    stock: {
+      type: Number,
+      value: 0
+    },
+    // 是否显示商品详情
+    showGoodsDetail: {
+      type: Boolean,
+      value: false,
+    },
+    // 是否显示购物车
+    showCart: {
+      type: Boolean,
+      value: true,
+    },
+    //营销活动tag
+    priceTag:{
+      type: String,
+      value: '',
+    },
+     //限购
+    limitPurchase:{
+        type:Number,
+        value:0
+    },
+    //起售
+    startSaleNum:{
+        type:Number,
+        value:1
+    },
+    //已购数量
+    hasBuy:{
+      type:Number,
+      value:0
+    },
+    show_stock:{
+      type: Boolean,
+      value: true
+    },
+    danBuy:{
+      type: Boolean,
+      value: false
+    },
+    showSkuStepper:{
+      type: Boolean,
+      value: false
+    }
+
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    selectedSku: {},
+    countNum: 1,
+  },
+
+  computed: {
+    isSkuCombSelected (data) {
+      return isAllSelected(data.skuTree, data.selectedSku)
+    },
+
+    selectedSkuComb (data) {
+      let skuComb = null
+      if (data.isSkuCombSelected) {
+        skuComb = getSkuComb(data.skuList, data.selectedSku) || null
+      }
+      return skuComb
+    },
+
+    image (data) {
+      // 选择单一规格时，切换封面图
+      const selectedValue = getSkuImgValue(data.skuTree, data.selectedSku)
+      const image = selectedValue ? selectedValue.image : data.picture
+      return image
+    },
+
+    priceText (data) {
+      if (data.selectedSkuComb) {
+        return fenToYuan(data.selectedSkuComb.price)
+      }
+      // if(data)
+      return data.price
+    },
+
+    stockNum (data) {
+      if (data.selectedSkuComb) {
+        return data.selectedSkuComb.stock
+      }
+      return data.stock
+    },
+
+    selectedCount (data) {
+      //有起售
+      if(data.startSaleNum>1){
+        return  data.stockNum < data.startSaleNum ? data.stockNum :data.startSaleNum
+      }else if (data.startSaleNum===1 && data.selectedSkuComb) {
+        return data.stockNum < data.countNum ? data.stockNum : data.countNum
+      }else{
+        return data.countNum
+      }
+
+    },
+
+    selectedSkuValues (data) {
+      return getSelectedSkuValues(data.skuTree, data.selectedSku)
+    },
+
+    selectedText (data) {
+      if (data.selectedSkuComb) {
+        const values = data.selectedSkuValues
+        return `已选 ${values.map((item) => item.name).join(' ')}`
+      }
+
+      const unselectedSku = data.skuTree.filter(
+        (item) => data.selectedSku[item.k_s] === ''
+      ).map(item => item.name)
+
+      return `请选择 ${unselectedSku.join(' ')}`
+    },
+  },
+
+  lifetimes: {
+    attached () {
+
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onClose () {
+      this.triggerEvent('close')
+    },
+
+    resetSelectedSku () {
+      let selectedSku = {}
+      const { skuTree, skuList } = this.data
+
+      // 重置 selectedSku
+      skuTree.forEach(item => {
+        selectedSku[item.k_s] = ''
+      })
+
+      skuTree.forEach(item => {
+        const key = item.k_s
+        // 规格值只有1个时，优先判断
+        const valueId = item.values.length === 1 ? item.values[0].name : ''
+
+        if (valueId && isSkuChoosable(skuList, selectedSku, { key, valueId })) {
+          selectedSku[key] = valueId
+        }
+      })
+
+      this.setData({ selectedSku })
+    },
+
+    onSelect (e) {
+      if(e.detail){
+        let { name, skuKeyStr } = e.detail
+        let selectedSku = {
+          ...this.data.selectedSku,
+          [skuKeyStr]: this.data.selectedSku[skuKeyStr] === name ? '' : name,
+        }
+        let composeSelectObj ={
+          selectedSku,
+          skuValue:e.detail
+        }
+        this.setData({ selectedSku })
+        if(this.checkAllSel(selectedSku)){
+          composeSelectObj.selectedSkuComb = this.getSkuData()
+        }
+        this.triggerEvent('onSelected', composeSelectObj)
+      }else{
+        //用于拼团选择
+        this.setData({ priceText:e })
+      }
+
+    },
+    checkAllSel(obj){
+      for(var i in obj){
+        if(!obj[i])  return false
+      }
+      return true
+    },
+    onChangeStepper (e) {
+      this.setData({
+        selectedCount: this.data.stockNum <e.detail ? this.data.stockNum : e.detail
+      })
+      this.setData({ countNum: e.detail })
+    },
+
+    onBuyOrAddCart (e) {
+      if (!this.data.isSkuCombSelected) {
+        wx.showToast({
+          icon: 'none',
+          title: this.data.selectedText,
+        })
+      } else {
+        if(this.data.selectedCount < this.data.startSaleNum ){
+          wx.showToast({
+                icon: 'none',
+                title: '库存不足',
+          })
+          return
+        }
+        
+        if( (this.data.limitPurchase >0 &&  this.data.limitPurchase - this.data.hasBuy < this.data.startSaleNum) || (this.data.limitPurchase >0 &&  this.data.selectedCount + this.data.hasBuy > this.data.limitPurchase)){
+          let msg = `该商品限购${this.data.limitPurchase}件哦,你已购买${this.data.hasBuy}件`;
+          wx.showToast({
+                icon: 'none',
+                title: msg,
+          })
+          return
+        }
+        this.triggerEvent(e, this.getSkuData())
+      }
+    },
+
+    getSkuData () {
+      // console.log('-------->???????',this.data.selectedSkuComb)
+      return {
+        selectedCount: this.data.selectedCount,
+        selectedSkuComb: this.data.selectedSkuComb
+      }
+    },
+
+  },
+
+  observers: {
+    show (value) {
+
+    },
+
+    skuTree () {
+      this.resetSelectedSku()
+    },
+
+    selectedCount (value) {
+      this.setData({ countNum: value })
+    }
+  }
+})

package/miniprogram_dist/Sku/index/index.json

@@ -0,0 +1,12 @@
+{
+    "component": true,
+    "usingComponents": {
+      "van-row": "@vant/weapp/row/index",
+      "van-col": "@vant/weapp/col/index",
+      "van-popup": "@vant/weapp/popup/index",
+      "van-button": "@vant/weapp/button/index",
+      "sku-row-item": "../row-item/index",
+      "sku-goods-info":"../goods-info/index",
+      "sku-step":"../step/index"
+    }
+  }

package/miniprogram_dist/Sku/index/index.less

@@ -0,0 +1,78 @@
+/* components/sku/index.wxss */
+.sku-popup {
+    /* min-height: 50%;
+    max-height: 80%; */
+  }
+
+  .sku-header {
+    margin: 0 32rpx;
+    display: flex;
+  }
+
+
+  .sku-header-goods-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 32rpx 40rpx 24rpx 20px;
+  }
+
+  .sku-goods-price {
+
+  }
+
+  .sku-price-symbol {
+
+  }
+
+  .sku-price-num {
+
+  }
+
+  .sku-header-item {
+    margin-top: 12rpx;
+  }
+
+  /*  */
+  .sku-body {
+    flex: 1 1 auto;
+    max-height: 560rpx;
+  }
+
+  .sku-group-container {
+    padding-top: 24rpx;
+    min-height: 435rpx;
+  }
+
+  .sku-row {
+    margin: 0 32rpx 24rpx;
+  }
+
+  .sku-row:last-child {
+    margin-bottom: 0;
+  }
+
+  .sku-row-title, .sku-goods-detail-title {
+    padding-bottom: 24rpx;
+  }
+
+  /*  */
+  .sku-stepper-stock {
+    margin: 0 32rpx;
+    padding: 24rpx 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .sku-row-title, .sku-stepper-title, .sku-goods-detail-title {
+
+  }
+
+  .sku-goods-detail {
+    margin: 0 32rpx;
+    padding: 24rpx 0;
+  }
+
+

package/miniprogram_dist/Sku/index/index.wxml

@@ -0,0 +1,58 @@
+<!--components/sku/index/index.wxml-->
+<van-popup
+  show="{{ show }}"
+  round
+  closeable
+  position="bottom"
+  custom-class="sku-popup"
+  bind:close="onClose"
+>
+<!-- 商品信息 -->
+  	<sku-goods-info 
+        image="{{ image }}"
+        priceText="{{priceText}}"
+        stockNum="{{stockNum}}"
+        selectedText="{{selectedText}}"
+        priceTag="{{priceTag}}"
+		danBuy="{{danBuy}}"
+		show_stock="{{show_stock}}"
+	/>
+<!-- 商品属性选择 -->
+  <scroll-view class="sku-body" scroll-y>
+    <view class="sku-group-container">
+      <block wx:for="{{ skuTree }}" wx:key="id">
+        <view class="sku-row van-hairline--bottom">
+			<view class="sku-row-title">{{ item.name }}</view> 
+			<block wx:for="{{ item.values }}" wx:for-item="skuValue" wx:key="index" data-choinfo="{{skuValue}}">
+				<sku-row-item 
+				skuValue="{{ skuValue }}"
+				skuKeyStr="{{ item.k_s }}"
+				skuList="{{ skuList }}"
+				selectedSku="{{ selectedSku }}"
+				bind:select="onSelect"
+				/>
+			</block>
+        </view>
+      </block>
+      <!-- 额外插槽 -->
+      <view>
+      <slot name="sku-exteral"></slot>  
+      </view>
+    </view>
+   <!-- 计步器 -->
+   <sku-step 
+   		stockNum="{{ stockNum }}"
+      countNum="{{countNum }}"
+      limitPurchase="{{limitPurchase}}"
+      showSkuStepper="{{showSkuStepper}}"
+      startSaleNum="{{startSaleNum}}"
+      bind:change="onChangeStepper"
+	/>
+  </scroll-view>
+
+
+  <!-- 底部按钮 -->
+  <view>
+	<slot name="sku-button"></slot>   
+  </view>
+</van-popup>

package/miniprogram_dist/Sku/index/index.wxss

@@ -0,0 +1,50 @@
+/* components/sku/index.wxss */
+.sku-popup {
+  /* min-height: 50%;
+    max-height: 80%; */
+}
+.sku-header {
+  margin: 0 32rpx;
+  display: flex;
+}
+.sku-header-goods-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 32rpx 40rpx 24rpx 20px;
+}
+.sku-header-item {
+  margin-top: 12rpx;
+}
+/*  */
+.sku-body {
+  flex: 1 1 auto;
+  max-height: 560rpx;
+}
+.sku-group-container {
+  padding-top: 24rpx;
+  min-height: 435rpx;
+}
+.sku-row {
+  margin: 0 32rpx 24rpx;
+}
+.sku-row:last-child {
+  margin-bottom: 0;
+}
+.sku-row-title,
+.sku-goods-detail-title {
+  padding-bottom: 24rpx;
+}
+/*  */
+.sku-stepper-stock {
+  margin: 0 32rpx;
+  padding: 24rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sku-goods-detail {
+  margin: 0 32rpx;
+  padding: 24rpx 0;
+}

package/miniprogram_dist/Sku/row-item/index.js

@@ -0,0 +1,61 @@
+// components/sku/components/row-item/index.js
+const computedBehavior = require('miniprogram-computed').behavior
+import { isSkuChoosable } from '../../common/utils//helper'
+
+Component({
+  behaviors: [computedBehavior],
+
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    skuValue: {
+      type: Object,
+      value: {}
+    },
+    skuKeyStr: String,
+    selectedSku: {
+      type: Object,
+      value: {}
+    },
+    skuList: {
+      type: Array,
+      value: []
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  computed: {
+    choosable (data) {
+      return isSkuChoosable(data.skuList, data.selectedSku, {
+        key: data.skuKeyStr,
+        valueId: data.skuValue.name,
+      })
+    },
+
+    choosed (data) {
+      return data.skuValue.name === data.selectedSku[data.skuKeyStr]
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onSelect () {
+      const { choosable, skuValue, skuKeyStr } = this.data
+      if (choosable) {
+        this.triggerEvent('select', {
+          ...skuValue,
+          skuKeyStr
+        })
+      }
+    }
+  }
+})

package/miniprogram_dist/Sku/row-item/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

package/miniprogram_dist/Sku/row-item/index.less

@@ -0,0 +1,48 @@
+/* components/sku/row-item/index.wxss */
+.sku-row-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 24rpx 24rpx 0;
+    font-size: 32rpx;
+    line-height: 32rpx;
+    min-width: 80rpx;
+    background-color: #f7f8fa;
+    border-radius: 26rpx;
+    vertical-align: middle;
+  }
+
+  .sku-row-item.active {
+    color: #ee0a24;
+    background-color: #feeaeb;
+  }
+
+  .sku-row-item.disabled {
+    color: #c8c9cc;
+    cursor: not-allowed;
+    /* pointer-events: none; */
+  }
+
+  .sku-row-item-name {
+    z-index: 1;
+    padding: 16rpx;
+  }
+
+  .sku-row-item-img {
+    z-index: 1;
+    width: 42rpx;
+    height: 48rpx;
+    margin: 8rpx 0 8rpx 8rpx;
+    border-radius: 4rpx;
+  }
+
+  .sku-row-item-thumb {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .sku-row-item.disabled .sku-row-item-img {
+    opacity: 0.3;
+  }

package/miniprogram_dist/Sku/row-item/index.wxml

@@ -0,0 +1,10 @@
+<!--components/sku/row-item/index.wxml-->
+<view 
+  class="sku-row-item {{ choosed ? 'active' : '' }} {{ choosable ? '' : 'disabled' }}"
+  bind:tap="onSelect"
+>
+  <view wx:if="{{ skuValue.image }}" class="sku-row-item-img">
+    <image class="sku-row-item-thumb" src="{{ skuValue.image }}" mode="aspectFill" lazy-load="{{ true }}" />
+  </view>
+  <text class="sku-row-item-name" wx:if="{{skuValue.name}}">{{ skuValue.name }}</text>
+</view>

package/miniprogram_dist/Sku/row-item/index.wxss

@@ -0,0 +1,42 @@
+/* components/sku/row-item/index.wxss */
+.sku-row-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 24rpx 24rpx 0;
+  font-size: 32rpx;
+  line-height: 32rpx;
+  min-width: 80rpx;
+  background-color: #f7f8fa;
+  border-radius: 26rpx;
+  vertical-align: middle;
+}
+.sku-row-item.active {
+  color: #ee0a24;
+  background-color: #feeaeb;
+}
+.sku-row-item.disabled {
+  color: #c8c9cc;
+  cursor: not-allowed;
+  /* pointer-events: none; */
+}
+.sku-row-item-name {
+  z-index: 1;
+  padding: 16rpx;
+}
+.sku-row-item-img {
+  z-index: 1;
+  width: 42rpx;
+  height: 48rpx;
+  margin: 8rpx 0 8rpx 8rpx;
+  border-radius: 4rpx;
+}
+.sku-row-item-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sku-row-item.disabled .sku-row-item-img {
+  opacity: 0.3;
+}