feat(uniapp): cart也展示结算栏

yshop-drink-uniapp-vue3/pages/menu/menu.vue

@@ -242,6 +242,33 @@
 							
 					  </view>
 					 </scroll-view>
+					 <!-- 结算栏 -->
+					 <view class="cart-footer" v-if="cart.length">
+						<view class="summary">
+							<view class="row">
+								<text class="label">商品合计</text>
+								<text class="value">￥{{ cartGoodsTotal.toFixed(2) }}</text>
+							</view>
+							<view class="row" v-if="orderType == 'takeout'">
+								<text class="label">配送费</text>
+								<text class="value" v-if="cartDeliveryFee > 0">￥{{ cartDeliveryFee.toFixed(2) }}</text>
+								<text class="value free" v-else>免配送费</text>
+							</view>
+							<view class="row total">
+								<text class="label">应付总额</text>
+								<text class="value">￥{{ cartTotalWithDelivery }}</text>
+							</view>
+							<view class="tip" v-if="deliveryTipText">{{ deliveryTipText }}</view>
+						</view>
+						<button
+							type="primary"
+							class="checkout-btn"
+							:disabled="disabledPay"
+							@tap="onCartPayTap"
+						>
+							{{ cartPayBtnText }}
+						</button>
+					 </view>
 				 </view>
 				</template>
 			</uv-popup>
@@ -425,6 +452,20 @@ const deliveryTipText = computed(() => {
 	}
 	return ''
 })
+// 购物车弹窗结算栏：商品合计、配送费、应付总额
+const cartGoodsTotal = computed(() => parseFloat(getCartGoodsPrice.value) || 0)
+const cartDeliveryFee = computed(() => {
+	if (orderType.value !== 'takeout') return 0
+	if (canShowDeliveryTip.value && deliveryTipReady.value) return menuDeliveryFee.value || 0
+	return 0
+})
+const cartTotalWithDelivery = computed(() =>
+	(cartGoodsTotal.value + cartDeliveryFee.value).toFixed(2)
+)
+const cartPayBtnText = computed(() => {
+	if (!cart.value.length) return '去点单'
+	return disabledPay.value ? `差${spread.value}元起送` : '去结算'
+})
 const filteredGoods = computed(() => {
 	const query = keyword.value.trim().toLowerCase()
 	if (!query) return goods.value
@@ -1601,6 +1642,8 @@ page {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		padding-right: $spacing-row-lg;
+		padding-left: $spacing-row-base;
 		color: $text-color-base;
 
 		&__amount {
@@ -1648,7 +1691,7 @@ page {
 			flex-direction: column;
 			height: 100%;
 			padding: 0 $spacing-row-lg;
-			margin-bottom: $menu-cart-list-bottom;
+			margin-bottom: $menu-gap-base;
 
 			.item {
 				position: relative;
@@ -1695,6 +1738,60 @@ page {
 			}
 		}
 	}
+
+	.cart-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: $menu-gap-base $spacing-row-lg;
+		background-color: $text-color-white;
+		border-top: 1rpx solid $border-color;
+
+		.summary {
+			flex: 1;
+			min-width: 0;
+			margin-right: $spacing-row-lg;
+
+			.row {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-size: $font-size-sm;
+				line-height: 1.5;
+				color: $text-color-base;
+
+				.value.free {
+					color: $color-primary;
+				}
+
+				&.total {
+					margin-top: 4rpx;
+					font-weight: 700;
+
+					.value {
+						font-size: 32rpx;
+						color: $color-primary;
+					}
+				}
+			}
+
+			.tip {
+				margin-top: 6rpx;
+				font-size: 20rpx;
+				line-height: 1.3;
+				color: #a8907a;
+			}
+		}
+
+		.checkout-btn {
+			flex: 0 0 auto;
+			height: 72rpx;
+			padding: 0 48rpx;
+			font-size: $font-size-base;
+			line-height: 72rpx;
+			border-radius: 36rpx;
+		}
+	}
 }
 
 // 页面级工具类