归档
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
# Insurance Navigation Specification
|
||||
|
||||
## Overview
|
||||
|
||||
This specification defines the insurance navigation functionality for the bank side, including insurance application list, company/product selection flows, and dashboard shortcuts.
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Insurance Application List Page
|
||||
|
||||
The bank side MUST provide a dedicated page to list all insurance applications with search and pagination support.
|
||||
|
||||
#### Scenario: Display insurance application list
|
||||
|
||||
**Given** the user navigates to `/pagesBank/insurance/application/list`
|
||||
|
||||
**When** the page loads
|
||||
|
||||
**Then** the system SHALL display a list of all insurance applications with:
|
||||
- Application ID
|
||||
- Company name
|
||||
- Product name
|
||||
- Insurance amount
|
||||
- Insurance term
|
||||
- Status (pending/approved/rejected)
|
||||
- Created timestamp
|
||||
- Clickable items that navigate to application detail
|
||||
|
||||
#### Scenario: Filter insurance applications by status
|
||||
|
||||
**Given** the user is on the insurance application list page
|
||||
|
||||
**When** the user selects a status filter (All, Pending, Approved, Rejected)
|
||||
|
||||
**Then** the system SHALL display only applications matching the selected status
|
||||
|
||||
#### Scenario: Search insurance applications
|
||||
|
||||
**Given** the user is on the insurance application list page
|
||||
|
||||
**When** the user enters a search term in the search box
|
||||
|
||||
**Then** the system SHALL filter applications by:
|
||||
- Application ID
|
||||
- Company name
|
||||
- Product name
|
||||
- Policy number
|
||||
|
||||
**And** display only matching applications in real-time
|
||||
|
||||
#### Scenario: Paginate insurance applications
|
||||
|
||||
**Given** the user is on the insurance application list page with more than 20 applications
|
||||
|
||||
**When** the user scrolls to the bottom of the list
|
||||
|
||||
**Then** the system SHALL load the next page of applications automatically
|
||||
|
||||
**And** display a loading indicator while fetching
|
||||
|
||||
### Requirement: Company and Product Selection Flow
|
||||
|
||||
The audit detail page MUST support a multi-step navigation flow for selecting insurance company and product with search functionality.
|
||||
|
||||
#### Scenario: Navigate from audit detail to company selection
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and no insurance
|
||||
|
||||
**When** the user clicks "购买保险" button
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/company/select` with parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `loanAmount`: The loan amount in yuan
|
||||
- `loanTerm`: The loan term in months
|
||||
|
||||
#### Scenario: Search and select insurance company
|
||||
|
||||
**Given** the user is on the insurance company selection page
|
||||
|
||||
**When** the user enters a search term in the search box
|
||||
|
||||
**Then** the system SHALL filter companies by:
|
||||
- Company name
|
||||
- Contact information
|
||||
|
||||
**And** display only matching companies in real-time
|
||||
|
||||
#### Scenario: Select insurance company
|
||||
|
||||
**Given** the user selects a company from the list
|
||||
|
||||
**When** the selection is confirmed
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/product/select` with parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `companyId`: The selected company ID
|
||||
- `loanAmount`: The loan amount in yuan
|
||||
- `loanTerm`: The loan term in months
|
||||
|
||||
#### Scenario: Search and select insurance product
|
||||
|
||||
**Given** the user is on the insurance product selection page
|
||||
|
||||
**When** the user enters a search term in the search box
|
||||
|
||||
**Then** the system SHALL filter products by:
|
||||
- Product name
|
||||
- Product description
|
||||
- Product type
|
||||
|
||||
**And** display only matching products in real-time
|
||||
|
||||
#### Scenario: Select insurance product
|
||||
|
||||
**Given** the user selects a product from the list
|
||||
|
||||
**When** the selection is confirmed
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/application/create` with parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `companyId`: The selected company ID
|
||||
- `productId`: The selected product ID
|
||||
- `loanAmount`: The loan amount in yuan
|
||||
- `loanTerm`: The loan term in months
|
||||
|
||||
### Requirement: Dashboard Shortcuts Navigation
|
||||
|
||||
The dashboard shortcuts MUST navigate to the correct insurance management pages.
|
||||
|
||||
#### Scenario: Navigate to insurance application list
|
||||
|
||||
**Given** the user is on the bank dashboard
|
||||
|
||||
**When** the user clicks the "投保管理" shortcut
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/application/list`
|
||||
|
||||
#### Scenario: Navigate to claim application list
|
||||
|
||||
**Given** the user is on the bank dashboard
|
||||
|
||||
**When** the user clicks the "理赔管理" shortcut
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/claim/list`
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### File Locations
|
||||
|
||||
- `src/pagesBank/insurance/application/list.vue`: Insurance application list page with search and pagination
|
||||
- `src/pagesBank/insurance/company/select.vue`: Company selection page with search
|
||||
- `src/pagesBank/insurance/product/select.vue`: Product selection page with search
|
||||
- `src/pagesBank/audit/detail.vue`: Updated with multi-step navigation
|
||||
- `src/pagesBank/dashboard/index.vue`: Verified shortcuts configuration
|
||||
|
||||
### Key Functions
|
||||
|
||||
```typescript
|
||||
// Navigate to company selection
|
||||
function handleBuyInsurance() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/company/select?loanId=${id.value}&loanAmount=${amount}&loanTerm=${term}`,
|
||||
})
|
||||
}
|
||||
|
||||
// Company selection handler
|
||||
function handleSelectCompany(company: InsuranceCompany) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/product/select?loanId=${loanId.value}&companyId=${company.id}&loanAmount=${loanAmount.value}&loanTerm=${loanTerm.value}`,
|
||||
})
|
||||
}
|
||||
|
||||
// Product selection handler
|
||||
function handleSelectProduct(product: InsuranceProduct) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/application/create?loanId=${loanId.value}&companyId=${companyId.value}&productId=${product.id}&loanAmount=${loanAmount.value}&loanTerm=${loanTerm.value}`,
|
||||
})
|
||||
}
|
||||
|
||||
// Search handler for lists
|
||||
function handleSearch(keyword: string) {
|
||||
searchKeyword.value = keyword
|
||||
loadData(1) // Reset to first page
|
||||
}
|
||||
|
||||
// Pagination handler
|
||||
function handleLoadMore() {
|
||||
if (!loading.value && hasMore.value) {
|
||||
loadData(currentPage.value + 1)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Page Flow Diagram
|
||||
|
||||
```
|
||||
/pagesBank/audit/detail
|
||||
│
|
||||
├─→ "购买保险" button
|
||||
│
|
||||
▼
|
||||
/pagesBank/insurance/company/select (NEW)
|
||||
│
|
||||
├─→ Search companies by name/contact
|
||||
│
|
||||
├─→ Select company
|
||||
│
|
||||
▼
|
||||
/pagesBank/insurance/product/select (NEW)
|
||||
│
|
||||
├─→ Search products by name/description/type
|
||||
│
|
||||
├─→ Select product
|
||||
│
|
||||
▼
|
||||
/pagesBank/insurance/application/create (existing)
|
||||
│
|
||||
└─→ Submit application
|
||||
|
||||
/pagesBank/dashboard/index
|
||||
│
|
||||
├─→ "投保管理" → /pagesBank/insurance/application/list (NEW)
|
||||
│ ├─→ Search by ID/company/product/policy
|
||||
│ ├─→ Filter by status
|
||||
│ └─→ Pagination support
|
||||
│
|
||||
└─→ "理赔管理" → /pagesBank/insurance/claim/list (existing)
|
||||
```
|
||||
|
||||
### UI Components
|
||||
|
||||
#### Search Bar Component
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="search-bar">
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索公司名称、联系人..."
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<text v-if="keyword" class="clear-btn" @click="clearSearch">×</text>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
#### Status Filter Component
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view class="status-filter">
|
||||
<view
|
||||
v-for="status in statusOptions"
|
||||
:key="status.value"
|
||||
class="filter-item"
|
||||
:class="{ active: currentStatus === status.value }"
|
||||
@click="selectStatus(status.value)"
|
||||
>
|
||||
{{ status.label }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Related Capabilities
|
||||
|
||||
- `bank-insurance-integration`: Core insurance integration functionality
|
||||
- `bank-insurance-ui`: Insurance UI requirements
|
||||
Reference in New Issue
Block a user