root
/
school_uni
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
wangfukang 3 weeks ago
parent
16b1dcb734
commit
9e9a044be3
1 changed files with 393 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 400
      package2/group/groupBuySingle.vue

400
package2/group/groupBuySingle.vue
View File

@ -521,7 +521,21 @@
<text style="font-size: 30rpx;font-weight: 700;">立即出餐</text>
</view>
<view style="color: #777;width: 500rpx;">
拼团单，拼团成功后立即出餐
拼团成功后立即出餐
</view>
<view class="pack-options">
<view class="pack-option" @tap="isPack = 0">
<view :class="isPack === 0 ? 'radio-check' : 'radio-no-check'">
<uni-icons v-if="isPack === 0" type="checkmarkempty" size="12"></uni-icons>
</view>
堂食
</view>
<view class="pack-option" @tap="isPack = 1">
<view :class="isPack === 1 ? 'radio-check' : 'radio-no-check'">
<uni-icons v-if="isPack === 1" type="checkmarkempty" size="12"></uni-icons>
</view>
打包
</view>
</view>
</view>
<view style="width: 36rpx;padding-top: 20rpx;">
@ -644,6 +658,31 @@
</view>
</uni-popup>
<common-loading />
<view class="free-order-mask" v-if="freeOrderEffectVisible" @tap.stop="closeFreeOrderEffect">
<view class="free-order-card" @tap.stop>
<view class="free-order-rays"></view>
<view class="free-order-orb orb-1"></view>
<view class="free-order-orb orb-2"></view>
<view class="free-order-confetti confetti-1"></view>
<view class="free-order-confetti confetti-2"></view>
<view class="free-order-confetti confetti-3"></view>
<view class="free-order-confetti confetti-4"></view>
<view class="free-order-confetti confetti-5"></view>
<view class="free-order-star star-1"></view>
<view class="free-order-star star-2"></view>
<view class="free-order-star star-3"></view>
<view class="free-order-badge">今日好运爆棚</view>
<view class="free-order-title">锦鲤附体</view>
<view class="free-order-subtitle">参团遇到好运啦！</view>
<view class="free-order-amount">
<text class="amount-label" style="margin-top: 20rpx;">免单</text>
<text class="amount-number" style="margin-top: 20rpx;">{{freeOrderAmount}}</text>
<text class="amount-unit" style="margin-top: 20rpx;">元</text>
</view>
<view class="free-order-btn" @tap.stop="closeFreeOrderEffect">开心收下</view>
<view class="free-order-subtitle">未支付免单资格会传递给下一个小伙伴</view>
</view>
</view>
</view>
</template>
@ -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; }
}
</style>
Write Preview
Loading…
Cancel
Save