004--筆記：微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能（中）--代碼
購(gòu)物車(chē)效果圖：

購(gòu)物車(chē)效果圖.PNG

登錄授權(quán)

01妆棒、登錄授權(quán)

login.wxml頁(yè)面代碼：

<view class="box">
  <button type="primary" bindtap="login">一鍵登錄</button>
</view>

login.js頁(yè)面代碼：

Page({
  data: {
    isShow: true//控制button按鈕的出現(xiàn)消失
  },
  //login的業(yè)務(wù)代碼
  login() {
    // 賬戶(hù)登錄中的動(dòng)態(tài)效果
    wx.showLoading({
      title: '登錄中',
    })
    //1.獲取code碼
    wx.login({
      success: (res) => {
        let code = res.code;
        //2.向開(kāi)發(fā)者服務(wù)器發(fā)送code碼护侮，換取token
        wx.request({
          url: 'http://localhost/api/login.php',
          data: {
            code// code 五分鐘內(nèi)有效
          },
          success: res => {
            console.log("登錄信息", res);
            wx.hideLoading();// 動(dòng)態(tài)加載--隱藏，這里需手動(dòng)取消
            wx.setStorageSync("token", res.data.token);// 存token到本地緩存
            wx.switchTab({// 登錄成功后割岛，跳轉(zhuǎn)到購(gòu)物車(chē)頁(yè)面
              url: '../car/car'
            });
            this.setData({// 登錄成功后揍诽，使登錄按鈕隱藏
              isShow: false
            })
          }
        })
      },
      fail: function (res) {
        console.log("登錄失敗信息", res)//登錄失敗可自行做相關(guān)處理
      }
    })
  },
})

購(gòu)物車(chē)

car.wxml頁(yè)面代碼：

<!--pages/car/car.wxml-->
<view class="container">
  <!--  控制購(gòu)物車(chē)出現(xiàn)消失-->
  <view class="content" wx:if="{{isShow}}">
    <!-- 有商品的購(gòu)物車(chē) -->
    <view class="shopCar" wx:if="{{contentShow}}">
      <view class="carts" wx:for="{{goodslist}}" wx:key="index">
        <!-- //復(fù)選框 -->
        <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">
              <!-- 購(gòu)物車(chē)價(jià)格 -->
              <text class="carts-price c--f60">￥<text>{{item.price}}</text></text>
              <!-- //數(shù)量加減 -->
              <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>
    <!-- 空購(gòu)物車(chē) -->
    <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>購(gòu)物車(chē)還是空的</view>
          <view style="color:#aaa">趕緊買(mǎi)點(diǎn)寶貝慰勞下自己吧</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>結(jié)算</view>
        </view>
        <view class="total">合計(jì)：
          <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頁(yè)面代碼：

02诀蓉、請(qǐng)求購(gòu)物車(chē)數(shù)據(jù)栗竖，使用wx.request請(qǐng)求。

// pages/car/car.js
  data: {
    carGoods: [], // 更多精選商品
    isShow: true,//購(gòu)物車(chē)頁(yè)面顯示與否
    contentShow: true, // 購(gòu)物車(chē)內(nèi)容---顯示
    goodslist: [], // 購(gòu)物車(chē)商品
    carts: [], // 購(gòu)物車(chē)input輸入框中商品的數(shù)量渠啤。數(shù)據(jù)類(lèi)型：[{num:"",id:""},{num:"",id:""},...]
    userId: "", // 用戶(hù)ID---這個(gè)好像沒(méi)用到
    selectAllStatus: false, //是否全選
    totalPrice: 0.00, //合計(jì)價(jià)格
 },
 //請(qǐng)求數(shù)據(jù)
  onShow() {
    let token = wx.getStorageSync("token");//獲取本地token狐肢，當(dāng)做用戶(hù)id
    if (!token) {
      this.setData({// 沒(méi)有token,則購(gòu)物車(chē)不顯示，并且返回登錄頁(yè)面
        isShow: false
      });
      wx.navigateTo({
        url: '../login/login'
      })
    } else {
      this.setData({ //有token,則顯示購(gòu)物車(chē)
        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) //返回根據(jù)token查詢(xún)到的數(shù)據(jù)：[{Id:"1"...},{Id:"2"...},{Id:"3"...}]
          let datas = res.data.list;
          let mes = ""; //臨時(shí)數(shù)組
          var goodslist = this.data.goodslist
          if (res.data.code) {
            // 遍歷循環(huán)   從服務(wù)器拿到的物品數(shù)據(jù)data里面沥曹，只有物品的信息份名，我們需要給每個(gè)物品數(shù)據(jù)中添加一個(gè)自定義屬性，用來(lái)判斷當(dāng)前商品是否被選中
            datas.forEach(item => {
              mes = {
                selected: false,
                ...item
              }
              // console.log(mes)//{selected：false,id:1}
              goodslist.push(mes) //push()方法---向數(shù)組的末尾添加一個(gè)或多個(gè)元素妓美，并返回新的長(zhǎng)度
            })
            //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)//這里需自行做容錯(cuò)處理
        }
      })
    }
  },

