微信小程序商城购物车

效果图：

wxml

<view class="tbg">
  <text class="tbgt">共{{total}}件宝贝</text>
</view>
<view class="cartlist">
  <view class="cacontent" wx:if="{{total == 0}}">
    <navigator url="/pages/shop/index" open-type="switchTab" class="cason">您还没有商品，点击前往商城添加商品</navigator>
  </view>
  <view class="cacontent" wx:else>
    <view class="cartit">
      <image src="/images/d.png" class="ctimg"></image>
      <text class="ctxt"></text>
    </view>
    <view class="cartone" wx:for="{{cartlist}}" wx:key="id">
      <view class="cone1">
        <image src="{{item.select?'/images/selected.png':'/images/normal.png'}}" class="coneimg" bindtap="selectone" data-index="{{index}}"/>
      </view>
      <image src="{{baseurl1}}{{item.productImg}}" class="pimg"></image>
      <view class="ptext">
        <view class='pt1'>{{item.productName}}</view>
        <text class="pt2">{{item.specsName}}</text>
        <view class="pt3">
          <text class="ptpice">￥ {{item.total}}</text>
          <view class="ptnum">
            <button class="ptt" bindtap="pjian" data-index="{{index}}">-</button>
            <text class="ptn">{{item.productNum}}</text>
            <button class="ptt" bindtap="pjia" data-index="{{index}}">+</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
<view class="cartbot">
  <image src="{{selectall?'/images/selected.png':'/images/normal.png'}}" class="botimg" bindtap="selectcount"/>
  <view class="bottext">全选</view>
  <view class="botprice">
    <text class="bp1">共计：</text>
    <text class="bp2"><text style="font-size:24rpx">￥</text> {{totalprice}}</text>
  </view>
  <view class="tobuy">结算</view>
</view>

wxss

