小程序笔记（四）

绿色水果
110 阅读4分钟

11.7.1 渲染购物车的基本数据

// api/cart.js
import request from '../utils/request'

export function addCartFn (params) {
  return request({
    url: '/cart/add',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function getCartListData (params) {
  return request({
    url: '/cart/list',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

// pages/cart/cart.json

{
  "usingComponents": {
    "van-card": "@vant/weapp/card/index",
    "van-empty": "@vant/weapp/empty/index"
  }
}

<!--pages/cart/cart.wxml-->
<view wx:if="{{empty}}">
  <van-empty
    class="custom-image"
    image="https://img.yzcdn.cn/vant/custom-empty-image.png"
    description="购物车空空如也"
  />
</view>
<view wx:else>
  <van-card
    wx:for="{{ cartList }}"
    wx:key="cartid"
    num="{{ item.num }}"
    price="{{ item.originprice }}"
    title="{{ item.proname }}"
    thumb="{{ item.img1 }}"
  />
</view>

// pages/cart/cart.js
import { getCartListData } from '../../api/cart'
Page({

  data: {
    empty: true,
    cartList: []
  },
  getCartListDataFn () {
    getCartListData({ userid: wx.getStorageSync('userid')}).then(res=> {
      console.log('res', res.data)
      if (res.data.code === '10020'){
        this.setData({ empty: true })
      } else {
        this.setData({ empty: false, cartList: res.data.data })
      }
    })
  },
  onShow() {
    console.log(666, wx.getStorageSync('token'))
    if (wx.getStorageSync('token')) {
      this.getCartListDataFn()
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/userLogin/login',
      })
    }
  },

})

11.7.2 删除购物车数据

// api/cart.js
import request from '../utils/request'

export function addCartFn (params) {
  return request({
    url: '/cart/add',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function getCartListData (params) {
  return request({
    url: '/cart/list',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function removeCartData (params) {
  return request({
    url: '/cart/remove',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

{
  "usingComponents": {
    "van-card": "@vant/weapp/card/index",
    "van-empty": "@vant/weapp/empty/index",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index"
  }
}

<!--pages/cart/cart.wxml-->
<view wx:if="{{empty}}">
  <van-empty
    class="custom-image"
    image="https://img.yzcdn.cn/vant/custom-empty-image.png"
    description="购物车空空如也"
  />
</view>
<view wx:else>
  <van-swipe-cell
    wx:for="{{ cartList }}"
    wx:key="cartid"
    right-width="{{ 65 }}" 
  >
    <van-card
     
      num="{{ item.num }}"
      price="{{ item.originprice }}"
      title="{{ item.proname }}"
      thumb="{{ item.img1 }}"
    />
    <view slot="right" style="color: #fff;width: 65px;height: 100%;background-color: #f66;display: flex;align-items: center;justify-content: center;" class="van-swipe-cell__right" data-cartid="{{item.cartid}}" bind:tap="deleteItem">删除</view>
  </van-swipe-cell>
  
</view>

// pages/cart/cart.js
import { getCartListData, removeCartData } from '../../api/cart'
Page({

  data: {
    empty: true,
    cartList: []
  },
  getCartListDataFn () {
    getCartListData({ userid: wx.getStorageSync('userid')}).then(res=> {
      console.log('res', res.data)
      if (res.data.code === '10020'){
        this.setData({ empty: true })
      } else {
        this.setData({ empty: false, cartList: res.data.data })
      }
    })
  },
  onShow() {
    console.log(666, wx.getStorageSync('token'))
    if (wx.getStorageSync('token')) {
      this.getCartListDataFn()
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/userLogin/login',
      })
    }
  },
  deleteItem (event) {
    removeCartData({cartid: event.target.dataset.cartid})
      .then(() => {
        this.getCartListDataFn()
      })
  }
})

11.7.3 购物车数量的加减

// api/cart.js
import request from '../utils/request'

export function addCartFn (params) {
  return request({
    url: '/cart/add',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function getCartListData (params) {
  return request({
    url: '/cart/list',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function removeCartData (params) {
  return request({
    url: '/cart/remove',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}
export function updateCartNumData (params) {
  return request({
    url: '/cart/updatenum',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

// pages/cart/cart.json

{
  "usingComponents": {
    "van-card": "@vant/weapp/card/index",
    "van-empty": "@vant/weapp/empty/index",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-stepper": "@vant/weapp/stepper/index"
  }
}

<!--pages/cart/cart.wxml-->
<view wx:if="{{empty}}">
  <van-empty
    class="custom-image"
    image="https://img.yzcdn.cn/vant/custom-empty-image.png"
    description="购物车空空如也"
  />
</view>
<view wx:else>
  <van-swipe-cell
    wx:for="{{ cartList }}"
    wx:key="cartid"
    right-width="{{ 65 }}" 
  >
    <van-card
      price="{{ item.originprice }}"
      title="{{ item.proname }}"
      thumb="{{ item.img1 }}"
    >
      <view slot="num">
        <van-stepper value="{{ item.num }}" data-cartid="{{ item.cartid }}" bind:change="onNumChange" />
      </view>
    </van-card>
    <view slot="right" style="color: #fff;width: 65px;height: 100%;background-color: #f66;display: flex;align-items: center;justify-content: center;" class="van-swipe-cell__right" data-cartid="{{item.cartid}}" bind:tap="deleteItem">删除</view>
  </van-swipe-cell>
  
</view>

// pages/cart/cart.js
import { getCartListData, removeCartData, updateCartNumData } from '../../api/cart'
Page({

  data: {
    empty: true,
    cartList: []
  },
  getCartListDataFn () {
    getCartListData({ userid: wx.getStorageSync('userid')}).then(res=> {
      console.log('res', res.data)
      if (res.data.code === '10020'){
        this.setData({ empty: true })
      } else {
        this.setData({ empty: false, cartList: res.data.data })
      }
    })
  },
  onShow() {
    console.log(666, wx.getStorageSync('token'))
    if (wx.getStorageSync('token')) {
      this.getCartListDataFn()
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/userLogin/login',
      })
    }
  },
  deleteItem (event) {
    removeCartData({cartid: event.target.dataset.cartid})
      .then(() => {
        this.getCartListDataFn()
      })
  },
  onNumChange (event) {
    console.log(event)
    updateCartNumData({
      cartid: event.target.dataset.cartid,
      num: event.detail
    }).then(() => this.getCartListDataFn())
  }
})

11.7.4 购物车全选

// pages/cart/cart.json

{
  "usingComponents": {
    "van-card": "@vant/weapp/card/index",
    "van-empty": "@vant/weapp/empty/index",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-stepper": "@vant/weapp/stepper/index",
    "van-checkbox": "@vant/weapp/checkbox/index",
    "van-submit-bar": "@vant/weapp/submit-bar/index"
  }
}

<!--pages/cart/cart.wxml-->
<view wx:if="{{empty}}">
  <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="购物车空空如也" />
</view>
<view wx:else>
  <van-swipe-cell  wx:for="{{ cartList }}" wx:key="cartid" right-width="{{ 65 }}">
    <view style="display: flex;background-color: #fff;">
      <view style="width: 40px;height: 104px;display: flex; justify-content: center;align-items: center;">
        <van-checkbox  value="{{ item.flag }}" data-cartid="{{ item.cartid }}" bind:change="selectOne"></van-checkbox>
      </view>
      <view style="flex: 1">
        <van-card price="{{ item.originprice }}" title="{{ item.proname }}">
          <view slot="num">
            <van-stepper value="{{ item.num }}" data-cartid="{{ item.cartid }}" bind:change="onNumChange" />
          </view>
          <view slot="thumb" style="display: flex; ">

            <image src="{{ item.img1 }}" mode="" style="width: 88px;height: 88px " />
          </view>
        </van-card>
      </view>
    </view>

    <view slot="right" style="color: #fff;width: 65px;height: 100%;background-color: #f66;display: flex;align-items: center;justify-content: center;" class="van-swipe-cell__right" data-cartid="{{item.cartid}}" bind:tap="deleteItem">删除</view>
  </van-swipe-cell>
  <van-submit-bar
  price="{{ 3050 }}"
  button-text="提交订单"
  bind:submit="onClickButton"
  tip="{{ true }}"
>
<van-checkbox  value="{{ checked }}" bind:change="selectAll">全选</van-checkbox>
</van-submit-bar>
</view>

/* pages/cart/cart.wxss */
.van-submit-bar {
  height: 50px;
}

// api/cart.js
import request from '../utils/request'


export function addCartFn (params) {
  return request({
    url: '/cart/add',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function getCartListData (params) {
  return request({
    url: '/cart/list',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

export function removeCartData (params) {
  return request({
    url: '/cart/remove',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}
export function selectAllData (params) {
  return request({
    url: '/cart/selectall',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}
export function selectOneData (params) {
  return request({
    url: '/cart/selectone',
    method: 'POST',
    data: params,
    header: {
      token: wx.getStorageSync('token') || ''
    }
  })
}

// pages/cart/cart.js
import { getCartListData, removeCartData, updateCartNumData, selectAllData, selectOneData } from '../../api/cart'
Page({

  data: {
    empty: true,
    cartList: [],
    checked: false
  },
  getCartListDataFn () {
    getCartListData({ userid: wx.getStorageSync('userid')}).then(res=> {
      console.log('res', res.data)
      if (res.data.code === '10020'){
        this.setData({ empty: true })
      } else {
        const checked = res.data.data.every(item => item.flag)
        this.setData({ empty: false, cartList: res.data.data, checked: checked })
      }
    })
  },
  selectAll (event) {
    console.log(event.detail)
    // this.setData({
    //   checked: event.detail
    // })
    selectAllData({
      userid: wx.getStorageSync('userid'),
      type: event.detail
    }).then(() => {
      this.getCartListDataFn()
    })
    
  },
  selectOne (event) {
    console.log(event)
    selectOneData({
      cartid: event.target.dataset.cartid,
      flag: event.detail
    }).then(() => {
      this.getCartListDataFn()
    })
  },
  onShow() {
    console.log(666, wx.getStorageSync('token'))
    if (wx.getStorageSync('token')) {
      this.getCartListDataFn()
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/userLogin/login',
      })
    }
  },
  deleteItem (event) {
    removeCartData({cartid: event.target.dataset.cartid})
      .then(() => {
        this.getCartListDataFn()
      })
  },
  onNumChange (event) {
    console.log(event)
    updateCartNumData({
      cartid: event.target.dataset.cartid,
      num: event.detail
    }).then(() => this.getCartListDataFn())
  }
})

11.7.5 计算总价

选中的数据才计算

<!--pages/cart/cart.wxml-->
<view wx:if="{{empty}}">
  <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="购物车空空如也" />
</view>
<view wx:else>
  <van-swipe-cell  wx:for="{{ cartList }}" wx:key="cartid" right-width="{{ 65 }}">
    <view style="display: flex;background-color: #fff;">
      <view style="width: 40px;height: 104px;display: flex; justify-content: center;align-items: center;">
        <van-checkbox  value="{{ item.flag }}" data-cartid="{{ item.cartid }}" bind:change="selectOne"></van-checkbox>
      </view>
      <view style="flex: 1">
        <van-card price="{{ item.originprice }}" title="{{ item.proname }}">
          <view slot="num">
            <van-stepper value="{{ item.num }}" data-cartid="{{ item.cartid }}" bind:change="onNumChange" />
          </view>
          <view slot="thumb" style="display: flex; ">

            <image src="{{ item.img1 }}" mode="" style="width: 88px;height: 88px " />
          </view>
        </van-card>
      </view>
    </view>

    <view slot="right" style="color: #fff;width: 65px;height: 100%;background-color: #f66;display: flex;align-items: center;justify-content: center;" class="van-swipe-cell__right" data-cartid="{{item.cartid}}" bind:tap="deleteItem">删除</view>
  </van-swipe-cell>
  <van-submit-bar
  price="{{ totalPrice }}"
  button-text="提交订单"
  disabled="{{ totalNum  === 0}}"
  bind:submit="onClickButton"
>
<van-checkbox  value="{{ checked }}" bind:change="selectAll">全选</van-checkbox>
</van-submit-bar>
</view>

// pages/cart/cart.js
import { getCartListData, removeCartData, updateCartNumData, selectAllData, selectOneData } from '../../api/cart'
Page({

  data: {
    empty: true,
    cartList: [],
    checked: false,
    totalNum: 0,
    totalPrice: 0
  },
  getCartListDataFn () {
    getCartListData({ userid: wx.getStorageSync('userid')}).then(res=> {
      console.log('res', res.data)
      if (res.data.code === '10020'){
        this.setData({ empty: true, cartList: [] })
      } else {
        const checked = res.data.data.every(item => item.flag)
        this.setData({ empty: false, cartList: res.data.data, checked: checked })
      }
      this.getTotal()
    })
  },
  getTotal () {
    const totalNum = this.data.cartList.reduce((sum, item) => {
      return item.flag ? sum + item.num : sum + 0
    }, 0)
    const totalPrice = this.data.cartList.reduce((sum, item) => {
      return item.flag ? sum + item.num * item.originprice : sum + 0
    }, 0)* 100
    this.setData({
      totalNum, totalPrice
    })
    wx.setNavigationBarTitle({
      title: totalNum > 0 ? `购物车(已选择${totalNum})`:'购物车'
    })
  },
  selectAll (event) {
    console.log(event.detail)
    // this.setData({
    //   checked: event.detail
    // })
    selectAllData({
      userid: wx.getStorageSync('userid'),
      type: event.detail
    }).then(() => {
      this.getCartListDataFn()
    })
    
  },
  selectOne (event) {
    console.log(event)
    selectOneData({
      cartid: event.target.dataset.cartid,
      flag: event.detail
    }).then(() => {
      this.getCartListDataFn()
    })
  },

  onLoad() {
    wx.setNavigationBarTitle({
      title: `购物车`
    })
  },
  onShow() {
    console.log(666, wx.getStorageSync('token'))
    if (wx.getStorageSync('token')) {
      this.getCartListDataFn()
    } else {
      wx.navigateTo({
        url: '/packageUser/pages/userLogin/login',
      })
    }
  },
  deleteItem (event) {
    removeCartData({cartid: event.target.dataset.cartid})
      .then(() => {
        this.getCartListDataFn()
      })
  },
  onNumChange (event) {
    console.log(event)
    updateCartNumData({
      cartid: event.target.dataset.cartid,
      num: event.detail
    }).then(() => this.getCartListDataFn())
  }
})

作业1-16643446135531转存失败，建议直接上传图片文件

avatar
文章
阅读
粉丝