微信小程序 ——多商家商城 购物车

其他 2019-10-26 14:20:47 阅读次数: 0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/weixin_42301962/article/details/99830065

搜的都是单个店铺的，经过一番折腾，改了改，还凑合吧，直接上代码，不足之处多多指点
在这里插入图片描述在这里插入图片描述

  1. wxml
<!--pages/shoppingCart/shoppingCart.wxml-->
<view class='container' hidden="{{iscart}}">
  <view class='header'>
    <text class='title'>购物车</text>
    <block wx:if="{{isDelete==0}}">
      <text class="icon-right green" bindtap="getEdit">编辑</text>
    </block>
    <block wx:else>
      <text class="icon-right green" bindtap="getEdit">完成</text>
    </block>
  </view>
  <view class="cart-list">
    <view class="cart-box" wx:for='{{cartList}}' wx:for-index="idx" wx:key="*">
      <view class="cart-shop" >
        <icon type="circle" size="23" wx:if="{{!item.shopCheck}}" bindtap='storeselected' data-index="{{idx}}"></icon>
        <icon type="success" size="23" wx:if="{{item.shopCheck}}" bindtap='storeselected' data-index="{{idx}}"></icon>
        <view class="shop-name">{{item.shop_name}}</view>
      </view>
      <view class='section section-good'>
          <view class='good' wx:for='{{item.goodsList}}' wx:key="{{index}}">
            <icon type="circle" size="23" wx:if="{{!item.check}}" bindtap='goodsselected' data-index="{{index}}" data-select-index="{{idx}}" data-goodsid="{{item.goods_id}}"></icon>
            <icon type="success" size="23" wx:if="{{item.check}}" bindtap='goodsselected' data-index="{{index}}" data-select-index="{{idx}}" data-goodsid="{{item.goods_id}}"></icon>
            <image class='cover' src='{{item.cover}}'></image>
            <view class='content'>
              <view class='text name'>{{item.name}}</view>
              <view class='stepper'>
                <view class='text price'>¥{{item.price}}</view>
                <view class='subtract {{item.count == 1 ? "disabled": ""}}' data-index="{{index}}" bindtap='reduce' data-select-index="{{idx}}">-</view>
                <input class='count' type='number' value='{{item.count.quantity}}' disabled='disabled'></input>
                <view class='add' bindtap='add' data-index="{{index}}" data-select-index="{{idx}}">+</view>
              </view>
            </view>
          </view>
      </view>
    </view>
  </view>

  <view class='section-bottom'>
    <checkbox-group bindchange="selectalltap">
      <label class='checkbox-allcheck'>
        <checkbox value="" checked="{{allsel}}" hidden='hidden' />
        <icon type="circle" size="23" wx:if="{{!allsel}}"></icon>
        <icon type="success" size="23" wx:if="{{allsel}}"></icon>
        <text class='check-all-text'>全选({{totalCount}})</text>
      </label>
    </checkbox-group>
    <block wx:if="{{isDelete==0}}">
      <view class="total">
        <view class='totalPrice'>
          <text>¥{{total}}</text>
        </view>
      </view>
      <view class='btn btn-default' bindtap="Settlement">去结算</view>
    </block>
    <block wx:else>
      <view class="delete" bindtap="deleteList">删除</view>
    </block>
    
  </view>

</view>
<view class='container noshopCart' hidden='{{!iscart}}'>
  <view class='header'>
    <text class='title'>购物车</text>
  </view>
  <view class="no-shop">购物车什么都没有，赶快去选购吧</view>
  <view class="shopping-btn">去购物</view>
</view>
  1. wxss
/* pages/shoppingCart/shoppingCart.wxss */
/* pages/shopcart/shopcart.wxss */

