| | |
|---|
| | | <view v-if="loadState == 'loading'" class="page-state"><text>正在读取人才权益...</text></view> |
|---|
| | | <view v-else-if="loadState == 'error'" class="page-state"><text>{{loadError}}</text><text class="retry-text" @tap="loadDetail">重新加载</text></view> |
|---|
| | | <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="talent-card"><view class="talent-card-glow"></view><view class="talent-card-head"><text class="talent-name">{{customerName}}</text><text class="talent-level">{{cardLevel}}</text></view><text class="talent-mobile">{{displayMobile(customerMobile)}}</text><view class="talent-benefit-line"><text class="talent-benefit-label">当前权益</text><text class="talent-benefit">{{benefitText}}</text></view></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 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> |
|---|
| | |
|---|
| | | if (rules.value[index].id == selectedRuleId.value) return rules.value[index].name |
|---|
| | | } |
|---|
| | | return '人才专属优惠' |
|---|
| | | } |
|---|
| | | const displayMobile = (mobile: string): string => { |
|---|
| | | if (mobile.length < 7) return mobile |
|---|
| | | return mobile.substring(0, 3) + '***' + mobile.substring(mobile.length - 4) |
|---|
| | | } |
|---|
| | | |
|---|
| | | const resetQuote = () => { quote.value = { originalAmount: 0, discountAmount: 0, payAmount: 0, subsidyAmount: 0, ruleName: '' } } |
|---|
| | |
|---|
| | | .back-icon { width: 38rpx; height: 38rpx; transform: rotate(180deg); } |
|---|
| | | .content { flex: 1; height: 0; padding: 32rpx 30rpx 0; box-sizing: border-box; } |
|---|
| | | .talent-card, .amount-card, .method-card, .summary-card { border-radius: 14rpx; background-color: #FFFFFF; box-shadow: 0 4rpx 18rpx rgba(49, 62, 83, 0.06); box-sizing: border-box; } |
|---|
| | | .talent-card { display: flex; min-height: 174rpx; padding: 28rpx 30rpx; flex-direction: column; } |
|---|
| | | .talent-title { color: #1F2937; font-size: 29rpx; line-height: 41rpx; font-weight: 700; } |
|---|
| | | .talent-person { margin-top: 12rpx; color: #697587; font-size: 27rpx; line-height: 38rpx; } |
|---|
| | | .talent-benefit { margin-top: 10rpx; color: #697587; font-size: 25rpx; line-height: 35rpx; } |
|---|
| | | .talent-card { display: flex; min-height: 204rpx; padding: 28rpx 30rpx; flex-direction: column; border-width: 1rpx; border-style: solid; border-color: #E4BE59; background-image: linear-gradient(135deg, #C99D32 0%, #F7E69D 55%, #E5BD4E 100%); position: relative; overflow: hidden; } |
|---|
| | | .talent-card-glow { width: 180rpx; height: 180rpx; border-radius: 90rpx; position: absolute; top: -72rpx; right: -15rpx; background-color: rgba(255, 255, 255, 0.18); } |
|---|
| | | .talent-card-head { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: relative; } |
|---|
| | | .talent-name { color: #FFFFFF; font-size: 38rpx; line-height: 53rpx; font-weight: 700; } |
|---|
| | | .talent-level { padding: 8rpx 18rpx; border-radius: 22rpx; color: #FFFFFF; font-size: 21rpx; line-height: 30rpx; font-weight: 600; background-color: rgba(149, 104, 22, 0.46); } |
|---|
| | | .talent-mobile { display: block; margin-top: 14rpx; color: #FFFFFF; font-size: 27rpx; line-height: 38rpx; font-weight: 600; position: relative; } |
|---|
| | | .talent-benefit-line { display: flex; margin-top: 14rpx; flex-direction: row; align-items: center; position: relative; } |
|---|
| | | .talent-benefit-label { color: rgba(255, 255, 255, 0.78); font-size: 22rpx; line-height: 31rpx; } |
|---|
| | | .talent-benefit { margin-left: 18rpx; color: #FFFFFF; font-size: 22rpx; line-height: 31rpx; font-weight: 600; } |
|---|
| | | .amount-card, .method-card, .summary-card { margin-top: 26rpx; padding: 27rpx 30rpx; } |
|---|
| | | .card-label { display: block; color: #5F6979; font-size: 26rpx; line-height: 37rpx; } |
|---|
| | | .amount-input-row { display: flex; height: 88rpx; margin-top: 9rpx; flex-direction: row; align-items: center; } |
|---|
