template-project/components/shopping-carts/cart-one.vue

<template>
	<view>
		<view class="disac shopping-cart-item animated " :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in dataList" :key="index">
			<!-- 选择 -->
			<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
			<!-- 商品图片 -->
			<view class="shopp-img imgH mar-zy20 flexs" @tap="chooseEv(index)">
				<image class="shopp-img imgH width100 " :src="item.imgsrc" mode="aspectFill" lazy-load></image>
			</view>
			<view class="disjb fc imgH width100">
				<view @tap="goDetail(item.id)">
					<!-- 商品标题 -->
					<view class="fon28 bold clips1">{{item.title}}{{dataList.length}}</view>
					<!-- 商品描述 -->
					<view class="fon24 clips2 line-h40">{{item.content}}</view>
				</view>
				<view class="disjbac">
					<!-- 商品价格 -->
					<view class="fon24">￥：<span class="fon28 colf8 bold">{{$toolAll.tools.addXiaoShu(item.price)}}</span></view>
					<!-- 商品数量 -->
					<view class="disac">
						<!-- 减数量 -->
						<i class="icon icon-cut countBtn disjcac" @tap="addCutEv(index,0)" :style="{backgroundColor: item.num==minNum || !ifManage ? '#cccccc' : '#000000'}"></i>
						<!-- 实际数量 -->
						<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" :disabled="!ifManage" v-model="item.num">
						<!-- 加数量 -->
						<i class="icon icon-add countBtn disjcac" @tap="addCutEv(index,1)" :style="{backgroundColor: item.num==maxNum || !ifManage ? '#cccccc' : '#000000'}"></i>
					</view>
				</view>
			</view>
		</view>
		<!-- 管理 -->
		<view v-if="dataList.length" class="shopping-manage" :style="{backgroundColor: ifManage ? 'rgba(0,0,0,.6)' : 'rgba(255,0,0,1)'}" @tap="manageEv">{{ifManage ? '管理' : '取消'}}</view>
		<!-- 底部导航 -->
		<view class="disjbac cart-foot-box fon24">
			<view class="" v-if="ifManage">合计：<span class="fon38 colf8 bold">{{allPrice}}</span></view>
			<view class="disac" v-else @tap="chooseAllEv">
				<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''" @tap="chooseEv(index)"></view>
				<span>全选</span>
			</view>
			<view class="fon38 cart-submit-btn" 
				:style="{backgroundColor: !ifManage && !delNum ? '#cccccc' : '#FF0000'}" @tap="submitEv">{{ifManage ? `${allPrice=='0.00' ? '去购物' : '去结算'}` : `删除 (${delNum})`}}</view>
		</view>
		<nothing-page v-if="!ifLoading && !dataList.length" content="你的购物车：这也空空，那也空空(*^▽^*)"></nothing-page>
	</view>
</template>

