shop-toy/src/pagesInsurance/policy/detail.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '保单详情',
  },
}
</route>

<template>
  <view class="policy-detail">
    <!-- 保单状态头 -->
    <view class="detail-header">
      <view class="status-icon">
        <text class="i-carbon-checkmark-filled text-4xl text-green-500" v-if="policy.status === 'active'" />
        <text class="i-carbon-warning-filled text-4xl text-orange-500" v-else />
      </view>
      <text class="status-text">{{ policy.statusText }}</text>
      <text class="policy-no">NO.{{ policy.policyNo }}</text>
    </view>

    <!-- 基本信息 -->
    <view class="section">
      <view class="section-title">基本信息</view>
      <view class="info-grid">
        <view class="info-item">
          <text class="label">投保人</text>
          <text class="value">{{ policy.customerName }}</text>
        </view>
        <view class="info-item">
          <text class="label">身份证号</text>
          <text class="value">{{ policy.idCard }}</text>
        </view>
        <view class="info-item">
          <text class="label">联系电话</text>
          <text class="value">{{ policy.phone }}</text>
        </view>
        <view class="info-item">
          <text class="label">受益人</text>
          <text class="value">{{ policy.beneficiary }}（{{ policy.bankName }}）</text>
        </view>
      </view>
    </view>

    <!-- 保障内容 -->
    <view class="section">
      <view class="section-title">保障内容</view>
      <view class="coverage-list">
        <view class="coverage-item">
          <text class="name">个人消费信贷保证保险</text>
          <text class="amount">¥{{ policy.amount.toLocaleString() }}</text>
        </view>
      </view>
      <view class="divider" />
      <view class="info-row">
        <text class="label">保险费</text>
        <text class="value price">¥{{ policy.premium.toLocaleString() }}</text>
      </view>
      <view class="info-row">
        <text class="label">保险期限</text>
        <text class="value">{{ policy.startDate }} 至 {{ policy.endDate }}</text>
      </view>
    </view>

    <!-- 相关理赔 -->
    <view class="section" v-if="policy.claims.length > 0">
      <view class="section-title">理赔记录</view>
      <view class="claim-list">
        <view v-for="claim in policy.claims" :key="claim.id" class="claim-item">
          <view class="claim-header">
            <text class="date">{{ claim.date }}</text>
            <text class="status">{{ claim.status }}</text>
          </view>
          <text class="desc">{{ claim.reason }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作 -->
    <view class="footer-actions">
      <wd-button type="info" plain class="flex-1 mr-2">电子保单</wd-button>
      <wd-button type="primary" class="flex-1">发起理赔</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const policy = ref({
  id: '1',
  policyNo: 'P202601050001',
  status: 'active',
  statusText: '保障中',
  customerName: '张某某',
  idCard: '33010619900101****',
  phone: '138****0000',
  beneficiary: '某某商业银行',
  bankName: '某某商业银行',
  amount: 500000,
  premium: 2500,
  startDate: '2026-01-01',
  endDate: '2027-01-01',
  claims: [
    // { id: 1, date: '2026-06-01', status: '处理中', reason: '贷款逾期申请理赔' }
  ]
})
</script>

<style lang="scss" scoped>
.policy-detail {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.detail-header {
  background: #0957DE;
  color: #fff;
  padding: 40rpx 32rpx 60rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .status-icon {
    width: 100rpx;
    height: 100rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;
  }

  .status-text {
    font-size: 36rpx;
    font-weight: 600;
  }

  .policy-no {
    font-size: 26rpx;
    opacity: 0.8;
    margin-top: 8rpx;
  }
}

.section {
  background: #fff;
  margin: 24rpx 32rpx;
  padding: 32rpx;
  border-radius: 16rpx;
  margin-top: -20rpx; 
  position: relative;
  z-index: 1;

  & + .section {
    margin-top: 24rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 24rpx;
    padding-left: 16rpx;
    border-left: 8rpx solid #0957DE;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;

  .info-item {
    .label {
      display: block;
      font-size: 24rpx;
      color: #718096;
    }
    .value {
      display: block;
      font-size: 28rpx;
      color: #2d3748;
      margin-top: 8rpx;
      font-weight: 500;
    }
  }
}

.coverage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
  
  .name { font-size: 28rpx; color: #2d3748; }
  .amount { font-size: 32rpx; font-weight: 600; color: #1a202c; }
}

.divider {
  height: 1rpx;
  background: #e2e8f0;
  margin: 24rpx 0;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12rpx;
  font-size: 28rpx;

  .label { color: #718096; }
  .value { 
    color: #2d3748; 
    &.price { color: #e53e3e; font-weight: 600; }
  }
}

.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx 32rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
  display: flex;
  z-index: 100;
}
</style>