004--笔记：微信小程序实现购物车功能（中）--代码
购物车效果图：

购物车效果图.PNG

登录授权

01、登录授权

login.wxml页面代码：

<view class="box">
  <button type="primary" bindtap="login">一键登录</button>
</view>

login.js页面代码：

Page({
  data: {
    isShow: true//控制button按钮的出现消失
  },
  //login的业务代码
  login() {
    // 账户登录中的动态效果
    wx.showLoading({
      title: '登录中',
    })
    //1.获取code码
    wx.login({
      success: (res) => {
        let code = res.code;
        //2.向开发者服务器发送code码，换取token
        wx.request({
          url: 'http://localhost/api/login.php',
          data: {
            code// code 五分钟内有效
          },
          success: res => {
            console.log("登录信息", res);
            wx.hideLoading();// 动态加载--隐藏，这里需手动取消
            wx.setStorageSync("token", res.data.token);// 存token到本地缓存
            wx.switchTab({// 登录成功后，跳转到购物车页面
              url: '../car/car'
            });
            this.setData({// 登录成功后，使登录按钮隐藏
              isShow: false
            })
          }
        })
      },
      fail: function (res) {
        console.log("登录失败信息", res)//登录失败可自行做相关处理
      }
    })
  },
})

购物车

car.wxml页面代码：

<!--pages/car/car.wxml-->
<view class="container">
  <!--  控制购物车出现消失-->
  <view class="content" wx:if="{{isShow}}">
    <!-- 有商品的购物车 -->
    <view class="shopCar" wx:if="{{contentShow}}">
      <view class="carts" wx:for="{{goodslist}}" wx:key="index">
        <!-- //复选框 -->
        <view class="carts-select">
          <checkbox class="carts-checkbox" checked="{{item.selected?true:false}}" bindtap="bindCheckbox" data-index="{{index}}"></checkbox>
        </view>
        <!-- //商品信息 -->
        <view class="carts-content">
          <!--商品 图片 -->
          <image class="carts-image" src="{{item.img_url}}" mode="aspectFill" />
          <!-- 商品信息 -->
          <view class="carts-info">
            <view class="carts-title">{{item.title}}</view>
            <text class="carts-size">{{item.size}}</text>
            <view class="carts-amount">
              <!-- 购物车价格 -->
              <text class="carts-price c--f60">￥<text>{{item.price}}</text></text>
              <!-- //数量加减 -->
              <view class="carts-num">
                <text class="minus" bindtap="bindMinus" data-index='{{index}}'>-</text>
                <input type="number" bindinput="bindIptCartNum" data-index='{{index}}' value="{{item.num}}" />
                <text class="plus normal" data-index='{{index}}' bindtap="bindPlus">+</text>
              </view>
            </view>
          </view>
          <!-- 删除按钮 -->
          <view class="carts-del">
            <icon type="clear" size="16" color="#ccc" data-index="{{index}}" bindtap="bindCartsDel" />
          </view>
        </view>
      </view>
    </view>
    <!-- 空购物车 -->
    <view class="car" wx:else>
      <view>
        <view class="image">
          <image src="https://img.yzcdn.cn/public_files/2019/07/15/c8bae38935ab388f2aeeedf80c4a5d00.png"></image>
        </view>
        <view class="car-text">
          <view>购物车还是空的</view>
          <view style="color:#aaa">赶紧买点宝贝慰劳下自己吧</view>
          <view bindtap="goBack">去逛逛</view>
        </view>
      </view>
    </view>
    <!-- 底部全选 -->
    <view class="carts-footer">
      <!-- <view class="bottomfixed"> -->
      <view class="inner">
        <!-- 注意checkbox的值中的字符串拼接... -->
        <checkbox class="carts-checkbox selectAll1" checked="{{selectAllStatus?true:false}}" bindtap="bindSelectAll">全选</checkbox>
        <view class="pay-ment">
          <view>结算</view>
        </view>
        <view class="total">合计：
          <em>￥{{totalPrice}}</em>
        </view>
      </view>
    </view>
    <!-- 更多精选商品 -->
    <view class="selected-goods">
      <view class="text1">更多精选商品</view>
      <view class="more-goods" wx:for="{{carGoods}}" wx:key="index">
        <image src="{{item.img_url}}"></image>
        <view class="goods-title">{{item.title}}</view>
        <view class="sold_out">已出售{{item.sold_out_number}}件</view>
        <view class="goods-size">{{item.size}}</view>
        <view class="goods-buttom">
          <view class="goods-price">{{item.price}}</view>
          <view class="icon-add1 iconfont icon-ziyuan"></view>
        </view>
      </view>
    </view>
  </view>
