微信小程序多规格选择

原创 已于 2024-04-24 17:05:42 修改 · 7.9k 阅读 · 41 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#商品多规格 #微信小程序

于 2018-10-31 18:31:08 首次发布

解析都在代码里面，先看看效果

1.index.html

<view class="goodsdetialtwo">
  <view class='guige' bindtap='guigeselect'>
    <view style='color:#676767;'>规格：</view>
    <view style='width:80%;'>
      请选择
      <text style='margin-right:20rpx;' wx:for="{{goods_spec}}" wx:key>{{item[0].spec_name}}</text>
    </view>
    <image src='../../images/jian.png'></image>
  </view>
  <view animation="{{animationData}}" class='animation' catchtouchmove='noMove'>
    <view class='tophead'>
      <view class='topimg'>
        <image src='{{goodsList.original_img}}'></image>
      </view>
      <view class='topright'>
        <view>{{goodsList.goods_name}}</view>
        <view class='imgcha'>
          <view style='color:#ef5426;'>{{guilist.price}}</view>
          <image src='../../images/cha.png' bindtap='guigeno'></image>
        </view>
        <view style='margin:10rpx 0;color:#999999;'>库存:{{guilist.store_count}}</view>
        <view>规格:
          <text style="margin-right:20rpx;" wx:for="{{selectGuigeName}}" wx:key>{{item}}</text>
        </view>
      </view>
    </view>
    <view class='guigeclass' wx:for="{{goods_spec}}" wx:for-index="fuindex" wx:key>
      <view class='ggtitle'>{{item[0].spec_name}}</view>
      <view class='xuanze'>
        <view class="selectkuai {{textStates[items.isClick]}}" catchtap='selectGuige' wx:for-index="chindex" wx:for-item="items" data-fuindex="{{fuindex}}" data-chindex="{{chindex}}" data-id="{{items.item_id}}" data-item="{{items.item}}" wx:for="{{item}}" wx:key>{{items.item}}</view>
      </view>
      <view style='height:2rpx; width:100%;background-color:#eeeeee;'></view>
    </view>
    <view class='guigecount'>
      <view class='countname'>数量</view>
      <view class='countright'>
       <view class="num">
            <i-input-number value="{{ num }}" min="1" max="999999" bindchange="numChange" />
          </view>
      </view>
    </view>
    <view class='yesyes' catchtap='queDing'>
      确定
    </view>
  </view>
</view>

2.index.js

