421 lines
11 KiB
Vue
421 lines
11 KiB
Vue
<template>
|
||
<up-popup :show="show" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
|
||
@close="$emit('update:show', false)">
|
||
<view class="goods_coupon_popup_container">
|
||
<view class="popup_header">
|
||
<text class="popup_title">优惠券</text>
|
||
</view>
|
||
|
||
<!-- 优惠券列表 (可滑动) -->
|
||
<scroll-view scroll-y class="popup_coupon_scroll">
|
||
<view class="popup_coupon_list">
|
||
<view v-for="(coupon, index) in list" :key="coupon.templateId || coupon.id || index"
|
||
class="coupon-card" :class="{ 'card-disabled': getCardDisabled(coupon) }">
|
||
<!-- 左侧：金额与门槛 -->
|
||
<view class="card-left">
|
||
<view class="price-box">
|
||
<text class="currency">¥</text>
|
||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||
</view>
|
||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||
</view>
|
||
|
||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||
<view class="divider-wrapper">
|
||
<view class="notch top-notch"></view>
|
||
<view class="divider-line"></view>
|
||
<view class="notch bottom-notch"></view>
|
||
</view>
|
||
|
||
<!-- 右侧：详细内容与操作按钮 -->
|
||
<view class="card-right">
|
||
<view class="info-content">
|
||
<view class="coupon-title">{{ coupon.title }}</view>
|
||
<view class="tag-row">
|
||
<text class="coupon-tag" :class="{ 'tag-disabled': getCardDisabled(coupon) }">
|
||
{{ getTagText(coupon) }}
|
||
</text>
|
||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||
</view>
|
||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮 -->
|
||
<view class="btn-box">
|
||
<view v-if="!getCardReceived(coupon) && getCouponCanReceive(coupon)" class="action-btn btn-claim"
|
||
@click="$emit('receive', { coupon, index })">
|
||
立即领取
|
||
</view>
|
||
<view v-else-if="getCardReceived(coupon)" class="action-btn btn-received">
|
||
已领取
|
||
</view>
|
||
<view v-else class="action-btn btn-disabled">
|
||
{{ coupon.receiveStatusText || '已达上限' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部确定按钮 -->
|
||
<view class="popup_bottom_btn_wrap">
|
||
<view class="popup_btn_ok" @click="$emit('update:show', false)">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "product-coupon-popup",
|
||
props: {
|
||
show: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
list: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
},
|
||
methods: {
|
||
getDiscountAmount(coupon) {
|
||
return coupon.discountAmount !== undefined ? coupon.discountAmount : (coupon.amount || 0);
|
||
},
|
||
getThresholdText(coupon) {
|
||
const threshold = coupon.thresholdAmount !== undefined ? Number(coupon.thresholdAmount) : 0;
|
||
if (threshold === 0) {
|
||
return "无门槛";
|
||
}
|
||
return `满${threshold}元可用`;
|
||
},
|
||
getTagText(coupon) {
|
||
if (coupon.scopeType === 1) return "通用券";
|
||
if (coupon.scopeType === 2) return "商品券";
|
||
if (coupon.scopeType === 3 || coupon.scopeType === 4) return "品类券";
|
||
if (coupon.scopeText && coupon.scopeText.includes("通用")) return "通用券";
|
||
return "通用券";
|
||
},
|
||
getScopeText(coupon) {
|
||
if (coupon.scopeText) return coupon.scopeText;
|
||
if (coupon.scopeType === 1) return "所有商品可用";
|
||
if (coupon.scopeType === 2) return "指定商品可用";
|
||
if (coupon.scopeType === 3) return "指定类目可用";
|
||
if (coupon.scopeType === 4) return "指定专区商品可用";
|
||
return "所有商品可用";
|
||
},
|
||
getValidityText(coupon) {
|
||
if (coupon.validDays && coupon.validDays > 0) {
|
||
return `领取之日起${coupon.validDays}天内有效`;
|
||
}
|
||
if (coupon.useEndTime) {
|
||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||
}
|
||
if (coupon.receiveEndTime) {
|
||
return `截止时间 ${this.formatTime(coupon.receiveEndTime)}`;
|
||
}
|
||
return "领取之日起30天内有效";
|
||
},
|
||
getCardReceived(coupon) {
|
||
return coupon.received || coupon.receiveStatus === 1;
|
||
},
|
||
getCouponCanReceive(coupon) {
|
||
return coupon.canReceive !== false && coupon.receiveStatus !== 2;
|
||
},
|
||
getCardDisabled(coupon) {
|
||
return coupon.receiveStatus === 2 || (coupon.canReceive === false && !coupon.received && coupon.receiveStatus !== 1);
|
||
},
|
||
formatTime(time) {
|
||
if (!time) return "";
|
||
if (typeof time === "string" && time.includes("-")) return time;
|
||
const date = new Date(Number(time));
|
||
if (isNaN(date.getTime())) return String(time);
|
||
const y = date.getFullYear();
|
||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||
const d = String(date.getDate()).padStart(2, "0");
|
||
const hh = String(date.getHours()).padStart(2, "0");
|
||
const mm = String(date.getMinutes()).padStart(2, "0");
|
||
const ss = String(date.getSeconds()).padStart(2, "0");
|
||
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.goods_coupon_popup_container {
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
background-color: #ffffff;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
padding: 32rpx 24rpx 40rpx 24rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
.popup_header {
|
||
position: relative;
|
||
text-align: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.popup_title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.popup_coupon_scroll {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
max-height: 700rpx;
|
||
min-height: 300rpx;
|
||
|
||
.popup_coupon_list {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 8rpx 0;
|
||
}
|
||
}
|
||
|
||
.popup_bottom_btn_wrap {
|
||
margin-top: 24rpx;
|
||
padding: 0 16rpx;
|
||
|
||
.popup_btn_ok {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
background: linear-gradient(135deg, #a855f7 0%, #7a35f6 100%);
|
||
color: #ffffff;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
border-radius: 42rpx;
|
||
box-shadow: 0 8rpx 20rpx rgba(122, 53, 246, 0.25);
|
||
transition: transform 0.1s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon-card {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(253, 28, 36, 0.06);
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
&.card-disabled {
|
||
background: #f5f5f5 !important;
|
||
|
||
.card-left {
|
||
.price-box {
|
||
color: #a0a0a0 !important;
|
||
}
|
||
|
||
.condition {
|
||
color: #999999 !important;
|
||
}
|
||
}
|
||
|
||
.coupon-title {
|
||
color: #333333 !important;
|
||
}
|
||
}
|
||
|
||
.card-left {
|
||
width: 150rpx;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20rpx 0;
|
||
|
||
.price-box {
|
||
display: flex;
|
||
align-items: baseline;
|
||
color: #ff2442;
|
||
|
||
.currency {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
margin-right: 2rpx;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 52rpx;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
.condition {
|
||
font-size: 24rpx;
|
||
color: #ff2442;
|
||
margin-top: 10rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.divider-wrapper {
|
||
position: relative;
|
||
width: 2rpx;
|
||
align-self: stretch;
|
||
|
||
.divider-line {
|
||
height: 100%;
|
||
border-left: 2rpx dashed #fca5a5;
|
||
}
|
||
|
||
.notch {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
|
||
.top-notch {
|
||
top: -12rpx;
|
||
}
|
||
|
||
.bottom-notch {
|
||
bottom: -12rpx;
|
||
}
|
||
}
|
||
|
||
.card-disabled .divider-line {
|
||
border-left: 2rpx dashed #dddddd !important;
|
||
}
|
||
|
||
.card-right {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx 16rpx;
|
||
box-sizing: border-box;
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
margin-right: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.coupon-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #1a1a1a;
|
||
margin-bottom: 10rpx;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tag-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 10rpx;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
|
||
.coupon-tag {
|
||
display: inline-block;
|
||
font-size: 20rpx;
|
||
color: #ff2442;
|
||
background: #ffe4e6;
|
||
border: 1px solid #ff99a4;
|
||
border-radius: 6rpx;
|
||
padding: 2rpx 10rpx;
|
||
margin-right: 10rpx;
|
||
line-height: 1.2;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
|
||
&.tag-disabled {
|
||
color: #888888 !important;
|
||
background: #eeeeee !important;
|
||
border: 1px solid #cccccc !important;
|
||
}
|
||
}
|
||
|
||
.coupon-scope {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.coupon-validity {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
line-height: 1.2;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
|
||
.btn-box {
|
||
flex-shrink: 0;
|
||
|
||
.action-btn {
|
||
width: 124rpx;
|
||
height: 54rpx;
|
||
line-height: 54rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
border-radius: 8rpx;
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
|
||
&.btn-claim {
|
||
background: #ff1e38;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&.btn-received {
|
||
background: #ffe8eb;
|
||
color: #ff2442;
|
||
border: 1px solid #ff4d5e;
|
||
line-height: 52rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&.btn-disabled {
|
||
background: #eeeeee;
|
||
color: #bbbbbb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|