perry-mall/components/cart-subgroup/cart.vue

<template>
	<view class="pad-x140" :class="dataList.length ? '' : 'display-center-center'">
		<scroll-view scroll-y v-if="dataList.length" @scrolltolower="touchBottomEv">
			<view v-for="(item,index) in dataList" :key="index"
			class="item-box display-between-center">
				<view @tap="chooseItem(index)" class="display-center-center flex-shrink">
					<!-- 勾选按钮 -->
					<view class="circle-box display-center-center flex-shrink" :class="item.isActive ? 'circle-box-active' : ''"></view>
					<!-- 商品图片 -->
					<image class="shop-img" :src="item.imgSrc" mode="aspectFill"></image>
				</view>
				<view class="item-right-box display-between-column width100">
					<view @tap="goDetail(item.id)">
						<!-- 商品标题 -->
						<view class="clips2 item-title">{{item.title}}</view>
						<!-- 规格 -->
						<view class="item-specs">
							<view>{{item.specs1}}</view>
						</view>
					</view>
					<view class="display-between-center">
						<!-- 价格 -->
						<view class="item-price">￥{{item.price}}</view>
						<!-- 加减按钮 -->
						<view class="display-between-center">
							<!-- 减 -->
							<button @tap="deladdEvent( item.id , index , 0)" :disabled="item.num==1" class="item-btn display-center-center">­­­­­­­­­­­­-</button>
							<!-- 输入框 -->
							<view class="input-box display-center-center">
								<input type="text" v-model="item.num" />
							</view>
							<!-- 加 -->
							<button @tap="deladdEvent( item.id , index , 1)" class="item-btn display-center-center">+</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<pitera v-else></pitera>
		<!-- 底部导航 -->
		<view class="display-between-center cart-foot-box">
			<!-- 全选 -->
			<view @tap="chooseAll" class="display--center">
				<view class="circle-check-all display-center-center" 
				:class="ifCheckAll ? 'circle-check-all-active' : ''"></view>
				全选
			</view>
			<!-- 合计 -->
			<view class="allprice-box">合计：{{totalPrice}}</view>
			<!-- 立即结算 -->
			<view class="cart-settlement" @tap="gopageEv">{{dataList.length ? '立即结算' : '去购物'}}</view>
		</view>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		name:"cart",
		computed:{
			totalPrice(){
				let totalPrice = 0;
				this.dataList.forEach(item=>{
					if(item.isActive) totalPrice += item.reckonPrice*1 * item.num*1;
				})
				return totalPrice;
			}
		},
		data() {
			return {
				dataList:[],
				// dataList:[
				// 	{
				// 		id:1,
				// 		isActive:true,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:2,
				// 		isActive:true,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:2
				// 	},
				// 	{
				// 		id:3,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:4,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:5,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:6,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:7,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:2000,
				// 		num:1
				// 	},
				// 	{
				// 		id:8,
				// 		isActive:false,
				// 		imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
				// 		title:'于亿年宝藏中臻选1的宝石级钻石每年开采数LOVE100 星座光的原石挑选 ',
				// 		specs1:'颜色：白色',
				// 		price:3000,
				// 		num:1
				// 	}
				// ],
				ifCheckAll:false,
				page:1, // 第几页
				size:10, // 数量
				total:0, // 总数
				pitera:false, // 是否显示暂无数据
			};
		},
		// 执行顺序 第一
		beforeCreate(){
			
		},
		// 执行顺序 第四
		mounted() {
			// 查询购物车列表
			this.checkList();
		},
		methods:{
			// 去商品详情
			goDetail(id){
				uni.navigateTo({
					url:`/pagesB/shopDetail/shopDetail?id=${id}`
				})
			},
			// 去结算、去购物事件
			gopageEv(){
				if(this.dataList.length){
					if(this.totalPrice){
						let newList = [];
						this.dataList.forEach(item=>{
							if(item.isActive){
								let obj = {
									id:item.id,//商品id
									imgSrc:item.imgSrc,//商品图片
									coding:item.coding,//商品coding
									price:item.reckonPrice,//商品价格
									num:item.num,//商品数量
									title:item.title,//商品名称
								}
								newList.push(obj);
							}
						})
						uni.setStorageSync('orderList',newList);
						uni.navigateTo({url:'/pagesA/getReadyDan/getReadyDan'});
					} else {
						this.$toolAll.tools.showToast('请选择要购买的商品');
					}
				} else {
					uni.navigateTo({url:'/pages/tabbar/cate/cate'});
				}
			},
			// 商品数量变更
			setShopNum(id,num,type){
				let parmas = {
					id,// id:商品id
					num,// num:商品数量	
					type// type:变更方式down减，up加
				}
				this.$requst.post('/api/order/shopping-cart-change-num',parmas).then(res=>{
					if(res.code==0){} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			},
			touchBottomEv(){// scroll-view触底事件
				console.log(169);
			},
			chooseItem(index){// 商品选择
				this.dataList[index].isActive = !this.dataList[index].isActive
				let one = this.dataList.filter(function(item){
					 return item.isActive == false; 
				})
				one.length==0 ? this.ifCheckAll = true : this.ifCheckAll = false
			},
			chooseAll(){// 全选
				if(this.dataList.length){
					this.ifCheckAll = !this.ifCheckAll
					this.dataList.forEach((item,index)=>{
						this.ifCheckAll ? item.isActive = true : item.isActive = false
					})
				} else this.$toolAll.tools.showToast('亲，购物车空空的哟','',3000)
			},
			deladdEvent(id,cur,index){//数量加减事件
				if(index==0){//减少数量
					this.dataList[cur].num--;
					this.setShopNum(id,this.dataList[cur].num,'down');
				} else {//增加数量
					this.dataList[cur].num++;
					this.setShopNum(id,this.dataList[cur].num,'up');
				}
				// this.changeNum()//调用数量变更事件
			},
			checkList(){//查询购物车列表
				this.$requst.post('/api/order/shopping-cart',{page:this.page,size:this.size}).then(res=>{
					if(res.code==0){
						if(res.data.length){
							res.data.forEach(item=>{
								let obj = {
									id:item.id,
									coding:item.sku.coding,
									isActive:false,
									imgSrc:item.spu.spu_cover,
									title:item.spu_name,
									specs1:'',
									price:this.$toolAll.tools.changeNum(item.price*1),
									reckonPrice:item.price,
									num:item.num
								}
								this.dataList.push(obj);
							})
						} else {
							this.dataList = [];
						}
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				}).catch(err=>{
					this.$toolAll.tools.showToast(err.msg);
				})
			}
		}
	}
</script>

<style scoped>
	.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	.clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;}
	.flex-shrink{flex-shrink: 0;}
	.display-between-center {display: flex;justify-content: space-between;align-items: center;}
	.display--center {display: flex;align-items: center;}
	.display-center-center {display: flex;justify-content: center;align-items: center;}
	.display-between-column {display: flex;justify-content: space-between;flex-direction: column;}
	.item-box {border-bottom: 1rpx solid #d3d3d3;padding: 40rpx 0;}
	.item-box:last-child{border-bottom: none;}
	.circle-box,.circle-check-all{width: 32rpx;height: 32rpx;border: 1rpx solid #8c8c9b;box-sizing: border-box;border-radius: 100%;}
	.circle-box-active,.circle-check-all-active {
		border: 1rpx solid #000000;
	}
	.circle-box-active::after,.circle-check-all-active::after{
		content: '';
		display: block;
		width: 18rpx;height: 18rpx;background-color: #000000;border-radius: 100%;
	}
	.shop-img {width: 223rpx;height: 223rpx;border-radius: 30rpx;margin: 0 20rpx;}
	.allprice-box{width: 30%;}
	.item-right-box{font-size: 24rpx;height: 223rpx;}
	.item-title {color: #000000;}
	.item-specs{color: #8c8c9b;}
	.item-price{font-size: 30rpx;}
	
	.input-box {width: 78rpx;height: 40rpx;border-radius: 10rpx;margin: 0 6rpx; border: 1rpx solid #000000;overflow: hidden;}
	input {text-align: center;}
	.item-btn {width: 40rpx;height: 40rpx;border-radius: 10rpx;background-color: #000000;color: #FFFFFF;padding: 0rpx;}
	
	/* 底部导航 */
	.cart-foot-box{position: fixed;bottom: 0;left: 0;right: 0;z-index: 2; height: 130rpx;background-color: #efefef;font-size: 30rpx;}
	.circle-check-all {width: 33rpx;height: 33rpx;margin: 0 10rpx 0 30rpx;}
	.circle-check-all-active::after{
		width: 19rpx;height: 19rpx;
	}
	.cart-settlement{width: 242rpx;height: 130rpx;background-color: #f81c1c;color: #FFFFFF;font-size: 36rpx;text-align: center;line-height: 130rpx;}
</style>