微信小程序:购物车总结(商品左右联动)

微信小程序 专栏收录该内容
6 篇文章 0 订阅

微信小程序开发之购物车总结

之前开发小程序也是一头雾水,也走了很多的坑今天写出来给大家分享一下开发过程中所走的弯路,加以总结,点滴积累,供大家参考,也希望大佬们指正。

说起购物车那也的有商品列表,列表中的有商品的种类,价格(及优惠价格),数量,之前的项目中的业务逻辑中带商品剩余的概念,所以在开发过程中的,用户在加减选择商品的时候,还得考虑商品的剩余数量,样式的问题一直让人很烦人,整理了一番也能看吧(老是感觉差点什么,得和前端小妹多聊会了哈哈),在代码中也会给大家分享我的实现方式。

开发的样式比较简陋的旨在说明问题,还请大佬轻喷,虚心讨教。

  1. 先说商品的列表展示,微信小程序中的也有组件scroll-view(可滚动的区域视图),具体的使用方法API比我说的清楚。
  2. 商品的展示一般是左边是商品的种类,右边是当前种类下的所有商品,数据库表的设计就不解释了相信大家都会
  3. 实现的就是左边商品种类和右边的商品详情的联动,右边商品的上下滑动也可是种类也随之选中
  4. 还有就是底部商品列表的弹出及商品的加减。
  5. 考虑组装什么样的数据(开发过程中使用的是一个map中套一个list)也就是map中的一个键值对就是一个商品种类及这个种类中的所有商品,最后统一放到list中转成json返回到前台。

顶端还有广告,这个暂时就不先写了(具体实现使用的是小程序的模板来渲染,在模板中也是来请求后台的广告列表)

在实现左右联动的时候遇到几个问题给大家分享下

  • srcoll-view中的height属性必须要有不然视图不会滚动(而且在开发过程中注意高的使用,个人建议最好使用%这样可以兼容各种手机的高,之前的思路是获取当前用户的手机信息,来设置每个页面中的高【亲测还是%好用】)
  • srcoll-view中的scroll-into-view属性要拿本本记下,因为开发过程中的id使用的是uuid也不能保证第一个开头的不是数字,所以在组装数据的时候要把id默认给设置不为数字开头

官方的API传送门

附直达srcoll-view API的传送门

啰嗦了一顿那就开始我们的代码吧,首先我们先来上前端的js,wxml和wxss,上代码。

微信小程序中的js,啰嗦几句【也啰嗦不了几句】,方便自己记忆,也好自己复习一遍。

js中的默认的方法和Page的生命周期

  • onLoad()。页面开始加载就进入这个方法【我一般初始获取数据和默认数据还有和data的交互】这个初始只加载一次
  • onShow()。监听页面显示这个方法我的理解为刷新页面的数据使用

还是来一个传送门Page的传送门吧,官方比我说的还要好喔

还是先来一个效果图:

上js代码:

先把数据整理一遍上js中组装的数据:

