charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat:优惠券

Browse Source
This commit is contained in:
黄泽群
2026-07-09 14:11:16 +08:00
committed by charles
parent 2103d00b3d
commit ab30c06870
5 changed files with 499 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages.json
+6
View File
@@ -563,6 +563,12 @@
"navigationStyle": "custom"
}
},
{
"path": "productInfo/evaluateDetail",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pointsRedemption/pointsRedemption",
"style": {
pages/order_package/order_submit/cpoun-dialog.vue
+383
View File
@@ -0,0 +1,383 @@
<template>
<view class="content">
<up-popup
:show="show"
:round="20"
:closeOnClickOverlay="false"
:closeable="true"
:safeAreaInsetBottom="false"
@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="activeTab = 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">
<view
class="coupon-card"
v-for="(coupon, index) in filteredCoupons"
:key="index"
:class="{ 'disabled': coupon.status === 'expired' }"
>
<!-- 左侧：金额与门槛 -->
<view class="card-left">
<view class="price-box">
<text class="currency">¥</text>
<text class="amount">{{ coupon.amount }}</text>
</view>
<text class="condition">{{ coupon.condition }}</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="title">{{ coupon.title }}</view>
<view class="description">{{ coupon.description }}</view>
<!-- 状态/倒计时文本 -->
<view v-if="coupon.status === 'active'" class="countdown">
仅剩 {{ coupon.timeLeft }}
</view>
<view v-else class="expired-text">
已失效
</view>
</view>
<!-- 按钮：仅在有效状态下显示 -->
<view v-if="coupon.status === 'active'" class="use-btn" @click="useCoupon(coupon)">
使用
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</up-popup>
</view>
</template>
<script>
export default {
name: "CouponDialog",
props: {
show: {
type: Boolean,
default: false,
},
},
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"
},
],
};
},
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');
}
}
},
methods: {
handleClose() {
this.$emit("close");
},
useCoupon(coupon) {
this.$emit("select", coupon);
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.coupon-popup {
height: 85vh;
background-color: #f6f6f6;
border-radius: 20rpx 20rpx 0 0;
display: flex;
flex-direction: column;
}
.popup-header {
text-align: center;
font-size: 32rpx;
background-color: #ffffff;
color: #333333;
font-weight: 500;
padding: 30rpx 0;
position: relative;
border-radius: 20rpx 20rpx 0 0;
}
.tab-container {
display: flex;
width: 100%;
background-color: #ffffff;
height: 88rpx;
align-items: center;
padding-left: 28rpx;
box-sizing: border-box;
border-top: 2rpx solid #f6f6f6;
.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: #7f7f7f;
transition: all 0.2s ease;
}
&.active {
.tab-text {
color: #7A35F6;
font-weight: bold;
}
}
.active-line {
position: absolute;
bottom: 4rpx;
width: 44rpx;
height: 4rpx;
background-color: #7A35F6;
border-radius: 2rpx;
}
}
}
.coupon-scroll {
flex: 1;
height: 0;
overflow: hidden;
}
.coupon-list {
padding: 28rpx 28rpx;
box-sizing: border-box;
display: flex;
background-color: #ffffff;
flex-direction: column;
gap: 32rpx;
.coupon-card {
background: rgba(102,102,102,0.06);
border-radius: 16rpx;
display: flex;
height: 196rpx;
position: relative;
.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;
}
}
.condition {
font-size: 24rpx;
color: #ff1224;
margin-top: 10rpx;
}
}
.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;
}
}
.card-right {
flex: 1;
padding: 26rpx 24rpx 24rpx 36rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.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;
font-size: 28rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-left: 16rpx;
font-weight: 500;
&:active {
opacity: 0.8;
}
}
}
&.disabled {
background-color: #f4f4f4;
.card-left {
.price-box { color: #9c9c9c; }
.condition { color: #9c9c9c; }
}
.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;
}
}
}
}
}
</style>
pages/order_package/order_submit/order_submit.vue
+74 -30
View File
@@ -134,7 +134,9 @@
<view class="order_way_warp_two" v-if="isCoupon">
<view class="price-view">
<text class="text-32 text-zu">数字积分余额</text>
<text class="text-32 text-zu text-bold">{{ couponData.balance || 0 }}</text>
<text class="text-32 text-zu text-bold">{{
couponData.balance || 0
}}</text>
</view>
<view class="price-view">
@@ -169,19 +171,32 @@
<view class="price-view">
<text class="text-32 text-zu">商品总价</text>
<text class="text-32 text-zu text-bold" v-if="isCoupon">
{{ `${buyCouponvalue}数字积分+${orderInfo.amount - (orderInfo.postage || 0) +
(orderInfo.enterpriseAmount
|| 0)}元` }}
{{
`${buyCouponvalue}数字积分+${orderInfo.amount -
(orderInfo.postage || 0) +
(orderInfo.enterpriseAmount || 0)
}元`
}}
</text>
<text class="text-32 text-zu text-bold" v-else>￥{{ orderInfo.amount - orderInfo.postage +
(orderInfo.enterpriseAmount
|| 0) }}</text>
<text class="text-32 text-zu text-bold" v-else>￥{{
orderInfo.amount -
orderInfo.postage +
(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">
<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>
<up-image src="/static/common/right.png" width="12" height="12" bgColor="#f1f6ff00"
style="display:inline-block;vertical-align: middle;"></up-image>
</view>
</view>
<view class="price-view" v-if="isCoupon">
<text class="text-32 text-zu">数字积分</text>
<text class="text-32 text-zu text-bold">{{ buyCouponvalue }}数字积分</text>
@@ -270,6 +285,9 @@
</u-keyboard>
<up-toast ref="uToastRef"></up-toast>
<!-- 优惠券选择弹框 -->
<CouponDialog :show="couponShow" @close="couponShow = false" @select="handleCouponSelect"></CouponDialog>
</view>
</template>
@@ -288,7 +306,7 @@ import {
getSettleList,
settle,
settlementOrder,
updateGoodsNum
updateGoodsNum,
} from "@/api/cart.js";
import { getSupportPay } from "@/api/order.js";
import { feedback } from "@/api/payment.js";
@@ -303,8 +321,14 @@ import {
} from "@/utils/payUtils.js";
import CryptoJS from "crypto-js";
import CouponDialog from "./cpoun-dialog.vue";
export default {
components: {
Address,
Header,
CouponDialog,
},
computed: {
PRODUCT_DELIVERY_TIME() {
return PRODUCT_DELIVERY_TIME;
@@ -325,12 +349,6 @@ export default {
}
return num;
},
},
components: {
Address,
Header,
},
data() {
return {
@@ -368,6 +386,8 @@ export default {
allOrderInfo: {}, // 所有订单信息
buyCouponvalue: 0, // 实付数字积分积分
buyCouponAmount: 0, // 实付数字积分对应的钱
couponShow: false, // 优惠券弹框显示
selectedCoupon: null, // 选中的优惠券
};
},
async onLoad(option) {
@@ -376,7 +396,7 @@ export default {
if (option.address) {
this.defaultAddress = option.address;
}
console.log('-------', option.isCoupon)
console.log("-------", option.isCoupon);
if (option.isCoupon) {
this.isCoupon = option.isCoupon;
}
@@ -417,12 +437,19 @@ export default {
assembleAddress,
// 实付数字积分
onBuyCouponvalue(currentQuantity) {
this.buyCouponvalue = Number((this.allOrderInfo.buyDeductionValue * (currentQuantity || 1)).toFixed(2)) || 0;
this.buyCouponvalue =
Number(
(
this.allOrderInfo.buyDeductionValue * (currentQuantity || 1)
).toFixed(2),
) || 0;
},
// 实付数字积分对应的钱
onBuyCouponAmount() {
this.buyCouponAmount = Number((this.sed.goodsNum * this.allOrderInfo.buyDeduction).toFixed(2)) || 0;
this.buyCouponAmount =
Number(
(this.sed.goodsNum * this.allOrderInfo.buyDeduction).toFixed(2),
) || 0;
},
async addressList() {
const res = await getAddress();
@@ -502,7 +529,7 @@ export default {
} else {
parmas["types"] = "1,2,3";
}
console.log('parmas-----', this.isCoupon)
console.log("parmas-----", this.isCoupon);
if (this.isCoupon) {
parmas["types"] = "1,2,3";
@@ -522,8 +549,8 @@ export default {
// const balanceFlag = data.some(item => item.type === "balance" && item.balance < amount);
// this.isShowBalance = balanceFlag;
// }
this.wayOption = data.filter(item => item.type !== "vcoin");
this.couponData = data.filter(item => item.type === "vcoin")[0] || {};
this.wayOption = data.filter((item) => item.type !== "vcoin");
this.couponData = data.filter((item) => item.type === "vcoin")[0] || {};
console.log("getWayOption", this.wayOption, this.couponData);
}
},
@@ -544,7 +571,7 @@ export default {
let address = null;
if (this.defaultAddress) {
address = this.addressListOne.find(
(item) => item.id == this.defaultAddress
(item) => item.id == this.defaultAddress,
);
} else {
if (this.addressListOne.length) {
@@ -631,14 +658,28 @@ export default {
},
],
};
console.log('this.defaultAddress', this.defaultAddress, this.addressListOne)
if (this.defaultAddress && this.addressListOne && this.addressListOne.length) {
let arr = this.addressListOne.filter(i => i.id == this.defaultAddress);
console.log(
"this.defaultAddress",
this.defaultAddress,
this.addressListOne,
);
if (
this.defaultAddress &&
this.addressListOne &&
this.addressListOne.length
) {
let arr = this.addressListOne.filter(
(i) => i.id == this.defaultAddress,
);
if (arr.length) {
this.orderInfo.address = arr[0];
}
}
if (!this.orderInfo.address && this.addressListOne && this.addressListOne.length) {
if (
!this.orderInfo.address &&
this.addressListOne &&
this.addressListOne.length
) {
this.orderInfo.address = this.addressListOne[0];
}
this.allOrderInfo = data;
@@ -711,7 +752,7 @@ export default {
goodsNum: currentQuantity,
};
const result = await updateGoodsNum(params);
console.log("-----1")
console.log("-----1");
if (result && result.bizcode === 100) {
this.orderInfo.shops[index].addrTimes[addIndex].goods[pIndex].num =
currentQuantity;
@@ -845,7 +886,7 @@ export default {
params["goodsId"] = this.sed.id;
params["specsId"] = this.sed.specsId.id;
params["goodsNum"] = this.orderInfo.shops[0].addrTimes[0].goods[0].num;
if (this.isCoupon) params.payway2 = 'vcoin';
if (this.isCoupon) params.payway2 = "vcoin";
resp = await settlementOrder(params);
} else {
@@ -964,6 +1005,9 @@ export default {
url: "/pages/other_package/productInfo/productInfo?id=" + item.goodsId,
});
},
handleCouponSelect(coupon) {
this.selectedCoupon = coupon;
},
/**
* 去充值
*/
@@ -1284,4 +1328,4 @@ export default {
color: $app-bt-bj;
}
}
</style>
</style>
pages/other_package/coupon/coupon.vue
+30 -36
View File
@@ -109,11 +109,6 @@ export default {
},
computed: {
filteredCoupons() {
if (this.currentTab === 1) {
return this.coupons.filter(item => item.status === 'active');
} else if (this.currentTab === 2) {
return this.coupons.filter(item => item.status === 'expired');
}
return this.coupons;
}
},
@@ -133,21 +128,22 @@ export default {
<style lang="scss" scoped>
.content {
background-color: #f7f8fa;
background-color: #F5F5F5;
min-height: 100vh;
}
/* ================= 顶部分类 Tab 栏像素级还原 ================= */
.tab-container {
display: flex;
width: 100%;
background-color: #ffffff;
padding: 0 40rpx;
height: 100rpx;
height: 88rpx;
align-items: center;
border-bottom: 2rpx solid #fcfcfc;
padding-left: 28rpx; /* 关键：左侧对齐优惠券卡片的边距 */
box-sizing: border-box;
border-top: 2rpx solid #f6f6f6; /* 隐约的底部分割线 */
.tab-item {
margin-right: 54rpx;
margin-right: 48rpx; /* 增大字与字之间的间距 */
position: relative;
height: 100%;
display: flex;
@@ -158,41 +154,40 @@ export default {
.tab-text {
font-size: 28rpx;
color: #9c9c9c; /* 未激活时为较淡的灰色 */
color: #7f7f7f; /* 未激活时是略深一点的灰色 */
transition: all 0.2s ease;
}
&.active {
.tab-text {
color: #692bc7; /* 完美的深紫激活色 */
color: #7A35F6; /* 完美还原原图中的亮紫色 */
font-weight: bold;
}
}
/* 独立的底部短下划线控制 */
/* 底部指示线：缩短宽度并适当下移 */
.active-line {
position: absolute;
bottom: 12rpx;
width: 52rpx; /* 缩短下划线宽度，完美贴合字宽 */
height: 5rpx; /* 加粗 */
background-color: #692bc7;
border-radius: 4rpx;
bottom: 4rpx; /* 贴近底部边缘 */
width: 44rpx; /* 缩短下划线宽度，原图横线比“全部”两个字还要窄一点 */
height: 4rpx; /* 适中的粗细 */
background-color: #7A35F6;
border-radius: 2rpx;
}
}
}
/* ================= 优惠券列表区域 ================= */
.coupon-list {
padding: 30rpx 24rpx;
padding: 28rpx 28rpx;
box-sizing: border-box;
display: flex;
background-color: #ffffff;
flex-direction: column;
gap: 24rpx;
gap: 32rpx;
}
/* 优惠券单卡片基本样式 */
.coupon-card {
background-color: #fff4f4; /* 淡淡的红粉色底 */
background: rgba(102,102,102,0.06);
border-radius: 16rpx;
display: flex;
height: 196rpx;
@@ -209,14 +204,14 @@ export default {
.price-box {
display: flex;
align-items: flex-end; /* 底部对齐 */
align-items: flex-end;
color: #ff1224;
font-weight: bold;
margin-bottom: 10rpx;
.currency {
font-size: 26rpx;
font-size: 32rpx;
margin-right: 2rpx;
margin-bottom: 6rpx; /* 让¥符号优雅落地 */
}
.amount {
@@ -243,7 +238,7 @@ export default {
.divider-line {
width: 0;
height: 100%;
border-left: 2rpx dashed #ffcbd0;
border-left: 2rpx dashed rgba(253,28,36,0.3);
}
/* 模拟卡片边缘剪票口的半圆凹槽 */
@@ -281,16 +276,15 @@ export default {
overflow: hidden;
.title {
font-size: 30rpx;
font-size: 36rpx;
color: #2c2c2c;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description {
font-size: 24rpx;
font-size: 28rpx;
color: #6a6a6a;
margin-top: 8rpx;
white-space: nowrap;
@@ -299,7 +293,7 @@ export default {
}
.countdown {
font-size: 22rpx;
font-size: 24rpx;
color: #ff5260;
margin-top: 14rpx;
}
@@ -307,12 +301,12 @@ export default {
/* 立即使用按钮 */
.use-btn {
width: 120rpx;
width: 116rpx;
height: 56rpx;
background-color: #ff1a2e;
background-color: #FD1C24;
color: #ffffff;
font-size: 24rpx;
border-radius: 12rpx; /* 原图接近微圆角矩形，而非纯半圆 */
font-size: 28rpx;
border-radius: 8rpx; /* 原图接近微圆角矩形，而非纯半圆 */
display: flex;
align-items: center;
justify-content: center;
pages/other_package/productInfo/evaluate-dialog.vue
+6 -1
View File
@@ -127,7 +127,7 @@ export default {
},
handleClick(item) {
uni.navigateTo({
url: "/pages/other_package/productInfo/evaluateDetail?item=" + JSON.stringify(item),
url: "/pages/other_package/productInfo/evaluateDetail",
});
},
},
@@ -152,6 +152,7 @@ export default {
padding: 30rpx 0 20rpx;
position: relative;
border-radius: 20rpx 20rpx 0 0;
margin: 0 20rpx;
}
.filter-tabs {
@@ -159,6 +160,8 @@ export default {
background-color: #ffffff;
padding: 10rpx 30rpx 30rpx;
gap: 24rpx; /* 标签之间的标准间距 */
margin: 0 20rpx;
border-top: 1rpx solid #f6f6f6;
.filter-tab {
text-align: center;
@@ -193,6 +196,8 @@ export default {
.eval-item {
padding: 30rpx 30rpx 20rpx;
background-color: #ffffff;
border-radius: 16rpx;
margin: 0 20rpx;
}
.user-info-row {