<template>
|
<view class="page">
|
<view class="navigation-bar">
|
<view class="back-button" @tap.stop="goBack"><image class="back-icon" src="/static/icons/lucide/back-left.svg" mode="aspectFit"></image></view>
|
<text class="navigation-title">核销确认</text>
|
</view>
|
<scroll-view class="detail-scroll" scroll-y="true" :show-scrollbar="false">
|
<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="loadClaim">重新加载</text></view>
|
<view v-else class="detail-body">
|
<text class="status-title" :class="verified ? 'verified-title' : ''">{{statusText}}</text>
|
<text class="ticket-title">{{title}}</text>
|
<view class="divider"></view>
|
<text class="section-title">订单信息</text>
|
<view class="info-card">
|
<view class="info-row"><text class="info-label">领取时间</text><text class="info-value">{{formatDateTime(createdAt)}}</text></view>
|
<view class="info-row last-row"><text class="info-label">核销时间</text><text class="info-value" :class="verified ? '' : 'muted-value'">{{verified ? formatDateTime(usedAt) : '—'}}</text></view>
|
</view>
|
<text class="section-title benefit-section-title">权益信息</text>
|
<view class="benefit-card">
|
<text class="benefit-level">{{cardLevel}}用户</text>
|
<view class="benefit-person"><text class="benefit-name">{{customerName}}</text><text class="benefit-mobile">{{customerMobile}}</text></view>
|
<text v-if="benefitText.length > 0" class="benefit-text">当前权益：{{benefitText}}</text>
|
<text v-else class="benefit-text muted-value">当前权益：该卡等级暂未配置权益说明</text>
|
</view>
|
<view class="bottom-space"></view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script setup lang="uts">
|
import { loadMerchantTicketPackageClaim, MerchantTicketPackageClaim } from '../../services/orders.uts'
|
|
const claimId = ref('')
|
const title = ref('观影券1张')
|
const statusText = ref('待核销')
|
const verified = ref(false)
|
const customerName = ref('')
|
const customerMobile = ref('')
|
const cardLevel = ref('人才卡')
|
const createdAt = ref('')
|
const usedAt = ref('')
|
const benefitText = ref('')
|
const loadState = ref('loading')
|
const loadError = ref('观影券详情加载失败')
|
|
const formatDateTime = (value: string): string => value.length > 0 ? value.replace('T', ' ') : '—'
|
const goBack = () => uni.navigateBack()
|
|
const applyClaim = (claim: MerchantTicketPackageClaim) => {
|
if (claim.title.length > 0) title.value = claim.title
|
statusText.value = claim.statusText.length > 0 ? claim.statusText : '待核销'
|
verified.value = claim.status == 'completed'
|
customerName.value = claim.customerName
|
customerMobile.value = claim.customerMobile
|
cardLevel.value = claim.cardLevel.length > 0 ? claim.cardLevel : '人才卡'
|
createdAt.value = claim.createdAt
|
usedAt.value = claim.usedAt
|
benefitText.value = claim.benefitText
|
loadState.value = 'success'
|
}
|
|
const loadClaim = () => {
|
loadState.value = 'loading'
|
if (claimId.value.length == 0) { loadError.value = '观影券参数缺失'; loadState.value = 'error'; return }
|
loadMerchantTicketPackageClaim(claimId.value, (claim: MerchantTicketPackageClaim, _traceId: string) => applyClaim(claim), (error: any) => { loadError.value = error.message != null ? error.message : '观影券详情加载失败'; loadState.value = 'error' })
|
}
|
|
onLoad((options: any) => { claimId.value = options != null && options.claimId != null ? '' + options.claimId : ''; loadClaim() })
|
</script>
|
|
<style>
|
page { background-color: #FFFFFF; }
|
.page { display: flex; flex: 1; flex-direction: column; width: 100%; height: 100vh; overflow: hidden; background-color: #FFFFFF; }
|
.navigation-bar { display: flex; height: 174rpx; flex: none; position: relative; box-sizing: border-box; justify-content: center; align-items: flex-end; }
|
.back-button { display: flex; width: 72rpx; height: 72rpx; justify-content: center; align-items: center; position: absolute; top: 82rpx; left: 28rpx; z-index: 2; }
|
.back-icon { width: 40rpx; height: 40rpx; }
|
.navigation-title { color: #171B23; font-size: 36rpx; line-height: 60rpx; font-weight: 700; }
|
.detail-scroll { flex: 1; height: 0; padding: 0 34rpx; box-sizing: border-box; }
|
.detail-body { display: flex; flex-direction: column; }
|
.status-title { display: block; margin-top: 34rpx; color: #1F2530; font-size: 42rpx; line-height: 58rpx; font-weight: 700; text-align: center; }
|
.verified-title { color: #7C8798; }
|
.ticket-title { display: block; margin-top: 62rpx; color: #1F2530; font-size: 34rpx; line-height: 48rpx; font-weight: 700; text-align: center; }
|
.divider { height: 1rpx; margin-top: 62rpx; background-color: #EDEFF3; }
|
.section-title { display: block; margin-top: 40rpx; color: #263043; font-size: 31rpx; line-height: 44rpx; font-weight: 700; }
|
.info-card { padding: 12rpx 30rpx; margin-top: 18rpx; border-radius: 28rpx; background-color: #FAFBFC; box-sizing: border-box; }
|
.info-row { display: flex; min-height: 71rpx; flex-direction: row; justify-content: space-between; align-items: center; }
|
.info-label { color: #8E97A5; font-size: 27rpx; line-height: 38rpx; }
|
.info-value { color: #39435A; font-size: 27rpx; line-height: 38rpx; font-weight: 600; text-align: right; }
|
.muted-value { color: #9AA4B3; font-weight: 500; }
|
.last-row { min-height: 74rpx; }
|
.benefit-section-title { margin-top: 46rpx; }
|
.benefit-card { padding: 32rpx 32rpx 34rpx; margin-top: 22rpx; border-width: 1rpx; border-style: solid; border-color: #EDEFF3; border-radius: 28rpx; background-color: #FFFFFF; box-shadow: 0 12rpx 30rpx rgba(69, 65, 57, 0.04); box-sizing: border-box; }
|
.benefit-level { display: block; color: #263043; font-size: 33rpx; line-height: 46rpx; font-weight: 700; }
|
.benefit-person { display: flex; margin-top: 22rpx; flex-direction: row; align-items: center; }
|
.benefit-name { color: #4A5464; font-size: 27rpx; line-height: 38rpx; }
|
.benefit-mobile { margin-left: 32rpx; color: #4A5464; font-size: 27rpx; line-height: 38rpx; }
|
.benefit-text { display: block; margin-top: 22rpx; color: #4A5464; font-size: 27rpx; line-height: 40rpx; }
|
.bottom-space { height: 120rpx; }
|
.page-state { display: flex; height: 700rpx; flex-direction: column; justify-content: center; align-items: center; color: #798494; font-size: 27rpx; line-height: 38rpx; }
|
.retry-text { margin-top: 22rpx; color: #FF6B2C; font-weight: 700; }
|
</style>
|
