xiaoe_mp_npm 0.2.2-beta1 → 0.2.2-beta2

package/miniprogram_dist/Sku/commSelect/index.js

@@ -0,0 +1,427 @@
+// src/sku/liveSelect/index.js
+import { centToYuan,skuPropertyConvert,skuListConvert,stockAmountCount,marketingSkuListConvert } from '../../common/utils/helper'
+const {utils} = require("live-mp-tools");
+const computedBehavior = require('miniprogram-computed').behavior
+import api from '../../common/api/sku'
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        showSku:{
+            type:Boolean,
+			value:false,
+			observer(val){
+				val && this.initData()
+			}
+        },
+        aliveId:{
+          type:String,
+          value:""
+        },
+		//优惠券是否自动领取
+		isCollectCoupons:{
+			type:Boolean,
+            value:false
+		},
+        spuId: {
+          type: String,
+          value:""
+        },
+        isAlive: {
+          type: Number,
+          value:0
+		},
+		hasBuy:{
+			type: Number,
+			value:0
+		},
+		marketing:{
+			type:Object,
+			value:''
+		},
+		baseInfo:{
+			type:Object,
+			value:{}
+		},
+		skuList:{
+			type:Array,
+			value:[]
+		},
+		skuProperty:{
+			type:Array,
+			value:[]
+		},
+		limitPurchase:{
+			type:Number,
+			value:0
+        },
+        showCart:{
+            type:Boolean,
+            value:false
+        },
+        danBuy:{
+            type:Boolean,
+            value:false
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        skuTree: [],
+        skuPicture: '',  //默认图片
+        skuPrice: "2000", //商品价格
+        skuStock: 42, //商品库存
+		startSaleNum: 1, // 起售
+        priceTag: '', //活动标签
+        show_stock:true, //是否隐藏库存
+        ladderTeamTree:{},//拼团选项数据
+        ladderTeamPrice:[],//始阶梯拼团价格数据
+        ladderTeamPriceTemp:{},
+		currentTeamType:'',//当前点击的拼团类型
+		currentSku: {},  // 当前选中的SKU数据
+		finalTeamPrice:'', //拼团处理后的价
+		showSkuStepper:true,
+		teamType:0 //是否是阶梯拼团
+	  },
+	computed: {
+		showCartBtn (data) {
+			return data.showCart && !data.danBuy
+		}
+	},
+
+    lifetimes: {
+      attached: function() {
+
+      },
+      detached: function() {
+		// 在组件实例被从页面节点树移除时执行
+      },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+		onCloseSku () {
+			this.setData({ showSku: false })
+			this.triggerEvent("closePop") //用于直播工程外部调用
+			this.resetData()
+		},
+		//跳转确认订单页
+		onSkuBuy (e) {
+			let detail = e.detail
+			let composeSelectObj ={
+				id: this.data.baseInfo.spu_id,
+				spu_id: this.data.baseInfo.spu_id,
+				resource_type: this.data.baseInfo.resource_type,
+				resource_id: this.data.baseInfo.resource_id,
+				spu_type: this.data.baseInfo.spu_type,
+				sku: detail.selectedSkuComb.id,
+				count: detail.selectedCount,
+				aliveId:this.data.aliveId,
+				isAlive: 1,
+				isCollectCoupons:this.data.isCollectCoupons
+			}
+			console.log('e------》》》',composeSelectObj)
+
+			if(this.data.finalTeamPrice){
+				let skuInfo = e.detail.selectedSkuComb
+				let skuResult ={
+					...skuInfo,
+					price:this.data.finalTeamPrice *100
+				}
+				this.triggerEvent('openComfrimPage', composeSelectObj)
+			}else{
+				this.triggerEvent('openComfrimPage', composeSelectObj)
+			}
+        },
+        //加入购物车
+        onAddCart(e){
+            // console.log('e------》》》---',e)
+        },
+		buy(){
+			this.selectComponent("#sku").onBuyOrAddCart('onbuy');
+        },
+        addcart(){
+            this.selectComponent("#sku").onBuyOrAddCart('addcart');
+        },
+		// 初始化组件数据
+		initData() {
+			wx.showLoading({
+				mask: true
+			})
+			if(this.data.aliveId){
+				Promise.all(this.assembleRequest()).then((res) => {
+				  if (res.some((e) => e.code !== 0)) {
+					console.error("获取商品相关信息接口报错");
+					return;
+				  }
+                  let resultObj = {
+                        baseInfo:res[0].data,
+                        skuProperty:res[1].data,
+                        skuList:res[2].data,
+                        marketing:res[3].data
+                  }
+				  this.formatInitializedData(resultObj);
+				});
+			}else{
+				this.formatInitializedData()
+			}
+		},
+		checkAllSel(obj){
+			for(var i in obj){
+			  if(!obj[i])  return false
+			}
+			return true
+		  },
+		// 组装请求
+		assembleRequest() {
+			const params = {
+				spu_id: this.data.spuId,
+			};
+			let baseInfo = new Promise((resolve, reject) => {
+				api.getBaseInfo(params).then((res) => {
+					resolve(res.data);
+				}).catch((err) => reject(err));
+			});
+			let skuProperty = new Promise((resolve, reject) => {
+				api.getSkuProperty(params).then((res) => {
+					resolve(res.data);
+				}).catch((err) => reject(err));
+			});
+			let skuList = new Promise((resolve, reject) => {
+				api.getSkuList(params).then((res) => {
+					resolve(res.data);
+				}).catch((err) => reject(err));
+			});
+			let market = new Promise((resolve, reject) => {
+				api.getMarketing(params).then((res) => {
+					resolve(res.data);
+				}).catch((err) => reject(err));
+			});
+			return [baseInfo, skuProperty, skuList, market]
+		},
+		// 格式化组件化数据
+		async formatInitializedData(res) {
+            let resData = res ? res : this.data
+			let {
+			   baseInfo,
+			   skuProperty,
+			   skuList,
+			    marketing
+			 } = resData;
+            let limitData
+            if(this.data.aliveId){
+                limitData  = await this.handleHistoryLimit(baseInfo)
+            }else{
+                limitData = this.data.hasBuy
+            }
+			// sku 基本信息
+			this.setData({
+				// 默认主图
+				skuPicture : utils.replaceCDN(baseInfo.goods_img[0], '?imageMogr2/thumbnail/600x600>/ignore-error/1'),
+				// 商品限购
+				limitPurchase:baseInfo.limit_purchase,
+				hasBuy:limitData,
+				// 默认价格显示
+				skuPrice : baseInfo.price_low === baseInfo.price_high ? centToYuan(baseInfo.price_low)  : `${centToYuan(baseInfo.price_low)} - ${centToYuan(baseInfo.price_high)}`,
+				// sku 所有规格及规格值
+				skuTree : skuPropertyConvert(skuProperty),
+                skuList : skuListConvert(skuList),
+				show_stock:baseInfo.show_stock,
+				priceTag: '',
+				showSkuStepper: !(baseInfo.is_goods_package && baseInfo.is_goods_package>0)
+			})
+
+
+			// 如果有营销活动会更新sku价格，（目前只有限时折扣
+			const marketingInfo = marketing?.marketing_info;
+			let sku = {
+				tree: this.data.skuTree,
+				list: this.data.skuList,
+				price:this.data.skuPrice // 默认价格（单位元）
+			}
+			// console.log('marketingInfo',marketingInfo)
+			this.setData({
+				// 备份下基础信息
+				baseInfo : baseInfo,
+				// 总库存
+				skuStock : stockAmountCount(skuList),
+
+			})
+
+			if (marketingInfo && !marketingInfo.pre_time && !this.data.danBuy) {
+              this.setData({
+				  priceTag:marketingInfo.activity_label || '',
+				  showCart:false,
+				  startSaleNum:1,
+				  limitPurchase:marketingInfo.can_buy_num
+              })
+              //阶级拼团
+              if(marketingInfo.activity_type === 6 && marketingInfo.team_type===1){
+				  this.setData({
+					teamType:1
+				  })
+                  this.marketLadderTeamActivity(marketing.marketing_info)
+              }else{
+              //兼容了限时折扣合普通拼团
+                  let {list ,price} = marketingSkuListConvert(marketing.marketing_info, sku);
+                  this.setData({
+                      skuList:list,
+                      skuPrice:price
+                  })
+              }
+			}else{
+				this.setData({
+					// 设置SKU的起售，目前所有SKU起售一样，故写作如下
+					startSaleNum:skuList[0].sku_min_purchase ? skuList[0].sku_min_purchase :1,
+				})
+			}
+			wx.hideLoading()
+        },
+        //获取已购数量
+        handleHistoryLimit(baseInfo) {
+          let params = {
+            spu_id: baseInfo.spu_id,
+            limit_purchase: baseInfo.limit_purchase
+          }
+          return api.getLimitBuyOrder(params).then(res => {
+				if (res.data.code === 0) {
+					return Number(res.data.data)
+				}
+          }).catch(e => {
+            console.log(e)
+          })
+        },
+        //转换阶级拼团
+        marketLadderTeamActivity(val){
+            let teamTree = {
+                name: '拼团类型',
+                data: val.stage_nums.map(e => {
+                  let minimumPrice = val.stage_price_wide[e].sort((a, b) => a - b)[0]
+                  return {
+                    clicked: false, // 是否已点击
+                    content: `¥${centToYuan(minimumPrice)}起/${e}人团`, // 显示的内容
+                    val: e // 拼团类型
+                  }
+                })
+            }
+            this.setData({
+              ladderTeamTree:teamTree,
+              ladderTeamPrice: val.specs_info,
+              ladderTeamPriceTemp:JSON.parse(JSON.stringify(teamTree)), // 阶梯拼团保存原始数据
+              skuPrice: this.handlePriceRange(val),
+              priceRangeMarket:this.handlePriceRange(val)
+            })
+        },
+        // 处理sku选择器显示的价格区间
+        handlePriceRange(data) {
+          let priceLow = data.low_price, priceHigh = data.high_price
+          if (priceHigh === priceLow) {
+            return `${centToYuan(priceLow)}`
+          } else {
+            return `${centToYuan(data.low_price)}-${centToYuan(data.high_price)}`
+          }
+		},
+		 // 阶梯拼团项点击
+        ladderItemClick(e){
+          let clickitem = e.target.dataset.item
+          let tempArr = this.data.ladderTeamTree
+          tempArr.data.map((item)=>{
+            item.clicked = false
+            if(item.val === clickitem.val){
+              item.clicked =true
+            }
+          })
+          this.setData({
+            ladderTeamTree:tempArr,
+            currentTeamType:clickitem.val
+		  })
+          this.getLadderCombPrice(this.data.currentTeamType)
+
+		},
+		// 处理阶梯拼团选项点击时，获取对应组合的拼团价格
+        getLadderCombPrice(teamType){
+
+          let teamPriceInfo = this.data.ladderTeamPrice
+		  // 当前已经选中的sku
+		  let selectedSkuComb = this.data.currentSku?.selectedSkuComb
+          if (selectedSkuComb) {
+            // 有确定的组合，就应该显示确定的价格
+            let currentSkuId = selectedSkuComb.selectedSkuComb.id
+            let currentSku = teamPriceInfo.find(e => {
+              return e.specs_id === currentSkuId
+            })
+			let finalTeamPrice = currentSku['stage_prices'][Number(teamType)]['member']
+			// console.log('finalTeamPrice',finalTeamPrice)
+			// console.log('this.data.currentSku',this.data.currentSku)
+			this.setData({
+				skuPrice: centToYuan(finalTeamPrice),
+				finalTeamPrice: centToYuan(finalTeamPrice)
+			})
+			// console.log('selectedSkuComb',selectedSkuComb)
+			this.handlePrice()
+          } else {
+			// 没有就应该根据当前类型（拼团还是单买）显示区间价格
+			this.setData({
+				skuPrice:  this.data.priceRangeMarket
+			})
+			this.handlePrice()
+          }
+		},
+		// 处理sku价格与阶梯团价格的问题
+        handlePrice(){
+			//改变价格现在点击的对象的价格
+            this.selectComponent("#sku").onSelect(this.data.skuPrice);
+		},
+		// 切换商品属性的回调
+		onPropSelected(obj){
+			if (this.data.teamType !== 1) return
+			this.setData({
+				currentSku:obj.detail
+			})
+			this.setladderTeamPrice({specs_id:obj.detail})
+			if(this.data.currentTeamType){
+				this.getLadderCombPrice(this.data.currentTeamType)
+			}
+		},
+		// 点击属性后 计算阶梯拼团价格
+		setladderTeamPrice(val) {
+			// 多类型未选择完毕  取消了已选择类型未构成sku
+			if(!val.specs_id.selectedSkuComb) {
+				this.setData({
+					ladderTeamTree: JSON.parse(JSON.stringify(this.data.ladderTeamPriceTemp))
+				})
+			  return;
+			}
+			let id = val.specs_id.selectedSkuComb.selectedSkuComb.id;
+			let currentObj=this.data.ladderTeamPrice.find(val => id === val.specs_id)
+			let stagePrices = currentObj.stage_prices;
+			let arr = Object.keys(stagePrices);
+			 this.data.ladderTeamTree.data.map((val, index) => {
+				let num = arr[index];
+				let minimumPrice = stagePrices[num].member;
+				val.content = `¥${centToYuan(minimumPrice)}/${num}人团`;
+			});
+			this.setData({
+				ladderTeamTree:{
+					name:'拼团类型',
+					data:this.data.ladderTeamTree.data
+				}
+			})
+		},
+		resetData(){
+			this.setData({
+				skuTree: [],
+				skuPicture: '',  //默认图片
+				skuPrice: "", //商品价格
+				skuStock: 0, //商品库存
+				startSaleNum: 1, // 起售
+				priceTag: '', //活动标签
+				show_stock:true //是否隐藏库存
+			})
+		}
+    }
+})

