diff --git a/package2/group/groupBuySingle.vue b/package2/group/groupBuySingle.vue
index 79dece2..6e2f2d3 100644
--- a/package2/group/groupBuySingle.vue
+++ b/package2/group/groupBuySingle.vue
@@ -521,7 +521,21 @@
立即出餐
- 拼团单，拼团成功后立即出餐
+ 拼团成功后立即出餐
+
+
+
+
+
+
+ 堂食
+
+
+
+
+
+ 打包
+
@@ -644,6 +658,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 今日好运爆棚
+ 锦鲤附体
+ 参团遇到好运啦！
+
+ 免单
+ {{freeOrderAmount}}
+ 元
+
+ 开心收下
+ 未支付免单资格会传递给下一个小伙伴
+
+
@@ -665,6 +704,7 @@
},
productId: '',
nowMake:true,
+ isPack: 0,
productItem: [],
tuanzhangOrder: {},
cartItems: [],
@@ -710,7 +750,9 @@
}],
shopRecommend: [],
availableCoupons: [],
- selectedCoupon: null
+ selectedCoupon: null,
+ freeOrderEffectVisible: false,
+ freeOrderAmount: '0.00'
}
},
components: {
@@ -1384,7 +1426,7 @@
};
payload.regionId = JSON.parse(uni.getStorageSync('area')).id
uni.showLoading({
- title: '创建订单中...'
+ title: '创建订单中....'
});
this.tui.request("/mall/order/create", "POST", payload, false, false).then(res => {
uni.hideLoading();
@@ -1393,10 +1435,7 @@
this.groupdeliveryType = res.result.deliveryType;
this.backendTotalAmount = res.result.totalAmount;
if (res.result.isFreeOrder == 1) {
- uni.showToast({
- title: '锦鲤附身啦 免单' + res.result.freeAmount + '元',
- icon: 'none'
- });
+ this.showFreeOrderEffect(res.result);
}
this.$refs.payPopup.open('bottom');
if (this.$refs.pintuanPopup) this.$refs.pintuanPopup.close();
@@ -1410,6 +1449,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;
+ },
addToCart(item, specs) {
let specStr = specs ? JSON.stringify(specs) : '';
let cartId = item.id + '_' + specStr;
@@ -1636,6 +1689,7 @@
amount: amountInCents,
description: '商城订单',
userRequireMake:userRequireMake,
+ isPack: this.groupdeliveryType == 2 ? this.isPack : 1,
outTradeNo: this.currentOrderId
}, false, false).then((res) => {
if (res.code == 200) {
@@ -1805,6 +1859,21 @@
background: #fff;
}
+ .pack-options {
+ display: flex;
+ align-items: center;
+ margin-top: 22rpx;
+ }
+
+ .pack-option {
+ display: flex;
+ align-items: center;
+ color: #00231C;
+ font-size: 28rpx;
+ font-weight: 800;
+ margin-right: 40rpx;
+ }
+
.title-search {
display: flex;
flex: 1;
@@ -3183,4 +3252,321 @@
transform: scale(1.03);
}
}
+
+ .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;
+ 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