refactor: 优化促销商品列表和电子卡券逻辑

- 更新促销商品列表组件,简化商品详情页跳转逻辑
- 移除不必要的礼品卡相关状态管理,确保电子卡券逻辑的清晰性
- 调整 utils/goodsType.js 中的卡密处理函数,专注于当前订单的卡密履约行
- 优化订单详情页的卡密展示逻辑,确保信息准确性
This commit is contained in:
田香琪
2026-08-05 13:48:21 +08:00
parent 370c63afcd
commit eb40916cf7
4 changed files with 165 additions and 193 deletions

View File

@@ -1,148 +1,145 @@
<template>
<div>
<div v-for="(item, index) in res" :key="index" class="goods-row" @click="navigateToDetailPage(item)">
<div class="flex goods-col">
<div class="goods-img">
<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
</div>
<div class="goods-detail">
<div class="title clamp3">{{ item.goodsName }}</div>
<div class='flex flex-a-c flex-j-sb'>
<view class="price-box">
<!-- 秒杀 / 拼团 -->
<div class="price" v-if="!type && item.price!=undefined">
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
goodsFormatPrice(item.price )[1]
}}
</div>
<!-- 砍价 -->
<div class="price" v-if="type && item.purchasePrice!=undefined">
最低
¥<span class="price-int">{{ goodsFormatPrice(item.purchasePrice )[0] }} </span>.{{
goodsFormatPrice(item.purchasePrice )[1]
}}
</div>
<!-- 兜底策略如果金额是0 -->
<div class="price" v-if="!item.price && !type">
¥<span class="price-int">0 </span>.00
</div>
</view>
<div>
<image class="buy" src="/static/buy.png"></image>
</div>
</div>
<div class='count-config' v-if="!type">
<text class="count-config-text">即将恢复{{ item.originalPrice}}</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useGoodsListCommon } from './common'
import { goodsFormatPrice } from '@/utils/filters.js'
const { navigateToDetailPage } = useGoodsListCommon()
const props = withDefaults(defineProps<{
res?: any[]
type?: string | null
}>(), {
res: () => [],
type: ''
})
// 跳转到商品详情(覆盖公共方法,增加砍价跳转)
const navigateToDetailPageOverride = (item: any) => {
if(props.type == 'kanJia'){
uni.navigateTo({
url: `/pages/promotion/bargain/detail?id=${item.id}`,
})
return
}
navigateToDetailPage({
id: item.skuId,
goodsId: item.goodsId,
})
}
</script>
<style lang='scss' scoped>
.buy {
width: 152rpx;
height: 108rpx;
}
.flex-j-sb {
width: 100%;
}
.goods-row {
background: #fff;
padding: 16rpx;
>.goods-col {
display: flex;
>.goods-img {
overflow: hidden;
flex: 4;
}
>.goods-detail {
flex: 7;
}
}
}
.goods-detail {
margin: 0 20rpx;
>.title {
font-size: $font-base;
color: $font-color-dark;
line-height: 1.5;
height: 86rpx;
padding: 10rpx 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.count-config {
padding: 5rpx 0;
color: #666;
display: flex;
font-size: 24rpx;
letter-spacing:2rpx;
padding-left: 10rpx;
.count-config-text {
font-size: 24rpx;
}
}
}
.price-box {
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
font-size: 24rpx;
color: $font-color-light;
>.price {
font-size: 26rpx;
line-height: 1;
color: $main-color;
font-weight: bold;
.price-int {
font-size: 48rpx;
}
}
}
</style>
<template>
<div>
<div v-for="(item, index) in res" :key="index" class="goods-row" @click="onItemClick(item)">
<div class="flex goods-col">
<div class="goods-img">
<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.goodsImage || item.thumbnail">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
</div>
<div class="goods-detail">
<div class="title clamp3">{{ item.goodsName }}</div>
<div class='flex flex-a-c flex-j-sb'>
<view class="price-box">
<!-- 秒杀 / 拼团 -->
<div class="price" v-if="!type && item.price!=undefined">
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
goodsFormatPrice(item.price )[1]
}}
</div>
<!-- 砍价 -->
<div class="price" v-if="type && item.purchasePrice!=undefined">
最低
¥<span class="price-int">{{ goodsFormatPrice(item.purchasePrice )[0] }} </span>.{{
goodsFormatPrice(item.purchasePrice )[1]
}}
</div>
<!-- 兜底策略如果金额是0 -->
<div class="price" v-if="!item.price && !type">
¥<span class="price-int">0 </span>.00
</div>
</view>
<div>
<image class="buy" src="/static/buy.png"></image>
</div>
</div>
<div class='count-config' v-if="!type">
<text class="count-config-text">即将恢复{{ item.originalPrice}}</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { goodsFormatPrice } from '@/utils/filters.js'
const props = withDefaults(defineProps<{
res?: any[]
type?: string | null
}>(), {
res: () => [],
type: ''
})
// 促销列表跳转:拼团/秒杀 PromotionGoods 用 skuId砍价走活动详情
function onItemClick(item: any) {
if (props.type == 'kanJia') {
uni.navigateTo({
url: `/pages/promotion/bargain/detail?id=${item.id}`,
})
return
}
const skuId = item.skuId || item.id
uni.navigateTo({
url: `/pages/product/goods?id=${skuId}&goodsId=${item.goodsId}`,
})
}
</script>
<style lang='scss' scoped>
.buy {
width: 152rpx;
height: 108rpx;
}
.flex-j-sb {
width: 100%;
}
.goods-row {
background: #fff;
padding: 16rpx;
>.goods-col {
display: flex;
>.goods-img {
overflow: hidden;
flex: 4;
}
>.goods-detail {
flex: 7;
}
}
}
.goods-detail {
margin: 0 20rpx;
>.title {
font-size: $font-base;
color: $font-color-dark;
line-height: 1.5;
height: 86rpx;
padding: 10rpx 0 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.count-config {
padding: 5rpx 0;
color: #666;
display: flex;
font-size: 24rpx;
letter-spacing:2rpx;
padding-left: 10rpx;
.count-config-text {
font-size: 24rpx;
}
}
}
.price-box {
margin-top: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 10rpx;
font-size: 24rpx;
color: $font-color-light;
>.price {
font-size: 26rpx;
line-height: 1;
color: $main-color;
font-weight: bold;
.price-int {
font-size: 48rpx;
}
}
}
</style>

View File

@@ -16,7 +16,7 @@
class="card-key-fulfill-block"
>
<view v-if="cardKeyFulfillLines.length > 1" class="card-key-fulfill-title">
{{ line.goodsName || (line.isGift ? '满赠电子卡券' : '电子卡券') }}
{{ line.goodsName || '电子卡券' }}
</view>
<view
class="card-key-item"
@@ -51,7 +51,7 @@
<script setup lang="ts">
/**
* 电子卡券卡密二级页(原型 P-09
* 数据来源GET /buyer/order/order/{orderSn} → orderItems[].cardKeys(明文 cardSecret
* 仅展示当前 orderSn 对应订单的 orderItems[].cardKeys;满赠赠品请进赠品订单查看
*/
import { ref, computed } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
@@ -69,27 +69,23 @@ const orderSn = ref('')
const loading = ref(true)
const errorMessage = ref('')
const orderItems = ref<any[]>([])
const giftECouponOrders = ref<any[]>([])
const orderStatus = ref('')
const cardKeyFulfillLines = computed(() =>
collectCardKeyFulfillLines(orderItems.value, giftECouponOrders.value).filter(
collectCardKeyFulfillLines(orderItems.value).filter(
(line) => line.status === CARD_KEY_FULFILL_STATUS.DELIVERED && line.cardKeys.length
)
)
const cardKeyRows = computed(() =>
flattenOrderCardKeys(orderItems.value, false, giftECouponOrders.value)
)
const cardKeyRows = computed(() => flattenOrderCardKeys(orderItems.value))
const emptyMessage = computed(() => {
if (orderStatus.value === 'CANCELLED') {
return '订单已关闭,暂无卡密信息'
}
const pending = collectCardKeyFulfillLines(
orderItems.value,
giftECouponOrders.value
).find((line) => line.status !== CARD_KEY_FULFILL_STATUS.DELIVERED)
const pending = collectCardKeyFulfillLines(orderItems.value).find(
(line) => line.status !== CARD_KEY_FULFILL_STATUS.DELIVERED
)
if (pending) {
return resolveCardKeyFulfillMessage(pending)
}
@@ -126,15 +122,11 @@ function loadData(fromPullDown = false) {
return
}
const result = res.data.result
const isEcoupon = isECouponOrder(result?.order?.orderType)
const hasGiftEcoupon =
Array.isArray(result?.giftECouponOrders) && result.giftECouponOrders.length > 0
if (!isEcoupon && !hasGiftEcoupon) {
if (!isECouponOrder(result?.order?.orderType)) {
errorMessage.value = '该订单没有电子卡券卡密'
return
}
orderItems.value = result.orderItems || []
giftECouponOrders.value = result.giftECouponOrders || []
orderStatus.value = result.order?.orderStatus || ''
})
.catch(() => {

View File

@@ -312,19 +312,16 @@ const cancelList = ref<any[]>([])
const rogShow = ref(false)
const reason = ref('')
const orderPackage = ref<any>('')
const giftECouponOrders = ref<any[]>([])
// orderType=E_COUPON无物流/核销码,卡密见 cardKeyDetailAPI-B-01 orderItems[].cardKeys
// orderType=E_COUPON无物流/核销码;卡密见 cardKeyDetail仅本单 orderItems不含满赠子单
const isECouponOrder = computed(() => checkECouponOrder(order.value?.orderType))
const isNonPhysicalOrder = computed(() => checkNonPhysicalOrder(order.value?.orderType))
const ecouponCardKeyDelivered = computed(() =>
orderHasCardKeyContent(orderGoodsList.value, giftECouponOrders.value)
orderHasCardKeyContent(orderGoodsList.value)
)
const ecouponPendingMessage = computed(() => {
const pending = collectCardKeyFulfillLines(
orderGoodsList.value,
giftECouponOrders.value
).find((line) => line.status !== CARD_KEY_FULFILL_STATUS.DELIVERED)
const pending = collectCardKeyFulfillLines(orderGoodsList.value).find(
(line) => line.status !== CARD_KEY_FULFILL_STATUS.DELIVERED
)
return pending ? resolveCardKeyFulfillMessage(pending) : ''
})
@@ -412,7 +409,6 @@ function loadData(orderSnParam: string) {
order.value = result.order
orderGoodsList.value = result.orderItems
orderDetail.value = result
giftECouponOrders.value = result.giftECouponOrders || []
if (
result.order.deliveryMethod === 'LOGISTICS' &&
!checkECouponOrder(result.order.orderType) &&

View File

@@ -115,20 +115,16 @@ function normalizeCardKeyFulfillLine(source) {
status,
message: source.cardKeyFulfillMessage,
cardKeys,
isGift: !!source.isGift,
}
}
/** 汇总 E_COUPON 主单行 + 满赠子单摘要的履约行 */
export function collectCardKeyFulfillLines(orderItems = [], giftSummaries = []) {
/** 汇总当前订单 orderItems 的卡密履约行(仅本单;满赠赠品在赠品订单单独查看) */
export function collectCardKeyFulfillLines(orderItems = []) {
const lines = []
;(orderItems || []).forEach((item) => {
if (!isCardKeyFulfillApplicable(item)) return
lines.push(normalizeCardKeyFulfillLine(item))
})
;(giftSummaries || []).forEach((gift) => {
lines.push(normalizeCardKeyFulfillLine({ ...gift, isGift: true }))
})
return lines
}
@@ -143,19 +139,15 @@ function flattenCardKeyFulfillLines(lines, withGoodsName = false) {
return rows
}
/** 订单是否含已交付卡密(含满赠 E_COUPON 子单 */
export function orderHasCardKeyContent(orderItems, giftSummaries) {
const lines = collectCardKeyFulfillLines(orderItems, giftSummaries)
/** 当前订单是否含已交付卡密(仅 orderItems */
export function orderHasCardKeyContent(orderItems) {
const lines = collectCardKeyFulfillLines(orderItems)
return flattenCardKeyFulfillLines(lines).length > 0
}
/** 将 orderItems[].cardKeys 展平为明文列表DELIVERED 且含 cardSecret */
export function flattenOrderCardKeys(
orderItems,
withGoodsName = false,
giftSummaries
) {
const lines = collectCardKeyFulfillLines(orderItems, giftSummaries)
export function flattenOrderCardKeys(orderItems, withGoodsName = false) {
const lines = collectCardKeyFulfillLines(orderItems)
if (lines.some((line) => line.status)) {
return flattenCardKeyFulfillLines(lines, withGoodsName)
}
@@ -168,8 +160,3 @@ export function flattenOrderCardKeys(
})
return rows
}
/** 是否已发卡(兼容旧调用;含满赠子单) */
export function isCardKeyDelivered(orderItems, giftSummaries) {
return orderHasCardKeyContent(orderItems, giftSummaries)
}