/* pages/cart/cart.wxss */
page{background-color: #F6F6F6}
.tbg{width: 100%;height: 140rpx;background-color: #DA4A25}
.tbgt{font-size: 22rpx;color: #ffffff;margin-top: 10rpx;margin-left: 12rpx}
.cartlist{width: 100%;position: relative}
.cacontent{width: 728rpx;background-color: #ffffff;border-radius: 23rpx;min-height: 200rpx;left: 11rpx;top: -85rpx;position: absolute;padding-bottom: 20rpx}
.cason{font-size: 26rpx;color: #999999;margin-top: 90rpx;text-align: center}
.cartit{width: 700rpx;margin-top: 35rpx;margin-left: 25rpx;overflow: hidden}
.ctimg{width: 48rpx;height: 40rpx;float: left;display: block}
.ctxt{font-size: 34rpx;color: #333333;font-weight: 500;margin-left: 18rpx;line-height: 40rpx;display: block;float: left}
.cartone{width: 680rpx;margin: 40rpx auto 0 auto;height: 190rpx}
.cone1{width: 32rpx;height: 190rpx;float: left;line-height: 190rpx}
.coneimg{width: 32rpx;height: 32rpx}
.pimg{width: 184rpx;height: 190rpx;display: block;float: left;margin-left: 16rpx}
.ptext{width: 416rpx;height: 190rpx;float:left;margin-left: 16rpx}
.pt1{font-size: 26rpx;color: #333333;width: 100%;height: 62rpx;line-height: 32rpx;overflow: visible}
.pt2{width: 100%;height: 65rpx;background-color: #F2F2F2;margin-top: 14rpx;font-size:24rpx;color: #333333;padding: 5rpx}
.pt3{width: 100%;height: 48rpx;margin-top: 20rpx}
.ptpice{font-size: 34rpx;color: #FE1919}
.ptnum{width: 100rpx;float: right;overflow: hidden;margin-top: 8rpx}
.ptt{width: 32rpx;height: 32rpx;background-color: #F3C4C4;text-align: center;line-height: 32rpx;color: #ffffff;font-size: 28rpx;padding: 0;float: left}
.ptn{width: 32rpx;height: 32rpx;text-align: center;line-height: 32rpx;font-size: 24rpx;color: #333333;float: left}
.cartbot{width: 100%;height: 98rpx;background-color: #ffffff;position: fixed;bottom: 0;left: 0}
.botimg{display: block;float: left;width: 42rpx;height: 42rpx;margin-left: 12rpx;margin-top: 24rpx}
.bottext{float: left;margin-left: 10rpx;line-height: 98rpx;font-size: 24rpx;color: #333333}
.botprice{float: left;margin-left: 200rpx;line-height: 98rpx}
.bp1{font-size: 20rpx;color: #333333}
.bp2{font-size: 36rpx;color: #FE1919}
.tobuy{width: 235rpx;height: 98rpx;background-color: #DA4A25;text-align: center;line-height: 98rpx;float: right;font-size: 28rpx;color: #ffffff}

js:

// pages/cart/cart.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    total:0, /**数据总数 */
    selectall:false, /**全选状态 */
    cartlist:{},/**购物车数据 后台获取 */
    baseurl1: "",
    totalprice:0.00 /**总金额 */
  },
  /**单选 */
  selectone:function(e){
    var that = this;
    var index = e.target.dataset.index;
    this.data.cartlist[index].select = !this.data.cartlist[index].select
    if(this.data.cartlist[index].select){
      this.data.totalprice = this.data.totalprice + parseFloat(this.data.cartlist[index].total);
    }else{
      this.data.totalprice = this.data.totalprice - parseFloat(this.data.cartlist[index].total);
    }
    this.setData({
      cartlist:this.data.cartlist,
      totalprice:this.data.totalprice
    })
    this.selectallto();
  },
  /**判断是否全选 */
  selectallto:function(){
    var i = 0;
    var status = true;
    for (i = 0; i < this.data.total;i++){
      if(!this.data.cartlist[i].select){
        status = false;
      }
    }
    this.setData({
      selectall:status
    })
  },
  /**全选 取消全选 */
  selectcount:function(){
    if(this.data.selectall){
      this.data.selectall = false;
      this.data.totalprice = 0;
      var i = 0;
      for (i = 0; i < this.data.total; i++){
        this.data.cartlist[i].select = false;
      }
      this.setData({
        cartlist:this.data.cartlist,
        selectall:this.data.selectall,
        totalprice:this.data.totalprice
      })
    }else{
      this.data.selectall = true;
      var price = 0.00;
      var i = 0;
      for (i = 0; i < this.data.total; i++) {
        this.data.cartlist[i].select = true;
        price = price + parseFloat(this.data.cartlist[i].total)
      }
      this.setData({
        cartlist: this.data.cartlist,
        selectall: this.data.selectall,
        totalprice: price
      })
    }
  },
  /**商品数量减 */
  pjian:function(e){
    var index = e.target.dataset.index;
    if(this.data.cartlist[index].productNum > 1){/**判断数量是否大于1 */
      this.data.cartlist[index].productNum = this.data.cartlist[index].productNum - 1;
      this.data.cartlist[index].total = parseFloat(this.data.cartlist[index].price) * this.data.cartlist[index].productNum;
      if(this.data.cartlist[index].select){
        this.data.totalprice = this.data.totalprice - parseFloat(this.data.cartlist[index].price);
      }
      this.setData({
        cartlist:this.data.cartlist,
        totalprice:this.data.totalprice
      })
    }
  },
  /**商品数量加 */
  pjia:function(e){
    var index = e.target.dataset.index;
    this.data.cartlist[index].productNum = this.data.cartlist[index].productNum + 1;
    this.data.cartlist[index].total = parseFloat(this.data.cartlist[index].price) * this.data.cartlist[index].productNum;
    if (this.data.cartlist[index].select) {
      this.data.totalprice = this.data.totalprice + parseFloat(this.data.cartlist[index].price);
    }
    this.setData({
      cartlist: this.data.cartlist,
      totalprice: this.data.totalprice
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.getcart();
  },

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

  },

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

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

  },

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

  },

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

  },

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

  },

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

  },
  getcart:function(){
    var that = this;
    wx.getStorage({
      key: 'userId',
      success: function (res) {
        console.log(res)
        wx.request({
          url: app.globalData.baseUrl + "/api/getcart",
          data: {
            api: 'getcart',
            uid: res.data
          },
          method: 'post',
          header: {
            'content-type': 'application/json'

          },
          success: function (res) {
            var i = 0;
            var cart = res.data.date;
            var num  = res.data.date.length;
            for(i=0;i<num;i++){
              cart[i].select = false;
            }
            console.log(cart);
            that.setData({
              cartlist:cart,
              total:num
            })
          }
        })
      }, fail: function (res) {
        wx.navigateTo({
          url: '/pages/login/login'
        })
      }
    })
    
  }
})

后台是用PHP 写的 就不上传了 基本效果差不多