7shopcart

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、自定义导航栏

<template>
	<view class='shop-cart'>
		<!--自定义导航栏-->
		<uniNavBar 
			title='购物车' 
			:right-text='  isNavBar?"完成":"编辑"   ' 
			fixed='true'
			status-bar='true'
			@clickRight='  isNavBar = !isNavBar  '
		></uniNavBar>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	export default {
		data() {
			return {
				isNavBar:false
			}
		},
		components:{
			uniNavBar
		},
		methods: {
			
		}
	}
</script>

二、内容布局

	<!--商品内容-->
		<view class='shop-list'>
			<view class='shop-item' v-for='(item,index) in list' :key='index'>
				<label class="radio">
					<radio value="" color="#FF3333"/><text></text>
				</label>
				<image class='shop-img' :src="item.imgUrl" mode=""></image>
				<view class='shop-text'>
					<view class='shop-name'>{{item.name}}</view>
					<view class='shop-color f-color'>{{item.color}}</view>
					<view class='shop-price'>
						<view>¥{{item.pprice}}</view>
						<view>*{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--底部-->
		<view class='shop-foot'>
			<label class="radio foot-radio">
				<radio value="" color='#FF3333'/><text>全选</text>
			</label>
			<view class='foot-total'>
				<view class='foot-count'>合计：<text class='f-active-color'>¥0</text></view>
				<view class='foot-num'>结算(0)</view>
			</view>
		</view>
	</view>

<style scoped>
.shop-list{
	padding-bottom:100rpx;
}
.shop-item{
	display: flex;
	padding:20rpx;
	align-items: center;
	background-color: #F7F7F7;
	margin-bottom:10rpx;
}
.shop-img{
	width:200rpx;
	height: 200rpx;
}
.shop-text{
	flex:1;
	padding-left:20rpx;
}
.shop-color{
	font-size:24rpx;
}
.shop-price{
	display: flex;
	justify-content: space-between;
}

.shop-foot{
	border-top:2rpx solid #F7F7F7;
	background-color: #FFFFFF;
	position: fixed;
	bottom:0;
	left:0;
	width:100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foot-radio{
	padding-left:20rpx;
}
.foot-total{
	display: flex;
}
.foot-count{
	line-height: 100rpx;
	padding:0 20rpx;
	font-size:32rpx;
}
.foot-num{
	background-color: #49BDFB;
	color:#FFFFFF;
	padding:0 60rpx;
	line-height: 100rpx;
}
</style>

---

三、vuex管理状态

mkdir store/modules
vim index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//购物车
import cart from './modules/cart.js'

export default new Vuex.Store({
	
	modules:{
		cart
	}
	
})

cart.js

export default{
	state:{
		list:[

Shopcart.vue

computed:{
			...mapState({
				list:state=>state.cart.list
			})

四、购物车无商品样式

<template v-if='  list.length > 0  '>

<template v-else>
			<uniNavBar title='购物车' status-bar='true' fixed='true'></uniNavBar>
			<view class='shop-else-list'>
				<text>囧～购物车还是空的～</text>
			</view>
		</template>

.shop-else-list{
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	background-color: #F7F7F7;
	display: flex;
	align-items: center;
	justify-content: center;
}

五、全选和全不选

cart.js

getters:{
		//判断是否  全选
		checkedAll(state){
			return state.list.length  ===  state.selectedList.length;
		}
	},
	mutations:{
		//全选
		checkAll(state){
			state.selectedList = state.list.map(v=>{
				v.checked = true;
				return v.id;
			})
		},
		//全不选
		unCheckAll(state){
			
			state.list.forEach(v=>{
				v.checked = false;
			})
			state.selectedList = [];
		}
	},
	actions:{
		checkedAllFn({commit,getters}){
			
			getters.checkedAll  ?  commit("unCheckAll")  :  commit("checkAll");
		
		}
	}

Shopcart.vue

<label class="radio">
						<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
					</label>

<label class="radio foot-radio" @tap='checkedAllFn'>
					<radio value="" color='#FF3333' :checked="checkedAll"/><text>全选</text>
				</label>

<script>
	import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import {mapState,mapActions,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				isNavBar:false
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters(['checkedAll'])
		},
		components:{
			uniNavBar
		},
		methods: {
			...mapActions(['checkedAllFn'])
		}
	}
</script>

六、单选

Shopcart.vue

<label class="radio" @tap='selectedItem(index)'>
						<radio value="" color="#FF3333" :checked="item.checked"/><text></text>
					</label>

cart.js

//单选
		selectedItem(state,index){
			let id = state.list[index].id;
			let i = state.selectedList.indexOf(id);
			//如果selectedList已经存在就代表他之前是选中状态, checked=false,并且在selectedList删除
			if(   i  >  -1  ){
				state.list[index].checked = false;
				return state.selectedList.splice(i,1);
			}
			//如果之前没有选中,checked=true , 把当前的id添加到selectedList
			state.list[index].checked = true;
			state.selectedList.push(id);
		}

七、合计价格

totalCount(state){
			let total = {
				pprice:0,
				num:0
			}
			state.list.forEach(v=>{
				//是否选中
				if(state.selectedList.indexOf(v.id) > -1){
					//合计
					total.pprice += v.pprice*v.num;
					//结算数量
					total.num = state.selectedList.length;
				}
			})
			return total;
		}

八、编辑和完成的数量功能

Shopcart.vue
uniNumberBox 修改数据

<template v-if='!isNavBar'> //完成的状态
	<view>*{{item.num}}</view>
</template>

<template v-else> // 修改
	<uniNumberBox
		:value='item.num'
		min='1'
		@change='changeNumber($event,index)'
	>
	</uniNumberBox>
</template>


<template v-if='!isNavBar'>
	<view class='foot-total'>
		<view class='foot-count'>合计：<text class='f-active-color'>¥{{totalCount.pprice}}</text></view>
		<view class='foot-num'>结算({{totalCount.num}})</view>
	</view>
</template>


<template v-else>
	<view class='foot-total'>
		<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
		<view class='foot-num'>删除</view>
	</view>
</template>

九、商品删除功能

Shopcart.vue

<template v-else>
					<view class='foot-total'>
						<view class='foot-num' style="background-color: #000000;">移入收藏夹</view>
						<view class='foot-num' @tap='delGoodsFn'>删除</view>
					</view>
				</template>

mutations:{
		
		delGoods(state){
			state.list = state.list.filter(v=>{
				return state.selectedList.indexOf(v.id) === -1;
			})
		}
	},
	actions:{
		checkedAllFn({commit,getters}){
			getters.checkedAll  ?  commit("unCheckAll")  :  commit("checkAll");
		},
		delGoodsFn({commit}){
			
			commit('delGoods');
			commit('unCheckAll');
			
			uni.showToast({
				title:'删除成功',
				icon:"none"
			})
			
			
		}
	}

十、加入购物车

1、details.vue

<view class='pop-num'>
					<view>购买数量</view>
					<UniNumberBox 
						min='1'
						:value='num'
						@change='changeNumber'
					></UniNumberBox>
				</view>

methods

...mapMutations(['addShopCart']),
			//改变商品数量
			changeNumber(value){
				this.num = value;
			},

//跳转到购物车页面
			goShopCart(){
				uni.switchTab({
					url:'../shopcart/shopcart'
				})
			},
			//加入购物车
			addCart(){
				
				let goods = this.goodsContent;
				this.goodsContent['checked'] = false;
				this.goodsContent['num'] = this.num;
				//加入购物车
				this.addShopCart(goods);
				//隐藏弹出框
				this.hidePop();
				//提示信息
				uni.showToast({
					title:"成功加入购物车",
					icon:'none'
				})
			}

跳转到购物车页面

<!--底部-->
		<view class='details-foot'>
			<view class='iconfont icon-xiaoxi'></view>
			<view class='iconfont icon-gouwuche' @tap='goShopCart'></view>
			<view class='add-shopcart' @tap='showPop'>加入购物车</view>
			<view class='purchase' @tap='showPop'>立即购买</view>
		</view>

2、cart.js

mutation添加

mutations:{
	
		delGoods(state){
			state.list = state.list.filter(v=>{
				return state.selectedList.indexOf(v.id) === -1;
			})
		},
		//加入购物车
		addShopCart(state,goods){
			state.list.push(goods);
		}
	},

问题数据重复添加，没有合并，后端的地方要改一下