Uni-app 购物车页面 获取购物车数据 全选 单选 合计 删除

shopCart.vue

<template>
	<view class="shopCart">
		<u-navbar title="购物车" class="header">
			<view class="slot-wrap" slot="right" @tap="goEdit">{{rightNav}}</view>
		</u-navbar>
		<scroll-view scroll-y="true" :style="'height:'+clientHeight+ 'px;'">
			<view class="shop-list" :style="'height:'+clientHeight+ 'px;'">
        <!-- 循环每一条购物车数据 -->
				<view class="shop-item" v-for="(item,index) in shopList" :key="item.id">
					<label class="item-radio" @tap="radioCheck(index)">
						<radio value="" color="#FF3333" :checked="item.isChecked"/>
					</label>
					<view class="shop-item-content">
						<image class="item-img" :src="item.courseCover" mode=""></image>
						<view class="item-main">
							<view class="item-title">{{item.courseName}}</view>
							<view class="item-tips">{{item.courseLevel}}</view>
							<view class="item-price">
								<view class="price-tip">限时优惠</view>
								<view class="price">{{item.discountPrice}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="item-empty" v-else>
					<view class="empty-content">
						<image src="/static/shopcart/empty.png" mode=""></image>
						<view class="">购物车空空入也</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
		<!-- 购物车底部 -->
		<view class="shop-footer">
      <!-- 底部全选按钮 -->
			<label class="footer-radio" @tap="checkAllActions">
				<radio value="" color="#FF3333" :checked="checkOrNot"/><text>全选</text>
			</label>
			<view class="shop-footer-container" v-if="!isEdit">
				<view class="total-price">合计：{{totalAll.price}}</view>
				<view class="total-btn" @tap="goPay">去结算</view>
			</view>
			<view class="shop-footer-container" v-else>
				<view class="total-price"></view>
				<view class="total-btn" @tap="delGoodsFn">删除</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
	import  api from "@/service/shopcart.js"
	import tokenApi from '@/service/token.js'
	export default {
		data() {
			return {
				rightNav: '编辑', // 头部右侧点击
				isEdit: false, // 底部切换
				clientHeight: 0, // 可视区域的高
			}
		},
		components: {

		},
		computed: {
			...mapState({
				shopList: state => state.cart.shopList,
				selectList: state => state.cart.selectList
			}),
			...mapGetters(['checkOrNot','totalAll'])
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.header').boundingClientRect(data => {
				uni.getSystemInfo({
					success: res => {
						this.clientHeight = res.screenHeight - data.height
					}
				})
			}).exec();
			query.select('.shop-footer').boundingClientRect(data => {
				uni.getSystemInfo({
					success: res => {
						this.clientHeight = this.clientHeight - data.height
					}
				})
			}).exec();
		},
		onLoad() {
      //提交了mutations 将购物车数据的list在actions中改造后提交给mutations
      this.getshopCarListActions()
		},
		
		methods: {
      //onLoad时调用获取vuex中购物车数据的方法
			...mapActions(['getshopCarListActions','checkAllActions']),
			...mapMutations(['radioCheck']),
			// 头部编辑按钮点击
			goEdit() {
				if (this.rightNav === '编辑') {
					this.rightNav = '取消'
					this.isEdit = true
				} else {
					this.rightNav = '编辑'
					this.isEdit = false
				}
			},
			// 结算按钮的点击
			goPay() {

			},
			// 删除按钮的点击
			delGoodsFn() {
				// selectList 就是选中状态的数据
				let ids = this.selectList.map(item => item.shopcartid)
        //console.log(ids)//数组d
        tokenApi.createToken().then(res=> {
					api.deleteShopCarts({//请求清空购物车接口
						ids:ids,
						token: res.data.token
					}).then(ress=> {
						if(ress.meta.code === '200'){
							// 重新请求获取购物车数据的接口
							this.getshopCarListActions()
							this.$refs.uToast.show({
								title: '删除成功',
								type: 'success', 
								icon: false
							})
						}else {
							
						}
					}).catch(err=>{
						console.log(err)
					})
				})
			}
		}
	}
</script>

store > modules > cart.js

import api from "@/service/shopcart.js"

