购物车优化

components/shopping-carts/cart-slide.vue

@@ -35,7 +35,7 @@
 			<label class="disac" @tap="chooseAll"><radio :checked="allChoose" color="#ff3673" style="transform: scale(.8);"/><text>全选</text></label>
 			<view class="disac">
 				<view class="fon24 mar-y30">合计：<span>￥{{allPrice}}</span></view>
-				<view class="fon32 cart-submit-btn" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
+				<view class="fon32" :style="{background: !buyNum ? '#cccccc' : 'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
 			</view> 
 		</view> 
 		<view class="" v-if="listData.length!=0 && total==listData.length"><pitera textStr="—— 到底啦 ——"></pitera></view>

pages/tabbar/cart/cart.vue

@@ -1,44 +1,456 @@
 <template>
 	<view class="pad-x160">
-		<status-container :ifReturn="false" titlet="购物车" :ifCustomer='false'>
+		<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
-			<view slot="content" style="margin: 0rpx -20rpx 0 -20rpx;">
+		<view class="cart-content">
-				<cart-slide ref="cart" :skuId='skuId'></cart-slide>
+			<!-- <view class="cart-admin" v-if="listData.length>0" @tap="showDel=!showDel"><text>购物车信息</text>{{showDel?'取消':'管理'}}</view> -->
+			<view class="slide-list">
+				<view class="slide-item" v-for="(item, index) in listData" :key="index">
+					<view class="slide-item-li" @click="clickItemMethod(item)">
+						<label class="radio"><radio :checked="item.ifcheck" @tap.stop="chooseEv(index)" color="#ff3673"/></label>
+						<view class="shop-img" @tap="goDetail(item.spuId,item.is_series)">
+							<image :src="item.image" mode="widthFix"></image>
+						</view>
+						<view class="shop-txt">
+							<view class="shop-txt-top" @tap="goDetail(item.spuId,item.is_series)">
+								<view class="fon28 bold clips2">{{item.title}}</view>
+								<view class="fon24 clips2 line-h40">单位：{{item.content}}</view>
+							</view>
+							<view class="shop-txt-bottom">
+								<!-- 商品价格 -->
+								<view class="fon24 textc bold">￥<span class="fon28 ">{{item.price}}</span></view>
+								<!-- 商品数量 -->
+								<view class="num">
+									<!-- 减数量 -->
+									<i class="icon icon-cut count-btn" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#d3d3d3' : '#ff3673'}"></i>
+									<!-- 实际数量 -->
+									<input class="input" type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" :disabled="item.slide_x!=0" v-model="item.num">
+									<!-- 加数量 -->
+									<i class="icon icon-add count-btn" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#d3d3d3' : '#ff3673'}"></i>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 全选 -->
+			<view class="change-all">
+				<label class="label" @tap="chooseAll"><radio :checked="allChoose" color="#ff3673" style="transform: scale(.8);margin-left: -6rpx;"/><text>全选</text></label>
+				<view class="all-price" v-if="showDel">
+					<view class="btn" style="background-color: #ff3673;" @tap="delShopEv">删除</view>
+				</view>
+				<view class="all-price" v-else>
+					<view class="price">合计：<span>￥{{allPrice}}</span></view>
+					<view class="btn cart-submit-btn" :style="{background: !buyNum?'#cccccc':'linear-gradient(to right,#ff3771 0%,#fd5549 100%)'}" @tap="submitEv">{{allPrice==0 ? '去购物' : `提交订单 (${buyNum})`}}</view>
+				</view>
+			</view>
+			<!-- 暂无更多内容 -->
+			<view class="more-txt" v-if="listData.length!==0 && noMore"><pitera textStr="—— 到底啦 ——"></pitera></view>
+			<nothing-page v-if="isLoading && listData.length==0" content="您的购物车,空空如也(*^▽^*)"></nothing-page>
 		</view> 
-		</status-container> 
-		<!-- 底部tab -->
-		<view class="foot-box"><foot-tab current="2"></foot-tab></view>
 	</view>
 </template>
 
 <script>
 	// 底部组件