var list = {
  "List":[{
    "id": "40288ae767bee8f00167bf2c67f00017",
    "className": "蔬菜",
    "goods": [{
      "standardPrice": 3.5,
      "id": "40288ae868efbd940168f055ace70089",
      "classId": "40288ae767bee8f00167bf2c67f00017",
      "name": "白菜",
      "image": "upload/cabbage.jpg",
      "surplusNum": 13
    },
    {
      "standardPrice": 4.0,
      "id": "40288ae868efbd940168f055ace70000",
      "classId": "40288ae767bee8f00167bf2c67f00017",
      "name": "西红柿",
      "image": "upload/tomato.jpg",
      "surplusNum": 20,
      "rebatePrice": 3.0
    },
    {
      "standardPrice": 2.5,
      "id": "40288ae868efbd940168f055ace71234",
      "classId": "40288ae767bee8f00167bf2c67f00017",
      "name": "菠菜",
      "image": "upload/spinach.jpg",
      "surplusNum": 20
    }]
  },
  {
    "id": "40288ae767bee8f00167bf2c67f00000",
    "className": "水果",
    "goods": [{
      "standardPrice": 3.5,
      "id": "40288ae868efbd940168f055ace70001",
      "classId": "40288ae767bee8f00167bf2c67f00000",
      "name": "苹果",
      "image": "upload/apple.jpg",
      "surplusNum": 13
    },
    {
      "standardPrice": 4.0,
      "id": "40288ae868efbd940168f055ace70002",
      "classId": "40288ae767bee8f00167bf2c67f00000",
      "name": "荔枝",
      "image": "upload/litchi.jpg",
      "surplusNum": 20,
      "rebatePrice": 3.0
    },
    {
      "standardPrice": 2.5,
      "id": "40288ae868efbd940168f055ace70003",
      "classId": "40288ae767bee8f00167bf2c67f00000",
      "name": "香蕉",
      "image": "upload/banana.jpg",
      "surplusNum": 20
    },
    {
      "standardPrice": 2.5,
      "id": "40288ae868efbd940168f055ace70004",
      "classId": "40288ae767bee8f00167bf2c67f00000",
      "name": "葡萄",
      "image": "upload/grape.jpg",
      "surplusNum": 20
    }]
  },
  {
    "id": "40288ae767bee8f00167bf2c67f1111",
    "className": "零食",
    "goods": [{
      "standardPrice": 16,
      "id": "40288d3368efbd940168f055ace70006",
      "classId": "40288ae767bee8f00167bf2c67f1111",
      "name": "烟",
      "image": "upload/apple.jpg",
      "surplusNum": 15
    },
    {
      "standardPrice": 400.0,
      "id": "402834568efbd940168f055ace70007",
      "classId": "40288ae767bee8f00167bf2c67f1111",
      "name": "酒",
      "image": "upload/litchi.jpg",
      "surplusNum": 20
    },
    {
      "standardPrice": 6,
      "id": "40285ae868efbd940168f055ace70008",
      "classId": "40288ae767bee8f00167bf2c67f1111",
      "name": "糖",
      "image": "upload/banana.jpg",
      "surplusNum": 20,
      "rebatePrice": 5.8
    },
    {
      "standardPrice": 100,
      "id": "40248ae868efbd940168f055ace70009",
      "classId": "40288ae767bee8f00167bf2c67f1111",
      "name": "茶",
      "image": "upload/grape.jpg",
      "surplusNum": 96
    }]
    }, {
      "id": "12345e767bee8f00167bf2c67f00017",
      "className": "蔬菜1",
      "goods": [{
        "standardPrice": 3.5,
        "id": "40288ae868efb230168f055ace70089",
        "classId": "12345e767bee8f00167bf2c67f00017",
        "name": "白菜1",
        "image": "upload/cabbage.jpg",
        "surplusNum": 13
      },
      {
        "standardPrice": 4.0,
        "id": "40288ae868e56456468f055ace70000",
        "classId": "12345e767bee8f00167bf2c67f00017",
        "name": "西红柿1",
        "image": "upload/tomato.jpg",
        "surplusNum": 20,
        "rebatePrice": 3.0
      },
      {
        "standardPrice": 2.5,
        "id": "40288ae86834ab940168f055ace71234",
        "classId": "12345e767bee8f00167bf2c67f00017",
        "name": "菠菜1",
        "image": "upload/spinach.jpg",
        "surplusNum": 20
      }]
    },
    {
      "id": "444444e767bee8f00167bf2c67f00000",
      "className": "水果2",
      "goods": [{
        "standardPrice": 3.5,
        "id": "40288ae868efbd940168f055ace70001",
        "classId": "444444e767bee8f00167bf2c67f00000",
        "name": "苹果2",
        "image": "upload/apple.jpg",
        "surplusNum": 13
      },
      {
        "standardPrice": 4.0,
        "id": "40288ae868efbd940168f055ace70002",
        "classId": "444444e767bee8f00167bf2c67f00000",
        "name": "荔枝2",
        "image": "upload/litchi.jpg",
        "surplusNum": 20,
        "rebatePrice": 3.0
      },
      {
        "standardPrice": 2.5,
        "id": "4234234324a7b94b3028320489327",
        "classId": "444444e767bee8f00167bf2c67f00000",
        "name": "香蕉2",
        "image": "upload/banana.jpg",
        "surplusNum": 20
      },
      {
        "standardPrice": 2.5,
        "id": "40288ae86233268acf055ace70004",
        "classId": "444444e767bee8f00167bf2c67f00000",
        "name": "葡萄2",
        "image": "upload/grape.jpg",
        "surplusNum": 20
      }]
    },
    {
      "id": "40288ae767bee8f3333bf2c67f1111",
      "className": "零食1",
      "goods": [{
        "standardPrice": 16,
        "id": "4028809877efbd940168f055ace70006",
        "classId": "40288ae767bee8f3333bf2c67f1111",
        "name": "烟1",
        "image": "upload/apple.jpg",
        "surplusNum": 15
      },
      {
        "standardPrice": 400.0,
        "id": "4053458efbd940168f055ace70007",
        "classId": "40288ae767bee8f3333bf2c67f1111",
        "name": "酒1",
        "image": "upload/litchi.jpg",
        "surplusNum": 20
      },
      {
        "standardPrice": 6,
        "id": "40285a89786bd940168f055ace70008",
        "classId": "40288ae767bee8f3333bf2c67f1111",
        "name": "糖1",
        "image": "upload/banana.jpg",
        "surplusNum": 20,
        "rebatePrice": 5.8
      },
      {
        "standardPrice": 100,
        "id": "4097876efbd940168f055ace70009",
        "classId": "40288ae767bee8f3333bf2c67f1111",
        "name": "茶1",
        "image": "upload/grape.jpg",
        "surplusNum": 96
      }]
    }]
}

