购物车功能

页面展示

<view class="edit">
  <!-- 头部导航栏 -->
  <nav>
    <ul>
      <li class="set">
        <i class="iconfont iconhome" binbtap="onClickLeft"></i>
        <text class="car">购物车</text>
        <text bindtap="onClickRight">{{isEdit?'完成':'编辑'}}</text>
      </li>
    </ul>
  </nav>
  <!-- 承担运费 -->
  <section>
    <van-checkbox value="{{ checked }}" v-model="checkedFreight" checked-color="#c03131" class="freight" icon-size="16px"></van-checkbox>
    <text>商城承担运费</text>
  </section>
  <!-- 购物车列表 -->
  <view class="cartBox">
    <viwe class="cartList" wx:for="{{cartArr}}" wx:key="index">
      <main>
        <van-checkbox value="{{ item.checked }}" bind:change="onChange" data-cartId="{{item.cartId}}" data-checked="{{item.checked}}" checked-color="#c03131" icon-size="16px"></van-checkbox>
        <image src="{{item.imgUrl}}" />
        <view class="main-right" binbtap="orderdetail">
          <p class="cartSku">{{item.masterName}}</p>
          <p class="priceall">
            <text>¥ {{item.price/100}}</text>
            <van-stepper class="Number" wx:if="{{isEdit}}" value="{{ item.buyNum }}" bind:change="onstepper" data-cartId="{{item.cartId}}" />
            <text class="Number" wx:if="{{!isEdit}}">x{{item.buyNum}}</text>
          </p>
        </view>
      </main>
    </viwe>
  </view>
  <!-- 结算 -->
  <footer class="footer">
    <van-submit-bar price="{{ total }}" button-text="{{isEdit?'删除':'结算'}}" bindtap="onSubmit" :disabled="!checked"></van-submit-bar>
    <van-checkbox value="{{ allChecked }}" bind:change="allcheck" checked-color="#c03131" icon-size="16px" class="allcheck">
      全选
    </van-checkbox>
  </footer>