export default {
  state: {
    shopList: [], //购车数据 全部
    selectList: [], // 选中数据 [{id:'',shopcartid:'',number:''},..,..]
  },
  getters: {
    //是否为全选
    checkOrNot(state) {
      // 如果购车 有数据
      if (state.shopList.length > 0) { //全选
        // 购物车的全部数据  与 购车选中的数据 长度是否相等 相等为true 现在就是全选
        return state.shopList.length === state.selectList.length
      } else {
        return false
      }
    },
    //合计
    totalAll(state) {
      let total = {
        price: 0,
        number: 0
      }
      state.shopList.forEach(item => {
        //在选中数组中查找 
        let idx = state.selectList.findIndex(tem => tem.id === item.courseId)
        if (idx > -1) {
          total.price += item.discountPrice * item.counter
        }
      })
      return total
    }
  },
  mutations: {
    //修改购物车数据
    getshopCarList(state, payload) { //getshopCarListActions提交过来的 payload就是actions传来的list
      state.shopList = payload
    },
    // 全选  
    checkAll(state, payload) { //checkAllActions提交过来的
      state.selectList = state.shopList.map(item => {
        item.isChecked = true //所有数据都选上
        return {
          id: item.courseId, // 课程id 
          shopcartid: item.id, // 当前数据在购物车中的id
          number: 1
        }
      })
      //console.log('全选',state.selectList)//[{id:'',shopcartid:'',number:''},..,..]
    },
    // 全 不选
    unCheckAll(state) { //checkAllActions提交过来的
      // 清空 选择的数组
      state.selectList = []
      //改状态
      state.shopList.forEach(item => item.isChecked = false)
    },
    // 单选
    radioCheck(state, payload) { //payload是组件传过来的index值
      //1. 找: 课程id 购物车id number
      let id = state.shopList[payload].courseId
      let shopcartid = state.shopList[payload].id
      //2. 在选中的数组中查找 当前id是否存在于选中数组中
      let index = state.selectList.findIndex(item => item.id === id) //console.log(index) //-1/0/1/2
      if (index > -1) { //说明此项存在于选中的数组中
        //取消选中
        state.shopList[payload].isChecked = false
        //删除此项
        state.selectList.splice(index, 1)
      } else {
        //添加选中
        state.shopList[payload].isChecked = true
        state.selectList.push({
          id: id,
          shopcartid: shopcartid,
          number: 1
        })
      }
    }
  },
  actions: {
    // 获取目前的购物车数据
    //购物车组件加载，在onLoad函数中调用 this.getshopCarListActions，
    //在此action中操作获取购物车数据的异步请求，请求到数据后，将购物车数据赋值给list,
    //经过forEach改造后，把数据提交给mutations中的getshopCarList
    getshopCarListActions({
      commit
    }, payload) {
      //调用获取购物车数据接口
      api.getShopCartList().then(res => {
        if (res.meta.code === '200') {
          let list = res.data.list
          //处理数组
          list.forEach(item => {
            // 等级处理 等级 中级 高级 初级
            switch (item.courseLevel) {
              case '1':
                item.courseLevel = '初级'
                break;
              case '2':
                item.courseLevel = '中级'
                break;
              case '3':
                item.courseLevel = '高级'
                break;
            }
            // 选中状态处理 默认都是未选中状态 false
            item.isChecked = false
          })
          //提交mutations
          commit('getshopCarList', list)
          //console.log('购物车数据',list)
        }
      }).catch(err => {
        console.log(err)
        uni.showToast({
          title: err.meta.msg,
          duration: 1000
        });
      })
    },
    // 全选
    //组件中的tap事件绑定vuex中的checkAllActions，在action中判断，
    //getters的checkOrNot计算属性返回的值若为true，表示已经全选，则在action中提交unCheckAll全不选的mutation；
    //否则，如果getters的checkOrNot计算属性返回的值为false，表示已经全不选，则在action中提交CheckAll全选的mutation
    checkAllActions({
      commit,
      getters
    }) {
      //console.log(getters.checkOrNot)
      /*
			 如果 getters.checkAll 的值
        为true 说明现在是全选 就变为全不选
				为false 说明现在是全不选 就变为全选				
		  */
      getters.checkOrNot ? commit('unCheckAll') : commit('checkAll')
    }
  }
}