page {
  height: 100%;
  background: #f4f4f4;
  font-family: -apple-system-font, Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 32rpx;
  line-height: 1.42857;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.section {
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-bottom: 10rpx;
}
.cart-list{
  margin-bottom: 100rpx;
}
.cart-shop{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  background-color: #fff;
  padding: 0% 4%;
}
.cart-shop .shop-name{
  height: 100rpx;
  line-height: 100rpx;
  color: #292929;
  font-size: 28rpx;
  margin-left: 3%;
}
.cart-shop icon{
  margin-top: 6%;
}

.section-good {
  /* margin-bottom: 100rpx; */
  background-color: #fff;
}

.good {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 200rpx;
}

.good:last-child {
  border-bottom: none;
}

.checkbox {
  width: 48rpx;
  height: 48rpx;
}

.cover {
  width: 150rpx;
  height: 150rpx;
  margin-left: 20rpx;
}

.content {
  height: 100rpx;
  flex: 1;
  margin-left: 20rpx;
}

.content .text {
  color: #363636;
  width: 450rpx;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.content .name {
  color: #232323;
  font-size: 26rpx;
}

.content .author {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .desc {
  color: #363636;
  font-size: 28rpx;
  margin-top: 10rpx;
}

.content .press {
  font-size: 28rpx;
  color: #363636;
  margin-top: 10rpx;
}

.content .price {
  font-size: 28rpx;
  color: #ea0a0a;
  text-align: left;
}

.good .stepper {
  width: 450rpx;
  display: flex;
  position: absolute;
  right: 0;
  bottom: 20rpx;
  flex-direction: row;
  text-align: center;
}

.stepper .add, .stepper .subtract {
  width: 60rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.stepper .add{
  border-left: none;
  border-top-right-radius: 6rpx;
  border-bottom-right-radius: 6rpx;
}
.stepper .subtract{
  border-right: none;
  border-top-left-radius: 6rpx;
  border-bottom-left-radius: 6rpx;
}

/* .stepper .disabled {
  color: #eee;
} */

.stepper .count { 
  width: 90rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 1px solid #ccc;
  text-align: center;
  box-sizing: border-box;
  min-height: 1rem;
  font-size: 28rpx;
}

.section-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-bottom: 0;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 99;
}


.section-bottom .btn-default {
  width: 180rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
  background-color: #62ab00;
}

.section-bottom .checkbox-allcheck {
  display: inline-block;
  margin-left: 30rpx;
  vertical-align: top;
  font-size: 0px;
}

.section-bottom .check-all-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 10rpx;
  height: 23px;
  line-height: 23px;
  font-size: 28rpx;
}

.section-bottom .total {
  flex: 1;
  text-align: right;
  font-size: 26rpx;
}

.total .totalPrice {
  display: inline-block;
  font-size: 26rpx;
  margin-right: 30rpx;
  vertical-align: middle;
}

.total .totalCount text {
  color: #e4452a;
  vertical-align: middle;
}

.total .totalPrice text {
  color: #e4452a;
  font-size: 36rpx;
  vertical-align: middle;
}
.delete{
  width: 120rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 28rpx;
  color: #62ab00;
  border: 1rpx solid #62ab00;
  border-radius: 30rpx;
  margin-left: 55%;
}
.no-shop{
  height: 100rpx;
  line-height: 100rpx;
}
.noshopCart{
  background-color: #fff;
  text-align: center;
}
.noshopCart .no-shop{
  padding-top: 45%;
}

.shopping-btn{
  border: 1rpx solid #62ab00;
  box-sizing: border-box;
  color: #62ab00;
  font-size: 28rpx;
  width: 150rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
  text-align: center;
  margin: 0 auto;
}
  1. js
// pages/shopcart/shopcart.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    'cartList':[{
      'shop_name': '秋风之姿旗舰店',
      'shopCheck': false, 
      'goodsList': [{
          'goods_id': '1',
          'name': '爱茉莉橄榄蜂蜜护发油70ml爱茉莉橄榄蜂蜜护发油70ml爱茉莉橄榄蜂蜜护发油70ml',
          'cover': '/icons/goods2.png',
          'price': 1,
          'count': 1,
          'check': false,
          // 数据设定
          'count': {
            'quantity': 1, //购买数量
            'min': 1, //最小购买
            'max': 20 //最大购买
          }
        },
        {
          'goods_id': '2',
          'name': '追风筝的人',
          'cover': '/icons/goods2.png',
          'price': 2,
          'count': 1,
          'check': false,
          'count': {
            'quantity': 1, //购买数量
            'min': 1, //最小购买
            'max': 20 //最大购买
          }
        }],
    }, {
        'shop_name': '艾丽莎旗舰店',
        'shopCheck': false,
        'goodsList': [
          {
            'name': '超火cec短袖女2019夏装新款',
            'goods_id': '3',
            'cover': '/icons/goods2.png',
            'price': 1,
            'count': 1,
            'check': false,
            'count': {
              'quantity': 1, //购买数量
              'min': 1, //最小购买
              'max': 20 //最大购买
            }
          }
        ],
      }],
    isDelete: 0,
    iscart: false, //控制购物车有没有数据
    total: 0, //总金额
    allsel: false, //全选
    totalCount: 0, //商品数量
    idx: 0,  //选中商品的下标
    goodsId_arr: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  // 店铺中的全选
  storeselected: function (e) {
    var shopcar = this.data.cartList //购物车数据
    let index = e.currentTarget.dataset.index //当前店铺下标
    // console.log(JSON.stringify(shopcar) +"当前店铺下标:"+JSON.stringify(e));
    var thisstoredata = shopcar[index].goodsList //当前店铺商品数据
    // 改变当前店铺状态
    if (shopcar[index].shopCheck) {
      shopcar[index].shopCheck = false;
      for (let i in thisstoredata) { //改变店铺下面的商品状态
        shopcar[index].goodsList[i].check = false;
      }
    } else {
      shopcar[index].shopCheck = true;
      for (let i in thisstoredata) {
        shopcar[index].goodsList[i].check = true;
      }
    }
    this.setData({
      cartList: shopcar, //店铺下得商品数量
      idx: index
    })
    this.allallprices();
    this.getTotalPrice();
  },
  // 商品的选中
  goodsselected: function (e) {
    let _this = this;
    var shopcar = this.data.cartList //购物车数据
    let index = e.currentTarget.dataset.index //当前商品在店铺中的下标
    let idx = e.currentTarget.dataset.selectIndex;
    let cai = shopcar[idx].goodsList; //当前商品的店铺data.goodsList
    let curt = cai[index]; //当前商品数组
    var goods_id = e.currentTarget.dataset.goodsid;  //选中的商品id
    this.data.goodsId_arr.push(goods_id);  //选中的商品id  push到数组中
    console.log("去重后的商品id数组：" + this.data.goodsId_arr);
    
    if (curt.check) {
      shopcar[idx].goodsList[index].check = false; //改变当前商品状态
      shopcar[idx].shopCheck = false; //店铺状态改变
    } else {
      shopcar[idx].goodsList[index].check = true;
      console.log(shopcar[idx].goodsList[index].check);
      // 当店铺选中商品数量与店铺总数量相等时 改变店铺状态
      var storegoodsleg = shopcar[idx].goodsList.length;//店铺中商品个数
      var goodsList = shopcar[idx].goodsList;
      var selectedleg = 0;
      for (var i in goodsList) {
        if (goodsList[i].check) {
          selectedleg++;
        }
      }
      if (storegoodsleg == selectedleg) {
        shopcar[idx].shopCheck = true;
      }

    }
    // console.log(_this.data.allsel)
    this.setData({
      cartList: shopcar, //更新
      allsel: _this.data.allsel,
      idx: index,
      // goodsId_arr: temp
    })
    this.allallprices();
    this.getTotalPrice();
  },
  // //全选条件 条件->商铺全选择全选 反之
  allallprices: function () {
    var shopcar = this.data.cartList; //购物车数据
    let storenum = shopcar.length;
    let allselected = this.data.allsel;
    let allselectednum = 0;
    for (let i = 0; i < shopcar.length; i++) {
      if (shopcar[i].shopCheck == true) {
        allselectednum++;
      }
    }
    if (storenum == allselectednum) {
      allselected = true;
    } else {
      allselected = false;
    }
    this.setData({
      allsel: allselected
    })
    this.getTotalPrice();
  },
  // 点击全选
  selectalltap: function () {
    var shopcar = this.data.cartList; //购物车数据
    // console.log("购物车数据:"+shopcar);
    let allsel = this.data.allsel;
    if (allsel) {
      allsel = false
    } else {
      allsel = true
    }
    for (var i = 0, len = shopcar.length; i < len; i++) {
      shopcar[i].shopCheck = allsel;
      var goodsList = shopcar[i].goodsList
      for (var a = 0; a < goodsList.length; a++) {
        goodsList[a].check = allsel
      }
    }
    this.setData({
      cartList: shopcar, //最后赋值到data中渲染到页面
      allsel: allsel
    })
    this.getTotalPrice();

  },
  // // 加函数
  add: function (e) {
    var index = e.currentTarget.dataset.index; //当前商品所在店铺中的下标
    let idx = e.currentTarget.dataset.selectIndex //当前店铺下标
    // console.log(index + 'he' + idx)
    var shopcar = this.data.cartList; //购物车数剧
   
    let cai = shopcar[idx].goodsList; //当前商品的店铺data.goodsinfo
    let curt = cai[index]; //当前商品
    var num = curt.count.quantity; //当前商品的数量
    var price = curt.price; //当前商品的单价
    console.log("当前商品的店铺:" + JSON.stringify(num));
    if (num < curt.count.max) {
      num++;
    } else {
      wx.showToast({
        title: '已超出现有库存',
        duration: 2000,
      });
      num = curt.count.max;
    }
    curt.count.quantity = num;
    curt.unitPrice = num * price;
    this.setData({
      cartList: shopcar,
      idx: index
    })
    this.getTotalPrice();
  },
  // // 减函数
  reduce: function (e) {
    var index = e.currentTarget.dataset.index; //当前商品所在店铺中的下标
    let idx = e.currentTarget.dataset.selectIndex //当前店铺下标
    var shopcar = this.data.cartList; //购物车数剧
    let cai = shopcar[idx].goodsList; //当前商品的店铺data.goodsList
    let curt = cai[index]; //当前商品
    var num = curt.count.quantity; //当前商品的数量
    var price = curt.price; //当前商品的单价
    if (num == curt.count.min) {
      num--;
      curt.count.quantity = 1;
      curt.unitPrice = 1 * price;

    } else {
      num--;
      curt.count.quantity = num;
      curt.unitPrice = num * price;

    }
    // 重新渲染数据
    this.setData({
      cartList: shopcar,
      idx: index
    })
    this.getTotalPrice();

  },
  // 计算总价和总数
  getTotalPrice: function() {
    let totalPrice = 0;
    let num = 0;
    // let shopcar = this.data.cartList[0].goodsList; //购物车数剧
    let shopcar = this.data.cartList; //购物车数剧
    // console.log(JSON.stringify(shopcar));
    for (let i = 0; i < shopcar.length; i++) {
      for (let j = 0; j < shopcar[i].goodsList.length; j++) {
        var good = shopcar[i].goodsList[j];
        if (good.check) {
          totalPrice += good.count.quantity * good.price;
          num += good.count.quantity;
          console.log("总价格:"+totalPrice);
        }
      }
    }
    this.setData({
      total: totalPrice.toFixed(2), //总价格
      totalCount: num //总数
    })
  },
  //点击编辑
  getEdit: function(e){
    var edit = this.data.isDelete;
    if (edit==0){
      this.setData({
        isDelete: 1
      })
    }else{
      this.setData({
        isDelete: 0
      })
    }
  },
  deleteList: function(e) {
    var shopcar = that.data.cartList; //购物车数据
    for (let i in shopcar) {
        for (let j in shopcar[i].goodslist) {
          if (shopcar[i].goodslist[j].check==true){
            newArray.push(shopcar[i].goodslist[j].id);
          }
        }
    }

  },
  Settlement: function(){
    
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

 

})

猜你喜欢

转载自blog.csdn.net/weixin_42301962/article/details/99830065
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022