Kroytz/yshop-drink
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 点单页的购物车

Browse Source
This commit is contained in:
Kroytz committed 2026-07-31 15:01:53 +08:00
1 parent dc57b10d37
commit 5b766619e3
1 file changed
+175 -86
Download Patch File Download Diff File Expand all files Collapse all files
yshop-drink-uniapp-vue3/pages/menu/menu.vue
+175 -86
View File
@@ -127,11 +127,11 @@
<!-- goods list end --> <!-- goods list end -->
</view> </view>
<!-- content end --> <!-- content end -->
<!-- 购物车栏 begin --> <!-- 购物车栏 begin：弹层打开时隐藏，避免与弹层结算栏叠层 -->
<view <view
class="cart-box" class="cart-box"
:class="{ 'cart-box--with-tip': !!deliveryTipText }" :class="{ 'cart-box--with-tip': !!deliveryTipText }"
v-if="showCartBox" v-if="showCartBox && !cartPopupVisible"
> >
<view class="mark"> <view class="mark">
<image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image> <image src="/static/images/menu/cart.png" class="cart-img" @tap="openCartPopup"></image>
@@ -210,22 +210,30 @@
</view> </view>
</modal> </modal>
<!-- 商品详情模态框 end --> <!-- 商品详情模态框 end -->
<!-- 购物车详情popup --> <!-- 购物车详情popup：点单页有原生 tabBar，底部安全区已由 tabBar 占用，关闭 uv-safe-bottom 避免结算栏下多一块空白 -->
<uv-popup ref="popup" mode="bottom" class="cart-popup"> <uv-popup
ref="popup"
mode="bottom"
:zIndex="10080"
:safeAreaInsetBottom="false"
round="24"
bgColor="#ffffff"
@change="onCartPopupChange"
>
<template #default> <template #default>
<view class="cart-popup"> <view class="cart-popup">
<view class="top"> <view class="top">
<text @tap="handleCartClear">清空</text> <text class="top__title">已选商品（{{ getCartGoodsNumber }}）</text>
<text class="top__clear" @tap="handleCartClear">清空</text>
</view> </view>
<scroll-view class="cart-list" scroll-y> <scroll-view class="cart-list" scroll-y>
<view class="wrapper"> <view class="wrapper">
<view class="item" v-for="(item, index) in cart" :key="index"> <view class="item" v-for="(item, index) in cart" :key="`${item.id}-${item.valueStr}-${index}`">
<image v-if="item.image" class="thumb" :src="item.image" mode="aspectFill"></image>
<view class="left"> <view class="left">
<view class="name">{{ item.name }}</view> <view class="name">{{ item.name }}</view>
<view class="props">{{ item.valueStr }}</view> <view class="props" v-if="item.valueStr">{{ item.valueStr }}</view>
</view> <view class="unit-price">￥{{ item.price }}</view>
<view class="center">
<text>￥{{ item.price }}</text>
</view> </view>
<view class="right"> <view class="right">
<button type="default" plain class="btn" hover-class="none" <button type="default" plain class="btn" hover-class="none"
@@ -239,7 +247,6 @@
</button> </button>
</view> </view>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<!-- 结算栏 --> <!-- 结算栏 -->
@@ -254,20 +261,23 @@
<text class="value" v-if="cartDeliveryFee > 0">￥{{ cartDeliveryFee.toFixed(2) }}</text> <text class="value" v-if="cartDeliveryFee > 0">￥{{ cartDeliveryFee.toFixed(2) }}</text>
<text class="value free" v-else>免配送费</text> <text class="value free" v-else>免配送费</text>
</view> </view>
<view class="row total">
<text class="label">应付总额</text>
<text class="value">￥{{ cartTotalWithDelivery }}</text>
</view>
<view class="tip" v-if="deliveryTipText">{{ deliveryTipText }}</view> <view class="tip" v-if="deliveryTipText">{{ deliveryTipText }}</view>
</view> </view>
<button <view class="checkout-row">
type="primary" <view class="checkout-total">
class="checkout-btn" <text class="checkout-total__label">应付</text>
:disabled="disabledPay" <text class="checkout-total__yen">￥</text>
@tap="onCartPayTap" <text class="checkout-total__value">{{ cartTotalWithDelivery }}</text>
> </view>
{{ cartPayBtnText }} <button
</button> type="primary"
class="checkout-btn"
:disabled="disabledPay"
@tap="onCartPayTap"
>
{{ cartPayBtnText }}
</button>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -339,22 +349,18 @@ let deliveryFeeReqId = 0
const measureMenuLayout = () => { const measureMenuLayout = () => {
} }
const goodCartNum = computed(() => { //计算单个饮品添加到购物车的数量 // 一次遍历生成角标映射，避免列表里每个商品反复 reduce
return (id) => cart.value.reduce((acc, cur) => { const cartNumMaps = computed(() => {
if (cur.id === id) { const byGood = Object.create(null)
return acc += cur.number const byCate = Object.create(null)
} for (const item of cart.value) {
return acc byGood[item.id] = (byGood[item.id] || 0) + item.number
}, 0) byCate[item.cate_id] = (byCate[item.cate_id] || 0) + item.number
}) }
const menuCartNum = computed(() =>{ return { byGood, byCate }
return (id) => cart.value.reduce((acc, cur) => {
if (cur.cate_id === id) {
return acc += cur.number
}
return acc
}, 0)
}) })
const goodCartNum = computed(() => (id) => cartNumMaps.value.byGood[id] || 0)
const menuCartNum = computed(() => (id) => cartNumMaps.value.byCate[id] || 0)
const getCartGoodsNumber = computed(() => { //计算购物车总数 const getCartGoodsNumber = computed(() => { //计算购物车总数
return cart.value.reduce((acc, cur) => acc + cur.number, 0) return cart.value.reduce((acc, cur) => acc + cur.number, 0)
}) })
@@ -363,12 +369,15 @@ const getCartGoodsPrice = computed(() =>{ //计算购物车总价
return parseFloat(price).toFixed(2); return parseFloat(price).toFixed(2);
}) })
const disabledPay = computed(() => { //是否达到起送价 const disabledPay = computed(() => { //是否达到起送价
return orderType.value == 'takeout' && (getCartGoodsPrice < parseFloat(store.value.minPrice)) ? true : const amount = parseFloat(getCartGoodsPrice.value) || 0
false const minPrice = parseFloat(store.value?.minPrice) || 0
return orderType.value == 'takeout' && minPrice > 0 && amount < minPrice
}) })
const spread = computed(() => { //差多少元起送 const spread = computed(() => { //差多少元起送
if (orderType.value != 'takeout') return if (orderType.value != 'takeout') return 0
return parseFloat((store.value.minPrice - getCartGoodsPrice).toFixed(2)) const amount = parseFloat(getCartGoodsPrice.value) || 0
const minPrice = parseFloat(store.value?.minPrice) || 0
return parseFloat(Math.max(0, minPrice - amount).toFixed(2))
}) })
const freeDeliveryAmount = computed(() => parseFloat(store.value?.freeDeliveryAmount) || 0) const freeDeliveryAmount = computed(() => parseFloat(store.value?.freeDeliveryAmount) || 0)
const lowestDeliveryFee = computed(() => { const lowestDeliveryFee = computed(() => {
@@ -625,17 +634,20 @@ const refreshCart = () =>{
let newCart = uni.getStorageSync('cart') || []; let newCart = uni.getStorageSync('cart') || [];
let tmpCart = []; let tmpCart = [];
if (newCart) { if (newCart) {
for (let i in newCart) { const goodsIdSet = new Set()
for (let ii in newGoods) { for (const cate of newGoods) {
for (let iii in newGoods[ii].goodsList) { for (const g of (cate.goodsList || [])) {
if (newCart[i].id == newGoods[ii].goodsList[iii].id) { goodsIdSet.add(g.id)
tmpCart.push(newCart[i]);
}
}
} }
} }
for (const item of newCart) {
if (goodsIdSet.has(item.id)) tmpCart.push(item)
}
cart.value = tmpCart; cart.value = tmpCart;
cartPopupVisible.value = false; if (!tmpCart.length && cartPopupVisible.value) {
cartPopupVisible.value = false
popup.value?.close?.()
}
} }
} }
refreshMenuDeliveryFee() refreshMenuDeliveryFee()
@@ -893,11 +905,15 @@ const handleAddToCartInModal = () => {
handleAddToCart(category.value, good.value, good.value.number) handleAddToCart(category.value, good.value, good.value.number)
closeGoodDetailModal() closeGoodDetailModal()
} }
const openCartPopup = () => { //打开/关闭购物车列表popup const openCartPopup = () => { //打开购物车列表popup
isCartShow.value = true isCartShow.value = true
if (!cart.value.length) return if (!cart.value.length) return
cartPopupVisible.value = true
popup.value.open() popup.value.open()
} }
const onCartPopupChange = (e) => {
cartPopupVisible.value = !!e?.show
}
const handleCartClear = () => { //清空购物车 const handleCartClear = () => { //清空购物车
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@@ -907,8 +923,9 @@ const handleCartClear = () => { //清空购物车
}) => { }) => {
if (confirm) { if (confirm) {
popup.value.close() popup.value.close()
cartPopupVisible.value = false
cart.value = [] cart.value = []
uni.setStorageSync('cart', JSON.parse(JSON.stringify(cart.value))) uni.setStorageSync('cart', [])
} }
} }
}) })
@@ -1592,7 +1609,7 @@ page {
/* #endif */ /* #endif */
left: $spacing-row-lg; left: $spacing-row-lg;
right: $spacing-row-lg; right: $spacing-row-lg;
z-index: 9999; z-index: 999;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -1676,12 +1693,29 @@ page {
} }
.cart-popup { .cart-popup {
overflow: hidden;
border-radius: 24rpx 24rpx 0 0;
background: #fff;
.top { .top {
padding: $menu-gap-sm $spacing-row-lg; display: flex;
align-items: center;
justify-content: space-between;
padding: 28rpx $spacing-row-lg 20rpx;
font-size: $font-size-sm; font-size: $font-size-sm;
text-align: right;
color: $menu-secondary-color; color: $menu-secondary-color;
background-color: $bg-color-primary; background-color: #fffaf5;
&__title {
font-size: 28rpx;
font-weight: 700;
color: #2b201a;
}
&__clear {
padding: 8rpx 0 8rpx 24rpx;
color: #a8907a;
}
} }
.cart-list { .cart-list {
@@ -1694,7 +1728,6 @@ page {
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%;
padding: 0 $spacing-row-lg; padding: 0 $spacing-row-lg;
margin-bottom: $menu-gap-base; margin-bottom: $menu-gap-base;
@@ -1702,38 +1735,53 @@ page {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
padding: $spacing-row-lg 0; padding: $spacing-row-lg 0;
@include list-divider; @include list-divider;
.thumb {
flex: 0 0 96rpx;
width: 96rpx;
height: 96rpx;
margin-right: 20rpx;
border-radius: 16rpx;
background: #fff5eb;
}
.left { .left {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
margin-right: $spacing-row-lg; margin-right: $spacing-row-lg;
overflow: hidden; overflow: hidden;
.name { .name {
font-size: $font-size-sm; font-size: 28rpx;
font-weight: 600;
color: $text-color-base; color: $text-color-base;
@include text-ellipsis;
} }
.props { .props {
margin-top: 4rpx;
font-size: $font-size-sm; font-size: $font-size-sm;
color: $text-color-assist; color: $text-color-assist;
@include text-ellipsis; @include text-ellipsis;
} }
}
.center { .unit-price {
margin-right: $menu-cart-price-offset; margin-top: 8rpx;
font-size: $font-size-base; font-size: 28rpx;
font-weight: 700;
color: #ff6817;
}
} }
.right { .right {
flex: 0 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
@include quantity-control(var(--menu-control-size)); @include quantity-control(var(--menu-control-size));
.btn { .btn {
@@ -1746,38 +1794,27 @@ page {
.cart-footer { .cart-footer {
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between;
padding: $menu-gap-base $spacing-row-lg; padding: $menu-gap-base $spacing-row-lg;
background-color: $text-color-white; background-color: $text-color-white;
border-top: 1rpx solid $border-color; border-top: 1rpx solid #f0ebe6;
box-shadow: 0 -8rpx 24rpx rgba(91, 61, 32, 0.06);
.summary { .summary {
flex: 1; width: 100%;
min-width: 0; margin-bottom: 16rpx;
margin-right: $spacing-row-lg;
.row { .row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: 1.5; line-height: 1.6;
color: $text-color-base; color: $text-color-base;
.value.free { .value.free {
color: $color-primary; color: $color-primary;
} }
&.total {
margin-top: 4rpx;
font-weight: 700;
.value {
font-size: 32rpx;
color: $color-primary;
}
}
} }
.tip { .tip {
@@ -1788,13 +1825,51 @@ page {
} }
} }
.checkout-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20rpx;
}
.checkout-total {
display: flex;
align-items: baseline;
min-width: 0;
&__label {
margin-right: 8rpx;
font-size: 24rpx;
color: #7c756e;
}
&__yen {
font-size: 26rpx;
font-weight: 700;
color: #ff6817;
}
&__value {
font-size: 40rpx;
font-weight: 700;
line-height: 1;
color: #ff6817;
}
}
.checkout-btn { .checkout-btn {
flex: 0 0 auto; flex: 0 0 auto;
height: 72rpx; height: 80rpx;
padding: 0 48rpx; padding: 0 48rpx;
font-size: $font-size-base; font-size: $font-size-base;
line-height: 72rpx; line-height: 80rpx;
border-radius: 36rpx; border-radius: 40rpx;
background: linear-gradient(90deg, #ff9b20, #ff6817);
border: none;
&[disabled] {
opacity: 0.55;
}
} }
} }
} }
@@ -1859,7 +1934,17 @@ page {
.goods .wrapper .list .category .items .good .right .name { font-size: 31rpx; font-weight: 700; } .goods .wrapper .list .category .items .good .right .name { font-size: 31rpx; font-weight: 700; }
.goods .wrapper .list .category .items .good .right .price_and_action .price { font-size: 36rpx; color: #ff6817; } .goods .wrapper .list .category .items .good .right .price_and_action .price { font-size: 36rpx; color: #ff6817; }
.goods .wrapper .list .category .items .good .right .price_and_action .btn-group .btn.property_btn { height: 56rpx; padding: 0 18rpx; line-height: 56rpx; border-radius: 28rpx; background: #ff7417; } .goods .wrapper .list .category .items .good .right .price_and_action .btn-group .btn.property_btn { height: 56rpx; padding: 0 18rpx; line-height: 56rpx; border-radius: 28rpx; background: #ff7417; }
.cart-box { bottom: 28rpx; min-height: 116rpx; height: auto; border-radius: 58rpx; box-shadow: 0 8rpx 28rpx rgba(91, 61, 32, .16); } .cart-box {
bottom: 28rpx;
/* #ifdef H5 */
/* 贴在 tabBar 上方，只保留 28rpx 间距，勿再叠加 safe-area */
bottom: calc(var(--window-bottom, 0px) + 28rpx);
/* #endif */
min-height: 116rpx;
height: auto;
border-radius: 58rpx;
box-shadow: 0 8rpx 28rpx rgba(91, 61, 32, .16);
}
.cart-box .cart-img { width: 116rpx; height: 116rpx; } .cart-box .cart-img { width: 116rpx; height: 116rpx; }
.cart-box .pay-btn { padding: 0 46rpx; border-radius: 58rpx; background: linear-gradient(90deg, #ff9b20, #ff6817); } .cart-box .pay-btn { padding: 0 46rpx; border-radius: 58rpx; background: linear-gradient(90deg, #ff9b20, #ff6817); }
.cart-box .price__tip { color: #b08968; } .cart-box .price__tip { color: #b08968; }
@@ -1912,4 +1997,8 @@ page {
.cart-popup .right .btn[type='default'] { color: #ff7417; border-color: #ff7417; } .cart-popup .right .btn[type='default'] { color: #ff7417; border-color: #ff7417; }
.cart-popup .right .btn[type='primary'] { background: #ff7417; } .cart-popup .right .btn[type='primary'] { background: #ff7417; }
.cart-popup .checkout-btn[type='primary'] {
background: linear-gradient(90deg, #ff9b20, #ff6817);
border-color: transparent;
}
</style> </style>