flavorOfTimeSz/pages/cart/cart.vue

<template>
	<view class="bg bg-padding">
		<view class="no-cart" v-if="cartList.length<=0">
			<image src="https://static.ticket.sz-trip.com/uploads/20250618/0c2a469b4216f8cd570822b642d0a0fe.png"></image>
			<view style="padding:50rpx 0 67rpx">购物车为空</view>
			<view class="no-cart-btn" @click="goIndex">去逛逛</view>
		</view>
		<template v-else>
		<view class="del-all" @click="delAll()">全部删除</view>
		<uni-swipe-action>
			<view class="cart-container" v-for="(item,i) in cartList" :key="i">
				<view class="flex" style="align-items: center;padding: 20rpx;">
					<view class="no-select" v-show="!item.is_seld" @click.stop="changeShopSelect(item,true)"></view>
					<image class="select-img" v-show="item.is_seld" @click.stop="changeShopSelect(item,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
					<view class="shop-name">{{item.shop_name}} <uni-icons type="right" size="12"></uni-icons></view>
					<view style="font-size: 27rpx;color: #7C7C7C;" @click.stop="delCartByShop(item,index)">删除</view>
				</view>
				<uni-swipe-action-item  v-for="(goods,goodsIndex) in item.goods" :key="goodsIndex" >
					<view class="cart-item" :style="{'padding-bottom':goods.product.type=='hotel'?'60rpx':'20rpx'}">
						<view class="flex-between">
							<view class="no-select" v-show="!goods.is_seld" @click.stop="changeGoodsSelect(goods,true)"></view>
							<image class="select-img" v-show="goods.is_seld" @click.stop="changeGoodsSelect(goods,false)" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
							<view class="cart-img" style="position: relative;">
								<image class="cart-img" :src="goods.sku.headimg" mode="aspectFill" @click.stop="gotoDetailByType(goods.product)"></image>
								<view class="use-type">
									{{goods.sku.use_type==1?"自提":goods.sku.use_type==2?"核销":
									goods.sku.use_type==3?"邮寄或自提":"邮寄"}}
								</view>
							</view>
							
						</view>
						
						<view class="cart-content">
							<view>
								<view class="title text-overflow">{{goods.product.title}}</view>
								<view class="sku-name text-overflow">{{goods.sku.sku_name}}</view>
							</view>
							<view class="flex-between">
								<view class="price">{{goods.sku.price/100}}</view>
								<view class="flex-between">
									<view :class="['ctrl',goods.num<=1?'disabled':'']" @click.stop="addBuyNum(goods,-1)">-</view>
									<view style="padding: 0 20rpx;">{{goods.num}}</view>
									<view class="ctrl" @click.stop="addBuyNum(goods,1)">+</view>
								</view>
							</view>
							
						</view>
						
						<view class="time-select" v-if="goods.product.type=='hotel'" @click.stop="changeSelectTime(goods)">
							<view v-if="goods.startDay&&goods.endDay">
								{{goods.startDay}} - {{goods.endDay}}
							</view>
							<view v-else>请选择时间</view>
							>>
						</view>
						
						<view class="off-cover" v-if="goods.sku.flag == 'off'" @click.stop="delItem(goods)">
							<view>商品已失效</view>
							<view class="off-btn">删除</view>
						</view>
					</view>
					<template v-if="goods.sku.flag != 'off'" v-slot:right>
						<view class="cart-item-del" @click.stop="delItem(goods)">
							<uni-icons type="trash" size="16" color="#fff"></uni-icons>
							<view>删除</view>
						</view>
					</template>
				</uni-swipe-action-item>
			
			</view>
		</uni-swipe-action>
		<view style="width: 1rpx;height: 250rpx;"></view>
		
		<view class="bottom-btn">
			<view class="flex" style="align-items: center;">
				<view @click.stop="selectAllData(true)" class="no-select" v-show="!selectAll" style="margin-right: 12rpx;"></view>
				<image @click.stop="selectAllData(false)" class="select-img" v-show="selectAll" style="margin-right: 12rpx;" src="https://static.ticket.sz-trip.com/uploads/20250617/c87afc2e461a01af35c71fb46ef0859d.png"></image>
				<text>全选</text>
				
				<text style="padding-left: 20rpx;">合计</text>
				<text class="price">{{total()}}</text>
			</view>
			<view class="btn" @click.stop="goOrder()">去下单</view>
		</view>
		 
		</template>
		 
		<CustomTabBar :currentTab="3" />
		
		<uni-popup ref="calendarPopup" type="bottom">
			<view style="width: 100vw;height: 60vh;" v-if="selectDate.show">
				<SelectCalendar :startDate="selectDate.startDay" :endDate="selectDate.endDay" @changeHotelDate="judgeHotelTime"></SelectCalendar>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import SelectCalendar from '@/components/selectCalendarCom.vue';
	import CustomTabBar from '@/components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar,SelectCalendar
		},
		data() {
			return {
				cartList: [],
				allPrice: 0,
				selectAll: false,
				
				selectHotel:null, // 选中的酒店
				
				selectDate: {
					startDay:new Date().Format('yyyy-MM-dd'),
					endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'),
					show: false
				},
			}
		},
		onShow() {
			this.$store.commit("changeTechanOrderList", []);
			this.$store.commit("changeTicketOrderList", []);
			this.$store.commit("changeFoodOrderList", []);
			this.$store.commit("changeHotelOrderList", []);
			this.getList()
		},
		methods: {
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getList () {
				this.Post({},"/api/cart/get_list").then(res=>{
					let resData = (res.data ||[])
					// let resData = (res.data ||[]).map(v=>{
					// 	return {
					// 		id: 1,
					// 		name: '1',
					// 		goods: [v]
					// 	}
					// })
					
					let shopSelectIds = []
					let skuSelectIds = [] // skus 酒店要赋值时间
					let skus = [] // skus  skus 酒店要赋值时间
					this.cartList.forEach(v=>{
						if (v.is_seld) {shopSelectIds.push(v.id)}
						v.goods.forEach(x=>{
							if(x.is_seld) {skuSelectIds.push(x.sku_id)}
							if (x.product.type == 'hotel') {
								skus.push(x)
							}
						})
					})
					
					resData.forEach(v=>{
						v.is_seld = shopSelectIds.includes(v.id)

						v.goods.forEach(x=>{
							x.is_seld = skuSelectIds.includes(x.sku_id)
							if (x.product&& x.product.type == 'hotel') {
								let xData = skus.find(s=>s.sku_id == x.sku_id) 
								if (xData) {
									x.startDay = xData.startDay
									x.endDay = xData.endDay
									x.differDays = xData.differDays
									x.sku.price = xData.sku.price
								}
								
							}
						})
					})
					this.cartList = resData
					this.judgeSelectAll()
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			// 单个增加/减少
			addBuyNum(item,num,index){
				console.log(item)
				if (num == -1 && item.num == 1) {
					return // 单独走删除
					this.delItem(item)
				} else {
					let numData = item.num + num
					this.Post({id: item.id, num: numData},'/api/cart/update_sku').then(res =>{
						item.num += num
					})
				}
			},
			// 单个删除
			delItem(item){
				this.Post({id: item.id},'/api/cart/del_sku').then(res =>{
					// this.cartData.splice(index,1)
					this.getList()
				})
				
			},
			// 把店铺下的所有商品删除
			delCartByShop (item, index) {
				let goods = item.goods.map(v=>v.id)
				this.Post({id: goods.join(',')},'/api/cart/del_sku').then(res =>{
					this.getList()
				})
			},
			// 删除全部
			delAll () {
				let goods = []
				this.cartList.forEach(v=>{
					v.goods.forEach(x=>{goods.push(x.id)})
				})
				this.Post({id: goods.join(',')},'/api/cart/del_sku').then(res =>{
					this.getList()
				})
			},
			
			// 全选
			selectAllData (flag) {
				this.selectAll = flag
				if (flag) {
					this.cartList.forEach(t=>{
						t.goods.forEach(v=>{
							if (v && v.product &&v.sku) {
								if (v.sku.flag== "off") {
									v.is_seld = false
								} else {
									if (v.product.type == 'hotel'&&(!v.startDay||!v.endDay)) {
										v.is_seld = false
									} else {
										v.is_seld = true
									}
								}
							}
						})
					})
				} else {
					this.cartList.forEach(v=>{
						v.is_seld = false
					})
				}
				this.judgeSelectAll()
			},
			// 店铺选中
			changeShopSelect(item, flag) {
				if (flag) {
					item.goods.forEach(v=>{
						if (v.sku.flag== "off") {
							v.is_seld = false
						} else {
							if (v.product.type == 'hotel'&&(!v.startDay||!v.endDay)) {
								v.is_seld = false
							} else {
								v.is_seld = true
							}
						}
					})
					item.is_seld = true
				} else {
					item.goods.forEach(v=>{
						v.is_seld = false
					})
					item.is_seld = false
				}
				this.judgeSelectAll()
			},
			// 单个选中
			changeGoodsSelect(item,flag) {
				if (flag) {
					if (item.sku.flag== "off") {
						item.is_seld = false
					} else {
						if (item.product.type == 'hotel'&&(!item.startDay||!item.endDay)) {
							item.is_seld = false
							uni.showToast({
								title:'酒店产品需要选择时间',
								icon:'none'
							})
						} else {
							item.is_seld = true
						}
					}
				} else {
					item.is_seld = false
				}
				this.judgeSelectAll()
			},
			// 判断全选
			judgeSelectAll () {
				this.cartList.forEach(v=>{
					if (v.goods.some(x=>x.sku.flag != 'off')) {
					
						if(v.goods.some(x=>x.sku&& x.sku.flag!= "off"&&!x.is_seld)) {
							v.is_seld = false;
						} else {
							v.is_seld = true;
						}
					} else {
						v.is_seld = false
					}
				})
				
				if (this.cartList.every(v=>v.is_seld) && this.cartList.length>0) {
					this.selectAll = true
				} else {
					this.selectAll = false
				}
				
			},
			
			// 酒店选择时间
			changeSelectTime (item) {
				this.selectDate.show = false
				this.selectHotel = item
				if (item.startDay && item.endDay) {
					this.selectDate.startDay = item.startDay
					this.selectDate.endDay = item.endDay
				} else {
					this.selectDate.startDay = new Date().Format('yyyy-MM-dd')
					this.selectDate.endDay = new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd')
				}
				
				setTimeout(()=>{
					this.selectDate.show = true
					this.$refs.calendarPopup.open();
				},200)
			},
			
			judgeHotelTime (data) {
				if(!data) {
					this.$refs.calendarPopup.close();
					return
				}
				// this.$set(this.selectHotel, "startDay", data.startDay)
				// this.$set(this.selectHotel, "endDay", data.endDay)
				// this.$set(this.selectHotel, "differDays", data.differDays)
				// this.$refs.calendarPopup.close();
				// return
				this.Post({
					sku_id: this.selectHotel.sku_id,
					start_date: data.startDay,
					end_date: data.endDay
				}, "/api/product/product_date_buy").then(res=>{
					if (res.data === false) {
						uni.showToast({
							title:'当前时间不可预定',
							icon:"none"
						})
					} else {
						this.$set(this.selectHotel, "startDay", data.startDay)
						this.$set(this.selectHotel, "endDay", data.endDay)
						this.$set(this.selectHotel, "differDays", data.differDays)
						this.selectHotel.sku.price = res.data
						this.$refs.calendarPopup.close();
					}
				})
			},
			
			// 去下单
			goOrder () {
				let buyGoods = []
				this.cartList.forEach(v=>{
					v.goods.forEach(x=>{
						if(x.is_seld) {
							buyGoods.push(x)
						}
					})
				})
				if (buyGoods.length<=0) {
					uni.showToast({
						title: '请选择要购买的产品',
						icon: 'none'
					})
					return
				}
				
				let ticketOrderList = [] // 门票类下单
		        let foodOrderList = [] // 农家烟火下单
		        let techanOrderList = [] // 邮寄自提下单
				let hotelOrderList = [] // 酒店下单
				
				buyGoods.forEach(v=>{
					if (v.product.is_package == 1) {
						foodOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "ticket") {
						ticketOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "post") {
						techanOrderList.push({
							pInfo: v.product,
							sInfo: {...v.sku, buyNum: v.num}
						})
					} else if (v.product.type == "hotel") {
						console.log(v)
						v.sku.selectDate = {
							startDay: v.startDay,
							endDay: v.endDay,
							differDays: v.differDays
						}
						v.sku.buyNum = v.num
						v.sku.product_title = v.product.title
						v.allSeldDate = []
						hotelOrderList.push({
							skuInfo: v.sku,
						})
					}
				})
				
				// 数据储存 todo
				this.$store.commit("changeTechanOrderList", techanOrderList);
				this.$store.commit("changeTicketOrderList", ticketOrderList);
				this.$store.commit("changeFoodOrderList", foodOrderList);
				this.$store.commit("changeHotelOrderList", hotelOrderList);
				uni.setStorageSync('hotelOrderInfo', JSON.stringify(hotelOrderList))
				// uni.setStorageSync('techanOrderList', techanOrderList)
				// 邮寄 > 门票 > 农家乐 > 酒店
				this.goCartNextPage(0)
				
			},
			
			total () {
				let price = 0
				this.cartList.forEach(v=>{
					v.goods.forEach(x=>{
						if (x.is_seld) {
							price+= x.sku.price * x.num
						}
					})
				})
				
				return  price /100
			},
		},
		onReachBottom() {
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		min-height: 100vh;
		padding: 26rpx 26rpx 0;
	}
	.cart-container{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 26rpx;
		padding-bottom: 20rpx;
		.shop-name{
			font-weight: 500;
			font-size: 35rpx;
			color: #000000;
			flex: 1;
			width: 1rpx;
			line-height: 57rpx;
			padding-right: 24rpx;
		}
	}
	.no-select{
		width: 37rpx;
		height: 37rpx;
		border-radius: 50%;
		border: 1px solid #666666;
		flex-shrink: 0;
		margin-right: 24rpx;
	}
	.select-img{
		width: 37rpx;
		height: 37rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.cart-item{
		display: flex;
		align-items: flex-start;
		position: relative;
		padding: 20rpx;
		.cart-img{
			width: 173rpx;
			height: 173rpx;
			border-radius: 13rpx;
			flex-shrink: 0;
			.use-type{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				border-radius: 0rpx 0rpx 13rpx 13rpx;
				height: 33rpx;
				background: rgba(0,0,0,0.3);
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 33rpx;
			}
		}
		.cart-content{
			flex: 1;
			min-height: 173rpx;
			padding-left: 20rpx;
			width: 1rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.title{
			font-weight: normal;
			font-size: 31rpx;
			color: #000000;
		}
		.sku-name{
			font-weight: 500;
			font-size: 27rpx;
			color: #7C7C7C;
		}
		.price{
			font-size: 37rpx;
			font-weight: 500;
			color: #C3282E;
			&::before{
				content: '￥';
				font-size: 27rpx;
			}
		}
		.ctrl{
			width: 47rpx;
			height: 47rpx;
			background: #6A8A27;
			border-radius: 50%;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 47rpx;
			&.disabled{
				background: #E8E8E8;
				color: #999999;
			}
		}
	}
	
	.off-cover{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.off-btn{
			width: 67rpx;
			height: 67rpx;
			background: #FFFFFF;
			border-radius: 50%;
			font-weight: 400;
			font-size: 27rpx;
			color: #000000;
			text-align: center;
			line-height: 67rpx;
			margin-left: 18rpx;
		}
	}
	
	.cart-item-del{
		width: 80rpx;
		height: 100%;
		background: #FF0505;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: normal;
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 10rpx;
	}
	
	.bottom-btn{
		width: 100%;
		height: 125rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		position: fixed;
		justify-content: space-between;
		padding:0 26rpx;
		bottom: 133rpx;
		left: 0;
		z-index: 50;
		border-bottom: 1px solid #F7F7F7;
		font-weight: 400;
		font-size: 28rpx;
		color: #393B3E;
		.price{
			font-size: 44rpx;
			font-weight: 500;
			color: #C3282E;
			padding-left: 33rpx;
			line-height: 0;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		.btn{
			width: 300rpx;
			height: 80rpx;
			background: #6A8A27;
			border-radius: 13rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
	}
	.time-select{
		height: 43rpx;
		background: rgba(106,138,39,0.2);
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 27rpx;
		color: #6A8A27;
		text-align: center;
		line-height: 43rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
		position: absolute;
		bottom: 0;
		right: 20rpx;
	}
	.del-all{
		font-weight: normal;
		font-size: 32rpx;
		color: #000000;
		text-align: right;
		padding-bottom: 25rpx;
	}
	.no-cart{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
		padding-top: 90rpx;
		image{
			width: 347.33rpx;
			height: 320.67rpx;
		}
		.no-cart-btn{
			width: 167rpx;
			height: 62rpx;
			border-radius: 11rpx;
			border: 1px solid #6A8A27;
			font-weight: 400;
			font-size: 24rpx;
			color: #6A8A27;
			text-align: center;
			line-height: 62rpx;
		}
	}
</style>