Page({
  data: {
    //数据格式
    result: {
      "goods": {
        "unit": "件",
        "goods_id": 436886,
        "store_count": 158,
        "market_price": "10.00",
        "shop_price": "0.01",
        "cost_price": "10.00",
        "goods_name": "小龙虾221",
        "original_img": "http://boweisou.oss-cn-shenzhen.aliyuncs.com/images/170/2018/06/o49599VttZZU84VkczGt1j9t5Tcu4t.jpg",
        "goods_attr_list": [],
        "goods_spec_list": [
          [{
              "spec_name": "颜色",
              "item_id": 535385,
              "item": "白色",
              "src": "",
              "isClick": 0
            },
            {
              "spec_name": "颜色",
              "item_id": 535386,
              "item": "黑色",
              "src": "",
              "isClick": 0
            }
          ],
          [{
              "spec_name": "尺寸",
              "item_id": 535692,
              "item": "170",
              "src": "",
              "isClick": 0
            },
            {
              "spec_name": "尺寸",
              "item_id": 535693,
              "item": "180",
              "src": "",
              "isClick": 0
            }
          ],
          [{
              "spec_name": "哈哈",
              "item_id": 552569,
              "item": "去",
              "src": "",
              "isClick": 0
            },
            {
              "spec_name": "哈哈",
              "item_id": 552570,
              "item": "不",
              "src": "",
              "isClick": 0
            }
          ]
        ]
      },
      "spec_goods_price": [{
          "id": 1018269,
          "key": "535385_535692_552569",
          "price": "10.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018270,
          "key": "535385_535692_552570",
          "price": "20.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018271,
          "key": "535385_535693_552569",
          "price": "30.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018272,
          "key": "535385_535693_552570",
          "price": "40.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018273,
          "key": "535386_535692_552569",
          "price": "50.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018274,
          "key": "535386_535692_552570",
          "price": "60.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018275,
          "key": "535386_535693_552569",
          "price": "70.00",
          "productprice": "0.00",
          "store_count": 20
        },
        {
          "id": 1018276,
          "key": "535386_535693_552570",
          "price": "80.00",
          "productprice": "0.00",
          "store_count": 18
        }
      ],
      "goods_attr_list": [],
      "comment": [],
    },
    //微信小程序动画
    animationData: {},
    animationisno: false,
    guilist: {},
    arrId: [],
    arrName: [],
    textStates: ["view-btns-text-normal", "view-btns-text-select"],
    num:1,
  },

  onLoad: function(options) {
    let that = this;
    let guilists = that.data.guilist;
    guilists.price = that.data.result.goods.shop_price;
    guilists.store_count = that.data.result.goods.store_count;
    that.setData({
      goodsList: that.data.result.goods,
      goods_spec: that.data.result.goods.goods_spec_list,
      spec_goods_price: that.data.result.spec_goods_price,
      guilist: guilists
    })
  },
  selectGuige(e) {
    let that = this,
      // 获取第一个循环的index
      fuindex = e.currentTarget.dataset.fuindex,
      // 获取第二个循环的index
      chindex = e.currentTarget.dataset.chindex,
      // 获取当前点击的id
      selectId = e.currentTarget.dataset.id,
      // 获取当前点击的规格名称
      selectName = e.currentTarget.dataset.item,
      //  初始化arrId
      arrId = that.data.arrId,
      //  初始化arrName
      arrName = that.data.arrName,
      guilists = {},
      goods_spec = that.data.goods_spec;
    // 通过循环来判断点击了哪一个规格，根据数据结构来；
    // goods_spec[fuindex]根据fuindex来判断点击了哪一种类型的规格
    for (let i = 0; i < goods_spec[fuindex].length; i++) {
      // 当i等于当前点击的规格时，设置isClick=1
      if (i == chindex) {
        goods_spec[fuindex][i].isClick = 1;
      } 
      // 否则设置其他的isClick=0
      else {
        goods_spec[fuindex][i].isClick = 0;
      }
    };
    // 把点击的规格名称和规格id存起来
    arrId[fuindex] = selectId;
    arrName[fuindex] = selectName;
    // 拼接规格id，（后台返回的数据是这个）
    let selectGuigeId = arrId.join('_');
    for (let i = 0; i < that.data.spec_goods_price.length; i++) {
      // 找对应的规格组合
      if (that.data.spec_goods_price[i].key == selectGuigeId) {
        guilists = that.data.spec_goods_price[i];
      }
    }
    that.setData({
      goods_spec: goods_spec,
      arrId,
      guilist: guilists,
      selectGuigeName: arrName
    })
  },
  numChange(e) {
    this.setData({
      num: e.detail.value
    })
  },
  queDing() {
    let that = this;
    let selectguigeid = that.data.arrId.join('_');
    for (let i = 0; i < that.data.spec_goods_price.length; i++) {
      // 判断是否选择规格
      if (that.data.spec_goods_price[i].key == selectguigeid) {
        wx.showModal({
          showCancel: false,
          content: '选择成功',
          success: function(res) {}
        });
        // 判断库存是否充足
        if (selectguigeid.store_count <= 0) {
          wx.showModal({
            showCancel: false,
            content: '库存不足',
            success: function(res) {}
          });
        }
        // 两种情况满足跳转
        else {
          wx.showModal({
            showCancel: false,
            content: '跳转页面',
            success: function(res) {}
          });
        }
        return
      } else {
        wx.showModal({
          showCancel: false,
          content: '请选择规格',
          success: function(res) {
            if (res.confirm) {}
          }
        })
      }
    }
  },
  // 选择规格页面弹出   微信小程序动画
  guigeselect: function() {
    let that = this;
    let animal1 = wx.createAnimation({
      timingFunction: 'ease-in'
    }).translate(0, -600).step({
      duration: 300
    })
    that.setData({
      animationData: animal1.export(),
    })
  },
  // 选择规格页面隐藏   微信小程序动画
  guigeno: function() {
    let that = this
    let animal1 = wx.createAnimation({
      timingFunction: 'ease-in'
    }).translate(0, 600).step({
      duration: 300
    })
    that.setData({
      animationData: animal1.export()
    })
  }
})