module.exports = list;

js中有我自己使用的util包(先来两个)。

//判断字符是否为空的方法
const isEmpty = (obj) => {
  if (typeof obj == "undefined" || obj == null || obj == "") {
    return true;
  } else {
    return false;
  }
}

//提示信息
const showToast = (icon,title) => wx.showToast({
  icon: isEmpty(icon) ? 'none' : icon,
  title: isEmpty(title) ? '提示信息' : title,
  mask: true
}) 

 

上js代码:

var shopList = require('./shopList.js');
var app = getApp();
Page({
  data: {
    showCartDetail: false,
    list: [],//商品列表
    classifyViewed: '',//默认顶部
    buyNum: {},
    cart: [],
    surplusNum: {},
    sumMoney: 0.00, //购买总价
    buySum:0//购买总数
  },

  /**
   * 初始加载获取商品数据
   */
  onLoad: function () {
    //请求后台得来的商品list,在这里就不写怎么获取的
    //在同级包下写了一个数据的js先引用讲解
    var list = shopList.List;
    // 购买商品的数量
    var data = { buyNum: {} };
    // 判断商品剩余使用,商品id为键 商品剩余为值
    var surplusNum = {};
    for (let i in list) {
      var id = list[i].id;
      // 更换商品种类(id不能以数字开头)
      list[i].id = 'a' + id;
      var goods = list[i].goods;
      for (let j in goods) {
        //拼接商品的图片,这里写死了开发过程中要写成配置文件
        goods[j].image = 'http://127.0.0.1/object/' + goods[j].image;

        data.buyNum[goods[j].id] = 0;
        surplusNum[goods[j].id] = goods[j].surplusNum;//判断商品剩余
      }
    }
    //原始list存入data中方便页面遍历
    data.list = list;
    this.setData(data);
    this.setData({
      surplusNum: surplusNum,
      //作为一个比较的商品剩余
      surplusnumInfo: surplusNum,
      //默认一个商品种类选中
      classifySeleted: list[0].id
    });
  },

  //加
  add: function (e) {
    var detail = e.currentTarget.dataset.detail;//是否来自商品列表还是购物车
    var productId, classGoodsIndex, goodsIndex, image, rebatePrice, price, productName;
    if (detail == 'cart') {//购物车的加号
      productId = e.currentTarget.dataset.id;
      productName = e.currentTarget.dataset.name;
      price = e.currentTarget.dataset.price;
    } else {
      productId = e.target.dataset.id;
      classGoodsIndex = e.target.dataset.classgoodsindex;//商品种类的下标
      goodsIndex = e.target.dataset.goodsindex;//商品的下标
      image = this.data.list[classGoodsIndex].goods[goodsIndex].image;//商品图片
      rebatePrice = this.data.list[classGoodsIndex].goods[goodsIndex].rebatePrice;//优惠价格
      price = this.data.list[classGoodsIndex].goods[goodsIndex].standardPrice;//售价
      productName = this.data.list[classGoodsIndex].goods[goodsIndex].name;//商品名字
    }
    //判断优惠价格,没有util包先简单判断一下
    if (rebatePrice != null && rebatePrice != '') {
      price = rebatePrice;
    }
    var arrId = [];//商品id集合
    var arr = this.data.cart || [];
    //判断商品剩余(第一次加入购物车肯定没有所以加一)
    if (this.data.buyNum[productId] + 1 > this.data.surplusnumInfo[productId]) {
      wx.showToast({
        icon:'none',
        title: '商品剩余数量不足',
      })
      return false;
    }
    var buyCount = 1;
    //第一次加入商品
    if (arr.length == 0) {
      arr.push({
        id: productId,
        name: productName,
        price: price,
        buyCount: buyCount,
        buyMoney: this.buyOneMoney(price, buyCount),
        standardSellingPrice: this.data.list[classGoodsIndex].goods[goodsIndex].standardPrice,
        image: image
      });
    } else if (arr.length >= 1) {
      //商品id集合
      for (let g in arr) {
        arrId.push(arr[g].id);
      }
      //商品已存在的判断
      if (arrId.indexOf(productId) != -1) {
        for (let g in arr) {
          if (arr[g].id == productId) {
            arr[g].buyCount += 1;
            buyCount = arr[g].buyCount;
            arr[g].buyMoney = this.buyOneMoney(arr[g].price, arr[g].buyCount)
            break;
          }
        }
      } else {
        arr.push({
          id: productId,
          name: productName,
          price: price,
          buyCount: buyCount,
          buyMoney: this.buyOneMoney(price, buyCount),
          image: image
        });
      }
    }
    var data = { buyNum: this.data.buyNum};
    data.buyNum[productId] = buyCount;
    //用来显示加减购物的数量显示
    this.data.buyNum[productId] = buyCount;
    this.setData(data);
    
    //用于底部显示
    this.setData({
      sumMoney: this.buySumMoney(arr),
      cart: arr,
      buySum: this.buySum(arr),
    });
    //清空商品id集合
    arrId = [];
    //判断商品剩余与购买的数量
    var surplusnum = this.data.surplusNum;
    for (var i in surplusnum) {
      if (productId == i && surplusnum[i] != 0) {
        if (surplusnum[i] >= this.data.buyNum[i]) {
          let count = surplusnum[i] - 1;
          if (count <= 0) {
            surplusnum[i] = 0;
            break;
          } else {
            surplusnum[i] = count;
            break;
          }
        } else {
          break;
        }
      }
    }
     //更新商品剩余
    this.setData({
      surplusNum: surplusnum
    })
  },

  //减
  subtract: function (e) {
    console.log('点击减号')
    var productId = e.target.dataset.id
    var arrId = [];
    var buyCount = 0;
    //判断商品剩余
    // if (this.data.surplusNum[productId] >= this.data.surplusnumInfo[productId]) {
    //   return false;
    // }
    var arr = this.data.cart || [];
    if (arr.length > 0) {
      for (let i in arr) {
        arrId.push(arr[i].id);
      }
      //商品在购物车中存在
      if (arrId.indexOf(productId) != -1) {
        for (let g in arr) {
          if (arr[g].id == productId) {
            arr[g].buyCount -= 1;
            buyCount = arr[g].buyCount;
            arr[g].buyMoney = this.buyOneMoney(arr[g].price, arr[g].buyCount)
          }
          if (arr[g].buyCount <= 0) {
            this.removeByValue(arr, arr[g].id);
          }
        }
      }
    }
    //判断购物车的商品
    if (arr.length <= 0) {
      this.setData({
        cart: []
      })
    } else {
      this.setData({
        cart: arr
      })
    }

    var data = { buyNum: this.data.buyNum };
    data.buyNum[productId] = buyCount;
    //用来显示加减购物的数量显示
    this.data.buyNum[productId] = buyCount;
    this.setData(data);
    this.setData({
      sumMoney: this.buySumMoney(arr),
      cart: arr,
      buySum: this.buySum(arr),
    });
    //清空商品id集合
    arrId = [];
    //判断剩余数量(剩余数量)
    var surplusnum = this.data.surplusNum;
    for (var i in surplusnum) {
      if (productId == i && this.data.buyNum[i] >= 0) {
        let count = surplusnum[i] + 1;
        surplusnum[i] = count;
        break;
      }
    }
    //更新商品剩余
    this.setData({
      surplusNum: surplusnum
    })
  },

  //该掏钱了,哈哈
  submit: function () {
    //组装下参数
    var params = {};

  },

  //购买总数
  buySum: function (array) {
    var sum = 0;
    for (var g in array) {
      if (array[g].buyCount >= 0) {
        sum += array[g].buyCount;
      } else {
        return sum;
      }
    }
    return sum;
  },

  //单个商品总价
  buyOneMoney: function (price, buyCount) {
    if (buyCount <= 0) {
      return 0.00;
    } else {
      return parseFloat(price * buyCount * 10000000 / 10000000).toFixed(2);
    }
  },

  //购买总价
  buySumMoney: function (array) {
    var sum = 0.00;
    for (let g in array) {
      if (array[g].buyCount >= 0) {
        sum += (array[g].buyCount * array[g].price * 10000000 / 10000000);
      } else {
        return sum;
      }
    }
    return parseFloat(sum).toFixed(2);
  },

  //定义根据id删除数组的方法
  removeByValue: function (array, val) {
    for (let i = 0; i < array.length; i++) {
      if (array[i].id == val) {
        array.splice(i, 1);
        break;
      }
    }
  },

  //左右关系联动
  onGoodsScroll: function (e) {
    if (e.detail.scrollTop > 10 && !this.data.scrollDown) {
      this.setData({
        scrollDown: true
      });
    } else if (e.detail.scrollTop < 10 && this.data.scrollDown) {
      this.setData({
        scrollDown: false
      });
    }
    var scale = e.detail.scrollWidth / 570,
      scrollTop = e.detail.scrollTop / scale,
      h = 0,
      classifySeleted,
      len = this.data.list;

    var list = this.data.list;
    for (let i in list) {
      //商品的高度也是根据总体的scrow-view来算的
      var goodsHeight = 70 + list[i].goods.length * (46 * 3 + 20 * 2);
      if (scrollTop >= h - 100 / scale) {
        classifySeleted = list[i].id;
      }
      h += goodsHeight;
    }
    this.setData({
      classifySeleted: classifySeleted
    });
  },

  //左侧点击事件
  tapClassify: function (e) {
    var id = e.target.dataset.id;
    this.setData({
      classifyViewed: id
    });
    var self = this;
    setTimeout(function () {
      self.setData({
        classifySeleted: id
      });
    }, 100);
  },

  //底部购物车显示
  showCartDetail: function () {
    this.setData({
      showCartDetail: !this.data.showCartDetail
    });
  },

  hideCartDetail: function () {
    this.setData({
      showCartDetail: false
    });
  }
});

