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.
372 lines
9.9 KiB
372 lines
9.9 KiB
<template>
|
|
<view class="page">
|
|
<!-- 白色字体 -->
|
|
<navbar title="购物车" color="#fff" />
|
|
|
|
<!-- 悬浮管理按钮 -->
|
|
<view class="float-manage-btn" @tap="isManaged = !isManaged" v-if="cartList && cartList.length">
|
|
<text>{{ isManaged ? '完成' : '管理' }}</text>
|
|
</view>
|
|
|
|
<view class="cart-items">
|
|
<uv-checkbox-group shape="circle" v-model="checkboxValue">
|
|
<view v-for="(item, index) in cartList" :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="!cartList || !cartList.length" text="购物车空空如也~" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="cart-footer" v-if="cartList && cartList.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 mixinsList from '@/mixins/list.js'
|
|
import { mapMutations } from 'vuex'
|
|
|
|
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
tabber,
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
cartData: {
|
|
records: []
|
|
},
|
|
cartList: [],
|
|
mixinsListKey: 'cartList',
|
|
mixinsListApi: 'queryShopcarList',
|
|
checkboxValue: [],
|
|
isManaged: false,
|
|
}
|
|
},
|
|
computed: {
|
|
allSelected() {
|
|
return this.cartList.every(item => this.checkboxValue.includes(item.id))
|
|
},
|
|
// 全选的值
|
|
allCheckbox(){
|
|
return this.allSelected ? ['all'] : []
|
|
},
|
|
totalPrice(){
|
|
return this.cartList.reduce((total, item) => {
|
|
if (this.checkboxValue.includes(item.id)){
|
|
total += item.goods.price * item.num
|
|
}
|
|
return total
|
|
}, 0)
|
|
},
|
|
deleteCartIds(){
|
|
return this.checkboxValue.join(';')
|
|
}
|
|
},
|
|
methods: {
|
|
...mapMutations(['setCartData']),
|
|
// 增加或者减少数量
|
|
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.cartList.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.cartList.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.getData()
|
|
this.checkboxValue = []
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// onShow(){
|
|
// this.getData()
|
|
// }
|
|
}
|
|
</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>
|