diff --git a/components/PaymentPopup.vue b/components/PaymentPopup.vue index feaf19f..5ebbd72 100755 --- a/components/PaymentPopup.vue +++ b/components/PaymentPopup.vue @@ -65,21 +65,22 @@ 多次卡不可与优惠券同享 - + {{ selectedCoupon.name }} (-¥{{ effectiveCouponDiscount.toFixed(2) }}) (最高抵扣50%) - 暂无优惠券可用 + 暂无优惠券可用 + 不使用优惠券 请选择优惠券 @@ -129,7 +130,10 @@ const props = defineProps({ coupons: { type: Array, default: () => [] }, propCards: { type: Array, default: () => [] }, showCards: { type: Boolean, default: true }, - gamePasses: { type: Object, default: () => null } // { total_remaining, passes } + gamePasses: { type: Object, default: () => null }, // { total_remaining, passes } + couponOptional: { type: Boolean, default: false }, + defaultUseCoupon: { type: Boolean, default: true }, + defaultUseGamePass: { type: Boolean, default: true } }) const emit = defineEmits(['update:visible', 'confirm', 'cancel']) @@ -203,6 +207,20 @@ const couponIndex = ref(-1) const cardIndex = ref(-1) const useGamePass = ref(false) +const hasUsableCoupons = computed(() => Array.isArray(props.coupons) && props.coupons.length > 0) + +const couponOptions = computed(() => { + const list = Array.isArray(props.coupons) ? props.coupons : [] + if (!props.couponOptional) return list + return [{ id: 0, name: '不使用优惠券', amount: 0, noCoupon: true }, ...list] +}) + +const couponOptionalSelected = computed(() => props.couponOptional && Number(couponIndex.value) === 0) + +const couponPickerDisabled = computed(() => { + return useGamePass.value || !hasUsableCoupons.value +}) + // 次数卡余额 const gamePassRemaining = computed(() => { return props.gamePasses?.total_remaining || 0 @@ -211,8 +229,7 @@ const gamePassRemaining = computed(() => { // 监听弹窗打开,若有次数卡则默认选中 watch(() => props.visible, (newVal) => { if (newVal) { - // 若有次数卡,默认选中 - useGamePass.value = gamePassRemaining.value > 0 + useGamePass.value = props.defaultUseGamePass && gamePassRemaining.value > 0 } }) @@ -221,12 +238,20 @@ function toggleGamePass() { // Mutually Exclusive: If Game Pass is ON, clear Coupon. if (useGamePass.value) { couponIndex.value = -1 + } else { + resetCouponSelection() } } const selectedCoupon = computed(() => { - if (couponIndex.value >= 0 && props.coupons[couponIndex.value]) { - return props.coupons[couponIndex.value] + const index = Number(couponIndex.value) + if (Number.isNaN(index)) return null + if (props.couponOptional) { + if (index <= 0) return null + return props.coupons[index - 1] || null + } + if (index >= 0 && props.coupons[index]) { + return props.coupons[index] } return null }) @@ -262,24 +287,37 @@ const finalPayAmount = computed(() => { return Math.max(0, amt - effectiveCouponDiscount.value).toFixed(2) }) +function resetCouponSelection() { + if (useGamePass.value) { + couponIndex.value = -1 + return + } + if (!hasUsableCoupons.value) { + couponIndex.value = props.couponOptional ? 0 : -1 + return + } + if (props.couponOptional) { + couponIndex.value = props.defaultUseCoupon ? 1 : 0 + return + } + if (props.defaultUseCoupon && couponIndex.value < 0) { + couponIndex.value = 0 + } +} + watch( [() => props.visible, () => (Array.isArray(props.coupons) ? props.coupons.length : 0)], - ([vis, len]) => { + ([vis]) => { if (!vis) return cardIndex.value = -1 - if (len <= 0) { - couponIndex.value = -1 - return - } - if (couponIndex.value < 0) { - couponIndex.value = 0 - } + resetCouponSelection() }, { immediate: true } ) function onCouponChange(e) { - couponIndex.value = e.detail.value + const index = Number(e.detail.value) + couponIndex.value = Number.isNaN(index) ? -1 : index } function onCardChange(e) { diff --git a/pages-activity/activity/duiduipeng/index.vue b/pages-activity/activity/duiduipeng/index.vue index 673e776..b84142a 100755 --- a/pages-activity/activity/duiduipeng/index.vue +++ b/pages-activity/activity/duiduipeng/index.vue @@ -180,6 +180,9 @@ :propCards="propCards" :showCards="true" :gamePasses="gamePasses" + :couponOptional="true" + :defaultUseCoupon="false" + :defaultUseGamePass="false" @confirm="onPaymentConfirm" />