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

feat：0820需求

Browse Source
This commit is contained in:
charles
2026-08-21 14:10:43 +08:00
parent 619c0cacc5
commit e8d4fd6cd4
31 changed files with 9112 additions and 3658 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/other_package/productInfo/productInfo.vue
+469 -3
View File
@@ -10,8 +10,8 @@
<template #indicator>
<view class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
</view>
<qiaobao-assistant page-key="pages/other_package/productInfo/productInfo" title="商品详情" />
</view>
</template>
</up-swiper>
@@ -84,6 +84,22 @@
</view>
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<!-- 领券栏 (图一高保真) -->
<view class="concrete_item concrete_item_but" v-if="goodsCouponList && goodsCouponList.length > 0"
@click="couponPopupShow = true">
<view class="concrete_item_">
<view class="concrete_item_title">领券</view>
<view class="concrete_item_value coupon_tags_preview">
<text v-for="(cItem, cIdx) in goodsCouponList.slice(0, 3)" :key="cItem.templateId || cIdx"
class="preview_coupon_tag">
{{ cItem.title || '优惠券' }}
</text>
</view>
</view>
<up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<!-- <view class="concrete_item">
<view class="concrete_item_">
<view class="concrete_item_title">收货地址</view>
@@ -347,6 +363,75 @@
<EvaluateDialog ref="evaluateDialog" v-if="evaluateDialogShow" :show="evaluateDialogShow"
@close="evaluateDialogShow = false" :evalId="id" :mainGraph="orderInfo.mainGraph" :name="orderInfo.name">
</EvaluateDialog>
<!-- 优惠券弹窗 (图二高保真) -->
<up-popup v-model:show="couponPopupShow" mode="bottom" :round="16" :closeable="true" :safeAreaInsetBottom="true"
@close="couponPopupShow = 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 goodsCouponList" :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="onReceiveGoodsCoupon(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="couponPopupShow = false">
确定
</view>
</view>
</view>
</up-popup>
<view class="hideCanvasView">
<canvas id="myCanvas" canvas-id="myCanvas" :style="{
height: bgObj.height + 'px',
@@ -358,6 +443,7 @@
<script>
import { getGoodsDetail, addGoods, getGoodsSpecs, getGoodsSpecsInfo } from "@/api/product.js";
import { getGoodsCouponList, receiveCoupon } from "@/api/coupon.js";
import { getValue, PRODUCT_DELIVERY_TIME, ACTIVITY_TYPE } from "@/utils/enumUtils.js";
import { copyData } from "@/utils/index.js";
import Evaluation from "@/pages/other_package/productInfo/evaluation.vue";
@@ -400,6 +486,8 @@ export default {
id: 0,
shareShow: false,
addressShow: false, // 收件地址选择
couponPopupShow: false, // 优惠券弹框显示 (图二)
goodsCouponList: [], // 商品可用优惠券列表
evaluateDialogShow: false, // 评价弹框显示
shareOpen: false,
tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
@@ -1000,6 +1088,7 @@ export default {
/<img([^>]*?)>/gi,
'<img$1 style="max-width:100%;height:auto;display:block;" loading="lazy">'
);
this.fetchGoodsCouponList();
}
},
/**
@@ -1396,6 +1485,104 @@ export default {
onGoMore() {
this.evaluateDialogShow = true;
},
// 获取商品优惠券列表
async fetchGoodsCouponList() {
if (!this.id) return;
try {
const res = await getGoodsCouponList({ goodsId: this.id });
if (res && res.bizcode === 100) {
this.goodsCouponList = res.data || [];
}
} catch (e) {
console.error("获取商品优惠券失败:", e);
}
},
// 弹窗中点击“立即领取”
async onReceiveGoodsCoupon(coupon, index) {
const templateId = coupon.templateId || coupon.id;
if (!templateId) return;
try {
const res = await receiveCoupon({ templateId });
if (res && res.bizcode === 100) {
uni.showToast({
title: "领取成功",
icon: "success",
});
this.$set(this.goodsCouponList[index], "received", true);
this.$set(this.goodsCouponList[index], "receiveStatus", 1);
} else {
uni.showToast({
title: res?.msg || "领取失败",
icon: "none",
});
}
} catch (e) {
console.error("领取优惠券失败:", e);
uni.showToast({
title: "领取失败，请重试",
icon: "none",
});
}
},
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>
@@ -1978,9 +2165,288 @@ export default {
top: 10000px;
left: 10000px;
z-index: 1000000000000;
// background-color: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
}
/* 领券预览标签样式 (图一高保真) */
.coupon_tags_preview {
display: flex;
align-items: center;
gap: 12rpx;
overflow: hidden;
max-width: 520rpx;
.preview_coupon_tag {
display: inline-block;
font-size: 22rpx;
color: #ff2442;
background: #ffe4e6;
border: 1px solid #ff99a4;
border-radius: 6rpx;
padding: 2rpx 12rpx;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 170rpx;
flex-shrink: 0;
}
}
/* 领券弹窗组件 (图二高保真) */
.goods_coupon_popup_container {
background-color: #ffffff;
border-radius: 32rpx 32rpx 0 0;
padding: 32rpx 24rpx 40rpx 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
.popup_header {
position: relative;
text-align: center;
margin-bottom: 24rpx;
.popup_title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
}
.popup_coupon_scroll {
max-height: 700rpx;
min-height: 300rpx;
.popup_coupon_list {
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;
display: flex;
align-items: center;
background: rgba(253, 28, 36, 0.06);
border-radius: 16rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
&.card-disabled {
background: #f5f5f5 !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;
.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: #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 20rpx 20rpx 24rpx;
.info-content {
flex: 1;
min-width: 0;
margin-right: 12rpx;
.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;
}
}
.btn-box {
flex-shrink: 0;
.action-btn {
width: 130rpx;
height: 54rpx;
line-height: 54rpx;
text-align: center;
font-size: 24rpx;
font-weight: bold;
border-radius: 8rpx;
box-sizing: border-box;
&.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>