<!-- 顶部状态栏 -->
This commit is contained in:
270
src/pagesBank/insurance/policy/detail.vue
Normal file
270
src/pagesBank/insurance/policy/detail.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsurancePolicy } from '@/api/types/insurance'
|
||||
import { getInsurancePolicyDetail } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '保险单详情',
|
||||
},
|
||||
})
|
||||
|
||||
const policyId = ref('')
|
||||
const policy = ref<InsurancePolicy | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
active: { text: '生效中', color: '#00c05a' },
|
||||
expired: { text: '已过期', color: '#999' },
|
||||
cancelled: { text: '已取消', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
if (!policy.value)
|
||||
return null
|
||||
return statusMap[policy.value.status] || { text: policy.value.status, color: '#666' }
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsurancePolicyDetail(policyId.value)
|
||||
policy.value = res
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
policyId.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="policy-detail-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else-if="policy">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card" :style="{ background: statusInfo?.color }">
|
||||
<text class="status-text">{{ statusInfo?.text }}</text>
|
||||
<text class="policy-no">保险单号: {{ policy.policyNumber }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
基本信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ policy.policyNumber }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">出单时间</text>
|
||||
<text class="value">{{ policy.issuedAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险公司信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险公司信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ policy.companyName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ policy.productName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ policy.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ policy.insuranceTerm }}月</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">开始日期</text>
|
||||
<text class="value">{{ policy.startDate }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">结束日期</text>
|
||||
<text class="value">{{ policy.endDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关联信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
关联信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">投保申请号</text>
|
||||
<text class="value">{{ policy.applicationId }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款编号</text>
|
||||
<text class="value">{{ policy.loanId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作提示 -->
|
||||
<view v-if="policy.status === 'active'" class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="i-carbon-information tips-icon" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 保险单生效期间，如发生保险事故，可发起理赔申请</text>
|
||||
<text class="tips-item">• 理赔申请需提供相关证明材料</text>
|
||||
<text class="tips-item">• 保险单到期后自动失效，需重新购买保险</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.policy-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.policy-no {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user