</view>

car.js页面代码：

02、请求购物车数据，使用wx.request请求。

// pages/car/car.js
  data: {
    carGoods: [], // 更多精选商品
    isShow: true,//购物车页面显示与否
    contentShow: true, // 购物车内容---显示
    goodslist: [], // 购物车商品
    carts: [], // 购物车input输入框中商品的数量。数据类型：[{num:"",id:""},{num:"",id:""},...]
    userId: "", // 用户ID---这个好像没用到
    selectAllStatus: false, //是否全选
    totalPrice: 0.00, //合计价格
 },
 //请求数据
  onShow() {
    let token = wx.getStorageSync("token");//获取本地token，当做用户id
    if (!token) {
      this.setData({// 没有token,则购物车不显示，并且返回登录页面
        isShow: false
      });
      wx.navigateTo({
        url: '../login/login'
      })
    } else {
      this.setData({ //有token,则显示购物车
        isShow: true
      })
      wx.request({
        url: 'http://localhost/api/getCar.php?token=' + token,
        method: 'GET',
        dataType: 'json',
        responseType: 'text',
        success: (res) => {
          console.log("res", res.data.list) //返回根据token查询到的数据：[{Id:"1"...},{Id:"2"...},{Id:"3"...}]
          let datas = res.data.list;
          let mes = ""; //临时数组
          var goodslist = this.data.goodslist
          if (res.data.code) {
            // 遍历循环   从服务器拿到的物品数据data里面，只有物品的信息，我们需要给每个物品数据中添加一个自定义属性，用来判断当前商品是否被选中
            datas.forEach(item => {
              mes = {
                selected: false,
                ...item
              }
              // console.log(mes)//{selected：false,id:1}
              goodslist.push(mes) //push()方法---向数组的末尾添加一个或多个元素，并返回新的长度
            })
            //console.log(goodslist) //[{selected：false,id:2},{selected：false,id:1}]
            this.setData({
              contentShow: true,
              goodslist: goodslist
            })
          } else {
            this.setData({
              contentShow: false
            })
          }
        },
        fail: function(err) {
          console.log("err", err)//这里需自行做容错处理
        }
      })
    }
  },

03、购物车商品数量的加减

