You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
354 lines
9.7 KiB
354 lines
9.7 KiB
<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: {
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</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>
|