上wxml代码:

<view class="content">
	<!-- 左边商品种类 -->
	<scroll-view class="classify-container" scroll-y="true">
		<!-- classifySeleted指的是默认选中的那个种类样式就是给标亮 -->
		<!-- bindtap="tapClassify"的意思滑动种类的区域要把顶部的这个种类给拿出来,方便右边的商品的联动 -->
        <view class="classify {{classifySeleted==classGoods.id?'active':''}}" wx:for="{{list}}" wx:for-item="classGoods" wx:key="id" data-id="{{classGoods.id}}" bindtap="tapClassify">
			<view class="name">{{classGoods.className}}</view>
		</view>
	</scroll-view>
	<!-- 右边商品详情 -->
	<scroll-view class="goods-container" scroll-y="true" scroll-into-view="{{classifyViewed}}" bindscroll="onGoodsScroll">
		<view wx:for="{{list}}" wx:for-item="classGoods" wx:key="id" id="{{classGoods.id}}" wx:for-index="classGoodsIndex">
			<view class="title">{{classGoods.className}}</view>
			<!-- 遍历商品种类下的商品 -->
			<view class="goods" wx:for-items="{{classGoods.goods}}" wx:for-item="item" wx:key="{{item.id}}" wx:for-index="goodsIndex">
				<image class="image" src="{{item.image}}"></image>
				<view class="name ellipsis">{{item.name}}</view>
				<view class="surplus">剩余数量:{{surplusNum[item.id]}}</view>
				<!-- 优惠价格的判断 -->
				<view wx:if="{{item.rebatePrice == '' || item.rebatePrice == null}}">
				  <view class="price">¥{{item.standardPrice}}</view>
				</view>
				<view wx:else>
				  <view class="price">¥{{item.rebatePrice}}</view>
				  <view class='rebate-price' style='text-decoration:line-through;'>¥{{item.standardPrice}}</view>
				</view>
				<!-- 加减区域 -->
				<view class='count-style'>
					<!-- 加减采用的下标获取商品的信息 -->
					<image src='../images/jian.png' data-id="{{item.id}}" data-classGoodsIndex="{{classGoodsIndex}}" data-goodsIndex="{{goodsIndex}}" bindtap='subtract'></image>
					<text>{{buyNum[item.id]}}</text>
					<image src='../images/jia.png' data-id="{{item.id}}" data-classGoodsIndex="{{classGoodsIndex}}" data-goodsIndex="{{goodsIndex}}" bindtap='add'></image>
				</view>
			</view>
		</view>
	</scroll-view>
