shop-toy/src/pagesBank/insurance/policy/detail.vue

<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>