小程序购物车实现uni-app

uni-app 小程序实现购物车，功能完整。

展示效果图

部分

<template>
	<view class="container">
		<!-- 空白页 -->
		<view v-if="empty===true || cartList =='' " class="empty">
			<image src="/static/emptyCart.png" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去购物吧></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cat_sp">
				<text>已加入商品</text>
			</view>
			<view class="cart-list">
				<block v-for="(item, index) in cartList"  :key="item" >
					<view
						class="cart-item" 
					>
						<view class="image-wrapper">
							<view v-if="item.upperShelves == 0"	 class="upperShelves"
							>
								<image style="width: 40rpx;height: 40rpx;" src="../../static/select.png" mode=""></image>
							</view>
							<view v-else
								class="yticon icon-xuanzhong2 checkbox"  
								:class="{checked: item.checked}"
								@click="check('item', index,item)"
							></view>
							<view class="position_sp" v-if="item.upperShelves == 0">
										<image :src="item.titlePicStr" @click="cats(item,index)"
											mode="aspectFill" 
											lazy-load 
											@load="onImageLoad('cartList', index)" 
											@error="onImageError('cartList', index)"
										>
									</image>
									<image class="LOVE_position_sp" src="../../static/xj.png" mode=""></image>
							</view>
							<image v-else :src="item.titlePicStr" @click="cats(item,index)"
								mode="aspectFill" 
								lazy-load 
								@load="onImageLoad('cartList', index)" 
								@error="onImageError('cartList', index)"
							></image>
						</view>
						<view class="item-right">
							<text class="clamp title">{{item.productName}}</text>
							<text class="attr" v-if="item.upperShelves == 0" style="color:red;">{{item.productSpecs}}</text>
							<text class="attr" v-else>{{item.productSpecs}}</text>
							<view class="sun-add">
								<view class="sun-tetle">
									<text class="price">¥{{item.productPrice}}</text> 
								</view>
								<view class="purchase_sMn">
										<view class="Purchase">
											<text :class="minusStatus" @click="bindMinus(item)">-</text>  
										</view>
									    <!-- 数值 -->  
										<view class="purchase_1">
											 <text >{{item.productNum}}</text>
										</view>
									    <!-- 加号 -->  
										<view class="Purchase">
											 <text class="purchase_sub" @click="bindPlus(item)">+</text> 
										</view>
									<!-- <uni-number-box
										class="step"
										:min="1" 
										:max="item.productNum"
										:value="item.productNum>item.productNum?item.productNum:item.productNum"
										:isMax="item.productNum>=item.productNum?true:false"
										:isMin="item.productNum===1"
										:index="index"
										@eventChange="numberChange"
									></uni-number-box> -->
								</view>
							</view>
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(item)"></text>
					</view>
				</block>
			</view>
			<!-- 底部菜单栏 -->
			<view class="action-section">
				<view class="checkbox">
					<image 
						:src="allChecked?'/static/selected.png':'/static/select.png'" 
						mode="aspectFit"
						@click="check('all')"
					></image>
					<view class="clear-btn" :class="{show: allChecked}" @click="clearCart">
						清空
					</view>
				</view>
				<view class="total-box">
					<text class="price">¥{{total}}</text>
				<!-- 	<text class="coupon">
						已优惠
						<text>74.35</text>
						元
					</text> -->
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
			</view>
		</view>
	</view>
</template>

data() {
			return {
				  minusStatus: 'disabled',
				  empty: false, //空白页现实  true|false
				  total: 0, //总价格
				  allChecked:false, //全选状态  true|false
				  cartList:[],
				  totalId:[] //商品结算的id 
			};
		},

methods:{
		 //购物车跳转详情页面
		 cats(item){
			let proId = item.productId
			console.log(item)
			uni.navigateTo({
			    url: '../category_detil/category_detil?id='+proId,
			}); 
		 },
			
		 //购物车数据展示
		createOrder(){ //结算方式
		    let _that = this
			_that.totalId =[]
			 _that.cartList.forEach(function(item,index) {
				if(item.upperShelves == 0){
					 uni.showToast({
						title: '请先勾选去掉已下架商品',
						icon: 'none'
					 })
					return
				 }
				if (item.checked){
					_that.totalId.push(item.shopCatrId)
			    }
				let types = Object.values(_that.totalId)
				console.log(Object.values(_that.totalId))
			})
			// _that.enterData.forEach(item => {
			// 	if(){}
			//      item.checked = false;
			// });
			if(_that.totalId.length == 0){
				uni.showToast({
					title: '请选择要结算的商品',
					icon: 'none'
			})
			}else{
				let data = {shopCartId:_that.totalId.join(',')}
				_that.util.request({ url: '/api/order/getOrderParam',method: 'GET',data:data}).then(res => {
					if(res.code == 200){
						uni.navigateTo({
						    url: '../shpping_order/shpping_order?shopCartId='+_that.totalId
						});  
					}
					// _that.list = res.data.records 
				});		
			}
		},
		 //数据显示
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败 显示加载图片失败 
			onImageError(key, index) {
				console.log(key)
				console.log(this[key][index].titlePicStr)
				this[key][index].titlePicStr = '/static/errorImage.jpg';
			},
			navToLogin(){ //购物车空空跳转登录
				uni.switchTab({
				    url: '/pages/category/category'
				});
			},
			//选中状态处理
			check(type, index,item){
				console.log(item)
				if(type === 'item'){
					this.cartList[index].checked = !this.cartList[index].checked;
				}else{
					const checked = !this.allChecked
					const list = this.cartList;
					list.forEach(item=>{
						item.checked = checked;
					})
					this.allChecked = checked;
				}
				this.calcTotal(type);
			},
			//数量
			numberChange(item){
				this.cartList[item.index].productNum = item.productNum;
				this.calcTotal();
			},
			//删除
			deleteCartItem(item){
				 console.log(item)
				let _that = this
				let data = {
					shopCatrId:item.shopCatrId
				}
				console.log(item.shopCatrId)
				_that.util.request({ url: '/api/sale/delShopCart',method: 'POST',data:data}).then(res => {
					console.log(res)
					if(res.code == 200){
						uni.showToast({ title: '删除成功',icon: 'none', duration:1500});
					}
					_that.loadData();
					// _that.list = res.data.records 
				});		
			},
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							let _that = this
							let data = {customerId:uni.getStorageSync('userInfo').id}
							_that.util.request({ url: '/api/sale/delAllShopCart',method: 'POST',data:data}).then(res => {
								console.log(res)
								if(res.code == 200){
									uni.showToast({ title: '删除成功',icon: 'none', duration:1500});
								}
								_that.loadData();
								// _that.list = res.data.records 
							});		
						}
					}
				})
			},
			//计算总价
			calcTotal(){
				let list = this.cartList;
				if(list.length === 0){
					this.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				list.forEach(item=>{
					if(item.checked === true){
						total += item.productPrice * item.productNum;
					}else if(checked === true){
						checked = false;
					}
				})
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			//退出登录
			//switch
		}

拿个购物车的数据 在onLoad 初始化一下 上面改成自己的接口就行了