</view>

<view class="cart-detail" hidden="{{!showCartDetail || !buySum>0}}">
	<view class="hidden-cart" bindtap="hideCartDetail"></view>
	<scroll-view class="cart-list" scroll-y="true">
		<view class="item" wx:for="{{cart}}" wx:for-index="id" wx:for-item="item" wx:key="id">
			<view class="name ellipsis">{{item.name}}</view>
			<view class="total">¥{{item.buyMoney}}</view>
			<image class='cart-count-style' src='../images/jian.png' data-id="{{item.id}}" data-price="{{item.price}}" data-detail="detail" data-name="{{item.name}}" bindtap='subtract'></image>
			<view class="num">{{item.buyCount}}</view>
			<image class='cart-count-style' src='../images/jia.png' data-id="{{item.id}}" data-price="{{item.price}}" data-detail="cart" data-name="{{item.name}}" bindtap='add'></image>
		</view>
	</scroll-view>
</view>

<view class="cart">
		<view class="showCartDetail" bindtap="showCartDetail">
			<view class="sumMoney">¥{{sumMoney}}</view>
		</view>
			<button class='submit' bindtap='submit'>掏钱</button>
	</view>

上wxss代码:

page {
	height: 100%;
	overflow: hidden;
}
.container {
	height: 100%;
	overflow: hidden;
}

