微信小程序 分类-随右侧滚动

先上效果图

商品采用SKU规格商品,通过自定义popup组件,实现个性化效果

如果发现少发了某块,可以私信或者评论喔

编辑编辑编辑编辑

 

wxml:

<wxs module="img" src="../../../wxs/files.wxs"></wxs> 
<view class="container">
  <view class="container2-header" style="height: {{navBarHeight}}px; {{background?'background:'+background:''}}">
  <view class="container2-header-top">
    <view class="container2-header-back">
      <image src="/static/images/other/fanhui.png" bindtap="goBack"/>
      <input placeholder="Search fir gifts"/>
      <image class="search-icon" src="/static/images/other/sousuo.png"/>
      <image class="message" src="/static/images/other/message.png"/>
    </view>
  </view>
</view>

  <view class="container-header" style="padding-top: {{navBarHeight}}px; height: {{infoHeight}}px;">
    <view class="font-cl" style="flex: 1; text-align: left;">Hi, {{userInfo.nickname}}</view>
    <image src="/static/images/other/integral.png"/>
    <text>{{userInfo.intergal}}</text>
  </view>

  <view style="display: flex;">
    <scroll-view class='left-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollLeft" scroll-top="{{activeScrollTop}}" enable-back-to-top scroll-with-animation>
      <block wx:for="{{products}}" wx:key="index">
        <view class='left-son {{activeId === index ? "active" : "normal"}} {{activeId + 1 === index ? "right-top-radius" : ""}} {{activeId === index + 1 ? "right-bottom-radius":""}}' bindtap='clickLeft' id="{{index}}">
          <image src="{{img.getFile(item.picPath)}}"/>
          <text>{{item.title}}</text>
        </view>
      </block>
    </scroll-view>
    <!-- 右容器 -->
    <scroll-view class='right-scroll' style="height:{{cHeight}}px;" scroll-y bindscroll="scrollRight" scroll-into-view="{{toView}}" enable-back-to-top scroll-with-animation>
      <block wx:for="{{products}}" wx:key="index">
        <view class='right-son' id="{{'index'+index}}">
          <text class="son-title">{{item.title}}</text>
          <view class="product-item" wx:for="{{item.giftExchangeEntityList}}" wx:for-item="product" wx:for-index="innerIndex" wx:key="innerIndex" style="{{product.isNew === 0?'background-image: url(https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/6f44957e42b34c8f91fbc8adeffb25ac.jpg)':''}}">
            <image class="tip" src="https://dashanbook.oss-cn-shenzhen.aliyuncs.com/app/images/2024/11/04/82c948e461114e1dba6f819c2937dc5d.png" wx:if="{{product.isNew === 0}}"/>
            <van-image width="100" height="100" src="{{img.getFile(product.picPath)}}" />
            <view class="products-layout">
              <view class="products-layout-item" bind:tap="clickGoods" data-goods="{{product}}">
                <view>{{product.content}}</view>
                <view class="item-content">
                  <view class="item-price">
                    <image src="/static/images/other/integral.png"/>
                    <text class="current-price font-cl">{{product.discountIntegral?product.discountIntegral:product.integral}}</text>
                    <text class="origin-price" wx:if="{{product.discountIntegral}}">{{product.integral}}</text>
                  </view>
                  <image src="/static/images/other/add.png" style="width: 58rpx; height: 58rpx;"/>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    
    <view class="fixed-bottom" wx:if="{{!addCartFlag}}">
      <image src="/static/images/other/cart.png" bind:tap="showCartProduct"/>
      <block wx:if="{{!canBuyFlag}}">
        <view class="bottom-content">未选购礼品</view>
      </block>
      <block wx:else>
        <view class="integral font-cl"><image src="/static/images/other/integral.png"/>{{discountPrice}}<text class="total-num">{{cartList.length}}</text></view>
        <view class="discount">
          <text class="origin-price">{{totalPrice}}</text>
          <view class="discount-price">已优惠{{totalPrice - discountPrice}}</view>
        </view>
      </block>
      <view class="bottom-btn {{canBuyFlag?'buy-btn':''}}" bind:tap="calculate">去结算</view>
    </view>
  </view>


  <van-popup show="{{ addCartFlag }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 50%; overflow-y: auto; z-index: 2000">
    <view class="header-line"></view>
    <view class="header-layout">
      <image class="goods-img" src="{{img.getFile(selectGoods?(selectGoods.picPath?selectGoods.picPath:addGoodsInfo.picPath):addGoodsInfo.picPath)}}"/>
      <view class="goods-content">
        <text class="two-overellipsis">{{addGoodsInfo.content}}</text>
        <text class="goods-storage">库存:{{selectGoods?selectGoods.stock:addGoodsInfo.giftCount}}</text>
      </view>
    </view>

    <view class="cart-layout" wx:if="{{skuList != null && skuList.length > 0}}" style="height: 280rpx; overflow-y: auto;">
      <view class="sku-item" wx:for="{{skuList}}" wx:key="index">
        <view class="sku-title-son">{{item.lable}}</view>
        <view style="flex: 1;">
          <text class="label {{item.selected===value?'selected':''}}" wx:for="{{item.values}}" wx:for-item="value" wx:for-index="innerIndex" wx:key="innerIndex" bind:tap="clickSkuLabel" data-skuInfo="{{item}}" data-selectValue="{{value}}" data-index="{{index}}">{{value}}</text>
        </view>
      </view>
    </view>

    <view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
      <text>积分:</text>
      <view class="cart-num">
        <text class="num-count">{{selectGoods?selectGoods.integral : (addGoodsInfo.discountIntegral?addGoodsInfo.discountIntegral : addGoodsInfo.integral)}}</text>
      </view>
    </view>
    <view class="cart-layout" style="display: flex; margin-top: 20rpx; align-items: center;">
      <text>购买数量:</text>
      <view class="cart-num">
        <text class="num-btn" bind:tap="reduceNum">-</text>
        <text class="num-count">{{buyNum}}</text>
        <text class="num-btn add" bind:tap="addNum">+</text>
      </view>
    </view>

    <view class="goods-btn">
      <text bind:tap="addCart">加入购物车</text>
      <text class="buy" bind:tap="goExchange">立即兑换</text>
    </view>
  </van-popup>

  <van-popup show="{{ showCartProduct }}" bind:close="onClosePopup" round position="bottom" custom-style="height: 40%; overflow-y: auto;">
    <view class="header-line"></view>
    <view class="header-layout"><view class="bold">商品详情</view><view bind:tap="clearCart"><image src="/static/images/other/shanchu.png"/><text class="cart-clear">清空购物车</text></view></view>

    <view class="cart-layout" style="margin-bottom: 50rpx;">
      <view class="cart-item" wx:for="{{cartList}}" wx:key="index">
        <image class="cart-pic" src="{{img.getFile(item.spicPath?item.spicPath:item.picPath)}}"/>
        <view class="cart-content">
          <view class="two-overellipsis">{{item.content}}</view>
          <view class="standard two-overellipsis" wx:if="{{item.spData}}">规格: {{item.spData}}</view>
          <view class="flex-start">
            <image src="/static/images/other/integral.png"/>
            <text>{{item.sintegral?item.sintegral : (item.discountIntegral?item.discountIntegral : item.integral)}}</text>
          </view>
        </view>
        <view class="cart-num">
          <text class="num-btn" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="-1">-</text>
          <text class="num-count">{{item.buyNum}}</text>
          <text class="num-btn add" bind:tap="updateCartNum" data-cartInfo="{{item}}" data-index="{{index}}" data-num="1">+</text>
        </view>
      </view>
    </view>
  </van-popup>
