teambuy-front/pages/index/cart.vue

<template>
	<view class="page">
		<!-- 白色字体 -->
		<navbar title="购物车" color="#fff" />
		
		<!-- 悬浮管理按钮 -->
		<view class="float-manage-btn" @tap="isManaged = !isManaged" v-if="cartData.records && cartData.records.length">
			<text>{{ isManaged ? '完成' : '管理' }}</text>
		</view>

		<view class="cart-items">
			<uv-checkbox-group shape="circle" v-model="checkboxValue">
				<view v-for="(item, index) in cartData.records" :key="item.id" class="cart-item">
					<view class="checkbox">
						<uv-checkbox :key="index" :name="item.id" size="40rpx" iconSize="35rpx" activeColor="#019245" />
					</view>
					<view class="item-content">
						<image class="food-image" :src="item.goods.image" mode="aspectFill" />
						<view class="food-info">
							<text class="food-name">{{ item.goods.title }}</text>
							<view class="food-sold">
								<uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
								<text>已售出 {{ item.goods.sales }}单</text>
							</view>
							<view class="food-price-row">
								<text class="food-price">
									<text style="font-size: 22rpx; margin-right: 6rpx;">¥</text>
									{{ item.goods.price }}
								</text>
								<view class="number-box">
									<view class="number-btn minus" @tap="decreaseQuantity(item)">
										<text>-</text>
									</view>
									<text class="number-value">{{ item.num }}</text>
									<view class="number-btn plus" @tap="increaseQuantity(item)">
										<text>+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uv-checkbox-group>
			<view style="padding-top: 300rpx;">
				<uv-empty mode="car" v-if="!cartData.records || !cartData.records.length" text="购物车空空如也~" />
			</view>
		</view>

		<view class="cart-footer" v-if="cartData.records && cartData.records.length">
			<view class="select-all">
				<uv-checkbox-group v-model="allCheckbox">
					<uv-checkbox size="40rpx" iconSize="35rpx" activeColor="#019245" shape="circle" name="all"
						@change="toggleSelectAll" />
				</uv-checkbox-group>
				<text>全选</text>
			</view>
			<view class="cart-total">
				<text v-if="!isManaged" style="font-size: 24rpx; color: #999;">已选{{ checkboxValue.length }}个，</text>
				<text v-if="!isManaged">合计</text>
				<text v-if="!isManaged" class="total-price">¥{{ (totalPrice).toFixed(2) }}</text>
			</view>
			<view v-if="!isManaged" class="checkout-btn checkbox-primary" @tap="checkout">
				<text>去下单</text>
			</view>
			<view v-if="isManaged" class="checkout-btn checkbox-primary" @tap="deleteCart">
				<text>删除</text>
			</view>
		</view>
		<tabber select="cart" />
	</view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import navbar from '@/components/base/navbar.vue'
import { mapActions } from 'vuex'

