mall-laonong/pages/cart/cart.vue

<template>
	<view class="pad-x170" v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="购物车" :marginBottom="0"></status-nav>
		<view class="cart-content">
			<!-- 全选 -->
			<view class="change-all border-box background-white font26 flex" :style="{top:statusHeight+50+'px'}">
				<label class="label flex" @tap="chooseAll"><radio :checked="allChoose" color="#febf00" style="transform: scale(.8);"/><text>全选</text></label>
				<view class="del-cart" @tap="delShopEv">删除</view>
			</view>
			<view class="slide-list">
				<view class="slide-item" v-for="(item, index) in listData" :key="index">
					<view class="slide-item-li border-box background-white flex">
						<label class="radio" @tap.stop="chooseEv(index)"><radio :checked="item.ifcheck" color="#febf00"/></label>
						<view class="shop-img radius30" @tap.stop="goDetail(item.spuId)">
							<image :src="item.image" mode="widthFix"></image> 
						</view>
						<view class="shop-txt">
							<view class="shop-txt-top" @tap.stop="goDetail(item.spuId)">
								<view class="title font30 clips1">{{item.title}}</view>
								<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.skuName}}</view>
							</view>
							<view class="shop-txt-bottom flex">
								<!-- 商品价格 -->
								<view class="price font30 color-red">￥{{item.price}}</view>
								<!-- 商品数量 -->
								<view class="num font24 flex">
									<!-- 减数量 -->
									<i class="icon icon-cut count-btn fon24 color-ff radius10 flex" @tap.stop="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || item.slide_x!=0 ? '#d3d3d3' : '#febf00'}"></i>
									<!-- 实际数量 -->
									<input class="input border-box radius10" 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 fon24 color-ff radius10 flex" @tap.stop="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || item.slide_x!=0 ? '#d3d3d3' : '#febf00'}"></i>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 提交订单 -->
			<view class="pull-footer-bg background-white pad-all20 radius30 border-box">
				<view class="pull-footer background-grey radius30 pad-all20 border-box flex">
					<view class="price color-ff">
						<view class="font36">合计：{{allPrice>0?'￥'+allPrice:'0'}}</view>
					</view>
					<view class="btn font36 color-48 radius30 flex" :style="{background: !buyNum ? '#cccccc' : '#febf00'}" @tap="submitEv">{{allPrice==0 ? '去购物' : '立即购买'}}</view>
				</view>
			</view>
			<!-- 到底啦 -->
			<view class="no-more font24 pad-sx25" style="margin: 0;" v-if="listData.length!==0 && noMore"><text>—— 到底啦 ——</text></view>
			<nothing-page v-if="listData.length==0" content="您的购物车,空空如也(*^▽^*)"></nothing-page>
		</view> 
	</view>
</template>

<script>
	import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
	import {getCartInfo} from '@/jsFile/public-api.js';
	export default {
		data() {
			return {
				statusHeight:uni.getSystemInfoSync().statusBarHeight,
				originalNum:0,//当前输入框原值
				maxNum:99999,//最大可输入数量
				minNum:1,//最小可输入数量
				skuId:'',
				listData: [],
				page:1,
				size:4,
				total:0,
				delIds:'', //删除ids
				noMore:false, //没有更多
				isLoading:true,
				flag:true,
			}
		},
		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 += parseFloat(item.price*item.num);
					}
				})
				return this.$toolAll.tools.addXiaoShu(allPrice);
				// return allPrice.toString();
			},
			
			// 要删除的数量
			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
			},
		},
		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,
								customTitle: item.sku.custom_title,
								skuName: item.sku.sku_name,
								slide_x: 0,
								price:item.sku.sku_price,
								num:item.num,
								ifcheck:true,
								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;
				})
			},
			
			// 全选事件
			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/index/index`
					})
				} else {
					if(this.flag){
						this.flag=false;
						// 去结算
						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:'/pages/cart/settlement'
						})
						setTimeout(()=>{
							this.flag=true;
						},1500)
					}
				}
			},
			
			// 选中事件
			chooseEv(index) {
				this.listData[index].ifcheck = !this.listData[index].ifcheck;
			},
			
			// 数量加减事件
			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--;
						}
					}
					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(){
				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',{ids:this.delIds.toString()}).then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('删除成功');
						this.listData.forEach((item,index)=>{
							if(item.ifcheck){
								this.listData.splice(index,1)
							}
						})
					}else{
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			
			// 计算总价
			totalPrice() {
				let totalPrice = 0;
				this.listData.forEach(item=>{
					totalPrice += parseFloat(item.price*item.num);
				})
				totalPrice = this.$toolAll.tools.addXiaoShu(totalPrice);
				this.$store.commit('setPrice', totalPrice);
			},
			
			// 查看商品详情
			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 scoped>
	.slide-list{
		margin-top: 20rpx;
	}
	.slide-item-li{
		align-items: center;
		width: calc(100% - 40rpx);
		padding: 30rpx 0;
		margin: 0 auto;
		border-bottom: 2rpx solid #eaeaea;
	}
	.slide-item-li .radio>radio{
		transform: scale(.8);
		margin-left: -5rpx;
	}
	.slide-item-li .shop-img{
		width: 194rpx;
		height: 194rpx;
		margin: 0 24rpx 0 6rpx;
		overflow: hidden;
	}
	.slide-item-li .shop-img image{
		width: 100%;
		min-height: 194rpx;
	}
	.slide-item-li .shop-txt{
		width: calc(100% - 264rpx);
	}
	.slide-item-li .shop-txt-top{
		min-height: 134rpx;
	}
	.slide-item-li .shop-txt-top .title{
		line-height: 1.5;
	}
	.slide-item-li .shop-txt-top .specs{
		line-height: 1.5;
	}
	.slide-item-li .shop-txt-bottom{
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 50rpx;
	}
	.slide-item-li .shop-txt-bottom .price{
		line-height: 1.5;
	}
	.slide-item-li .shop-txt-bottom .num{
		justify-content: space-between;
		align-items: center;
		width: 170rpx;
	}
	.slide-item-li .shop-txt-bottom .num>.count-btn{
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
	}
	.slide-item-li .shop-txt-bottom .num>.input{
		width: 78rpx;
		height: 40rpx;
		border: 2rpx solid #d3d3d3;
		text-align: center;
	}
	.change-all{
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 40rpx);
		height: 80rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #eaeaea;
		position: sticky;
		left: 0;
		z-index: 9;
	}
	.change-all .label{
		align-items: center;
		margin-left: -5rpx;
	}
</style>