From 4d7032e0bab724adc75c799f49499fa0fe9be477 Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Fri, 15 May 2026 11:10:24 +0800
Subject: [PATCH] 1
---
package1/buyFood/buyFood.vue | 401 ++++++++++++++++++++++++++++++++++-
1 file changed, 396 insertions(+), 5 deletions(-)
diff --git a/package1/buyFood/buyFood.vue b/package1/buyFood/buyFood.vue
index c435c26..153d96a 100644
--- a/package1/buyFood/buyFood.vue
+++ b/package1/buyFood/buyFood.vue
@@ -239,6 +239,25 @@
+
+
+ 用餐方式
+
+
+
+
+
+
+ 堂食
+
+
+
+
+
+ 打包
+
+
+
@@ -423,6 +442,31 @@
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 今日好运爆棚
+ 锦鲤附体
+ 这单居然被你免掉了
+
+ 免单
+ {{freeOrderAmount}}
+ 元
+
+ 开心收下
+ 未支付免单资格会传递给下一个小伙伴
+
+
@@ -452,6 +496,7 @@
groupItem: null,
isGroupBuy: false,
isFaceToFace: false,
+ isPack: 0,
assignedWorker: null,
immediateTimeStr: '',
totalPackageFee: 0,
@@ -460,7 +505,9 @@
createdOrderInfo: null,
isPaymentSuccessGroupInitiate: false,
availableCoupons: [],
- selectedCoupon: null
+ selectedCoupon: null,
+ freeOrderEffectVisible: false,
+ freeOrderAmount: '0.00'
}
},
components: {
@@ -941,6 +988,7 @@
userId: uni.getStorageSync('id') || 'test-user123',
shopId: this.shopItem.id,
deliveryType: deliveryType,
+ isPack: this.isPaotui ? 1 : this.isPack,
packageFee: this.isPaotui ? this.packageFee : 0,
remark: this.remark,
items: items,
@@ -1009,10 +1057,7 @@
this.currentOrderId = orderId;
this.createdOrderInfo = res.result;
if(res.result.isFreeOrder == 1){
- uni.showToast({
- title: '锦鲤附身 免单' + res.result.freeAmount + '元',
- icon: 'none'
- });
+ this.showFreeOrderEffect(res.result);
}
this.$refs.payPopup.open('bottom');
} else {
@@ -1025,6 +1070,20 @@
uni.hideLoading();
});
},
+ showFreeOrderEffect(orderInfo) {
+ let amount = orderInfo && orderInfo.freeAmount != null ? parseFloat(orderInfo.freeAmount) : 0;
+ if (isNaN(amount)) amount = 0;
+ this.freeOrderAmount = amount.toFixed(2);
+ this.freeOrderEffectVisible = true;
+ if (uni.vibrateShort) {
+ uni.vibrateShort({
+ type: 'medium'
+ });
+ }
+ },
+ closeFreeOrderEffect() {
+ this.freeOrderEffectVisible = false;
+ },
//时间选择器获取时间数据
generateDeliveryTimes() {
const now = new Date();
@@ -1635,6 +1694,20 @@
font-weight: 800;
}
+ .pack-options {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ }
+
+ .pack-option {
+ display: flex;
+ align-items: center;
+ color: $primary;
+ font-weight: 800;
+ margin-left: 30rpx;
+ }
+
.remark-box {
flex: 1;
@@ -1935,4 +2008,322 @@
button::after{
border: 0;
}
+
+ .free-order-mask {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:
+ radial-gradient(circle at 20% 18%, rgba(255, 139, 197, 0.34), rgba(255, 139, 197, 0) 280rpx),
+ radial-gradient(circle at 78% 22%, rgba(166, 255, 234, 0.4), rgba(166, 255, 234, 0) 300rpx),
+ radial-gradient(circle at 50% 70%, rgba(255, 243, 178, 0.28), rgba(255, 243, 178, 0) 360rpx),
+ linear-gradient(180deg, rgba(8, 20, 28, 0.62), rgba(18, 22, 34, 0.82));
+ backdrop-filter: blur(10rpx);
+ -webkit-backdrop-filter: blur(10rpx);
+ animation: freeMaskFade 0.22s ease both;
+ }
+
+ .free-order-card {
+ position: relative;
+ width: 630rpx;
+ min-height: 700rpx;
+ padding: 54rpx 42rpx 46rpx;
+ box-sizing: border-box;
+ overflow: hidden;
+ text-align: center;
+ border-radius: 56rpx;
+ background:
+ linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.34)),
+ radial-gradient(circle at 16% 10%, rgba(255, 243, 178, 0.56), rgba(255, 243, 178, 0) 190rpx),
+ radial-gradient(circle at 88% 12%, rgba(255, 139, 197, 0.34), rgba(255, 139, 197, 0) 220rpx),
+ radial-gradient(circle at 50% 100%, rgba(166, 255, 234, 0.48), rgba(166, 255, 234, 0) 320rpx);
+ border: 2rpx solid rgba(255, 255, 255, 0.72);
+ box-shadow: 0 38rpx 110rpx rgba(10, 19, 35, 0.34), inset 0 0 46rpx rgba(255, 255, 255, 0.28);
+ backdrop-filter: blur(24rpx) saturate(1.28);
+ -webkit-backdrop-filter: blur(24rpx) saturate(1.28);
+ animation: freeCardPop 0.56s cubic-bezier(0.18, 1.35, 0.28, 1) both;
+ }
+
+ .free-order-rays {
+ position: absolute;
+ left: 50%;
+ top: -210rpx;
+ width: 680rpx;
+ height: 680rpx;
+ margin-left: -340rpx;
+ border-radius: 50%;
+ background:
+ conic-gradient(from 20deg, rgba(255, 255, 255, 0), rgba(255, 243, 178, 0.36), rgba(166, 255, 234, 0), rgba(255, 139, 197, 0.3), rgba(255, 122, 73, 0.26), rgba(255, 255, 255, 0));
+ opacity: 0.72;
+ filter: blur(1rpx);
+ animation: freeRaysSpin 9s linear infinite;
+ }
+
+ .free-order-orb {
+ position: absolute;
+ z-index: 1;
+ border-radius: 50%;
+ filter: blur(1rpx);
+ animation: orbFloat 4.6s ease-in-out infinite;
+ }
+
+ .orb-1 {
+ width: 150rpx;
+ height: 150rpx;
+ left: -44rpx;
+ top: 180rpx;
+ background: rgba(166, 255, 234, 0.42);
+ }
+
+ .orb-2 {
+ width: 118rpx;
+ height: 118rpx;
+ right: -26rpx;
+ bottom: 190rpx;
+ background: rgba(255, 139, 197, 0.36);
+ animation-delay: 0.8s;
+ }
+
+ .free-order-badge,
+ .free-order-title,
+ .free-order-subtitle,
+ .free-order-amount,
+ .free-order-note,
+ .free-order-btn {
+ position: relative;
+ z-index: 3;
+ }
+
+ .free-order-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 54rpx;
+ padding: 0 30rpx;
+ border-radius: 999rpx;
+ color: #143a36;
+ font-size: 23rpx;
+ font-weight: 900;
+ letter-spacing: 1rpx;
+ background: linear-gradient(100deg, rgba(166, 255, 234, 0.86), rgba(255, 243, 178, 0.9), rgba(255, 183, 218, 0.78));
+ box-shadow: 0 12rpx 30rpx rgba(116, 242, 210, 0.22), inset 0 0 18rpx rgba(255, 255, 255, 0.42);
+ }
+
+ .free-order-title {
+ margin-top: 40rpx;
+ color: #252232;
+ font-size: 76rpx;
+ font-weight: 900;
+ letter-spacing: 5rpx;
+ text-shadow: 0 10rpx 28rpx rgba(255, 132, 189, 0.26);
+ animation: freeTitlePop 1.35s ease-in-out infinite;
+ }
+
+ .free-order-subtitle {
+ margin-top: 12rpx;
+ color: rgba(37, 34, 50, 0.72);
+ font-size: 28rpx;
+ font-weight: 800;
+ }
+
+ .free-order-amount {
+ display: flex;
+ align-items: baseline;
+ justify-content: center;
+ width: 500rpx;
+ text-align: center;
+ height: 170rpx;
+ margin: 50rpx auto 0;
+ padding: 0 30rpx;
+ box-sizing: border-box;
+ border-radius: 46rpx;
+ color: #fff;
+ font-weight: 900;
+ background: linear-gradient(110deg, #ff7a49 0%, #fff0a8 22%, #c8ff5d 45%, #72f7df 68%, #ff8bc5 100%);
+ background-size: 260% 100%;
+ box-shadow: 0 24rpx 58rpx rgba(255, 132, 80, 0.28), 0 0 54rpx rgba(166, 255, 234, 0.24);
+ border: 2rpx solid rgba(255, 255, 255, 0.72);
+ animation: freeAmountAura 2.8s linear infinite, freeAmountBeat 1.35s ease-in-out infinite;
+ }
+
+ .amount-label {
+ margin-right: 28rpx;
+ font-size: 34rpx;
+ letter-spacing: 2rpx;
+ text-shadow: 0 8rpx 18rpx rgba(0, 0, 0, 0.14);
+ }
+
+ .amount-number {
+ font-size: 76rpx;
+ letter-spacing: 1rpx;
+ text-shadow: 0 10rpx 22rpx rgba(0, 0, 0, 0.18);
+ }
+
+ .amount-unit {
+ margin-left: 14rpx;
+ font-size: 30rpx;
+ }
+
+ .free-order-note {
+ margin-top: 30rpx;
+ color: #54706a;
+ font-size: 25rpx;
+ font-weight: 800;
+ line-height: 38rpx;
+ }
+
+ .free-order-btn {
+ width: 380rpx;
+ height: 96rpx;
+ margin: 54rpx auto 0;
+ line-height: 96rpx;
+ border-radius: 999rpx;
+ color: #1e2430;
+ font-size: 32rpx;
+ font-weight: 900;
+ letter-spacing: 2rpx;
+ background: linear-gradient(100deg, #fff1a8 0%, #c9ff64 35%, #85ffe8 72%, #ffc1dd 100%);
+ box-shadow: 0 18rpx 42rpx rgba(125, 255, 228, 0.28), inset 0 0 22rpx rgba(255, 255, 255, 0.42);
+ border: 2rpx solid rgba(255, 255, 255, 0.7);
+ animation: rewardBtnFloat 1.8s ease-in-out infinite;
+ }
+
+ .free-order-confetti {
+ position: absolute;
+ z-index: 1;
+ width: 16rpx;
+ height: 34rpx;
+ border-radius: 8rpx;
+ opacity: 0.86;
+ animation: confettiFloat 4.2s ease-in-out infinite;
+ }
+
+ .confetti-1 {
+ left: 78rpx;
+ top: 128rpx;
+ background: #ff8bc5;
+ }
+
+ .confetti-2 {
+ left: 172rpx;
+ top: 78rpx;
+ background: #85ffe8;
+ animation-delay: 0.4s;
+ }
+
+ .confetti-3 {
+ right: 96rpx;
+ top: 154rpx;
+ background: #fff1a8;
+ animation-delay: 0.8s;
+ }
+
+ .confetti-4 {
+ right: 178rpx;
+ top: 82rpx;
+ background: #ff8a5c;
+ animation-delay: 1.1s;
+ }
+
+ .confetti-5 {
+ left: 300rpx;
+ top: 116rpx;
+ background: #c9ff64;
+ animation-delay: 1.4s;
+ }
+
+ .free-order-star {
+ position: absolute;
+ z-index: 2;
+ width: 16rpx;
+ height: 16rpx;
+ border-radius: 50%;
+ background: #fffdf0;
+ box-shadow: 0 0 26rpx rgba(255, 246, 179, 0.92);
+ animation: starTwinkle 1.8s ease-in-out infinite;
+ }
+
+ .star-1 {
+ left: 120rpx;
+ top: 264rpx;
+ }
+
+ .star-2 {
+ right: 118rpx;
+ top: 236rpx;
+ animation-delay: 0.44s;
+ }
+
+ .star-3 {
+ left: 442rpx;
+ bottom: 190rpx;
+ animation-delay: 0.82s;
+ }
+
+ @keyframes freeMaskFade {
+ 0% { opacity: 0; }
+ 100% { opacity: 1; }
+ }
+
+ @keyframes freeCardPop {
+ 0% {
+ opacity: 0;
+ transform: translateY(54rpx) scale(0.78);
+ }
+
+ 64% {
+ transform: translateY(-10rpx) scale(1.06);
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translateY(0) scale(1);
+ }
+ }
+
+ @keyframes freeRaysSpin {
+ 0% { transform: rotate(0deg) scale(1); }
+ 100% { transform: rotate(360deg) scale(1.06); }
+ }
+
+ @keyframes freeTitlePop {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.025); }
+ }
+
+ @keyframes freeAmountBeat {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.045); }
+ }
+
+ @keyframes freeAmountAura {
+ 0% { background-position: 0% 50%; }
+ 100% { background-position: 260% 50%; }
+ }
+
+ @keyframes rewardBtnFloat {
+ 0%, 100% { transform: translateY(0) scale(1); }
+ 50% { transform: translateY(-8rpx) scale(1.025); }
+ }
+
+ @keyframes orbFloat {
+ 0%, 100% { transform: translateY(0) scale(1); opacity: 0.72; }
+ 50% { transform: translateY(-24rpx) scale(1.08); opacity: 1; }
+ }
+
+ @keyframes confettiFloat {
+ 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
+ 50% { transform: translateY(44rpx) rotate(150deg); opacity: 1; }
+ }
+
+ @keyframes starTwinkle {
+ 0%, 100% { transform: scale(0.6); opacity: 0.35; }
+ 50% { transform: scale(1.45); opacity: 1; }
+ }
\ No newline at end of file