.content {
	display: -webkit-flex;
	height: 100%;
  width: 100%;
	box-sizing: border-box;
	padding-bottom: 100rpx;
}
.classify-container {
	width: 180rpx;
	background: #efefef;
	height: 100%;
}
.classify-container .classify {
	padding:30rpx;
  text-align:center;
  border-bottom:1px solid #f8f8f8;
}
.classify-container .classify.active {
	background: #fff;
}
.classify-container .classify .name {
	display: inline-block;
	font-size: 30rpx;
	color: #646464;
	line-height: 1.2;
	text-align: left;
	pointer-events: none;
}

.goods-container {
	background: #ffffff;
	height: 100%;
}
.goods-container .title {
	padding: 20rpx 25rpx;
	color: #646464;
	font-size: 30rpx;
	line-height: 30rpx;
	background: #f7f7f7;
}
.goods-container .goods {
	position: relative;
	padding: 20rpx 30rpx;
	font-size: 36rpx;
	line-height: 40rpx;
	border-bottom: 1px solid #f7f7f7;
}
.goods-container .goods .image {
	float: left;
	width: 130rpx;
	height: 130rpx;
	margin-right: 20rpx;
}
.goods-container .goods .name {
	color: #000;
	font-size: 36rpx;
	line-height: 46rpx;
}
.goods-container .goods .surplus {
	color: #989898;
	font-size: 25rpx;
	line-height: 46rpx;
}
.goods-container .goods .price {
	color: #f45044;
	font-size: 30rpx;
	line-height: 46rpx;
}