</view>

wxss:

page {
  height: calc(100vh - 200rpx);
  overflow: auto;
}
.container {
  height: calc(100vh - 0rpx);
  overflow: hidden;  
  display: flex;
  flex-direction: column;
}
.container-header {
  height: 172rpx;
  border-radius: 10rpx;
  padding: 0 8%;
  text-align: center;
  display: flex;
  align-items: center;
}
.container-header image {
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
.left-scroll{
  /* rgb(248,249,250); */
  background-color: #ffffff; 
	width: 168rpx;
  /* float: left; */
}

.left-son{
	width: 100%;
	height: 200rpx;
  display: flex;
  flex-direction: column;
	align-items: center;
  justify-content: center;
  font-size: 26rpx;
  box-sizing: border-box;
}
.left-son image {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}
.left-son.active{
	background: #fff;
	/* border-left:10rpx outset rgb(81, 127, 226); */
}
.left-son text {
  color: #D00001;
}
.normal {
  background: #f3f3f3;
}
.right-bottom-radius {
  /* border-bottom-right-radius: 30rpx; */
}
.right-top-radius {
  border-top-right-radius: 30rpx;
}
.right-scroll{
  float: right;
  width: calc(100% - 180rpx - 20rpx);
  margin-left: 20rpx;
}
.right-son{
}
.product-item {
  display: flex;padding: 15rpx 30rpx;margin-bottom: 10rpx;
  background: linear-gradient(to right, #FFFFFF, #FFF8E8);
  border-radius: 30rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.new {
  background: linear-gradient(to right, #FFFFFF, #FFF8E8);
}
.son-title {
  font-size: 24rpx;
  color: #CBCBCB;
}
.tip {
  position: absolute;
  left: -1rpx;
  top: -18rpx;
  width: 120rpx;
  height: 120rpx;
  z-index: 100;
}



.container2-header {
  height: auto;
  background: white;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.container2-header-top {
  font-size: 34rpx;
  position: relative;
  height: 100%;
}
.container2-header-back {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  height: 80rpx;
  transform: translate(0, -10%);
}
.container2-header-back text {
  position: relative;
  letter-spacing: 2rpx;
  font-size: 36rpx;
  color: #000000;

}
.container2-header-back image{
  width: 50rpx;
  height: 50rpx;
}
.title-primary {
  font-family: "cl";
  position: absolute !important;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -10%)
}
input {
  width: 308rpx; height: 80%; border-radius: 2rem; background: #F2F2F2;margin-right: 20rpx;
  padding: 0 20rpx; padding-left: 80rpx; color: #bcbcbc; font-size: 26rpx;
}
.search-icon {
  position: absolute;
  left: 70rpx;
  width: 40rpx !important;
  height: 40rpx !important;
}
.products-layout {
  width: 100%;margin:10rpx 10rpx;height: 90px;
}
.products-layout-item {
  display: flex;flex-direction: column;justify-content: space-between;height: 100%;
}
.item-content {
  display: flex;align-items: center;
}
.item-content image {
  width: 45rpx;
  height: 45rpx;
}
.item-price {
  display: flex;align-items: center;flex: 1;
}
.origin-price {
  text-decoration: line-through;
  color: #3A3A3A;
  font-size: 24rpx;
}
.current-price {
  position: relative;
  top: 6rpx;
  font-size: 38rpx;
  margin-right: 20rpx;
  margin-left: 5rpx;
  color: #FFAF00;
}
.fixed-bottom {
  position: fixed;
  display: flex;
  bottom: 30rpx;
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border-radius: 2rem;
  left: 5%;
  align-items: center;
  background: #3A3A3A;
  z-index: 2001;
}
.fixed-bottom image {
  width: 120rpx;
  height: 120rpx;
  position: relative;
  left: -5rpx;
}
.bottom-content {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  color: #F2F2F2;
}
.bottom-btn {
  background: gray;
  height: 80rpx;
  width: 220rpx;
  border-radius: 2rem;
  line-height: 80rpx;
  text-align: center;
  color: #F2F2F2;
  position: relative;
  right: -5rpx;
}
.buy-btn {
  background: #FFCE3C;
  color: black;
}
.buy-btn:active {
  background: pink;
}
.integral {
  display: flex;
  align-items: center;
  font-size: 38rpx;
  color: white;
  position: relative;
  width: 150rpx;
}
.integral image {
  width: 30rpx;
  height: 30rpx;
  position: relative;
  top: -3rpx;
}
.integral .total-num {
  background: #FF738E;
  position: absolute;
  top: -35rpx;
  width: 50rpx;
  height: 50rpx;
  left: -45rpx;
  border-radius: 50%;
  font-size: 30rpx;
  text-align: center;
  overflow: hidden;
  font-family: 'Times New Roman', Times, serif;
  line-height: 50rpx;
}
.discount {
  flex: 1;
  /* padding-left: 50rpx; */
}
.discount text {
  display: block;
}
.origin-price {
  font-size: 22rpx;
  color: white;
}
.discount-price {
  font-size: 20rpx;
  color: #FFCE3C;
}
.header-line {
  background: #FEEDAA;
  height: 38rpx;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
}
.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50rpx;
  margin: 30rpx 0;
}
.header-layout image {
  width: 38rpx;
  height: 38rpx;
  position: relative;
  top: 8rpx;
}
.cart-clear {
  font-size: 24rpx;
  color: #CBCBCB;
  margin-left: 10rpx;
}
.cart-layout {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee;
  padding: 20rpx 10rpx;
}
.cart-pic {
  width: 140rpx;
  height: 140rpx;
}
.cart-content {
  flex: 1;
  padding: 0 20rpx;
  font-size: 26rpx;
}
.cart-content image {
  width: 45rpx;
  height: 45rpx;
}
.cart-num {
  display: flex;
  align-items: center;
  justify-self: center;
}
.num-count {
  width: 80rpx;
  text-align: center;
}
.num-btn {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid black;
  text-align: center;
}
.add {
  background: #FFCE3C;
}
.num-btn:active, .add:active {
  background: #cbcbcb;
}
.standard {
  font-size: 22rpx;
  color: #CBCBCB;
  margin-bottom: 20rpx;
}
.goods-img {
  width: 200rpx !important;
  height: 200rpx !important;
  border-radius: 20rpx;
}
.goods-content {
  flex: 1;
  padding-left: 20rpx;
}
.goods-storage {
  color: #bcbcbc;
  font-size: 26rpx;
}
.goods-btn {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
}
.goods-btn text {
  text-align: center;
  height: 80rpx;
  background: #FEEDAA;
  line-height: 80rpx;
  flex: 1;
  animation: all .5s;
}
.goods-btn .buy {
  background: lightcoral;
}
.goods-btn text:active {
  background: #bcbcbc;
}
.sku-item {
  width: 90%;
  height: auto;
  display: flex;
  align-items: baseline;
}
.sku-item .title{
  font-size: 30rpx;
  margin-right: 20rpx;
  width: 128rpx;
}
.sku-item .label {
  display: inline-block;
  padding: 10rpx 20rpx;
  background: #ebebeb;
  margin-right: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  font-size: 26rpx;
}
.selected {
  background: #FEEDAA !important;
}
.sku-title-son {
  margin-right: 20rpx;
}

json:

{
  "usingComponents": {
    "head-back": "/components/head-back/head-back"
  },
  "navigationStyle": "custom"
}

js

 

可以用 下边注释的

 // // 假设你有这些SKU的JSON字符串
    // let sku1 = '{"颜色": "红色", "尺寸": "11"}';
    // let sku2 = '{"颜色": "蓝色", "尺寸": "11"}';
    // let sku3 = '{"颜色": "红色", "尺寸": "12"}';
    // let sku4 = '{"颜色": "蓝色", "尺寸": "12"}';

    // // 将JSON字符串解析为JavaScript对象
    // let parsedSkus = [
    //   JSON.parse(sku1),
    //   JSON.parse(sku2),
    //   JSON.parse(sku3),
    //   JSON.parse(sku4)
    // ];
作为sku数据

 

const util = require('../../../utils/util.js');
const api = require('../../../config/api.js');
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navBarHeight: app.globalData.navBarHeight,
    userInfo: null,
    cHeight: '0', //屏幕高度
    infoHeight: 40,
    products: [], //左边楼层
    activeId: 0, //左边楼层ID
    activeScrollTop: '0', //左侧scroll-view滚动的高度
    toView: 'index0', //跳到右边的楼层ID
    productNum: 1,
    canBuyFlag: true,
    showCartProduct: false,
    addCartFlag: false,
    addGoodsInfo: {},
    selectGoods: null,
    buyNum: 1,
    skuList: [],
    cartList: [],
    totalPrice: 0,
    discountPrice: 0,
  },



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: res => {
        this.setData({
          cHeight: (res.windowHeight - this.data.infoHeight - 15 - 40) * 0.9 //-50:搜索栏的heigth   0.9:Tabbar的heigth
        })
      }
    })
  },
  getMyIntegral() {
    let _that = this;
    util.request(api.getUserIntegral + '/' + _that.data.userInfo.id).then(res => {
      _that.data.userInfo.intergal = res.data;
      _that.setData({
        userInfo: _that.data.userInfo
      })
      wx.setStorageSync('userInfo', JSON.stringify(_that.data.userInfo));
      app.globalData.userInfo = JSON.parse(wx.getStorageSync('userInfo'));
    })
  },
  onShow: function () {
    this.setData({
      userInfo: app.globalData.userInfo,
    })
    if (!app.globalData.hasLogin) {
      wx.showToast({
        title: '请先登录',
        icon: 'none'
      })
      setTimeout(() => {
        util.goLogin();
      }, 500)
      return;
    }
    // this.loadIntegralGoodsPage();
    this.loadGoodsTree();
    this.getCartList();
    this.getMyIntegral();
  },
  getCartList() {
    let _that = this;
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    util.requestAction(api.getCartList).then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        let data = res.data;
        _that.setData({
          cartList: data
        })
        _that.calculatePrice();
      }
    }).catch(() => {
      wx.hideLoading();
    })
  },
  clickLeft: function (e) { //左侧点击
    let i = e.currentTarget.id
    this.setData({
      activeId: i,
      toView: 'index' + i
    })
  },
  scrollLeft: function (e) {
    this.setData({
      activeScrollTop: e.detail.scrollTop,
    })
  },
  scrollRight: function (e) { //右侧滚动
    let {
      itemArr,
      activeId,
    } = this.data;
    this.data.itemArr.forEach((item, id) => { //对比offsetTop和height获得左侧id
      // item.offsetTop 总体的高度
      if (e.detail.scrollTop >= (item.offsetTop)-160 && e.detail.scrollTop <= (item.offsetTop + item.height)-160) {
        this.setData({
          activeId: id
        })
      }
    }) 
    this.setData({
      activeScrollTop: activeId * 75 //左侧高
    })
  },

  loadGoodsTree() {
    let _that = this;
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    util.requestAction(api.getIntegralGoodsTree).then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        // console.log(res)
        _that.setData({
          products: res.data
        })
        _that.calculateProduct();
      }
    }).catch(() => {
      wx.hideLoading();
    })
  },

  loadIntegralGoodsPage() {
    let _that = this;
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    _that.setData({
      loading: true,
    })
    var data = {
      pageNum: _that.data.productNum,
      uid: _that.data.userInfo?_that.data.userInfo.id:0
    }
    util.requestAction(api.getIntegralGoodsPage, data).then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        var dataList = _that.data.products;
        var data = res.data;
        _that.setData({
          products: dataList.concat(data.records),
          productTotal: data.pages,
          loading: false,
        })

        _that.calculateProduct();
      }
    }).catch(() => {
      wx.hideLoading();
    })
  },
  calculateProduct() {
    let itemArr = []; //纪录每个scroll-into-view的值
    this.data.products.forEach((item, index) => {
      wx.createSelectorQuery().select(`#index${index}`).boundingClientRect(rect => {
        let c = {}
        c.offsetTop = rect.top
        c.height = rect.height
        itemArr.push(c)
      }).exec()
    })
    this.setData({
      itemArr
    })
  },
  onScrollToLower() {
    let _that = this;
    if (_that.data.productNum >= _that.data.productTotal) return;
    _that.setData({
      productNum: _that.data.productNum + 1
    });
    _that.loadIntegralGoodsPage();
  },

  goBack() {
    wx.navigateBack();
  },
  showCartProduct() {
    this.setData({
      showCartProduct: true
    })
  },
  onClosePopup() {
    this.setData({
      showCartProduct: false,
      addCartFlag: false,
    })
  },
  clickGoods(e) {
    let goods = e.currentTarget.dataset.goods;
    // console.log(goods)
    let skuList = goods.giftSkuEntityList;
    let skuJson = [];
    if (skuList !== null && skuList.length > 0) {
      for(let i = 0; i < skuList.length; i++) {
        let json = JSON.parse(skuList[i].spData);
        skuJson.push(json);
      }
    }

    // // 假设你有这些SKU的JSON字符串
    // let sku1 = '{"颜色": "红色", "尺寸": "11"}';
    // let sku2 = '{"颜色": "蓝色", "尺寸": "11"}';
    // let sku3 = '{"颜色": "红色", "尺寸": "12"}';
    // let sku4 = '{"颜色": "蓝色", "尺寸": "12"}';

    // // 将JSON字符串解析为JavaScript对象
    // let parsedSkus = [
    //   JSON.parse(sku1),
    //   JSON.parse(sku2),
    //   JSON.parse(sku3),
    //   JSON.parse(sku4)
    // ];

    // 创建一个Map来存储每个属性名下独特的值
    let uniqueValuesByProperty = new Map();

    // 遍历解析后的SKU对象
    skuJson.forEach(sku => {
      // 遍历SKU对象的每个属性
      for (let key in sku) {
        if (sku.hasOwnProperty(key)) { // 确保属性是对象自身的,而不是从原型链上继承的
          // 如果这个属性名还不存在于Map中,就初始化一个空Set
          if (!uniqueValuesByProperty.has(key)) {
            uniqueValuesByProperty.set(key, new Set());
          }
          // 将属性值添加到对应属性名的Set中
          uniqueValuesByProperty.get(key).add(sku[key]);
        }
      }
    });

    let skuListTemp = [];
    // 输出结果
    uniqueValuesByProperty.forEach((values, property) => {
      let skuInfo = {
        lable: property,
        values: Array.from(values),
        selected: ''
      };
      skuListTemp.push(skuInfo);
    });
    this.setData({
      buyNum: 1,
      selectGoods: null,
      addGoodsInfo: goods,
      skuList: skuListTemp,
      addCartFlag: true
    })
  },

  clickSkuLabel(e) {
    let skuInfo = e.currentTarget.dataset.skuinfo;
    let selectValue = e.currentTarget.dataset.selectvalue;
    let index = Number(e.currentTarget.dataset.index);

    for (let i = 0; i < skuInfo.values.length; i++) {
      if (skuInfo.values[i] === selectValue) {
        skuInfo.selected = selectValue;
        break;
      }
    }
    this.setData({
      ['skuList[' + index + ']']: skuInfo,
    })

    /**
     * 检查是否选择所有标签
     */
    let flag = true;
    let selectLabelList = [];
    let currentSkuList = this.data.skuList;
    for (let i = 0; i < this.data.skuList.length; i++) {
      if (currentSkuList[i].selected === null || currentSkuList[i].selected === '') {
        flag = false;
        break;
      }
      let labelData = {
        [currentSkuList[i].lable] : currentSkuList[i].selected
      }
      selectLabelList.push(labelData);
    }

    let mergedSku = selectLabelList.reduce((acc, obj) => {
      // 将当前对象的属性添加到累加器对象中
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          acc[key] = obj[key];
        }
      }
      return acc;
    }, {}); // 第二个参数是一个空对象,作为reduce的初始值

    // console.log(selectLabelList);
    let selectStr = JSON.stringify(mergedSku, null, 0);
    if (flag) {
      let giftSkuEntityList = this.data.addGoodsInfo.giftSkuEntityList;
      for (let i = 0; i < giftSkuEntityList.length; i++) {
        if (selectStr.replace(' ','') === JSON.stringify(JSON.parse(giftSkuEntityList[i].spData.replace(' ','')), null, 0)) {
          // console.log('选择了:', giftSkuEntityList[i]);
          this.setData({
            selectGoods: giftSkuEntityList[i],
            buyNum: (this.data.buyNum > giftSkuEntityList[i].stock) ? giftSkuEntityList[i].stock : this.data.buyNum
          })
          break;
        }
      }

    }
  },
  reduceNum() {
    let num = this.data.buyNum;
    if (num < 1) {
      return;
    }
    this.setData({
      buyNum: this.data.buyNum - 1
    })
  },
  addNum() {
    let num = this.data.buyNum;
    if (this.data.selectGoods) {
      if (num >= this.data.selectGoods.stock) {
        return;
      }
    } else {
      if (num >= this.data.addGoodsInfo.giftCount) {
        return;
      }
    }
    this.setData({
      buyNum: this.data.buyNum + 1
    })
  },
  addCart() {
    let selectGoods = this.data.selectGoods;
    if ((this.data.skuList !== null && this.data.skuList.length > 0) && selectGoods === null) {
      wx.showToast({
        title: '请先选择规格',
        icon: 'none'
      })
      return;
    }
    
    wx.showLoading({
      title: '正在操作,请稍后',
    })

    let data = {
      eid: -1,
      skuId: null,
      buyNum: this.data.buyNum,
    }
    /**
     * 多规格礼品选择
     */
    if (selectGoods !== null) {
      // console.log(selectGoods);
      data.skuId = selectGoods.id;
      data.eid = selectGoods.eid;
    } else {
      // console.log(this.data.addGoodsInfo);
      // console.log(this.data.addGoodsInfo);
      data.eid = this.data.addGoodsInfo.id;
    }
    this.updateCart(data);
  },
  updateCart(data, index = -1, cartInfo) {
    let _that = this;
    util.requestAction(api.addOrUpdateCart, data, "POST").then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        if (index === -1) {
          _that.onClosePopup();
          _that.getCartList();
        } else {
          _that.setData({
            ['cartList[' + index + ']']: cartInfo,
          })
          _that.calculatePrice();
        }
      }
    }).catch(() => {
      wx.hideLoading();
      wx.showToast({
        title: '出错了,请稍后重试',
      })
    })
  },

  updateCartNum(e) {
    let cartInfo = e.currentTarget.dataset.cartinfo;
    let index = Number(e.currentTarget.dataset.index);
    let num = Number(e.currentTarget.dataset.num);

    let data = {
      eid: cartInfo.eid,
      skuId: cartInfo.skuId,
      buyNum: num,
    }
    cartInfo.buyNum = cartInfo.buyNum + num;
    this.updateCart(data, index, cartInfo);
  },

  goExchange() {
    let selectGoods = this.data.selectGoods;
    if ((this.data.skuList !== null && this.data.skuList.length > 0) && selectGoods === null) {
      wx.showToast({
        title: '请先选择规格',
        icon: 'none'
      })
      return;
    }
    wx.showLoading({
      title: '正在兑换,请稍后',
    })
    /**
     * 多规格礼品选择
     */
    let data = {
      eid: -1,
      skuId: null,
      buyNum: this.data.buyNum,
      type: 0
    }
    if (selectGoods !== null) {
      data.eid = selectGoods.eid;
      data.skuId = selectGoods.id;
    } else {
      data.eid = this.data.addGoodsInfo.id;
    }
    let _that = this;
    util.requestAction(api.buyGoods, data, "POST").then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        wx.showToast({
          title: '积分兑换成功',
        })
        _that.onClosePopup();
        _that.getMyIntegral();
      } 
    }).catch(() => {
      wx.hideLoading();
      wx.showToast({
        title: '出错了,请稍后重试',
      })
    })
  },

  calculate() {
    let _that = this;
    let data = {
      type: 1
    }
    wx.showLoading({
      title: '正在兑换,请稍后',
    })
    util.requestAction(api.buyGoods, data, "POST").then(res => {
      wx.hideLoading();
      _that.setData({
        cartList: [],
        discountPrice: 0,
        totalPrice: 0
      })
      if (res.code === 200) {
        wx.showToast({
          title: '积分兑换成功',
        })
        _that.onClosePopup();
        _that.getMyIntegral();
      } 
    }).catch(() => {
      wx.hideLoading();
      wx.showToast({
        title: '出错了,请稍后重试',
      })
    })
  },

  clearCart() {
    let _that = this;
    wx.showLoading({
      title: '正在操作,请稍后',
    })
    
    util.requestAction(api.clearCart, {}, "POST").then(res => {
      wx.hideLoading();
      if (res.code === 200) {
        _that.onClosePopup();
        _that.getCartList();
        wx.showToast({
          title: '操作成功',
          icon: 'none'
        })
      }
    }).catch(() => {
      wx.hideLoading();
      wx.showToast({
        title: '出错了,请稍后重试',
      })
    })
  },

  calculatePrice() {
    let data = this.data.cartList;
    let totalPrice = 0;
    let discountPrice = 0;
    for (let i = 0; i < data.length; i++) {
      totalPrice += data[i].integral * data[i].buyNum;
      discountPrice += data[i].discountIntegral ? data[i].discountIntegral * data[i].buyNum : data[i].integral * data[i].buyNum;
    }
    this.setData({
      totalPrice: totalPrice,
      discountPrice: discountPrice
    })
  }
})

欢迎评论留言

博主承接毕设设计-自定义UI-价格美丽

 

微信:daytimeornight

posted @   小陈说说  阅读(13)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示