3.index.wxss

page {
  background: #fff;
}

.guige {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  width: 94%;
  margin: 0 3%;
  display: flex;
  align-items: center;
}

.guige image {
  width: 22rpx;
  height: 30rpx;
}

.animation {
  width: 100%;
  height: 1000rpx;
  background-color: #fff;
  position: fixed;
  z-index: 333;
  /* top:0; */
  bottom: -600px;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
}

.tophead {
  display: flex;
  margin: 30rpx 3%;
  width: 94%;
  align-items: center;
  text-align: center;
}

.topimg {
  width: 200rpx;
  height: 200rpx;
}

.topimg image {
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
  background-color: red;
}

.topright {
  margin-left: 30rpx;
  font-size: 28rpx;
  text-align: left;
  width: 66%;
}

.xuanze {
  display: flex;
  flex-wrap: wrap;
}

.imgcha {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.imgcha image {
  width: 38rpx;
  height: 38rpx;
}

.guigeclass {
  margin: 0 3%;
  width: 94%;
  font-size: 28rpx;
}

.ggtitle {
  font-size: 30rpx;
  margin-top: 20rpx;
}

.xuanze {
  width: 100%;
}

.selectkuai {
  border: solid 1px black;
  margin: 20rpx;
  padding: 5rpx 20rpx;
  border-radius: 20rpx;
}

.guigecount {
  margin: 30rpx 3%;
  width: 94%;
  font-size: 28rpx;
}

.countright {
  float: right;
  display: flex;
  text-align: center;
  align-items: center;
}


.countname {
  margin-bottom: 20rpx;
  font-size: 30rpx;
}

.yesyes {
  position: absolute;
  bottom: 0;
  width: 70%;
  margin: 0 15% 20rpx 15%;
  text-align: center;
  z-index: 66;
  height: 80rpx;
  background-color: #fe6732;
  border-radius: 40rpx;
  color: white;
  font-size: 32rpx;
  line-height: 80rpx;
}
.view-btns-text-normal {
  color: #4d4d4d;
}

.view-btns-text-select {
  color: #fff;
  background: #fb4d00;
}
.num {
  display: inline-block;
}

这里引用了iview里面 InputNumber 数字输入框，如果需要跑起来的话，要么把这个组件去掉，要么引入，

商品多规格的实现主要看后台返回的数据格式，有些后台返回的可能不是上面的数据，这时就要根据数据格式来实现了

电商小程序实战教程-规格选择
低代码布道师的博客
05-31 848
我们上一篇讲解了如何搭建商品详情页，本篇我们介绍一下如何选择规格。规格的话一般是从底部弹出一个弹窗，然后先选择规格，选择数量，点击确定后回填到规格信息处。
前端商品SKU的选择
小熊宇航员的博客
03-28 1365
作为一枚后端程序猿，一直没有思考过商品多规格选择的问题，前段时间看到一篇帖子，是关于商品多规格选择的，现在就原帖子的
微信小程序 外卖 点餐 预约 多规格
04-08
微信小程序 外卖 点餐 预约 多规格 微信小程序 外卖 点餐 预约 多规格 微信小程序 外卖 点餐 预约 多规格 微信小程序 外卖 点餐 预约 多规格
前端商品多规格选择（SKU）算法深度解析与面试策略
最新发布
G1870719370的博客
06-12 754
数据结构设计：定义清晰的specs（规格类别）和skus（SKU 组合）数据结构，确保规格值与 SKU 组合之间的一一对应关系。状态维护：维护用户当前选中的规格组合 (selected) 和每个规格选项的禁用状态 (disabled动态禁用算法：通过“试探性选择”和辅助函数，实时计算并更新哪些规格选项是不可选的。SKU 匹配：能够根据用户当前（可能不完整）的选择，快速查找匹配的有效 SKU，并显示其库存、价格等信息。性能优化。
微信小程序之多规格选择
m0_61618246的博客
01-02 2064
微信小程序之多规格选择
小程序类似淘宝选择规格的轮子
withwz的博客
05-28 1488
基本实现代码 <template> <view class="container"> <view class="skuBox"> <view class="color" v-for="(item,index) in skuData" :key="index"> <view class="type_contnent_box...
微信小程序中遇到的多规格问题(一)
ZJW222的博客
11-05 2352
刚进入公司的时候就有遇到过多规格的问题，当时就觉得很麻烦，就只是看了下，没有尝试，最近在写微信小程序的时候，又遇到了多规格问题，就自己尝试了下，在这里记录下 1.效果图 2.文件及部分思路 index.wxml文件 &lt;view class="multipleStandard" bindtap="standardSelect"&gt; &lt;view class="stand...
微信小程序商品详情页规格属性选择示例代码
12-29
detail.wxml展示页面 <!--轮播图--> </swip
微信小程序源码-仿饿了么.zip
03-24
微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序...
微信小程序 外卖点餐 仿美团外卖 （源代码+截图）
06-21
微信小程序 外卖点餐 仿美团外卖 （源代码+截图）微信小程序 外卖点餐 仿美团外卖 （源代码+截图）微信小程序 外卖点餐 仿美团外卖 （源代码+截图）微信小程序 外卖点餐 仿美团外卖 （源代码+截图）微信小程序 外卖...
证件照制作微信小程序源码.rar
11-23
随着微信小程序生态系统的不断完善和拓展，越来越多的服务和工具将被开发出来。证件照制作微信小程序只是其中的一个例子，它展示了小程序在提供便捷服务方面的巨大潜力。未来，我们可以预见，会有更多创新的小程序...
微信小程序三级联动选择器使用方法
08-28
主要为大家详细介绍了微信小程序三级联动选择器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现的picker多级联动功能示例
10-16
主要介绍了微信小程序实现的picker多级联动功能,结合实例形式分析了微信小程序picker组件使用及wx.request后台交互相关操作技巧,需要的朋友可以参考下
小程序多规格商品
刺客-Andy 的博客
03-31 1726
1、数据结构 （后台提供的） goodsBaseInfo: { // 单个商品 goodsId: "", "skuNameList":[ // 最多三个，最少一个； {//规格名称 "id":"3333",//id "name":"颜色",//名字 //"specific...
微信小程序 商品规格的选择和嵌套循环
DJxyyy的博客
10-28 1052
微信小程序 商品规格的选择和嵌套循环 1,、首先看我们的wxml <view class="content"> <block wx:for="{{properties}}" wx:key="item" wx:for-index="id"> <view class="content_title">{{item.name}}</view> <view class='content_list'>
微信商城小程序操作为产品增加颜色尺寸长度等多规格内容
12-12 2308
比如要实现以下的颜色，尺寸，长度的规格列表。 操作步骤， 第一步，登录到后台，找到信息-》选择左侧的产品分类-》找到对应的产品分类，找到想要修改的产品，点击，“销售规格” 第二步，到销售规格编辑页面 按照上面的方式进行添加即可。 ...
微信小程序-实现多选效果
u013306050的博客
05-23 2283
微信小程序实现多选效果
小程序 商品规格选择
Rux子兮的博客
04-13 1682
goods.js //获取应用实例 const app = getApp(); Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { gid: 1, gindex: 0, changegoodsSpec: '',//默认 goods...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值