-	import footTab from '@/components/foot-tabs/foot-tab.vue';
+	import statusNav from '@/components/status-navs/status-nav.vue';
-	import cartSlide from '@/components/shopping-carts/cart-slide';
+	import {getCartNum} from '@/jsFile/public-api.js';
+	import pitera from '@/components/nothing/pitera';
+	import {mapState} from 'vuex'//引入mapState
 	export default {
 		components:{
-			'foot-tab' :footTab,
+			statusNav,
-			cartSlide
+			pitera
 		},
 		data() {
 			return {
-				skuId:''
+				statusHeight:uni.getSystemInfoSync().statusBarHeight,
+				originalNum:0,//当前输入框原值
+				maxNum:99999,//最大可输入数量
+				minNum:1,//最小可输入数量
+				skuId:'',
+				listData: [],
+				page:1,
+				size:10,
+				total:0,
+				delIds:'', //删除ids
+				noMore:false, //没有更多
+				isLoading:true,
+				flag:true,
+				showDel:false,
 			}
 		},
-		onReachBottom() {
-			this.$refs.cart.getList();
-		},
 		onShow() {
 			uni.removeStorageSync('buyList');
+			this.listData = [];
+			// 查询购物车列表
+			this.getList();
+		},
+		onReachBottom() {
+			if(!this.noMore){
+				this.page++;
+				// 获取商品列表
+				this.getList();
+			}
+		},
+		computed: {
+			// 获取宽度
+			windowWidth() {
+				return uni.getSystemInfoSync().windowWidth;
+			},
+			
+			// 总价及合计
+			allPrice() {
+				let allPrice = 0;
+				this.listData.forEach(item=>{
+					if(item.ifcheck) {
+						allPrice += item.price*item.num;
+					}
+				})
+				return this.$toolAll.tools.addXiaoShu(allPrice);
+				// return allPrice;
+			},
+			
+			// 要删除的数量
+			buyNum() {
+				let buyNum = 0;
+				this.listData.forEach(item=>{
+					if(item.ifcheck) {
+						buyNum += 1;
+					}
+				})
+				return buyNum;
+			},
+			
+			// 全选
+			allChoose() {
+				let ifAll = false;
+				if(this.listData.length) {
+					let temparr = this.listData.filter(item=>{return item.ifcheck==false})
+						temparr.length==0 ? ifAll = true : ifAll = false;
+					let delTemparr = this.listData.filter(item=>{return item.ifcheck==true})
+					let delArr = [];
+					delTemparr.forEach(item=>{
+						delArr.push(item.id)
+					})
+					// 删除购物车
+					this.delIds = delArr.join(',');
+				}
+				return ifAll
 			},
-		onLoad(op) {
-			if(op.skuId) this.skuId = op.skuId;
 		},
 		methods: {
+			// 获取商品列表
+			getList(){
+				uni.showLoading();
+				this.total = 0;
+				let params = {
+					page:this.page,
+					size:this.size
+				}
+				this.$requst.post('/api/order/shopping-cart',params).then(res=>{
+					if(res.code==0){
+						console.log(res,'购物车列表');
+						this.total = res.data.total;
+						let cartArr = [];
+						res.data.list.forEach(item=>{
+							let obj = {
+								id: item.id,
+								spuId:item.spu.id,
+								skuId:item.sku_id,
+								coding:item.sku.coding,
+								image: item.spu.spu_cover,
+								title: item.spu.spu_name,
+								content: item.spu.unit,
+								slide_x: 0,
+								price:item.spu.original_price,
+								num:item.num,
+								ifcheck:this.skuId==item.sku_id ? true : false,
+								ifExit:true,
+								ifShow:true,
+							}
+							cartArr.push(obj);
+						})
+						this.listData = this.listData.concat(cartArr);
+						if(this.listData.length == this.total){
+							this.noMore = true;
+						}
+					}
+					uni.hideLoading();
+					this.isLoading = true;
+				})
+			},
 			
+			// 选中事件
+			chooseEv(index) {
+				this.listData[index].ifcheck = !this.listData[index].ifcheck;
+			},
+			
+			// 全选事件
+			chooseAll(){
+				let exit = this.listData.filter(item=>item.ifcheck==false);
+				if(exit.length){
+					this.listData.forEach(item=>item.ifcheck = true);
+				} else {
+					this.listData.forEach(item=>{item.ifcheck = false});
+				}
+			},
+			
+			// 去购物、去结算、删除
+			submitEv(){
+				if(this.allPrice==0) {
+					// 去购物
+					uni.reLaunch({
+						url:`/pages/tabbar/cate/cate?index=0`
+					})
+				} else {
+					// 去结算
+					let buyList = [];
+					this.listData.forEach(item=>{
+						if(item.ifcheck) {
+							let obj = {
+								sku_coding: item.coding,
+								num: item.num
+							}
+							buyList.push(obj);
+						}
+					})
+					uni.setStorageSync('buyList',buyList);
+					uni.navigateTo({
+						url:'/pagesB/settlement/settlement'
+					})
+				}
+			},
+			
+			// 数量加减事件
+			addCutEv(index,num) {
+				if(this.listData[index].slide_x==0){
+					if(num) {
+						// 加 ，如果当前商品数量不等于最大值
+						if(this.listData[index].num != this.maxNum) {
+							this.listData[index].num++;
+						}
+					} else {
+						// 减 ，如果当前商品数量大于最小值
+						if(this.listData[index].num > this.minNum) {
+							this.listData[index].num--;
+						}else{
+							// 移除购物车
+							uni.showModal({
+								title: '提示',
+								content: '是否将该商品移除购物车？',
+								success: (res)=> {
+									if (res.confirm) {
+										this.delShopEv(this.listData[index].id);
 									}
 								}
+							});
+						}
+					}
+					this.$requst.post('/api/order/shopping-cart-change-num',{id:this.listData[index].id,num:this.listData[index].num}).then(res=>{
+						if(res.code!=0){
+							this.$toolAll.tools.showToast(res.msg);
+						}
+					})
+				}
+			},
+			
+			// 删除商品
+			delShopEv(id){
+				this.$requst.post('/api/order/shopping-cart-del',{id:id}).then(res=>{
+					if(res.code==0){
+						this.listData = this.listData.filter(item => item.id !== id);
+						this.$toolAll.tools.showToast('删除成功');
+						// this.getList();
+					}else{
+						this.$toolAll.tools.showToast(res.msg)
+					}
+				})
+			},
+			
+			// 批量删除
+			// delShopEv(){
+			// 	if(this.delIds!==''){
+			// 		uni.showModal({
+			// 			title: '提示',
+			// 			content: '是否删除选中商品？',
+			// 			success: (res)=> {
+			// 				if (res.confirm) {
+			// 					// 确认删除
+			// 					this.confirmDel();
+			// 				} else if (res.cancel) {
+			// 					console.log('用户点击取消');
+			// 				}
+			// 			}
+			// 		});
+			// 	}
+			// },
+			
+			// 确认删除
+			// confirmDel(){
+			// 	this.$requst.post('/api/order/shopping-cart-del',{id:this.delIds.toString()}).then(res=>{
+			// 		if(res.code==0){
+			// 			this.listData = this.listData.filter(item=>item.ifcheck==false)
+			// 			this.$toolAll.tools.showToast('删除成功');
+			// 		}else{
+			// 			this.$toolAll.tools.showToast(res.msg)
+			// 		}
+			// 	})
+			// },
+			
+			// 查看商品详情
+			goDetail(id) {
+				uni.navigateTo({
+					url:'/pagesB/shop-detail/shop-detail?id='+id
+				})
+			},
+			
+			// 输入框获取焦点事件
+			focusEv(num) {
+				// 储存当前商品的原始数值
+				this.originalNum = num;
+			},
+			
+			// 输入框失去焦点事件
+			blurEv(index,e) {
+				// 失去焦点时，获取当前输入框里的数值
+				let currentNum = e.detail.value*1;
+				// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
+				this.listData[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
+			},
+		}
+	};
 </script>
 
-<style>
+<style scoped>
-
+	.cart-admin{
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		padding: 20rpx 30rpx;
+		font-size: 30rpx;
+		background-color: #FFFFFF;
+		border-bottom: 2rpx solid #eaeaea;
+		margin-top: 20rpx;
+		color: #666666;
+	}
+	.cart-admin>text{
+		color: #000000;
+	}
+	.slide-item{
+		margin-top: 25rpx;
+	}
+	.slide-item-li{
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #FFFFFF;
+	}
+	.slide-item-li .radio>radio{
+		transform: scale(.8);
+		margin-left: -6rpx;
+	}
+	.slide-item-li .shop-img{
+		width: 230rpx;
+		height: 150rpx;
+		border-radius: 10rpx;
+		margin: 0 24rpx 0 6rpx;
+		overflow: hidden;
+	}
+	.slide-item-li .shop-img image{
+		width: 230rpx;
+		min-height: 150rpx;
+	}
+	.slide-item-li .shop-txt{
+		width: calc(100% - 300rpx);
+	}
+	.shop-txt-top{
+		min-height: 100rpx;
+	}
+	.shop-txt-top .title{
+		font-size: 30rpx;
+		line-height: 1.5;
+		color: #000000;
+		font-weight: bold;
+	}
+	.shop-txt-top .specs{
+		font-size: 24rpx;
+		line-height: 1.5;
+		color: #8c8c9b;
+		margin: 3rpx;
+	}
+	.shop-txt-bottom{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		height: 50rpx;
+	}
+	.shop-txt-bottom .price{
+		font-size: 30rpx;
+		line-height: 1.5;
+		color: #f81c1c;
+	}
+	.shop-txt-bottom .num{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 170rpx;
+		font-size: 24rpx;
+	}
+	.shop-txt-bottom .num>.count-btn{
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 24rpx;
+		width: 40rpx;
+		height: 40rpx;
+		background-color: #000000;
+		color: #FFFFFF; 
+		border-radius: 10rpx;
+	}
+	.shop-txt-bottom .num>.input{
+		box-sizing: border-box;
+		width: 78rpx;
+		height: 40rpx;
+		border: 2rpx solid #d3d3d3;
+		border-radius: 10rpx;
+		text-align: center;
+	}
+	.change-all{
+		box-sizing: border-box;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100vw;
+		height: 130rpx;
+		padding: 0 30rpx;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		z-index: 99;
+		background-color: #FFFFFF;
+	}
+	.change-all .label{
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+	}
+	.all-price{
+		display: flex;
+		align-items: center;
+	}
+	.all-price .price{
+		font-size: 24rpx;
+		margin-right: 25rpx;
+		color: #000000;
+	}
+	.all-price .btn{
+		line-height: 84rpx;
+		padding: 0 30rpx;
+		border-radius: 10rpx;
+		font-size: 32rpx;
+		color: #FFFFFF;
+	}
 </style>