商品数量加：

  // 点击加号---商品数量加
  bindPlus: function(e) {
    let token = wx.getStorageSync("token");
    const index = e.currentTarget.dataset.index;
    let goodslist = this.data.goodslist;
    let num = goodslist[index].num;
    num = num - 0 + 1;//强制类型转换后再+1
    goodslist[index].num = num;
    // 根据索引获取当前商品的id
    let clickGoodsId = goodslist[index].Id
    console.log(clickGoodsId)
    // num++的同时 goodslist中的num实时更新，实时发送请求，去更改数据库中的num
    this.setData({
      goodslist: goodslist
    });
    wx.request({
      url: 'http://localhost/api/updateGoodsNum.php',
      data: {
        token: token,
        clickGoodsId: clickGoodsId,
        num: num
      },
      header: {
        "content-type": "application/json"
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        console.log("数据库中的num更改成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    this.getTotalPrice(); //计算总价
  }

商品数量减：

// 点击减号---商品数量减
  bindMinus: function(e) {
    let token = wx.getStorageSync("token");
    const index = e.currentTarget.dataset.index;
    let goodslist = this.data.goodslist;
    let num = goodslist[index].num;
    // 商品小于1，不能再减了
    if (num <= 1) {
      return false;
    }
    num = num - 0 - 1;
    goodslist[index].num = num;
    // 根据索引获取当前商品的id
    let clickGoodsId = goodslist[index].Id
    this.setData({
      goodslist: goodslist
    });
    wx.request({
      url: 'http://localhost/api/updateGoodsNum.php',
      data: {
        token: token,
        clickGoodsId: clickGoodsId,
        num: num
      },
      header: {
        "content-type": "application/json"
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        console.log("数据库中的num更改成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    this.getTotalPrice(); //计算总价
  },

04、删除商品

// 删除商品
  bindCartsDel: function(e) {
    let token = wx.getStorageSync("token");
    let goodslist = this.data.goodslist;
    const index = e.currentTarget.dataset.index;
    // 根据索引获取当前商品的id
    let clickGoodsId = goodslist[index].Id
    goodslist.splice(index, 1); // 删除goodsList中的这个商品
    this.setData({
      goodslist: goodslist
    });
    // 删除数据库中的这个商品
    wx.request({
      url: 'http://localhost/api/delCarGoods.php',
      data: {
        token: token,
        clickGoodsId: clickGoodsId,
      },
      header: {
        "content-type": "application/json"
      },
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        console.log("数据库中的数据删除成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    if (!goodslist.length) { // 如果购物车为空
      this.setData({
        contentShow: false // 修改标识为false，显示购物车为空页面
      });
    } else { // 如果不为空
      this.getTotalPrice(); // 重新计算总价格
    }
  },

05、单选事件

  bindCheckbox: function(e) {
    const index = e.currentTarget.dataset.index; // 获取data- 传进来的index
    let goodslist = this.data.goodslist; // 获取购物车列表
    const selected = goodslist[index].selected; // 获取当前商品的选中状态
    goodslist[index].selected = !selected; // 改变状态
    this.setData({
      goodslist: goodslist,
      selectAllStatus: false //不全选
    });
    this.getTotalPrice(); //计算总价
    //当单选的数量为goodslist的长度时，让全选按钮的状态变为---选中
    let selectedNum = 0;
    for (var i = 0; i < goodslist.length; i++) {
      if (goodslist[i].selected) {
        selectedNum++
      }
    }
    if (selectedNum == goodslist.length) {
      this.setData({
        selectAllStatus: true //全选
      });
    }
  },

06、全选事件

  // 多选事件
  bindSelectAll: function(e) {
    var that = this;
    let selectedAllStatus = that.data.selectAllStatus;
    console.log(!selectedAllStatus)
    let goodslist = that.data.goodslist;
    // //全选按钮---取反
    selectedAllStatus = !selectedAllStatus;
    //让单选按钮的状态和全选按钮的值相同
    for (var i = 0; i < goodslist.length; i++) {
      goodslist[i].selected = selectedAllStatus;
    }
    //更新data中的数据
    that.setData({
      goodslist: goodslist,
      selectAllStatus: selectedAllStatus
    });
    console.log(that.data.selectAllStatus)
    console.log(that.data.goodslist)
    that.getTotalPrice();
  },

07、计算总价

  //计算总价
  getTotalPrice() {
    let goodslist = this.data.goodslist; // 获取购物车列表
    let total = 0; //合计
    for (let i = 0; i < goodslist.length; i++) { // 循环列表得到每个数据
      if (goodslist[i].selected) { // 判断选中才会计算价格
        total += goodslist[i].num * goodslist[i].price; // 所有价格加起来
      }
    }
    this.setData({ // 最后赋值到data中渲染到页面
      goodslist: goodslist,
      totalPrice: total.toFixed(2) //保留两位小数
    });
  },

后端代码后续更新笔记...