teambuy-front/pages/index/cart.vue

<template>
	<view class="page">
		<navbar></navbar>
		<text class="control-text" @tap="isManaged = !isManaged">{{ isManaged ? '退出管理' : '管理' }}</text>

		<view class="cart-items">
			<uv-checkbox-group shape="circle" v-model="checkboxValue" @change="toggleSelect">
				<view v-for="(item, index) in cartData.items" :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.image" mode="aspectFill" />
						<view class="food-info">
							<text class="food-name">{{ item.name }}</text>
							<view class="food-sold">
								<uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
								<text>已售出 {{ item.sold }}单</text>
							</view>
							<view class="food-price-row">
								<text class="food-price">
									<text style="font-size: 22rpx; margin-right: 6rpx;">¥</text>
									{{ item.price.toFixed(1) }}
								</text>
								<view class="number-box">
									<view class="number-btn minus" @tap="decreaseQuantity(item)">
										<text>-</text>
									</view>
									<text class="number-value">{{ item.quantity }}</text>
									<view class="number-btn plus" @tap="increaseQuantity(item)">
										<text>+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uv-checkbox-group>
			<uv-empty mode="car" style="padding-top: 300rpx;" v-if="!cartData.items.length"
				text="购物车空空如也~" />
		</view>

		<view class="cart-footer">
			<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;">已选{{ cartData.selectedCount }}个，</text>
				<text v-if="!isManaged">合计</text>
				<text v-if="!isManaged" class="total-price">¥{{ (cartData.totalPrice).toFixed(1) }}</text>

				<view v-if="isManaged" class="checkout-btn checkbox-collect" @tap="addCollect">
					<text>添加收藏</text>
				</view>
			</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 { mockCartData } from '@/static/js/mockCartData.js'
import navbar from '@/components/base/navbar.vue'

export default {
    components: {
        tabber,
        navbar
    },
    data() {
        return {
            cartData: mockCartData,
			checkboxValue: [],
			isManaged: false
        }
    },
    computed: {
        allSelected() {
			return this.cartData.items.every(item => this.checkboxValue.includes(item.id))
        },
		// 全选的值
		allCheckbox(){
			return this.allSelected ? ['all'] : []
		}
    },
    methods: {
		// 获取购物车数据
		getCartData(){
			this.$api('queryShopcarList', {}, res => {
				if (res.code == 200){
					console.log(res);
				}
			})
		},
        toggleSelect(item) {
            this.updateCart();
        },
        toggleSelectAll() {
			if (this.allSelected){		
				this.checkboxValue = []
			}else{
				this.checkboxValue = this.cartData.items.map(item => item.id)
			}
            this.updateCart();
        },
        increaseQuantity(item) {
            item.quantity += 1;
            this.updateCart();
        },
        decreaseQuantity(item) {
            if (item.quantity > 1) {
                item.quantity -= 1;
                this.updateCart();
            }
        },
        updateCart() {
			// 计算选中的商品数量
            this.cartData.selectedCount = this.checkboxValue.length;            
            // 计算总价
			this.cartData.totalPrice = this.cartData.items.reduce((total, item) => {
				if (this.checkboxValue.includes(item.id)){
					total += item.price * item.quantity
				}
				return total
			}, 0)
        },
		// 结账
        checkout() {
            // const selectedItems = this.cartData.items.filter(item => item.selected);
            if (this.checkboxValue.length === 0) {
                uni.showToast({
                    title: '请选择商品',
                    icon: 'none'
                });
                return;
            }
            
            // 跳转到创建订单页面
            uni.navigateTo({
                url: '/pages_order/order/newOrderDetail?status=pending'
            });
        },
		// 添加收藏
		addCollect(){
			if (!this.checkboxValue.length) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				});
				return;
			}
			uni.showLoading({
				title: '添加收藏中...'
			})
			setTimeout(() => {	
				uni.hideLoading()
				uni.showToast({
					title: '添加收藏成功',
				})
				// 编写收藏函数的调用
			}, 800)
		},
		// 删除购物车
		deleteCart(){
			if (!this.checkboxValue.length) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				});
				
				return;
			}
			uni.showLoading({
				title: '删除中...'
			})
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '删除成功',
				})
				this.cartData.items = this.cartData.items.filter(item => !this.checkboxValue.includes(item.id))
				this.checkboxValue = []
				this.updateCart()
				// 编写删除函数的调用
			}, 800)
		}
    },
	onLoad(){
		this.getCartData()
	}
}
</script>

<style lang="scss" scoped>
.page {
    // background-color: #f5f5f5;
    // padding-bottom: 120rpx;
	// background-color: red;
    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;
			// background-color: red;
			.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;
		}
	}
	.control-text{
		position: absolute;
		right: 150rpx;
		top: calc(env(safe-area-inset-bottom) + 60rpx);
		font-size: 26rpx;
		color: #fff;
		z-index: 10000;
	}
}

</style>