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

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

<template>
  <view class="policy-list">
    <!-- 搜索和筛选 -->
    <view class="header-search">
      <wd-search v-model="keyword" placeholder="搜索保单号/客户名" @search="onSearch" />
      <view class="filter-tabs">
        <view
          v-for="tab in tabs"
          :key="tab.value"
          class="tab-item"
          :class="{ active: currentTab === tab.value }"
          @click="currentTab = tab.value"
        >
          {{ tab.label }}
        </view>
      </view>
    </view>

    <!-- 保单列表 -->
    <view class="list-container">
      <view
        v-for="item in filteredList"
        :key="item.id"
        class="policy-card"
        @click="goDetail(item.id)"
      >
        <view class="card-header">
          <text class="policy-no">NO.{{ item.policyNo }}</text>
          <text class="status-tag" :class="item.status">{{ item.statusText }}</text>
        </view>

        <view class="card-body">
          <view class="info-row">
            <text class="label">投保客户</text>
            <text class="value">{{ item.customerName }}</text>
          </view>
          <view class="info-row">
            <text class="label">贷款银行</text>
            <text class="value">{{ item.bankName }}</text>
          </view>
          <view class="info-row">
            <text class="label">保额/保费</text>
            <text class="value price">
              ¥{{ item.amount.toLocaleString() }}
              <text class="sub">/ ¥{{ item.premium.toLocaleString() }}</text>
            </text>
          </view>
          <view class="info-row">
            <text class="label">保险期限</text>
            <text class="value">{{ item.startDate }} 至 {{ item.endDate }}</text>
          </view>
        </view>

        <view class="card-footer">
          <text class="time">投保时间：{{ item.createTime }}</text>
          <wd-button size="small" plain @click.stop="handleRenew(item)">续保</wd-button>
        </view>
      </view>
    </view>
  </view>
</template>

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

const keyword = ref('')
const currentTab = ref('active')

const tabs = [
  { label: '生效中', value: 'active' },
  { label: '即将到期', value: 'expiring' },
  { label: '已失效', value: 'expired' },
]

const policyList = ref([
  {
    id: '1',
    policyNo: 'P202601050001',
    customerName: '张某某',
    bankName: '某某商业银行',
    amount: 500000,
    premium: 2500,
    startDate: '2026-01-01',
    endDate: '2027-01-01',
    createTime: '2026-01-01 10:00',
    status: 'active',
    statusText: '保障中',
  },
  {
    id: '2',
    policyNo: 'P202512150023',
    customerName: '李某某',
    bankName: '某某农村信用社',
    amount: 300000,
    premium: 1500,
    startDate: '2025-12-15',
    endDate: '2026-12-15',
    createTime: '2025-12-15 14:30',
    status: 'active',
    statusText: '保障中',
  },
  {
    id: '3',
    policyNo: 'P202501010001',
    customerName: '王某某',
    bankName: '某某村镇银行',
    amount: 200000,
    premium: 1000,
    startDate: '2025-01-01',
    endDate: '2026-01-01',
    createTime: '2025-01-01 09:00',
    status: 'expiring',
    statusText: '即将到期',
  },
])

const filteredList = computed(() => {
  let list = policyList.value
  if (currentTab.value !== 'all') {
    list = list.filter(item => item.status === currentTab.value)
  }
  if (keyword.value) {
    list = list.filter(item => 
      item.policyNo.includes(keyword.value) || 
      item.customerName.includes(keyword.value)
    )
  }
  return list
})

function onSearch() {
  // Implement search logic
}

function goDetail(id: string) {
  uni.navigateTo({ url: `/pagesInsurance/policy/detail?id=${id}` })
}

function handleRenew(item: any) {
  uni.showToast({ title: '发起续保', icon: 'none' })
}
</script>

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

.header-search {
  background: #fff;
  padding: 24rpx 32rpx 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.filter-tabs {
  display: flex;
  margin-top: 20rpx;
  border-bottom: 1rpx solid #e2e8f0;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 24rpx 0;
    font-size: 28rpx;
    color: #718096;
    position: relative;

    &.active {
      color: #0957DE;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: #0957DE;
        border-radius: 3rpx;
      }
    }
  }
}

.list-container {
  padding: 24rpx 32rpx;
}

.policy-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .policy-no {
      font-size: 28rpx;
      color: #4a5568;
      font-family: monospace;
    }

    .status-tag {
      font-size: 24rpx;
      padding: 4rpx 16rpx;
      border-radius: 12rpx;

      &.active { background: #e3f2fd; color: #0957DE; }
      &.expiring { background: #fff3e0; color: #f57c00; }
      &.expired { background: #f5f5f5; color: #9e9e9e; }
    }
  }

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

      .label { color: #718096; }
      .value { 
        color: #2d3748; 
        font-weight: 500;
        
        &.price {
          color: #e53e3e;
          font-weight: 700;
          
          .sub {
            font-size: 24rpx;
            color: #718096;
            font-weight: 400;
          }
        }
      }
    }
  }

  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;

    .time {
      font-size: 24rpx;
      color: #a0aec0;
    }
  }
}
</style>