.goods-container .goods .addCart image {
	pointer-events: none;
	position: absolute;
	left: 20rpx;
	top: 20rpx;
	width: 24rpx;
	height: 24rpx;
}

.rebate-price{
  color: #989898;
	font-size: 24rpx;
	line-height: 46rpx;
  position:absolute;
  right:260rpx;
  top:115rpx;
  text-decoration:line-through;
}

.cart-detail, .cart-detail .hidden-cart {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.cart-detail .cart-list {
	position: absolute;
	left: 0;
	bottom: 100rpx;
	width: 100%;
	background: #f7f7f7;
	padding: 30rpx 0;
  max-height:800rpx;
}
.cart-detail .cart-list .item {
	display: -webkit-flex;
	color: #333;
	font-size: 36rpx;
	line-height: 50rpx;
	padding: 20rpx 40rpx;
}

.cart-detail .cart-list .item .add {
	font-size: 50rpx;
	background: #feb70f;
	width: 50rpx;
	height: 50rpx;
	text-align: center;
	border-radius: 50%;
}
.cart-detail .cart-list .item .num {
	width: 50rpx;
	text-align: center;
	margin: 0 5rpx;
}

.cart {
	display: -webkit-flex;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	background: #f7f7f7;
}
.cart .showCartDetail {
	-webkit-flex: 1;
	/*border-top: 1rpx solid #e7e7e7;*/
}

.cart .showCartDetail{
	position: absolute;
	left: 15rpx;
	top: 15rpx;
	width: 70rpx;
	height: 70rpx;
}

.cart .showCartDetail .sumMoney {
	color: #f45044;
	font-size: 36rpx;
	line-height: 100rpx;
	padding-left: 160rpx;
}

/*加减样式*/
.count-style{
  display: flex;
  width: 195rpx;
  height: 40rpx;
  position:absolute;
  right:15rpx;
  top:100rpx;
}
.count-style > image{
  width: 44rpx;
  height: 44rpx;
}
.count-style > text{
  width: 105rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 30rpx;
  text-align: center;
  color: #444444;
}

.cart-count-style{
  width:45rpx;
  height:45rpx;
}

.submit{
  margin-right:20rpx;
  width:200rpx;
}

 

 

 

 

 

 

评论 14 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

奔波儿灞07

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值