微信小程序购物车-多商家-多商品

主要看一下购物车的计算过程 实现后的基本样式

具体代码

主要看shops页面, 前提:获取基本的数据,由于数据太长,还请下载项目后查看,github地址:https://github.com/cxy-js/wechat-shop

  • shops页面data数据
 data: {
    shops: {},           //商品
    curt: 0,             //分类id
    curindex: 0,         //当前index
    idx: 0,
    ishow: 1,
    cai: [],             //菜的数组
    allprice: 0,        //总家
    allnum: 0          //总商品数
  },
 onLoad: function (options) {
    let id = options.id;
    //商家详情本地请求资源
    wx.showToast({
      title: '成功',
      duration: 500,
      success: (e) => {
        if (e.errMsg === 'showToast:ok') {
          this.setData({
            shops: data.shops[id],
            cai: data.shops[id].cai
          })
          console.log(this.data.cai)
        } else {
          console.log(e.errMsg)
        }
      }
    })
  }
  • id 为index页面传过来的商家 id;依据商家id来显示不同商家
  • 进入商家页面 后的布局;头部就不看了,主要看菜的分类以及都有哪些菜 在这之前需要在商品以及评价的切换中拿到curt,curt就是分类的id
  • 菜品切换
        <view class='left-nav'>
          <view wx:for="{{shops.lefttitle}}">
            <view class="shops-left-title {{curt == item.id ? 'bg' : ''}}" catchtap="goIndex" data-id="{{item.id}}" data-index="{{index}}">
              <text class='t'>{{item.lefttitle}}</text>
            </view>
          </view>
        </view>
  • 切换代码就不看了,主要是拿到分类的id=>curt下面就是分类下的布局
<scroll-view scroll-y class='scroll'>
          <view class='cai'>
            <!--一句curt来显示不是菜 curt===分类id-->
            <view wx:for="{{cai[curt]}}" wx:for-item="cai" wx:for-index="caiindex">
              <!--具体的菜-->
              <view class='right-cai'>
                <image src="{{cai.img}}"></image>
                <view class='middle'>
                  <text>{{cai.cainame}}</text>
                  <text class='shou'>月售{{cai.shou}}</text>
                  <text class='price'>¥{{cai.price}}</text>
                </view>
                <!--加减按钮-->
                <view class='btn'>
                  <text class='add' catchtap="minus" data-index="{{caiindex}}" wx:if="{{cai.num===0?false:true}}">-</text>
                  <text class='cainum' wx:if="{{cai.num===0?false:true}}">{{cai.num}}</text>
                  <text class='add' catchtap="add" data-index="{{caiindex}}">+</text>
                </view>
              </view>
            </view>
          </view>
 </scroll-view>

先来看下增加的计算逻辑

 //增加商品数量
  add(e) {
    let index = e.currentTarget.dataset.index
    let cai = this.data.cai;
    let curt = this.data.curt;//当前是哪个分类下的菜
    let num = cai[curt][index].num;//当前菜的数量
    num++;
    cai[curt][index].num = num //点击后菜的数量
    this.setData({
      cai: cai   //更新菜
    })
    this.getAll() //计算总计
  }

点击按钮时依据哪个分类下的哪个菜来区分;每点击一次商品数量+1;最后需要实时计算价格 this.getAll()

减少的计算逻辑与增加超不多

 minus(e) {
    let index = e.currentTarget.dataset.index
    let cai = this.data.cai;
    let curt = this.data.curt;//当前是哪个分类下的菜
    let num = cai[curt][index].num;
    if (num <= 0) {
      return false;
    }
    num--;
    //重新赋值数量
    cai[curt][index].num = num
    this.setData({
      cai: cai
    })
    this.getAll()
  }

多了一个判断而已

接下来就是计算总价格

  //计算总价
  getAll() {
    let cai = this.data.cai;
    let total = 0;
    let allnum = 0;
    let allcainame=""
    //循环当前类别菜数组
    for (let i = 0; i < cai.length; i++) {
      let c = cai[i];
      for (let j = 0; j < c.length; j++) {
        let num = c[j].num
        let price = c[j].price;
        //计算总商品数        
        allnum += num
         //计算总价
        total += num * price
      }
    }
    this.setData({
      allprice: total,
      allnum: allnum
    });
  },

里面都有注释也不难看懂,就不解释了!!!

注意一切已数据为中心!!

最后点击去结算的跳转

 //跳转支付页面
  getAllprice() {
    // console.log(this.data.shops)
    //传递菜馆名,总价
    let title = this.data.shops.title;
    let allprice = this.data.allprice;
    let cainame = this.data.cainame;
    if (this.data.allnum === 0) {
      wx.showModal({
        title: '商品为空!',
        content: '您选择商品了吗?',
      })
      return
    } else {
      //商品数量不能为0
      this.getAll()
      wx.navigateTo({
        url: '../pay/pay?allprice=' + allprice + '&title=' + title 
      })
    }
  }

判断一下是否有商品 在这里传递的数据都可以带入到支付页面

结束需要代码请移步到我的github

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

OO——从不知到知道一点,从迷茫到豁然开朗 (迟来的我的2002到2007)

前两天写了一个 “使用了继承、多态还有工厂模式和反射,但是还是没有OO的感觉。  ”,看到了很多同学的回复,自己又反思了几次,终于有所感悟,写下来做个记录。 ...

2367
来自专栏点滴积累

geotrellis使用(四十二)将 Shp 文件转为 GeoJson

原因很多,最重要的原因是我转行了。是的,我离开了开发岗位,走向了开发的天敌-产品经理。虽然名义上是产品经理,但是干的事情也很杂,除了不写代码,其他的都干,经常还...

1172
来自专栏大史住在大前端

一统江湖的大前端(3) DOClever——你的postman有点low

有了Mock服务器和Excel的文档说明后,相信大家的沟通效率会比以前提升很多,但仍然被沟通占据着绝大部分开发时间,常常遇到的情况会有:

935
来自专栏数据之美

浅谈用户行为分析之用户身份识别:cookie 知多少?

对于数据统计分析或者数据挖掘而言,用户是个非常重要的维度,也是统计分析能落地的基础。一般而言,咱们追踪或者识别一个用户的首选方案是 userID,大多数公司的产...

6786
来自专栏腾讯Bugly的专栏

【团队分享】苍翼之刃:论File Descriptor泄漏如何导致Crash?

这一期的团队分享,我们特邀苍翼之刃的开发负责人Jay,为大家分享在Android项目中遇到的一些Crash。 苍翼之刃 外文:BlazBlue Revolut...

5027
来自专栏互联网杂技

前端自动化测试探索

背景 测试是完善的研发体系中不可或缺的一环。前端同样需要测试,你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性,尽管测...

34710
来自专栏phodal

RePractise前端篇: 前端演进史

细细整理了过去接触过的那些前端技术,发现前端演进是段特别有意思的历史。人们总是在过去就做出未来需要的框架,而现在流行的是过去的过去发明过的。如,响应式设计不得不...

2496
来自专栏AI启蒙研究院

耿大侠 Diss国外架构师文章《From CQS to CQRS》

703
来自专栏FreeBuf

实用技巧 | 如何通过IP地址进行精准定位

*本文原创作者:allen权,转载须注明来自FreeBuf.COM 在甲方工作的朋友可能会遇到这样的问题,服务器或者系统经常被扫描,通过IP地址我们只能查到某...

2475
来自专栏Python专栏

Python | 爬虫爬取智联招聘(进阶版)

运行平台: Windows Python版本: Python3.6 IDE: Sublime Text 其他工具: Chrome浏览器

1401

扫码关注云+社区