购物车功能实现-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47038177/article/details/106916806

我们要实现购物车，首先要明白的是他的需求以及实现的思路。
那么它的需求是什么呢？

1.判断购物车是否为空，空的话展示一个页面，否则展示购物车页。
2.他要有加减，用来判断用户是否在购物车原有的基础上增加或减少。
3.计算他的总价，这是必不可少的
4.判断是否显示底部结算条
5.一进页面就结算总价

那么有这几个功能，首先我们就来排版。

<!-- 购物车没有商品时显示的页面 -->
    //用wx:if判断购物车页是否有商品
	<view class="cart" wx:if="{{!none}}">
	//没有商品时显示的图片和文字
		<image src="../../images/none.jpg"></image>
		<text class="cart_tips">购物车还是空的</text>
		<text class="cart_baby">赶紧买点宝贝慰劳下自己吧</text>
		<navigator url="/pages/index/index" class="cart_callback" open-type="switchTab">去逛逛</navigator>
	</view>

当购物车有内容需要显示的页面

<!-- 购物车有商品时显示的页面 -->
	<view class="cart_do" wx:if="{{none}}">
		<!-- 购物车商品页 -->
		//通过for循环到的页面进行渲染
		<view class="cart_con" wx:for="{{none}}" wx:key="index">
			<view bindtap='checkout' data-index="{{index}}" wx:if="{{!item.check}}" class="checks"></view>
			<icon bindtap='checkout' data-index="{{index}}" wx:else color="#ec617e" type="success" size="26" />
			<image src="{{item.pic[0]}}"></image>
			<view class="cart_mations">
				<text class="goods_title">{{item.title}}</text>
				<view class="size">{{item.types}}
					<image style="margin-left:16rpx; width:20rpx;height:20rpx;" src="/images/down.png"></image>
				</view>
				<view class='zuixia'>
					<view class='price1'>￥{{item.price}}</view>
					<view class='add'>
						<image src='/images/cut_dis.png' class='num' style='margin-right: 4rpx;' wx:if="{{item.num == 1}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
						//购物车减
						<image src='/images/cut.png' class='num' style='margin-right: 4rpx;' wx:else data-index="{{index}}" bindtap='subtraction' data-erji="{{proind}}" data-index="{{index}}"></image>
						//原数据
						<text class="mid_num">{{item.num}}</text>
						//购物车加
						<image src='/images/add.png' class='num' style='margin-left: 4rpx;' bindtap='add' data-erji="{{proind}}" data-index="{{index}}"></image>
					</view>
				</view>
			</view>
		</view>
	</view>

下面是购物车总价的结算条

<!-- 底部结算条 -->
		<view class="bottom_bar" wx:if="{{none}}">
		    //全选
			<view class="all-check" bindtap="allChecks">
				<view wx:if="{{!allCheck}}" class="checks"></view>
				<icon wx:else color="#ec617e" type="success" size="26" />
				<text style="margin-left:20rpx;">全选</text>
			</view>
			<view class="tot-pri">
				<view style="width:200rpx; margin-right:20rpx;">
					<view class="tot">合计： <text>￥{{total}}</text> </view>
					<view class="freight">不含运费</view>
				</view>
			</view>
		</view>

这是购物车页的一个排版。样式比较多，大家可以自己改成自己合适的，也可以问我要。
下面看js部分

Page({

  /**
   * 页面的初始数据
   */
  data: {
    cart_list: [],
    none: null,
    //是否编辑状态
    edit: false,
    //是否全选
    allCheck: true,
    // 是否选择商品
    choose: true,
    //总价
    total: 0.00
  },

购物车加

add(e) {
    let index = e.currentTarget.dataset.index
    console.log(index)
    let none = this.data.none
    none[index].num++
    // 重新计算价格
    usual.sum(none)
    //从本地获取到total
    let total = wx.getStorageSync('total', total)
    this.setData({
      total: total,
      none: none
    })
  },

购物车减

// 购物车数量减
  subtraction(e) {
  //获取绑定在dataset上的index值
    let index = e.currentTarget.dataset.index
    let none = this.data.none
    if (none[index].num > 1) {
      none[index].num--
    } else {
    //如果商品少于一件弹出提示
      wx.showToast({
        title: "该商品一件起售哦",
        icon: "none"
      })
    }
    // 重新计算价格
    usual.sum(none)
    let total = wx.getStorageSync('total', total)
    this.setData({
      total: total,
      none: none
    })
  },

单选，全选

//单选
  checkout(e) {
    let index = e.currentTarget.dataset.index
    // console.log(index)
    let none = this.data.none
    none[index].check = !none[index].check
    // 重新计算价格
    usual.sum(none)
    let total = wx.getStorageSync('total', total)
    //把每个值遍历出来然后赋值给flag
    let flag = this.data.none.every((item) => {
      return item.check == true
    })
    this.setData({
      total: total,
      none: none,
      allCheck: flag
    })
    //调用显示结算条
    this.botbarShow()
  },
  //全选
  allChecks() {
    let allCheck = this.data.allCheck;
    let none = this.data.none;
    allCheck = !allCheck
    // console.log(allCheck)
    this.data.none.forEach((item) => {
      item.check = allCheck
    })
    // 重新计算价格
    usual.sum(none)
    let total = wx.getStorageSync('total', total)
    this.setData({
      none: this.data.none,
      allCheck,
      total: total,
    })
    //调用显示结算按钮
    this.botbarShow()
  },

是否显示底部结算条

//是否显示结算条
  botbarShow() {
    let if_show = this.data.none.every((item) => {
      return item.check == false
    })
    this.setData({
      choose: !if_show
    })
  },

在进入页面时就接收到数据，在onload里面接。

 onLoad: function (options) {
 //动态设置页面标题
    wx.setNavigationBarTitle({
      title: '购物车',
    })
    wx.request({
    //调用接口数据，这里放你需要的接口数据
      url: 'https://****/jsons/list.json',
      success: (res) => {
        let listData = wx.getStorageSync('listData') || []
        if (Array.isArray(listData)) {
          this.setData({
            none: listData
          })
        }
        this.setData({
          cart_list: res.data.result
        })
      }
    })
  },

底部结算条的计算总价

export default class usual {
  static sum(shopData) {
    //计算总价
    new Promise((res, rej) => {
      let total = 0
      for (let i = 0; i < shopData.length; i++) {
        if (shopData[i].check) {
          total += shopData[i].price * 1000 * shopData[i].num / 1000
        }
      }
      //把total设置到本地存储，并且显示方式为保留两位小数
      wx.setStorageSync('total', total.toFixed(2))
    })
  }
  static selectAll(shopData) {
    return new Promise((res, rej) => {
      //一进页面即全为选中状态
      for (let i = 0; i < shopData.length; i++) {
        let datashop = shopData[i].pro
        for (let i in datashop) {
          datashop[i].check = false
        }
      }
    })
  }
}