feat：0820需求
This commit is contained in:
@@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<up-popup
|
||||
:show="show"
|
||||
mode="bottom"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="coupon-popup">
|
||||
<!-- 固定的标题头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="title">选择优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 固定的切换标签 (全部/可使用/不可用) -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: activeTab === index }]"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.name }}</text>
|
||||
<view class="active-line" v-if="activeTab === index"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 可上下滚动的优惠券列表区域 -->
|
||||
<scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
|
||||
<view class="coupon-list" v-if="couponList && couponList.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in couponList"
|
||||
:key="coupon.templateId || coupon.couponUserId || coupon.id || index"
|
||||
class="coupon-card"
|
||||
:class="{ 'card-disabled': !isAvailable(coupon), 'card-selected': isSelected(coupon) }"
|
||||
@click="isAvailable(coupon) && toggleSelect(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': !isAvailable(coupon) }">
|
||||
{{ getTagText(coupon) }}
|
||||
</text>
|
||||
<text class="coupon-scope">{{ getScopeText(coupon) }}</text>
|
||||
</view>
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
<view class="unavailable-reason" v-if="!isAvailable(coupon) && coupon.unavailableReason">
|
||||
{{ coupon.unavailableReason }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧操作区：可使用状态下展示单选框 (Radio Button) -->
|
||||
<view class="action-box">
|
||||
<view v-if="isAvailable(coupon)" class="radio-wrap" @click.stop="toggleSelect(coupon)">
|
||||
<view class="radio-circle" :class="{ 'checked': isSelected(coupon) }">
|
||||
<text class="check-icon" v-if="isSelected(coupon)">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="disabled-tag-text">
|
||||
不可用
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表为空的缺省视图 -->
|
||||
<view class="empty-wrap" v-else-if="!isLoading">
|
||||
<text class="empty-text">暂无相关优惠券</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部不使用优惠券按钮 (方便取消选择) -->
|
||||
<view class="popup-footer" v-if="couponList && couponList.length > 0">
|
||||
<view class="no-use-btn" @click="noUseCoupon">
|
||||
不使用优惠券
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoodsCouponList } from "@/api/coupon.js";
|
||||
|
||||
export default {
|
||||
name: "CouponDialog",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedCoupon: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabs: [
|
||||
{ name: "全部", value: "" },
|
||||
{ name: "可使用", value: 1 },
|
||||
{ name: "不可用", value: 2 },
|
||||
],
|
||||
couponList: [],
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
},
|
||||
goodsId() {
|
||||
if (this.show) {
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
if (this.activeTab !== index) {
|
||||
this.activeTab = index;
|
||||
this.fetchCoupons();
|
||||
}
|
||||
},
|
||||
async fetchCoupons() {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const tabValue = this.tabs[this.activeTab].value;
|
||||
const params = {};
|
||||
if (this.goodsId) {
|
||||
params.goodsId = this.goodsId;
|
||||
}
|
||||
if (tabValue !== "" && tabValue !== undefined) {
|
||||
params.receiveStatus = tabValue;
|
||||
}
|
||||
|
||||
const res = await getGoodsCouponList(params);
|
||||
if (res && res.bizcode === 100) {
|
||||
this.couponList = res.data || [];
|
||||
} else {
|
||||
this.couponList = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取结算页优惠券列表失败:", e);
|
||||
this.couponList = [];
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
isAvailable(coupon) {
|
||||
if (coupon.canUse === false) return false;
|
||||
if (coupon.receiveStatus === 2) return false;
|
||||
if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
|
||||
return true;
|
||||
},
|
||||
isSelected(coupon) {
|
||||
if (!this.selectedCoupon) return false;
|
||||
const curId = coupon.templateId || coupon.couponUserId || coupon.id;
|
||||
const selId = this.selectedCoupon.templateId || this.selectedCoupon.couponUserId || this.selectedCoupon.id;
|
||||
return curId && selId && String(curId) === String(selId);
|
||||
},
|
||||
toggleSelect(coupon) {
|
||||
if (this.isSelected(coupon)) {
|
||||
this.$emit("select", null);
|
||||
} else {
|
||||
this.$emit("select", coupon);
|
||||
}
|
||||
this.handleClose();
|
||||
},
|
||||
noUseCoupon() {
|
||||
this.$emit("select", null);
|
||||
this.handleClose();
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
// 格式化辅助函数
|
||||
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.useEndTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.useEndTime)}`;
|
||||
}
|
||||
if (coupon.endTime) {
|
||||
return `有效期至 ${this.formatTime(coupon.endTime)}`;
|
||||
}
|
||||
if (coupon.validDays && coupon.validDays > 0) {
|
||||
return `领取之日起${coupon.validDays}天内有效`;
|
||||
}
|
||||
return "长期有效";
|
||||
},
|
||||
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");
|
||||
return `${y}-${m}-${d}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-popup {
|
||||
height: 75vh;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
padding: 30rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 6rpx;
|
||||
width: 44rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
/* 高保真优惠券卡片样式 */
|
||||
.coupon-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(253, 28, 36, 0.06);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&.card-selected {
|
||||
/* 不加外边框 */
|
||||
}
|
||||
|
||||
&.card-disabled {
|
||||
background: #f5f5f5 !important;
|
||||
border-color: transparent !important;
|
||||
|
||||
.card-left {
|
||||
.price-box {
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
.condition {
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 60rpx;
|
||||
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: #f7f8fa;
|
||||
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 20rpx 20rpx 24rpx;
|
||||
|
||||
.info-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.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;
|
||||
white-space: nowrap;
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
|
||||
.unavailable-reason {
|
||||
font-size: 20rpx;
|
||||
color: #ff4d4f;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-box {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 8rpx;
|
||||
|
||||
/* 单选框 (Radio Button) 高保真样式 */
|
||||
.radio-wrap {
|
||||
padding: 10rpx;
|
||||
|
||||
.radio-circle {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #cccccc;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.checked {
|
||||
background-color: #7a35f6;
|
||||
border-color: #7a35f6;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #ffffff;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-tag-text {
|
||||
font-size: 24rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
padding: 20rpx 32rpx 30rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.no-use-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&:active {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user