<script>
	export default {
		name:"cart-one",
		props:{
			list:{
				type:Array,
				default:()=>{
					return [
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
						{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
					]
				}
			}
		},
		data() {
			return {
				dataList:[],
				ifManage:true,//是否显示管理按钮
				ifSelectAll:false,//是否全选
				originalNum:0,//当前输入框原值
				maxNum:20,//最大可输入数量
				minNum:1,//最小可输入数量
				ifLoading:true
			};
		},
		computed:{
			// 总价及合计
			allPrice() {
				let allPrice = 0;
				this.dataList.forEach(item=>{
					if(item.ifcheck) {
						allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
					}
				})
				return this.$toolAll.tools.addXiaoShu(allPrice);
			},
			// 要删除的数量
			delNum() {
				let delNum = 0;
				this.dataList.forEach(item=>{
					if(item.ifcheck) {
						delNum += 1;
					}
				})
				return delNum;
			}
		},
		mounted() {
			// this.dataList = this.list;
			this.list.forEach((item,index)=>{
				let obj = {
					id:index,
					imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
					title:'商品标题'+index,
					content:'商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',
					price:199,
					num:index+++1,
					ifcheck:false,//是否被选中
					ifExit:true,//是否存在
					ifShow:true//是否隐藏
				}
				this.dataList.push(obj);
				// this.dataList = [];
				this.ifLoading = false;
			})
		},
		methods:{
			// 去购物、去结算、删除
			submitEv(){
				if(this.ifManage) {
					if(this.allPrice=='0.00') {
						// 去购物
						console.log('去购物');
					} else {
						// 去结算
						console.log('去结算');
					}
				} else {
					// 进入删除
					this.dataList.forEach((item,index)=>{
						// 判断商品是否被选中
						if(item.ifcheck) {
							// 该商品被选中
							// 修改为不存在的商品
							this.dataList[index].ifExit = false;
							// 修改该商品不被选中
							this.dataList[index].ifcheck = false;
							setTimeout(()=>{
								// 隐藏该商品
								this.dataList[index].ifShow = false;
							},1000)
						}
					})
					setTimeout(()=>{
						// 重构数组列表，去除不存在的商品
						this.dataList = this.dataList.filter(item=>item.ifExit==true);
						if(!this.dataList.length) {
							// 如果购物车为空按钮变为去购物，全选变为合计：0.00
							this.ifManage = true;
						}
					},1000)
					this.judgeSelectAllEv();
				}
			},
			// 全选事件
			chooseAllEv(){
				this.ifSelectAll = !this.ifSelectAll;
				this.dataList.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
			},
			// 选中事件
			chooseEv(index) {
				this.dataList[index].ifcheck = !this.dataList[index].ifcheck;
				this.judgeSelectAllEv();
			},
			// 判断全选中是否被选中
			judgeSelectAllEv() {
				let exit = this.dataList.findIndex(item=>item.ifcheck==false);
				if(exit!=-1) {
					this.ifSelectAll = false
				} else {
					this.ifSelectAll = true;
				}  
			},
			// 去商品详情事件
			goDetail(id){
				uni.navigateTo({
					url:''
				})
			},
			// 数量加减事件
			addCutEv(index,num) {
				// 不在管理状态下：可进行加减
				if(this.ifManage) {
					if(num) {
						// 加 ，如果当前商品数量不等于最大值
						if(this.dataList[index].num != this.maxNum) {
							this.dataList[index].num++;
						}
					} else {
						// 减 ，如果当前商品数量大于最小值
						if(this.dataList[index].num > this.minNum) {
							this.dataList[index].num--;
						}
					}
					console.log(this.allPrice,'总价');
				}
			},
			// 管理点击事件
			manageEv(){
				// 重置所有商品不被选中
				this.dataList.forEach(item=>item.ifcheck=false);
				// 管理状态的切换 	管理/取消
				this.ifManage = !this.ifManage;
				// 设置底部全选框不被选中
				this.ifSelectAll = false;
			},
			// 输入框获取焦点事件
			focusEv(num) {
				// 储存当前商品的原始数值
				this.originalNum = num;
			},
			// 输入框失去焦点事件
			blurEv(index,e) {
				// 失去焦点时，获取当前输入框里的数值
				let currentNum = e.detail.value*1;
				// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
				this.dataList[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
			}
		}
	}
</script>

<style>
.mo-item{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30rpx;
	height: 30rpx;
	border-radius: 100%;
	border: 2rpx solid #000000;
	box-sizing: border-box;
}
.active-item{
	border: 2rpx solid #FF0000;
}
.active-item::before{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 20rpx;
	height: 20rpx;
	border-radius: 100%;
	background-color: #FF0000;
}
.imgH{height: 180rpx;}
.shopping-cart-item{background-color: #FFFFFF;border-radius: 10rpx;margin-bottom: 20rpx;padding: 20rpx;}
.shopp-img{width: 180rpx;border-radius: 10rpx;}
.countBtn{font-size: 36rpx;width: 40rpx;height: 40rpx;background-color: #000000;color: #FFFFFF; border-radius: 10rpx;}
.countInput{background-color: #F5F5F5;width: 80rpx;border-radius: 10rpx;padding: 10rpx 0;margin: 0 10rpx;}

.cart-foot-box{position: fixed;bottom: 0;right: 0;left: 0;background-color: #FFFFFF; padding: 20rpx 40rpx;box-shadow: -6rpx 0rpx 10rpx rgba(0, 0, 0, .3);}
.cart-submit-btn{color: #FFFFFF;background-color: #cccccc;padding: 10rpx 40rpx;border-radius: 40rpx;}

.shopping-manage{position: fixed;right: 20rpx;bottom: 320rpx;width: 80rpx;height: 80rpx; border-radius: 100%;background-color: rgba(0, 0, 0, .6);color: #FFFFFF;font-size: 24rpx;display: flex;justify-content: center;align-items: center;}

</style>