package/miniprogram_dist/Sku/commSelect/index.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+      "skuSelect": "../index/index",
+      "van-col": "@vant/weapp/col/index",
+      "van-button": "@vant/weapp/button/index"
+    }
+  }

package/miniprogram_dist/Sku/commSelect/index.less

@@ -0,0 +1,48 @@
+.sku-actions {
+    padding: 32rpx 32rpx;
+    display: flex;
+    justify-content: space-evenly;
+    position: fixed;
+    bottom: 0;
+    left: 32rpx;
+    .sku-button {
+      height: 80rpx;
+      line-height: 80rpx;
+      width: 640rpx;
+      font-size: 32rpx;
+      border-radius: 40rpx;
+      background-color: #105cfb;
+      color: #fff;
+      border:none;
+    }
+    .left{
+      margin-right:20rpx;
+    }
+
+}
+.sku-exteral{
+  margin: 0 32rpx 24rpx;
+  .sku-external-name{
+    padding-bottom: 24rpx;
+  }
+  .sku-external-pt{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .sku-sku-external-txt{
+    min-width: 180rpx;
+    width: max-content;
+    height: 48rpx;
+    line-height: 48rpx;
+    border-radius: 26rpx;
+    background: #f7f8fa;
+    margin-right: 24rpx;
+    font-size: 30rpx;
+    padding: 5rpx 20rpx;
+    margin-bottom: 24rpx;
+  }
+  .active{
+    color: #ee0a24;
+    background-color: #feeaeb;
+  }
+}

package/miniprogram_dist/Sku/commSelect/index.wxml

@@ -0,0 +1,41 @@
+<!--src/Sku/comm-select/index.wxml-->
+<skuSelect
+  show="{{ showSku }}"
+  sku-tree="{{ skuTree }}"
+  sku-list="{{ skuList }}"
+  picture="{{ skuPicture }}"
+  price="{{ skuPrice }}"
+  stock="{{ skuStock }}"
+  priceTag="{{priceTag}}"
+  limitPurchase="{{limitPurchase}}"
+  startSaleNum="{{startSaleNum}}"
+  show_stock="{{show_stock}}"
+  hasBuy="{{hasBuy}}"
+  danBuy="{{danBuy}}"
+  showSkuStepper="{{showSkuStepper}}"
+  bind:close="onCloseSku"
+  bind:onbuy="onSkuBuy"
+  bind:addcart="onAddCart"
+  bind:onSelected="onPropSelected"
+  id="sku"
+>
+   <!-- 阶梯拼团 -->
+     <view slot="sku-exteral" class="sku-exteral"  wx:if="{{!danBuy && showSku}}">
+        <view class="sku-external-name">{{ladderTeamTree.name}}</view>
+        <view class="sku-external-pt">
+            <view wx:for="{{ ladderTeamTree.data}}"
+               wx:for-item="element" 
+               class="sku-sku-external-txt {{element.clicked ? 'active' :''}}" 
+               wx:key="index"
+               data-item="{{element}}"
+               bindtap="ladderItemClick"
+               >
+                {{element.content}}
+            </view>
+        </view>
+    </view>
+    <view slot="sku-button" class="sku-actions" wx:if="{{showSku}}">
+        <button bindtap="addcart" class="sku-button left" wx:if="{{showCartBtn}}" plain="true">加入购物车</button>
+        <button bindtap="buy" class="sku-button" plain="true">立即购买</button>
+    </view>
+</skuSelect>

package/miniprogram_dist/Sku/commSelect/index.wxss

@@ -0,0 +1,45 @@
+.sku-actions {
+  padding: 32rpx 32rpx;
+  display: flex;
+  justify-content: space-evenly;
+  left: 32rpx;
+}
+.sku-actions .sku-button {
+  height: 80rpx;
+  line-height: 80rpx;
+  width: 640rpx;
+  font-size: 32rpx;
+  border-radius: 40rpx;
+  background-color: #105cfb;
+  color: #fff;
+  border: none;
+}
+.sku-actions .left {
+  margin-right: 20rpx;
+}
+.sku-exteral {
+  margin: 0 32rpx 24rpx;
+}
+.sku-exteral .sku-external-name {
+  padding-bottom: 24rpx;
+}
+.sku-exteral .sku-external-pt {
+  display: flex;
+  flex-wrap: wrap;
+}
+.sku-exteral .sku-sku-external-txt {
+  min-width: 180rpx;
+  width: max-content;
+  height: 48rpx;
+  line-height: 48rpx;
+  border-radius: 26rpx;
+  background: #f7f8fa;
+  margin-right: 24rpx;
+  font-size: 30rpx;
+  padding: 5rpx 20rpx;
+  margin-bottom: 24rpx;
+}
+.sku-exteral .active {
+  color: #ee0a24;
+  background-color: #feeaeb;
+}

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

@@ -0,0 +1,52 @@
+// src/sku/goods-info/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        image: {
+            type:String,
+            value:''
+        },
+        priceText:{
+            type:String,
+            value:''
+        },
+        stockNum:{
+            type:Number,
+            value:0
+        },
+        selectedText:{
+            type:String,
+            value:''
+        },
+        priceTag:{
+            type:String,
+            value:''
+        },
+        show_stock:{
+            type:Boolean,
+            value:true
+        },
+        danBuy:{
+            type:Boolean,
+            value:false
+        }
+    },
+    options: {
+        styleIsolation: 'shared',
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

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

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

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

@@ -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-goods-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        padding: 32rpx 40rpx 24rpx 20px;
+        .sku-activity-wrap{
+          font-size: 12px;
+          background-color: rgba(255,76,81,.2);
+          color: #ff4c51;
+          padding: 2px 6px;
+          border-radius: 10px;
+          min-width: 60rpx;
+          width: max-content;
+        }
+      }
+  }

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

@@ -0,0 +1,19 @@
+<!--src/sku/goods-info/index.wxml-->
+<view class="sku-header van-hairline--bottom">
+    <view class="sku-header-img-wrap">
+        <image class="thumb" mode="aspectFit" src="{{ image }}" />
+    </view>
+    <view class="sku-header-goods-info">
+        <view class="sku-activity-wrap" wx:if="{{priceTag && !danBuy}}">
+            <text class="sku-activity-label">{{priceTag}}</text>
+        </view>
+        <view class="sku-goods-price red">
+            <text class="sku-price-symbol">¥</text>
+            <text class="sku-price-num font28">{{ priceText }}</text>
+        </view>
+        <view class="sku-header-item" wx:if="{{show_stock}}">
+            <text class="sku-stock">剩余 <text>{{ stockNum }}</text> 件</text>
+        </view>
+        <view class="sku-header-item">{{ selectedText }}</view>
+    </view>
+</view>