lizi/shop-toy
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 新增政务端，保险端

Browse Source
This commit is contained in:
FlowerWater
2026-01-05 17:17:54 +08:00
parent 3c8b3cf442
commit e08b9694a5
18 changed files with 2742 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/pagesInsurance/policy/detail.vue Normal file
View File

@@ -0,0 +1,231 @@
<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>

275
src/pagesInsurance/policy/list.vue Normal file
View File

@@ -0,0 +1,275 @@
<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>