</view>

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cartArr: [],
    // cartId: '',
    // buyNum: 1,
    arrIdArr: '',
    checked: false,
    isEdit: false,
    allChecked: false,
    cartArrList: [],
    total: 0
    // checked: true
  },

  onShow: function () {
    this.cartData()
    this.totalPrice()
  },
  // 商品数量的点击事件
  onstepper(event) {
    console.log(event, 555555)
    let url = '/cart/updateNum'
    let data = {
      buyNum: event.detail,
      cartId: event.currentTarget.dataset.cartid
    }
    // console.log(data, 5444);
    // 发送数据
    app.$post(url, data).then(res => {
      // console.log(res, '商品数量')
    })
    console.log(data.cartId, 'id')
    // map方法就是修改属性的属性值
    let tmpArr = this.data.cartArr.map(item => {
      // 判断接口的id是否等于每项id  如果相等就返回buyNum
      if (data.cartId === item.cartId) {
        return {
          ...item,
          // 修改buyNum
          buyNum: event.detail
        }
      } else {
        return item
      }
    })
    console.log(tmpArr, "数组")

    this.setData({
      // 把修改的数据重新赋值
      cartArr: tmpArr
    })
    this.totalPrice()
  },
  // 获取购物车接口数据
  cartData() {
    let url = '/cart/all'
    app.$get(url).then(res => {
      // console.log(res, '购物车列表')
      // 把checked添加到一个接口（接口原始没有checked）数组里
      let cartArr = res.list
      // 遍历这个数组，把返回的checked属性添加到新数组
      cartArr = cartArr.map(item => {
        return {
          // 返回数组的每一项
          ...item,
          // 改变checked的状态
          checked: false
        }
      })
      // console.log("222", cartArr)
      this.setData({
        // 把新数组赋值保存起来
        cartArr: cartArr,
      })

    }).catch(err => {
      console.log(err)
    })
  },
  // 编辑点击事件
  onClickRight() {
    // console.log(222222)
    this.setData({
      isEdit: !this.data.isEdit
    })
    this.data.isEdit ? '完成' : '编辑'
  },
  // 复选框的点击事件f
  onChange(event) {
    // console.log(event, 77777)
    // 遍历这个数组
    let cartArr = this.data.cartArr.map(item => {
      // 判断这个数组每项cartId等不等于event里的cartid
      if (item.cartId == event.currentTarget.dataset.cartid) {
        // 如果等于的话那么久返回每项的checked，
        return {
          ...item,
          checked: !item.checked
        }
      } else {
        return item
      }
    })
    // 把新数组赋值保存起来
    this.setData({
      cartArr: cartArr
    })

    // console.log(cartArr, 11111)
    // 过滤出选出来的数组
    let selectData = this.data.cartArr.filter(item => {
      return item.checked
    })
    this.setData({
      selectList: selectData
    })
    // console.log(selectData, 66666666)
    if (selectData.length == this.data.cartArr.length) {
      this.setData({
        allChecked: event.detail
      })
    } else {
      this.setData({
        allChecked: false
      })
    }
    this.totalPrice()
  },

  // 底部全选按钮
  allcheck(event) {
    // console.log(event.detail, '2222')
    let cartArr = this.data.cartArr.map(item => {
      return {
        ...item,
        checked: event.detail
      }
    })
    this.setData({
      allChecked: event.detail,
      cartArr: cartArr
    })
    this.totalPrice()
  },
  // 删除/结算点击事件
  onSubmit() {
    // 判断是否删除
    if (this.data.isEdit) {
      let arrIdArr = []
      // 遍历接口赋值的数组 然后过滤出按钮是否选中
      let cartArrList = this.data.cartArr.filter(item => {
        return item.checked == true
      })

      // console.log(this.setData, 11111)
      // 过滤完之后继续遍历已经过滤好的数组，遍历出数组里的每一项id，
      // 遍历完之后放到新的数组装起来
      cartArrList.map(item => {
        return arrIdArr.push(item.cartId)
      })
      // console.log(arrIdArr, "被选中的id")
      // 然后把选中的id上传到接口 发送数据
      let data = { cartId: arrIdArr }
      let url = "/cart/del"
      app.$post(url, data).then(res => {
        // console.log(res, 99999)
        let itemArr = this.data.cartArr
        for (let i = 0; i < itemArr.length; i++) {
          for (let j = 0; j < cartArrList.length; j++) {
            if (this.data.cartArr[i].cartId == cartArrList[j].cartId) {
              itemArr.splice(i, 1)
            }
          }
        }
        this.setData({
          cartArr: itemArr,
        })
      }).catch(err => {
        console.log(err)
      })
      //当计算金额
    } else {
      let arrIdArr = []
      let selectList = this.data.cartArr.filter(num => {
        return num.checked
      })
      selectList.map(item => {
        return arrIdArr.push(item.cartId)
      })
      // console.log("arrIdArr", arrIdArr)
      let url = "/preOrder/add"
      let data = {
        totalMoney: this.data.total,
        cartId: arrIdArr
      }
      app.$post(url, data).then(res => {
        // console.log(res)
        let preOrderId = res.result.preOrderId
        wx.navigateTo({
          url: "/pages/order/submit/submit?preOrderId=" + preOrderId
        })
      }).catch(err => {
        console.log(err)
      })
    }
  },
  // 计算总价
  totalPrice() {
    //筛选出这个数组的 checked值 是否选中 ,过滤出选中 返回新的数组
    let selectData = this.data.cartArr.filter(num => {
      return num.checked == true
    })
    // console.log("2222", selectData)
    let total = 0;
    selectData.forEach(item => {
      if (item.checked) {
        total += item.buyNum * item.price
      }
    })
    this.setData({
      total: total
    })
  },
})