export default {
    components: {
        tabber,
        navbar
    },
    data() {
        return {
            cartData: {
                records: []
            },
			checkboxValue: [],
			isManaged: false,
        }
    },
    computed: {
        allSelected() {
			return this.cartData.records.every(item => this.checkboxValue.includes(item.id))
        },
		// 全选的值
		allCheckbox(){
			return this.allSelected ? ['all'] : []
		},
		totalPrice(){
			return this.cartData.records.reduce((total, item) => {
				if (this.checkboxValue.includes(item.id)){
					total += item.goods.price * item.num
				}
				return total
			}, 0)
		},
		deleteCartIds(){
			return this.checkboxValue.join(',')
		}
    },
    methods: {
		...mapActions(['setCartData']),
		// 获取购物车数据
		getCartData(){
			this.$api('queryShopcarList', {}, res => {
				if (res.code == 200){
					this.cartData = res.result
				}
			})
		},
		// 增加或者减少数量
		modifyCart(item, type){
			this.$api('addShopcar', {
				goodsId: item.goodsId,
				id: item.id,
				num: type,
			}, res => {
				console.log(res);
			})
		},
        toggleSelectAll() {
			if (this.allSelected){		
				this.checkboxValue = []
			}else{
				this.checkboxValue = this.cartData.records.map(item => item.id)
			}
        },
        increaseQuantity(item) {
            item.num += 1;
			this.modifyCart(item, 1)
        },
        decreaseQuantity(item) {
            if (item.num > 1) {
                item.num -= 1;
				this.modifyCart(item, -1)
            }
        },
		// 结账
        checkout() {
            if (this.checkboxValue.length === 0) {
                uni.showToast({
                    title: '请选择商品',
                    icon: 'error'
                });
                return;
            }

			const sendData = this.cartData.records.filter(item => this.checkboxValue.includes(item.id))
            this.$store.commit('setCartData', { sendData, priceAll: this.totalPrice } )
			
            // 跳转到创建订单页面
            this.$utils.navigateTo({
                url: '/pages_order/order/cartOrder'
            });
        },
		// 删除购物车
		deleteCart(){
			if (!this.checkboxValue.length) {
				uni.showToast({
					title: '请选择商品',
					icon: 'error'
				});
				return;
			}
			
			uni.showModal({
				title: '提示',
				content: '确定删除所选商品？',
				confirmColor: '#019245',
				success: (res) => {
					if (res.confirm) {
						this.$api('deleteShopcar', {
							shopcarId: this.deleteCartIds,
						}, res => {
							if (res.code == 200){
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 1000,
								})
								this.getCartData()
								this.checkboxValue = []
							}
						})
					}
				}
			})
		}
    },
	onShow(){
		this.getCartData()
	}
}
</script>

<style lang="scss" scoped>
.page {
    position: relative;
    .cart-items {
        .cart-item {
			width: 100%;
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 10rpx;
            
            .checkbox {
                margin-right: 20rpx;
                display: flex;
                align-items: center;
            }
            
            .item-content {
                flex: 1;
                display: flex;
                
                .food-image {
                    width: 150rpx;
                    height: 150rpx;
                    margin-right: 20rpx;
                }
                
                .food-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
					
                    .food-name {
                        font-size: 28rpx;
                        margin-bottom: 10rpx;
                        font-weight: 500;
                    }
                    
                    .food-sold {
                        display: flex;
                        align-items: center;
                        font-size: 24rpx;
                        color: $uni-color-third;
                        margin-bottom: 10rpx;
                    }
                    
                    .food-price-row {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        
                        .food-price {
                            color: #ff0000;
                            font-size: 32rpx;
                        }
                        
                        .number-box {
                            display: flex;
                            align-items: center;
                            border-radius: 28rpx;
							margin-right: 20rpx;
							contain: content;
							border: 2rpx solid $uni-color-third;
                            .number-btn {
                                width: 50rpx;
                                height: 50rpx;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            
                            .number-value {
                                width: 50rpx;
                                height: 50rpx;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 28rpx;
								border-left: 2rpx solid $uni-color-third;
								border-right: 2rpx solid $uni-color-third;
                            }
                        }
                    }
                }
            }
        }
    }
	.cart-footer {
		position: fixed;
		bottom: calc(120rpx + env(safe-area-inset-bottom));
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20rpx ;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;
		
		.select-all {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			
			text {
				margin-left: 10rpx;
			}
		}
		
		.cart-total {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			margin-right: 20rpx;
			
			.total-price {
				color: $uni-color-second;
				font-size: 32rpx;
				font-weight: bold;
				margin-left: 10rpx;
			}
		}
		
		.checkout-btn {
			width: 200rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 35rpx;
			font-size: 28rpx;
		}
		.checkbox-primary{
			background-color: $uni-color;
			color: #fff;
		}
		.checkbox-collect{
			color: $uni-color;
			background-color: $uni-color-fourth;
		}
	}
	
	/* 悬浮管理按钮 */
	.float-manage-btn {
		position: fixed;
		right: 30rpx;
		top: 200rpx;
		padding: 15rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 40rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		border: 2rpx solid #019245;

		text {
			font-size: 28rpx;
			color: #019245;
			font-weight: 500;
		}
	}
}
</style>