shop-toy/openspec/changes/archive/2026-01-12-integrate-insurance-flow/specs/insurance-navigation/spec.md

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

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

<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

<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