feat：0820需求
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<up-popup
|
||||
:show="show"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="false"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="false"
|
||||
<up-popup
|
||||
:show="show"
|
||||
mode="bottom"
|
||||
:round="20"
|
||||
:closeOnClickOverlay="true"
|
||||
:closeable="true"
|
||||
:safeAreaInsetBottom="true"
|
||||
@close="handleClose"
|
||||
>
|
||||
<view class="coupon-popup">
|
||||
@@ -14,13 +15,13 @@
|
||||
<text class="title">选择优惠券</text>
|
||||
</view>
|
||||
|
||||
<!-- 固定的切换标签 -->
|
||||
<!-- 固定的切换标签 (全部/可使用/不可用) -->
|
||||
<view class="tab-container">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
:class="['tab-item', { active: activeTab === index }]"
|
||||
@click="activeTab = index"
|
||||
@click="switchTab(index)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.name }}</text>
|
||||
<view class="active-line" v-if="activeTab === index"></view>
|
||||
@@ -28,28 +29,24 @@
|
||||
</view>
|
||||
|
||||
<!-- 可上下滚动的优惠券列表区域 -->
|
||||
<scroll-view
|
||||
class="coupon-scroll"
|
||||
scroll-y
|
||||
:enhanced="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view class="coupon-list">
|
||||
<view
|
||||
<scroll-view class="coupon-scroll" scroll-y :enhanced="true" :show-scrollbar="false">
|
||||
<view class="coupon-list" v-if="displayCoupons.length > 0">
|
||||
<view
|
||||
v-for="(coupon, index) in displayCoupons"
|
||||
:key="coupon.couponUserId || coupon.id || coupon.templateId || index"
|
||||
class="coupon-card"
|
||||
v-for="(coupon, index) in filteredCoupons"
|
||||
:key="index"
|
||||
:class="{ 'disabled': coupon.status === 'expired' }"
|
||||
: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">{{ coupon.amount }}</text>
|
||||
<text class="amount">{{ getDiscountAmount(coupon) }}</text>
|
||||
</view>
|
||||
<text class="condition">{{ coupon.condition }}</text>
|
||||
<text class="condition">{{ getThresholdText(coupon) }}</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 带有上下半圆凹槽的虚线分割线 -->
|
||||
<view class="divider-wrapper">
|
||||
<view class="notch top-notch"></view>
|
||||
@@ -57,29 +54,49 @@
|
||||
<view class="notch bottom-notch"></view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧：详细内容 -->
|
||||
<!-- 右侧：详细内容与单选框 -->
|
||||
<view class="card-right">
|
||||
<view class="info-content">
|
||||
<view class="title">{{ coupon.title }}</view>
|
||||
<view class="description">{{ coupon.description }}</view>
|
||||
|
||||
<!-- 状态/倒计时文本 -->
|
||||
<view v-if="coupon.status === 'active'" class="countdown">
|
||||
仅剩 {{ coupon.timeLeft }}
|
||||
<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 v-else class="expired-text">
|
||||
已失效
|
||||
<view class="coupon-validity">{{ getValidityText(coupon) }}</view>
|
||||
<view class="unavailable-reason" v-if="!isAvailable(coupon)">
|
||||
{{ getUnavailableReason(coupon) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 按钮：仅在有效状态下显示 -->
|
||||
<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
|
||||
使用
|
||||
|
||||
<!-- 右侧操作区：可使用状态下展示单选框 (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="coupons && coupons.length > 0">
|
||||
<view class="no-use-btn" @click="noUseCoupon">
|
||||
不使用优惠券
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
@@ -93,55 +110,131 @@ export default {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
goodsId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
coupons: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
orderAmount: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedCoupon: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
tabs: [
|
||||
{ name: "全部", value: "all" },
|
||||
{ name: "可使用", value: "active" },
|
||||
{ name: "已失效", value: "expired" },
|
||||
],
|
||||
coupons: [
|
||||
{
|
||||
amount: 12,
|
||||
condition: "无门槛",
|
||||
title: "限时秒杀优惠券",
|
||||
description: "云南白药牙膏儿膏儿膏儿...",
|
||||
timeLeft: "14:20:55",
|
||||
status: "active"
|
||||
},
|
||||
{
|
||||
amount: 12,
|
||||
condition: "无门槛",
|
||||
title: "限时秒杀优惠券",
|
||||
description: "云南白药牙膏儿膏儿膏儿...",
|
||||
timeLeft: "14:20:55",
|
||||
status: "active"
|
||||
},
|
||||
{ name: "全部", value: "" },
|
||||
{ name: "可使用", value: 1 },
|
||||
{ name: "不可用", value: 2 },
|
||||
],
|
||||
isLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filteredCoupons() {
|
||||
if (this.activeTab === 0) {
|
||||
return this.coupons;
|
||||
} else if (this.activeTab === 1) {
|
||||
return this.coupons.filter(c => c.status === 'active');
|
||||
} else if (this.activeTab === 2) {
|
||||
return [];
|
||||
} else {
|
||||
return this.coupons.filter(c => c.status === 'expired');
|
||||
displayCoupons() {
|
||||
if (this.activeTab === 1) {
|
||||
return this.coupons.filter((coupon) => this.isAvailable(coupon));
|
||||
}
|
||||
}
|
||||
if (this.activeTab === 2) {
|
||||
return this.coupons.filter((coupon) => !this.isAvailable(coupon));
|
||||
}
|
||||
return this.coupons;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
switchTab(index) {
|
||||
this.activeTab = index;
|
||||
},
|
||||
isAvailable(coupon) {
|
||||
if (coupon.canUse === false) return false;
|
||||
if (coupon.available === false) return false;
|
||||
if (coupon.receiveStatus === 2) return false;
|
||||
if (coupon.status === 2 || coupon.status === 3 || coupon.status === 4) return false;
|
||||
return Number(this.orderAmount || 0) >= Number(coupon.thresholdAmount || 0);
|
||||
},
|
||||
isSelected(coupon) {
|
||||
if (!this.selectedCoupon) return false;
|
||||
const curId = coupon.couponUserId || coupon.id || coupon.templateId;
|
||||
const selId = this.selectedCoupon.couponUserId || this.selectedCoupon.id || this.selectedCoupon.templateId;
|
||||
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");
|
||||
},
|
||||
useCoupon(coupon) {
|
||||
this.$emit("select", coupon);
|
||||
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 "长期有效";
|
||||
},
|
||||
getUnavailableReason(coupon) {
|
||||
const threshold = Number(coupon.thresholdAmount || 0);
|
||||
if (Number(this.orderAmount || 0) < threshold) {
|
||||
return `订单金额未满${threshold}元`;
|
||||
}
|
||||
return coupon.unavailableReason || "该优惠券不适用于当前订单";
|
||||
},
|
||||
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}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -149,11 +242,12 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.coupon-popup {
|
||||
height: 85vh;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
height: 75vh;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
@@ -161,10 +255,9 @@ export default {
|
||||
font-size: 32rpx;
|
||||
background-color: #ffffff;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
padding: 30rpx 0;
|
||||
font-weight: bold;
|
||||
padding: 30rpx 0 20rpx 0;
|
||||
position: relative;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
@@ -173,9 +266,10 @@ export default {
|
||||
background-color: #ffffff;
|
||||
height: 88rpx;
|
||||
align-items: center;
|
||||
padding-left: 28rpx;
|
||||
padding-left: 32rpx;
|
||||
box-sizing: border-box;
|
||||
border-top: 2rpx solid #f6f6f6;
|
||||
border-top: 1rpx solid #f6f6f6;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.tab-item {
|
||||
margin-right: 48rpx;
|
||||
@@ -189,24 +283,24 @@ export default {
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #7f7f7f;
|
||||
transition: all 0.2s ease;
|
||||
color: #666666;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: #7A35F6;
|
||||
color: #7a35f6;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.active-line {
|
||||
position: absolute;
|
||||
bottom: 4rpx;
|
||||
bottom: 6rpx;
|
||||
width: 44rpx;
|
||||
height: 4rpx;
|
||||
background-color: #7A35F6;
|
||||
border-radius: 2rpx;
|
||||
height: 6rpx;
|
||||
background-color: #7a35f6;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -214,170 +308,267 @@ export default {
|
||||
.coupon-scroll {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding: 24rpx 24rpx 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.coupon-list {
|
||||
padding: 28rpx 28rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.coupon-card {
|
||||
background: rgba(102,102,102,0.06);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
height: 196rpx;
|
||||
position: relative;
|
||||
/* 高保真优惠券卡片样式 */
|
||||
.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 {
|
||||
width: 190rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.price-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
color: #ff1224;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.currency {
|
||||
font-size: 32rpx;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 64rpx;
|
||||
line-height: 64rpx;
|
||||
}
|
||||
color: #a0a0a0 !important;
|
||||
}
|
||||
|
||||
.condition {
|
||||
font-size: 24rpx;
|
||||
color: #ff1224;
|
||||
margin-top: 10rpx;
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
width: 2rpx;
|
||||
position: relative;
|
||||
margin: 10rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.divider-line {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: 2rpx dashed rgba(253,28,36,0.3);
|
||||
}
|
||||
|
||||
.notch {
|
||||
position: absolute;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background-color: #f7f8fa;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.top-notch {
|
||||
top: -18rpx;
|
||||
}
|
||||
.bottom-notch {
|
||||
bottom: -18rpx;
|
||||
}
|
||||
.coupon-title {
|
||||
color: #333333 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-right {
|
||||
flex: 1;
|
||||
padding: 26rpx 24rpx 24rpx 36rpx;
|
||||
.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;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
align-items: baseline;
|
||||
color: #ff2442;
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #2c2c2c;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
color: #6a6a6a;
|
||||
margin-top: 8rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 24rpx;
|
||||
color: #ff5260;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.use-btn {
|
||||
width: 116rpx;
|
||||
height: 56rpx;
|
||||
background-color: #FD1C24;
|
||||
color: #ffffff;
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
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;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 16rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f4f4f4;
|
||||
.action-box {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 8rpx;
|
||||
|
||||
.card-left {
|
||||
.price-box { color: #9c9c9c; }
|
||||
.condition { color: #9c9c9c; }
|
||||
/* 单选框 (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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider-wrapper {
|
||||
.divider-line { border-left-color: #e2e2e2; }
|
||||
}
|
||||
|
||||
.card-right {
|
||||
.info-content {
|
||||
.title { color: #2c2c2c; }
|
||||
.description { color: #9c9c9c; }
|
||||
}
|
||||
.expired-text {
|
||||
font-size: 22rpx;
|
||||
color: #bcbcbc;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.disabled-tag-text {
|
||||
font-size: 24rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.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>
|
||||
|
||||
@@ -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>
|
||||
@@ -60,7 +60,7 @@
|
||||
<view class="content_right_total">
|
||||
<view>￥<text style="font-size: 36rpx">{{
|
||||
pItem.totalPrice
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view>每件到手价￥{{ pItem.unitPrice }}</view>
|
||||
</view>
|
||||
<view class="shopping_info_quantity">
|
||||
@@ -84,7 +84,7 @@
|
||||
<view class="content_right_total">
|
||||
<view>￥<text style="font-size: 36rpx">{{
|
||||
pItem.totalPrice
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view>每件到手价￥{{ pItem.unitPrice }}</view>
|
||||
</view>
|
||||
<view class="shopping_info_quantity">
|
||||
@@ -108,7 +108,7 @@
|
||||
<view class="order_freight_item">
|
||||
<view>运费<text style="color: #c0c3c6; margin-left: 20rpx">{{
|
||||
getValue(PRODUCT_DELIVERY_TIME, addItem.deliveryTime)
|
||||
}}</text></view>
|
||||
}}</text></view>
|
||||
<view class="value_">
|
||||
{{ orderInfo.postage ? "￥" + orderInfo.postage : "包邮" }}
|
||||
</view>
|
||||
@@ -144,28 +144,6 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order_way_warp_two">
|
||||
<text class="text-32 text-zu">支付方式</text>
|
||||
<up-radio-group v-model="orderInfo.paymentMethod" placement="column">
|
||||
<view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
|
||||
borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
|
||||
}">
|
||||
<view class="way-option-item">
|
||||
<image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
|
||||
<image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
|
||||
<image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
|
||||
<image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
|
||||
<text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
|
||||
style="margin-left: 20rpx">{{ item.name }}</text>
|
||||
<text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
|
||||
<text style="color: #999; margin: 0 10rpx">可用:</text>
|
||||
{{ item.balance }}
|
||||
</text>
|
||||
</view>
|
||||
<up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
|
||||
</view>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
<view class="order_way_warp_two">
|
||||
<view class="price-view">
|
||||
<text class="text-32 text-zu">商品总价</text>
|
||||
@@ -173,29 +151,39 @@
|
||||
{{
|
||||
`${buyCouponvalue}数字积分+${orderInfo.amount -
|
||||
(orderInfo.postage || 0) +
|
||||
(orderInfo.enterpriseAmount || 0)
|
||||
(orderInfo.enterpriseAmount || 0) + (orderInfo.couponDiscount || 0)
|
||||
}元`
|
||||
}}
|
||||
</text>
|
||||
<text class="text-32 text-zu text-bold" v-else>￥{{
|
||||
orderInfo.amount -
|
||||
orderInfo.postage +
|
||||
(orderInfo.enterpriseAmount || 0)
|
||||
(orderInfo.amountBeforeCoupon != null
|
||||
? orderInfo.amountBeforeCoupon
|
||||
: Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0)) -
|
||||
Number(orderInfo.postage || 0) +
|
||||
Number(orderInfo.enterpriseAmount || 0)
|
||||
}}</text>
|
||||
</view>
|
||||
<view class="price-view">
|
||||
<text class="text-32 text-zu">运费</text>
|
||||
<text class="text-32 text-zu text-bold">￥{{ orderInfo.postage }}</text>
|
||||
</view>
|
||||
<!-- <view class="price-view" @click="couponShow = true">
|
||||
|
||||
<view class="price-view" @click="couponShow = true" v-if="!isCoupon">
|
||||
<text class="text-32 text-zu">优惠券</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
<view class="text-24 " style="margin-right:4rpx;color:#999;">{{ selectedCoupon ? `-${selectedCoupon.amount}` :
|
||||
'请选择' }}</view>
|
||||
<view style="display: flex; align-items: center; max-width: 480rpx;">
|
||||
<template v-if="selectedCoupon">
|
||||
<view class="preview_coupon_tag">
|
||||
{{ selectedCoupon.title || selectedCoupon.name || '优惠券' }}
|
||||
</view>
|
||||
<text class="preview_coupon_price">-¥{{ selectedCouponAmount }}</text>
|
||||
</template>
|
||||
<view v-else class="text-24" style="margin-right: 8rpx; color: #999;">
|
||||
请选择
|
||||
</view>
|
||||
<up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"
|
||||
style="display:inline-block;vertical-align: middle;"></up-image>
|
||||
style="display:inline-block;vertical-align: middle; flex-shrink: 0;"></up-image>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="price-view" v-if="this.sed?.activedType == 'seckill' && allOrderInfo.activity?.activityPrice">
|
||||
<text class="text-32 text-zu">秒杀价</text>
|
||||
<view style="display: flex; align-items: center;">
|
||||
@@ -218,6 +206,31 @@
|
||||
<text class="text-32 text-zi text-bold">￥{{ orderInfo.amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order_way_warp_two">
|
||||
<text class="text-32 text-zu">支付方式</text>
|
||||
<up-radio-group v-model="orderInfo.paymentMethod" placement="column">
|
||||
<view v-for="(item, index) in wayOption" :key="item.id" class="way-option" :style="{
|
||||
borderWidth: wayOption.length - 1 == index ? '0rpx' : '2rpx',
|
||||
}">
|
||||
<view class="way-option-item">
|
||||
<image v-if="item.type == 'wechat'" src="https://static.tbmall.xin/static/new/wx.png"></image>
|
||||
<image v-if="item.type == 'alipay'" src="https://static.tbmall.xin/static/new/zfb.png"></image>
|
||||
<image v-if="item.type == 'balance'" src="https://static.tbmall.xin/static/new/bank.png"></image>
|
||||
<image v-if="item.type == 'redpacket'" src="https://static.tbmall.xin/static/new/jf.png"></image>
|
||||
<text v-if="item.type == 'wechat' || item.type == 'alipay'" class="text-32 text-zu"
|
||||
style="margin-left: 20rpx">{{ item.name }}</text>
|
||||
<text v-else style="margin-left: 20rpx" class="text-32 text-zu">{{ item.name }}
|
||||
<text style="color: #999; margin: 0 10rpx">可用:</text>
|
||||
{{ item.balance }}
|
||||
</text>
|
||||
</view>
|
||||
<up-radio :name="item.type" activeColor="#7934F6"> </up-radio>
|
||||
</view>
|
||||
</up-radio-group>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 去支付的固定按钮 -->
|
||||
<view class="order_pay_but">
|
||||
<view class="price_">
|
||||
@@ -292,10 +305,13 @@
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
|
||||
<!-- 优惠券选择弹框 -->
|
||||
<CouponDialog :show="couponShow" v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
|
||||
<CouponDialog :show="couponShow" :goodsId="goodsId" :selectedCoupon="selectedCoupon"
|
||||
:coupons="orderInfo.allCoupons || orderInfo.availableCoupons || []"
|
||||
:orderAmount="orderInfo.amountBeforeCoupon || (Number(orderInfo.amount || 0) + Number(orderInfo.couponDiscount || 0))"
|
||||
v-if="couponShow" @close="couponShow = false" @select="handleCouponSelect">
|
||||
</CouponDialog>
|
||||
<qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
|
||||
</view>
|
||||
<qiaobao-assistant page-key="pages/order_package/order_submit/order_submit" title="确认订单" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -309,6 +325,7 @@ import {
|
||||
} from "@/utils/enumUtils.js";
|
||||
import {
|
||||
getSettleList,
|
||||
getDirectSettleList,
|
||||
settle,
|
||||
settlementOrder,
|
||||
updateGoodsNum,
|
||||
@@ -338,6 +355,21 @@ export default {
|
||||
PRODUCT_DELIVERY_TIME() {
|
||||
return PRODUCT_DELIVERY_TIME;
|
||||
},
|
||||
goodsId() {
|
||||
if (this.sed && (this.sed.goodsId || this.sed.id)) {
|
||||
return this.sed.goodsId || this.sed.id;
|
||||
}
|
||||
if (this.orderInfo && this.orderInfo.shops && this.orderInfo.shops.length > 0) {
|
||||
const firstShop = this.orderInfo.shops[0];
|
||||
if (firstShop.addrTimes && firstShop.addrTimes.length > 0) {
|
||||
const firstTime = firstShop.addrTimes[0];
|
||||
if (firstTime.goods && firstTime.goods.length > 0) {
|
||||
return firstTime.goods[0].goodsId || firstTime.goods[0].id || firstTime.goods[0].prodId;
|
||||
}
|
||||
}
|
||||
}
|
||||
return this.ids || 0;
|
||||
},
|
||||
totleNum() {
|
||||
let num = 0;
|
||||
|
||||
@@ -354,6 +386,17 @@ export default {
|
||||
}
|
||||
return num;
|
||||
},
|
||||
selectedCouponAmount() {
|
||||
if (!this.selectedCoupon) return 0;
|
||||
if (this.orderInfo.couponDiscount != null) {
|
||||
return Number(this.orderInfo.couponDiscount) || 0;
|
||||
}
|
||||
const amt =
|
||||
this.selectedCoupon.discountAmount !== undefined
|
||||
? this.selectedCoupon.discountAmount
|
||||
: this.selectedCoupon.amount || 0;
|
||||
return Number(amt) || 0;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -395,6 +438,7 @@ export default {
|
||||
buyCouponAmount: 0, // 实付数字积分对应的钱
|
||||
couponShow: false, // 优惠券弹框显示
|
||||
selectedCoupon: null, // 选中的优惠券
|
||||
rawOrderAmount: 0, // 无优惠券时的原始订单总额
|
||||
};
|
||||
},
|
||||
async onLoad(option) {
|
||||
@@ -589,7 +633,7 @@ export default {
|
||||
console.log("getWayOption", this.wayOption);
|
||||
}
|
||||
},
|
||||
async getOrder() {
|
||||
async getOrder(couponUserId) {
|
||||
const ids = this.ids;
|
||||
if (!ids || ids === 0) {
|
||||
this.$refs.uToastRef.show({
|
||||
@@ -601,7 +645,7 @@ export default {
|
||||
url: "/pages/shopping_cart/shopping_cart",
|
||||
});
|
||||
}, 2000);
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
let address = null;
|
||||
if (this.defaultAddress) {
|
||||
@@ -621,6 +665,9 @@ export default {
|
||||
const params = {
|
||||
cartIds: ids,
|
||||
};
|
||||
if (couponUserId) {
|
||||
params.couponUserId = couponUserId;
|
||||
}
|
||||
if (address) {
|
||||
params["addrId"] = address.id;
|
||||
}
|
||||
@@ -637,9 +684,13 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null; // 支付方式
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
console.log("orderInfoorderInfo", this.orderInfo);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
async getOrderTwo() {
|
||||
const params = {
|
||||
@@ -724,8 +775,12 @@ export default {
|
||||
}
|
||||
this.allOrderInfo = data;
|
||||
this.orderInfo.paymentMethod = null;
|
||||
this.rawOrderAmount = Number(this.orderInfo.amount) || 0;
|
||||
this.onBuyCouponvalue(this.sed.goodsNum || 1);
|
||||
this.onBuyCouponAmount();
|
||||
if (!this.isCoupon && this.sed?.activedType !== "seckill") {
|
||||
await this.refreshDirectSettle();
|
||||
}
|
||||
// if(this.addressListOne && this.addressListOne.length){
|
||||
// this.orderInfo.address = this.addressListOne[0];
|
||||
// }
|
||||
@@ -801,13 +856,24 @@ export default {
|
||||
].totalPrice = currentTotalPrice.toFixed(2);
|
||||
this.orderInfo.amount = currentAmount.toFixed(2);
|
||||
|
||||
if (this.isCoupon || this.sed) {
|
||||
if (this.isCoupon) {
|
||||
this.onBuyCouponvalue(currentQuantity);
|
||||
this.onBuyCouponAmount();
|
||||
return;
|
||||
}
|
||||
if (this.sed) {
|
||||
this.onBuyCouponvalue(currentQuantity);
|
||||
this.onBuyCouponAmount();
|
||||
if (this.sed?.activedType !== "seckill") {
|
||||
await this.refreshDirectSettle(this.getCouponUserId(this.selectedCoupon));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const resp = await getSettleList({ cartIds: this.ids });
|
||||
const settleParams = { cartIds: this.ids };
|
||||
const couponUserId = this.getCouponUserId(this.selectedCoupon);
|
||||
if (couponUserId) settleParams.couponUserId = couponUserId;
|
||||
const resp = await getSettleList(settleParams);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
const shops = data.shops;
|
||||
@@ -820,7 +886,9 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null; // 支付方式
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -965,6 +1033,9 @@ export default {
|
||||
) {
|
||||
params["password"] = CryptoJS.MD5(this.payPwd).toString();
|
||||
}
|
||||
if (this.selectedCoupon) {
|
||||
params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
|
||||
}
|
||||
resp = await settle(params);
|
||||
}
|
||||
|
||||
@@ -978,6 +1049,9 @@ export default {
|
||||
) {
|
||||
params["password"] = CryptoJS.MD5(this.payPwd).toString();
|
||||
}
|
||||
if (this.selectedCoupon) {
|
||||
params["couponUserId"] = this.getCouponUserId(this.selectedCoupon);
|
||||
}
|
||||
resp = await settle(params);
|
||||
}
|
||||
|
||||
@@ -1054,6 +1128,10 @@ export default {
|
||||
cartIds: this.ids,
|
||||
addrId: this.selectAddress.id,
|
||||
};
|
||||
const couponUserId = this.getCouponUserId(this.selectedCoupon);
|
||||
if (couponUserId) {
|
||||
params.couponUserId = couponUserId;
|
||||
}
|
||||
const resp = await getSettleList(params);
|
||||
if (resp && resp.bizcode === 100) {
|
||||
const data = resp.data;
|
||||
@@ -1067,7 +1145,9 @@ export default {
|
||||
}
|
||||
data.shops = shops;
|
||||
data.paymentMethod = null;
|
||||
data.amountBeforeCoupon = Number(data.amount || 0) + Number(data.couponDiscount || 0);
|
||||
this.orderInfo = data;
|
||||
this.rawOrderAmount = Number(data.amountBeforeCoupon) || 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -1083,9 +1163,54 @@ export default {
|
||||
url: "/pages/other_package/productInfo/productInfo?id=" + item.goodsId,
|
||||
});
|
||||
},
|
||||
handleCouponSelect(coupon) {
|
||||
async handleCouponSelect(coupon) {
|
||||
const couponUserId = this.getCouponUserId(coupon);
|
||||
if (coupon && !couponUserId) {
|
||||
this.$refs.uToastRef.show({ type: "error", message: "优惠券信息无效，请刷新后重试" });
|
||||
return;
|
||||
}
|
||||
const threshold = Number(coupon?.thresholdAmount || 0);
|
||||
const orderAmount = Number(this.orderInfo.amountBeforeCoupon || this.rawOrderAmount || this.orderInfo.amount || 0);
|
||||
if (coupon && orderAmount < threshold) {
|
||||
this.$refs.uToastRef.show({ type: "error", message: `订单金额未满${threshold}元，该优惠券不可用` });
|
||||
return;
|
||||
}
|
||||
|
||||
let settled = false;
|
||||
if (this.sed) {
|
||||
settled = await this.refreshDirectSettle(couponUserId);
|
||||
} else {
|
||||
settled = await this.getOrder(couponUserId);
|
||||
}
|
||||
if (settled === false) return;
|
||||
this.selectedCoupon = coupon;
|
||||
},
|
||||
async refreshDirectSettle(couponUserId) {
|
||||
if (!this.sed || !this.sed.specsId) return false;
|
||||
const resp = await getDirectSettleList({
|
||||
goodsId: this.sed.id,
|
||||
specsId: this.sed.specsId.id,
|
||||
goodsNum: this.orderInfo.shops?.[0]?.addrTimes?.[0]?.goods?.[0]?.num || this.sed.goodsNum || 1,
|
||||
couponUserId: couponUserId || undefined,
|
||||
});
|
||||
if (!resp || resp.bizcode !== 100) {
|
||||
this.$refs.uToastRef.show({
|
||||
type: "error",
|
||||
message: (resp && resp.msg) || "优惠券结算失败，请稍后重试",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
this.orderInfo.amount = resp.data.amount;
|
||||
this.orderInfo.couponDiscount = resp.data.couponDiscount || 0;
|
||||
this.orderInfo.amountBeforeCoupon = Number(resp.data.amount || 0) + Number(resp.data.couponDiscount || 0);
|
||||
this.orderInfo.availableCoupons = resp.data.availableCoupons || [];
|
||||
this.orderInfo.allCoupons = resp.data.allCoupons || resp.data.availableCoupons || [];
|
||||
this.rawOrderAmount = Number(this.orderInfo.amountBeforeCoupon) || 0;
|
||||
return true;
|
||||
},
|
||||
getCouponUserId(coupon) {
|
||||
return coupon && (coupon.couponUserId || coupon.id || null);
|
||||
},
|
||||
/**
|
||||
* 去充值
|
||||
*/
|
||||
@@ -1135,6 +1260,34 @@ export default {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
.preview_coupon_tag {
|
||||
display: inline-block !important;
|
||||
font-size: 20rpx !important;
|
||||
color: #ffffff !important;
|
||||
background-color: #ff2442 !important;
|
||||
border: none !important;
|
||||
border-radius: 4rpx !important;
|
||||
padding: 0 8rpx !important;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 220rpx !important;
|
||||
flex-shrink: 0 !important;
|
||||
font-weight: 500 !important;
|
||||
box-sizing: border-box !important;
|
||||
margin-right: 8rpx !important;
|
||||
}
|
||||
|
||||
.preview_coupon_price {
|
||||
font-size: 30rpx !important;
|
||||
color: #ff2442 !important;
|
||||
font-weight: bold !important;
|
||||
margin: 0 8rpx !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.seckill-tag {
|
||||
background: #7934F6;
|
||||
border-radius: 4rpx;
|
||||
@@ -1416,4 +1569,4 @@ export default {
|
||||
color: $app-bt-bj;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user