!
也想出现在这里? 联系我们
内容广告区块
当前位置:首页站长学院后端开发微信小程序实现购物时限购商品的数量(附代码)

微信小程序实现购物时限购商品的数量(附代码)

本篇文章给大家带来的内容是关于微信小程序实现购物时限购商品的数量(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

展示效果如下:

微信小程序实现购物时限购商品的数量(附代码)插图

两个底部用的是一个弹框,利用submit_type的类型不一样来进行区分哪个是单独购买哪个是包邮开团

wxml代码如下:

 <view class="num-box">
      <view class="weui-media-box__bd">
          <view class="promotion-sku clear">
             <view class="Spinner">
                <a wx:if="{{goods_count==1}}" class="DisDe">
                     <i bindtap="minusCount" data-index="{{index}}" class="DisDe">-</i>
                </a>
                <a wx:if="{{goods_count>1}}" class="Decrease">
                     <i bindtap="minusCount" data-index="{{index}}" class="DisDe">-</i>
                </a>
             <view>
              <input class="Amount" bindinput="changeCount" type='number' value="{{goods_count}}" autocomplete="off" maxlength="3"  data-submit_type="{{submit_type}}" />
           </view>
                <a class="Increase">
                   <i bindtap="addCount" data-index="{{index}}" data-submit_type="{{submit_type}}">+</i>
                </a>                   
          </view>
         </view>
      </view>
 </view>

data-submit_type="{{submit_type}}"中的submit_type就是判断是单独还是开团购买

js代码如下:

// 增加数量
  addCount(e) {
    // 购买类型,单独购买或拼团购买
    let submit_type = e.target.dataset.submit_type;
    var goods_count = this.data.goods_count;
    goods_count = parseInt(goods_count) + 1;
    //debugger
    if (submit_type == 2) {  // 拼团购买
      var limited_num = this.data.collage.limited_num;
      if (goods_count > limited_num) {
        this.showTip('超出限购');
        return;
      }
    }
    this.setData({
      goods_count: goods_count
    });
  },
// 改变数量(input内的值)
  changeCount(e) {
    var goods_count = e.detail.value;

    let submit_type = e.target.dataset.submit_type;
    if (submit_type == 1) {
      var sys_num = this.data.goods_num;
      if (goods_count > sys_num) {  // 单独购买
        this.showTip('库存不足');
        return;
      }
    } else if (submit_type == 2) {  // 拼团购买
      var limited_num = this.data.collage.limited_num;
      if (goods_count > limited_num) {
        this.showTip('超出限购');
        return;
      }
    }

    if (!(/^[\d]+\.?\d*$/.test(goods_count))) {
      goods_count = goods_count.replace(/\D/g, '');
      return goods_count ? goods_count : 1;
    }
    if (goods_count < 1) {
      return 1;
    }
    this.setData({
      goods_count: goods_count
    });
  },

 相关推荐:

微信小程序自定义底部tarbar的代码实现

微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码)

以上就是微信小程序实现购物时限购商品的数量(附代码)的详细内容,更多请关注知企PROSAAS其它相关文章!

温馨提示:

文章标题:微信小程序实现购物时限购商品的数量(附代码)

文章链接:https://www.prosaas.cn/17172.html

更新时间:2018年08月10日

声明: 本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:973664285@qq.com我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读知企PROSAAS协议
声明:本文由5201314发布,本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
后端开发

微信小程序自定义底部tarbar的代码实现

2018-8-10 14:41:34

后端开发

微信小程序中bug的解决:页面使用flex布局在iOS9.X中无法正常渲染的解决方案

2018-8-10 14:50:58

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
↑ 显示广告
放大二维码