fix(merchant): 按原型展示核销优惠方式 (bug #24141)

shinnosuke

2026-08-06 35d430e5701590c21764491231d8334022d87e45

fix(merchant): 按原型展示核销优惠方式 (bug #24141)

 rencaika_merchant/pages/consume-input/consume-input.uvue

@@ -6,7 +6,7 @@
        <scroll-view v-else class="content" scroll-y="true">
            <view class="talent-card"><text class="talent-title">{{cardLevel}}用户</text><text class="talent-person">{{customerName}} {{customerMobile}}</text><text class="talent-benefit">当前权益：{{benefitText}}</text></view>
            <view class="amount-card"><text class="card-label">消费金额</text><view class="amount-input-row"><text class="currency">￥</text><input class="amount-input" type="digit" placeholder="0.00" :value="amountText" @input="onAmountInput" @blur="quoteCurrentAmount" /></view><text v-if="amountError.length > 0" class="field-error">{{amountError}}</text></view>
            <view class="method-card"><text class="card-label">优惠方式</text><view class="rule-list"><view v-for="rule in rules" :key="rule.id" class="rule-item" :class="rule.id == selectedRuleId ? 'rule-selected' : ''" @tap="selectRule(rule.id)"><view><text class="rule-name">{{rule.name}}</text><text class="rule-desc">{{rule.discountRate * 10}}折/{{cardLevel}}</text></view><text class="rule-check">{{rule.id == selectedRuleId ? '✓' : ''}}</text></view></view><text v-if="rules.length == 0" class="field-error">当前人才卡暂未配置可用优惠</text></view>
            <view class="method-card"><text class="card-label">优惠方式</text><view v-if="selectedRuleId.length > 0" class="benefit-tag-list"><text class="benefit-tag benefit-rule-tag">{{selectedRuleName()}}</text><text class="benefit-tag benefit-card-tag">{{cardLevel}}</text></view><text v-else class="field-error">当前人才卡暂未配置可用优惠</text></view>
            <view class="summary-card"><view class="summary-row"><text>原价</text><text>￥{{formatMoney(quote.originalAmount)}}</text></view><view class="summary-row"><text>优惠金额</text><text>- ￥{{formatMoney(quote.discountAmount)}}</text></view><view class="summary-row strong-row"><text>用户实付</text><text class="pay-amount">￥{{formatMoney(quote.payAmount)}}</text></view><view class="summary-row"><text>补贴金额</text><text>￥{{formatMoney(quote.subsidyAmount)}}</text></view></view>
            <view v-if="coupons.length > 0" class="method-card"><text class="card-label">可用优惠券</text><view v-for="coupon in coupons" :key="coupon.id" class="rule-item" :class="coupon.id == selectedCouponId ? 'rule-selected' : ''" @tap="selectCoupon(coupon.id)"><view><text class="rule-name">{{coupon.name}}</text><text class="rule-desc">立减 ￥{{formatMoney(coupon.couponAmount)}}</text></view><text class="rule-check">{{coupon.id == selectedCouponId ? '✓' : ''}}</text></view><view class="rule-item" @tap="selectCoupon('')"><text class="rule-name">不使用优惠券</text></view></view>
            <view class="content-bottom-space"></view>
@@ -43,6 +43,12 @@
    const amountValue = (): number => Number(amountText.value)
    const validAmount = (): boolean => /^\d+(\.\d{1,2})?$/.test(amountText.value) && amountValue() > 0
    const canSubmit = computed((): boolean => validAmount() && selectedRuleId.value.length > 0 && quote.value.payAmount >= 0 && quote.value.originalAmount > 0 && !submitting.value)
    const selectedRuleName = (): string => {
        for (let index = 0; index < rules.value.length; index++) {
            if (rules.value[index].id == selectedRuleId.value) return rules.value[index].name
        }
        return '人才专属优惠'
    }

    const resetQuote = () => { quote.value = { originalAmount: 0, discountAmount: 0, payAmount: 0, subsidyAmount: 0, ruleName: '' } }
    const cancelRequests = () => {
@@ -157,6 +163,10 @@
    .currency { color: #111827; font-size: 36rpx; line-height: 50rpx; font-weight: 700; }
    .amount-input { height: 88rpx; margin-left: 10rpx; flex: 1; color: #111827; font-size: 50rpx; line-height: 70rpx; font-weight: 700; }
    .field-error { display: block; margin-top: 12rpx; color: #EE5A5A; font-size: 23rpx; line-height: 33rpx; }
    .benefit-tag-list { display: flex; margin-top: 16rpx; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .benefit-tag { display: block; padding: 8rpx 18rpx; border-radius: 22rpx; font-size: 22rpx; line-height: 31rpx; font-weight: 600; }
    .benefit-rule-tag { color: #F26A31; background-color: #FFF1E8; }
    .benefit-card-tag { margin-left: 12rpx; color: #FFFFFF; background-color: #D7AD43; }
    .rule-list { margin-top: 14rpx; }
    .rule-item { display: flex; min-height: 68rpx; padding: 13rpx 0; flex-direction: row; justify-content: space-between; align-items: center; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #EEF0F3; }
    .rule-item:last-child { border-bottom-width: 0; }