03僵腺、購(gòu)物車(chē)商品數(shù)量的加減

商品數(shù)量加：

  // 點(diǎn)擊加號(hào)---商品數(shù)量加
  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;//強(qiáng)制類(lèi)型轉(zhuǎn)換后再+1
    goodslist[index].num = num;
    // 根據(jù)索引獲取當(dāng)前商品的id
    let clickGoodsId = goodslist[index].Id
    console.log(clickGoodsId)
    // num++的同時(shí) goodslist中的num實(shí)時(shí)更新，實(shí)時(shí)發(fā)送請(qǐng)求壶栋，去更改數(shù)據(jù)庫(kù)中的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("數(shù)據(jù)庫(kù)中的num更改成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    this.getTotalPrice(); //計(jì)算總價(jià)
  }

商品數(shù)量減：

// 點(diǎn)擊減號(hào)---商品數(shù)量減
  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;
    // 根據(jù)索引獲取當(dāng)前商品的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("數(shù)據(jù)庫(kù)中的num更改成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    this.getTotalPrice(); //計(jì)算總價(jià)
  },

04、刪除商品

// 刪除商品
  bindCartsDel: function(e) {
    let token = wx.getStorageSync("token");
    let goodslist = this.data.goodslist;
    const index = e.currentTarget.dataset.index;
    // 根據(jù)索引獲取當(dāng)前商品的id
    let clickGoodsId = goodslist[index].Id
    goodslist.splice(index, 1); // 刪除goodsList中的這個(gè)商品
    this.setData({
      goodslist: goodslist
    });
    // 刪除數(shù)據(jù)庫(kù)中的這個(gè)商品
    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("數(shù)據(jù)庫(kù)中的數(shù)據(jù)刪除成功", res)
      },
      fail: function(res) {
        console.log("click--fail", res)
      }
    })
    if (!goodslist.length) { // 如果購(gòu)物車(chē)為空
      this.setData({
        contentShow: false // 修改標(biāo)識(shí)為false委刘，顯示購(gòu)物車(chē)為空頁(yè)面
      });
    } else { // 如果不為空
      this.getTotalPrice(); // 重新計(jì)算總價(jià)格
    }
  },

05丧没、單選事件

  bindCheckbox: function(e) {
    const index = e.currentTarget.dataset.index; // 獲取data- 傳進(jìn)來(lái)的index
    let goodslist = this.data.goodslist; // 獲取購(gòu)物車(chē)列表
    const selected = goodslist[index].selected; // 獲取當(dāng)前商品的選中狀態(tài)
    goodslist[index].selected = !selected; // 改變狀態(tài)
    this.setData({
      goodslist: goodslist,
      selectAllStatus: false //不全選
    });
    this.getTotalPrice(); //計(jì)算總價(jià)
    //當(dāng)單選的數(shù)量為goodslist的長(zhǎng)度時(shí)，讓全選按鈕的狀態(tài)變?yōu)?--選中
    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;
    //讓單選按鈕的狀態(tài)和全選按鈕的值相同
    for (var i = 0; i < goodslist.length; i++) {
      goodslist[i].selected = selectedAllStatus;
    }
    //更新data中的數(shù)據(jù)
    that.setData({
      goodslist: goodslist,
      selectAllStatus: selectedAllStatus
    });
    console.log(that.data.selectAllStatus)
    console.log(that.data.goodslist)
    that.getTotalPrice();
  },

07呕童、計(jì)算總價(jià)

  //計(jì)算總價(jià)
  getTotalPrice() {
    let goodslist = this.data.goodslist; // 獲取購(gòu)物車(chē)列表
    let total = 0; //合計(jì)
    for (let i = 0; i < goodslist.length; i++) { // 循環(huán)列表得到每個(gè)數(shù)據(jù)
      if (goodslist[i].selected) { // 判斷選中才會(huì)計(jì)算價(jià)格
        total += goodslist[i].num * goodslist[i].price; // 所有價(jià)格加起來(lái)
      }
    }
    this.setData({ // 最后賦值到data中渲染到頁(yè)面
      goodslist: goodslist,
      totalPrice: total.toFixed(2) //保留兩位小數(shù)
    });
  },

后端代碼后續(xù)更新筆記...