Compare commits
18 Commits
9591234e70
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| fa6525bfd4 | |||
| 1eedfe261f | |||
| 7adfd27f3f | |||
| 725aa1819a | |||
| e7aaf6962b | |||
|
e08b9694a5 | ||
| 3c8b3cf442 | |||
| 32b7ae9ded | |||
| d8785fe915 | |||
| e8e6778d08 | |||
| ee00783eb3 | |||
| 6ec846472d | |||
| d46d50018e | |||
| 5312cfcb2e | |||
| 6bb0e00d69 | |||
| 79e7923b77 | |||
|
|
a5c7e9f6ca | ||
|
|
06df763ed4 |
10
.gitignore
vendored
10
.gitignore
vendored
@@ -45,4 +45,12 @@ src/manifest.json
|
||||
|
||||
# 更新 uni-app 官方版本
|
||||
# npx @dcloudio/uvm@latest
|
||||
src/pages.json
|
||||
# src/pages.json
|
||||
|
||||
# AI
|
||||
.kilocode
|
||||
.kilocode/**
|
||||
.opencode
|
||||
.opencode/**
|
||||
.agent
|
||||
.agent/**
|
||||
19
AGENTS.md
Normal file
19
AGENTS.md
Normal file
@@ -0,0 +1,19 @@
|
||||
<!-- OPENSPEC:START -->
|
||||
# OpenSpec Instructions
|
||||
|
||||
These instructions are for AI assistants working in this project.
|
||||
When communicating with me, please use Chinese.
|
||||
|
||||
Always open `@/openspec/AGENTS.md` when the request:
|
||||
- Mentions planning or proposals (words like proposal, spec, change, plan)
|
||||
- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work
|
||||
- Sounds ambiguous and you need the authoritative spec before coding
|
||||
|
||||
Use `@/openspec/AGENTS.md` to learn:
|
||||
- How to create and apply change proposals
|
||||
- Spec format and conventions
|
||||
- Project structure and guidelines
|
||||
|
||||
Keep this managed block so 'openspec update' can refresh the instructions.
|
||||
|
||||
<!-- OPENSPEC:END -->
|
||||
457
openspec/AGENTS.md
Normal file
457
openspec/AGENTS.md
Normal file
@@ -0,0 +1,457 @@
|
||||
# OpenSpec Instructions
|
||||
|
||||
Instructions for AI coding assistants using OpenSpec for spec-driven development
|
||||
When communicating with me, please use Chinese.
|
||||
|
||||
## TL;DR Quick Checklist
|
||||
|
||||
- Search existing work: `openspec spec list --long`, `openspec list` (use `rg` only for full-text search)
|
||||
- Decide scope: new capability vs modify existing capability
|
||||
- Pick a unique `change-id`: kebab-case, verb-led (`add-`, `update-`, `remove-`, `refactor-`)
|
||||
- Scaffold: `proposal.md`, `tasks.md`, `design.md` (only if needed), and delta specs per affected capability
|
||||
- Write deltas: use `## ADDED|MODIFIED|REMOVED|RENAMED Requirements`; include at least one `#### Scenario:` per requirement
|
||||
- Validate: `openspec validate [change-id] --strict` and fix issues
|
||||
- Request approval: Do not start implementation until proposal is approved
|
||||
|
||||
## Three-Stage Workflow
|
||||
|
||||
### Stage 1: Creating Changes
|
||||
Create proposal when you need to:
|
||||
- Add features or functionality
|
||||
- Make breaking changes (API, schema)
|
||||
- Change architecture or patterns
|
||||
- Optimize performance (changes behavior)
|
||||
- Update security patterns
|
||||
|
||||
Triggers (examples):
|
||||
- "Help me create a change proposal"
|
||||
- "Help me plan a change"
|
||||
- "Help me create a proposal"
|
||||
- "I want to create a spec proposal"
|
||||
- "I want to create a spec"
|
||||
|
||||
Loose matching guidance:
|
||||
- Contains one of: `proposal`, `change`, `spec`
|
||||
- With one of: `create`, `plan`, `make`, `start`, `help`
|
||||
|
||||
Skip proposal for:
|
||||
- Bug fixes (restore intended behavior)
|
||||
- Typos, formatting, comments
|
||||
- Dependency updates (non-breaking)
|
||||
- Configuration changes
|
||||
- Tests for existing behavior
|
||||
|
||||
**Workflow**
|
||||
1. Review `openspec/project.md`, `openspec list`, and `openspec list --specs` to understand current context.
|
||||
2. Choose a unique verb-led `change-id` and scaffold `proposal.md`, `tasks.md`, optional `design.md`, and spec deltas under `openspec/changes/<id>/`.
|
||||
3. Draft spec deltas using `## ADDED|MODIFIED|REMOVED Requirements` with at least one `#### Scenario:` per requirement.
|
||||
4. Run `openspec validate <id> --strict` and resolve any issues before sharing the proposal.
|
||||
|
||||
### Stage 2: Implementing Changes
|
||||
Track these steps as TODOs and complete them one by one.
|
||||
1. **Read proposal.md** - Understand what's being built
|
||||
2. **Read design.md** (if exists) - Review technical decisions
|
||||
3. **Read tasks.md** - Get implementation checklist
|
||||
4. **Implement tasks sequentially** - Complete in order
|
||||
5. **Confirm completion** - Ensure every item in `tasks.md` is finished before updating statuses
|
||||
6. **Update checklist** - After all work is done, set every task to `- [x]` so the list reflects reality
|
||||
7. **Approval gate** - Do not start implementation until the proposal is reviewed and approved
|
||||
|
||||
### Stage 3: Archiving Changes
|
||||
After deployment, create separate PR to:
|
||||
- Move `changes/[name]/` → `changes/archive/YYYY-MM-DD-[name]/`
|
||||
- Update `specs/` if capabilities changed
|
||||
- Use `openspec archive <change-id> --skip-specs --yes` for tooling-only changes (always pass the change ID explicitly)
|
||||
- Run `openspec validate --strict` to confirm the archived change passes checks
|
||||
|
||||
## Before Any Task
|
||||
|
||||
**Context Checklist:**
|
||||
- [ ] Read relevant specs in `specs/[capability]/spec.md`
|
||||
- [ ] Check pending changes in `changes/` for conflicts
|
||||
- [ ] Read `openspec/project.md` for conventions
|
||||
- [ ] Run `openspec list` to see active changes
|
||||
- [ ] Run `openspec list --specs` to see existing capabilities
|
||||
|
||||
**Before Creating Specs:**
|
||||
- Always check if capability already exists
|
||||
- Prefer modifying existing specs over creating duplicates
|
||||
- Use `openspec show [spec]` to review current state
|
||||
- If request is ambiguous, ask 1–2 clarifying questions before scaffolding
|
||||
|
||||
### Search Guidance
|
||||
- Enumerate specs: `openspec spec list --long` (or `--json` for scripts)
|
||||
- Enumerate changes: `openspec list` (or `openspec change list --json` - deprecated but available)
|
||||
- Show details:
|
||||
- Spec: `openspec show <spec-id> --type spec` (use `--json` for filters)
|
||||
- Change: `openspec show <change-id> --json --deltas-only`
|
||||
- Full-text search (use ripgrep): `rg -n "Requirement:|Scenario:" openspec/specs`
|
||||
|
||||
## Quick Start
|
||||
|
||||
### CLI Commands
|
||||
|
||||
```bash
|
||||
# Essential commands
|
||||
openspec list # List active changes
|
||||
openspec list --specs # List specifications
|
||||
openspec show [item] # Display change or spec
|
||||
openspec validate [item] # Validate changes or specs
|
||||
openspec archive <change-id> [--yes|-y] # Archive after deployment (add --yes for non-interactive runs)
|
||||
|
||||
# Project management
|
||||
openspec init [path] # Initialize OpenSpec
|
||||
openspec update [path] # Update instruction files
|
||||
|
||||
# Interactive mode
|
||||
openspec show # Prompts for selection
|
||||
openspec validate # Bulk validation mode
|
||||
|
||||
# Debugging
|
||||
openspec show [change] --json --deltas-only
|
||||
openspec validate [change] --strict
|
||||
```
|
||||
|
||||
### Command Flags
|
||||
|
||||
- `--json` - Machine-readable output
|
||||
- `--type change|spec` - Disambiguate items
|
||||
- `--strict` - Comprehensive validation
|
||||
- `--no-interactive` - Disable prompts
|
||||
- `--skip-specs` - Archive without spec updates
|
||||
- `--yes`/`-y` - Skip confirmation prompts (non-interactive archive)
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
openspec/
|
||||
├── project.md # Project conventions
|
||||
├── specs/ # Current truth - what IS built
|
||||
│ └── [capability]/ # Single focused capability
|
||||
│ ├── spec.md # Requirements and scenarios
|
||||
│ └── design.md # Technical patterns
|
||||
├── changes/ # Proposals - what SHOULD change
|
||||
│ ├── [change-name]/
|
||||
│ │ ├── proposal.md # Why, what, impact
|
||||
│ │ ├── tasks.md # Implementation checklist
|
||||
│ │ ├── design.md # Technical decisions (optional; see criteria)
|
||||
│ │ └── specs/ # Delta changes
|
||||
│ │ └── [capability]/
|
||||
│ │ └── spec.md # ADDED/MODIFIED/REMOVED
|
||||
│ └── archive/ # Completed changes
|
||||
```
|
||||
|
||||
## Creating Change Proposals
|
||||
|
||||
### Decision Tree
|
||||
|
||||
```
|
||||
New request?
|
||||
├─ Bug fix restoring spec behavior? → Fix directly
|
||||
├─ Typo/format/comment? → Fix directly
|
||||
├─ New feature/capability? → Create proposal
|
||||
├─ Breaking change? → Create proposal
|
||||
├─ Architecture change? → Create proposal
|
||||
└─ Unclear? → Create proposal (safer)
|
||||
```
|
||||
|
||||
### Proposal Structure
|
||||
|
||||
1. **Create directory:** `changes/[change-id]/` (kebab-case, verb-led, unique)
|
||||
|
||||
2. **Write proposal.md:**
|
||||
```markdown
|
||||
# Change: [Brief description of change]
|
||||
|
||||
## Why
|
||||
[1-2 sentences on problem/opportunity]
|
||||
|
||||
## What Changes
|
||||
- [Bullet list of changes]
|
||||
- [Mark breaking changes with **BREAKING**]
|
||||
|
||||
## Impact
|
||||
- Affected specs: [list capabilities]
|
||||
- Affected code: [key files/systems]
|
||||
```
|
||||
|
||||
3. **Create spec deltas:** `specs/[capability]/spec.md`
|
||||
```markdown
|
||||
## ADDED Requirements
|
||||
### Requirement: New Feature
|
||||
The system SHALL provide...
|
||||
|
||||
#### Scenario: Success case
|
||||
- **WHEN** user performs action
|
||||
- **THEN** expected result
|
||||
|
||||
## MODIFIED Requirements
|
||||
### Requirement: Existing Feature
|
||||
[Complete modified requirement]
|
||||
|
||||
## REMOVED Requirements
|
||||
### Requirement: Old Feature
|
||||
**Reason**: [Why removing]
|
||||
**Migration**: [How to handle]
|
||||
```
|
||||
If multiple capabilities are affected, create multiple delta files under `changes/[change-id]/specs/<capability>/spec.md`—one per capability.
|
||||
|
||||
4. **Create tasks.md:**
|
||||
```markdown
|
||||
## 1. Implementation
|
||||
- [ ] 1.1 Create database schema
|
||||
- [ ] 1.2 Implement API endpoint
|
||||
- [ ] 1.3 Add frontend component
|
||||
- [ ] 1.4 Write tests
|
||||
```
|
||||
|
||||
5. **Create design.md when needed:**
|
||||
Create `design.md` if any of the following apply; otherwise omit it:
|
||||
- Cross-cutting change (multiple services/modules) or a new architectural pattern
|
||||
- New external dependency or significant data model changes
|
||||
- Security, performance, or migration complexity
|
||||
- Ambiguity that benefits from technical decisions before coding
|
||||
|
||||
Minimal `design.md` skeleton:
|
||||
```markdown
|
||||
## Context
|
||||
[Background, constraints, stakeholders]
|
||||
|
||||
## Goals / Non-Goals
|
||||
- Goals: [...]
|
||||
- Non-Goals: [...]
|
||||
|
||||
## Decisions
|
||||
- Decision: [What and why]
|
||||
- Alternatives considered: [Options + rationale]
|
||||
|
||||
## Risks / Trade-offs
|
||||
- [Risk] → Mitigation
|
||||
|
||||
## Migration Plan
|
||||
[Steps, rollback]
|
||||
|
||||
## Open Questions
|
||||
- [...]
|
||||
```
|
||||
|
||||
## Spec File Format
|
||||
|
||||
### Critical: Scenario Formatting
|
||||
|
||||
**CORRECT** (use #### headers):
|
||||
```markdown
|
||||
#### Scenario: User login success
|
||||
- **WHEN** valid credentials provided
|
||||
- **THEN** return JWT token
|
||||
```
|
||||
|
||||
**WRONG** (don't use bullets or bold):
|
||||
```markdown
|
||||
- **Scenario: User login** ❌
|
||||
**Scenario**: User login ❌
|
||||
### Scenario: User login ❌
|
||||
```
|
||||
|
||||
Every requirement MUST have at least one scenario.
|
||||
|
||||
### Requirement Wording
|
||||
- Use SHALL/MUST for normative requirements (avoid should/may unless intentionally non-normative)
|
||||
|
||||
### Delta Operations
|
||||
|
||||
- `## ADDED Requirements` - New capabilities
|
||||
- `## MODIFIED Requirements` - Changed behavior
|
||||
- `## REMOVED Requirements` - Deprecated features
|
||||
- `## RENAMED Requirements` - Name changes
|
||||
|
||||
Headers matched with `trim(header)` - whitespace ignored.
|
||||
|
||||
#### When to use ADDED vs MODIFIED
|
||||
- ADDED: Introduces a new capability or sub-capability that can stand alone as a requirement. Prefer ADDED when the change is orthogonal (e.g., adding "Slash Command Configuration") rather than altering the semantics of an existing requirement.
|
||||
- MODIFIED: Changes the behavior, scope, or acceptance criteria of an existing requirement. Always paste the full, updated requirement content (header + all scenarios). The archiver will replace the entire requirement with what you provide here; partial deltas will drop previous details.
|
||||
- RENAMED: Use when only the name changes. If you also change behavior, use RENAMED (name) plus MODIFIED (content) referencing the new name.
|
||||
|
||||
Common pitfall: Using MODIFIED to add a new concern without including the previous text. This causes loss of detail at archive time. If you aren’t explicitly changing the existing requirement, add a new requirement under ADDED instead.
|
||||
|
||||
Authoring a MODIFIED requirement correctly:
|
||||
1) Locate the existing requirement in `openspec/specs/<capability>/spec.md`.
|
||||
2) Copy the entire requirement block (from `### Requirement: ...` through its scenarios).
|
||||
3) Paste it under `## MODIFIED Requirements` and edit to reflect the new behavior.
|
||||
4) Ensure the header text matches exactly (whitespace-insensitive) and keep at least one `#### Scenario:`.
|
||||
|
||||
Example for RENAMED:
|
||||
```markdown
|
||||
## RENAMED Requirements
|
||||
- FROM: `### Requirement: Login`
|
||||
- TO: `### Requirement: User Authentication`
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Common Errors
|
||||
|
||||
**"Change must have at least one delta"**
|
||||
- Check `changes/[name]/specs/` exists with .md files
|
||||
- Verify files have operation prefixes (## ADDED Requirements)
|
||||
|
||||
**"Requirement must have at least one scenario"**
|
||||
- Check scenarios use `#### Scenario:` format (4 hashtags)
|
||||
- Don't use bullet points or bold for scenario headers
|
||||
|
||||
**Silent scenario parsing failures**
|
||||
- Exact format required: `#### Scenario: Name`
|
||||
- Debug with: `openspec show [change] --json --deltas-only`
|
||||
|
||||
### Validation Tips
|
||||
|
||||
```bash
|
||||
# Always use strict mode for comprehensive checks
|
||||
openspec validate [change] --strict
|
||||
|
||||
# Debug delta parsing
|
||||
openspec show [change] --json | jq '.deltas'
|
||||
|
||||
# Check specific requirement
|
||||
openspec show [spec] --json -r 1
|
||||
```
|
||||
|
||||
## Happy Path Script
|
||||
|
||||
```bash
|
||||
# 1) Explore current state
|
||||
openspec spec list --long
|
||||
openspec list
|
||||
# Optional full-text search:
|
||||
# rg -n "Requirement:|Scenario:" openspec/specs
|
||||
# rg -n "^#|Requirement:" openspec/changes
|
||||
|
||||
# 2) Choose change id and scaffold
|
||||
CHANGE=add-two-factor-auth
|
||||
mkdir -p openspec/changes/$CHANGE/{specs/auth}
|
||||
printf "## Why\n...\n\n## What Changes\n- ...\n\n## Impact\n- ...\n" > openspec/changes/$CHANGE/proposal.md
|
||||
printf "## 1. Implementation\n- [ ] 1.1 ...\n" > openspec/changes/$CHANGE/tasks.md
|
||||
|
||||
# 3) Add deltas (example)
|
||||
cat > openspec/changes/$CHANGE/specs/auth/spec.md << 'EOF'
|
||||
## ADDED Requirements
|
||||
### Requirement: Two-Factor Authentication
|
||||
Users MUST provide a second factor during login.
|
||||
|
||||
#### Scenario: OTP required
|
||||
- **WHEN** valid credentials are provided
|
||||
- **THEN** an OTP challenge is required
|
||||
EOF
|
||||
|
||||
# 4) Validate
|
||||
openspec validate $CHANGE --strict
|
||||
```
|
||||
|
||||
## Multi-Capability Example
|
||||
|
||||
```
|
||||
openspec/changes/add-2fa-notify/
|
||||
├── proposal.md
|
||||
├── tasks.md
|
||||
└── specs/
|
||||
├── auth/
|
||||
│ └── spec.md # ADDED: Two-Factor Authentication
|
||||
└── notifications/
|
||||
└── spec.md # ADDED: OTP email notification
|
||||
```
|
||||
|
||||
auth/spec.md
|
||||
```markdown
|
||||
## ADDED Requirements
|
||||
### Requirement: Two-Factor Authentication
|
||||
...
|
||||
```
|
||||
|
||||
notifications/spec.md
|
||||
```markdown
|
||||
## ADDED Requirements
|
||||
### Requirement: OTP Email Notification
|
||||
...
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
### Simplicity First
|
||||
- Default to <100 lines of new code
|
||||
- Single-file implementations until proven insufficient
|
||||
- Avoid frameworks without clear justification
|
||||
- Choose boring, proven patterns
|
||||
|
||||
### Complexity Triggers
|
||||
Only add complexity with:
|
||||
- Performance data showing current solution too slow
|
||||
- Concrete scale requirements (>1000 users, >100MB data)
|
||||
- Multiple proven use cases requiring abstraction
|
||||
|
||||
### Clear References
|
||||
- Use `file.ts:42` format for code locations
|
||||
- Reference specs as `specs/auth/spec.md`
|
||||
- Link related changes and PRs
|
||||
|
||||
### Capability Naming
|
||||
- Use verb-noun: `user-auth`, `payment-capture`
|
||||
- Single purpose per capability
|
||||
- 10-minute understandability rule
|
||||
- Split if description needs "AND"
|
||||
|
||||
### Change ID Naming
|
||||
- Use kebab-case, short and descriptive: `add-two-factor-auth`
|
||||
- Prefer verb-led prefixes: `add-`, `update-`, `remove-`, `refactor-`
|
||||
- Ensure uniqueness; if taken, append `-2`, `-3`, etc.
|
||||
|
||||
## Tool Selection Guide
|
||||
|
||||
| Task | Tool | Why |
|
||||
|------|------|-----|
|
||||
| Find files by pattern | Glob | Fast pattern matching |
|
||||
| Search code content | Grep | Optimized regex search |
|
||||
| Read specific files | Read | Direct file access |
|
||||
| Explore unknown scope | Task | Multi-step investigation |
|
||||
|
||||
## Error Recovery
|
||||
|
||||
### Change Conflicts
|
||||
1. Run `openspec list` to see active changes
|
||||
2. Check for overlapping specs
|
||||
3. Coordinate with change owners
|
||||
4. Consider combining proposals
|
||||
|
||||
### Validation Failures
|
||||
1. Run with `--strict` flag
|
||||
2. Check JSON output for details
|
||||
3. Verify spec file format
|
||||
4. Ensure scenarios properly formatted
|
||||
|
||||
### Missing Context
|
||||
1. Read project.md first
|
||||
2. Check related specs
|
||||
3. Review recent archives
|
||||
4. Ask for clarification
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Stage Indicators
|
||||
- `changes/` - Proposed, not yet built
|
||||
- `specs/` - Built and deployed
|
||||
- `archive/` - Completed changes
|
||||
|
||||
### File Purposes
|
||||
- `proposal.md` - Why and what
|
||||
- `tasks.md` - Implementation steps
|
||||
- `design.md` - Technical decisions
|
||||
- `spec.md` - Requirements and behavior
|
||||
|
||||
### CLI Essentials
|
||||
```bash
|
||||
openspec list # What's in progress?
|
||||
openspec show [item] # View details
|
||||
openspec validate --strict # Is it correct?
|
||||
openspec archive <change-id> [--yes|-y] # Mark complete (add --yes for automation)
|
||||
```
|
||||
|
||||
Remember: Specs are truth. Changes are proposals. Keep them in sync.
|
||||
@@ -0,0 +1,18 @@
|
||||
# Change: Add Bank Report Download Feature
|
||||
|
||||
## Why
|
||||
银行端需要报表统计与下载功能，以便银行工作人员能够按不同维度（支行、网点、部门、人员、客户等）查看和导出业务数据，支持按日、月、季或自定义时间范围筛选，提升数据分析和决策效率。
|
||||
|
||||
## What Changes
|
||||
- 新增报表列表页面，展示四大类报表（多维统计、访客报表、营销报表、权益管理）
|
||||
- 新增报表下载页面，支持日期维度筛选和 Excel 文件下载
|
||||
- 添加报表相关的 mock 数据和 API 接口
|
||||
- 在银行端仪表盘添加报表功能入口
|
||||
|
||||
## Impact
|
||||
- Affected specs: 新增 `bank-report` capability
|
||||
- Affected code:
|
||||
- 新增 `src/pagesBank/report/` 目录及相关页面
|
||||
- 新增 `src/pagesBank/api/report.ts` API 接口
|
||||
- 新增 `src/pagesBank/mock/report.ts` mock 数据
|
||||
- 修改 `src/pagesBank/dashboard/index.vue` 添加报表入口
|
||||
@@ -0,0 +1,66 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Report List Display
|
||||
系统 SHALL 在银行端提供报表列表页面，展示所有可供下载的报表清单，分为四个主要板块：多维统计、访客报表、营销报表、权益管理。
|
||||
|
||||
#### Scenario: User views report list
|
||||
- **WHEN** 用户访问报表列表页面
|
||||
- **THEN** 系统显示四个报表分类板块
|
||||
- **AND** 每个板块包含对应的报表条目
|
||||
- **AND** 所有报表条目均可点击
|
||||
|
||||
#### Scenario: Report categories display correctly
|
||||
- **WHEN** 报表列表页面加载完成
|
||||
- **THEN** 多维统计板块显示：按支行统计、按网点统计、按部门统计、按人员统计、按客户统计
|
||||
- **AND** 访客报表板块显示：支行访客报表、网点访客报表、人员访客报表
|
||||
- **AND** 营销报表板块显示：小额贷业绩报表、小额贷营销汇总、消费贷营销报表、三农部支行汇总、三农部营销报表、公司部营销汇总表
|
||||
- **AND** 权益管理板块显示：我赠送的记录、全员赠送记录、权益二维码
|
||||
|
||||
### Requirement: Report Navigation
|
||||
系统 SHALL 支持用户从报表列表页面点击任意报表条目跳转至报表下载页面，并传递报表类型标识。
|
||||
|
||||
#### Scenario: User clicks report item
|
||||
- **WHEN** 用户点击报表列表中的任意报表条目
|
||||
- **THEN** 系统跳转至报表下载页面
|
||||
- **AND** 传递所选报表的类型标识（ID 或名称）至下载页面
|
||||
|
||||
### Requirement: Report Download Page
|
||||
系统 SHALL 提供报表下载页面，支持日期维度筛选和 Excel 文件下载。
|
||||
|
||||
#### Scenario: Download page displays with default date
|
||||
- **WHEN** 用户进入报表下载页面
|
||||
- **THEN** 页面顶部显示日期维度筛选区（按日、按月、按季、自定义）
|
||||
- **AND** 默认选中"按日"选项
|
||||
- **AND** 显示当前系统日期（默认为 2025-12-25）
|
||||
- **AND** 显示"EXCEL"格式标识
|
||||
- **AND** 显示"点击下载"按钮
|
||||
- **AND** 页面底部显示使用帮助说明
|
||||
|
||||
#### Scenario: User changes date dimension
|
||||
- **WHEN** 用户切换日期维度选项（按日/按月/按季/自定义）
|
||||
- **THEN** 系统更新日期显示格式
|
||||
- **AND** 用户可根据选定的维度修改日期
|
||||
|
||||
#### Scenario: User downloads report
|
||||
- **WHEN** 用户选择日期并点击"点击下载"按钮
|
||||
- **THEN** 系统发起下载请求
|
||||
- **AND** 模拟文件生成过程
|
||||
- **AND** 显示下载成功提示
|
||||
- **AND** 提示用户可以点击手机右上角的【...】进行转发或保存文件
|
||||
|
||||
### Requirement: Report Data Mock
|
||||
系统 SHALL 使用 mock 数据模拟报表下载功能，无需真实后端接口。
|
||||
|
||||
#### Scenario: Mock data generation
|
||||
- **WHEN** 用户请求下载报表
|
||||
- **THEN** 系统使用 mock 数据模拟文件生成
|
||||
- **AND** 模拟下载延迟（约 500ms）
|
||||
- **AND** 返回下载成功状态
|
||||
|
||||
### Requirement: Report Entry in Dashboard
|
||||
系统 SHALL 在银行端仪表盘添加报表功能入口。
|
||||
|
||||
#### Scenario: Dashboard displays report entry
|
||||
- **WHEN** 用户访问银行端仪表盘
|
||||
- **THEN** 快捷操作区域显示"报表下载"入口
|
||||
- **AND** 点击入口跳转至报表列表页面
|
||||
30
openspec/changes/archive/2025-12-25-add-bank-report/tasks.md
Normal file
30
openspec/changes/archive/2025-12-25-add-bank-report/tasks.md
Normal file
@@ -0,0 +1,30 @@
|
||||
## 1. 数据层实现
|
||||
- [ ] 1.1 创建报表类型定义（`src/typings/bank.ts` 添加 ReportType、ReportCategory 等类型）
|
||||
- [ ] 1.2 创建报表 mock 数据（`src/pagesBank/mock/report.ts`）
|
||||
- [ ] 1.3 创建报表 API 接口（`src/pagesBank/api/report.ts`）
|
||||
|
||||
## 2. 报表列表页面
|
||||
- [ ] 2.1 创建报表列表页面（`src/pagesBank/report/list.vue`）
|
||||
- [ ] 2.2 实现报表分类展示（多维统计、访客报表、营销报表、权益管理）
|
||||
- [ ] 2.3 实现报表条目点击跳转逻辑
|
||||
|
||||
## 3. 报表下载页面
|
||||
- [ ] 3.1 创建报表下载页面（`src/pagesBank/report/download.vue`）
|
||||
- [ ] 3.2 实现日期维度筛选组件（按日、按月、按季、自定义）
|
||||
- [ ] 3.3 实现日期选择器（使用 wot-design-uni 组件）
|
||||
- [ ] 3.4 实现下载按钮和下载逻辑
|
||||
- [ ] 3.5 添加使用帮助说明文案
|
||||
|
||||
## 4. 仪表盘集成
|
||||
- [ ] 4.1 修改银行端仪表盘（`src/pagesBank/dashboard/index.vue`）
|
||||
- [ ] 4.2 在快捷操作区域添加"报表下载"入口
|
||||
|
||||
## 5. 类型定义更新
|
||||
- [ ] 5.1 更新 `src/typings/bank.ts` 添加报表相关类型
|
||||
|
||||
## 6. 验证与测试
|
||||
- [ ] 6.1 验证报表列表页面正常显示
|
||||
- [ ] 6.2 验证报表跳转逻辑正确
|
||||
- [ ] 6.3 验证日期筛选功能正常
|
||||
- [ ] 6.4 验证下载功能模拟成功
|
||||
- [ ] 6.5 验证仪表盘入口正常跳转
|
||||
@@ -0,0 +1,21 @@
|
||||
# Change: 添加银行端客户拜访计划功能
|
||||
|
||||
## Why
|
||||
|
||||
银行端客户经理需要记录和管理客户拜访活动，以便跟踪客户关系、记录营销产品推广情况，并保存现场拜访照片作为凭证。当前系统缺少拜访计划管理功能，无法满足客户关系管理的业务需求。
|
||||
|
||||
## What Changes
|
||||
|
||||
- 在银行端添加客户拜访计划创建页面
|
||||
- 支持设置拜访日期、选择客户、定位位置、选择营销产品、填写拜访主题和备注
|
||||
- 支持上传拜访场景照片（拍照或从相册选择）
|
||||
- 添加拜访计划保存功能
|
||||
- 添加拜访计划列表和详情查看功能
|
||||
|
||||
## Impact
|
||||
|
||||
- Affected specs: `bank-visit-plan` (新能力)
|
||||
- Affected code:
|
||||
- `src/pagesBank/` - 新增拜访计划相关页面
|
||||
- `src/pagesBank/api/` - 新增拜访计划 API 接口
|
||||
- `src/typings/bank.ts` - 新增拜访计划类型定义
|
||||
@@ -0,0 +1,72 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 创建拜访计划
|
||||
银行端用户 SHALL 能够创建客户拜访计划，记录拜访的详细信息。
|
||||
|
||||
#### Scenario: 成功创建拜访计划
|
||||
- **WHEN** 用户填写完整的拜访计划信息（日期、客户、位置、拜访主题、照片）
|
||||
- **THEN** 系统 SHALL 保存拜访计划并返回成功提示
|
||||
|
||||
#### Scenario: 创建拜访计划时验证必填字段
|
||||
- **WHEN** 用户提交拜访计划时缺少必填字段（日期、客户、位置、拜访主题、照片）
|
||||
- **THEN** 系统 SHALL 显示相应的错误提示，阻止提交
|
||||
|
||||
#### Scenario: 选择营销产品
|
||||
- **WHEN** 用户点击营销产品选择器
|
||||
- **THEN** 系统 SHALL 显示可选产品列表，支持多选
|
||||
|
||||
#### Scenario: 上传拜访场景图
|
||||
- **WHEN** 用户点击上传按钮
|
||||
- **THEN** 系统 SHALL 提供拍照和从相册选择两种方式
|
||||
|
||||
### Requirement: 拜访计划列表
|
||||
银行端用户 SHALL 能够查看拜访计划列表，支持筛选和搜索。
|
||||
|
||||
#### Scenario: 查看拜访计划列表
|
||||
- **WHEN** 用户进入拜访计划列表页面
|
||||
- **THEN** 系统 SHALL 显示所有拜访计划，按日期倒序排列
|
||||
|
||||
#### Scenario: 按状态筛选拜访计划
|
||||
- **WHEN** 用户选择状态筛选条件（待拜访、已完成、已取消）
|
||||
- **THEN** 系统 SHALL 显示对应状态的拜访计划
|
||||
|
||||
#### Scenario: 搜索拜访计划
|
||||
- **WHEN** 用户输入关键词搜索
|
||||
- **THEN** 系统 SHALL 显示匹配的拜访计划（按客户名称或拜访主题）
|
||||
|
||||
### Requirement: 拜访计划详情
|
||||
银行端用户 SHALL 能够查看拜访计划的详细信息。
|
||||
|
||||
#### Scenario: 查看拜访计划详情
|
||||
- **WHEN** 用户点击拜访计划列表项
|
||||
- **THEN** 系统 SHALL 显示拜访计划的完整信息（日期、客户、位置、营销产品、拜访主题、备注、照片）
|
||||
|
||||
#### Scenario: 更新拜访状态
|
||||
- **WHEN** 用户在详情页更新拜访状态
|
||||
- **THEN** 系统 SHALL 保存状态变更并刷新页面
|
||||
|
||||
#### Scenario: 编辑拜访计划
|
||||
- **WHEN** 用户点击编辑按钮
|
||||
- **THEN** 系统 SHALL 进入编辑模式，允许修改拜访计划信息
|
||||
|
||||
### Requirement: 客户选择器
|
||||
系统 SHALL 提供客户选择器，支持从客户列表中选择目标客户。
|
||||
|
||||
#### Scenario: 打开客户选择器
|
||||
- **WHEN** 用户点击客户选择字段
|
||||
- **THEN** 系统 SHALL 弹出客户列表页面
|
||||
|
||||
#### Scenario: 选择客户
|
||||
- **WHEN** 用户从列表中选择一个客户
|
||||
- **THEN** 系统 SHALL 返回并显示选中的客户信息
|
||||
|
||||
### Requirement: 位置定位
|
||||
系统 SHALL 支持获取当前位置或手动输入地址。
|
||||
|
||||
#### Scenario: 自动定位
|
||||
- **WHEN** 用户点击定位按钮
|
||||
- **THEN** 系统 SHALL 获取当前位置并显示地址信息
|
||||
|
||||
#### Scenario: 手动输入地址
|
||||
- **WHEN** 用户手动输入地址
|
||||
- **THEN** 系统 SHALL 保存用户输入的地址信息
|
||||
@@ -0,0 +1,42 @@
|
||||
# Implementation Tasks
|
||||
|
||||
## 1. 类型定义和 API 接口
|
||||
- [ ] 1.1 在 `src/typings/bank.ts` 中添加拜访计划相关类型定义
|
||||
- [ ] 1.2 在 `src/pagesBank/api/index.ts` 中添加拜访计划 API 接口
|
||||
- [ ] 1.3 在 `src/pagesBank/mock/index.ts` 中添加拜访计划 Mock 数据
|
||||
|
||||
## 2. 拜访计划创建页面
|
||||
- [ ] 2.1 创建 `src/pagesBank/visit/create.vue` 拜访计划创建页面
|
||||
- [ ] 2.2 实现日期选择器组件
|
||||
- [ ] 2.3 实现客户选择器（弹出客户列表）
|
||||
- [ ] 2.4 实现位置定位功能（地图定位/文本输入）
|
||||
- [ ] 2.5 实现营销产品多选功能
|
||||
- [ ] 2.6 实现拜访主题和备注输入
|
||||
- [ ] 2.7 实现图片上传功能（拍照/相册选择）
|
||||
- [ ] 2.8 实现表单验证和提交功能
|
||||
|
||||
## 3. 拜访计划列表页面
|
||||
- [ ] 3.1 创建 `src/pagesBank/visit/list.vue` 拜访计划列表页面
|
||||
- [ ] 3.2 实现拜访计划列表展示
|
||||
- [ ] 3.3 实现状态筛选（待拜访、已完成、已取消）
|
||||
- [ ] 3.4 实现搜索功能
|
||||
|
||||
## 4. 拜访计划详情页面
|
||||
- [ ] 4.1 创建 `src/pagesBank/visit/detail.vue` 拜访计划详情页面
|
||||
- [ ] 4.2 实现拜访计划详情展示
|
||||
- [ ] 4.3 实现拜访状态更新功能
|
||||
- [ ] 4.4 实现拜访记录编辑功能
|
||||
|
||||
## 5. 路由配置
|
||||
- [ ] 5.1 在 `src/pages.json` 中添加拜访计划相关路由配置
|
||||
|
||||
## 6. 导航入口
|
||||
- [ ] 6.1 在银行端首页或客户详情页添加"创建拜访计划"入口
|
||||
- [ ] 6.2 在客户详情页添加"拜访记录"入口
|
||||
|
||||
## 7. 测试和验证
|
||||
- [ ] 7.1 测试拜访计划创建流程
|
||||
- [ ] 7.2 测试拜访计划列表展示和筛选
|
||||
- [ ] 7.3 测试拜访计划详情查看和编辑
|
||||
- [ ] 7.4 测试图片上传功能
|
||||
- [ ] 7.5 测试表单验证
|
||||
@@ -0,0 +1,29 @@
|
||||
# Change: 修改银行端客户拜访计划功能
|
||||
|
||||
## Why
|
||||
|
||||
当前拜访计划功能在创建时要求填写位置和上传拜访场景图，但在实际业务场景中，这些信息应该在拜访完成时才需要填写。创建拜访计划时只需要记录基本的拜访安排（日期、客户、主题等），而在标记拜访完成时才需要补充位置信息和上传现场照片。这样的流程更符合实际业务需求。
|
||||
|
||||
## What Changes
|
||||
|
||||
- **创建拜访计划页面** (`/pagesBank/visit/create`) 修改：
|
||||
- 移除位置输入和定位功能
|
||||
- 移除上传拜访场景图功能
|
||||
- 保留日期、客户选择、营销产品、拜访主题、备注字段
|
||||
- 更新表单验证逻辑，不再验证位置和照片
|
||||
|
||||
- **拜访计划详情页面** (`/pagesBank/visit/detail?id={}`) 修改：
|
||||
- 在标记完成时，要求填写位置信息（模拟从地图获取地址，默认使用"广东省茂名市"）
|
||||
- 在标记完成时，要求上传拜访场景图
|
||||
- 添加位置和照片的必填验证
|
||||
- 更新状态更新流程，先验证位置和照片后再更新状态
|
||||
|
||||
## Impact
|
||||
|
||||
- Affected specs: `bank-visit-plan` (修改)
|
||||
- Affected code:
|
||||
- `src/pagesBank/visit/create.vue` - 移除位置和照片相关代码
|
||||
- `src/pagesBank/visit/detail.vue` - 添加完成时的位置和照片填写功能
|
||||
- `src/pagesBank/api/index.ts` - 更新 `updateVisitStatus` API 支持位置和照片参数
|
||||
- `src/typings/bank.ts` - 更新 `CreateVisitPlanParams` 类型定义
|
||||
- `openspec/specs/bank-visit-plan/spec.md` - 更新需求规格说明
|
||||
@@ -0,0 +1,91 @@
|
||||
## MODIFIED Requirements
|
||||
|
||||
### Requirement: 创建拜访计划
|
||||
银行端用户 SHALL 能够创建客户拜访计划，记录拜访的基本信息。
|
||||
|
||||
#### Scenario: 成功创建拜访计划
|
||||
- **WHEN** 用户填写完整的拜访计划信息（日期、客户、拜访主题）
|
||||
- **THEN** 系统 SHALL 保存拜访计划并返回成功提示
|
||||
|
||||
#### Scenario: 创建拜访计划时验证必填字段
|
||||
- **WHEN** 用户提交拜访计划时缺少必填字段（日期、客户、拜访主题）
|
||||
- **THEN** 系统 SHALL 显示相应的错误提示，阻止提交
|
||||
|
||||
#### Scenario: 选择营销产品
|
||||
- **WHEN** 用户点击营销产品选择器
|
||||
- **THEN** 系统 SHALL 显示可选产品列表，支持多选
|
||||
|
||||
### Requirement: 拜访计划列表
|
||||
银行端用户 SHALL 能够查看拜访计划列表，支持筛选和搜索。
|
||||
|
||||
#### Scenario: 查看拜访计划列表
|
||||
- **WHEN** 用户进入拜访计划列表页面
|
||||
- **THEN** 系统 SHALL 显示所有拜访计划，按日期倒序排列
|
||||
|
||||
#### Scenario: 按状态筛选拜访计划
|
||||
- **WHEN** 用户选择状态筛选条件（待拜访、已完成、已取消）
|
||||
- **THEN** 系统 SHALL 显示对应状态的拜访计划
|
||||
|
||||
#### Scenario: 搜索拜访计划
|
||||
- **WHEN** 用户输入关键词搜索
|
||||
- **THEN** 系统 SHALL 显示匹配的拜访计划（按客户名称或拜访主题）
|
||||
|
||||
### Requirement: 拜访计划详情
|
||||
银行端用户 SHALL 能够查看拜访计划的详细信息。
|
||||
|
||||
#### Scenario: 查看拜访计划详情
|
||||
- **WHEN** 用户点击拜访计划列表项
|
||||
- **THEN** 系统 SHALL 显示拜访计划的完整信息（日期、客户、营销产品、拜访主题、备注）
|
||||
|
||||
#### Scenario: 标记拜访完成
|
||||
- **WHEN** 用户点击"标记完成"按钮
|
||||
- **THEN** 系统 SHALL 弹出填写位置和上传照片的表单
|
||||
- **AND** 用户填写位置信息（支持自动定位或手动输入，默认地址为"广东省茂名市"）
|
||||
- **AND** 用户上传至少一张拜访场景图
|
||||
- **AND** 系统 SHALL 验证位置和照片必填
|
||||
- **AND** 验证通过后更新拜访状态为"已完成"
|
||||
|
||||
#### Scenario: 标记完成时验证必填字段
|
||||
- **WHEN** 用户提交完成标记时缺少位置信息或照片
|
||||
- **THEN** 系统 SHALL 显示相应的错误提示，阻止状态更新
|
||||
|
||||
#### Scenario: 编辑拜访计划
|
||||
- **WHEN** 用户点击编辑按钮
|
||||
- **THEN** 系统 SHALL 进入编辑模式，允许修改拜访计划信息（日期、主题、备注）
|
||||
|
||||
### Requirement: 客户选择器
|
||||
系统 SHALL 提供客户选择器，支持从客户列表中选择目标客户。
|
||||
|
||||
#### Scenario: 打开客户选择器
|
||||
- **WHEN** 用户点击客户选择字段
|
||||
- **THEN** 系统 SHALL 弹出客户列表页面
|
||||
|
||||
#### Scenario: 选择客户
|
||||
- **WHEN** 用户从列表中选择一个客户
|
||||
- **THEN** 系统 SHALL 返回并显示选中的客户信息
|
||||
|
||||
### Requirement: 位置定位
|
||||
系统 SHALL 支持获取当前位置或手动输入地址。
|
||||
|
||||
#### Scenario: 自动定位
|
||||
- **WHEN** 用户点击定位按钮
|
||||
- **THEN** 系统 SHALL 获取当前位置并显示地址信息
|
||||
|
||||
#### Scenario: 手动输入地址
|
||||
- **WHEN** 用户手动输入地址
|
||||
- **THEN** 系统 SHALL 保存用户输入的地址信息
|
||||
|
||||
#### Scenario: 使用默认地址
|
||||
- **WHEN** 用户未填写位置信息
|
||||
- **THEN** 系统 SHALL 使用默认地址"广东省茂名市"
|
||||
|
||||
### Requirement: 上传拜访场景图
|
||||
系统 SHALL 支持上传拜访场景照片。
|
||||
|
||||
#### Scenario: 上传拜访场景图
|
||||
- **WHEN** 用户点击上传按钮
|
||||
- **THEN** 系统 SHALL 提供拍照和从相册选择两种方式
|
||||
|
||||
#### Scenario: 验证照片数量
|
||||
- **WHEN** 用户标记拜访完成时
|
||||
- **THEN** 系统 SHALL 要求至少上传一张拜访场景图
|
||||
@@ -0,0 +1,67 @@
|
||||
# Tasks: 修改银行端客户拜访计划功能
|
||||
|
||||
## 任务列表
|
||||
|
||||
### 1. 修改类型定义
|
||||
- [x] 更新 `src/typings/bank.ts` 中的 `CreateVisitPlanParams` 接口
|
||||
- 移除 `location`、`latitude`、`longitude`、`photos` 字段
|
||||
- 这些字段将在标记完成时通过 `updateVisitStatus` API 提供
|
||||
- 新增 `CompleteVisitPlanParams` 接口用于标记完成时的参数
|
||||
|
||||
### 2. 修改创建拜访计划页面
|
||||
- [x] 修改 `src/pagesBank/visit/create.vue`
|
||||
- 移除位置输入和定位功能
|
||||
- 移除上传拜访场景图功能
|
||||
- 更新表单验证逻辑
|
||||
- 移除位置验证
|
||||
- 移除照片验证
|
||||
- 更新提交表单逻辑
|
||||
- 移除位置和照片参数
|
||||
|
||||
### 3. 修改拜访计划详情页面
|
||||
- [x] 修改 `src/pagesBank/visit/detail.vue`
|
||||
- 添加标记完成时的表单状态管理
|
||||
- 添加位置输入和定位功能
|
||||
- 添加上传拜访场景图功能
|
||||
- 修改 `handleUpdateStatus` 函数
|
||||
- 点击"标记完成"时弹出填写位置和上传照片的表单
|
||||
- 验证位置和照片必填
|
||||
- 验证通过后调用更新状态 API
|
||||
- 更新模板部分，添加位置和照片填写表单
|
||||
|
||||
### 4. 修改 API 接口
|
||||
- [x] 修改 `src/pagesBank/api/index.ts`
|
||||
- 更新 `createVisitPlan` 函数
|
||||
- 移除位置和照片参数处理
|
||||
- 创建时位置和照片为空
|
||||
- 更新 `updateVisitStatus` 函数
|
||||
- 添加 `location`、`latitude`、`longitude`、`photos` 参数
|
||||
- 更新拜访计划时保存位置和照片信息
|
||||
- 更新 `updateVisitPlan` 函数
|
||||
- 移除位置和照片相关字段的处理
|
||||
|
||||
### 5. 更新 Mock 数据
|
||||
- [x] 修改 `src/pagesBank/mock/index.ts`
|
||||
- 更新 `mockVisitPlans` 数据结构
|
||||
- 确保待拜访的拜访计划位置和照片为空
|
||||
- 已完成的拜访计划包含位置和照片信息
|
||||
|
||||
### 6. 更新规格说明文档
|
||||
- [x] 更新 `openspec/specs/bank-visit-plan/spec.md`
|
||||
- 应用修改提案中的规格变更
|
||||
- 更新创建拜访计划的需求
|
||||
- 更新拜访计划详情的需求
|
||||
- 添加标记完成时的场景
|
||||
|
||||
### 7. 测试验证
|
||||
- [x] 测试创建拜访计划功能
|
||||
- 验证不填写位置和照片可以成功创建
|
||||
- 验证必填字段验证正常工作
|
||||
- [x] 测试标记拜访完成功能
|
||||
- 验证必须填写位置和上传照片才能标记完成
|
||||
- 验证自动定位功能正常
|
||||
- 验证默认地址"广东省茂名市"正常使用
|
||||
- 验证照片上传功能正常
|
||||
- [x] 测试拜访计划详情页面
|
||||
- 验证位置和照片信息正确显示
|
||||
- 验证编辑功能正常工作
|
||||
@@ -0,0 +1,71 @@
|
||||
# Change: 增强贷款审核相关页面功能
|
||||
|
||||
## Why
|
||||
|
||||
当前贷款审核相关页面（银行端审核列表、用户端申请记录、商家端贷款协助、银行端审核详情）的模拟数据不够完善，缺少不同状态的展示，且用户端无法查看银行端受理人的联系方式，影响业务沟通效率。同时银行端审核详情页缺少征信信息和信用评估功能。商家端贷款协助页面需要优化信息展示逻辑和添加状态筛选功能。此外，各端之间的模拟数据需要保持一致，商家端的订单和商品数据应与用户端的商品信息一致，银行端审核详情需要展示用户在商城的消费订单信息。
|
||||
|
||||
## What Changes
|
||||
|
||||
### 银行端审核列表页面（/pagesBank/audit/list）
|
||||
- 优化模拟数据，确保包含所有贷款状态（SUBMITTED、ACCEPTED、INVESTIGATING、REPORTED、APPROVED、REJECTED、SIGNED、DISBURSED）
|
||||
- 确保表格展示不同状态的申请记录
|
||||
- 添加状态筛选 Tab，可快速切换查看不同状态的申请记录
|
||||
|
||||
### 用户端助贷申请记录页面（/pages/me/loan-application-records）
|
||||
- 在处理中状态的申请记录中添加银行端受理人信息
|
||||
- 显示受理人姓名和手机号码，方便用户联系业务处理人员
|
||||
|
||||
### 商家端贷款协助页面（/pagesMerchant/loan/assist）
|
||||
- 优化模拟数据，确保包含不同状态的贷款申请
|
||||
- 确保商家端看到的贷款数据与银行端一致
|
||||
- 移除银行受理人信息卡片（src\pagesMerchant\loan\assist.vue:121-136）
|
||||
- 申请进度及负责人信息：还没有执行的进度不显示负责人信息
|
||||
- 添加状态筛选 Tab，可快速切换查看不同状态的申请记录
|
||||
- 页面标题修改：将"贷款辅助材料"显示为"辅助贷款材料"
|
||||
|
||||
### 银行端审核详情页面（/pagesBank/audit/detail）
|
||||
- 添加征信信息查询功能（弹窗模拟远程查询征信信息），与平台信用评估功能保持一致
|
||||
- 添加平台信用评估分数展示，并注明免责声明："仅供参考，不构成专业建议，实际应用请以权威数据为准。"
|
||||
- 平台信用评估和征信查询功能完成后，刷新按钮应该隐藏
|
||||
- 状态标签显示中文状态文本（如"已拒绝"而非"rejected"）
|
||||
- 优化关联商家信息展示，使用用户端中的商家信息（包括商家ID、商家名称、logo等）
|
||||
- 商家相关附件使用 src/static/fb 目录中的图片资源
|
||||
- **新增：添加用户在商城消费的订单信息展示，包括订单号、商品名称、购买数量、金额等**
|
||||
|
||||
### 商家端贷款协助页面（/pagesMerchant/loan/assist）- 续
|
||||
- 显示申请进度及每个进度的负责人姓名和手机号码（仅已执行的进度显示负责人信息）
|
||||
|
||||
### 商家端订单管理页面（/pagesMerchant/order/list）
|
||||
- **新增：修改订单模拟数据，使其与用户端商品信息保持一致**
|
||||
- 订单中的商品应使用用户端 mockGoodsList 中的商品数据（包括商品ID、商品名称、图片、价格等）
|
||||
- 订单中的商家信息应与用户端商品中的 shopId 和 shopName 保持一致
|
||||
|
||||
### 商家端商品管理页面（/pagesMerchant/goods/list）
|
||||
- **新增：修改商品模拟数据，使其与用户端商品信息保持一致**
|
||||
- 商品数据应使用用户端 mockGoodsList 中的商品数据（包括商品ID、商品名称、图片、价格、库存、销量等）
|
||||
- 商品分类应与用户端商品中的 categoryId 和 categoryName 保持一致
|
||||
|
||||
### 商家端全局文本修改
|
||||
- 商家端贷款协助页面标题"贷款辅助材料"修改为"辅助贷款材料"
|
||||
|
||||
### 所有端模拟数据补充
|
||||
- 所有端添加"驳回要求补充资料"状态的模拟数据
|
||||
|
||||
## Impact
|
||||
|
||||
### Affected Specs
|
||||
- `specs/loan-audit` (新建能力)
|
||||
|
||||
### Affected Code
|
||||
- `src/pagesBank/audit/list.vue` - 银行端审核列表
|
||||
- `src/pagesBank/audit/detail.vue` - 银行端审核详情
|
||||
- `src/pages/me/loan-application-records.vue` - 用户端申请记录
|
||||
- `src/pagesMerchant/loan/assist.vue` - 商家端贷款协助
|
||||
- `src/pagesMerchant/order/list.vue` - 商家端订单管理
|
||||
- `src/pagesMerchant/goods/list.vue` - 商家端商品管理
|
||||
- `src/mock/loan-application.ts` - 贷款申请模拟数据
|
||||
- `src/pagesMerchant/mock/order.ts` - 商家端订单模拟数据
|
||||
- `src/pagesMerchant/mock/goods.ts` - 商家端商品模拟数据
|
||||
- `src/api/loan.ts` - 贷款相关API（可能需要扩展）
|
||||
- `src/typings/loan.ts` - 贷款类型定义（可能需要扩展）
|
||||
- `src/typings/mall.ts` - 商城类型定义（可能需要扩展）
|
||||
@@ -0,0 +1,209 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 银行端审核列表多状态展示
|
||||
|
||||
银行端审核列表页面 SHALL 显示包含所有贷款状态的申请记录，包括：SUBMITTED（新申请）、ACCEPTED（已受理）、INVESTIGATING（调查中）、REPORTED（待审批）、APPROVED（已通过）、REJECTED（已拒绝）、SIGNED（已签约）、DISBURSED（已放款）、REJECTED_REQUIRE_SUPPLEMENT（驳回要求补充资料）。页面 SHALL 提供状态筛选 Tab，可快速切换查看不同状态的申请记录。
|
||||
|
||||
#### Scenario: 银行审核员查看审核列表
|
||||
- **WHEN** 银行审核员访问审核列表页面
|
||||
- **THEN** 页面 SHALL 显示不同状态的贷款申请记录
|
||||
- **AND** 每条记录 SHALL 显示状态标签，使用不同颜色区分状态
|
||||
- **AND** 页面 SHALL 提供状态筛选 Tab 组件
|
||||
- **AND** 用户可以通过 Tab 切换查看特定状态的申请
|
||||
- **AND** 状态标签 SHALL 显示中文状态文本（如"已拒绝"而非"rejected"）
|
||||
|
||||
#### Scenario: 银行审核员使用状态筛选 Tab
|
||||
- **WHEN** 银行审核员点击状态筛选 Tab
|
||||
- **THEN** 页面 SHALL 过滤显示对应状态的申请记录
|
||||
- **AND** Tab SHALL 高亮显示当前选中的状态
|
||||
- **AND** 切换 Tab SHALL 不影响其他筛选条件
|
||||
|
||||
#### Scenario: 银行审核员查看驳回要求补充资料状态
|
||||
- **WHEN** 银行审核员查看审核列表中的"驳回要求补充资料"状态
|
||||
- **THEN** 状态标签 SHALL 正确显示该状态
|
||||
- **AND** 状态标签 SHALL 使用正确的样式和颜色
|
||||
|
||||
### Requirement: 用户端显示银行受理人信息
|
||||
|
||||
用户端助贷申请记录页面 SHALL 在处理中状态的申请记录中显示银行端受理人的姓名和手机号码，方便用户联系业务处理人员。
|
||||
|
||||
#### Scenario: 用户查看处理中的贷款申请
|
||||
- **WHEN** 用户查看状态为"处理中"的贷款申请记录
|
||||
- **THEN** 页面 SHALL 显示银行受理人的姓名和手机号码
|
||||
- **AND** 用户可以点击手机号码直接拨打联系
|
||||
|
||||
#### Scenario: 用户查看非处理中的贷款申请
|
||||
- **WHEN** 用户查看状态为"已完成"或"待提交"的贷款申请记录
|
||||
- **THEN** 页面 SHALL 不显示银行受理人信息
|
||||
|
||||
#### Scenario: 用户查看驳回要求补充资料的贷款申请
|
||||
- **WHEN** 用户查看状态为"驳回要求补充资料"的贷款申请记录
|
||||
- **THEN** 页面 SHALL 显示该状态
|
||||
- **AND** 状态标签 SHALL 使用正确的样式和颜色
|
||||
|
||||
### Requirement: 商家端贷款协助页面展示
|
||||
|
||||
商家端贷款协助页面 SHALL 显示不同状态的贷款申请，数据 SHALL 与银行端保持一致。页面 SHALL 提供状态筛选 Tab，可快速切换查看不同状态的申请记录。页面标题 SHALL 显示为"辅助贷款材料"。
|
||||
|
||||
#### Scenario: 商家查看贷款协助列表
|
||||
- **WHEN** 商家查看贷款协助列表
|
||||
- **THEN** 列表 SHALL 包含不同状态的贷款申请
|
||||
- **AND** 数据 SHALL 与银行端审核列表保持一致
|
||||
- **AND** 页面标题 SHALL 显示为"辅助贷款材料"
|
||||
|
||||
#### Scenario: 商家使用状态筛选 Tab
|
||||
- **WHEN** 商家点击状态筛选 Tab
|
||||
- **THEN** 页面 SHALL 过滤显示对应状态的申请记录
|
||||
- **AND** Tab SHALL 高亮显示当前选中的状态
|
||||
- **AND** 切换 Tab SHALL 不影响其他筛选条件
|
||||
|
||||
#### Scenario: 商家查看驳回要求补充资料的贷款申请
|
||||
- **WHEN** 商家查看状态为"驳回要求补充资料"的贷款申请记录
|
||||
- **THEN** 页面 SHALL 显示该状态
|
||||
- **AND** 状态标签 SHALL 使用正确的样式和颜色
|
||||
|
||||
### Requirement: 商家端显示申请进度及负责人信息
|
||||
|
||||
商家端贷款协助页面 SHALL 显示申请进度。已执行的进度 SHALL 显示负责人姓名和手机号码，未执行的进度 SHALL 不显示负责人信息。
|
||||
|
||||
#### Scenario: 商家查看贷款申请进度
|
||||
- **WHEN** 商家查看贷款协助页面
|
||||
- **THEN** 页面 SHALL 显示申请进度列表
|
||||
- **AND** 已执行的进度 SHALL 显示负责人姓名和手机号码
|
||||
- **AND** 未执行的进度 SHALL 不显示负责人信息
|
||||
- **AND** 商家可以点击已执行进度的手机号码直接拨打联系
|
||||
|
||||
#### Scenario: 商家查看未执行的进度
|
||||
- **WHEN** 商家查看贷款申请进度中的未执行进度项
|
||||
- **THEN** 进度项 SHALL 不显示负责人姓名和手机号码
|
||||
- **AND** 进度项 SHALL 显示进度步骤名称和时间（如果有）
|
||||
|
||||
### Requirement: 银行端审核详情征信查询
|
||||
|
||||
银行端审核详情页面 SHALL 提供征信信息查询功能，通过弹窗模拟远程查询征信信息，与平台信用评估功能保持一致。
|
||||
|
||||
#### Scenario: 银行审核员查询征信信息
|
||||
- **WHEN** 银行审核员点击"查询征信"按钮
|
||||
- **THEN** 系统 SHALL 弹出征信信息查询弹窗
|
||||
- **AND** 弹窗 SHALL 显示模拟的征信查询结果
|
||||
- **AND** 弹窗 SHALL 包含加载状态提示
|
||||
- **AND** 查询完成后，刷新按钮 SHALL 隐藏
|
||||
|
||||
#### Scenario: 银行审核员查看征信查询状态
|
||||
- **WHEN** 征信信息查询已完成
|
||||
- **THEN** 刷新按钮 SHALL 不再显示
|
||||
- **AND** 页面 SHALL 显示查询结果
|
||||
|
||||
### Requirement: 银行端审核详情信用评估分数
|
||||
|
||||
银行端审核详情页面 SHALL 显示平台信用评估分数，并附带免责声明："仅供参考，不构成专业建议，实际应用请以权威数据为准。"
|
||||
|
||||
#### Scenario: 银行审核员查看信用评估分数
|
||||
- **WHEN** 银行审核员查看贷款审核详情
|
||||
- **THEN** 页面 SHALL 显示平台信用评估分数
|
||||
- **AND** 页面 SHALL 显示免责声明："仅供参考，不构成专业建议，实际应用请以权威数据为准。"
|
||||
- **AND** 免责声明 SHALL 使用醒目的样式展示
|
||||
|
||||
#### Scenario: 银行审核员刷新信用评估分数
|
||||
- **WHEN** 银行审核员点击刷新按钮获取信用评估分数
|
||||
- **THEN** 系统 SHALL 显示加载状态
|
||||
- **AND** 评估完成后，刷新按钮 SHALL 隐藏
|
||||
- **AND** 页面 SHALL 显示评估分数
|
||||
|
||||
### Requirement: 银行端审核详情状态中文显示
|
||||
|
||||
银行端审核详情页面 SHALL 显示中文状态文本，而非英文状态代码。
|
||||
|
||||
#### Scenario: 银行审核员查看贷款状态
|
||||
- **WHEN** 银行审核员查看贷款审核详情
|
||||
- **THEN** 状态标签 SHALL 显示中文状态文本（如"已拒绝"而非"rejected"）
|
||||
- **AND** 所有状态 SHALL 使用统一的中文翻译
|
||||
|
||||
### Requirement: 银行端审核详情关联商家信息
|
||||
|
||||
银行端审核详情页面 SHALL 显示关联商家信息，商家相关附件 SHALL 使用 src/static/fb 目录中的图片资源。商家信息 SHALL 与用户端商品数据保持一致。
|
||||
|
||||
#### Scenario: 银行审核员查看关联商家信息
|
||||
- **WHEN** 银行审核员查看贷款审核详情
|
||||
- **THEN** 页面 SHALL 显示关联商家列表
|
||||
- **AND** 每个商家 SHALL 显示商家名称、logo、最后交易时间
|
||||
- **AND** 商家相关附件 SHALL 使用 src/static/fb 目录中的图片资源
|
||||
- **AND** 商家信息 SHALL 与用户端商品数据中的商家信息一致
|
||||
|
||||
#### Scenario: 银行审核员预览商家附件
|
||||
- **WHEN** 银行审核员点击商家附件图片
|
||||
- **THEN** 系统 SHALL 打开图片预览功能
|
||||
|
||||
### Requirement: 银行端审核详情用户订单信息
|
||||
|
||||
银行端审核详情页面 SHALL 显示用户在商城的消费订单信息，包括订单号、商品名称、购买数量、金额等。
|
||||
|
||||
#### Scenario: 银行审核员查看用户订单信息
|
||||
- **WHEN** 银行审核员查看贷款审核详情
|
||||
- **THEN** 页面 SHALL 显示用户的消费订单列表
|
||||
- **AND** 每条订单 SHALL 显示订单号、商品名称、购买数量、金额
|
||||
- **AND** 订单 SHALL 显示下单时间和订单状态
|
||||
- **AND** 订单中的商品信息 SHALL 与用户端商品数据一致
|
||||
|
||||
#### Scenario: 银行审核员查看订单详情
|
||||
- **WHEN** 银行审核员点击订单项
|
||||
- **THEN** 系统 SHALL 显示订单详细信息
|
||||
- **AND** 详细信息 SHALL 包含商品图片、规格、价格等
|
||||
|
||||
### Requirement: 商家端订单数据一致性
|
||||
|
||||
商家端订单管理页面的模拟数据 SHALL 与用户端商品信息保持一致。订单中的商品 SHALL 使用用户端 mockGoodsList 中的商品数据。
|
||||
|
||||
#### Scenario: 商家查看订单列表
|
||||
- **WHEN** 商家查看订单管理页面
|
||||
- **THEN** 订单列表 SHALL 显示订单信息
|
||||
- **AND** 订单中的商品 ID SHALL 与用户端商品 ID 一致
|
||||
- **AND** 订单中的商品名称、图片、价格 SHALL 与用户端商品数据一致
|
||||
- **AND** 订单中的商家信息 SHALL 与用户端商品中的 shopId 和 shopName 一致
|
||||
|
||||
#### Scenario: 商家查看订单详情
|
||||
- **WHEN** 商家查看订单详情
|
||||
- **THEN** 订单详情 SHALL 显示完整订单信息
|
||||
- **AND** 商品信息 SHALL 与用户端商品数据保持一致
|
||||
|
||||
### Requirement: 商家端商品数据一致性
|
||||
|
||||
商家端商品管理页面的模拟数据 SHALL 与用户端商品信息保持一致。商品数据 SHALL 使用用户端 mockGoodsList 中的商品数据。
|
||||
|
||||
#### Scenario: 商家查看商品列表
|
||||
- **WHEN** 商家查看商品管理页面
|
||||
- **THEN** 商品列表 SHALL 显示商品信息
|
||||
- **AND** 商品 ID、名称、图片、价格、库存、销量 SHALL 与用户端商品数据一致
|
||||
- **AND** 商品分类信息 SHALL 与用户端商品中的 categoryId 和 categoryName 一致
|
||||
|
||||
#### Scenario: 商家查看商品详情
|
||||
- **WHEN** 商家查看商品详情
|
||||
- **THEN** 商品详情 SHALL 显示完整商品信息
|
||||
- **AND** 商品信息 SHALL 与用户端商品数据保持一致
|
||||
|
||||
### Requirement: 商家端页面标题修改
|
||||
|
||||
商家端贷款协助页面标题 SHALL 显示为"辅助贷款材料"。
|
||||
|
||||
#### Scenario: 商家查看贷款协助页面
|
||||
- **WHEN** 商家访问贷款协助页面
|
||||
- **THEN** 页面标题 SHALL 显示"辅助贷款材料"
|
||||
|
||||
### Requirement: 所有端驳回要求补充资料状态
|
||||
|
||||
所有端（银行端、用户端、商家端）的模拟数据 SHALL 包含"驳回要求补充资料"状态。
|
||||
|
||||
#### Scenario: 银行端查看驳回要求补充资料状态
|
||||
- **WHEN** 银行审核员查看审核列表
|
||||
- **THEN** 列表 SHALL 包含"驳回要求补充资料"状态的申请
|
||||
- **AND** 状态标签 SHALL 正确显示该状态
|
||||
|
||||
#### Scenario: 用户端查看驳回要求补充资料状态
|
||||
- **WHEN** 用户查看申请记录
|
||||
- **THEN** 列表 SHALL 包含"驳回要求补充资料"状态的申请
|
||||
- **AND** 状态标签 SHALL 正确显示该状态
|
||||
|
||||
#### Scenario: 商家端查看驳回要求补充资料状态
|
||||
- **WHEN** 商家查看贷款协助列表
|
||||
- **THEN** 列表 SHALL 包含"驳回要求补充资料"状态的申请
|
||||
- **AND** 状态标签 SHALL 正确显示该状态
|
||||
@@ -0,0 +1,114 @@
|
||||
## 1. 数据模型扩展
|
||||
|
||||
- [x] 1.1 扩展 `LoanApplication` 类型定义，添加银行受理人信息字段（handlerName、handlerPhone）
|
||||
- [x] 1.2 扩展 `LoanApplicationRecord` 类型定义，添加银行受理人信息字段
|
||||
- [x] 1.3 扩展商家端贷款列表项类型，添加银行受理人信息字段
|
||||
- [x] 1.4 扩展 `LoanApplication` 类型定义，添加用户订单信息字段（userOrders）
|
||||
- [x] 1.5 扩展商家端订单类型定义，确保与用户端商品信息一致
|
||||
|
||||
## 2. 模拟数据优化
|
||||
|
||||
- [x] 2.1 优化银行端审核列表模拟数据，确保包含所有贷款状态
|
||||
- [x] 2.2 优化用户端申请记录模拟数据，为处理中状态添加银行受理人信息
|
||||
- [x] 2.3 优化商家端贷款协助模拟数据，确保包含不同状态和银行受理人信息
|
||||
- [x] 2.4 添加征信信息模拟数据
|
||||
- [x] 2.5 添加信用评估分数模拟数据
|
||||
- [x] 2.6 添加用户商城消费订单模拟数据到贷款申请详情
|
||||
- [x] 2.7 修改商家端订单模拟数据，使用用户端商品信息（mockGoodsList）
|
||||
- [x] 2.8 修改商家端商品模拟数据，使用用户端商品信息（mockGoodsList）
|
||||
|
||||
## 3. 银行端审核列表页面（/pagesBank/audit/list）
|
||||
|
||||
- [x] 3.1 更新模拟数据，确保包含所有贷款状态
|
||||
- [x] 3.2 验证列表页面能正确显示不同状态的申请记录
|
||||
- [x] 3.3 验证状态标签颜色和文本显示正确
|
||||
- [x] 3.4 添加状态筛选 Tab 组件，支持快速切换查看不同状态的申请记录
|
||||
- [x] 3.5 实现 Tab 切换逻辑，根据选中状态过滤显示的申请记录
|
||||
- [x] 3.6 验证 Tab 切换功能正常工作
|
||||
|
||||
## 4. 用户端申请记录页面（/pages/me/loan-application-records）
|
||||
|
||||
- [x] 4.1 在处理中状态的申请记录卡片中添加银行受理人信息展示区域
|
||||
- [x] 4.2 实现受理人姓名和手机号码的显示
|
||||
- [x] 4.3 实现手机号码点击拨打功能
|
||||
- [x] 4.4 确保非处理中状态不显示受理人信息
|
||||
- [x] 4.5 在详情弹窗中也添加银行受理人信息展示
|
||||
|
||||
## 5. 商家端贷款协助页面（/pagesMerchant/loan/assist）
|
||||
|
||||
- [x] 5.1 更新模拟数据，确保包含不同状态的贷款申请
|
||||
- [x] 5.2 确保商家端数据与银行端保持一致
|
||||
- [x] 5.3 移除银行受理人信息卡片（已无此卡片）
|
||||
- [x] 5.4 显示申请进度及每个进度的负责人姓名和手机号码（仅已执行的进度显示）
|
||||
- [x] 5.5 修改页面标题，将"贷款辅助材料"显示为"辅助贷款材料"
|
||||
- [x] 5.6 添加状态筛选 Tab 组件，支持快速切换查看不同状态的申请记录
|
||||
- [x] 5.7 实现 Tab 切换逻辑，根据选中状态过滤显示的申请记录
|
||||
- [x] 5.8 验证 Tab 切换功能正常工作
|
||||
- [x] 5.9 验证未执行的进度不显示负责人信息
|
||||
|
||||
## 6. 银行端审核详情页面（/pagesBank/audit/detail）
|
||||
|
||||
- [x] 6.1 添加"查询征信"按钮
|
||||
- [x] 6.2 实现征信查询弹窗组件
|
||||
- [x] 6.3 实现征信信息模拟查询功能（包含加载状态）
|
||||
- [x] 6.4 添加平台信用评估分数展示区域
|
||||
- [x] 6.5 添加免责声明："仅供参考，不构成专业建议，实际应用请以权威数据为准。"
|
||||
- [x] 6.6 优化关联商家信息展示
|
||||
- [x] 6.7 更新商家附件图片路径，使用 src/static/fb 目录中的资源
|
||||
- [x] 6.8 实现平台信用评估和征信查询功能完成后隐藏刷新按钮
|
||||
- [x] 6.9 修改状态标签显示中文状态文本（如"已拒绝"而非"rejected"）
|
||||
- [x] 6.10 优化查询征信功能，使其与平台信用评估功能保持一致
|
||||
- [x] 6.11 添加用户商城消费订单信息展示区域
|
||||
- [x] 6.12 实现订单列表展示（订单号、商品名称、数量、金额等）
|
||||
- [x] 6.13 验证订单信息正确显示
|
||||
|
||||
## 7. 商家端订单管理页面（/pagesMerchant/order/list）
|
||||
|
||||
- [x] 7.1 修改订单模拟数据，使用用户端商品信息（mockGoodsList）
|
||||
- [x] 7.2 确保订单中的商品ID与用户端商品ID一致
|
||||
- [x] 7.3 确保订单中的商品名称、图片、价格与用户端商品一致
|
||||
- [x] 7.4 验证订单列表正确显示商品信息
|
||||
|
||||
## 8. 商家端商品管理页面（/pagesMerchant/goods/list）
|
||||
|
||||
- [x] 8.1 修改商品模拟数据，使用用户端商品信息（mockGoodsList）
|
||||
- [x] 8.2 确保商品ID、名称、图片、价格、库存、销量与用户端一致
|
||||
- [x] 8.3 确保商品分类信息与用户端一致
|
||||
- [x] 8.4 验证商品列表正确显示
|
||||
|
||||
## 9. 商家端页面标题修改
|
||||
|
||||
- [x] 9.1 修改商家端贷款协助页面标题，将"贷款辅助材料"显示为"辅助贷款材料"
|
||||
- [x] 9.2 验证修改后的标题显示正确
|
||||
|
||||
## 10. 所有端模拟数据补充
|
||||
|
||||
- [x] 10.1 添加"驳回要求补充资料"状态到模拟数据
|
||||
- [x] 10.2 确保银行端、用户端、商家端都包含该状态的模拟数据
|
||||
- [x] 10.3 验证各端能正确显示"驳回要求补充资料"状态
|
||||
|
||||
## 11. 静态资源准备
|
||||
|
||||
- [x] 11.1 确认 src/static/fb 目录存在
|
||||
- [x] 11.2 准备商家附件图片资源（如需要）
|
||||
|
||||
## 12. 测试验证
|
||||
|
||||
- [x] 12.1 验证银行端审核列表显示所有状态
|
||||
- [x] 12.2 验证用户端处理中申请显示银行受理人信息
|
||||
- [x] 12.3 验证商家端已移除银行受理人信息卡片
|
||||
- [x] 12.4 验证商家端未执行的进度不显示负责人信息
|
||||
- [x] 12.5 验证银行端审核列表状态筛选 Tab 功能
|
||||
- [x] 12.6 验证商家端贷款协助页面状态筛选 Tab 功能
|
||||
- [x] 12.7 验证商家端页面标题显示为"辅助贷款材料"
|
||||
- [x] 12.8 验证银行端审核详情征信查询功能
|
||||
- [x] 12.9 验证银行端审核详情信用评估分数显示
|
||||
- [x] 12.10 验证商家附件图片正确加载
|
||||
- [x] 12.11 验证用户端手机号码拨打功能
|
||||
- [x] 12.12 验证平台信用评估和征信查询完成后刷新按钮隐藏
|
||||
- [x] 12.13 验证状态标签显示中文状态文本
|
||||
- [x] 12.14 验证商家端显示申请进度及已执行进度的负责人信息
|
||||
- [x] 12.15 验证所有端包含"驳回要求补充资料"状态
|
||||
- [x] 12.16 验证银行端审核详情显示用户商城消费订单信息
|
||||
- [x] 12.17 验证商家端订单数据与用户端商品信息一致
|
||||
- [x] 12.18 验证商家端商品数据与用户端商品信息一致
|
||||
@@ -0,0 +1,474 @@
|
||||
# Design: 集成保险流程到贷款业务
|
||||
|
||||
## Context
|
||||
|
||||
本设计涉及银行端、保险端和政务端三个系统的协同，实现贷款业务中的保险购买、核保、理赔审核和不良贷款监管的完整流程。
|
||||
|
||||
**关键约束**：
|
||||
- 保险购买是银行端在贷款审核通过后的可选操作，与用户端无关
|
||||
- 银行选择保险产品后，自动发送给对应的保险公司
|
||||
- 银行端发起理赔申请并上传材料到保险公司
|
||||
- 政务端可以看到银行端的所有贷款信息，包括不良贷款
|
||||
|
||||
**本次优化重点**：
|
||||
- 优化银行端审核详情页面的保险功能交互
|
||||
- 实现投保和理赔的页面跳转
|
||||
- 流程步骤条增加保险节点
|
||||
- 快捷入口位置调整
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals**:
|
||||
- 建立银行与保险公司之间的投保和核保流程
|
||||
- 实现银行向保险公司提交理赔申请的功能
|
||||
- 支持保险公司进行核保和理赔审核
|
||||
- 为政务端提供完整的贷款业务流程视图，包括保险和审批信息
|
||||
- 确保各端数据的一致性和可追溯性
|
||||
- 优化银行端保险功能的用户体验
|
||||
|
||||
**Non-Goals**:
|
||||
- 不涉及用户端直接购买保险
|
||||
- 不涉及保险公司主动向银行推送产品
|
||||
- 不涉及政务端对贷款的审批（仅查看）
|
||||
- 不涉及保险产品的具体定价和费率计算
|
||||
|
||||
## Decisions
|
||||
|
||||
### 1. 数据模型设计
|
||||
|
||||
#### 1.1 保险相关数据实体
|
||||
|
||||
```typescript
|
||||
// 保险公司
|
||||
interface InsuranceCompany {
|
||||
id: string;
|
||||
name: string;
|
||||
contactInfo: string;
|
||||
status: 'active' | 'inactive';
|
||||
}
|
||||
|
||||
// 保险产品
|
||||
interface InsuranceProduct {
|
||||
id: string;
|
||||
companyId: string;
|
||||
name: string;
|
||||
type: 'housing_loan' | 'business_credit' | 'other';
|
||||
description: string;
|
||||
minAmount: number;
|
||||
maxAmount: number;
|
||||
status: 'active' | 'inactive';
|
||||
}
|
||||
|
||||
// 投保申请
|
||||
interface InsuranceApplication {
|
||||
id: string;
|
||||
loanId: string;
|
||||
bankId: string;
|
||||
companyId: string;
|
||||
productId: string;
|
||||
customerInfo: {
|
||||
name: string;
|
||||
idNumber: string;
|
||||
creditScore: number;
|
||||
loanAmount: number;
|
||||
loanTerm: number;
|
||||
};
|
||||
insuranceAmount: number;
|
||||
insuranceTerm: number;
|
||||
status: 'pending' | 'approved' | 'rejected';
|
||||
createdAt: Date;
|
||||
reviewedAt?: Date;
|
||||
reviewedBy?: string;
|
||||
rejectionReason?: string;
|
||||
}
|
||||
|
||||
// 保险单
|
||||
interface InsurancePolicy {
|
||||
id: string;
|
||||
applicationId: string;
|
||||
policyNumber: string;
|
||||
companyId: string;
|
||||
bankId: string;
|
||||
loanId: string;
|
||||
productId: string;
|
||||
insuranceAmount: number;
|
||||
insuranceTerm: number;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
status: 'active' | 'expired' | 'cancelled';
|
||||
issuedAt: Date;
|
||||
}
|
||||
|
||||
// 理赔申请
|
||||
interface ClaimApplication {
|
||||
id: string;
|
||||
policyId: string;
|
||||
loanId: string;
|
||||
bankId: string;
|
||||
companyId: string;
|
||||
claimAmount: number;
|
||||
claimReason: string;
|
||||
materials: string[]; // 文件URL列表
|
||||
status: 'pending' | 'approved' | 'rejected';
|
||||
submittedAt: Date;
|
||||
reviewedAt?: Date;
|
||||
reviewedBy?: string;
|
||||
rejectionReason?: string;
|
||||
payoutAmount?: number;
|
||||
payoutDate?: Date;
|
||||
}
|
||||
```
|
||||
|
||||
#### 1.2 贷款与保险关联
|
||||
|
||||
```typescript
|
||||
// 扩展现有贷款实体
|
||||
interface Loan {
|
||||
id: string;
|
||||
// ... 现有字段
|
||||
insuranceApplicationId?: string; // 可选
|
||||
insurancePolicyId?: string; // 可选
|
||||
claimApplicationIds: string[]; // 理赔申请列表
|
||||
isBadLoan: boolean; // 是否为不良贷款
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 业务流程设计
|
||||
|
||||
#### 2.1 保险购买流程
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Bank as 银行端
|
||||
participant System as 系统后端
|
||||
participant Insurance as 保险端
|
||||
|
||||
Bank->>System: 1. 贷款审核通过
|
||||
Bank->>System: 2. 选择购买保险（可选）
|
||||
Bank->>System: 3. 选择保险公司和产品
|
||||
Bank->>System: 4. 确定保险金额和期限
|
||||
System->>System: 5. 创建投保申请
|
||||
System->>Insurance: 6. 自动发送投保申请
|
||||
Insurance->>Insurance: 7. 核保人员审核
|
||||
alt 核保通过
|
||||
Insurance->>System: 8a. 返回核保通过
|
||||
System->>System: 9a. 生成保险单
|
||||
System->>Bank: 10a. 通知投保成功
|
||||
else 核保拒绝
|
||||
Insurance->>System: 8b. 返回拒绝原因
|
||||
System->>Bank: 10b. 通知投保失败
|
||||
end
|
||||
```
|
||||
|
||||
#### 2.2 理赔申请流程
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Bank as 银行端
|
||||
participant System as 系统后端
|
||||
participant Insurance as 保险端
|
||||
|
||||
Bank->>System: 1. 发起理赔申请
|
||||
Bank->>System: 2. 上传理赔材料
|
||||
System->>System: 3. 创建理赔申请记录
|
||||
System->>Insurance: 4. 发送理赔申请
|
||||
Insurance->>Insurance: 5. 审核理赔材料
|
||||
alt 审核通过
|
||||
Insurance->>System: 6a. 返回审核通过
|
||||
Insurance->>System: 7a. 执行赔付
|
||||
System->>Bank: 8a. 通知理赔成功
|
||||
else 审核拒绝
|
||||
Insurance->>System: 6b. 返回拒绝原因
|
||||
System->>Bank: 8b. 通知理赔失败
|
||||
end
|
||||
```
|
||||
|
||||
#### 2.3 政务端查看流程
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Government as 政务端
|
||||
participant System as 系统后端
|
||||
|
||||
Government->>System: 1. 请求贷款列表
|
||||
System->>Government: 2. 返回贷款信息（含保险信息）
|
||||
Government->>System: 3. 请求贷款详情
|
||||
System->>Government: 4. 返回完整信息：
|
||||
- 用户信息
|
||||
- 贷款信息
|
||||
- 保险信息（投保申请、保险单）
|
||||
- 理赔信息（理赔申请、审核结果）
|
||||
- 审批流程记录
|
||||
```
|
||||
|
||||
### 3. API 接口设计
|
||||
|
||||
#### 3.1 银行端接口
|
||||
|
||||
```typescript
|
||||
// 获取合作保险公司列表
|
||||
GET /api/bank/insurance/companies
|
||||
|
||||
// 获取保险产品列表
|
||||
GET /api/bank/insurance/products?companyId={companyId}
|
||||
|
||||
// 创建投保申请
|
||||
POST /api/bank/insurance/applications
|
||||
{
|
||||
loanId: string;
|
||||
companyId: string;
|
||||
productId: string;
|
||||
insuranceAmount: number;
|
||||
insuranceTerm: number;
|
||||
}
|
||||
|
||||
// 获取投保申请状态
|
||||
GET /api/bank/insurance/applications/{id}
|
||||
|
||||
// 创建理赔申请
|
||||
POST /api/bank/insurance/claims
|
||||
{
|
||||
policyId: string;
|
||||
loanId: string;
|
||||
claimAmount: number;
|
||||
claimReason: string;
|
||||
materials: File[];
|
||||
}
|
||||
|
||||
// 获取理赔申请状态
|
||||
GET /api/bank/insurance/claims/{id}
|
||||
```
|
||||
|
||||
#### 3.2 保险端接口
|
||||
|
||||
```typescript
|
||||
// 获取待核保申请列表
|
||||
GET /api/insurance/applications?status=pending
|
||||
|
||||
// 获取投保申请详情
|
||||
GET /api/insurance/applications/{id}
|
||||
|
||||
// 核保审核
|
||||
POST /api/insurance/applications/{id}/review
|
||||
{
|
||||
approved: boolean;
|
||||
rejectionReason?: string;
|
||||
}
|
||||
|
||||
// 获取待理赔审核列表
|
||||
GET /api/insurance/claims?status=pending
|
||||
|
||||
// 获取理赔申请详情
|
||||
GET /api/insurance/claims/{id}
|
||||
|
||||
// 理赔审核
|
||||
POST /api/insurance/claims/{id}/review
|
||||
{
|
||||
approved: boolean;
|
||||
rejectionReason?: string;
|
||||
payoutAmount?: number;
|
||||
}
|
||||
```
|
||||
|
||||
#### 3.3 政务端接口
|
||||
|
||||
```typescript
|
||||
// 获取贷款列表（含保险信息）
|
||||
GET /api/government/loans?includeInsurance=true
|
||||
|
||||
// 获取贷款详情（含完整业务流程）
|
||||
GET /api/government/loans/{id}?full=true
|
||||
|
||||
// 获取不良贷款列表
|
||||
GET /api/government/loans/bad
|
||||
```
|
||||
|
||||
### 4. 页面结构设计
|
||||
|
||||
#### 4.1 银行端页面
|
||||
|
||||
```
|
||||
src/pagesBank/insurance/
|
||||
├── application/
|
||||
│ ├── create.vue # 创建投保申请
|
||||
│ └── detail.vue # 投保申请详情
|
||||
├── claim/
|
||||
│ ├── create.vue # 创建理赔申请
|
||||
│ └── list.vue # 理赔申请列表
|
||||
└── policy/
|
||||
└── detail.vue # 保险单详情
|
||||
```
|
||||
|
||||
#### 4.2 保险端页面
|
||||
|
||||
```
|
||||
src/pagesInsurance/underwriting/
|
||||
├── list.vue # 待核保申请列表
|
||||
└── detail.vue # 核保申请详情
|
||||
|
||||
src/pagesInsurance/claim-review/
|
||||
├── list.vue # 待理赔审核列表
|
||||
└── detail.vue # 理赔审核详情
|
||||
```
|
||||
|
||||
#### 4.3 政务端页面
|
||||
|
||||
```
|
||||
src/pagesGovernment/bank/
|
||||
├── list.vue # 修改：显示保险信息标识
|
||||
└── detail.vue # 修改：显示完整业务流程信息
|
||||
```
|
||||
|
||||
### 5. 状态机设计
|
||||
|
||||
#### 5.1 投保申请状态机
|
||||
|
||||
```
|
||||
pending → approved → policy_issued
|
||||
pending → rejected
|
||||
```
|
||||
|
||||
#### 5.2 理赔申请状态机
|
||||
|
||||
```
|
||||
pending → approved → paid
|
||||
pending → rejected
|
||||
```
|
||||
|
||||
### 6. 权限控制
|
||||
|
||||
- **银行端**：只能查看和操作自己发起的投保和理赔申请
|
||||
- **保险端**：只能查看和操作分配给自己的核保和理赔审核任务
|
||||
- **政务端**：只读权限，可查看所有贷款信息
|
||||
|
||||
## UI/UX 优化设计
|
||||
|
||||
### 6.1 审核详情页面优化
|
||||
|
||||
#### 6.1.1 保险信息展示
|
||||
|
||||
根据贷款状态动态展示不同的保险信息：
|
||||
|
||||
- **未投保状态**（status === 'DISBURSED' && !hasInsurance）：
|
||||
- 显示"购买保险"按钮
|
||||
- 不显示保单信息
|
||||
|
||||
- **已投保状态**（hasInsurance）：
|
||||
- 显示保单信息（保险公司、保单号、保险金额、保险期限）
|
||||
- 显示"申请理赔"按钮
|
||||
|
||||
- **投保中状态**（insuranceStatus === 'pending'）：
|
||||
- 显示投保申请进度
|
||||
- 不显示保单号（还未生成）
|
||||
|
||||
- **已理赔状态**（hasClaim）：
|
||||
- 显示保单信息
|
||||
- 显示理赔记录
|
||||
|
||||
#### 6.1.2 投保申请跳转
|
||||
|
||||
```typescript
|
||||
function handleBuyInsurance() {
|
||||
const loanId = detail.value.id
|
||||
const loanAmount = detail.value.amount
|
||||
const loanTerm = detail.value.term * 12 // 转换为月
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/application/create?loanId=${loanId}&loanAmount=${loanAmount}&loanTerm=${loanTerm}`,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
#### 6.1.3 理赔申请跳转
|
||||
|
||||
```typescript
|
||||
function handleApplyClaim() {
|
||||
const loanId = detail.value.id
|
||||
const policyId = detail.value.insurancePolicy.id
|
||||
const policyNumber = detail.value.insurancePolicy.policyNumber
|
||||
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/claim/create?loanId=${loanId}&policyId=${policyId}&policyNumber=${policyNumber}`,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 6.2 流程步骤条优化
|
||||
|
||||
#### 6.2.1 步骤定义
|
||||
|
||||
```typescript
|
||||
const steps = [
|
||||
{ key: 'SUBMITTED', label: '申请' },
|
||||
{ key: 'ACCEPTED', label: '受理' },
|
||||
{ key: 'INVESTIGATING', label: '调查' },
|
||||
{ key: 'APPROVING', label: '审批' },
|
||||
{ key: 'INSURANCE', label: '投保', condition: (detail) => detail.hasInsurance },
|
||||
{ key: 'SIGNING', label: '签约' },
|
||||
{ key: 'DISBURSED', label: '放款' },
|
||||
]
|
||||
```
|
||||
|
||||
#### 6.2.2 条件渲染
|
||||
|
||||
```vue
|
||||
<view
|
||||
v-for="(step, index) in visibleSteps"
|
||||
:key="step.key"
|
||||
class="step-item"
|
||||
:class="{ active: index <= currentStepIndex, current: index === currentStepIndex }"
|
||||
>
|
||||
<!-- 步骤内容 -->
|
||||
</view>
|
||||
```
|
||||
|
||||
### 6.3 快捷入口迁移
|
||||
|
||||
#### 6.3.1 从审核列表移除
|
||||
|
||||
移除 `/pagesBank/audit/list.vue` 中的保险功能快捷入口代码块。
|
||||
|
||||
#### 6.3.2 添加到工作台首页
|
||||
|
||||
在 `/pagesBank/dashboard/index.vue` 的 `quickActions` 数组中添加：
|
||||
|
||||
```typescript
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
|
||||
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/list' },
|
||||
{ icon: 'i-carbon-calendar', label: '拜访计划', path: '/pagesBank/visit/list' },
|
||||
{ icon: 'i-carbon-add', label: '创建拜访', path: '/pagesBank/visit/create' },
|
||||
{ icon: 'i-carbon-document-download', label: '报表', path: '/pagesBank/report/list' },
|
||||
{ icon: 'i-carbon-security', label: '投保管理', path: '/pagesBank/insurance/application/list' },
|
||||
{ icon: 'i-carbon-money', label: '理赔管理', path: '/pagesBank/insurance/claim/list' },
|
||||
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
|
||||
]
|
||||
```
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
| Risk | Mitigation |
|
||||
|------|-----------|
|
||||
| 保险公司核保时间过长影响贷款放款 | 设置核保超时机制，超时后允许银行取消投保 |
|
||||
| 理赔材料审核标准不统一 | 在系统中提供审核标准文档和模板 |
|
||||
| 跨系统数据同步延迟 | 使用消息队列确保数据最终一致性 |
|
||||
| 政务端数据量过大影响性能 | 实现分页和懒加载，支持按条件筛选 |
|
||||
|
||||
## Migration Plan
|
||||
|
||||
1. **Phase 0**: 创建数据表和 API 接口
|
||||
2. **Phase 2**: 实现银行端保险购买功能
|
||||
3. **Phase 3**: 实现保险端核保功能
|
||||
4. **Phase 4**: 实现银行端理赔申请功能
|
||||
5. **Phase 5**: 实现保险端理赔审核功能
|
||||
6. **Phase 6**: 扩展政务端查看功能
|
||||
|
||||
**Rollback**: 如果需要回滚，可以禁用保险相关功能，贷款流程将恢复到不包含保险的状态。
|
||||
|
||||
## Open Questions
|
||||
|
||||
1. 保险公司是否需要支持多家银行同时接入？
|
||||
2. 理赔赔付金额的计算规则是什么？
|
||||
3. 不良贷款的判定标准是什么（逾期天数、金额等）？
|
||||
4. 是否需要支持保险单的转让或变更？
|
||||
5. 投保节点是否需要在所有贷款流程中都显示？
|
||||
@@ -0,0 +1,288 @@
|
||||
# Change: 集成保险流程到贷款业务（优化版）
|
||||
|
||||
## Why
|
||||
|
||||
当前贷款业务流程中缺少保险环节，无法实现风险共担机制。银行需要在贷款审核通过后选择为贷款购买保险（可选），保险公司进行核保，并在发生逾期时进行理赔。同时，政务端需要能够查看完整的贷款业务流程信息，包括保险和审批记录。这个变更将完善金融生态的风险管理体系。
|
||||
|
||||
## What Changes
|
||||
|
||||
### 本次优化内容（integrate-insurance-flow）
|
||||
|
||||
**银行端优化**：
|
||||
|
||||
1. **审核详情页面投保流程优化**：
|
||||
- 点击"购买保险"跳转到保险公司选择页面
|
||||
- 选择保险公司后，跳转到保险产品选择页面
|
||||
- 选择产品后，填充投保申请创建页面的表单
|
||||
- 实现完整的多步导航流程
|
||||
|
||||
2. **新增页面**：
|
||||
|
||||
2.1 **投保申请列表页面** (`src/pagesBank/insurance/application/list.vue`)
|
||||
- 显示所有投保申请列表
|
||||
- 支持按状态筛选（全部、待审核、已通过、已拒绝）
|
||||
- 支持搜索功能（按ID/公司名称/产品名称/保单号）
|
||||
- 支持分页加载（每页20条）
|
||||
- 显示保险公司、保单号、保险金额、状态、提交时间
|
||||
- 点击跳转到投保申请详情页
|
||||
- 下拉刷新和上拉加载更多
|
||||
|
||||
2.2 **保险公司选择页面** (`src/pagesBank/insurance/company/select.vue`)
|
||||
- 独立展示合作保险公司列表
|
||||
- 支持搜索公司名称和联系方式
|
||||
- 显示保险公司详细信息（名称、联系方式、合作状态）
|
||||
- 显示已合作产品数量
|
||||
- 点击选择后带参数跳转到产品选择页面
|
||||
- 返回按钮返回投保申请页面
|
||||
|
||||
2.3 **保险产品选择页面** (`src/pagesBank/insurance/product/select.vue`)
|
||||
- 独立展示保险产品列表
|
||||
- 支持搜索产品名称、描述、类型
|
||||
- 显示产品详细信息（名称、类型、描述、金额范围）
|
||||
- 显示所属保险公司
|
||||
- 支持查看产品详情弹窗
|
||||
- 点击选择后返回投保申请页面并传递产品信息
|
||||
|
||||
3. **工作台首页快捷入口**：
|
||||
- 投保管理：跳转到 `/pagesBank/insurance/application/list`
|
||||
- 理赔管理：跳转到 `/pagesBank/insurance/claim/list`
|
||||
|
||||
### 原始功能范围
|
||||
|
||||
- **银行端**：
|
||||
- 在贷款审核通过后添加可选的保险购买流程
|
||||
- 支持选择合作保险公司和保险产品
|
||||
- 支持确定保险类型、保险金额和保险期限
|
||||
- 添加理赔申请功能，支持上传理赔材料
|
||||
- 贷款信息（包括不良贷款）对政务端可见
|
||||
|
||||
- **保险端**：
|
||||
- 添加核保流程，接收银行提交的投保申请
|
||||
- 支持核保人员查看投保单和银行提供的客户信息
|
||||
- 支持核保通过（出具保险单）和拒绝（返回拒绝原因）
|
||||
- 添加理赔审核功能，审核银行提交的理赔材料
|
||||
|
||||
- **政务端**：
|
||||
- 查看完整的贷款业务流程信息
|
||||
- 查看用户信息、保险信息和相关审批记录
|
||||
- 识别和查看不良贷款信息
|
||||
|
||||
## Impact
|
||||
|
||||
- **Affected specs**:
|
||||
- 新增 `bank-insurance-integration` 能力
|
||||
- 新增 `insurance-underwriting` 能力
|
||||
- 新增 `insurance-claim-review` 能力
|
||||
- 新增 `government-bad-loans` 能力
|
||||
- 新增 `insurance-navigation` 能力（本次优化）
|
||||
- 修改 `bank-insurance-ui` 能力（本次优化）
|
||||
|
||||
- **Affected code**:
|
||||
- `src/pagesBank/audit/detail.vue` - 审核详情页面（本次优化投保流程）
|
||||
- `src/pagesBank/audit/list.vue` - 审核列表页面（移除快捷入口）
|
||||
- `src/pagesBank/dashboard/index.vue` - 工作台首页（快捷入口已存在）
|
||||
- `src/pagesBank/insurance/application/list.vue` - 投保申请列表页面（新增）
|
||||
- `src/pagesBank/insurance/company/select.vue` - 保险公司选择页面（新增）
|
||||
- `src/pagesBank/insurance/product/select.vue` - 保险产品选择页面（新增）
|
||||
- `src/pagesBank/insurance/application/create.vue` - 投保申请创建页面（支持参数）
|
||||
- `src/pagesBank/` - 银行端页面（保险购买、理赔申请）
|
||||
- `src/pagesInsurance/` - 保险端页面（核保、理赔审核）
|
||||
- `src/pagesGovernment/` - 政务端页面（不良贷款查看）
|
||||
- `src/api/insurance.ts` - API 接口定义
|
||||
- 相关的 mock 数据和类型定义
|
||||
|
||||
## Change Impact
|
||||
|
||||
- **Spec**: `openspec/changes/integrate-insurance-flow/design.md`
|
||||
- **Bank End**:
|
||||
- `src/pagesBank/audit/detail.vue`: 优化保险信息展示，实现投保多步导航
|
||||
- `src/pagesBank/audit/list.vue`: 移除保险功能快捷入口
|
||||
- `src/pagesBank/dashboard/index.vue`: 添加保险功能快捷入口（已存在）
|
||||
- `src/pagesBank/insurance/application/list.vue`: 新增投保申请列表页面
|
||||
- `src/pagesBank/insurance/company/select.vue`: 新增保险公司选择页面
|
||||
- `src/pagesBank/insurance/product/select.vue`: 新增保险产品选择页面
|
||||
- **Insurance End**:
|
||||
- `src/pagesInsurance/policy/list.vue`: 添加核保和理赔审核快捷入口
|
||||
- `src/pagesInsurance/claim/list.vue`: 优化理赔列表展示，支持查看保单和更多状态
|
||||
- `src/pagesInsurance/underwriting/list.vue`: 添加模拟数据，支持展示多种核保状态
|
||||
- `src/pagesInsurance/claim-review/list.vue`: 添加模拟数据，支持展示多种理赔审核状态
|
||||
- `src/api/insurance.ts`:
|
||||
- 添加保险端核保和理赔审核的模拟数据
|
||||
- 扩展 `mockInsurancePolicies` 数组至12条，实现数据多样性
|
||||
- **Government End**:
|
||||
- `src/pagesGovernment/bank/detail.vue`: 扩充 Mock 数据，支持贷款列表卡片展开详细信息
|
||||
- **API**:
|
||||
- `src/api/insurance.ts`: 添加保险端核保和理赔审核的模拟数据
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Phase 0: UI/UX Enhancement（已完成 + 本次优化）
|
||||
- [x] Bank: Update Audit List with Insurance tags and shortcuts
|
||||
- [x] Bank: Update Audit Detail with Insurance card and actions
|
||||
- [x] Bank: Create Insurance Application List page
|
||||
- [x] Bank: Create Company Selection page
|
||||
- [x] Bank: Create Product Selection page
|
||||
- [x] Bank: Optimize Audit Detail navigation flow
|
||||
- [x] Insurance: Update Policy List with Underwriting/Claim shortcuts
|
||||
- [x] Insurance: Update Claim List with Policy view
|
||||
- [ ] Insurance: Add mock data for underwriting list（本次新增）
|
||||
- [ ] Insurance: Add mock data for claim review list（本次新增）
|
||||
- [x] Government: Expand Mock Data and implement collapsible cards
|
||||
|
||||
### Phase 1: Database & API
|
||||
- **Goal**: Establish data models and backend APIs.
|
||||
- **Tasks**:
|
||||
- Create tables for insurance companies, products, applications, policies, claims.
|
||||
- Implement APIs for all roles (Bank, Insurance, Government).
|
||||
|
||||
### Phase 2: Frontend Integration
|
||||
- **Goal**: Integrate APIs into the frontend pages.
|
||||
- **Tasks**:
|
||||
- Implement full flows: Purchase -> Underwrite -> Policy -> Claim -> Auditing -> Payout.
|
||||
- Connect all enhanced UI components to real data.
|
||||
|
||||
### Phase 3: Testing & Deployment
|
||||
- **Goal**: Verify end-to-end flows.
|
||||
- **Tasks**:
|
||||
- Integration testing.
|
||||
- Deployment to staging/prod.
|
||||
|
||||
## Page Navigation Flow
|
||||
|
||||
```
|
||||
|
||||
## 保险端模拟数据设计
|
||||
|
||||
### 核保申请模拟数据
|
||||
|
||||
为 `src/pagesInsurance/underwriting/list.vue` 添加以下模拟数据：
|
||||
|
||||
1. **待审核状态** (pending):
|
||||
- 投保申请号: IA20250112001
|
||||
- 银行: 中国工商银行
|
||||
- 保险公司: 中国人民财产保险股份有限公司
|
||||
- 保险产品: 个人住房贷款保险
|
||||
- 客户: 张三（信用评分 750）
|
||||
- 保险金额: 500,000 元
|
||||
- 保险期限: 120 个月
|
||||
|
||||
2. **已通过状态** (approved):
|
||||
- 投保申请号: IA20250111001
|
||||
- 银行: 中国工商银行
|
||||
- 保险公司: 中国平安财产保险股份有限公司
|
||||
- 保险产品: 小微企业贷款保证保险
|
||||
- 客户: 李四（信用评分 720）
|
||||
- 保险金额: 800,000 元
|
||||
- 保险期限: 180 个月
|
||||
- 核保员: 核保员001
|
||||
|
||||
3. **已拒绝状态** (rejected):
|
||||
- 投保申请号: IA20250110001
|
||||
- 银行: 中国建设银行
|
||||
- 保险公司: 中国太平洋财产保险股份有限公司
|
||||
- 保险产品: 个人消费贷款保险
|
||||
- 客户: 王五（信用评分 680）
|
||||
- 保险金额: 300,000 元
|
||||
- 保险期限: 90 个月
|
||||
- 核保员: 核保员002
|
||||
- 拒绝原因: 客户信用评分低于产品要求最低值700分
|
||||
|
||||
4. **待审核状态** (pending):
|
||||
- 投保申请号: IA20250109001
|
||||
- 银行: 中国工商银行
|
||||
- 保险公司: 中国人民财产保险股份有限公司
|
||||
- 保险产品: 企业信贷履约保证保险
|
||||
- 客户: 赵六（信用评分 780）
|
||||
- 保险金额: 600,000 元
|
||||
- 保险期限: 120 个月
|
||||
|
||||
### 理赔审核模拟数据
|
||||
|
||||
为 `src/pagesInsurance/claim-review/list.vue` 添加以下模拟数据：
|
||||
|
||||
1. **待审核状态** (pending):
|
||||
- 理赔申请号: CA20250112001
|
||||
- 银行: 中国工商银行
|
||||
- 保险单号: POL20250111001
|
||||
- 保险公司: 中国平安财产保险股份有限公司
|
||||
- 理赔金额: 400,000 元
|
||||
- 理赔原因: 借款人逾期超过90天，无法偿还贷款本息
|
||||
- 材料数量: 3 份（逾期还款记录.pdf、催收记录.docx、借款人财务状况.jpg）
|
||||
|
||||
2. **已通过状态** (approved):
|
||||
- 理赔申请号: CA20250111001
|
||||
- 银行: 中国工商银行
|
||||
- 保险单号: POL20250111001
|
||||
- 保险公司: 中国平安财产保险股份有限公司
|
||||
- 理赔金额: 200,000 元
|
||||
- 赔付金额: 180,000 元
|
||||
- 理赔原因: 借款人经营困难，申请部分理赔
|
||||
- 材料数量: 1 份（经营困难证明.pdf）
|
||||
- 审核员: 理赔审核员001
|
||||
- 赔付日期: 2025-01-12
|
||||
|
||||
3. **已拒绝状态** (rejected):
|
||||
- 理赔申请号: CA20250110001
|
||||
- 银行: 中国工商银行
|
||||
- 保险单号: POL20250111001
|
||||
- 保险公司: 中国平安财产保险股份有限公司
|
||||
- 理赔金额: 600,000 元
|
||||
- 理赔原因: 借款人失联，申请全额理赔
|
||||
- 材料数量: 1 份（失联证明.pdf）
|
||||
- 审核员: 理赔审核员002
|
||||
- 拒绝原因: 提供的失联证明材料不充分，需要补充公安部门出具的正式证明文件
|
||||
|
||||
### 保单模拟数据设计
|
||||
|
||||
为 `src/pagesInsurance/policy/list.vue` 添加以下12条保单模拟数据，实现数据多样性：
|
||||
|
||||
**生效中保单 (active)** - 6条：
|
||||
1. 保单号: POL20250111001 | 保险公司: 中国平安 | 产品: 小微企业贷款保证保险 | 保额: 800,000元 | 期限: 180个月
|
||||
2. 保单号: POL20241220001 | 保险公司: 中国人保 | 产品: 个人住房贷款保险 | 保额: 500,000元 | 期限: 120个月
|
||||
3. 保单号: POL20241115002 | 保险公司: 中国太保 | 产品: 个人消费贷款保险 | 保额: 300,000元 | 期限: 90个月
|
||||
4. 保单号: POL20241010003 | 保险公司: 中国人保 | 产品: 企业信贷履约保证保险 | 保额: 1,000,000元 | 期限: 240个月
|
||||
5. 保单号: POL20240305010 | 保险公司: 中国平安 | 产品: 小微企业贷款保证保险 | 保额: 900,000元 | 期限: 180个月
|
||||
6. 保单号: POL20240206011 | 保险公司: 中国太保 | 产品: 个人消费贷款保险 | 保额: 250,000元 | 期限: 120个月
|
||||
|
||||
**即将到期保单 (expiring)** - 3条：
|
||||
1. 保单号: POL20240905004 | 保险公司: 中国平安 | 产品: 小微企业贷款保证保险 | 保额: 450,000元 | 期限: 120个月
|
||||
2. 保单号: POL20240805005 | 保险公司: 中国太保 | 产品: 个人消费贷款保险 | 保额: 200,000元 | 期限: 60个月
|
||||
3. 保单号: POL20240701006 | 保险公司: 中国人保 | 产品: 个人住房贷款保险 | 保额: 350,000元 | 期限: 180个月
|
||||
|
||||
**已失效保单 (expired)** - 3条：
|
||||
1. 保单号: POL20240602007 | 保险公司: 中国平安 | 产品: 小微企业贷款保证保险 | 保额: 600,000元 | 期限: 150个月
|
||||
2. 保单号: POL20240503008 | 保险公司: 中国太保 | 产品: 个人消费贷款保险 | 保额: 150,000元 | 期限: 90个月
|
||||
3. 保单号: POL20240404009 | 保险公司: 中国人保 | 产品: 企业信贷履约保证保险 | 保额: 750,000元 | 期限: 200个月
|
||||
|
||||
### Mock 数据实现位置
|
||||
|
||||
模拟数据将在 `src/api/insurance.ts` 中的以下数组中添加：
|
||||
|
||||
- `mockInsuranceApplications`: 核保申请模拟数据（4条记录）
|
||||
- `mockClaimApplications`: 理赔审核模拟数据（3条记录）
|
||||
- `mockInsurancePolicies`: 保险单模拟数据（12条记录，包含生效中、即将到期、已失效三种状态）
|
||||
审核详情页面 (/pagesBank/audit/detail)
|
||||
│
|
||||
├─→ "购买保险" 按钮
|
||||
│
|
||||
▼
|
||||
保险公司选择页面 (/pagesBank/insurance/company/select)
|
||||
│
|
||||
├─→ 选择保险公司
|
||||
│
|
||||
▼
|
||||
保险产品选择页面 (/pagesBank/insurance/product/select)
|
||||
│
|
||||
├─→ 选择保险产品
|
||||
│
|
||||
▼
|
||||
投保申请创建页面 (/pagesBank/insurance/application/create)
|
||||
│
|
||||
└─→ 提交投保申请
|
||||
|
||||
工作台首页 (/pagesBank/dashboard/index)
|
||||
│
|
||||
├─→ "投保管理" → /pagesBank/insurance/application/list
|
||||
│
|
||||
└─→ "理赔管理" → /pagesBank/insurance/claim/list
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
# bank-insurance-integration Specification Delta
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 保险购买入口
|
||||
银行端 SHALL 在贷款审核通过后提供保险购买入口，该入口为可选操作。
|
||||
|
||||
#### Scenario: 显示保险购买入口
|
||||
- **WHEN** 银行端用户查看已审核通过的贷款详情
|
||||
- **THEN** 系统 SHALL 显示"购买保险"按钮
|
||||
- **AND** 该按钮为可选操作，不强制要求购买
|
||||
|
||||
#### Scenario: 跳过保险购买
|
||||
- **WHEN** 银行端用户选择不购买保险
|
||||
- **THEN** 系统 SHALL 继续原贷款流程处理
|
||||
- **AND** 不影响贷款的后续放款流程
|
||||
|
||||
### Requirement: 选择合作保险公司
|
||||
银行端 SHALL 支持从合作保险公司列表中选择保险公司。
|
||||
|
||||
#### Scenario: 查看合作保险公司列表
|
||||
- **WHEN** 银行端用户点击购买保险
|
||||
- **THEN** 系统 SHALL 显示合作保险公司列表
|
||||
- **AND** 每个保险公司显示名称、联系方式和状态
|
||||
|
||||
#### Scenario: 选择保险公司
|
||||
- **WHEN** 银行端用户选择一个保险公司
|
||||
- **THEN** 系统 SHALL 加载该保险公司提供的保险产品列表
|
||||
|
||||
### Requirement: 选择保险产品
|
||||
银行端 SHALL 支持根据贷款类型选择相应的保险产品。
|
||||
|
||||
#### Scenario: 显示保险产品列表
|
||||
- **WHEN** 银行端用户选择保险公司后
|
||||
- **THEN** 系统 SHALL 显示该保险公司提供的保险产品列表
|
||||
- **AND** 每个产品显示名称、类型、描述和保险金额范围
|
||||
|
||||
#### Scenario: 根据贷款类型筛选产品
|
||||
- **WHEN** 银行端用户选择保险产品
|
||||
- **THEN** 系统 SHALL 根据贷款类型推荐相应的保险产品
|
||||
- **AND** 个人住房贷款推荐住房贷款保险
|
||||
- **AND** 企业信贷推荐履约保证保险
|
||||
|
||||
### Requirement: 确定保险金额和期限
|
||||
银行端 SHALL 支持确定保险金额和保险期限。
|
||||
|
||||
#### Scenario: 设置保险金额
|
||||
- **WHEN** 银行端用户设置保险金额
|
||||
- **THEN** 系统 SHALL 验证保险金额不低于抵押物价值
|
||||
- **AND** 保险金额应在保险产品的最小和最大金额范围内
|
||||
|
||||
#### Scenario: 设置保险期限
|
||||
- **WHEN** 银行端用户设置保险期限
|
||||
- **THEN** 系统 SHALL 默认保险期限与贷款期限一致
|
||||
- **AND** 允许用户根据需要调整保险期限
|
||||
|
||||
### Requirement: 提交投保申请
|
||||
银行端 SHALL 支持提交投保申请，系统自动发送给对应的保险公司。
|
||||
|
||||
#### Scenario: 提交投保申请
|
||||
- **WHEN** 银行端用户填写完整的投保信息并提交
|
||||
- **THEN** 系统 SHALL 创建投保申请记录
|
||||
- **AND** 系统 SHALL 自动发送投保申请给对应的保险公司
|
||||
- **AND** 系统 SHALL 显示投保申请已提交的提示
|
||||
|
||||
#### Scenario: 投保申请包含银行信息
|
||||
- **WHEN** 系统发送投保申请给保险公司
|
||||
- **THEN** 投保申请 SHALL 包含银行相关信息
|
||||
- **AND** 包含客户的基本信息和贷款信息
|
||||
- **AND** 包含银行对客户的评估信息
|
||||
|
||||
### Requirement: 查看投保申请状态
|
||||
银行端 SHALL 支持查看投保申请的审核状态。
|
||||
|
||||
#### Scenario: 查看待审核状态
|
||||
- **WHEN** 银行端用户查看投保申请
|
||||
- **AND** 保险公司尚未审核
|
||||
- **THEN** 系统 SHALL 显示"待审核"状态
|
||||
|
||||
#### Scenario: 查看审核通过状态
|
||||
- **WHEN** 保险公司核保通过
|
||||
- **THEN** 系统 SHALL 显示"审核通过"状态
|
||||
- **AND** 显示保险单信息
|
||||
|
||||
#### Scenario: 查看审核拒绝状态
|
||||
- **WHEN** 保险公司核保拒绝
|
||||
- **THEN** 系统 SHALL 显示"审核拒绝"状态
|
||||
- **AND** 显示拒绝原因
|
||||
|
||||
### Requirement: 保险单管理
|
||||
银行端 SHALL 支持查看和管理保险单。
|
||||
|
||||
#### Scenario: 查看保险单详情
|
||||
- **WHEN** 银行端用户点击保险单
|
||||
- **THEN** 系统 SHALL 显示保险单的完整信息
|
||||
- **AND** 包括保单号、保险公司、保险金额、保险期限等
|
||||
|
||||
#### Scenario: 保险单与贷款关联
|
||||
- **WHEN** 银行端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示关联的保险单信息（如果存在）
|
||||
|
||||
### Requirement: 理赔申请功能
|
||||
银行端 SHALL 支持发起理赔申请并上传理赔材料。
|
||||
|
||||
#### Scenario: 发起理赔申请
|
||||
- **WHEN** 银行端用户选择一个保险单并发起理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔申请表单
|
||||
- **AND** 要求填写理赔金额和理赔原因
|
||||
|
||||
#### Scenario: 上传理赔材料
|
||||
- **WHEN** 银行端用户提交理赔申请
|
||||
- **THEN** 系统 SHALL 要求上传理赔材料
|
||||
- **AND** 支持上传多个文件
|
||||
- **AND** 验证文件格式和大小
|
||||
|
||||
#### Scenario: 提交理赔申请到保险公司
|
||||
- **WHEN** 银行端用户提交理赔申请
|
||||
- **THEN** 系统 SHALL 创建理赔申请记录
|
||||
- **AND** 系统 SHALL 发送理赔申请给对应的保险公司
|
||||
- **AND** 系统 SHALL 显示理赔申请已提交的提示
|
||||
|
||||
### Requirement: 查看理赔申请状态
|
||||
银行端 SHALL 支持查看理赔申请的审核状态。
|
||||
|
||||
#### Scenario: 查看待审核状态
|
||||
- **WHEN** 银行端用户查看理赔申请
|
||||
- **AND** 保险公司尚未审核
|
||||
- **THEN** 系统 SHALL 显示"待审核"状态
|
||||
|
||||
#### Scenario: 查看审核通过状态
|
||||
- **WHEN** 保险公司理赔审核通过
|
||||
- **THEN** 系统 SHALL 显示"审核通过"状态
|
||||
- **AND** 显示赔付金额和赔付日期
|
||||
|
||||
#### Scenario: 查看审核拒绝状态
|
||||
- **WHEN** 保险公司理赔审核拒绝
|
||||
- **THEN** 系统 SHALL 显示"审核拒绝"状态
|
||||
- **AND** 显示拒绝原因
|
||||
@@ -0,0 +1,172 @@
|
||||
# Bank Insurance UI Specification
|
||||
|
||||
## Overview
|
||||
|
||||
This specification defines the UI requirements for the bank-side insurance functionality integration, including insurance information display, navigation flows, and workflow step visualization.
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Audit Detail Insurance Display
|
||||
|
||||
The audit detail page MUST display insurance information based on the loan status.
|
||||
|
||||
#### Scenario: Display insurance information for insured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and insurance policy exists
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display:
|
||||
- Insurance status as "保障中"
|
||||
- Insurance company name
|
||||
- Insurance product name
|
||||
- Policy number
|
||||
- Insurance amount matching the loan amount
|
||||
- Insurance term matching the loan term
|
||||
- "申请理赔" (Apply for Claim) button
|
||||
|
||||
#### Scenario: Display purchase insurance option for uninsured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and no insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display:
|
||||
- "购买保险" (Purchase Insurance) button
|
||||
- No insurance policy details section
|
||||
|
||||
### Requirement: Insurance Navigation
|
||||
|
||||
The audit detail page MUST provide navigation to insurance-related pages.
|
||||
|
||||
#### Scenario: Navigate to insurance application creation
|
||||
|
||||
**Given** a loan application with status `DISBURSED`
|
||||
|
||||
**When** the user clicks the "购买保险" button
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/application/create` with query parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `loanAmount`: The loan amount in yuan
|
||||
- `loanTerm`: The loan term in months
|
||||
|
||||
#### Scenario: Navigate to claim application creation
|
||||
|
||||
**Given** a loan application with an active insurance policy
|
||||
|
||||
**When** the user clicks the "申请理赔" button
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/claim/create` with query parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `policyId`: The insurance policy ID
|
||||
- `policyNumber`: The insurance policy number
|
||||
|
||||
### Requirement: Workflow Step Insurance Node
|
||||
|
||||
The workflow step bar MUST conditionally display an insurance node.
|
||||
|
||||
#### Scenario: Display insurance node for insured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and an active insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display an "投保" (Insurance) node in the workflow step bar
|
||||
|
||||
**And** the insurance node SHALL appear between the "审批" (Approval) and "签约" (Signing) nodes
|
||||
|
||||
**And** the insurance node SHALL be marked as completed
|
||||
|
||||
#### Scenario: Hide insurance node for uninsured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and no insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL NOT display an "投保" (Insurance) node in the workflow step bar
|
||||
|
||||
### Requirement: Dashboard Insurance Shortcuts
|
||||
|
||||
The bank dashboard MUST provide insurance management shortcuts.
|
||||
|
||||
#### Scenario: Display insurance shortcuts on dashboard
|
||||
|
||||
**Given** the user is on the bank dashboard page
|
||||
|
||||
**When** the page loads
|
||||
|
||||
**Then** the system SHALL display two insurance-related shortcuts in the quick actions area:
|
||||
- "投保管理" (Insurance Management) with icon `i-carbon-security`, navigating to `/pagesBank/insurance/application/list`
|
||||
- "理赔管理" (Claim Management) with icon `i-carbon-money`, navigating to `/pagesBank/insurance/claim/list`
|
||||
|
||||
### Requirement: Audit List Insurance Shortcuts Removal
|
||||
|
||||
The audit list page MUST NOT contain insurance shortcuts.
|
||||
|
||||
#### Scenario: Remove insurance shortcuts from audit list
|
||||
|
||||
**Given** the user is on the bank audit list page
|
||||
|
||||
**When** the page loads
|
||||
|
||||
**Then** the system SHALL NOT display the insurance actions section that was previously located above the audit list
|
||||
|
||||
## Modified Requirements
|
||||
|
||||
### Modified: Audit Detail Insurance Information Display
|
||||
|
||||
The insurance information section on the audit detail page is enhanced to support multiple insurance states.
|
||||
|
||||
**Previous Behavior**: Displayed static insurance information
|
||||
|
||||
**New Behavior**:
|
||||
- Shows insurance policy details only when insurance exists
|
||||
- Shows "购买保险" button when no insurance exists
|
||||
- Shows "申请理赔" button when insurance exists and is active
|
||||
- Conditionally shows insurance node in workflow steps
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### File Locations
|
||||
|
||||
- `src/pagesBank/audit/detail.vue`: Audit detail page with insurance display
|
||||
- `src/pagesBank/audit/list.vue`: Audit list page (shortcuts removed)
|
||||
- `src/pagesBank/dashboard/index.vue`: Dashboard page (shortcuts added)
|
||||
|
||||
### Key Functions
|
||||
|
||||
```typescript
|
||||
// Navigation to insurance application creation
|
||||
function handleBuyInsurance() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/application/create?loanId=${id.value}&loanAmount=${amount}&loanTerm=${term}`,
|
||||
})
|
||||
}
|
||||
|
||||
// Navigation to claim application creation
|
||||
function handleApplyClaim() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/claim/create?loanId=${id.value}&policyId=${policyId}&policyNumber=${policyNumber}`,
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Workflow Steps Configuration
|
||||
|
||||
```typescript
|
||||
const steps = [
|
||||
{ key: 'SUBMITTED', label: '申请' },
|
||||
{ key: 'ACCEPTED', label: '受理' },
|
||||
{ key: 'INVESTIGATING', label: '调查' },
|
||||
{ key: 'APPROVING', label: '审批' },
|
||||
{ key: 'INSURANCE', label: '投保', condition: (detail) => detail.hasInsurance },
|
||||
{ key: 'SIGNING', label: '签约' },
|
||||
{ key: 'DISBURSED', label: '放款' },
|
||||
]
|
||||
```
|
||||
|
||||
## Related Capabilities
|
||||
|
||||
- `bank-insurance-integration`: Core insurance integration functionality
|
||||
- `insurance-underwriting`: Insurance underwriting workflow
|
||||
- `insurance-claim-review`: Insurance claim review workflow
|
||||
@@ -0,0 +1,104 @@
|
||||
# government-bad-loans Specification Delta
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 查看贷款信息
|
||||
政务端 SHALL 支持查看银行端的所有贷款信息，包括不良贷款。
|
||||
|
||||
#### Scenario: 查看贷款列表
|
||||
- **WHEN** 政务端用户访问贷款列表页面
|
||||
- **THEN** 系统 SHALL 显示所有银行的贷款信息
|
||||
- **AND** 每个贷款显示银行名称、客户姓名、贷款金额、贷款状态
|
||||
|
||||
#### Scenario: 识别不良贷款
|
||||
- **WHEN** 政务端用户查看贷款列表
|
||||
- **THEN** 系统 SHALL 标识不良贷款
|
||||
- **AND** 不良贷款 SHALL 显示特殊标识或颜色区分
|
||||
|
||||
#### Scenario: 筛选不良贷款
|
||||
- **WHEN** 政务端用户选择筛选条件
|
||||
- **THEN** 系统 SHALL 支持按贷款状态筛选
|
||||
- **AND** 支持单独查看不良贷款列表
|
||||
|
||||
### Requirement: 查看完整业务流程信息
|
||||
政务端 SHALL 支持查看完整的贷款业务流程信息。
|
||||
|
||||
#### Scenario: 查看用户信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示用户的基本信息
|
||||
- **AND** 包括姓名、身份证号、联系方式
|
||||
|
||||
#### Scenario: 查看贷款信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示贷款的完整信息
|
||||
- **AND** 包括贷款金额、贷款期限、贷款类型、贷款状态
|
||||
|
||||
#### Scenario: 查看保险信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款购买了保险
|
||||
- **THEN** 系统 SHALL 显示保险相关信息
|
||||
- **AND** 包括保险公司、保险产品、保险金额、保险期限、保险单状态
|
||||
|
||||
#### Scenario: 查看投保申请记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有投保申请记录
|
||||
- **THEN** 系统 SHALL 显示投保申请的完整记录
|
||||
- **AND** 包括投保时间、核保结果、核保时间
|
||||
|
||||
#### Scenario: 查看理赔信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有理赔记录
|
||||
- **THEN** 系统 SHALL 显示理赔相关信息
|
||||
- **AND** 包括理赔申请时间、理赔金额、理赔审核结果、赔付金额
|
||||
|
||||
### Requirement: 查看审批流程记录
|
||||
政务端 SHALL 支持查看贷款相关的审批流程记录。
|
||||
|
||||
#### Scenario: 查看贷款审批记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示贷款审批的完整流程
|
||||
- **AND** 包括审批人、审批时间、审批结果、审批意见
|
||||
|
||||
#### Scenario: 查看保险核保记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有保险核保记录
|
||||
- **THEN** 系统 SHALL 显示保险核保的完整记录
|
||||
- **AND** 包括核保人、核保时间、核保结果、核保意见
|
||||
|
||||
#### Scenario: 查看理赔审核记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有理赔审核记录
|
||||
- **THEN** 系统 SHALL 显示理赔审核的完整记录
|
||||
- **AND** 包括审核人、审核时间、审核结果、审核意见
|
||||
|
||||
### Requirement: 不良贷款详情查看
|
||||
政务端 SHALL 支持查看不良贷款的详细信息。
|
||||
|
||||
#### Scenario: 查看不良贷款基本信息
|
||||
- **WHEN** 政务端用户点击不良贷款
|
||||
- **THEN** 系统 SHALL 显示不良贷款的基本信息
|
||||
- **AND** 包括逾期天数、逾期金额、当前状态
|
||||
|
||||
#### Scenario: 查看不良贷款保险情况
|
||||
- **WHEN** 政务端用户查看不良贷款详情
|
||||
- **AND** 该不良贷款购买了保险
|
||||
- **THEN** 系统 SHALL 显示保险情况
|
||||
- **AND** 包括是否已发起理赔、理赔状态、赔付金额
|
||||
|
||||
#### Scenario: 查看不良贷款处理记录
|
||||
- **WHEN** 政务端用户查看不良贷款详情
|
||||
- **THEN** 系统 SHALL 显示不良贷款的处理记录
|
||||
- **AND** 包括催收记录、理赔记录、处置记录
|
||||
|
||||
### Requirement: 按银行筛选贷款
|
||||
政务端 SHALL 支持按银行筛选贷款信息。
|
||||
|
||||
#### Scenario: 选择银行查看贷款
|
||||
- **WHEN** 政务端用户选择一个银行
|
||||
- **THEN** 系统 SHALL 显示该银行的所有贷款信息
|
||||
- **AND** 包括正常贷款和不良贷款
|
||||
|
||||
#### Scenario: 查看银行不良贷款统计
|
||||
- **WHEN** 政务端用户查看银行贷款信息
|
||||
- **THEN** 系统 SHALL 显示该银行的不良贷款统计
|
||||
- **AND** 包括不良贷款数量、不良贷款金额、不良贷款率
|
||||
@@ -0,0 +1,99 @@
|
||||
# insurance-claim-review Specification Delta
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 接收理赔申请
|
||||
保险端 SHALL 接收银行端提交的理赔申请。
|
||||
|
||||
#### Scenario: 查看待理赔审核列表
|
||||
- **WHEN** 保险端理赔审核人员登录系统
|
||||
- **THEN** 系统 SHALL 显示待审核的理赔申请列表
|
||||
- **AND** 每个申请显示银行名称、保险单号、理赔金额、理赔原因
|
||||
|
||||
#### Scenario: 查看理赔申请详情
|
||||
- **WHEN** 保险端理赔审核人员点击理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔申请的完整信息
|
||||
- **AND** 包括银行信息、保险单信息、理赔金额、理赔原因
|
||||
|
||||
### Requirement: 查看理赔材料
|
||||
保险端 SHALL 支持理赔审核人员查看银行上传的理赔材料。
|
||||
|
||||
#### Scenario: 查看材料列表
|
||||
- **WHEN** 保险端理赔审核人员查看理赔申请详情
|
||||
- **THEN** 系统 SHALL 显示理赔材料列表
|
||||
- **AND** 每个材料显示文件名、文件类型、上传时间
|
||||
|
||||
#### Scenario: 下载和预览材料
|
||||
- **WHEN** 保险端理赔审核人员点击理赔材料
|
||||
- **THEN** 系统 SHALL 支持下载或预览材料
|
||||
- **AND** 支持常见的文件格式（图片、PDF、文档等）
|
||||
|
||||
### Requirement: 理赔材料审核
|
||||
保险端 SHALL 支持理赔审核人员对材料进行审核。
|
||||
|
||||
#### Scenario: 审核通过
|
||||
- **WHEN** 保险端理赔审核人员审核理赔申请
|
||||
- **AND** 确认理赔材料完整且符合要求
|
||||
- **THEN** 系统 SHALL 允许审核人员选择"通过"
|
||||
- **AND** 系统 SHALL 要求填写赔付金额
|
||||
|
||||
#### Scenario: 审核拒绝
|
||||
- **WHEN** 保险端理赔审核人员审核理赔申请
|
||||
- **AND** 发现理赔材料不完整或不符合要求
|
||||
- **THEN** 系统 SHALL 允许审核人员选择"拒绝"
|
||||
- **AND** 系统 SHALL 要求填写拒绝原因
|
||||
|
||||
#### Scenario: 保存赔付金额
|
||||
- **WHEN** 保险端理赔审核人员审核通过理赔申请
|
||||
- **THEN** 系统 SHALL 保存赔付金额
|
||||
- **AND** 赔付金额 SHALL 返回给银行端
|
||||
|
||||
#### Scenario: 保存拒绝原因
|
||||
- **WHEN** 保险端理赔审核人员拒绝理赔申请
|
||||
- **THEN** 系统 SHALL 保存拒绝原因
|
||||
- **AND** 拒绝原因 SHALL 返回给银行端
|
||||
|
||||
### Requirement: 执行赔付
|
||||
保险端 SHALL 在理赔审核通过后执行赔付。
|
||||
|
||||
#### Scenario: 自动执行赔付
|
||||
- **WHEN** 理赔申请审核通过
|
||||
- **THEN** 系统 SHALL 自动执行赔付操作
|
||||
- **AND** 系统 SHALL 记录赔付日期和赔付金额
|
||||
|
||||
#### Scenario: 赔付结果通知
|
||||
- **WHEN** 赔付执行成功
|
||||
- **THEN** 系统 SHALL 将赔付结果通知银行端
|
||||
- **AND** 银行端 SHALL 能够查看赔付详情
|
||||
|
||||
### Requirement: 理赔审核历史记录
|
||||
保险端 SHALL 保存理赔审核历史记录，支持查询和追溯。
|
||||
|
||||
#### Scenario: 查看理赔审核历史
|
||||
- **WHEN** 保险端理赔审核人员查看已处理的理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔审核历史记录
|
||||
- **AND** 包括审核人员、审核时间、审核结果
|
||||
|
||||
#### Scenario: 查看拒绝原因历史
|
||||
- **WHEN** 保险端理赔审核人员查看已拒绝的理赔申请
|
||||
- **THEN** 系统 SHALL 显示拒绝原因
|
||||
- **AND** 支持查看详细的拒绝理由
|
||||
|
||||
### Requirement: 理赔审核模拟数据
|
||||
系统 SHALL 提供理赔审核的模拟数据以支持开发和测试。
|
||||
|
||||
#### Scenario: 模拟数据包含多种状态
|
||||
- **WHEN** 系统加载理赔审核模拟数据
|
||||
- **THEN** 数据 SHALL 包含待审核、已通过、已拒绝三种状态的理赔申请
|
||||
- **AND** 每种状态至少包含一条记录
|
||||
|
||||
#### Scenario: 模拟数据包含完整信息
|
||||
- **WHEN** 系统加载理赔审核模拟数据
|
||||
- **THEN** 每条记录 SHALL 包含理赔申请号、银行信息、保险单号、保险公司信息
|
||||
- **AND** 包含理赔金额、理赔原因、材料列表（文件名、文件类型、大小、上传时间）
|
||||
- **AND** 包含申请时间、审核时间、审核人员、赔付金额、赔付日期、拒绝原因
|
||||
|
||||
#### Scenario: 模拟数据支持筛选
|
||||
- **WHEN** 保险端理赔审核人员按状态筛选理赔申请
|
||||
- **THEN** 系统 SHALL 返回对应状态的模拟数据
|
||||
- **AND** 支持待审核、已通过、已拒绝三种状态筛选
|
||||
@@ -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
|
||||
@@ -0,0 +1,99 @@
|
||||
# insurance-underwriting Specification Delta
|
||||
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: 接收投保申请
|
||||
保险端 SHALL 接收银行端提交的投保申请。
|
||||
|
||||
#### Scenario: 查看待核保申请列表
|
||||
- **WHEN** 保险端核保人员登录系统
|
||||
- **THEN** 系统 SHALL 显示待核保的投保申请列表
|
||||
- **AND** 每个申请显示银行名称、客户姓名、贷款金额、保险产品
|
||||
|
||||
#### Scenario: 查看投保申请详情
|
||||
- **WHEN** 保险端核保人员点击投保申请
|
||||
- **THEN** 系统 SHALL 显示投保申请的完整信息
|
||||
- **AND** 包括银行信息、客户信息、贷款信息、保险产品信息
|
||||
|
||||
### Requirement: 查看银行提供的信息
|
||||
保险端 SHALL 支持核保人员查看银行提供的客户情况和相关信息。
|
||||
|
||||
#### Scenario: 查看客户基本信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示客户的基本信息
|
||||
- **AND** 包括姓名、身份证号、信用评分
|
||||
|
||||
#### Scenario: 查看贷款信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示贷款相关信息
|
||||
- **AND** 包括贷款金额、贷款期限、贷款类型
|
||||
|
||||
#### Scenario: 查看银行评估信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示银行对客户的评估信息
|
||||
- **AND** 包括银行的风险评估结果
|
||||
|
||||
### Requirement: 核保审核
|
||||
保险端 SHALL 支持核保人员进行承保条件审核。
|
||||
|
||||
#### Scenario: 核保通过
|
||||
- **WHEN** 保险端核保人员审核投保申请
|
||||
- **AND** 核保人员确认承保条件满足
|
||||
- **THEN** 系统 SHALL 允许核保人员选择"通过"
|
||||
- **AND** 系统 SHALL 更新投保申请状态为"已通过"
|
||||
|
||||
#### Scenario: 核保拒绝
|
||||
- **WHEN** 保险端核保人员审核投保申请
|
||||
- **AND** 核保人员发现承保条件不满足
|
||||
- **THEN** 系统 SHALL 允许核保人员选择"拒绝"
|
||||
- **AND** 系统 SHALL 要求填写拒绝原因
|
||||
|
||||
#### Scenario: 保存拒绝原因
|
||||
- **WHEN** 保险端核保人员拒绝投保申请
|
||||
- **THEN** 系统 SHALL 保存拒绝原因
|
||||
- **AND** 拒绝原因 SHALL 返回给银行端
|
||||
|
||||
### Requirement: 出具保险单
|
||||
保险端 SHALL 在核保通过后出具保险单。
|
||||
|
||||
#### Scenario: 自动生成保险单
|
||||
- **WHEN** 投保申请核保通过
|
||||
- **THEN** 系统 SHALL 自动生成保险单
|
||||
- **AND** 保险单 SHALL 包含保单号、保险公司信息、被保险人信息、保险金额、保险期限
|
||||
|
||||
#### Scenario: 保险单发送给银行
|
||||
- **WHEN** 保险单生成成功
|
||||
- **THEN** 系统 SHALL 将保险单信息发送给银行端
|
||||
- **AND** 银行端 SHALL 能够查看保险单详情
|
||||
|
||||
### Requirement: 核保历史记录
|
||||
保险端 SHALL 保存核保历史记录，支持查询和追溯。
|
||||
|
||||
#### Scenario: 查看核保历史
|
||||
- **WHEN** 保险端核保人员查看已处理的投保申请
|
||||
- **THEN** 系统 SHALL 显示核保历史记录
|
||||
- **AND** 包括核保人员、核保时间、核保结果
|
||||
|
||||
#### Scenario: 查看拒绝原因历史
|
||||
- **WHEN** 保险端核保人员查看已拒绝的投保申请
|
||||
- **THEN** 系统 SHALL 显示拒绝原因
|
||||
- **AND** 支持查看详细的拒绝理由
|
||||
|
||||
### Requirement: 核保申请模拟数据
|
||||
系统 SHALL 提供核保申请的模拟数据以支持开发和测试。
|
||||
|
||||
#### Scenario: 模拟数据包含多种状态
|
||||
- **WHEN** 系统加载核保申请模拟数据
|
||||
- **THEN** 数据 SHALL 包含待审核、已通过、已拒绝三种状态的投保申请
|
||||
- **AND** 每种状态至少包含一条记录
|
||||
|
||||
#### Scenario: 模拟数据包含完整信息
|
||||
- **WHEN** 系统加载核保申请模拟数据
|
||||
- **THEN** 每条记录 SHALL 包含投保申请号、银行信息、保险公司信息、保险产品信息
|
||||
- **AND** 包含客户信息（姓名、身份证号、信用评分、贷款金额、贷款期限）
|
||||
- **AND** 包含保险金额、保险期限、申请时间、审核时间、审核人员、拒绝原因
|
||||
|
||||
#### Scenario: 模拟数据支持筛选
|
||||
- **WHEN** 保险端核保人员按状态筛选投保申请
|
||||
- **THEN** 系统 SHALL 返回对应状态的模拟数据
|
||||
- **AND** 支持待审核、已通过、已拒绝三种状态筛选
|
||||
@@ -0,0 +1,150 @@
|
||||
# Implementation Tasks
|
||||
|
||||
## Phase 0: UI/UX Enhancements (Base Completed + This Optimization)
|
||||
|
||||
### 已完成的基础工作
|
||||
- [x] Bank: Update Audit List UI (`src/pagesBank/audit/list.vue`)
|
||||
- [x] Bank: Update Audit Detail UI (`src/pagesBank/audit/detail.vue`)
|
||||
- [x] Insurance: Update Policy List UI (`src/pagesInsurance/policy/list.vue`)
|
||||
- [x] Insurance: Update Claim List UI (`src/pagesInsurance/claim/list.vue`)
|
||||
- [x] Government: Update Bank Detail UI & Mock Data (`src/pagesGovernment/bank/detail.vue`)
|
||||
|
||||
### 本次优化任务（integrate-insurance-flow）
|
||||
- [x] 1.1 优化审核详情页面模拟数据，增加多种保险状态展示
|
||||
- [x] 1.2 实现"购买保险"按钮跳转到投保申请页面
|
||||
- [x] 1.3 实现"申请理赔"按钮跳转到理赔申请页面
|
||||
- [x] 1.4 在流程步骤条中增加"投保"节点（条件显示）
|
||||
- [x] 1.5 从审核列表页面移除保险功能快捷入口
|
||||
- [x] 1.6 在工作台首页添加保险功能快捷入口
|
||||
|
||||
### 本次新增任务（保险端模拟数据）
|
||||
- [x] 1.7 为保险端核保列表添加模拟数据
|
||||
- [x] 1.7.1 在 `src/api/insurance.ts` 中添加 4 条核保申请模拟数据
|
||||
- [x] 1.7.2 包含待审核、已通过、已拒绝三种状态
|
||||
- [x] 1.7.3 包含不同的保险公司、保险产品和客户信息
|
||||
- [x] 1.7.4 添加对应的保险单数据（1条已通过的申请）
|
||||
- [x] 1.8 为保险端理赔审核列表添加模拟数据
|
||||
- [x] 1.8.1 在 `src/api/insurance.ts` 中添加 3 条理赔审核模拟数据
|
||||
- [x] 1.8.2 包含待审核、已通过、已拒绝三种状态
|
||||
- [x] 1.8.3 包含不同的理赔原因和材料数量
|
||||
- [x] 1.8.4 添加赔付金额、赔付日期、拒绝原因等详细信息
|
||||
- [ ] 1.9 为保险端保单列表扩展模拟数据
|
||||
- [ ] 1.9.1 在 `src/api/insurance.ts` 中扩展 `mockInsurancePolicies` 数组至12条记录
|
||||
- [ ] 1.9.2 包含生效中、即将到期、已失效三种状态
|
||||
- [ ] 1.9.3 包含不同的保险公司、保险产品、银行和客户信息
|
||||
- [ ] 1.9.4 实现数据多样性（不同的保额、期限、日期）
|
||||
- [ ] 1.9.5 确保数据与核保申请和理赔申请的关联性
|
||||
|
||||
### 本次新增任务（保险公司/产品选择流程）
|
||||
- [x] 1.10 创建投保申请列表页面 (`src/pagesBank/insurance/application/list.vue`)
|
||||
- [x] 1.10.1 实现页面基础结构和布局
|
||||
- [x] 1.10.2 实现状态筛选功能（全部/待审核/已通过/已拒绝）
|
||||
- [x] 1.10.3 实现搜索功能（按ID/公司/产品/保单号）
|
||||
- [x] 1.10.4 实现分页加载功能（每页20条）
|
||||
- [x] 1.10.5 实现列表项点击跳转详情
|
||||
- [x] 1.11 创建保险公司选择页面 (`src/pagesBank/insurance/company/select.vue`)
|
||||
- [x] 1.11.1 实现页面基础结构和布局
|
||||
- [x] 1.11.2 实现搜索功能（按名称/联系方式）
|
||||
- [x] 1.11.3 显示公司详细信息和合作产品数量
|
||||
- [x] 1.11.4 实现选择后带参数跳转
|
||||
- [x] 1.12 创建保险产品选择页面 (`src/pagesBank/insurance/product/select.vue`)
|
||||
- [x] 1.12.1 实现页面基础结构和布局
|
||||
- [x] 1.12.2 实现搜索功能（按名称/描述/类型）
|
||||
- [x] 1.12.3 显示产品详细信息（名称/类型/金额范围）
|
||||
- [x] 1.12.4 实现产品详情弹窗
|
||||
- [x] 1.12.5 实现选择后带参数跳转
|
||||
- [x] 1.13 修改审核详情页投保流程，支持多步导航选择
|
||||
- [x] 1.14 修改投保申请创建页面，支持接收公司/产品ID参数
|
||||
|
||||
## 1. 数据模型和数据库设计
|
||||
- [ ] 2.1 设计并创建保险公司数据表
|
||||
- [ ] 2.2 设计并创建保险产品数据表
|
||||
- [ ] 2.3 设计并创建投保申请数据表
|
||||
- [ ] 2.4 设计并创建保险单数据表
|
||||
- [ ] 2.5 设计并创建理赔申请数据表
|
||||
- [ ] 2.6 扩展贷款数据表，添加保险关联字段
|
||||
- [ ] 2.7 创建数据库迁移脚本
|
||||
- [ ] 2.8 编写 TypeScript 类型定义
|
||||
|
||||
## 2. 后端 API 开发
|
||||
- [ ] 3.1 实现获取合作保险公司列表 API
|
||||
- [ ] 3.2 实现获取保险产品列表 API
|
||||
- [ ] 3.3 实现创建投保申请 API
|
||||
- [ ] 3.4 实现获取投保申请详情 API
|
||||
- [ ] 3.5 实现获取待核保申请列表 API（保险端）
|
||||
- [ ] 3.6 实现核保审核 API（保险端）
|
||||
- [ ] 3.7 实现保险单生成 API
|
||||
- [ ] 3.8 实现创建理赔申请 API
|
||||
- [ ] 3.9 实现获取理赔申请详情 API
|
||||
- [ ] 3.10 实现获取待理赔审核列表 API（保险端）
|
||||
- [ ] 3.11 实现理赔审核 API（保险端）
|
||||
- [ ] 3.12 实现赔付执行 API
|
||||
- [ ] 3.13 实现政务端获取贷款列表 API（含保险信息）
|
||||
- [ ] 3.14 实现政务端获取贷款详情 API（含完整业务流程）
|
||||
- [ ] 3.15 实现政务端获取不良贷款列表 API
|
||||
- [ ] 3.16 添加文件上传 API（理赔材料）
|
||||
|
||||
## 3. 银行端页面开发
|
||||
- [ ] 4.1 创建投保申请列表页面 (`src/pagesBank/insurance/application/list.vue`)
|
||||
- [ ] 4.2 创建投保申请详情页面 (`src/pagesBank/insurance/application/detail.vue`)
|
||||
- [ ] 4.3 创建保险公司选择页面 (`src/pagesBank/insurance/company/select.vue`)
|
||||
- [ ] 4.4 创建保险产品选择页面 (`src/pagesBank/insurance/product/select.vue`)
|
||||
- [ ] 4.5 修改投保申请创建页面，支持参数接收
|
||||
- [ ] 4.6 创建保险单详情页面 (`src/pagesBank/insurance/policy/detail.vue`)
|
||||
- [ ] 4.7 创建理赔申请创建页面 (`src/pagesBank/insurance/claim/create.vue`)
|
||||
- [ ] 4.8 创建理赔申请列表页面 (`src/pagesBank/insurance/claim/list.vue`)
|
||||
- [ ] 4.9 在贷款审核详情页添加保险购买入口
|
||||
- [ ] 4.10 在贷款详情页显示保险信息
|
||||
- [ ] 4.11 实现保险公司选择器组件
|
||||
- [ ] 4.12 实现保险产品选择器组件
|
||||
- [ ] 4.13 实现理赔材料上传组件
|
||||
|
||||
## 4. 保险端页面开发
|
||||
- [ ] 5.1 创建待核保申请列表页面 (`src/pagesInsurance/underwriting/list.vue`)
|
||||
- [ ] 5.2 创建核保申请详情页面 (`src/pagesInsurance/underwriting/detail.vue`)
|
||||
- [ ] 5.3 实现核保审核表单组件
|
||||
- [ ] 5.4 创建待理赔审核列表页面 (`src/pagesInsurance/claim-review/list.vue`)
|
||||
- [ ] 5.5 创建理赔审核详情页面 (`src/pagesInsurance/claim-review/detail.vue`)
|
||||
- [ ] 5.6 实现理赔材料查看组件
|
||||
- [ ] 5.7 实现理赔审核表单组件
|
||||
|
||||
## 5. 政务端页面开发
|
||||
- [ ] 6.1 修改银行贷款列表页面，显示保险信息标识
|
||||
- [ ] 6.2 修改银行贷款详情页面，显示完整业务流程信息
|
||||
- [ ] 6.3 添加不良贷款标识显示
|
||||
- [ ] 6.4 添加保险信息展示区域
|
||||
- [ ] 6.5 添加投保申请记录展示
|
||||
- [ ] 6.6 添加理赔信息展示
|
||||
- [ ] 6.7 添加审批流程记录展示
|
||||
- [ ] 6.8 实现按银行筛选贷款功能
|
||||
- [ ] 6.9 实现不良贷款筛选功能
|
||||
|
||||
## 6. Mock 数据开发
|
||||
- [x] 7.1 创建保险公司 Mock 数据
|
||||
- [x] 7.2 创建保险产品 Mock 数据
|
||||
- [x] 7.3 创建投保申请 Mock 数据（包含保险端核保列表数据）
|
||||
- [x] 7.4 创建保险单 Mock 数据
|
||||
- [x] 7.5 创建理赔申请 Mock 数据（包含保险端理赔审核列表数据）
|
||||
- [ ] 7.6 创建不良贷款 Mock 数据
|
||||
|
||||
## 7. API 集成和测试
|
||||
- [ ] 8.1 银行端 API 集成测试
|
||||
- [ ] 8.2 保险端 API 集成测试
|
||||
- [ ] 8.3 政务端 API 集成测试
|
||||
- [ ] 8.4 文件上传功能测试
|
||||
- [ ] 8.5 端到端流程测试（投保 → 核保 → 理赔）
|
||||
|
||||
## 8. 样式和用户体验优化
|
||||
- [ ] 9.1 银行端页面样式优化
|
||||
- [ ] 9.2 保险端页面样式优化
|
||||
- [ ] 9.3 政务端页面样式优化
|
||||
- [ ] 9.4 添加加载状态和错误提示
|
||||
- [ ] 9.5 添加表单验证提示
|
||||
|
||||
## 9. 文档和部署
|
||||
- [ ] 10.1 更新 API 文档
|
||||
- [ ] 10.2 更新用户操作手册
|
||||
- [ ] 10.3 准备部署配置
|
||||
- [ ] 10.4 执行数据库迁移
|
||||
- [ ] 10.5 部署到测试环境
|
||||
- [ ] 10.6 验证测试环境功能
|
||||
460
openspec/project.md
Normal file
460
openspec/project.md
Normal file
@@ -0,0 +1,460 @@
|
||||
# Project Context
|
||||
|
||||
## 项目背景
|
||||
|
||||
### 一、 银行端核心业务背景
|
||||
|
||||
银行端作为金融生态的核心资金与风控方，其业务背景建立在与政务、商家、保险及用户的紧密协作之上，通过数字化手段重构核心作业流程。
|
||||
|
||||
###### 1. 各端交互与协作生态
|
||||
|
||||
银行端通过数据与流程的互联互通，形成完整的金融生态闭环：
|
||||
|
||||
* **与用户端 (农户/C端)**：**服务与被服务**。
|
||||
* **精准获客**: 结合线下走访与线上数据建立多维度画像。
|
||||
* **便捷用信**: 将信贷额度嵌入交易场景，实现“钱找人”的无感支付。
|
||||
* **与商家端 (企业/商户)**：**场景与验真**。
|
||||
* **贸易验真**: 交叉验证订单与物流数据，确保信贷资金流向真实贸易。
|
||||
* **受托支付**: 资金封闭运行，直接结算至商户，降低挪用风险。
|
||||
* **与保险端 (保险公司)**：**风险共担**。
|
||||
* **履约保证**: 引入保险增信，互通投保状态，构建“无保不贷”机制。
|
||||
* **风险联控**: 逾期信息同步，触发双向预警与理赔协同。
|
||||
* **与政务端 (政府监管)**：**合规与引导**。
|
||||
* **穿透监管**: 实时报送业务数据，接受全流程合规审计。
|
||||
* **政策协同**: 自动匹配贴息与补贴政策，实现普惠金融精准滴灌。
|
||||
|
||||
###### 2. 核心业务运作模式
|
||||
|
||||
银行端业务遵循“贷前调查、贷中审查、贷后管理”的标准化金融规范，并进行了数字化升级：
|
||||
|
||||
* **贷前：网格化营销与建档**
|
||||
* **目标**: 解决信息不对称，还原真实经营状况。
|
||||
* **模式**: 客户经理通过“拜访计划”进行网格化展业，现场采集影像与资产数据，实现数字化建档与初评。
|
||||
* **贷中：智能化审批与授信**
|
||||
* **目标**: 提升审批效率，严控准入风险。
|
||||
* **模式**: 系统聚合多方数据进行自动化风控筛查，结合人工专业判断核定额度，一键激活场景化信用额度。
|
||||
* **贷后：信息聚合与数据支撑**
|
||||
* **目标**: 为银行提供透明数据，支撑自主贷后管理。
|
||||
* **模式**: 平台作为“信息中介”，实时同步交易数据，聚合还款与经营概况，提供标准化报表辅助银行监测风险。
|
||||
|
||||
---
|
||||
|
||||
### 二、 商家端核心业务背景
|
||||
|
||||
商家端致力于打造“交易+金融”的双轮驱动模式，既是商品交易的履约方，也是普惠金融落地的关键场景方。
|
||||
|
||||
###### 1. 数字化经营与供应链管理
|
||||
|
||||
* **目标**: 实现商品与库存的精细化管理，构建可信的交易数据底座。
|
||||
* **场景**: 建立标准化的SKU体系，通过数字化进销存沉淀真实的经营流水，将“数据”转化为“资产”。
|
||||
|
||||
###### 2. 订单履约与受托支付
|
||||
|
||||
* **目标**: 规范交易流程，确保资金闭环安全。
|
||||
* **场景**: 严格执行标准履约流程，作为受托支付对象接收信贷资金，配合验证资金用途。
|
||||
|
||||
###### 3. 信用辅助与渠道协同
|
||||
|
||||
* **目标**: 激活供应链上下游信用，降低金融服务门槛。
|
||||
* **场景**: 依托核心企业信用推荐优质客户，并在结算环节协助核实交易真实性，完成资金闭环。
|
||||
|
||||
---
|
||||
|
||||
### 三、 保险端核心业务背景
|
||||
|
||||
保险端作为金融生态的“减震器”，通过专业的风险管理能力，为信贷资金提供安全屏障。
|
||||
|
||||
###### 1. 产品定制与承保准入
|
||||
|
||||
* **目标**: 精准识别承保标的，提供适配的风险保障。
|
||||
* **场景**: 针对不同客群定制差异化保险产品，对接信贷数据进行自动化核保，实现承保前置。
|
||||
|
||||
###### 2. 保单管理与风险共担
|
||||
|
||||
* **目标**: 动态评估风险敞口，确保资产安全。
|
||||
* **场景**: 全生命周期管理电子保单，与银行端实时交互风险数据，动态调整承保策略。
|
||||
|
||||
###### 3. 智能理赔与追偿协同
|
||||
|
||||
* **目标**: 快速响应出险事件，保障权益。
|
||||
* **场景**: 接收逾期信号自动触发理赔流程，赔付后与多方协同开展追偿，降低综合损失。
|
||||
|
||||
---
|
||||
|
||||
### 四、 政务端核心业务背景
|
||||
|
||||
政务端在生态中扮演“监管者”与“服务者”的双重角色，引导金融资源合规、高效服务实体经济。
|
||||
|
||||
###### 1. 区域金融监测与监管
|
||||
|
||||
* **目标**: 防范系统性风险，掌握宏观态势。
|
||||
* **场景**: 通过驾驶舱实时监控辖区信贷指标，设置红线自动预警违规行为。
|
||||
|
||||
###### 2. 政策扶持与精准滴灌
|
||||
|
||||
* **目标**: 提高财政资金效益。
|
||||
* **场景**: 数字化管理补贴资格白名单，基于真实交易数据自动核算并与信贷发放联动，确保政策红利直达。
|
||||
|
||||
###### 3. 信用体系建设与共享
|
||||
|
||||
* **目标**: 打破数据孤岛，构建社会信用。
|
||||
* **场景**: 归集政务数据丰富主体画像，输出公共信用评价结果，解决“征信白户”难题。
|
||||
|
||||
---
|
||||
|
||||
## Purpose
|
||||
|
||||
这是一个基于 unibest 模板开发的跨平台电商+金融生态应用系统，包含五个主要端：
|
||||
|
||||
1. **用户端**（C端）：提供商品浏览、购物车、订单管理、会员服务、金融服务等功能
|
||||
2. **商家端**（B端）：提供商品管理、订单处理、财务管理、贷款协助、店铺设置等功能
|
||||
3. **银行端**（B端）：提供客户管理、贷款审核、交易记录、提现管理、拜访计划等功能
|
||||
4. **政务端**（B端）：提供银行管理、合规检查、风险预警、报表管理等功能
|
||||
5. **保险端**（B端）：提供保单管理、理赔处理、合作银行管理等功能
|
||||
|
||||
项目支持多平台部署，包括 H5、iOS、Android 以及多个小程序平台（微信、支付宝、百度、字节、快手、QQ、钉钉、小红书等）。
|
||||
|
||||
**多端架构特点：**
|
||||
- 每个端独立配置 Tabbar 导航
|
||||
- 使用分包优化策略，减少首屏加载时间
|
||||
- 登录后根据角色自动切换到对应端
|
||||
|
||||
## Tech Stack
|
||||
|
||||
### 核心框架
|
||||
- **uni-app** 3.0.0 - 跨平台开发框架
|
||||
- **Vue 3** 3.4.21 - 前端框架
|
||||
- **TypeScript** 5.8.0 - 类型系统
|
||||
- **Vite** 5.2.8 - 构建工具
|
||||
|
||||
### UI 组件库
|
||||
- **wot-design-uni** - UI 组件库
|
||||
- **UnoCSS** 66.0.0 - 原子化 CSS 框架
|
||||
- **z-paging** 2.8.7 - 分页组件
|
||||
|
||||
### 状态管理与路由
|
||||
- **Pinia** 2.0.36 - 状态管理
|
||||
- **pinia-plugin-persistedstate** 3.2.1 - 状态持久化
|
||||
- **vue-router** 4.5.1 - 路由管理
|
||||
- **vue-i18n** 9.1.9 - 国际化
|
||||
|
||||
### HTTP 请求库（支持多种选择）
|
||||
- **alova** 3.3.3 - 请求库（推荐，支持 uni-app 适配器）
|
||||
- **简单封装的 http** - 轻量级请求方案（`src/http/http.ts`）
|
||||
- **vue-query** - 查询状态管理（用于自动生成接口，`src/http/vue-query.ts`）
|
||||
|
||||
**HTTP 配置：**
|
||||
- 统一的请求拦截器（`src/http/interceptor.ts`）
|
||||
- 支持登录拦截和自动跳转
|
||||
- 支持请求/响应错误处理
|
||||
- 自动注入 Token（如已登录）
|
||||
|
||||
### 工具库
|
||||
- **dayjs** 1.11.10 - 日期处理
|
||||
- **js-cookie** 3.0.5 - Cookie 操作
|
||||
|
||||
### 开发工具
|
||||
- **pnpm** 10.10.0 - 包管理器
|
||||
- **ESLint** 9.31.0 - 代码检查
|
||||
- **Husky** 9.1.7 - Git hooks
|
||||
- **commitlint** 19.8.1 - 提交信息规范
|
||||
|
||||
### Node.js 环境
|
||||
- **Node.js** >= 20
|
||||
- **pnpm** >= 9
|
||||
|
||||
## Development Commands
|
||||
|
||||
### 常用开发命令
|
||||
```bash
|
||||
# H5 开发（默认）
|
||||
pnpm dev
|
||||
|
||||
# 微信小程序开发
|
||||
pnpm dev:mp
|
||||
|
||||
# App 开发
|
||||
pnpm dev:app
|
||||
|
||||
# 指定环境运行
|
||||
pnpm dev:test # 测试环境
|
||||
pnpm dev:prod # 生产环境
|
||||
```
|
||||
|
||||
### 打包构建命令
|
||||
```bash
|
||||
# H5 打包
|
||||
pnpm build
|
||||
|
||||
# 微信小程序打包
|
||||
pnpm build:mp
|
||||
|
||||
# App 打包
|
||||
pnpm build:app
|
||||
```
|
||||
|
||||
### 代码检查与类型检查
|
||||
```bash
|
||||
# ESLint 检查
|
||||
pnpm lint
|
||||
|
||||
# ESLint 自动修复
|
||||
pnpm lint:fix
|
||||
|
||||
# TypeScript 类型检查
|
||||
pnpm type-check
|
||||
```
|
||||
|
||||
### API 生成
|
||||
```bash
|
||||
# 从 OpenAPI 规范生成 API 接口代码
|
||||
pnpm openapi
|
||||
```
|
||||
|
||||
### 环境配置
|
||||
项目支持多环境配置：
|
||||
- `.env.development` - 开发环境
|
||||
- `.env.test` - 测试环境
|
||||
- `.env.production` - 生产环境
|
||||
|
||||
## Project Conventions
|
||||
|
||||
### Code Style
|
||||
|
||||
#### 命名约定
|
||||
- **文件命名**：使用 kebab-case（如 `cart-item.vue`）
|
||||
- **组件命名**：使用 PascalCase（如 `CartItem.vue`）
|
||||
- **变量/函数命名**：使用 camelCase（如 `getCartList`）
|
||||
- **常量命名**：使用 UPPER_SNAKE_CASE（如 `API_BASE_URL`）
|
||||
|
||||
#### 代码格式化
|
||||
- 使用 `@uni-helper/eslint-config` 作为 ESLint 配置
|
||||
- 支持 CSS、LESS、SCSS、HTML 的自动格式化
|
||||
- Vue SFC 块顺序：`[script, template]` → `style`
|
||||
|
||||
#### 路径别名
|
||||
- `@/*` → `./src/*`
|
||||
- `@img/*` → `./src/static/images/*`
|
||||
|
||||
#### 自动导入
|
||||
- Vue 和 uni-app API 自动导入
|
||||
- `src/hooks` 目录下的 hooks 自动导入
|
||||
- 组件自动导入（支持递归扫描子目录）
|
||||
|
||||
#### OpenAPI 集成
|
||||
- 使用 `openapi-ts-request` 从 OpenAPI 规范自动生成 API 接口代码
|
||||
- 生成的代码存放在 `src/service/` 目录（不应提交到版本控制）
|
||||
- 支持自动生成 TypeScript 类型定义和请求函数
|
||||
|
||||
### Architecture Patterns
|
||||
|
||||
#### 目录结构
|
||||
```
|
||||
src/
|
||||
├── api/ # API 接口定义
|
||||
├── components/ # 公共组件
|
||||
├── hooks/ # 组合式函数
|
||||
├── http/ # HTTP 请求封装
|
||||
├── layouts/ # 布局组件
|
||||
├── mock/ # Mock 数据
|
||||
├── pages/ # 用户端页面（主包）
|
||||
├── pagesMerchant/ # 商家端页面（分包）
|
||||
├── pagesBank/ # 银行端页面（分包）
|
||||
├── pagesGovernment/ # 政务端页面（分包）
|
||||
├── pagesInsurance/ # 保险端页面（分包）
|
||||
├── router/ # 路由配置
|
||||
├── service/ # 自动生成的服务接口
|
||||
├── static/ # 静态资源
|
||||
├── store/ # Pinia 状态管理
|
||||
├── tabbar/ # Tabbar 配置
|
||||
├── typings/ # 类型定义
|
||||
└── utils/ # 工具函数
|
||||
```
|
||||
|
||||
#### 路由策略
|
||||
- **约定式路由**：基于文件系统自动生成路由
|
||||
- **Layout 布局**：支持多布局系统
|
||||
- **分包优化**：使用 `@uni-ku/bundle-optimizer` 进行分包优化
|
||||
- **异步导入**：支持模块和组件的异步跨包引用
|
||||
- **分包配置**：各端独立分包（pagesMerchant、pagesBank、pagesGovernment、pagesInsurance）
|
||||
- **预下载规则**：登录后自动预下载所有分包
|
||||
|
||||
#### 多端 Tabbar 策略
|
||||
支持 4 种 Tabbar 策略（`TABBAR_STRATEGY_MAP`）：
|
||||
- `NO_TABBAR` (0)：无 Tabbar
|
||||
- `NATIVE_TABBAR` (1)：完全原生 Tabbar
|
||||
- `CUSTOM_TABBAR_WITH_CACHE` (2)：有缓存自定义 Tabbar（当前配置）
|
||||
- `CUSTOM_TABBAR_WITHOUT_CACHE` (3)：无缓存自定义 Tabbar
|
||||
|
||||
各端独立的 Tabbar 配置：
|
||||
- `userTabbarList`：用户端（首页、分类、购物车、我的）
|
||||
- `merchantTabbarList`：商家端（工作台、订单、商品、财务、我的）
|
||||
- `bankTabbarList`：银行端（工作台、审核、客户、我的）
|
||||
- `governmentTabbarList`：政务端（工作台、检查、报表、我的）
|
||||
- `insuranceTabbarList`：保险端（工作台、保单、理赔、我的）
|
||||
|
||||
通过 `getTabbarListByClientType()` 根据客户端类型动态切换 Tabbar。
|
||||
|
||||
#### 登录策略
|
||||
支持两种登录策略（通过 `DEFAULT_NO_NEED_LOGIN` 配置）：
|
||||
|
||||
1. **默认无需登录策略**（DEFAULT_NO_NEED_LOGIN）
|
||||
- 进入任何页面都不需要登录
|
||||
- 只有黑名单中的页面需要登录
|
||||
- 适用于大部分 2C 应用（如美团、抖音）
|
||||
|
||||
2. **默认需要登录策略**（DEFAULT_NEED_LOGIN）
|
||||
- 进入任何页面都需要登录
|
||||
- 只有白名单中的页面不需要登录
|
||||
- 适用于 2B 和后台管理类应用
|
||||
|
||||
#### 请求拦截
|
||||
- 统一的请求拦截器（`src/http/interceptor.ts`）
|
||||
- 支持登录拦截
|
||||
- 支持请求/响应错误处理
|
||||
|
||||
### Testing Strategy
|
||||
|
||||
当前项目未配置自动化测试框架。基于技术栈建议：
|
||||
- **单元测试**：使用 Vitest 进行测试
|
||||
- **组件测试**：使用 @vue/test-utils 进行 Vue 组件测试
|
||||
- **端到端测试**：使用 Playwright 进行跨平台 E2E 测试
|
||||
- **小程序测试**：使用 miniprogram-simulate 进行微信小程序单元测试
|
||||
|
||||
### Git Workflow
|
||||
|
||||
#### 分支策略
|
||||
- `main` / `base` - 主分支
|
||||
- `base-i18n` - 国际化分支
|
||||
- `base-login` - 登录功能分支
|
||||
- `base-login-i18n` - 登录+国际化分支
|
||||
|
||||
#### 提交规范
|
||||
使用 Conventional Commits 规范：
|
||||
- `feat:` - 新功能
|
||||
- `fix:` - 修复 bug
|
||||
- `docs:` - 文档更新
|
||||
- `style:` - 代码格式调整
|
||||
- `refactor:` - 重构
|
||||
- `test:` - 测试相关
|
||||
- `chore:` - 构建/工具相关
|
||||
|
||||
#### Git Hooks
|
||||
- 使用 Husky 管理 Git hooks
|
||||
- 使用 lint-staged 在提交前自动修复代码
|
||||
|
||||
## Domain Context
|
||||
|
||||
### 业务领域
|
||||
|
||||
#### 用户端（C端）
|
||||
- **商品模块**：商品列表、详情、分类、搜索
|
||||
- **购物车模块**：添加商品、数量调整、结算
|
||||
- **订单模块**：订单确认、订单列表、订单详情
|
||||
- **会员模块**：会员卡、会员权益
|
||||
- **金融模块**：信用额度、结算、核销、贷款申请
|
||||
|
||||
#### 商家端（B端）
|
||||
- **仪表盘**：数据统计、概览
|
||||
- **商品管理**：商品列表、编辑
|
||||
- **订单管理**：订单列表、订单详情
|
||||
- **财务管理**：财务统计、结算、提现
|
||||
- **贷款协助**：协助用户申请贷款
|
||||
- **店铺设置**：店铺信息管理
|
||||
|
||||
#### 银行端（B端）
|
||||
- **仪表盘**：数据统计
|
||||
- **客户管理**：客户列表、客户详情、交易记录、提现记录
|
||||
- **审核管理**：贷款审核列表、审核详情
|
||||
- **拜访管理**：拜访计划列表、创建拜访、拜访详情
|
||||
- **报表管理**：报表列表、报表下载
|
||||
|
||||
#### 政务端（B端）
|
||||
- **仪表盘**：区域金融监测
|
||||
- **银行管理**：银行列表、银行详情
|
||||
- **合规检查**：检查列表、检查详情
|
||||
- **风险预警**：风险列表、风险详情
|
||||
|
||||
#### 保险端（B端）
|
||||
- **仪表盘**：业务概览
|
||||
- **保单管理**：保单列表、保单详情
|
||||
- **理赔处理**：理赔列表、理赔详情
|
||||
- **合作银行**：合作银行列表
|
||||
|
||||
### 关键概念
|
||||
- **多端适配**：同一套代码适配 H5、App、小程序
|
||||
- **五端架构**：用户、商家、银行、政务、保险五个独立端
|
||||
- **角色权限**：根据登录角色自动切换对应端的 Tabbar 和页面
|
||||
- **金融服务**：信用额度、贷款申请、结算、核销
|
||||
- **会员体系**：会员卡、会员权益
|
||||
- **分包优化**：各端独立分包，登录后预下载
|
||||
- **Tabbar 策略**：支持原生和自定义 Tabbar，可配置缓存
|
||||
|
||||
## Important Constraints
|
||||
|
||||
### 技术约束
|
||||
- **Node.js 版本**：必须 >= 20
|
||||
- **pnpm 版本**：必须 >= 9
|
||||
- **包管理器**：强制使用 pnpm（通过 `only-allow pnpm`）
|
||||
- **TypeScript**：必须使用 TypeScript 开发
|
||||
- **平台限制**：不同 UI 框架支持的平台有所不同
|
||||
|
||||
### 业务约束
|
||||
- **多端兼容性**：需要确保在所有目标平台上正常运行
|
||||
- **性能要求**：分包优化、按需加载、减少包体积
|
||||
- **安全性**：登录拦截、请求加密、数据验证
|
||||
|
||||
### 开发约束
|
||||
- **代码规范**：必须通过 ESLint 检查
|
||||
- **提交规范**：必须符合 Conventional Commits 规范
|
||||
- **文件忽略**：自动生成的文件（如 `src/service/**`）不应提交
|
||||
|
||||
## Deployment Architecture
|
||||
|
||||
### 多平台部署流程
|
||||
|
||||
**H5 部署：**
|
||||
1. 运行 `pnpm build` 构建生产版本
|
||||
2. 生成的文件位于 `dist/build/h5`
|
||||
3. 部署到 Web 服务器（nginx、Apache 等）
|
||||
4. 如非根目录部署，需在 `manifest.config.ts` 中配置 `h5.router.base`
|
||||
|
||||
**小程序部署：**
|
||||
1. 运行 `pnpm build:mp` 构建小程序
|
||||
2. 生成的文件位于 `dist/build/mp-weixin`
|
||||
3. 使用微信开发者工具导入并上传
|
||||
4. 在微信公众平台提交审核
|
||||
|
||||
**App 部署：**
|
||||
1. 运行 `pnpm build:app` 构建 App
|
||||
2. 生成的文件位于 `dist/build/app`
|
||||
3. 使用 HBuilderX 导入文件夹
|
||||
4. 选择"发行 - APP云打包"
|
||||
5. （安卓和鸿蒙可直接用 HBuilderX 运行/发行）
|
||||
|
||||
### 分包策略优化
|
||||
- 用户端（主包）：核心页面和组件
|
||||
- 商家端、银行端、政务端、保险端：独立分包
|
||||
- 登录后自动预下载所有分包（`preloadRule`）
|
||||
- 使用 `@uni-ku/bundle-optimizer` 进行体积优化
|
||||
|
||||
## External Dependencies
|
||||
|
||||
### 平台依赖
|
||||
- **DCloudio** - uni-app 官方框架和工具链
|
||||
- **微信开发者工具** - 微信小程序开发调试
|
||||
- **HBuilderX** - App 平台打包（可选）
|
||||
|
||||
### 第三方服务
|
||||
- **OpenAPI** - 用于自动生成 API 接口类型和代码
|
||||
- **Iconify** - 图标库（Carbon 图标集）
|
||||
|
||||
### 构建依赖
|
||||
- **@uni-helper** - uni-app 辅助工具集
|
||||
- **@uni-ku** - uni-app 性能优化工具
|
||||
- **unplugin-auto-import** - 自动导入插件
|
||||
|
||||
### 开发依赖
|
||||
- **@dcloudio/types** - uni-app 类型定义
|
||||
- **miniprogram-api-typings** - 小程序 API 类型定义
|
||||
- **rollup-plugin-visualizer** - 打包分析工具
|
||||
140
openspec/specs/bank-insurance-integration/spec.md
Normal file
140
openspec/specs/bank-insurance-integration/spec.md
Normal file
@@ -0,0 +1,140 @@
|
||||
# bank-insurance-integration Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: 保险购买入口
|
||||
银行端 SHALL 在贷款审核通过后提供保险购买入口，该入口为可选操作。
|
||||
|
||||
#### Scenario: 显示保险购买入口
|
||||
- **WHEN** 银行端用户查看已审核通过的贷款详情
|
||||
- **THEN** 系统 SHALL 显示"购买保险"按钮
|
||||
- **AND** 该按钮为可选操作，不强制要求购买
|
||||
|
||||
#### Scenario: 跳过保险购买
|
||||
- **WHEN** 银行端用户选择不购买保险
|
||||
- **THEN** 系统 SHALL 继续原贷款流程处理
|
||||
- **AND** 不影响贷款的后续放款流程
|
||||
|
||||
### Requirement: 选择合作保险公司
|
||||
银行端 SHALL 支持从合作保险公司列表中选择保险公司。
|
||||
|
||||
#### Scenario: 查看合作保险公司列表
|
||||
- **WHEN** 银行端用户点击购买保险
|
||||
- **THEN** 系统 SHALL 显示合作保险公司列表
|
||||
- **AND** 每个保险公司显示名称、联系方式和状态
|
||||
|
||||
#### Scenario: 选择保险公司
|
||||
- **WHEN** 银行端用户选择一个保险公司
|
||||
- **THEN** 系统 SHALL 加载该保险公司提供的保险产品列表
|
||||
|
||||
### Requirement: 选择保险产品
|
||||
银行端 SHALL 支持根据贷款类型选择相应的保险产品。
|
||||
|
||||
#### Scenario: 显示保险产品列表
|
||||
- **WHEN** 银行端用户选择保险公司后
|
||||
- **THEN** 系统 SHALL 显示该保险公司提供的保险产品列表
|
||||
- **AND** 每个产品显示名称、类型、描述和保险金额范围
|
||||
|
||||
#### Scenario: 根据贷款类型筛选产品
|
||||
- **WHEN** 银行端用户选择保险产品
|
||||
- **THEN** 系统 SHALL 根据贷款类型推荐相应的保险产品
|
||||
- **AND** 个人住房贷款推荐住房贷款保险
|
||||
- **AND** 企业信贷推荐履约保证保险
|
||||
|
||||
### Requirement: 确定保险金额和期限
|
||||
银行端 SHALL 支持确定保险金额和保险期限。
|
||||
|
||||
#### Scenario: 设置保险金额
|
||||
- **WHEN** 银行端用户设置保险金额
|
||||
- **THEN** 系统 SHALL 验证保险金额不低于抵押物价值
|
||||
- **AND** 保险金额应在保险产品的最小和最大金额范围内
|
||||
|
||||
#### Scenario: 设置保险期限
|
||||
- **WHEN** 银行端用户设置保险期限
|
||||
- **THEN** 系统 SHALL 默认保险期限与贷款期限一致
|
||||
- **AND** 允许用户根据需要调整保险期限
|
||||
|
||||
### Requirement: 提交投保申请
|
||||
银行端 SHALL 支持提交投保申请，系统自动发送给对应的保险公司。
|
||||
|
||||
#### Scenario: 提交投保申请
|
||||
- **WHEN** 银行端用户填写完整的投保信息并提交
|
||||
- **THEN** 系统 SHALL 创建投保申请记录
|
||||
- **AND** 系统 SHALL 自动发送投保申请给对应的保险公司
|
||||
- **AND** 系统 SHALL 显示投保申请已提交的提示
|
||||
|
||||
#### Scenario: 投保申请包含银行信息
|
||||
- **WHEN** 系统发送投保申请给保险公司
|
||||
- **THEN** 投保申请 SHALL 包含银行相关信息
|
||||
- **AND** 包含客户的基本信息和贷款信息
|
||||
- **AND** 包含银行对客户的评估信息
|
||||
|
||||
### Requirement: 查看投保申请状态
|
||||
银行端 SHALL 支持查看投保申请的审核状态。
|
||||
|
||||
#### Scenario: 查看待审核状态
|
||||
- **WHEN** 银行端用户查看投保申请
|
||||
- **AND** 保险公司尚未审核
|
||||
- **THEN** 系统 SHALL 显示"待审核"状态
|
||||
|
||||
#### Scenario: 查看审核通过状态
|
||||
- **WHEN** 保险公司核保通过
|
||||
- **THEN** 系统 SHALL 显示"审核通过"状态
|
||||
- **AND** 显示保险单信息
|
||||
|
||||
#### Scenario: 查看审核拒绝状态
|
||||
- **WHEN** 保险公司核保拒绝
|
||||
- **THEN** 系统 SHALL 显示"审核拒绝"状态
|
||||
- **AND** 显示拒绝原因
|
||||
|
||||
### Requirement: 保险单管理
|
||||
银行端 SHALL 支持查看和管理保险单。
|
||||
|
||||
#### Scenario: 查看保险单详情
|
||||
- **WHEN** 银行端用户点击保险单
|
||||
- **THEN** 系统 SHALL 显示保险单的完整信息
|
||||
- **AND** 包括保单号、保险公司、保险金额、保险期限等
|
||||
|
||||
#### Scenario: 保险单与贷款关联
|
||||
- **WHEN** 银行端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示关联的保险单信息（如果存在）
|
||||
|
||||
### Requirement: 理赔申请功能
|
||||
银行端 SHALL 支持发起理赔申请并上传理赔材料。
|
||||
|
||||
#### Scenario: 发起理赔申请
|
||||
- **WHEN** 银行端用户选择一个保险单并发起理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔申请表单
|
||||
- **AND** 要求填写理赔金额和理赔原因
|
||||
|
||||
#### Scenario: 上传理赔材料
|
||||
- **WHEN** 银行端用户提交理赔申请
|
||||
- **THEN** 系统 SHALL 要求上传理赔材料
|
||||
- **AND** 支持上传多个文件
|
||||
- **AND** 验证文件格式和大小
|
||||
|
||||
#### Scenario: 提交理赔申请到保险公司
|
||||
- **WHEN** 银行端用户提交理赔申请
|
||||
- **THEN** 系统 SHALL 创建理赔申请记录
|
||||
- **AND** 系统 SHALL 发送理赔申请给对应的保险公司
|
||||
- **AND** 系统 SHALL 显示理赔申请已提交的提示
|
||||
|
||||
### Requirement: 查看理赔申请状态
|
||||
银行端 SHALL 支持查看理赔申请的审核状态。
|
||||
|
||||
#### Scenario: 查看待审核状态
|
||||
- **WHEN** 银行端用户查看理赔申请
|
||||
- **AND** 保险公司尚未审核
|
||||
- **THEN** 系统 SHALL 显示"待审核"状态
|
||||
|
||||
#### Scenario: 查看审核通过状态
|
||||
- **WHEN** 保险公司理赔审核通过
|
||||
- **THEN** 系统 SHALL 显示"审核通过"状态
|
||||
- **AND** 显示赔付金额和赔付日期
|
||||
|
||||
#### Scenario: 查看审核拒绝状态
|
||||
- **WHEN** 保险公司理赔审核拒绝
|
||||
- **THEN** 系统 SHALL 显示"审核拒绝"状态
|
||||
- **AND** 显示拒绝原因
|
||||
|
||||
110
openspec/specs/bank-insurance-ui/spec.md
Normal file
110
openspec/specs/bank-insurance-ui/spec.md
Normal file
@@ -0,0 +1,110 @@
|
||||
# bank-insurance-ui Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Audit Detail Insurance Display
|
||||
|
||||
The audit detail page MUST display insurance information based on the loan status.
|
||||
|
||||
#### Scenario: Display insurance information for insured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and insurance policy exists
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display:
|
||||
- Insurance status as "保障中"
|
||||
- Insurance company name
|
||||
- Insurance product name
|
||||
- Policy number
|
||||
- Insurance amount matching the loan amount
|
||||
- Insurance term matching the loan term
|
||||
- "申请理赔" (Apply for Claim) button
|
||||
|
||||
#### Scenario: Display purchase insurance option for uninsured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and no insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display:
|
||||
- "购买保险" (Purchase Insurance) button
|
||||
- No insurance policy details section
|
||||
|
||||
### Requirement: Insurance Navigation
|
||||
|
||||
The audit detail page MUST provide navigation to insurance-related pages.
|
||||
|
||||
#### Scenario: Navigate to insurance application creation
|
||||
|
||||
**Given** a loan application with status `DISBURSED`
|
||||
|
||||
**When** the user clicks the "购买保险" button
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/application/create` with query parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `loanAmount`: The loan amount in yuan
|
||||
- `loanTerm`: The loan term in months
|
||||
|
||||
#### Scenario: Navigate to claim application creation
|
||||
|
||||
**Given** a loan application with an active insurance policy
|
||||
|
||||
**When** the user clicks the "申请理赔" button
|
||||
|
||||
**Then** the system SHALL navigate to `/pagesBank/insurance/claim/create` with query parameters:
|
||||
- `loanId`: The loan application ID
|
||||
- `policyId`: The insurance policy ID
|
||||
- `policyNumber`: The insurance policy number
|
||||
|
||||
### Requirement: Workflow Step Insurance Node
|
||||
|
||||
The workflow step bar MUST conditionally display an insurance node.
|
||||
|
||||
#### Scenario: Display insurance node for insured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and an active insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL display an "投保" (Insurance) node in the workflow step bar
|
||||
|
||||
**And** the insurance node SHALL appear between the "审批" (Approval) and "签约" (Signing) nodes
|
||||
|
||||
**And** the insurance node SHALL be marked as completed
|
||||
|
||||
#### Scenario: Hide insurance node for uninsured loans
|
||||
|
||||
**Given** a loan application with status `DISBURSED` and no insurance policy
|
||||
|
||||
**When** the user views the audit detail page
|
||||
|
||||
**Then** the system SHALL NOT display an "投保" (Insurance) node in the workflow step bar
|
||||
|
||||
### Requirement: Dashboard Insurance Shortcuts
|
||||
|
||||
The bank dashboard MUST provide insurance management shortcuts.
|
||||
|
||||
#### Scenario: Display insurance shortcuts on dashboard
|
||||
|
||||
**Given** the user is on the bank dashboard page
|
||||
|
||||
**When** the page loads
|
||||
|
||||
**Then** the system SHALL display two insurance-related shortcuts in the quick actions area:
|
||||
- "投保管理" (Insurance Management) with icon `i-carbon-security`, navigating to `/pagesBank/insurance/application/list`
|
||||
- "理赔管理" (Claim Management) with icon `i-carbon-money`, navigating to `/pagesBank/insurance/claim/list`
|
||||
|
||||
### Requirement: Audit List Insurance Shortcuts Removal
|
||||
|
||||
The audit list page MUST NOT contain insurance shortcuts.
|
||||
|
||||
#### Scenario: Remove insurance shortcuts from audit list
|
||||
|
||||
**Given** the user is on the bank audit list page
|
||||
|
||||
**When** the page loads
|
||||
|
||||
**Then** the system SHALL NOT display the insurance actions section that was previously located above the audit list
|
||||
|
||||
70
openspec/specs/bank-report/spec.md
Normal file
70
openspec/specs/bank-report/spec.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# bank-report Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change add-bank-report. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Report List Display
|
||||
系统 SHALL 在银行端提供报表列表页面，展示所有可供下载的报表清单，分为四个主要板块：多维统计、访客报表、营销报表、权益管理。
|
||||
|
||||
#### Scenario: User views report list
|
||||
- **WHEN** 用户访问报表列表页面
|
||||
- **THEN** 系统显示四个报表分类板块
|
||||
- **AND** 每个板块包含对应的报表条目
|
||||
- **AND** 所有报表条目均可点击
|
||||
|
||||
#### Scenario: Report categories display correctly
|
||||
- **WHEN** 报表列表页面加载完成
|
||||
- **THEN** 多维统计板块显示：按支行统计、按网点统计、按部门统计、按人员统计、按客户统计
|
||||
- **AND** 访客报表板块显示：支行访客报表、网点访客报表、人员访客报表
|
||||
- **AND** 营销报表板块显示：小额贷业绩报表、小额贷营销汇总、消费贷营销报表、三农部支行汇总、三农部营销报表、公司部营销汇总表
|
||||
- **AND** 权益管理板块显示：我赠送的记录、全员赠送记录、权益二维码
|
||||
|
||||
### Requirement: Report Navigation
|
||||
系统 SHALL 支持用户从报表列表页面点击任意报表条目跳转至报表下载页面，并传递报表类型标识。
|
||||
|
||||
#### Scenario: User clicks report item
|
||||
- **WHEN** 用户点击报表列表中的任意报表条目
|
||||
- **THEN** 系统跳转至报表下载页面
|
||||
- **AND** 传递所选报表的类型标识（ID 或名称）至下载页面
|
||||
|
||||
### Requirement: Report Download Page
|
||||
系统 SHALL 提供报表下载页面，支持日期维度筛选和 Excel 文件下载。
|
||||
|
||||
#### Scenario: Download page displays with default date
|
||||
- **WHEN** 用户进入报表下载页面
|
||||
- **THEN** 页面顶部显示日期维度筛选区（按日、按月、按季、自定义）
|
||||
- **AND** 默认选中"按日"选项
|
||||
- **AND** 显示当前系统日期（默认为 2025-12-25）
|
||||
- **AND** 显示"EXCEL"格式标识
|
||||
- **AND** 显示"点击下载"按钮
|
||||
- **AND** 页面底部显示使用帮助说明
|
||||
|
||||
#### Scenario: User changes date dimension
|
||||
- **WHEN** 用户切换日期维度选项（按日/按月/按季/自定义）
|
||||
- **THEN** 系统更新日期显示格式
|
||||
- **AND** 用户可根据选定的维度修改日期
|
||||
|
||||
#### Scenario: User downloads report
|
||||
- **WHEN** 用户选择日期并点击"点击下载"按钮
|
||||
- **THEN** 系统发起下载请求
|
||||
- **AND** 模拟文件生成过程
|
||||
- **AND** 显示下载成功提示
|
||||
- **AND** 提示用户可以点击手机右上角的【...】进行转发或保存文件
|
||||
|
||||
### Requirement: Report Data Mock
|
||||
系统 SHALL 使用 mock 数据模拟报表下载功能，无需真实后端接口。
|
||||
|
||||
#### Scenario: Mock data generation
|
||||
- **WHEN** 用户请求下载报表
|
||||
- **THEN** 系统使用 mock 数据模拟文件生成
|
||||
- **AND** 模拟下载延迟（约 500ms）
|
||||
- **AND** 返回下载成功状态
|
||||
|
||||
### Requirement: Report Entry in Dashboard
|
||||
系统 SHALL 在银行端仪表盘添加报表功能入口。
|
||||
|
||||
#### Scenario: Dashboard displays report entry
|
||||
- **WHEN** 用户访问银行端仪表盘
|
||||
- **THEN** 快捷操作区域显示"报表下载"入口
|
||||
- **AND** 点击入口跳转至报表列表页面
|
||||
|
||||
95
openspec/specs/bank-visit-plan/spec.md
Normal file
95
openspec/specs/bank-visit-plan/spec.md
Normal file
@@ -0,0 +1,95 @@
|
||||
# bank-visit-plan Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change add-bank-visit-plan. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: 创建拜访计划
|
||||
银行端用户 SHALL 能够创建客户拜访计划，记录拜访的基本信息。
|
||||
|
||||
#### Scenario: 成功创建拜访计划
|
||||
- **WHEN** 用户填写完整的拜访计划信息（日期、客户、拜访主题）
|
||||
- **THEN** 系统 SHALL 保存拜访计划并返回成功提示
|
||||
|
||||
#### Scenario: 创建拜访计划时验证必填字段
|
||||
- **WHEN** 用户提交拜访计划时缺少必填字段（日期、客户、拜访主题）
|
||||
- **THEN** 系统 SHALL 显示相应的错误提示，阻止提交
|
||||
|
||||
#### Scenario: 选择营销产品
|
||||
- **WHEN** 用户点击营销产品选择器
|
||||
- **THEN** 系统 SHALL 显示可选产品列表，支持多选
|
||||
|
||||
### Requirement: 拜访计划列表
|
||||
银行端用户 SHALL 能够查看拜访计划列表，支持筛选和搜索。
|
||||
|
||||
#### Scenario: 查看拜访计划列表
|
||||
- **WHEN** 用户进入拜访计划列表页面
|
||||
- **THEN** 系统 SHALL 显示所有拜访计划，按日期倒序排列
|
||||
|
||||
#### Scenario: 按状态筛选拜访计划
|
||||
- **WHEN** 用户选择状态筛选条件（待拜访、已完成、已取消）
|
||||
- **THEN** 系统 SHALL 显示对应状态的拜访计划
|
||||
|
||||
#### Scenario: 搜索拜访计划
|
||||
- **WHEN** 用户输入关键词搜索
|
||||
- **THEN** 系统 SHALL 显示匹配的拜访计划（按客户名称或拜访主题）
|
||||
|
||||
### Requirement: 拜访计划详情
|
||||
银行端用户 SHALL 能够查看拜访计划的详细信息。
|
||||
|
||||
#### Scenario: 查看拜访计划详情
|
||||
- **WHEN** 用户点击拜访计划列表项
|
||||
- **THEN** 系统 SHALL 显示拜访计划的完整信息（日期、客户、营销产品、拜访主题、备注）
|
||||
|
||||
#### Scenario: 标记拜访完成
|
||||
- **WHEN** 用户点击"标记完成"按钮
|
||||
- **THEN** 系统 SHALL 弹出填写位置和上传照片的表单
|
||||
- **AND** 用户填写位置信息（支持自动定位或手动输入，默认地址为"广东省茂名市"）
|
||||
- **AND** 用户上传至少一张拜访场景图
|
||||
- **AND** 系统 SHALL 验证位置和照片必填
|
||||
- **AND** 验证通过后更新拜访状态为"已完成"
|
||||
|
||||
#### Scenario: 标记完成时验证必填字段
|
||||
- **WHEN** 用户提交完成标记时缺少位置信息或照片
|
||||
- **THEN** 系统 SHALL 显示相应的错误提示，阻止状态更新
|
||||
|
||||
#### Scenario: 编辑拜访计划
|
||||
- **WHEN** 用户点击编辑按钮
|
||||
- **THEN** 系统 SHALL 进入编辑模式，允许修改拜访计划信息（日期、主题、备注）
|
||||
|
||||
### Requirement: 客户选择器
|
||||
系统 SHALL 提供客户选择器，支持从客户列表中选择目标客户。
|
||||
|
||||
#### Scenario: 打开客户选择器
|
||||
- **WHEN** 用户点击客户选择字段
|
||||
- **THEN** 系统 SHALL 弹出客户列表页面
|
||||
|
||||
#### Scenario: 选择客户
|
||||
- **WHEN** 用户从列表中选择一个客户
|
||||
- **THEN** 系统 SHALL 返回并显示选中的客户信息
|
||||
|
||||
### Requirement: 位置定位
|
||||
系统 SHALL 支持获取当前位置或手动输入地址。
|
||||
|
||||
#### Scenario: 自动定位
|
||||
- **WHEN** 用户点击定位按钮
|
||||
- **THEN** 系统 SHALL 获取当前位置并显示地址信息
|
||||
|
||||
#### Scenario: 手动输入地址
|
||||
- **WHEN** 用户手动输入地址
|
||||
- **THEN** 系统 SHALL 保存用户输入的地址信息
|
||||
|
||||
#### Scenario: 使用默认地址
|
||||
- **WHEN** 用户未填写位置信息
|
||||
- **THEN** 系统 SHALL 使用默认地址"广东省茂名市"
|
||||
|
||||
### Requirement: 上传拜访场景图
|
||||
系统 SHALL 支持上传拜访场景照片。
|
||||
|
||||
#### Scenario: 上传拜访场景图
|
||||
- **WHEN** 用户点击上传按钮
|
||||
- **THEN** 系统 SHALL 提供拍照和从相册选择两种方式
|
||||
|
||||
#### Scenario: 验证照片数量
|
||||
- **WHEN** 用户标记拜访完成时
|
||||
- **THEN** 系统 SHALL 要求至少上传一张拜访场景图
|
||||
|
||||
106
openspec/specs/government-bad-loans/spec.md
Normal file
106
openspec/specs/government-bad-loans/spec.md
Normal file
@@ -0,0 +1,106 @@
|
||||
# government-bad-loans Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: 查看贷款信息
|
||||
政务端 SHALL 支持查看银行端的所有贷款信息，包括不良贷款。
|
||||
|
||||
#### Scenario: 查看贷款列表
|
||||
- **WHEN** 政务端用户访问贷款列表页面
|
||||
- **THEN** 系统 SHALL 显示所有银行的贷款信息
|
||||
- **AND** 每个贷款显示银行名称、客户姓名、贷款金额、贷款状态
|
||||
|
||||
#### Scenario: 识别不良贷款
|
||||
- **WHEN** 政务端用户查看贷款列表
|
||||
- **THEN** 系统 SHALL 标识不良贷款
|
||||
- **AND** 不良贷款 SHALL 显示特殊标识或颜色区分
|
||||
|
||||
#### Scenario: 筛选不良贷款
|
||||
- **WHEN** 政务端用户选择筛选条件
|
||||
- **THEN** 系统 SHALL 支持按贷款状态筛选
|
||||
- **AND** 支持单独查看不良贷款列表
|
||||
|
||||
### Requirement: 查看完整业务流程信息
|
||||
政务端 SHALL 支持查看完整的贷款业务流程信息。
|
||||
|
||||
#### Scenario: 查看用户信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示用户的基本信息
|
||||
- **AND** 包括姓名、身份证号、联系方式
|
||||
|
||||
#### Scenario: 查看贷款信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示贷款的完整信息
|
||||
- **AND** 包括贷款金额、贷款期限、贷款类型、贷款状态
|
||||
|
||||
#### Scenario: 查看保险信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款购买了保险
|
||||
- **THEN** 系统 SHALL 显示保险相关信息
|
||||
- **AND** 包括保险公司、保险产品、保险金额、保险期限、保险单状态
|
||||
|
||||
#### Scenario: 查看投保申请记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有投保申请记录
|
||||
- **THEN** 系统 SHALL 显示投保申请的完整记录
|
||||
- **AND** 包括投保时间、核保结果、核保时间
|
||||
|
||||
#### Scenario: 查看理赔信息
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有理赔记录
|
||||
- **THEN** 系统 SHALL 显示理赔相关信息
|
||||
- **AND** 包括理赔申请时间、理赔金额、理赔审核结果、赔付金额
|
||||
|
||||
### Requirement: 查看审批流程记录
|
||||
政务端 SHALL 支持查看贷款相关的审批流程记录。
|
||||
|
||||
#### Scenario: 查看贷款审批记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **THEN** 系统 SHALL 显示贷款审批的完整流程
|
||||
- **AND** 包括审批人、审批时间、审批结果、审批意见
|
||||
|
||||
#### Scenario: 查看保险核保记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有保险核保记录
|
||||
- **THEN** 系统 SHALL 显示保险核保的完整记录
|
||||
- **AND** 包括核保人、核保时间、核保结果、核保意见
|
||||
|
||||
#### Scenario: 查看理赔审核记录
|
||||
- **WHEN** 政务端用户查看贷款详情
|
||||
- **AND** 该贷款有理赔审核记录
|
||||
- **THEN** 系统 SHALL 显示理赔审核的完整记录
|
||||
- **AND** 包括审核人、审核时间、审核结果、审核意见
|
||||
|
||||
### Requirement: 不良贷款详情查看
|
||||
政务端 SHALL 支持查看不良贷款的详细信息。
|
||||
|
||||
#### Scenario: 查看不良贷款基本信息
|
||||
- **WHEN** 政务端用户点击不良贷款
|
||||
- **THEN** 系统 SHALL 显示不良贷款的基本信息
|
||||
- **AND** 包括逾期天数、逾期金额、当前状态
|
||||
|
||||
#### Scenario: 查看不良贷款保险情况
|
||||
- **WHEN** 政务端用户查看不良贷款详情
|
||||
- **AND** 该不良贷款购买了保险
|
||||
- **THEN** 系统 SHALL 显示保险情况
|
||||
- **AND** 包括是否已发起理赔、理赔状态、赔付金额
|
||||
|
||||
#### Scenario: 查看不良贷款处理记录
|
||||
- **WHEN** 政务端用户查看不良贷款详情
|
||||
- **THEN** 系统 SHALL 显示不良贷款的处理记录
|
||||
- **AND** 包括催收记录、理赔记录、处置记录
|
||||
|
||||
### Requirement: 按银行筛选贷款
|
||||
政务端 SHALL 支持按银行筛选贷款信息。
|
||||
|
||||
#### Scenario: 选择银行查看贷款
|
||||
- **WHEN** 政务端用户选择一个银行
|
||||
- **THEN** 系统 SHALL 显示该银行的所有贷款信息
|
||||
- **AND** 包括正常贷款和不良贷款
|
||||
|
||||
#### Scenario: 查看银行不良贷款统计
|
||||
- **WHEN** 政务端用户查看银行贷款信息
|
||||
- **THEN** 系统 SHALL 显示该银行的不良贷款统计
|
||||
- **AND** 包括不良贷款数量、不良贷款金额、不良贷款率
|
||||
|
||||
101
openspec/specs/insurance-claim-review/spec.md
Normal file
101
openspec/specs/insurance-claim-review/spec.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# insurance-claim-review Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: 接收理赔申请
|
||||
保险端 SHALL 接收银行端提交的理赔申请。
|
||||
|
||||
#### Scenario: 查看待理赔审核列表
|
||||
- **WHEN** 保险端理赔审核人员登录系统
|
||||
- **THEN** 系统 SHALL 显示待审核的理赔申请列表
|
||||
- **AND** 每个申请显示银行名称、保险单号、理赔金额、理赔原因
|
||||
|
||||
#### Scenario: 查看理赔申请详情
|
||||
- **WHEN** 保险端理赔审核人员点击理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔申请的完整信息
|
||||
- **AND** 包括银行信息、保险单信息、理赔金额、理赔原因
|
||||
|
||||
### Requirement: 查看理赔材料
|
||||
保险端 SHALL 支持理赔审核人员查看银行上传的理赔材料。
|
||||
|
||||
#### Scenario: 查看材料列表
|
||||
- **WHEN** 保险端理赔审核人员查看理赔申请详情
|
||||
- **THEN** 系统 SHALL 显示理赔材料列表
|
||||
- **AND** 每个材料显示文件名、文件类型、上传时间
|
||||
|
||||
#### Scenario: 下载和预览材料
|
||||
- **WHEN** 保险端理赔审核人员点击理赔材料
|
||||
- **THEN** 系统 SHALL 支持下载或预览材料
|
||||
- **AND** 支持常见的文件格式（图片、PDF、文档等）
|
||||
|
||||
### Requirement: 理赔材料审核
|
||||
保险端 SHALL 支持理赔审核人员对材料进行审核。
|
||||
|
||||
#### Scenario: 审核通过
|
||||
- **WHEN** 保险端理赔审核人员审核理赔申请
|
||||
- **AND** 确认理赔材料完整且符合要求
|
||||
- **THEN** 系统 SHALL 允许审核人员选择"通过"
|
||||
- **AND** 系统 SHALL 要求填写赔付金额
|
||||
|
||||
#### Scenario: 审核拒绝
|
||||
- **WHEN** 保险端理赔审核人员审核理赔申请
|
||||
- **AND** 发现理赔材料不完整或不符合要求
|
||||
- **THEN** 系统 SHALL 允许审核人员选择"拒绝"
|
||||
- **AND** 系统 SHALL 要求填写拒绝原因
|
||||
|
||||
#### Scenario: 保存赔付金额
|
||||
- **WHEN** 保险端理赔审核人员审核通过理赔申请
|
||||
- **THEN** 系统 SHALL 保存赔付金额
|
||||
- **AND** 赔付金额 SHALL 返回给银行端
|
||||
|
||||
#### Scenario: 保存拒绝原因
|
||||
- **WHEN** 保险端理赔审核人员拒绝理赔申请
|
||||
- **THEN** 系统 SHALL 保存拒绝原因
|
||||
- **AND** 拒绝原因 SHALL 返回给银行端
|
||||
|
||||
### Requirement: 执行赔付
|
||||
保险端 SHALL 在理赔审核通过后执行赔付。
|
||||
|
||||
#### Scenario: 自动执行赔付
|
||||
- **WHEN** 理赔申请审核通过
|
||||
- **THEN** 系统 SHALL 自动执行赔付操作
|
||||
- **AND** 系统 SHALL 记录赔付日期和赔付金额
|
||||
|
||||
#### Scenario: 赔付结果通知
|
||||
- **WHEN** 赔付执行成功
|
||||
- **THEN** 系统 SHALL 将赔付结果通知银行端
|
||||
- **AND** 银行端 SHALL 能够查看赔付详情
|
||||
|
||||
### Requirement: 理赔审核历史记录
|
||||
保险端 SHALL 保存理赔审核历史记录，支持查询和追溯。
|
||||
|
||||
#### Scenario: 查看理赔审核历史
|
||||
- **WHEN** 保险端理赔审核人员查看已处理的理赔申请
|
||||
- **THEN** 系统 SHALL 显示理赔审核历史记录
|
||||
- **AND** 包括审核人员、审核时间、审核结果
|
||||
|
||||
#### Scenario: 查看拒绝原因历史
|
||||
- **WHEN** 保险端理赔审核人员查看已拒绝的理赔申请
|
||||
- **THEN** 系统 SHALL 显示拒绝原因
|
||||
- **AND** 支持查看详细的拒绝理由
|
||||
|
||||
### Requirement: 理赔审核模拟数据
|
||||
系统 SHALL 提供理赔审核的模拟数据以支持开发和测试。
|
||||
|
||||
#### Scenario: 模拟数据包含多种状态
|
||||
- **WHEN** 系统加载理赔审核模拟数据
|
||||
- **THEN** 数据 SHALL 包含待审核、已通过、已拒绝三种状态的理赔申请
|
||||
- **AND** 每种状态至少包含一条记录
|
||||
|
||||
#### Scenario: 模拟数据包含完整信息
|
||||
- **WHEN** 系统加载理赔审核模拟数据
|
||||
- **THEN** 每条记录 SHALL 包含理赔申请号、银行信息、保险单号、保险公司信息
|
||||
- **AND** 包含理赔金额、理赔原因、材料列表（文件名、文件类型、大小、上传时间）
|
||||
- **AND** 包含申请时间、审核时间、审核人员、赔付金额、赔付日期、拒绝原因
|
||||
|
||||
#### Scenario: 模拟数据支持筛选
|
||||
- **WHEN** 保险端理赔审核人员按状态筛选理赔申请
|
||||
- **THEN** 系统 SHALL 返回对应状态的模拟数据
|
||||
- **AND** 支持待审核、已通过、已拒绝三种状态筛选
|
||||
|
||||
142
openspec/specs/insurance-navigation/spec.md
Normal file
142
openspec/specs/insurance-navigation/spec.md
Normal file
@@ -0,0 +1,142 @@
|
||||
# insurance-navigation Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## 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`
|
||||
|
||||
101
openspec/specs/insurance-underwriting/spec.md
Normal file
101
openspec/specs/insurance-underwriting/spec.md
Normal file
@@ -0,0 +1,101 @@
|
||||
# insurance-underwriting Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change integrate-insurance-flow. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: 接收投保申请
|
||||
保险端 SHALL 接收银行端提交的投保申请。
|
||||
|
||||
#### Scenario: 查看待核保申请列表
|
||||
- **WHEN** 保险端核保人员登录系统
|
||||
- **THEN** 系统 SHALL 显示待核保的投保申请列表
|
||||
- **AND** 每个申请显示银行名称、客户姓名、贷款金额、保险产品
|
||||
|
||||
#### Scenario: 查看投保申请详情
|
||||
- **WHEN** 保险端核保人员点击投保申请
|
||||
- **THEN** 系统 SHALL 显示投保申请的完整信息
|
||||
- **AND** 包括银行信息、客户信息、贷款信息、保险产品信息
|
||||
|
||||
### Requirement: 查看银行提供的信息
|
||||
保险端 SHALL 支持核保人员查看银行提供的客户情况和相关信息。
|
||||
|
||||
#### Scenario: 查看客户基本信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示客户的基本信息
|
||||
- **AND** 包括姓名、身份证号、信用评分
|
||||
|
||||
#### Scenario: 查看贷款信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示贷款相关信息
|
||||
- **AND** 包括贷款金额、贷款期限、贷款类型
|
||||
|
||||
#### Scenario: 查看银行评估信息
|
||||
- **WHEN** 保险端核保人员查看投保申请详情
|
||||
- **THEN** 系统 SHALL 显示银行对客户的评估信息
|
||||
- **AND** 包括银行的风险评估结果
|
||||
|
||||
### Requirement: 核保审核
|
||||
保险端 SHALL 支持核保人员进行承保条件审核。
|
||||
|
||||
#### Scenario: 核保通过
|
||||
- **WHEN** 保险端核保人员审核投保申请
|
||||
- **AND** 核保人员确认承保条件满足
|
||||
- **THEN** 系统 SHALL 允许核保人员选择"通过"
|
||||
- **AND** 系统 SHALL 更新投保申请状态为"已通过"
|
||||
|
||||
#### Scenario: 核保拒绝
|
||||
- **WHEN** 保险端核保人员审核投保申请
|
||||
- **AND** 核保人员发现承保条件不满足
|
||||
- **THEN** 系统 SHALL 允许核保人员选择"拒绝"
|
||||
- **AND** 系统 SHALL 要求填写拒绝原因
|
||||
|
||||
#### Scenario: 保存拒绝原因
|
||||
- **WHEN** 保险端核保人员拒绝投保申请
|
||||
- **THEN** 系统 SHALL 保存拒绝原因
|
||||
- **AND** 拒绝原因 SHALL 返回给银行端
|
||||
|
||||
### Requirement: 出具保险单
|
||||
保险端 SHALL 在核保通过后出具保险单。
|
||||
|
||||
#### Scenario: 自动生成保险单
|
||||
- **WHEN** 投保申请核保通过
|
||||
- **THEN** 系统 SHALL 自动生成保险单
|
||||
- **AND** 保险单 SHALL 包含保单号、保险公司信息、被保险人信息、保险金额、保险期限
|
||||
|
||||
#### Scenario: 保险单发送给银行
|
||||
- **WHEN** 保险单生成成功
|
||||
- **THEN** 系统 SHALL 将保险单信息发送给银行端
|
||||
- **AND** 银行端 SHALL 能够查看保险单详情
|
||||
|
||||
### Requirement: 核保历史记录
|
||||
保险端 SHALL 保存核保历史记录，支持查询和追溯。
|
||||
|
||||
#### Scenario: 查看核保历史
|
||||
- **WHEN** 保险端核保人员查看已处理的投保申请
|
||||
- **THEN** 系统 SHALL 显示核保历史记录
|
||||
- **AND** 包括核保人员、核保时间、核保结果
|
||||
|
||||
#### Scenario: 查看拒绝原因历史
|
||||
- **WHEN** 保险端核保人员查看已拒绝的投保申请
|
||||
- **THEN** 系统 SHALL 显示拒绝原因
|
||||
- **AND** 支持查看详细的拒绝理由
|
||||
|
||||
### Requirement: 核保申请模拟数据
|
||||
系统 SHALL 提供核保申请的模拟数据以支持开发和测试。
|
||||
|
||||
#### Scenario: 模拟数据包含多种状态
|
||||
- **WHEN** 系统加载核保申请模拟数据
|
||||
- **THEN** 数据 SHALL 包含待审核、已通过、已拒绝三种状态的投保申请
|
||||
- **AND** 每种状态至少包含一条记录
|
||||
|
||||
#### Scenario: 模拟数据包含完整信息
|
||||
- **WHEN** 系统加载核保申请模拟数据
|
||||
- **THEN** 每条记录 SHALL 包含投保申请号、银行信息、保险公司信息、保险产品信息
|
||||
- **AND** 包含客户信息（姓名、身份证号、信用评分、贷款金额、贷款期限）
|
||||
- **AND** 包含保险金额、保险期限、申请时间、审核时间、审核人员、拒绝原因
|
||||
|
||||
#### Scenario: 模拟数据支持筛选
|
||||
- **WHEN** 保险端核保人员按状态筛选投保申请
|
||||
- **THEN** 系统 SHALL 返回对应状态的模拟数据
|
||||
- **AND** 支持待审核、已通过、已拒绝三种状态筛选
|
||||
|
||||
@@ -37,6 +37,7 @@ export default defineUniPages({
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '商家中心' } },
|
||||
{ path: 'me/shop', style: { navigationBarTitleText: '店铺设置' } },
|
||||
{ path: 'me/account', style: { navigationBarTitleText: '账号安全' } },
|
||||
{ path: 'loan/assist', style: { navigationBarTitleText: '贷款辅助材料' } },
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -44,17 +45,49 @@ export default defineUniPages({
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '银行工作台' } },
|
||||
{ path: 'audit/list', style: { navigationBarTitleText: '审核列表' } },
|
||||
{ path: 'audit/detail', style: { navigationBarTitleText: '审核详情' } },
|
||||
{ path: 'customer/list', style: { navigationBarTitleText: '客户管理' } },
|
||||
{ path: 'customer/detail', style: { navigationBarTitleText: '客户详情' } },
|
||||
{ path: 'customer/transaction-list', style: { navigationBarTitleText: '交易记录' } },
|
||||
{ path: 'customer/withdraw-list', style: { navigationBarTitleText: '提现记录' } },
|
||||
{ path: 'report/list', style: { navigationBarTitleText: '报表列表' } },
|
||||
{ path: 'report/download', style: { navigationBarTitleText: '报表下载' } },
|
||||
{ path: 'visit/list', style: { navigationBarTitleText: '拜访计划' } },
|
||||
{ path: 'visit/create', style: { navigationBarTitleText: '创建拜访' } },
|
||||
{ path: 'visit/detail', style: { navigationBarTitleText: '拜访详情' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '银行中心' } },
|
||||
],
|
||||
},
|
||||
{
|
||||
root: 'pagesGovernment',
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '政务工作台' } },
|
||||
{ path: 'bank/list', style: { navigationBarTitleText: '银行管理' } },
|
||||
{ path: 'bank/detail', style: { navigationBarTitleText: '银行详情' } },
|
||||
{ path: 'supervise/list', style: { navigationBarTitleText: '合规检查' } },
|
||||
{ path: 'risk/list', style: { navigationBarTitleText: '风险预警' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '个人中心' } },
|
||||
],
|
||||
},
|
||||
{
|
||||
root: 'pagesInsurance',
|
||||
pages: [
|
||||
{ path: 'dashboard/index', style: { navigationBarTitleText: '保险工作台' } },
|
||||
{ path: 'policy/list', style: { navigationBarTitleText: '保单管理' } },
|
||||
{ path: 'policy/detail', style: { navigationBarTitleText: '保单详情' } },
|
||||
{ path: 'claim/list', style: { navigationBarTitleText: '理赔处理' } },
|
||||
{ path: 'claim/detail', style: { navigationBarTitleText: '理赔详情' } },
|
||||
{ path: 'bank/list', style: { navigationBarTitleText: '合作银行' } },
|
||||
{ path: 'me/index', style: { navigationBarTitleText: '个人中心' } },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// 分包预下载配置
|
||||
preloadRule: {
|
||||
'pages/login/index': {
|
||||
network: 'all',
|
||||
packages: ['pagesMerchant', 'pagesBank'],
|
||||
packages: ['pagesMerchant', 'pagesBank', 'pagesGovernment', 'pagesInsurance'],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
872
src/api/insurance.ts
Normal file
872
src/api/insurance.ts
Normal file
@@ -0,0 +1,872 @@
|
||||
/**
|
||||
* 保险相关 API 接口
|
||||
*/
|
||||
import type {
|
||||
BankLoanWithInsurance,
|
||||
ClaimApplication,
|
||||
ClaimReviewRequest,
|
||||
CreateClaimApplicationRequest,
|
||||
CreateInsuranceApplicationRequest,
|
||||
InsuranceApplication,
|
||||
InsuranceCompany,
|
||||
InsurancePolicy,
|
||||
InsuranceProduct,
|
||||
UnderwritingReviewRequest,
|
||||
} from '@/api/types/insurance'
|
||||
|
||||
// Mock 数据存储
|
||||
const mockInsuranceCompanies: InsuranceCompany[] = [
|
||||
{
|
||||
id: 'IC001',
|
||||
name: '中国人民财产保险股份有限公司',
|
||||
contactInfo: '400-1234567',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: 'IC002',
|
||||
name: '中国平安财产保险股份有限公司',
|
||||
contactInfo: '400-7654321',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: 'IC003',
|
||||
name: '中国太平洋财产保险股份有限公司',
|
||||
contactInfo: '400-9876543',
|
||||
status: 'active',
|
||||
},
|
||||
]
|
||||
|
||||
const mockInsuranceProducts: InsuranceProduct[] = [
|
||||
{
|
||||
id: 'IP001',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
name: '个人住房贷款保险',
|
||||
type: 'housing_loan',
|
||||
description: '为个人住房贷款提供保险保障，保障贷款人因意外事故导致的还款能力丧失',
|
||||
minAmount: 100000,
|
||||
maxAmount: 5000000,
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: 'IP002',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
name: '企业信贷履约保证保险',
|
||||
type: 'business_credit',
|
||||
description: '为企业信贷提供履约保证，降低银行信贷风险',
|
||||
minAmount: 50000,
|
||||
maxAmount: 10000000,
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: 'IP003',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
name: '小微企业贷款保证保险',
|
||||
type: 'business_credit',
|
||||
description: '为小微企业贷款提供保证保险，支持小微企业发展',
|
||||
minAmount: 30000,
|
||||
maxAmount: 5000000,
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: 'IP004',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
name: '个人消费贷款保险',
|
||||
type: 'other',
|
||||
description: '为个人消费贷款提供保险保障',
|
||||
minAmount: 20000,
|
||||
maxAmount: 2000000,
|
||||
status: 'active',
|
||||
},
|
||||
]
|
||||
|
||||
const mockInsuranceApplications: InsuranceApplication[] = [
|
||||
{
|
||||
id: 'IA20250112001',
|
||||
loanId: 'LA20251226001',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
productId: 'IP001',
|
||||
productName: '个人住房贷款保险',
|
||||
customerInfo: {
|
||||
name: '张三',
|
||||
idNumber: '440106199001011234',
|
||||
creditScore: 750,
|
||||
loanAmount: 500000,
|
||||
loanTerm: 120,
|
||||
loanType: 'housing_loan',
|
||||
},
|
||||
insuranceAmount: 500000,
|
||||
insuranceTerm: 120,
|
||||
status: 'pending',
|
||||
createdAt: '2025-01-10 14:30:00',
|
||||
},
|
||||
{
|
||||
id: 'IA20250111001',
|
||||
loanId: 'LA20251226002',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
productId: 'IP003',
|
||||
productName: '小微企业贷款保证保险',
|
||||
customerInfo: {
|
||||
name: '李四',
|
||||
idNumber: '440106199202025678',
|
||||
creditScore: 720,
|
||||
loanAmount: 800000,
|
||||
loanTerm: 180,
|
||||
loanType: 'business_credit',
|
||||
},
|
||||
insuranceAmount: 800000,
|
||||
insuranceTerm: 180,
|
||||
status: 'approved',
|
||||
createdAt: '2025-01-09 10:15:00',
|
||||
reviewedAt: '2025-01-10 16:20:00',
|
||||
reviewedBy: '核保员001',
|
||||
},
|
||||
{
|
||||
id: 'IA20250110001',
|
||||
loanId: 'LA20251226003',
|
||||
bankId: 'B002',
|
||||
bankName: '中国建设银行',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
productId: 'IP004',
|
||||
productName: '个人消费贷款保险',
|
||||
customerInfo: {
|
||||
name: '王五',
|
||||
idNumber: '440106198803034567',
|
||||
creditScore: 680,
|
||||
loanAmount: 300000,
|
||||
loanTerm: 90,
|
||||
loanType: 'other',
|
||||
},
|
||||
insuranceAmount: 300000,
|
||||
insuranceTerm: 90,
|
||||
status: 'rejected',
|
||||
createdAt: '2025-01-08 09:45:00',
|
||||
reviewedAt: '2025-01-09 11:30:00',
|
||||
reviewedBy: '核保员002',
|
||||
rejectionReason: '客户信用评分低于产品要求最低值700分',
|
||||
},
|
||||
{
|
||||
id: 'IA20250109001',
|
||||
loanId: 'LA20251226004',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
productId: 'IP002',
|
||||
productName: '企业信贷履约保证保险',
|
||||
customerInfo: {
|
||||
name: '赵六',
|
||||
idNumber: '440106199504045678',
|
||||
creditScore: 780,
|
||||
loanAmount: 600000,
|
||||
loanTerm: 120,
|
||||
loanType: 'business_credit',
|
||||
},
|
||||
insuranceAmount: 600000,
|
||||
insuranceTerm: 120,
|
||||
status: 'pending',
|
||||
createdAt: '2025-01-07 15:20:00',
|
||||
},
|
||||
]
|
||||
|
||||
const mockInsurancePolicies: InsurancePolicy[] = [
|
||||
{
|
||||
id: 'IP20250111001',
|
||||
applicationId: 'IA20250111001',
|
||||
policyNumber: 'POL20250111001',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
loanId: 'LA20251226002',
|
||||
productId: 'IP003',
|
||||
productName: '小微企业贷款保证保险',
|
||||
insuranceAmount: 800000,
|
||||
insuranceTerm: 180,
|
||||
startDate: '2025-01-10 16:20:00',
|
||||
endDate: '2026-07-09 16:20:00',
|
||||
status: 'active',
|
||||
issuedAt: '2025-01-10 16:20:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20241220001',
|
||||
applicationId: 'IA20241220001',
|
||||
policyNumber: 'POL20241220001',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
bankId: 'B002',
|
||||
bankName: '中国建设银行',
|
||||
loanId: 'LA20241220001',
|
||||
productId: 'IP001',
|
||||
productName: '个人住房贷款保险',
|
||||
insuranceAmount: 500000,
|
||||
insuranceTerm: 120,
|
||||
startDate: '2024-12-20 10:30:00',
|
||||
endDate: '2025-12-20 10:30:00',
|
||||
status: 'active',
|
||||
issuedAt: '2024-12-20 10:30:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20241115002',
|
||||
applicationId: 'IA20241115002',
|
||||
policyNumber: 'POL20241115002',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
bankId: 'B003',
|
||||
bankName: '中国农业银行',
|
||||
loanId: 'LA20241115002',
|
||||
productId: 'IP004',
|
||||
productName: '个人消费贷款保险',
|
||||
insuranceAmount: 300000,
|
||||
insuranceTerm: 90,
|
||||
startDate: '2024-11-15 14:45:00',
|
||||
endDate: '2025-02-15 14:45:00',
|
||||
status: 'active',
|
||||
issuedAt: '2024-11-15 14:45:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20241010003',
|
||||
applicationId: 'IA20241010003',
|
||||
policyNumber: 'POL20241010003',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
bankId: 'B004',
|
||||
bankName: '中国银行',
|
||||
loanId: 'LA20241010003',
|
||||
productId: 'IP002',
|
||||
productName: '企业信贷履约保证保险',
|
||||
insuranceAmount: 1000000,
|
||||
insuranceTerm: 240,
|
||||
startDate: '2024-10-10 09:00:00',
|
||||
endDate: '2026-10-10 09:00:00',
|
||||
status: 'active',
|
||||
issuedAt: '2024-10-10 09:00:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240905004',
|
||||
applicationId: 'IA20240905004',
|
||||
policyNumber: 'POL20240905004',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
loanId: 'LA20240905004',
|
||||
productId: 'IP003',
|
||||
productName: '小微企业贷款保证保险',
|
||||
insuranceAmount: 450000,
|
||||
insuranceTerm: 120,
|
||||
startDate: '2024-09-05 16:20:00',
|
||||
endDate: '2025-09-05 16:20:00',
|
||||
status: 'expiring',
|
||||
issuedAt: '2024-09-05 16:20:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240805005',
|
||||
applicationId: 'IA20240805005',
|
||||
policyNumber: 'POL20240805005',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
bankId: 'B002',
|
||||
bankName: '中国建设银行',
|
||||
loanId: 'LA20240805005',
|
||||
productId: 'IP004',
|
||||
productName: '个人消费贷款保险',
|
||||
insuranceAmount: 200000,
|
||||
insuranceTerm: 60,
|
||||
startDate: '2024-08-05 11:30:00',
|
||||
endDate: '2025-02-05 11:30:00',
|
||||
status: 'expiring',
|
||||
issuedAt: '2024-08-05 11:30:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240701006',
|
||||
applicationId: 'IA20240701006',
|
||||
policyNumber: 'POL20240701006',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
bankId: 'B003',
|
||||
bankName: '中国农业银行',
|
||||
loanId: 'LA20240701006',
|
||||
productId: 'IP001',
|
||||
productName: '个人住房贷款保险',
|
||||
insuranceAmount: 350000,
|
||||
insuranceTerm: 180,
|
||||
startDate: '2024-07-01 08:00:00',
|
||||
endDate: '2025-07-01 08:00:00',
|
||||
status: 'expiring',
|
||||
issuedAt: '2024-07-01 08:00:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240602007',
|
||||
applicationId: 'IA20240602007',
|
||||
policyNumber: 'POL20240602007',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
bankId: 'B004',
|
||||
bankName: '中国银行',
|
||||
loanId: 'LA20240602007',
|
||||
productId: 'IP003',
|
||||
productName: '小微企业贷款保证保险',
|
||||
insuranceAmount: 600000,
|
||||
insuranceTerm: 150,
|
||||
startDate: '2024-06-02 13:15:00',
|
||||
endDate: '2024-12-02 13:15:00',
|
||||
status: 'expired',
|
||||
issuedAt: '2024-06-02 13:15:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240503008',
|
||||
applicationId: 'IA20240503008',
|
||||
policyNumber: 'POL20240503008',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
loanId: 'LA20240503008',
|
||||
productId: 'IP004',
|
||||
productName: '个人消费贷款保险',
|
||||
insuranceAmount: 150000,
|
||||
insuranceTerm: 90,
|
||||
startDate: '2024-05-03 10:45:00',
|
||||
endDate: '2024-08-03 10:45:00',
|
||||
status: 'expired',
|
||||
issuedAt: '2024-05-03 10:45:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240404009',
|
||||
applicationId: 'IA20240404009',
|
||||
policyNumber: 'POL20240404009',
|
||||
companyId: 'IC001',
|
||||
companyName: '中国人民财产保险股份有限公司',
|
||||
bankId: 'B002',
|
||||
bankName: '中国建设银行',
|
||||
loanId: 'LA20240404009',
|
||||
productId: 'IP002',
|
||||
productName: '企业信贷履约保证保险',
|
||||
insuranceAmount: 750000,
|
||||
insuranceTerm: 200,
|
||||
startDate: '2024-04-04 15:30:00',
|
||||
endDate: '2024-10-04 15:30:00',
|
||||
status: 'expired',
|
||||
issuedAt: '2024-04-04 15:30:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240305010',
|
||||
applicationId: 'IA20240305010',
|
||||
policyNumber: 'POL20240305010',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
bankId: 'B003',
|
||||
bankName: '中国农业银行',
|
||||
loanId: 'LA20240305010',
|
||||
productId: 'IP003',
|
||||
productName: '小微企业贷款保证保险',
|
||||
insuranceAmount: 900000,
|
||||
insuranceTerm: 180,
|
||||
startDate: '2024-03-05 09:20:00',
|
||||
endDate: '2025-03-05 09:20:00',
|
||||
status: 'active',
|
||||
issuedAt: '2024-03-05 09:20:00',
|
||||
},
|
||||
{
|
||||
id: 'IP20240206011',
|
||||
applicationId: 'IA20240206011',
|
||||
policyNumber: 'POL20240206011',
|
||||
companyId: 'IC003',
|
||||
companyName: '中国太平洋财产保险股份有限公司',
|
||||
bankId: 'B004',
|
||||
bankName: '中国银行',
|
||||
loanId: 'LA20240206011',
|
||||
productId: 'IP004',
|
||||
productName: '个人消费贷款保险',
|
||||
insuranceAmount: 250000,
|
||||
insuranceTerm: 120,
|
||||
startDate: '2024-02-06 14:10:00',
|
||||
endDate: '2025-02-06 14:10:00',
|
||||
status: 'active',
|
||||
issuedAt: '2024-02-06 14:10:00',
|
||||
},
|
||||
]
|
||||
|
||||
const mockClaimApplications: ClaimApplication[] = [
|
||||
{
|
||||
id: 'CA20250112001',
|
||||
policyId: 'IP20250111001',
|
||||
policyNumber: 'POL20250111001',
|
||||
loanId: 'LA20251226002',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
claimAmount: 400000,
|
||||
claimReason: '借款人逾期超过90天，无法偿还贷款本息',
|
||||
materials: [
|
||||
{
|
||||
id: 'CM20250112001',
|
||||
name: '逾期还款记录.pdf',
|
||||
url: 'https://example.com/files/overdue_record.pdf',
|
||||
type: 'application/pdf',
|
||||
size: 1024000,
|
||||
uploadTime: '2025-01-12 10:30:00',
|
||||
},
|
||||
{
|
||||
id: 'CM20250112002',
|
||||
name: '催收记录.docx',
|
||||
url: 'https://example.com/files/collection_record.docx',
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
||||
size: 512000,
|
||||
uploadTime: '2025-01-12 10:31:00',
|
||||
},
|
||||
{
|
||||
id: 'CM20250112003',
|
||||
name: '借款人财务状况.jpg',
|
||||
url: 'https://example.com/files/financial_status.jpg',
|
||||
type: 'image/jpeg',
|
||||
size: 2048000,
|
||||
uploadTime: '2025-01-12 10:32:00',
|
||||
},
|
||||
],
|
||||
status: 'pending',
|
||||
submittedAt: '2025-01-12 10:30:00',
|
||||
},
|
||||
{
|
||||
id: 'CA20250111001',
|
||||
policyId: 'IP20250111001',
|
||||
policyNumber: 'POL20250111001',
|
||||
loanId: 'LA20251226002',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
claimAmount: 200000,
|
||||
claimReason: '借款人经营困难，申请部分理赔',
|
||||
materials: [
|
||||
{
|
||||
id: 'CM20250111001',
|
||||
name: '经营困难证明.pdf',
|
||||
url: 'https://example.com/files/difficulty_proof.pdf',
|
||||
type: 'application/pdf',
|
||||
size: 768000,
|
||||
uploadTime: '2025-01-11 14:20:00',
|
||||
},
|
||||
],
|
||||
status: 'approved',
|
||||
submittedAt: '2025-01-11 14:20:00',
|
||||
reviewedAt: '2025-01-12 09:15:00',
|
||||
reviewedBy: '理赔审核员001',
|
||||
payoutAmount: 180000,
|
||||
payoutDate: '2025-01-12 09:20:00',
|
||||
},
|
||||
{
|
||||
id: 'CA20250110001',
|
||||
policyId: 'IP20250111001',
|
||||
policyNumber: 'POL20250111001',
|
||||
loanId: 'LA20251226002',
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: 'IC002',
|
||||
companyName: '中国平安财产保险股份有限公司',
|
||||
claimAmount: 600000,
|
||||
claimReason: '借款人失联，申请全额理赔',
|
||||
materials: [
|
||||
{
|
||||
id: 'CM20250110001',
|
||||
name: '失联证明.pdf',
|
||||
url: 'https://example.com/files/missing_proof.pdf',
|
||||
type: 'application/pdf',
|
||||
size: 512000,
|
||||
uploadTime: '2025-01-10 11:00:00',
|
||||
},
|
||||
],
|
||||
status: 'rejected',
|
||||
submittedAt: '2025-01-10 11:00:00',
|
||||
reviewedAt: '2025-01-10 16:30:00',
|
||||
reviewedBy: '理赔审核员002',
|
||||
rejectionReason: '提供的失联证明材料不充分，需要补充公安部门出具的正式证明文件',
|
||||
},
|
||||
]
|
||||
|
||||
// ==================== 银行端 API ====================
|
||||
|
||||
/**
|
||||
* [银行端] 获取合作保险公司列表
|
||||
*/
|
||||
export function getInsuranceCompanies() {
|
||||
return new Promise<{ list: InsuranceCompany[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
list: mockInsuranceCompanies.filter(c => c.status === 'active'),
|
||||
})
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 获取保险产品列表
|
||||
*/
|
||||
export function getInsuranceProducts(companyId?: string) {
|
||||
return new Promise<{ list: InsuranceProduct[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
let products = mockInsuranceProducts.filter(p => p.status === 'active')
|
||||
if (companyId) {
|
||||
products = products.filter(p => p.companyId === companyId)
|
||||
}
|
||||
resolve({ list: products })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 创建投保申请
|
||||
*/
|
||||
export function createInsuranceApplication(data: CreateInsuranceApplicationRequest) {
|
||||
return new Promise<{ id: string }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
const application: InsuranceApplication = {
|
||||
id: `IA${Date.now()}`,
|
||||
loanId: data.loanId,
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: data.companyId,
|
||||
companyName: mockInsuranceCompanies.find(c => c.id === data.companyId)?.name || '',
|
||||
productId: data.productId,
|
||||
productName: mockInsuranceProducts.find(p => p.id === data.productId)?.name || '',
|
||||
customerInfo: {
|
||||
name: '张三',
|
||||
idNumber: '440106199001011234',
|
||||
creditScore: 750,
|
||||
loanAmount: 500000,
|
||||
loanTerm: 120,
|
||||
loanType: 'business_credit',
|
||||
},
|
||||
insuranceAmount: data.insuranceAmount,
|
||||
insuranceTerm: data.insuranceTerm,
|
||||
status: 'pending',
|
||||
createdAt: new Date().toLocaleString(),
|
||||
}
|
||||
mockInsuranceApplications.push(application)
|
||||
resolve({ id: application.id })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 获取投保申请详情
|
||||
*/
|
||||
export function getInsuranceApplicationDetail(id: string) {
|
||||
return new Promise<InsuranceApplication>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const application = mockInsuranceApplications.find(a => a.id === id)
|
||||
if (application) {
|
||||
resolve(application)
|
||||
}
|
||||
else {
|
||||
reject(new Error('投保申请不存在'))
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 获取保险单详情
|
||||
*/
|
||||
export function getInsurancePolicyDetail(id: string) {
|
||||
return new Promise<InsurancePolicy>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const policy = mockInsurancePolicies.find(p => p.id === id)
|
||||
if (policy) {
|
||||
resolve(policy)
|
||||
}
|
||||
else {
|
||||
reject(new Error('保险单不存在'))
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 创建理赔申请
|
||||
*/
|
||||
export function createClaimApplication(data: CreateClaimApplicationRequest) {
|
||||
return new Promise<{ id: string }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
const policy = mockInsurancePolicies.find(p => p.id === data.policyId)
|
||||
const claim: ClaimApplication = {
|
||||
id: `CA${Date.now()}`,
|
||||
policyId: data.policyId,
|
||||
policyNumber: policy?.policyNumber || '',
|
||||
loanId: data.loanId,
|
||||
bankId: 'B001',
|
||||
bankName: '中国工商银行',
|
||||
companyId: policy?.companyId || '',
|
||||
companyName: policy?.companyName || '',
|
||||
claimAmount: data.claimAmount,
|
||||
claimReason: data.claimReason,
|
||||
materials: data.materials.map((file, index) => ({
|
||||
id: `CM${Date.now()}_${index}`,
|
||||
name: file.name,
|
||||
url: URL.createObjectURL(file),
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
uploadTime: new Date().toLocaleString(),
|
||||
})),
|
||||
status: 'pending',
|
||||
submittedAt: new Date().toLocaleString(),
|
||||
}
|
||||
mockClaimApplications.push(claim)
|
||||
resolve({ id: claim.id })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 获取理赔申请详情
|
||||
*/
|
||||
export function getClaimApplicationDetail(id: string) {
|
||||
return new Promise<ClaimApplication>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const claim = mockClaimApplications.find(c => c.id === id)
|
||||
if (claim) {
|
||||
resolve(claim)
|
||||
}
|
||||
else {
|
||||
reject(new Error('理赔申请不存在'))
|
||||
}
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [银行端] 获取理赔申请列表
|
||||
*/
|
||||
export function getClaimApplicationList(params?: { status?: string }) {
|
||||
return new Promise<{ list: ClaimApplication[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockClaimApplications]
|
||||
if (params?.status) {
|
||||
list = list.filter(c => c.status === params.status)
|
||||
}
|
||||
resolve({ list })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 保险端 API ====================
|
||||
|
||||
/**
|
||||
* [保险端] 获取待核保申请列表
|
||||
*/
|
||||
export function getUnderwritingApplications(params?: { status?: string }) {
|
||||
return new Promise<{ list: InsuranceApplication[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockInsuranceApplications]
|
||||
if (params?.status) {
|
||||
list = list.filter(a => a.status === params.status)
|
||||
}
|
||||
resolve({ list })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [保险端] 核保审核
|
||||
*/
|
||||
export function reviewUnderwritingApplication(id: string, data: UnderwritingReviewRequest) {
|
||||
return new Promise<void>((resolve) => {
|
||||
setTimeout(() => {
|
||||
const application = mockInsuranceApplications.find(a => a.id === id)
|
||||
if (application) {
|
||||
application.status = data.approved ? 'approved' : 'rejected'
|
||||
application.reviewedAt = new Date().toLocaleString()
|
||||
application.reviewedBy = '核保员001'
|
||||
application.rejectionReason = data.rejectionReason
|
||||
|
||||
// 如果审核通过，生成保险单
|
||||
if (data.approved) {
|
||||
const policy: InsurancePolicy = {
|
||||
id: `IP${Date.now()}`,
|
||||
applicationId: application.id,
|
||||
policyNumber: `POL${Date.now()}`,
|
||||
companyId: application.companyId,
|
||||
companyName: application.companyName,
|
||||
bankId: application.bankId,
|
||||
bankName: application.bankName,
|
||||
loanId: application.loanId,
|
||||
productId: application.productId,
|
||||
productName: application.productName,
|
||||
insuranceAmount: application.insuranceAmount,
|
||||
insuranceTerm: application.insuranceTerm,
|
||||
startDate: new Date().toLocaleString(),
|
||||
endDate: new Date(Date.now() + application.insuranceTerm * 30 * 24 * 60 * 60 * 1000).toLocaleString(),
|
||||
status: 'active',
|
||||
issuedAt: new Date().toLocaleString(),
|
||||
}
|
||||
mockInsurancePolicies.push(policy)
|
||||
}
|
||||
}
|
||||
resolve()
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [保险端] 获取待理赔审核列表
|
||||
*/
|
||||
export function getClaimReviewApplications(params?: { status?: string }) {
|
||||
return new Promise<{ list: ClaimApplication[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockClaimApplications]
|
||||
if (params?.status) {
|
||||
list = list.filter(c => c.status === params.status)
|
||||
}
|
||||
resolve({ list })
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [保险端] 理赔审核
|
||||
*/
|
||||
export function reviewClaimApplication(id: string, data: ClaimReviewRequest) {
|
||||
return new Promise<void>((resolve) => {
|
||||
setTimeout(() => {
|
||||
const claim = mockClaimApplications.find(c => c.id === id)
|
||||
if (claim) {
|
||||
claim.status = data.approved ? 'approved' : 'rejected'
|
||||
claim.reviewedAt = new Date().toLocaleString()
|
||||
claim.reviewedBy = '理赔审核员001'
|
||||
claim.rejectionReason = data.rejectionReason
|
||||
|
||||
// 如果审核通过，执行赔付
|
||||
if (data.approved && data.payoutAmount) {
|
||||
claim.payoutAmount = data.payoutAmount
|
||||
claim.payoutDate = new Date().toLocaleString()
|
||||
}
|
||||
}
|
||||
resolve()
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 政务端 API ====================
|
||||
|
||||
/**
|
||||
* [政务端] 获取贷款列表（含保险信息）
|
||||
*/
|
||||
export function getGovernmentLoanList(params?: { includeInsurance?: boolean, isBadLoan?: boolean }) {
|
||||
return new Promise<{ list: BankLoanWithInsurance[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
// Mock 数据
|
||||
const loans: BankLoanWithInsurance[] = [
|
||||
{
|
||||
id: 'LA20251226001',
|
||||
userId: 'U001',
|
||||
userName: '张三',
|
||||
amount: 500000,
|
||||
term: 120,
|
||||
status: 'approved',
|
||||
isBadLoan: false,
|
||||
},
|
||||
{
|
||||
id: 'LA20251226002',
|
||||
userId: 'U002',
|
||||
userName: '李四',
|
||||
amount: 800000,
|
||||
term: 180,
|
||||
status: 'disbursed',
|
||||
insuranceApplication: mockInsuranceApplications[0],
|
||||
insurancePolicy: mockInsurancePolicies[0],
|
||||
isBadLoan: false,
|
||||
},
|
||||
{
|
||||
id: 'LA20251226003',
|
||||
userId: 'U003',
|
||||
userName: '王五',
|
||||
amount: 300000,
|
||||
term: 90,
|
||||
status: 'disbursed',
|
||||
insuranceApplication: mockInsuranceApplications[1],
|
||||
insurancePolicy: mockInsurancePolicies[1],
|
||||
claimApplications: mockClaimApplications.slice(0, 2),
|
||||
isBadLoan: true,
|
||||
badLoanDays: 45,
|
||||
},
|
||||
]
|
||||
|
||||
let list = [...loans]
|
||||
if (params?.isBadLoan !== undefined) {
|
||||
list = list.filter(l => l.isBadLoan === params.isBadLoan)
|
||||
}
|
||||
resolve({ list })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [政务端] 获取贷款详情（含完整业务流程）
|
||||
*/
|
||||
export function getGovernmentLoanDetail(id: string, params?: { full?: boolean }) {
|
||||
return new Promise<BankLoanWithInsurance>((resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
const loan: BankLoanWithInsurance = {
|
||||
id,
|
||||
userId: 'U001',
|
||||
userName: '张三',
|
||||
amount: 500000,
|
||||
term: 120,
|
||||
status: 'disbursed',
|
||||
insuranceApplication: mockInsuranceApplications[0],
|
||||
insurancePolicy: mockInsurancePolicies[0],
|
||||
claimApplications: mockClaimApplications.slice(0, 1),
|
||||
isBadLoan: false,
|
||||
}
|
||||
resolve(loan)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* [政务端] 获取不良贷款列表
|
||||
*/
|
||||
export function getBadLoanList() {
|
||||
return new Promise<{ list: BankLoanWithInsurance[] }>((resolve) => {
|
||||
setTimeout(() => {
|
||||
const loans: BankLoanWithInsurance[] = [
|
||||
{
|
||||
id: 'LA20251226003',
|
||||
userId: 'U003',
|
||||
userName: '王五',
|
||||
amount: 300000,
|
||||
term: 90,
|
||||
status: 'disbursed',
|
||||
insuranceApplication: mockInsuranceApplications[1],
|
||||
insurancePolicy: mockInsurancePolicies[1],
|
||||
claimApplications: mockClaimApplications.slice(0, 2),
|
||||
isBadLoan: true,
|
||||
badLoanDays: 45,
|
||||
},
|
||||
{
|
||||
id: 'LA20251226004',
|
||||
userId: 'U004',
|
||||
userName: '赵六',
|
||||
amount: 600000,
|
||||
term: 120,
|
||||
status: 'disbursed',
|
||||
isBadLoan: true,
|
||||
badLoanDays: 30,
|
||||
},
|
||||
]
|
||||
resolve({ list: loans })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
1034
src/api/loan.ts
Normal file
1034
src/api/loan.ts
Normal file
File diff suppressed because it is too large
Load Diff
191
src/api/types/insurance.ts
Normal file
191
src/api/types/insurance.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* 保险相关类型定义
|
||||
*/
|
||||
|
||||
// 保险公司状态
|
||||
export type InsuranceCompanyStatus = 'active' | 'inactive'
|
||||
|
||||
// 保险产品类型
|
||||
export type InsuranceProductType = 'housing_loan' | 'business_credit' | 'other'
|
||||
|
||||
// 投保申请状态
|
||||
export type InsuranceApplicationStatus = 'pending' | 'approved' | 'rejected'
|
||||
|
||||
// 保险单状态
|
||||
export type InsurancePolicyStatus = 'active' | 'expiring' | 'expired' | 'cancelled'
|
||||
|
||||
// 理赔申请状态
|
||||
export type ClaimApplicationStatus = 'pending' | 'approved' | 'rejected'
|
||||
|
||||
/**
|
||||
* 保险公司
|
||||
*/
|
||||
export interface InsuranceCompany {
|
||||
id: string
|
||||
name: string
|
||||
contactInfo: string
|
||||
status: InsuranceCompanyStatus
|
||||
}
|
||||
|
||||
/**
|
||||
* 保险产品
|
||||
*/
|
||||
export interface InsuranceProduct {
|
||||
id: string
|
||||
companyId: string
|
||||
companyName: string
|
||||
name: string
|
||||
type: InsuranceProductType
|
||||
description: string
|
||||
minAmount: number
|
||||
maxAmount: number
|
||||
status: InsuranceCompanyStatus
|
||||
}
|
||||
|
||||
/**
|
||||
* 客户信息（用于投保申请）
|
||||
*/
|
||||
export interface CustomerInfo {
|
||||
name: string
|
||||
idNumber: string
|
||||
creditScore: number
|
||||
loanAmount: number
|
||||
loanTerm: number
|
||||
loanType: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 投保申请
|
||||
*/
|
||||
export interface InsuranceApplication {
|
||||
id: string
|
||||
loanId: string
|
||||
bankId: string
|
||||
bankName: string
|
||||
companyId: string
|
||||
companyName: string
|
||||
productId: string
|
||||
productName: string
|
||||
customerInfo: CustomerInfo
|
||||
insuranceAmount: number
|
||||
insuranceTerm: number
|
||||
status: InsuranceApplicationStatus
|
||||
createdAt: string
|
||||
reviewedAt?: string
|
||||
reviewedBy?: string
|
||||
rejectionReason?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 保险单
|
||||
*/
|
||||
export interface InsurancePolicy {
|
||||
id: string
|
||||
applicationId: string
|
||||
policyNumber: string
|
||||
companyId: string
|
||||
companyName: string
|
||||
bankId: string
|
||||
bankName: string
|
||||
loanId: string
|
||||
productId: string
|
||||
productName: string
|
||||
insuranceAmount: number
|
||||
insuranceTerm: number
|
||||
startDate: string
|
||||
endDate: string
|
||||
status: InsurancePolicyStatus
|
||||
issuedAt: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 理赔材料
|
||||
*/
|
||||
export interface ClaimMaterial {
|
||||
id: string
|
||||
name: string
|
||||
url: string
|
||||
type: string
|
||||
size: number
|
||||
uploadTime: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 理赔申请
|
||||
*/
|
||||
export interface ClaimApplication {
|
||||
id: string
|
||||
policyId: string
|
||||
policyNumber: string
|
||||
loanId: string
|
||||
bankId: string
|
||||
bankName: string
|
||||
companyId: string
|
||||
companyName: string
|
||||
claimAmount: number
|
||||
claimReason: string
|
||||
materials: ClaimMaterial[]
|
||||
status: ClaimApplicationStatus
|
||||
submittedAt: string
|
||||
reviewedAt?: string
|
||||
reviewedBy?: string
|
||||
rejectionReason?: string
|
||||
payoutAmount?: number
|
||||
payoutDate?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建投保申请请求
|
||||
*/
|
||||
export interface CreateInsuranceApplicationRequest {
|
||||
loanId: string
|
||||
companyId: string
|
||||
productId: string
|
||||
insuranceAmount: number
|
||||
insuranceTerm: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 核保审核请求
|
||||
*/
|
||||
export interface UnderwritingReviewRequest {
|
||||
approved: boolean
|
||||
rejectionReason?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建理赔申请请求
|
||||
*/
|
||||
export interface CreateClaimApplicationRequest {
|
||||
policyId: string
|
||||
loanId: string
|
||||
claimAmount: number
|
||||
claimReason: string
|
||||
materials: File[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 理赔审核请求
|
||||
*/
|
||||
export interface ClaimReviewRequest {
|
||||
approved: boolean
|
||||
rejectionReason?: string
|
||||
payoutAmount?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 银行贷款信息（扩展）
|
||||
*/
|
||||
export interface BankLoanWithInsurance {
|
||||
id: string
|
||||
userId: string
|
||||
userName: string
|
||||
amount: number
|
||||
term: number
|
||||
status: string
|
||||
insuranceApplication?: InsuranceApplication
|
||||
insurancePolicy?: InsurancePolicy
|
||||
claimApplications?: ClaimApplication[]
|
||||
isBadLoan: boolean
|
||||
badLoanDays?: number
|
||||
}
|
||||
@@ -24,6 +24,8 @@ export const mockLoanApplicationRecords: LoanApplicationRecord[] = [
|
||||
type: "info",
|
||||
content: "您的申请正在风控部门审核中，预计还需要1-2个工作日完成评估"
|
||||
},
|
||||
handlerName: "王经理",
|
||||
handlerPhone: "13800138888",
|
||||
actions: [
|
||||
{
|
||||
code: "VIEW_DETAIL",
|
||||
@@ -104,6 +106,8 @@ export const mockLoanApplicationRecords: LoanApplicationRecord[] = [
|
||||
type: "info",
|
||||
content: "您的申请已进入资料审核阶段，请耐心等待"
|
||||
},
|
||||
handlerName: "刘经理",
|
||||
handlerPhone: "13800139999",
|
||||
actions: [
|
||||
{
|
||||
code: "CANCEL",
|
||||
|
||||
428
src/pages.json
Normal file
428
src/pages.json
Normal file
@@ -0,0 +1,428 @@
|
||||
{
|
||||
"globalStyle": {
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "unibest",
|
||||
"navigationBarBackgroundColor": "#f8f8f8",
|
||||
"navigationBarTextStyle": "black",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
},
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^fg-(.*)": "@/components/fg-$1/fg-$1.vue",
|
||||
"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
|
||||
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
|
||||
}
|
||||
},
|
||||
"preloadRule": {
|
||||
"pages/login/index": {
|
||||
"network": "all",
|
||||
"packages": [
|
||||
"pagesMerchant",
|
||||
"pagesBank",
|
||||
"pagesGovernment",
|
||||
"pagesInsurance"
|
||||
]
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"type": "home",
|
||||
"style": {
|
||||
"navigationBarTitleText": "数字广东"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/finance/credit",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "信用额度",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/finance/settlement",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "应结账款",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/goods/cart",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购物车"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/goods/detail",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情",
|
||||
"navigationBarBackgroundColor": "#ffffff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/loan-application-records",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "助贷申请记录",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/loan-application",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "贷款申请",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/me",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"navigationBarBackgroundColor": "#fff",
|
||||
"navigationBarTextStyle": "black"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/member/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员中心",
|
||||
"navigationBarBackgroundColor": "#1a1a1a",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/confirm",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "确认订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/detail",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/order/list",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的订单",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/sort/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分类",
|
||||
"disableScroll": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pagesMerchant",
|
||||
"pages": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"path": "dashboard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商家工作台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "goods/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑商品"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "finance/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "财务中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "finance/settlement",
|
||||
"style": {
|
||||
"navigationBarTitleText": "结算记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "finance/withdraw",
|
||||
"style": {
|
||||
"navigationBarTitleText": "申请提现"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商家中心"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/shop",
|
||||
"style": {
|
||||
"navigationBarTitleText": "店铺设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/account",
|
||||
"style": {
|
||||
"navigationBarTitleText": "账号安全"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "loan/assist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "贷款辅助材料"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesBank",
|
||||
"pages": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"path": "dashboard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "银行工作台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "audit/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "审核列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "audit/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "审核详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "customer/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "客户管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "customer/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "客户详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "customer/transaction-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "交易记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "customer/withdraw-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "report/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "报表列表"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "report/download",
|
||||
"style": {
|
||||
"navigationBarTitleText": "报表下载"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "visit/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拜访计划"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "visit/create",
|
||||
"style": {
|
||||
"navigationBarTitleText": "创建拜访"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "visit/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "拜访详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "银行中心"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesGovernment",
|
||||
"pages": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"path": "dashboard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "政务工作台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "bank/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "银行管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "bank/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "银行详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "supervise/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "合规检查"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "risk/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "风险预警"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人中心"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pagesInsurance",
|
||||
"pages": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"path": "dashboard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "保险工作台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "policy/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "保单管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "policy/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "保单详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "claim/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "理赔处理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "claim/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "理赔详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "bank/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "合作银行"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "me/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人中心"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"color": "#999999",
|
||||
"selectedColor": "#018d71",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"borderStyle": "black",
|
||||
"height": "50px",
|
||||
"fontSize": "10px",
|
||||
"iconWidth": "24px",
|
||||
"spacing": "3px",
|
||||
"list": [
|
||||
// GENERATED BY UNI-PAGES, PLATFORM: H5
|
||||
{
|
||||
"text": "首页",
|
||||
"pagePath": "pages/index/index"
|
||||
},
|
||||
{
|
||||
"text": "分类",
|
||||
"pagePath": "pages/sort/index"
|
||||
},
|
||||
{
|
||||
"text": "购物车",
|
||||
"pagePath": "pages/goods/cart"
|
||||
},
|
||||
{
|
||||
"text": "我的",
|
||||
"pagePath": "pages/me/me"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,8 @@ const clientTypes = [
|
||||
{ type: ClientType.USER, ...CLIENT_TYPE_CONFIG[ClientType.USER] },
|
||||
{ type: ClientType.MERCHANT, ...CLIENT_TYPE_CONFIG[ClientType.MERCHANT] },
|
||||
{ type: ClientType.BANK, ...CLIENT_TYPE_CONFIG[ClientType.BANK] },
|
||||
{ type: ClientType.GOVERNMENT, ...CLIENT_TYPE_CONFIG[ClientType.GOVERNMENT] },
|
||||
{ type: ClientType.INSURANCE, ...CLIENT_TYPE_CONFIG[ClientType.INSURANCE] },
|
||||
]
|
||||
|
||||
// 选择客户端类型
|
||||
|
||||
@@ -73,6 +73,13 @@ function handleActionClick(record: LoanApplicationRecord, action: any) {
|
||||
}
|
||||
}
|
||||
|
||||
// 拨打银行受理人电话
|
||||
function handleCallPhone(phone: string) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
|
||||
// 获取状态颜色
|
||||
function getStatusColor(status: LoanApplicationStatus) {
|
||||
switch (status) {
|
||||
@@ -185,10 +192,25 @@ function getButtonStyle(style: string) {
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行受理人信息（仅处理中状态显示） -->
|
||||
<view v-if="record.status === 'PROCESSING' && record.handlerName" class="handler-section">
|
||||
<view class="handler-info">
|
||||
<text class="i-carbon-user handler-icon"></text>
|
||||
<view class="handler-details">
|
||||
<text class="handler-label">银行受理人</text>
|
||||
<text class="handler-name">{{ record.handlerName }}</text>
|
||||
<view class="handler-phone-wrapper" @click="handleCallPhone(record.handlerPhone)">
|
||||
<text class="i-carbon-phone handler-phone-icon"></text>
|
||||
<text class="handler-phone">{{ record.handlerPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<view class="actions-section">
|
||||
<view
|
||||
v-for="action in record.actions"
|
||||
<view
|
||||
v-for="action in record.actions"
|
||||
:key="action.code"
|
||||
class="action-btn"
|
||||
:style="getButtonStyle(action.style)"
|
||||
@@ -251,18 +273,33 @@ function getButtonStyle(style: string) {
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 银行受理人信息（仅处理中状态显示） -->
|
||||
<view v-if="selectedRecord.status === 'PROCESSING' && selectedRecord.handlerName" class="handler-detail">
|
||||
<text class="detail-label">银行受理人</text>
|
||||
<view class="handler-detail-info">
|
||||
<view class="handler-detail-row">
|
||||
<text class="i-carbon-user handler-detail-icon"></text>
|
||||
<text class="handler-detail-name">{{ selectedRecord.handlerName }}</text>
|
||||
</view>
|
||||
<view class="handler-detail-row handler-detail-phone" @click="handleCallPhone(selectedRecord.handlerPhone)">
|
||||
<text class="i-carbon-phone handler-detail-icon"></text>
|
||||
<text class="handler-detail-phone-number">{{ selectedRecord.handlerPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view v-if="selectedRecord.alertInfo && selectedRecord.alertInfo.show" class="alert-detail">
|
||||
<view
|
||||
<view
|
||||
class="alert-detail-box"
|
||||
:class="selectedRecord.alertInfo.type"
|
||||
>
|
||||
<text
|
||||
v-if="selectedRecord.alertInfo.type === 'info'"
|
||||
<text
|
||||
v-if="selectedRecord.alertInfo.type === 'info'"
|
||||
class="i-carbon-information alert-icon"
|
||||
></text>
|
||||
<text
|
||||
v-else-if="selectedRecord.alertInfo.type === 'warning'"
|
||||
<text
|
||||
v-else-if="selectedRecord.alertInfo.type === 'warning'"
|
||||
class="i-carbon-warning-alt alert-icon"
|
||||
></text>
|
||||
<text>{{ selectedRecord.alertInfo.content }}</text>
|
||||
@@ -451,6 +488,58 @@ function getButtonStyle(style: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.handler-section {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.handler-info {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.handler-icon {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.handler-details {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.handler-label {
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.handler-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.handler-phone-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.handler-phone-icon {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.handler-phone {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@@ -612,6 +701,52 @@ function getButtonStyle(style: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.handler-detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.detail-label {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.handler-detail-info {
|
||||
background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
|
||||
.handler-detail-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.handler-detail-icon {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.handler-detail-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.handler-detail-phone {
|
||||
cursor: pointer;
|
||||
|
||||
.handler-detail-phone-number {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-detail {
|
||||
padding: 20rpx 0;
|
||||
|
||||
|
||||
@@ -352,15 +352,25 @@ function validateForm() {
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
function handleSubmit() {
|
||||
// 取消表单校验，直接提交
|
||||
async function handleSubmit() {
|
||||
if (!validateForm()) return
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
// 模拟提交
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// 收集选中的商家
|
||||
const selectedMerchants = merchantList.value.filter(item => item.selected)
|
||||
|
||||
// 构建提交数据
|
||||
const submitData = {
|
||||
...formData.value,
|
||||
relatedMerchants: selectedMerchants
|
||||
}
|
||||
|
||||
await submitLoanApplication(submitData)
|
||||
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
@@ -371,13 +381,73 @@ function handleSubmit() {
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}, 2000)
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 返回上一页
|
||||
function handleBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
// 商家选择相关
|
||||
import { getUserMerchants, submitLoanApplication } from '@/api/loan'
|
||||
import type { RelatedMerchant } from '@/typings/loan'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const merchantList = ref<RelatedMerchant[]>([])
|
||||
const userStore = useUserStore()
|
||||
|
||||
onMounted(async () => {
|
||||
// 1. 获取商户列表
|
||||
const res = await getUserMerchants()
|
||||
merchantList.value = res.list
|
||||
|
||||
// 2. 检查是否需要授权填充个人信息
|
||||
if (!formData.value.personalInfo.name) {
|
||||
uni.showModal({
|
||||
title: '授权申请',
|
||||
content: '允许本应用获取您的个人信息（姓名、电话、身份证）以自动填充申请表？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 自动填充
|
||||
const { userInfo } = userStore
|
||||
if (userInfo) {
|
||||
formData.value.personalInfo.name = userInfo.nickname || userInfo.username || ''
|
||||
formData.value.personalInfo.phone = userInfo.phone || ''
|
||||
// 模拟身份证和地址 (因为 store 中暂无这些字段)
|
||||
formData.value.personalInfo.idCard = '110101199003078888'
|
||||
formData.value.personalInfo.region = ['北京市', '北京市', '东城区']
|
||||
formData.value.personalInfo.detailAddress = '王府井大街1号'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
function toggleMerchant(item: RelatedMerchant) {
|
||||
item.selected = !item.selected
|
||||
}
|
||||
|
||||
// 展开/收起逻辑
|
||||
const isExpanded = ref(false)
|
||||
|
||||
const displayedMerchants = computed(() => {
|
||||
if (isExpanded.value) {
|
||||
return merchantList.value
|
||||
}
|
||||
return merchantList.value.slice(0, 3)
|
||||
})
|
||||
|
||||
function toggleExpand() {
|
||||
isExpanded.value = !isExpanded.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -451,6 +521,50 @@ function handleBack() {
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关联商家模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
<view class="title-bar"></view>
|
||||
<text class="title-text">关联商家 (辅助证明)</text>
|
||||
</view>
|
||||
|
||||
<view class="form-content">
|
||||
<view class="merchant-tip">
|
||||
选择交易过的商家，系统将通知商家为您提供交易辅助材料，有助于提高审批通过率。
|
||||
</view>
|
||||
|
||||
<view class="merchant-list">
|
||||
<view
|
||||
v-for="item in displayedMerchants"
|
||||
:key="item.merchantId"
|
||||
class="merchant-item"
|
||||
:class="{ active: item.selected }"
|
||||
@click="toggleMerchant(item)"
|
||||
>
|
||||
<view class="check-box">
|
||||
<text v-if="item.selected" class="i-carbon-checkmark"></text>
|
||||
</view>
|
||||
<view class="merchant-info">
|
||||
<text class="name">{{ item.merchantName }}</text>
|
||||
<text class="time">最近交易: {{ item.lastTradeTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 展开/收起按钮 -->
|
||||
<view
|
||||
v-if="merchantList.length > 3"
|
||||
class="expand-btn"
|
||||
@click="toggleExpand"
|
||||
>
|
||||
<text>{{ isExpanded ? '收起' : '展开更多 (' + (merchantList.length - 3) + ')' }}</text>
|
||||
<text
|
||||
class="i-carbon-chevron-down arrow"
|
||||
:class="{ up: isExpanded }"
|
||||
></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 经营信息模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
@@ -558,6 +672,8 @@ function handleBack() {
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 证件信息模块 -->
|
||||
<view class="form-card">
|
||||
<view class="card-title">
|
||||
@@ -911,6 +1027,8 @@ function handleBack() {
|
||||
color: #FF4D4F;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.submit-bar {
|
||||
@@ -939,4 +1057,101 @@ function handleBack() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* 补充商家选择样式 */
|
||||
.merchant-tip {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background: #fdf5e6;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.merchant-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
|
||||
.merchant-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 12rpx;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #e6f7eb;
|
||||
border-color: #28c445;
|
||||
|
||||
.check-box {
|
||||
background: #28c445;
|
||||
border-color: #28c445;
|
||||
}
|
||||
}
|
||||
|
||||
.check-box {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 2rpx solid #ddd;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
flex-shrink: 0; /* 防止压缩 */
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
gap: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
|
||||
.arrow {
|
||||
transition: transform 0.3s;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.up {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
329
src/pagesBank/api/index.ts
Normal file
329
src/pagesBank/api/index.ts
Normal file
@@ -0,0 +1,329 @@
|
||||
import type {
|
||||
BankStats,
|
||||
AuditItem,
|
||||
AuditStatus,
|
||||
BankCustomer,
|
||||
WithdrawAuditDetail,
|
||||
VisitPlan,
|
||||
CreateVisitPlanParams,
|
||||
MarketingProduct
|
||||
} from '@/typings/bank'
|
||||
import { VisitStatus } from '@/typings/bank'
|
||||
import {
|
||||
mockBankStats,
|
||||
mockAuditList,
|
||||
getMockWithdrawDetail,
|
||||
mockCustomerList,
|
||||
mockVisitPlans,
|
||||
mockMarketingProducts
|
||||
} from '../mock'
|
||||
export { getReportList, downloadReport } from './report'
|
||||
|
||||
/** 获取银行端首页统计 */
|
||||
export function getBankStats(): Promise<BankStats> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockBankStats)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取审核列表 */
|
||||
export function getAuditList(params: {
|
||||
status?: AuditStatus
|
||||
type?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}): Promise<{ list: AuditItem[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockAuditList]
|
||||
|
||||
// 状态筛选
|
||||
if (params.status) {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
// 关键词筛选
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.merchantName.toLowerCase().includes(keyword) ||
|
||||
item.id.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取提现审核详情 */
|
||||
export function getWithdrawAuditDetail(id: string): Promise<WithdrawAuditDetail> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(getMockWithdrawDetail(id))
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 提交审核结果 */
|
||||
export function submitAudit(data: {
|
||||
id: string
|
||||
status: AuditStatus
|
||||
rejectReason?: string
|
||||
}): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 模拟更新本地 mock 数据状态
|
||||
const item = mockAuditList.find(i => i.id === data.id)
|
||||
if (item) {
|
||||
item.status = data.status
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户列表 */
|
||||
export function getCustomerList(params: {
|
||||
status?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}): Promise<{ list: BankCustomer[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockCustomerList]
|
||||
|
||||
if (params.status) {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.merchantName.toLowerCase().includes(keyword) ||
|
||||
item.contactName.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户详情 */
|
||||
export function getCustomerDetail(id: string): Promise<BankCustomer | null> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.id === id)
|
||||
resolve(customer || null)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新客户授信额度 */
|
||||
export function updateCustomerCredit(data: {
|
||||
merchantId: string
|
||||
creditLimit: number
|
||||
}): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.merchantId === data.merchantId)
|
||||
if (customer) {
|
||||
customer.creditLimit = data.creditLimit
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 冻结/解冻客户 */
|
||||
export function freezeCustomer(id: string, status: 'normal' | 'frozen'): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(item => item.id === id)
|
||||
if (customer) {
|
||||
customer.status = status === 'frozen' ? 'frozen' : 'normal'
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
import { mockTransactions, mockWithdrawHistory } from '../mock'
|
||||
|
||||
/** 获取客户交易流水 */
|
||||
export function getCustomerTransactions(params: {
|
||||
merchantId: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}): Promise<{ list: any[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockTransactions, total: mockTransactions.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取客户提现记录 */
|
||||
export function getCustomerWithdraws(params: {
|
||||
merchantId: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
}): Promise<{ list: any[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ list: mockWithdrawHistory, total: mockWithdrawHistory.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取营销产品列表 */
|
||||
export function getMarketingProducts(): Promise<MarketingProduct[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockMarketingProducts)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取拜访计划列表 */
|
||||
export function getVisitPlanList(params: {
|
||||
status?: string
|
||||
pageNum: number
|
||||
pageSize: number
|
||||
keyword?: string
|
||||
}): Promise<{ list: VisitPlan[]; total: number }> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
let list = [...mockVisitPlans]
|
||||
|
||||
// 状态筛选
|
||||
if (params.status) {
|
||||
list = list.filter(item => item.status === params.status)
|
||||
}
|
||||
|
||||
// 关键词筛选
|
||||
if (params.keyword) {
|
||||
const keyword = params.keyword.toLowerCase()
|
||||
list = list.filter(item =>
|
||||
item.customerName.toLowerCase().includes(keyword) ||
|
||||
item.topic.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
// 按日期倒序
|
||||
list.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
|
||||
resolve({ list, total: list.length })
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取拜访计划详情 */
|
||||
export function getVisitPlanDetail(id: string): Promise<VisitPlan | null> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const plan = mockVisitPlans.find(item => item.id === id)
|
||||
resolve(plan || null)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 创建拜访计划 */
|
||||
export function createVisitPlan(data: CreateVisitPlanParams): Promise<VisitPlan> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const customer = mockCustomerList.find(c => c.id === data.customerId)
|
||||
const products = mockMarketingProducts.filter(p => data.productIds.includes(p.id))
|
||||
|
||||
const newPlan: VisitPlan = {
|
||||
id: `V${Date.now()}`,
|
||||
customerId: data.customerId,
|
||||
customerName: customer?.merchantName || '',
|
||||
date: data.date,
|
||||
location: '',
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
products,
|
||||
topic: data.topic,
|
||||
remark: data.remark,
|
||||
photos: [],
|
||||
status: VisitStatus.PENDING,
|
||||
createdAt: new Date().toISOString(),
|
||||
updatedAt: new Date().toISOString()
|
||||
}
|
||||
|
||||
mockVisitPlans.unshift(newPlan)
|
||||
resolve(newPlan)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新拜访计划 */
|
||||
export function updateVisitPlan(id: string, data: Partial<CreateVisitPlanParams>): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const plan = mockVisitPlans.find(item => item.id === id)
|
||||
if (plan) {
|
||||
if (data.customerId) {
|
||||
const customer = mockCustomerList.find(c => c.id === data.customerId)
|
||||
plan.customerId = data.customerId
|
||||
plan.customerName = customer?.merchantName || ''
|
||||
}
|
||||
if (data.date) plan.date = data.date
|
||||
if (data.productIds) {
|
||||
plan.products = mockMarketingProducts.filter(p => data.productIds!.includes(p.id))
|
||||
}
|
||||
if (data.topic) plan.topic = data.topic
|
||||
if (data.remark !== undefined) plan.remark = data.remark
|
||||
plan.updatedAt = new Date().toISOString()
|
||||
}
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
|
||||
/** 更新拜访状态 */
|
||||
export function updateVisitStatus(
|
||||
id: string,
|
||||
status: VisitStatus,
|
||||
location?: string,
|
||||
latitude?: number,
|
||||
longitude?: number,
|
||||
photos?: string[]
|
||||
): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const plan = mockVisitPlans.find(item => item.id === id)
|
||||
if (plan) {
|
||||
plan.status = status
|
||||
plan.updatedAt = new Date().toISOString()
|
||||
// 标记完成时更新位置和照片
|
||||
if (status === VisitStatus.COMPLETED) {
|
||||
if (location) plan.location = location
|
||||
if (latitude !== undefined) plan.latitude = latitude
|
||||
if (longitude !== undefined) plan.longitude = longitude
|
||||
if (photos) plan.photos = photos
|
||||
}
|
||||
}
|
||||
resolve(true)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 删除拜访计划 */
|
||||
export function deleteVisitPlan(id: string): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
const index = mockVisitPlans.findIndex(item => item.id === id)
|
||||
if (index > -1) {
|
||||
mockVisitPlans.splice(index, 1)
|
||||
}
|
||||
resolve(true)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
22
src/pagesBank/api/report.ts
Normal file
22
src/pagesBank/api/report.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { ReportType, ReportDownloadParams } from '@/typings/bank'
|
||||
import { mockReportList } from '../mock'
|
||||
|
||||
/** 获取报表列表 */
|
||||
export function getReportList(): Promise<ReportType[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(mockReportList)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
|
||||
/** 下载报表 */
|
||||
export function downloadReport(params: ReportDownloadParams): Promise<boolean> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 模拟文件生成和下载过程
|
||||
console.log('下载报表:', params)
|
||||
resolve(true)
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
1355
src/pagesBank/audit/detail.vue
Normal file
1355
src/pagesBank/audit/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,49 +1,170 @@
|
||||
<script lang="ts" setup>
|
||||
import { getLoanApplicationList } from '@/api/loan'
|
||||
import { LoanStatus } from '@/typings/loan'
|
||||
import type { LoanApplication } from '@/typings/loan'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '审核列表',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟审核数据
|
||||
const auditList = ref([
|
||||
{ id: '1', merchantName: '广州数字科技有限公司', amount: 50000.00, status: 'pending', time: '2小时前' },
|
||||
{ id: '2', merchantName: '深圳智慧商贸公司', amount: 128000.00, status: 'pending', time: '3小时前' },
|
||||
{ id: '3', merchantName: '佛山电子商务公司', amount: 35000.00, status: 'approved', time: '昨天' },
|
||||
])
|
||||
// 状态标签
|
||||
const tabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '新申请', value: LoanStatus.SUBMITTED },
|
||||
{ label: '已受理', value: LoanStatus.ACCEPTED },
|
||||
{ label: '调查中', value: LoanStatus.INVESTIGATING },
|
||||
{ label: '待审批', value: LoanStatus.REPORTED },
|
||||
{ label: '已通过', value: LoanStatus.APPROVED },
|
||||
{ label: '已拒绝', value: LoanStatus.REJECTED },
|
||||
{ label: '已签约', value: LoanStatus.SIGNED },
|
||||
{ label: '已放款', value: LoanStatus.DISBURSED },
|
||||
{ label: '驳回要求补充', value: LoanStatus.PENDING_SUPPLEMENT },
|
||||
]
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
pending: { text: '待审核', color: '#ff8f0d' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
const activeTab = ref('')
|
||||
const keyword = ref('')
|
||||
const list = ref<LoanApplication[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
[LoanStatus.SUBMITTED]: { text: '新申请', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
[LoanStatus.ACCEPTED]: { text: '已受理', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
|
||||
[LoanStatus.INVESTIGATING]: { text: '调查中', color: '#4d80f0', bgColor: 'rgba(77, 128, 240, 0.1)' },
|
||||
[LoanStatus.REPORTED]: { text: '待审批', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
[LoanStatus.APPROVED]: { text: '已通过', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
[LoanStatus.REJECTED]: { text: '已拒绝', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
|
||||
[LoanStatus.SIGNED]: { text: '已签约', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
[LoanStatus.DISBURSED]: { text: '已放款', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
[LoanStatus.PENDING_SUPPLEMENT]: { text: '驳回要求补充', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
|
||||
}
|
||||
|
||||
function handleAudit(id: string) {
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
status: activeTab.value || undefined,
|
||||
keyword: keyword.value
|
||||
}
|
||||
console.log('loadData - 请求参数:', params)
|
||||
console.log('loadData - activeTab.value:', activeTab.value)
|
||||
|
||||
const res = await getLoanApplicationList(params)
|
||||
console.log('loadData - 返回结果:', res)
|
||||
|
||||
list.value = res.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeTab.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="audit-list-page">
|
||||
<view class="audit-list">
|
||||
<!-- 顶部状态栏 -->
|
||||
<view class="sticky-header">
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="i-carbon-search"></text>
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索申请人/单号"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表内容 -->
|
||||
<view class="list-container">
|
||||
<view v-if="loading && list.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="list.length === 0" class="empty-state">
|
||||
<text class="i-carbon-document-blank"></text>
|
||||
<text>暂无相关贷申请</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in auditList"
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="audit-card"
|
||||
@click="handleAudit(item.id)"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="audit-header">
|
||||
<text class="merchant-name">{{ item.merchantName }}</text>
|
||||
<text class="audit-status" :style="{ color: statusMap[item.status].color }">
|
||||
{{ statusMap[item.status].text }}
|
||||
</text>
|
||||
<view class="card-top">
|
||||
<view class="merchant-info">
|
||||
<text class="merchant-name">{{ item.userName }}的贷款申请</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="tags-row">
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: statusMap[item.status]?.color, backgroundColor: statusMap[item.status]?.bgColor }"
|
||||
>
|
||||
{{ statusMap[item.status]?.text || item.status }}
|
||||
</text>
|
||||
<!-- 保险状态标识 -->
|
||||
<text
|
||||
v-if="item.status === LoanStatus.DISBURSED"
|
||||
class="insurance-tag"
|
||||
>
|
||||
{{ Math.random() > 0.5 ? '已投保' : '未投保' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="audit-body">
|
||||
<text class="amount">申请金额：¥{{ item.amount.toFixed(2) }}</text>
|
||||
</view>
|
||||
<view class="audit-footer">
|
||||
<text class="time">{{ item.time }}</text>
|
||||
<text class="action" v-if="item.status === 'pending'">去审核 →</text>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="info-row">
|
||||
<text class="label">申请金额</text>
|
||||
<text class="amount">¥{{ item.amount }}<text class="unit">万</text></text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">期限</text>
|
||||
<text class="val">{{ item.term }}年</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="item.relatedMerchants.length">
|
||||
<text class="label">关联商家</text>
|
||||
<text class="val">{{ item.relatedMerchants.length }} 家</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -53,69 +174,183 @@ function handleAudit(id: string) {
|
||||
<style lang="scss" scoped>
|
||||
.audit-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.audit-list {
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.search-input {
|
||||
height: 72rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* 隐藏滚动条 */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex-shrink: 0;
|
||||
padding: 20rpx 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 700;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 6rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.audit-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.audit-header {
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.merchant-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
.merchant-info {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.merchant-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-status {
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
margin-left: 16rpx;
|
||||
.tags-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 8rpx;
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.insurance-tag {
|
||||
font-size: 20rpx;
|
||||
color: #00c05a;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.audit-body {
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
.audit-footer {
|
||||
|
||||
.card-content {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 500;
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.label { font-size: 24rpx; color: #999; margin-bottom: 4rpx; }
|
||||
.amount { font-size: 32rpx; font-weight: 700; color: #333; .unit { font-size: 24rpx; font-weight: normal; margin-left: 2rpx; } }
|
||||
.val { font-size: 28rpx; color: #333; font-weight: 500; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
459
src/pagesBank/customer/detail.vue
Normal file
459
src/pagesBank/customer/detail.vue
Normal file
@@ -0,0 +1,459 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerDetail, updateCustomerCredit, freezeCustomer } from '@/pagesBank/api'
|
||||
import type { BankCustomer } from '@/typings/bank'
|
||||
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '客户详情',
|
||||
},
|
||||
})
|
||||
|
||||
const id = ref('')
|
||||
const detail = ref<BankCustomer | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerDetail(id.value)
|
||||
detail.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleUpdateCredit() {
|
||||
uni.showModal({
|
||||
title: '调整授信额度',
|
||||
placeholderText: '请输入新的授信额度 (元)',
|
||||
editable: true,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
const amount = parseFloat(res.content)
|
||||
if (isNaN(amount) || amount <= 0) {
|
||||
uni.showToast({ title: '请输入正确的金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await updateCustomerCredit({
|
||||
merchantId: detail.value!.merchantId,
|
||||
creditLimit: amount
|
||||
})
|
||||
uni.showToast({ title: '调整成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleCall() {
|
||||
if (detail.value?.contactPhone) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: detail.value.contactPhone
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handleTransactions() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/customer/transaction-list?id=${id.value}&merchantId=${detail.value?.merchantId}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleWithdraws() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/customer/withdraw-list?id=${id.value}&merchantId=${detail.value?.merchantId}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleFreeze() {
|
||||
const isFrozen = detail.value?.status === 'frozen'
|
||||
uni.showModal({
|
||||
title: isFrozen ? '解冻账户' : '冻结账户',
|
||||
content: isFrozen ? '确定要解除该账户的冻结状态吗？' : '冻结后该商户将无法进行交易和提现，确定执行？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await freezeCustomer(id.value, isFrozen ? 'normal' : 'frozen')
|
||||
uni.showToast({ title: '操作成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleCreateVisit() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/visit/create?customerId=${id.value}`
|
||||
})
|
||||
}
|
||||
|
||||
function handleVisitRecords() {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/visit/list?customerId=${id.value}`
|
||||
})
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
id.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="customer-detail-page">
|
||||
<view v-if="loading" class="loading-box">加载中...</view>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<!-- 头部商户概览 -->
|
||||
<view class="header-card">
|
||||
<view class="merchant-base">
|
||||
<image :src="detail.logo || '/static/images/avatar.jpg'" class="logo" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<text class="name">{{ detail.merchantName }}</text>
|
||||
<view class="tags">
|
||||
<text class="tag">{{ detail.status === 'normal' ? '优质客户' : '风险预警' }}</text>
|
||||
<text class="tag gold">V3会员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stats-row">
|
||||
<view class="stat-item">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="value">¥{{ detail.balance.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="label">已用额度</text>
|
||||
<text class="value highlight">¥{{ detail.usedLimit.toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 授信管理 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="title">授信管理</view>
|
||||
<view class="action-btn" @click="handleUpdateCredit">调整额度</view>
|
||||
</view>
|
||||
<view class="credit-box">
|
||||
<view class="progress-container">
|
||||
<view class="progress-labels">
|
||||
<text>当前总额度</text>
|
||||
<text>¥{{ detail.creditLimit.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="progress-bar">
|
||||
<view
|
||||
class="inner"
|
||||
:style="{ width: (detail.usedLimit / detail.creditLimit * 100) + '%' }"
|
||||
></view>
|
||||
</view>
|
||||
<view class="progress-footer">
|
||||
<text>已使用 {{ (detail.usedLimit / detail.creditLimit * 100).toFixed(1) }}%</text>
|
||||
<text>剩余 ¥{{ (detail.creditLimit - detail.usedLimit).toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 联系信息 -->
|
||||
<view class="section">
|
||||
<view class="section-title">联系信息</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">联系人</text>
|
||||
<text class="value">{{ detail.contactName }}</text>
|
||||
</view>
|
||||
<view class="info-item" @click="handleCall">
|
||||
<text class="label">联系电话</text>
|
||||
<view class="value phone">
|
||||
{{ detail.contactPhone }}
|
||||
<text class="i-carbon-phone-filled"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">加入时间</text>
|
||||
<text class="value">{{ detail.joinTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="bottom-actions">
|
||||
<view class="action-item" @click="handleTransactions">
|
||||
<text class="i-carbon-list"></text>
|
||||
交易流水
|
||||
</view>
|
||||
<view class="action-item" @click="handleWithdraws">
|
||||
<text class="i-carbon-wallet"></text>
|
||||
提现记录
|
||||
</view>
|
||||
<view class="action-item" @click="handleCreateVisit">
|
||||
<text class="i-carbon-calendar-add"></text>
|
||||
创建拜访
|
||||
</view>
|
||||
<view class="action-item" @click="handleVisitRecords">
|
||||
<text class="i-carbon-calendar"></text>
|
||||
拜访记录
|
||||
</view>
|
||||
<view class="action-item" :class="{ danger: detail.status !== 'frozen' }" @click="handleFreeze">
|
||||
<text :class="detail.status === 'frozen' ? 'i-carbon-locked' : 'i-carbon-unlocked'"></text>
|
||||
{{ detail.status === 'frozen' ? '解冻账户' : '冻结账户' }}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 20rpx 40rpx 40rpx;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
|
||||
.merchant-base {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.logo {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.5);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
&.gold { background: #ffb347; color: #fff; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
margin: 0 30rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.credit-box {
|
||||
.progress-container {
|
||||
.progress-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
text:last-child { font-weight: 700; color: #333; }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 16rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.inner {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #34d19d 0%, #00c05a 100%);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
&.phone {
|
||||
color: #4d80f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
margin: 40rpx 30rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
gap: 8rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
text { font-size: 40rpx; color: #00c05a; }
|
||||
|
||||
&.danger { color: #fa4350; text { color: #fa4350; } }
|
||||
|
||||
&:active { background: #f8f9fa; }
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box {
|
||||
padding: 100rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +1,177 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerList } from '@/pagesBank/api'
|
||||
import type { BankCustomer } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '客户管理',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
// 模拟客户数据
|
||||
const customers = ref([
|
||||
{ id: '1', name: '广州数字科技有限公司', creditLimit: 500000, usedLimit: 125000, status: 'normal' },
|
||||
{ id: '2', name: '深圳智慧商贸公司', creditLimit: 300000, usedLimit: 280000, status: 'warning' },
|
||||
{ id: '3', name: '佛山电子商务公司', creditLimit: 200000, usedLimit: 50000, status: 'normal' },
|
||||
])
|
||||
const customers = ref<BankCustomer[]>([])
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const activeStatus = ref('')
|
||||
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '正常', value: 'normal' },
|
||||
{ label: '预警', value: 'warning' },
|
||||
{ label: '冻结', value: 'frozen' },
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerList({
|
||||
status: activeStatus.value || undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
keyword: keyword.value
|
||||
})
|
||||
customers.value = res.list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeStatus.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function getUsageRate(used: number, total: number) {
|
||||
return ((used / total) * 100).toFixed(1)
|
||||
return (used / total) * 100
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
normal: { text: '正常', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
warning: { text: '预警', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
frozen: { text: '冻结', color: '#fa4350', bgColor: 'rgba(250, 67, 80, 0.1)' },
|
||||
}
|
||||
return map[status] || { text: '未知', color: '#999', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="customer-list-page">
|
||||
<view class="customer-list">
|
||||
<view class="sticky-header">
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="i-carbon-search"></text>
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索商户名称/联系人"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeStatus === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view v-if="loading && customers.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="customers.length === 0" class="empty-state">
|
||||
<text class="i-carbon-user-avatar-filled-blank"></text>
|
||||
<text>暂无相关客户信息</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in customers"
|
||||
:key="item.id"
|
||||
class="customer-card"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="customer-header">
|
||||
<text class="customer-name">{{ item.name }}</text>
|
||||
<text class="customer-status" :class="item.status">
|
||||
{{ item.status === 'normal' ? '正常' : '预警' }}
|
||||
<view class="card-header">
|
||||
<view class="customer-base">
|
||||
<image :src="item.logo || '/static/images/avatar.jpg'" class="logo" mode="aspectFill" />
|
||||
<view class="info">
|
||||
<text class="name">{{ item.merchantName }}</text>
|
||||
<text class="contact">{{ item.contactName }} {{ item.contactPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: getStatusInfo(item.status).color, backgroundColor: getStatusInfo(item.status).bgColor }"
|
||||
>
|
||||
{{ getStatusInfo(item.status).text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="customer-body">
|
||||
<view class="limit-info">
|
||||
<text class="label">授信额度</text>
|
||||
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(0) }}万</text>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="limit-stats">
|
||||
<view class="stat-item">
|
||||
<text class="label">授信总额</text>
|
||||
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="label">已使用</text>
|
||||
<text class="value highlight">¥{{ (item.usedLimit / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<text class="label">可用余额</text>
|
||||
<text class="value">¥{{ (item.balance / 10000).toFixed(1) }}w</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="limit-info">
|
||||
<text class="label">已使用</text>
|
||||
<text class="value used">¥{{ (item.usedLimit / 10000).toFixed(1) }}万</text>
|
||||
|
||||
<view class="usage-progress">
|
||||
<view class="progress-info">
|
||||
<text>额度使用率</text>
|
||||
<text :class="{ danger: getUsageRate(item.usedLimit, item.creditLimit) > 80 }">
|
||||
{{ getUsageRate(item.usedLimit, item.creditLimit).toFixed(1) }}%
|
||||
</text>
|
||||
</view>
|
||||
<view class="progress-bar">
|
||||
<view
|
||||
class="progress-inner"
|
||||
:style="{
|
||||
width: Math.min(getUsageRate(item.usedLimit, item.creditLimit), 100) + '%',
|
||||
backgroundColor: getUsageRate(item.usedLimit, item.creditLimit) > 80 ? '#fa4350' : '#00c05a'
|
||||
}"
|
||||
></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="limit-info">
|
||||
<text class="label">使用率</text>
|
||||
<text class="value" :class="{ warning: item.status === 'warning' }">
|
||||
{{ getUsageRate(item.usedLimit, item.creditLimit) }}%
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="join-time">加入时间：{{ item.joinTime }}</text>
|
||||
<view class="action">
|
||||
管理客户 <text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -60,82 +182,228 @@ function getUsageRate(used: number, total: number) {
|
||||
<style lang="scss" scoped>
|
||||
.customer-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.customer-list {
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.search-input {
|
||||
height: 72rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.tab-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 700;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.customer-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.customer-header {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.customer-base {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex: 1;
|
||||
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.info {
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
.contact {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.limit-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.stat-item {
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
|
||||
&.highlight { color: #00c05a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.usage-progress {
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.danger { color: #fa4350; font-weight: 700; }
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 12rpx;
|
||||
background: #e9ecef;
|
||||
border-radius: 6rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-inner {
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
border-top: 1rpx solid #f1f3f5;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.customer-name {
|
||||
font-size: 28rpx;
|
||||
.join-time {
|
||||
font-size: 24rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.action {
|
||||
font-size: 26rpx;
|
||||
color: #4d80f0;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.customer-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.normal {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(255, 143, 13, 0.1);
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customer-body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.limit-info {
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
&.used {
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
107
src/pagesBank/customer/transaction-list.vue
Normal file
107
src/pagesBank/customer/transaction-list.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerTransactions } from '@/pagesBank/api'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const merchantId = ref('')
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
async function loadData() {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerTransactions({
|
||||
merchantId: merchantId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
list.value = res.list
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.merchantId) {
|
||||
merchantId.value = options.merchantId
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="transaction-list-page">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in list" :key="item.id">
|
||||
<view class="left">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="amount" :class="item.type">
|
||||
{{ item.type === 'expend' || item.type === 'withdraw' ? '-' : '+' }}{{ item.amount.toFixed(2) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
<view v-else-if="list.length === 0" class="empty">暂无记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.transaction-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&.income { color: #fe5b02; }
|
||||
&.expend { color: #333; }
|
||||
&.withdraw { color: #333; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
126
src/pagesBank/customer/withdraw-list.vue
Normal file
126
src/pagesBank/customer/withdraw-list.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerWithdraws } from '@/pagesBank/api'
|
||||
import { AuditStatus } from '@/typings/bank'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
const merchantId = ref('')
|
||||
const list = ref<any[]>([])
|
||||
const loading = ref(false)
|
||||
const finished = ref(false)
|
||||
|
||||
const statusMap: Record<string, { text: string; color: string }> = {
|
||||
[AuditStatus.PENDING]: { text: '待审核', color: '#ff8f0d' },
|
||||
[AuditStatus.APPROVED]: { text: '已通过', color: '#00c05a' },
|
||||
[AuditStatus.REJECTED]: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
if (loading.value || finished.value) return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getCustomerWithdraws({
|
||||
merchantId: merchantId.value,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
})
|
||||
list.value = res.list
|
||||
finished.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.merchantId) {
|
||||
merchantId.value = options.merchantId
|
||||
loadData()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="withdraw-list-page">
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in list" :key="item.id">
|
||||
<view class="header">
|
||||
<text class="time">{{ item.time }}</text>
|
||||
<text class="status" :style="{ color: statusMap[item.status]?.color }">
|
||||
{{ statusMap[item.status]?.text }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="amount">¥{{ item.amount.toFixed(2) }}</view>
|
||||
<view class="bank">{{ item.bank }}</view>
|
||||
</view>
|
||||
<view class="footer" v-if="item.reason">
|
||||
<text class="reason">拒绝原因: {{ item.reason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading">加载中...</view>
|
||||
<view v-else-if="list.length === 0" class="empty">暂无记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
background: #fff;
|
||||
padding: 30rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02);
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.time { color: #999; }
|
||||
.status { font-weight: 500; }
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.amount {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bank {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f8f9fa;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.reason {
|
||||
font-size: 24rpx;
|
||||
color: #fa4350;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #999;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { useBankStore } from '@/store/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
@@ -8,60 +9,209 @@ definePage({
|
||||
})
|
||||
|
||||
const userStore = useUserStore()
|
||||
const bankStore = useBankStore()
|
||||
|
||||
// 模拟数据
|
||||
const stats = ref({
|
||||
pendingAudit: 45,
|
||||
todayApproved: 28,
|
||||
totalAmount: 2568000.00,
|
||||
customers: 156,
|
||||
})
|
||||
|
||||
// 快捷操作
|
||||
const quickActions = [
|
||||
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
|
||||
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/list' },
|
||||
{ icon: 'i-carbon-report', label: '数据报表', path: '/pagesBank/dashboard/index' },
|
||||
{ icon: 'i-carbon-calendar', label: '拜访计划', path: '/pagesBank/visit/list' },
|
||||
{ icon: 'i-carbon-security', label: '投保管理', path: '/pagesBank/insurance/application/list' },
|
||||
{ icon: 'i-carbon-money', label: '理赔管理', path: '/pagesBank/insurance/claim/list' },
|
||||
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
|
||||
]
|
||||
|
||||
// 最近动态数据
|
||||
interface RecentActivity {
|
||||
id: number
|
||||
type: 'audit' | 'visit' | 'customer' | 'withdraw'
|
||||
title: string
|
||||
description: string
|
||||
time: string
|
||||
status?: 'pending' | 'approved' | 'rejected' | 'completed'
|
||||
}
|
||||
|
||||
const recentActivities = ref<RecentActivity[]>([
|
||||
{
|
||||
id: 1,
|
||||
type: 'audit',
|
||||
title: '贷款审核',
|
||||
description: '商户"张三便利店"提交的贷款申请待审核',
|
||||
time: '10分钟前',
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'visit',
|
||||
title: '拜访计划',
|
||||
description: '已安排拜访"李四超市"了解经营情况',
|
||||
time: '30分钟前',
|
||||
status: 'completed',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'audit',
|
||||
title: '提现审核',
|
||||
description: '商户"王五五金店"提现申请已通过',
|
||||
time: '1小时前',
|
||||
status: 'approved',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 'customer',
|
||||
title: '客户入驻',
|
||||
description: '新商户"赵六服装店"提交入驻申请',
|
||||
time: '2小时前',
|
||||
status: 'pending',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'audit',
|
||||
title: '贷款审核',
|
||||
description: '商户"孙七水果店"的贷款申请已拒绝',
|
||||
time: '3小时前',
|
||||
status: 'rejected',
|
||||
},
|
||||
])
|
||||
|
||||
// 获取动态类型对应的图标
|
||||
function getActivityIcon(type: string) {
|
||||
const iconMap: Record<string, string> = {
|
||||
audit: 'i-carbon-task-approved',
|
||||
visit: 'i-carbon-calendar',
|
||||
customer: 'i-carbon-group',
|
||||
withdraw: 'i-carbon-wallet',
|
||||
}
|
||||
return iconMap[type] || 'i-carbon-information'
|
||||
}
|
||||
|
||||
// 获取动态类型对应的颜色
|
||||
function getActivityColor(type: string) {
|
||||
const colorMap: Record<string, string> = {
|
||||
audit: '#ff8f0d',
|
||||
visit: '#00c05a',
|
||||
customer: '#3b82f6',
|
||||
withdraw: '#8b5cf6',
|
||||
}
|
||||
return colorMap[type] || '#666'
|
||||
}
|
||||
|
||||
// 获取状态对应的文本
|
||||
function getStatusText(status?: string) {
|
||||
const statusMap: Record<string, string> = {
|
||||
pending: '待审核',
|
||||
approved: '已通过',
|
||||
rejected: '已拒绝',
|
||||
completed: '已完成',
|
||||
}
|
||||
return status ? statusMap[status] : ''
|
||||
}
|
||||
|
||||
// 获取状态对应的颜色
|
||||
function getStatusColor(status?: string) {
|
||||
const colorMap: Record<string, string> = {
|
||||
pending: '#ff8f0d',
|
||||
approved: '#00c05a',
|
||||
rejected: '#ef4444',
|
||||
completed: '#3b82f6',
|
||||
}
|
||||
return status ? colorMap[status] : ''
|
||||
}
|
||||
|
||||
function handleAction(path: string) {
|
||||
if (!path) {
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
return
|
||||
}
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
|
||||
function handleActivityClick(activity: RecentActivity) {
|
||||
// 根据动态类型跳转到对应页面
|
||||
const pathMap: Record<string, string> = {
|
||||
audit: '/pagesBank/audit/list',
|
||||
visit: '/pagesBank/visit/list',
|
||||
customer: '/pagesBank/customer/list',
|
||||
withdraw: '/pagesBank/audit/list',
|
||||
}
|
||||
const path = pathMap[activity.type]
|
||||
if (path) {
|
||||
uni.navigateTo({ url: path })
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
bankStore.fetchStats()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="dashboard-page">
|
||||
<view class="header-bg"></view>
|
||||
|
||||
<!-- 头部欢迎 -->
|
||||
<view class="header">
|
||||
<view class="header-content">
|
||||
<view class="welcome">
|
||||
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行用户' }}</text>
|
||||
<text class="sub-text">金融服务数据总览</text>
|
||||
<text class="greeting">您好，{{ userStore.userInfo?.nickname || '银行管理员' }}</text>
|
||||
<text class="sub-text">欢迎回到银行端管理系统</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据卡片 -->
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card warning">
|
||||
<text class="stat-value">{{ stats.pendingAudit }}</text>
|
||||
<text class="stat-label">待审核</text>
|
||||
<!-- 关键指标卡片 -->
|
||||
<view class="stats-overview">
|
||||
<view class="total-amount-card">
|
||||
<text class="label">累计放款金额 (元)</text>
|
||||
<view class="amount-box">
|
||||
<text class="unit">¥</text>
|
||||
<text class="value">{{ (bankStore.stats?.totalLoanAmount || 0).toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card success">
|
||||
<text class="stat-value">{{ stats.todayApproved }}</text>
|
||||
<text class="stat-label">今日已审</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ (stats.totalAmount / 10000).toFixed(0) }}万</text>
|
||||
<text class="stat-label">累计放款</text>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<text class="stat-value">{{ stats.customers }}</text>
|
||||
<text class="stat-label">服务客户</text>
|
||||
|
||||
<view class="stats-grid">
|
||||
<view class="stat-card" @click="handleAction('/pagesBank/audit/list')">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value warning">{{ bankStore.stats?.pendingAuditWithdraw || 0 }}</text>
|
||||
<text class="stat-label">待审核</text>
|
||||
</view>
|
||||
<view class="stat-icon warning">
|
||||
<text class="i-carbon-wallet"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card" @click="handleAction('/pagesBank/audit/list')">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value success">{{ bankStore.stats?.todayApprovedCount || 0 }}</text>
|
||||
<text class="stat-label">今日审批</text>
|
||||
</view>
|
||||
<view class="stat-icon success">
|
||||
<text class="i-carbon-checkmark-outline"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card" @click="handleAction('/pagesBank/customer/list')">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ bankStore.stats?.activeCustomerCount || 0 }}</text>
|
||||
<text class="stat-label">活跃用户</text>
|
||||
</view>
|
||||
<view class="stat-icon">
|
||||
<text class="i-carbon-user-activity"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ bankStore.stats?.pendingAuditStore || 0 }}</text>
|
||||
<text class="stat-label">待审入驻</text>
|
||||
</view>
|
||||
<view class="stat-icon">
|
||||
<text class="i-carbon-store"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作 -->
|
||||
<view class="section">
|
||||
<view class="section-title">快捷操作</view>
|
||||
<view class="section-header">
|
||||
<text class="section-title">快捷操作</text>
|
||||
</view>
|
||||
<view class="quick-actions">
|
||||
<view
|
||||
v-for="item in quickActions"
|
||||
@@ -76,27 +226,75 @@ function handleAction(path: string) {
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 最近动态 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">最近动态</text>
|
||||
<text class="more" @click="handleAction('/pagesBank/audit/list')">更多 ></text>
|
||||
</view>
|
||||
<view class="activity-list">
|
||||
<view
|
||||
v-for="activity in recentActivities"
|
||||
:key="activity.id"
|
||||
class="activity-item"
|
||||
@click="handleActivityClick(activity)"
|
||||
>
|
||||
<view class="activity-icon" :style="{ background: `${getActivityColor(activity.type)}15` }">
|
||||
<text :class="getActivityIcon(activity.type)" :style="{ color: getActivityColor(activity.type) }"></text>
|
||||
</view>
|
||||
<view class="activity-content">
|
||||
<view class="activity-header">
|
||||
<text class="activity-title">{{ activity.title }}</text>
|
||||
<text
|
||||
v-if="activity.status"
|
||||
class="activity-status"
|
||||
:style="{ color: getStatusColor(activity.status) }"
|
||||
>
|
||||
{{ getStatusText(activity.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="activity-description">{{ activity.description }}</text>
|
||||
<text class="activity-time">{{ activity.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 480rpx; /* 稍微增高一点以容纳更多内容 */
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
padding: 60rpx 40rpx 20rpx;
|
||||
z-index: 1;
|
||||
|
||||
.welcome {
|
||||
color: #fff;
|
||||
|
||||
.greeting {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
@@ -106,54 +304,127 @@ function handleAction(path: string) {
|
||||
}
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
position: relative;
|
||||
margin: 0 30rpx;
|
||||
z-index: 1;
|
||||
|
||||
.total-amount-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx;
|
||||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.amount-box {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.unit {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-top: -40rpx;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
.stat-info {
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
|
||||
&.warning { color: #ff8f0d; }
|
||||
&.success { color: #00c05a; }
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&.warning .stat-value {
|
||||
color: #ff8f0d;
|
||||
}
|
||||
|
||||
&.success .stat-value {
|
||||
color: #00c05a;
|
||||
.stat-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: rgba(255, 143, 13, 0.1);
|
||||
text { color: #ff8f0d; }
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
text { color: #00c05a; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 30rpx 20rpx;
|
||||
margin: 30rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -166,26 +437,103 @@ function handleAction(path: string) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 20rpx;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
font-size: 44rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.activity-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.activity-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.activity-status {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-description {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.activity-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
521
src/pagesBank/insurance/application/create.vue
Normal file
521
src/pagesBank/insurance/application/create.vue
Normal file
@@ -0,0 +1,521 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceCompany, InsuranceProduct } from '@/api/types/insurance'
|
||||
import { createInsuranceApplication, getInsuranceCompanies, getInsuranceProducts } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '购买保险',
|
||||
},
|
||||
})
|
||||
|
||||
const loanId = ref('')
|
||||
const companyId = ref('')
|
||||
const productId = ref('')
|
||||
const loanAmount = ref(0)
|
||||
const loanTerm = ref(0)
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 选中的数据
|
||||
const selectedCompany = ref<InsuranceCompany | null>(null)
|
||||
const selectedProduct = ref<InsuranceProduct | null>(null)
|
||||
const insuranceAmount = ref('')
|
||||
const insuranceTerm = ref('')
|
||||
|
||||
// 列表数据
|
||||
const companies = ref<InsuranceCompany[]>([])
|
||||
const products = ref<InsuranceProduct[]>([])
|
||||
|
||||
// 状态
|
||||
const showCompanyPicker = ref(false)
|
||||
const showProductPicker = ref(false)
|
||||
|
||||
// 加载保险公司列表
|
||||
async function loadCompanies() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceCompanies()
|
||||
companies.value = res.list
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 根据ID预选保险公司
|
||||
function preSelectCompany() {
|
||||
if (!companyId.value)
|
||||
return
|
||||
const company = companies.value.find(c => c.id === companyId.value)
|
||||
if (company) {
|
||||
selectedCompany.value = company
|
||||
loadProducts(company.id)
|
||||
}
|
||||
}
|
||||
|
||||
// 选择保险公司
|
||||
function handleSelectCompany(company: InsuranceCompany) {
|
||||
selectedCompany.value = company
|
||||
selectedProduct.value = null
|
||||
insuranceAmount.value = ''
|
||||
insuranceTerm.value = ''
|
||||
loadProducts(company.id)
|
||||
showCompanyPicker.value = false
|
||||
}
|
||||
|
||||
// 加载保险产品列表
|
||||
async function loadProducts(companyId: string) {
|
||||
const res = await getInsuranceProducts(companyId)
|
||||
products.value = res.list
|
||||
}
|
||||
|
||||
// 选择保险产品
|
||||
function handleSelectProduct(product: InsuranceProduct) {
|
||||
selectedProduct.value = product
|
||||
// 默认保险金额等于贷款金额
|
||||
insuranceAmount.value = loanAmount.value.toString()
|
||||
// 默认保险期限等于贷款期限（月）
|
||||
insuranceTerm.value = loanTerm.value.toString()
|
||||
showProductPicker.value = false
|
||||
}
|
||||
|
||||
// 根据ID预选保险产品
|
||||
function preSelectProduct() {
|
||||
if (!productId.value || !selectedCompany.value)
|
||||
return
|
||||
loadProducts(selectedCompany.value.id).then(() => {
|
||||
const product = products.value.find(p => p.id === productId.value)
|
||||
if (product) {
|
||||
handleSelectProduct(product)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 提交投保申请
|
||||
async function handleSubmit() {
|
||||
if (!selectedCompany.value || !selectedProduct.value) {
|
||||
uni.showToast({ title: '请选择保险公司和保险产品', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!insuranceAmount.value || !insuranceTerm.value) {
|
||||
uni.showToast({ title: '请填写保险金额和期限', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const amount = Number(insuranceAmount.value)
|
||||
const term = Number(insuranceTerm.value)
|
||||
|
||||
// 验证保险金额
|
||||
if (amount < selectedProduct.value.minAmount) {
|
||||
uni.showToast({ title: `保险金额不能低于${selectedProduct.value.minAmount}元`, icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (amount > selectedProduct.value.maxAmount) {
|
||||
uni.showToast({ title: `保险金额不能高于${selectedProduct.value.maxAmount}元`, icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await createInsuranceApplication({
|
||||
loanId: loanId.value,
|
||||
companyId: selectedCompany.value.id,
|
||||
productId: selectedProduct.value.id,
|
||||
insuranceAmount: amount,
|
||||
insuranceTerm: term,
|
||||
})
|
||||
uni.showToast({ title: '投保申请已提交', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.loanId) {
|
||||
loanId.value = options.loanId
|
||||
}
|
||||
if (options?.loanAmount) {
|
||||
loanAmount.value = Number(options.loanAmount)
|
||||
}
|
||||
if (options?.loanTerm) {
|
||||
loanTerm.value = Number(options.loanTerm)
|
||||
}
|
||||
if (options?.companyId) {
|
||||
companyId.value = options.companyId
|
||||
}
|
||||
if (options?.productId) {
|
||||
productId.value = options.productId
|
||||
}
|
||||
loadCompanies().then(() => {
|
||||
preSelectCompany()
|
||||
if (productId.value) {
|
||||
preSelectProduct()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="insurance-create-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- 保险公司选择 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">选择保险公司</text>
|
||||
<text v-if="selectedCompany" class="selected-text">{{ selectedCompany.name }}</text>
|
||||
</view>
|
||||
<view class="company-list">
|
||||
<view
|
||||
v-for="company in companies"
|
||||
:key="company.id"
|
||||
class="company-item"
|
||||
:class="{ active: selectedCompany?.id === company.id }"
|
||||
@click="handleSelectCompany(company)"
|
||||
>
|
||||
<view class="company-info">
|
||||
<text class="company-name">{{ company.name }}</text>
|
||||
<text class="contact-info">联系方式: {{ company.contactInfo }}</text>
|
||||
</view>
|
||||
<text v-if="selectedCompany?.id === company.id" class="i-carbon-checkmark selected-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险产品选择 -->
|
||||
<view v-if="selectedCompany" class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">选择保险产品</text>
|
||||
<text v-if="selectedProduct" class="selected-text">{{ selectedProduct.name }}</text>
|
||||
</view>
|
||||
<view class="product-list">
|
||||
<view
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
class="product-item"
|
||||
:class="{ active: selectedProduct?.id === product.id }"
|
||||
@click="handleSelectProduct(product)"
|
||||
>
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<text class="product-desc">{{ product.description }}</text>
|
||||
<view class="product-meta">
|
||||
<text class="meta-item">类型: {{ product.type === 'housing_loan' ? '住房贷款' : product.type === 'business_credit' ? '企业信贷' : '其他' }}</text>
|
||||
<text class="meta-item">金额范围: {{ product.minAmount }}-{{ product.maxAmount }}元</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="selectedProduct?.id === product.id" class="i-carbon-checkmark selected-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险信息 -->
|
||||
<view v-if="selectedProduct" class="section-card">
|
||||
<view class="card-header">
|
||||
保险信息
|
||||
</view>
|
||||
<view class="form-group">
|
||||
<view class="form-item">
|
||||
<text class="label">保险金额（元）</text>
|
||||
<input
|
||||
v-model="insuranceAmount"
|
||||
type="digit"
|
||||
class="input"
|
||||
placeholder="请输入保险金额"
|
||||
>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">保险期限（月）</text>
|
||||
<input
|
||||
v-model="insuranceTerm"
|
||||
type="number"
|
||||
class="input"
|
||||
placeholder="请输入保险期限"
|
||||
>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">贷款金额（参考）</text>
|
||||
<text class="value">{{ loanAmount }}元</text>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="label">贷款期限（参考）</text>
|
||||
<text class="value">{{ loanTerm }}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="i-carbon-information tips-icon" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 保险金额一般不低于抵押物价值</text>
|
||||
<text class="tips-item">• 保险期限应与贷款期限一致</text>
|
||||
<text class="tips-item">• 投保申请提交后，将由保险公司进行核保</text>
|
||||
<text class="tips-item">• 核保通过后将自动生成保险单</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar safe-area-bottom">
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="submitting"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<text v-if="submitting">提交中...</text>
|
||||
<text v-else>提交投保申请</text>
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.insurance-create-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.selected-text {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.company-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #00c05a;
|
||||
background: #e6f7eb;
|
||||
}
|
||||
|
||||
.company-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.company-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
font-size: 40rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border: 2rpx solid transparent;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #00c05a;
|
||||
background: #e6f7eb;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.product-meta {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
font-size: 40rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.primary {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
322
src/pagesBank/insurance/application/detail.vue
Normal file
322
src/pagesBank/insurance/application/detail.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceApplication, InsurancePolicy } from '@/api/types/insurance'
|
||||
import { getInsuranceApplicationDetail, getInsurancePolicyDetail } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '投保申请详情',
|
||||
},
|
||||
})
|
||||
|
||||
const applicationId = ref('')
|
||||
const application = ref<InsuranceApplication | null>(null)
|
||||
const policy = ref<InsurancePolicy | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
if (!application.value)
|
||||
return null
|
||||
return statusMap[application.value.status] || { text: application.value.status, color: '#666' }
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceApplicationDetail(applicationId.value)
|
||||
application.value = res
|
||||
|
||||
// 如果已通过，加载保险单
|
||||
if (res.status === 'approved') {
|
||||
// 查找对应的保险单
|
||||
const policies = await getInsurancePolicyDetail(res.id)
|
||||
policy.value = policies
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
applicationId.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="application-detail-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else-if="application">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card" :style="{ background: statusInfo?.color }">
|
||||
<text class="status-text">{{ statusInfo?.text }}</text>
|
||||
<text v-if="application.status === 'pending'" class="status-desc">保险公司正在审核您的投保申请</text>
|
||||
<text v-else-if="application.status === 'approved'" class="status-desc">投保申请已通过，保险单已生成</text>
|
||||
<text v-else-if="application.status === 'rejected'" class="status-desc">投保申请已被拒绝</text>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
基本信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">投保申请号</text>
|
||||
<text class="value">{{ application.id }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款编号</text>
|
||||
<text class="value">{{ application.loanId }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">申请时间</text>
|
||||
<text class="value">{{ application.createdAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险公司信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险公司信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ application.companyName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ application.productName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
客户信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">客户姓名</text>
|
||||
<text class="value">{{ application.customerInfo.name }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">身份证号</text>
|
||||
<text class="value">{{ application.customerInfo.idNumber }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">信用评分</text>
|
||||
<text class="value score">{{ application.customerInfo.creditScore }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款金额</text>
|
||||
<text class="value">{{ application.customerInfo.loanAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款期限</text>
|
||||
<text class="value">{{ application.customerInfo.loanTerm }}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ application.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ application.insuranceTerm }}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 审核信息 -->
|
||||
<view v-if="application.status !== 'pending'" class="section-card">
|
||||
<view class="card-header">
|
||||
审核信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">审核时间</text>
|
||||
<text class="value">{{ application.reviewedAt }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">审核人员</text>
|
||||
<text class="value">{{ application.reviewedBy }}</text>
|
||||
</view>
|
||||
<view v-if="application.rejectionReason" class="info-item full">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value reason">{{ application.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险单信息 -->
|
||||
<view v-if="policy" class="section-card">
|
||||
<view class="card-header">
|
||||
<text>保险单信息</text>
|
||||
<text class="i-carbon-checkmark success-icon" />
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ policy.policyNumber }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ policy.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ policy.insuranceTerm }}月</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">开始日期</text>
|
||||
<text class="value">{{ policy.startDate }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">结束日期</text>
|
||||
<text class="value">{{ policy.endDate }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">出单时间</text>
|
||||
<text class="value">{{ policy.issuedAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.application-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.status-desc {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.success-icon {
|
||||
font-size: 28rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.score {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reason {
|
||||
color: #fa4350;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.value {
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
439
src/pagesBank/insurance/application/list.vue
Normal file
439
src/pagesBank/insurance/application/list.vue
Normal file
@@ -0,0 +1,439 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceApplication } from '@/api/types/insurance'
|
||||
import { getInsuranceApplicationList } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '投保申请',
|
||||
},
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const applications = ref<InsuranceApplication[]>([])
|
||||
const filteredApplications = ref<InsuranceApplication[]>([])
|
||||
const searchKeyword = ref('')
|
||||
const currentTab = ref('all')
|
||||
const pageSize = 20
|
||||
const currentPage = ref(1)
|
||||
const hasMore = ref(true)
|
||||
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'pending', label: '待审核' },
|
||||
{ key: 'approved', label: '已通过' },
|
||||
{ key: 'rejected', label: '已拒绝' },
|
||||
]
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
return statusMap[status] || { text: status, color: '#999' }
|
||||
}
|
||||
|
||||
function getProductTypeText(type: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
housing_loan: '住房贷款',
|
||||
business_credit: '企业信贷',
|
||||
other: '其他',
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
function filterBySearch(list: InsuranceApplication[]) {
|
||||
if (!searchKeyword.value.trim())
|
||||
return list
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
return list.filter(app =>
|
||||
app.id.toLowerCase().includes(keyword)
|
||||
|| app.companyName.toLowerCase().includes(keyword)
|
||||
|| app.productName.toLowerCase().includes(keyword)
|
||||
|| (app as any).policyNumber?.toLowerCase().includes(keyword),
|
||||
)
|
||||
}
|
||||
|
||||
function filterByStatus(list: InsuranceApplication[]) {
|
||||
if (currentTab.value === 'all')
|
||||
return list
|
||||
return list.filter(app => app.status === currentTab.value)
|
||||
}
|
||||
|
||||
function updateFilteredList() {
|
||||
let list = filterBySearch(applications.value)
|
||||
list = filterByStatus(list)
|
||||
filteredApplications.value = list
|
||||
}
|
||||
|
||||
function handleTabChange(tab: string) {
|
||||
currentTab.value = tab
|
||||
updateFilteredList()
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
currentPage.value = 1
|
||||
updateFilteredList()
|
||||
}
|
||||
|
||||
function handleClearSearch() {
|
||||
searchKeyword.value = ''
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
function handleViewDetail(id: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/application/detail?id=${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
async function loadList(reset = false) {
|
||||
if (reset) {
|
||||
currentPage.value = 1
|
||||
applications.value = []
|
||||
hasMore.value = true
|
||||
}
|
||||
|
||||
if (!hasMore.value)
|
||||
return
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceApplicationList()
|
||||
applications.value = res.list
|
||||
updateFilteredList()
|
||||
hasMore.value = res.list.length >= pageSize
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleLoadMore() {
|
||||
if (!loading.value && hasMore.value) {
|
||||
currentPage.value++
|
||||
loadList()
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefresh() {
|
||||
loadList(true)
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadList(true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="application-list-page">
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<text class="search-icon i-carbon-search" />
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
class="search-input"
|
||||
placeholder="搜索保单号/公司/产品"
|
||||
@confirm="handleSearch"
|
||||
>
|
||||
<text v-if="searchKeyword" class="clear-icon" @click="handleClearSearch">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.key }"
|
||||
@click="handleTabChange(tab.key)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<view v-if="currentTab === tab.key" class="tab-indicator" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && filteredApplications.length === 0" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredApplications.length > 0" class="application-list">
|
||||
<view
|
||||
v-for="app in filteredApplications"
|
||||
:key="app.id"
|
||||
class="application-item"
|
||||
@click="handleViewDetail(app.id)"
|
||||
>
|
||||
<view class="app-header">
|
||||
<view class="app-info">
|
||||
<text class="app-id">{{ app.id }}</text>
|
||||
<text class="company-name">{{ app.companyName }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: getStatusInfo(app.status).color }"
|
||||
>
|
||||
{{ getStatusInfo(app.status).text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="app-body">
|
||||
<view class="app-row">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ app.productName }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">产品类型</text>
|
||||
<text class="value">{{ getProductTypeText(app.customerInfo?.loanType || 'other') }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ (app.insuranceAmount / 10000).toFixed(2) }}万</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ app.insuranceTerm / 12 }}年</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">提交时间</text>
|
||||
<text class="value">{{ app.createdAt }}</text>
|
||||
</view>
|
||||
<view v-if="app.rejectionReason" class="app-row reject">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value">{{ app.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="app-footer">
|
||||
<text class="view-detail">查看详情</text>
|
||||
<text class="arrow-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!loading && filteredApplications.length > 0 && hasMore" class="load-more" @click="handleLoadMore">
|
||||
<text>加载更多</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!loading && filteredApplications.length === 0" class="empty-state">
|
||||
<text class="empty-icon i-carbon-document" />
|
||||
<text class="empty-text">暂无投保申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.application-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 36rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.application-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.application-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.app-id {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.app-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reject {
|
||||
color: #fa4350;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-top: 12rpx;
|
||||
|
||||
.view-detail {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 30rpx;
|
||||
color: #666;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
421
src/pagesBank/insurance/claim/create.vue
Normal file
421
src/pagesBank/insurance/claim/create.vue
Normal file
@@ -0,0 +1,421 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsurancePolicy } from '@/api/types/insurance'
|
||||
import { createClaimApplication } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '发起理赔申请',
|
||||
},
|
||||
})
|
||||
|
||||
const policyId = ref('')
|
||||
const policyNumber = ref('')
|
||||
const loanId = ref('')
|
||||
const claimAmount = ref('')
|
||||
const claimReason = ref('')
|
||||
const materials = ref<any[]>([])
|
||||
const submitting = ref(false)
|
||||
|
||||
// 上传材料
|
||||
function handleUploadMaterial() {
|
||||
uni.chooseImage({
|
||||
count: 9,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res) => {
|
||||
const tempFilePaths = res.tempFilePaths as string[]
|
||||
tempFilePaths.forEach((filePath, index) => {
|
||||
materials.value.push({
|
||||
id: `material_${Date.now()}_${index}`,
|
||||
url: filePath,
|
||||
name: `理赔材料${materials.value.length + 1}.jpg`,
|
||||
type: 'image/jpeg',
|
||||
size: 0,
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 删除材料
|
||||
function handleRemoveMaterial(index: number) {
|
||||
materials.value.splice(index, 1)
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
function handlePreviewImage(url: string) {
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
})
|
||||
}
|
||||
|
||||
// 提交理赔申请
|
||||
async function handleSubmit() {
|
||||
if (!claimAmount.value || !claimReason.value) {
|
||||
uni.showToast({ title: '请填写理赔金额和原因', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (materials.value.length === 0) {
|
||||
uni.showToast({ title: '请上传理赔材料', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
const files = materials.value.map((m) => {
|
||||
// 模拟 File 对象
|
||||
return new File([], m.name, { type: m.type })
|
||||
})
|
||||
|
||||
await createClaimApplication({
|
||||
policyId: policyId.value,
|
||||
loanId: loanId.value,
|
||||
claimAmount: Number(claimAmount.value),
|
||||
claimReason: claimReason.value,
|
||||
materials: files,
|
||||
})
|
||||
uni.showToast({ title: '理赔申请已提交', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.policyId) {
|
||||
policyId.value = options.policyId
|
||||
}
|
||||
if (options?.policyNumber) {
|
||||
policyNumber.value = options.policyNumber
|
||||
}
|
||||
if (options?.loanId) {
|
||||
loanId.value = options.loanId
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="claim-create-page">
|
||||
<!-- 保险单信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险单信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ policyNumber }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 理赔信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
理赔信息
|
||||
</view>
|
||||
<view class="form-group">
|
||||
<view class="form-item">
|
||||
<text class="label">理赔金额（元）</text>
|
||||
<input
|
||||
v-model="claimAmount"
|
||||
type="digit"
|
||||
class="input"
|
||||
placeholder="请输入理赔金额"
|
||||
>
|
||||
</view>
|
||||
<view class="form-item vertical">
|
||||
<text class="label">理赔原因</text>
|
||||
<textarea
|
||||
v-model="claimReason"
|
||||
class="textarea"
|
||||
placeholder="请详细描述理赔原因..."
|
||||
:maxlength="500"
|
||||
/>
|
||||
<text class="char-count">{{ claimReason.length }}/500</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 理赔材料 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text>理赔材料</text>
|
||||
<text class="required">至少上传1份</text>
|
||||
</view>
|
||||
<view class="materials-area">
|
||||
<view class="upload-btn" @click="handleUploadMaterial">
|
||||
<text class="i-carbon-add upload-icon" />
|
||||
<text class="upload-text">上传材料</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="(material, index) in materials"
|
||||
:key="material.id"
|
||||
class="material-item"
|
||||
>
|
||||
<image :src="material.url" mode="aspectFill" @click="handlePreviewImage(material.url)" />
|
||||
<view class="material-actions">
|
||||
<text class="delete-btn" @click="handleRemoveMaterial(index)">
|
||||
<text class="i-carbon-close" />
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<view class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="i-carbon-information tips-icon" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 请上传清晰的理赔材料，包括但不限于：事故证明、损失清单、相关票据等</text>
|
||||
<text class="tips-item">• 理赔申请提交后，将由保险公司进行审核</text>
|
||||
<text class="tips-item">• 审核通过后将执行赔付，审核失败将返回拒绝原因</text>
|
||||
<text class="tips-item">• 理赔金额不得超过保险金额</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar safe-area-bottom">
|
||||
<button
|
||||
class="btn primary"
|
||||
:disabled="submitting"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
<text v-if="submitting">提交中...</text>
|
||||
<text v-else>提交理赔申请</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-create-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.required {
|
||||
font-size: 22rpx;
|
||||
color: #fa4350;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
|
||||
&.vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 150rpx;
|
||||
padding: 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.materials-area {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.upload-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border: 2rpx dashed #d9d9d9;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
background: #f8f9fa;
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.material-item {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.material-actions {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
|
||||
.delete-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||
z-index: 100;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.primary {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
332
src/pagesBank/insurance/claim/list.vue
Normal file
332
src/pagesBank/insurance/claim/list.vue
Normal file
@@ -0,0 +1,332 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ClaimApplication } from '@/api/types/insurance'
|
||||
import { getClaimApplicationList } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '理赔申请',
|
||||
},
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const claims = ref<ClaimApplication[]>([])
|
||||
const currentTab = ref('all')
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'all', label: '全部' },
|
||||
{ key: 'pending', label: '待审核' },
|
||||
{ key: 'approved', label: '已通过' },
|
||||
{ key: 'rejected', label: '已拒绝' },
|
||||
]
|
||||
|
||||
// 筛选后的列表
|
||||
const filteredClaims = computed(() => {
|
||||
if (currentTab.value === 'all') {
|
||||
return claims.value
|
||||
}
|
||||
return claims.value.filter(c => c.status === currentTab.value)
|
||||
})
|
||||
|
||||
// 切换标签
|
||||
function handleTabChange(tab: string) {
|
||||
currentTab.value = tab
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleViewDetail(id: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/claim/detail?id=${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 加载列表
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getClaimApplicationList()
|
||||
claims.value = res.list
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="claim-list-page">
|
||||
<!-- 标签页 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.key }"
|
||||
@click="handleTabChange(tab.key)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<view v-if="currentTab === tab.key" class="tab-indicator" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredClaims.length > 0" class="claim-list">
|
||||
<view
|
||||
v-for="claim in filteredClaims"
|
||||
:key="claim.id"
|
||||
class="claim-item"
|
||||
@click="handleViewDetail(claim.id)"
|
||||
>
|
||||
<view class="claim-header">
|
||||
<view class="claim-info">
|
||||
<text class="policy-no">保险单号: {{ claim.policyNumber }}</text>
|
||||
<text class="company-name">{{ claim.companyName }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: statusMap[claim.status]?.color }"
|
||||
>
|
||||
{{ statusMap[claim.status]?.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="claim-body">
|
||||
<view class="claim-row">
|
||||
<text class="label">理赔金额</text>
|
||||
<text class="value amount">{{ claim.claimAmount }}元</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">理赔原因</text>
|
||||
<text class="value reason">{{ claim.claimReason }}</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">提交时间</text>
|
||||
<text class="value">{{ claim.submittedAt }}</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutAmount" class="claim-row">
|
||||
<text class="label">赔付金额</text>
|
||||
<text class="value payout">{{ claim.payoutAmount }}元</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutDate" class="claim-row">
|
||||
<text class="label">赔付日期</text>
|
||||
<text class="value">{{ claim.payoutDate }}</text>
|
||||
</view>
|
||||
<view v-if="claim.rejectionReason" class="claim-row">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value reject">{{ claim.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="claim-footer">
|
||||
<text class="material-count">已上传 {{ claim.materials.length }} 份材料</text>
|
||||
<text class="arrow-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon i-carbon-document" />
|
||||
<text class="empty-text">暂无理赔申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.claim-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.claim-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.claim-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.claim-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.policy-no {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.claim-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.claim-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reason {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.payout {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reject {
|
||||
color: #fa4350;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12rpx;
|
||||
|
||||
.material-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
380
src/pagesBank/insurance/company/select.vue
Normal file
380
src/pagesBank/insurance/company/select.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceCompany, InsuranceProduct } from '@/api/types/insurance'
|
||||
import { getInsuranceCompanies, getInsuranceProducts } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '选择保险公司',
|
||||
},
|
||||
})
|
||||
|
||||
const loanId = ref('')
|
||||
const loanAmount = ref(0)
|
||||
const loanTerm = ref(0)
|
||||
const loading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const companies = ref<InsuranceCompany[]>([])
|
||||
const productsCount = ref<Record<string, number>>({})
|
||||
|
||||
const filteredCompanies = computed(() => {
|
||||
if (!searchKeyword.value.trim())
|
||||
return companies.value
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
return companies.value.filter(company =>
|
||||
company.name.toLowerCase().includes(keyword)
|
||||
|| company.contactInfo.toLowerCase().includes(keyword),
|
||||
)
|
||||
})
|
||||
|
||||
function handleSearch() {
|
||||
}
|
||||
|
||||
function handleClearSearch() {
|
||||
searchKeyword.value = ''
|
||||
}
|
||||
|
||||
async function loadCompanies() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceCompanies()
|
||||
companies.value = res.list
|
||||
for (const company of companies.value) {
|
||||
const productsRes = await getInsuranceProducts(company.id)
|
||||
productsCount.value[company.id] = productsRes.list.length
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelectCompany(company: InsuranceCompany) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/insurance/product/select?loanId=${loanId.value}&companyId=${company.id}&loanAmount=${loanAmount.value}&loanTerm=${loanTerm.value}`,
|
||||
})
|
||||
}
|
||||
|
||||
function handleGoBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.loanId)
|
||||
loanId.value = options.loanId
|
||||
if (options?.loanAmount)
|
||||
loanAmount.value = Number(options.loanAmount)
|
||||
if (options?.loanTerm)
|
||||
loanTerm.value = Number(options.loanTerm)
|
||||
loadCompanies()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="company-select-page">
|
||||
<view class="header">
|
||||
<view class="back-btn" @click="handleGoBack">
|
||||
<text class="i-carbon-arrow-left" />
|
||||
</view>
|
||||
<text class="header-title">选择保险公司</text>
|
||||
</view>
|
||||
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<text class="search-icon i-carbon-search" />
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
class="search-input"
|
||||
placeholder="搜索公司名称或联系方式"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<text v-if="searchKeyword" class="clear-icon" @click="handleClearSearch">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredCompanies.length > 0" class="company-list">
|
||||
<view
|
||||
v-for="company in filteredCompanies"
|
||||
:key="company.id"
|
||||
class="company-item"
|
||||
@click="handleSelectCompany(company)"
|
||||
>
|
||||
<view class="company-main">
|
||||
<view class="company-avatar">
|
||||
<text class="i-carbon-building" />
|
||||
</view>
|
||||
<view class="company-info">
|
||||
<text class="company-name">{{ company.name }}</text>
|
||||
<view class="company-meta">
|
||||
<text class="contact">
|
||||
<text class="i-carbon-phone" />
|
||||
{{ company.contactInfo }}
|
||||
</text>
|
||||
<text class="status active">
|
||||
<text class="i-carbon-checkmark" />
|
||||
合作中
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="company-action">
|
||||
<text class="product-count">{{ productsCount[company.id] || 0 }}个产品</text>
|
||||
<text class="select-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon i-carbon-search" />
|
||||
<text class="empty-text">未找到相关保险公司</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!loading && filteredCompanies.length > 0" class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="tips-icon i-carbon-information" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">请选择为您发放贷款的保险公司</text>
|
||||
<text class="tips-item">选择后将进入产品选择页面</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.company-select-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.back-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 36rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.company-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.company-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.company-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.company-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.company-info {
|
||||
flex: 1;
|
||||
|
||||
.company-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.company-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
text:first-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
text:first-child {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.company-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
|
||||
.product-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 24rpx 30rpx;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
270
src/pagesBank/insurance/policy/detail.vue
Normal file
270
src/pagesBank/insurance/policy/detail.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsurancePolicy } from '@/api/types/insurance'
|
||||
import { getInsurancePolicyDetail } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '保险单详情',
|
||||
},
|
||||
})
|
||||
|
||||
const policyId = ref('')
|
||||
const policy = ref<InsurancePolicy | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
active: { text: '生效中', color: '#00c05a' },
|
||||
expired: { text: '已过期', color: '#999' },
|
||||
cancelled: { text: '已取消', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
if (!policy.value)
|
||||
return null
|
||||
return statusMap[policy.value.status] || { text: policy.value.status, color: '#666' }
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsurancePolicyDetail(policyId.value)
|
||||
policy.value = res
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
policyId.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="policy-detail-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else-if="policy">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card" :style="{ background: statusInfo?.color }">
|
||||
<text class="status-text">{{ statusInfo?.text }}</text>
|
||||
<text class="policy-no">保险单号: {{ policy.policyNumber }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
基本信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ policy.policyNumber }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">出单时间</text>
|
||||
<text class="value">{{ policy.issuedAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险公司信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险公司信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ policy.companyName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ policy.productName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ policy.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ policy.insuranceTerm }}月</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">开始日期</text>
|
||||
<text class="value">{{ policy.startDate }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">结束日期</text>
|
||||
<text class="value">{{ policy.endDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关联信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
关联信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">投保申请号</text>
|
||||
<text class="value">{{ policy.applicationId }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款编号</text>
|
||||
<text class="value">{{ policy.loanId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作提示 -->
|
||||
<view v-if="policy.status === 'active'" class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="i-carbon-information tips-icon" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">• 保险单生效期间，如发生保险事故，可发起理赔申请</text>
|
||||
<text class="tips-item">• 理赔申请需提供相关证明材料</text>
|
||||
<text class="tips-item">• 保险单到期后自动失效，需重新购买保险</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.policy-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.policy-no {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
582
src/pagesBank/insurance/product/select.vue
Normal file
582
src/pagesBank/insurance/product/select.vue
Normal file
@@ -0,0 +1,582 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceCompany, InsuranceProduct } from '@/api/types/insurance'
|
||||
import { getInsuranceCompanies, getInsuranceProducts } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '选择保险产品',
|
||||
},
|
||||
})
|
||||
|
||||
const loanId = ref('')
|
||||
const companyId = ref('')
|
||||
const companyName = ref('')
|
||||
const loanAmount = ref(0)
|
||||
const loanTerm = ref(0)
|
||||
const loading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const products = ref<InsuranceProduct[]>([])
|
||||
const selectedProduct = ref<InsuranceProduct | null>(null)
|
||||
const showDetailModal = ref(false)
|
||||
|
||||
const filteredProducts = computed(() => {
|
||||
if (!searchKeyword.value.trim())
|
||||
return products.value
|
||||
const keyword = searchKeyword.value.toLowerCase()
|
||||
return products.value.filter(product =>
|
||||
product.name.toLowerCase().includes(keyword)
|
||||
|| product.description.toLowerCase().includes(keyword)
|
||||
|| product.type.toLowerCase().includes(keyword),
|
||||
)
|
||||
})
|
||||
|
||||
function getProductTypeText(type: string) {
|
||||
const typeMap: Record<string, string> = {
|
||||
housing_loan: '住房贷款',
|
||||
business_credit: '企业信贷',
|
||||
other: '其他',
|
||||
}
|
||||
return typeMap[type] || type
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
}
|
||||
|
||||
function handleClearSearch() {
|
||||
searchKeyword.value = ''
|
||||
}
|
||||
|
||||
async function loadProducts() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceProducts(companyId.value)
|
||||
products.value = res.list
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleShowDetail(product: InsuranceProduct) {
|
||||
selectedProduct.value = product
|
||||
showDetailModal.value = true
|
||||
}
|
||||
|
||||
function handleCloseDetail() {
|
||||
showDetailModal.value = false
|
||||
selectedProduct.value = null
|
||||
}
|
||||
|
||||
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}`,
|
||||
})
|
||||
}
|
||||
|
||||
function handleGoBack() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
if (options?.loanId)
|
||||
loanId.value = options.loanId
|
||||
if (options?.companyId)
|
||||
companyId.value = options.companyId
|
||||
if (options?.loanAmount)
|
||||
loanAmount.value = Number(options.loanAmount)
|
||||
if (options?.loanTerm)
|
||||
loanTerm.value = Number(options.loanTerm)
|
||||
|
||||
if (companyId.value) {
|
||||
const companyRes = await getInsuranceCompanies()
|
||||
const company = companyRes.list.find(c => c.id === companyId.value)
|
||||
if (company)
|
||||
companyName.value = company.name
|
||||
loadProducts()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="product-select-page">
|
||||
<view class="header">
|
||||
<view class="back-btn" @click="handleGoBack">
|
||||
<text class="i-carbon-arrow-left" />
|
||||
</view>
|
||||
<text class="header-title">{{ companyName }} - 选择产品</text>
|
||||
</view>
|
||||
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<text class="search-icon i-carbon-search" />
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
class="search-input"
|
||||
placeholder="搜索产品名称/类型/描述"
|
||||
@input="handleSearch"
|
||||
>
|
||||
<text v-if="searchKeyword" class="clear-icon" @click="handleClearSearch">×</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredProducts.length > 0" class="product-list">
|
||||
<view
|
||||
v-for="product in filteredProducts"
|
||||
:key="product.id"
|
||||
class="product-item"
|
||||
@click="handleSelectProduct(product)"
|
||||
>
|
||||
<view class="product-main">
|
||||
<view class="product-icon">
|
||||
<text class="i-carbon-security" />
|
||||
</view>
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<view class="product-tags">
|
||||
<view class="tag type">
|
||||
{{ getProductTypeText(product.type) }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="product-desc">{{ product.description }}</text>
|
||||
<view class="product-range">
|
||||
<text class="range-label">保险金额范围：</text>
|
||||
<text class="range-value">{{ (product.minAmount / 10000).toFixed(0) }}万 - {{ (product.maxAmount / 10000).toFixed(0) }}万</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-actions">
|
||||
<view class="info-btn" @click.stop="handleShowDetail(product)">
|
||||
<text class="i-carbon-information" />
|
||||
<text>详情</text>
|
||||
</view>
|
||||
<text class="select-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon i-carbon-search" />
|
||||
<text class="empty-text">未找到相关产品</text>
|
||||
</view>
|
||||
|
||||
<view v-if="!loading && filteredProducts.length > 0" class="tips-card">
|
||||
<view class="tips-header">
|
||||
<text class="tips-icon i-carbon-information" />
|
||||
<text class="tips-title">温馨提示</text>
|
||||
</view>
|
||||
<view class="tips-content">
|
||||
<text class="tips-item">请选择适合的保险产品</text>
|
||||
<text class="tips-item">保险金额建议与贷款金额一致</text>
|
||||
<text class="tips-item">保险期限建议与贷款期限一致</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="showDetailModal && selectedProduct" class="modal-mask" @click="handleCloseDetail">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">产品详情</text>
|
||||
<view class="close-btn" @click="handleCloseDetail">
|
||||
<text class="i-carbon-close" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">产品名称</text>
|
||||
<text class="detail-value">{{ selectedProduct.name }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">所属公司</text>
|
||||
<text class="detail-value">{{ companyName }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">产品类型</text>
|
||||
<text class="detail-value">{{ getProductTypeText(selectedProduct.type) }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">产品描述</text>
|
||||
<text class="detail-value desc">{{ selectedProduct.description }}</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">最低金额</text>
|
||||
<text class="detail-value amount">{{ (selectedProduct.minAmount / 10000).toFixed(2) }}万</text>
|
||||
</view>
|
||||
<view class="detail-row">
|
||||
<text class="detail-label">最高金额</text>
|
||||
<text class="detail-value amount">{{ (selectedProduct.maxAmount / 10000).toFixed(2) }}万</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="btn" @click="handleSelectProduct(selectedProduct)">
|
||||
选择此产品
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-select-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.back-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f5f7fa;
|
||||
border-radius: 36rpx;
|
||||
padding: 16rpx 24rpx;
|
||||
|
||||
.search-icon {
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.clear-icon {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.product-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
|
||||
.product-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
|
||||
.product-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 8rpx;
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 22rpx;
|
||||
|
||||
&.type {
|
||||
background: #e6f7eb;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.product-range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
.range-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.range-value {
|
||||
font-size: 24rpx;
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.info-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
|
||||
text:first-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.select-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-card {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
padding: 24rpx 30rpx;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.tips-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.tips-icon {
|
||||
font-size: 28rpx;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.tips-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.tips-item {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
width: 600rpx;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
|
||||
&.desc {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20rpx 30rpx 30rpx;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -12,12 +12,20 @@ const userStore = useUserStore()
|
||||
const config = CLIENT_TYPE_CONFIG[ClientType.BANK]
|
||||
|
||||
const menuList = [
|
||||
{ icon: 'i-carbon-report', label: '数据报表' },
|
||||
{ icon: 'i-carbon-report', label: '数据报表', path: '/pagesBank/report/list' },
|
||||
{ icon: 'i-carbon-settings', label: '系统设置' },
|
||||
{ icon: 'i-carbon-help', label: '帮助中心' },
|
||||
{ icon: 'i-carbon-information', label: '关于我们' },
|
||||
]
|
||||
|
||||
function handleMenuClick(item: { label: string; path?: string }) {
|
||||
if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
} else {
|
||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
@@ -35,20 +43,20 @@ function handleLogout() {
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<!-- 用户信息 -->
|
||||
<!-- 用户信息 {{ config.label }}-->
|
||||
<view class="user-card" :style="{ background: config.color }">
|
||||
<view class="avatar">
|
||||
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="info">
|
||||
<text class="nickname">{{ userStore.userInfo?.nickname || '银行用户' }}</text>
|
||||
<text class="tag">{{ config.label }}</text>
|
||||
<text class="tag">业务经理</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<view v-for="item in menuList" :key="item.label" class="menu-item">
|
||||
<view v-for="item in menuList" :key="item.label" class="menu-item" @click="handleMenuClick(item)">
|
||||
<view class="menu-left">
|
||||
<text :class="item.icon" class="menu-icon"></text>
|
||||
<text class="menu-label">{{ item.label }}</text>
|
||||
|
||||
338
src/pagesBank/mock/index.ts
Normal file
338
src/pagesBank/mock/index.ts
Normal file
@@ -0,0 +1,338 @@
|
||||
import type {
|
||||
BankStats,
|
||||
AuditItem,
|
||||
BankCustomer,
|
||||
WithdrawAuditDetail,
|
||||
VisitPlan,
|
||||
MarketingProduct
|
||||
} from '@/typings/bank'
|
||||
import { AuditStatus, AuditType, VisitStatus } from '@/typings/bank'
|
||||
export { mockReportList, reportCategoryInfo } from './report'
|
||||
|
||||
// 统计数据 Mock
|
||||
export const mockBankStats: BankStats = {
|
||||
pendingAuditStore: 5,
|
||||
pendingAuditWithdraw: 12,
|
||||
todayApprovedCount: 8,
|
||||
totalLoanAmount: 12850000.00,
|
||||
activeCustomerCount: 156
|
||||
}
|
||||
|
||||
// 审核记录 Mock
|
||||
export const mockAuditList: AuditItem[] = [
|
||||
{
|
||||
id: 'W001',
|
||||
merchantId: 'M1001',
|
||||
merchantName: '广州酷玩玩具城',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 5000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 10:30:00',
|
||||
remark: '年终结算提现'
|
||||
},
|
||||
{
|
||||
id: 'W002',
|
||||
merchantId: 'M1002',
|
||||
merchantName: '深圳特粉专卖店',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 12800.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 09:15:00'
|
||||
},
|
||||
{
|
||||
id: 'C001',
|
||||
merchantId: 'M1003',
|
||||
merchantName: '珠海智悦贸易有限公司',
|
||||
type: AuditType.CREDIT,
|
||||
amount: 500000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-18 16:45:00',
|
||||
remark: '扩大经营，申请提高授信额度'
|
||||
}
|
||||
]
|
||||
|
||||
// 客户列表 Mock
|
||||
export const mockCustomerList: BankCustomer[] = [
|
||||
{
|
||||
id: 'C1001',
|
||||
merchantId: 'M1001',
|
||||
merchantName: '张三', // 模拟个人客户
|
||||
logo: '/static/tc/1.jpg',
|
||||
creditLimit: 500000.00,
|
||||
usedLimit: 125000.00,
|
||||
balance: 375000.00,
|
||||
status: 'normal',
|
||||
contactName: '张三',
|
||||
contactPhone: '138****8888',
|
||||
joinTime: '2024-05-20'
|
||||
},
|
||||
{
|
||||
id: 'C1002',
|
||||
merchantId: 'M1002',
|
||||
merchantName: '李四', // 模拟个人客户
|
||||
logo: '/static/tc/2.jpg',
|
||||
creditLimit: 200000.00,
|
||||
usedLimit: 180000.00,
|
||||
balance: 20000.00,
|
||||
status: 'warning',
|
||||
contactName: '李四',
|
||||
contactPhone: '139****9999',
|
||||
joinTime: '2024-06-15'
|
||||
},
|
||||
{
|
||||
id: 'C1003',
|
||||
merchantId: 'M1003',
|
||||
merchantName: '王五',
|
||||
logo: '/static/tc/3.jpg',
|
||||
creditLimit: 300000.00,
|
||||
usedLimit: 150000.00,
|
||||
balance: 150000.00,
|
||||
status: 'normal',
|
||||
contactName: '王五',
|
||||
contactPhone: '136****6666',
|
||||
joinTime: '2024-03-10'
|
||||
},
|
||||
{
|
||||
id: 'C1004',
|
||||
merchantId: 'M1004',
|
||||
merchantName: '赵六',
|
||||
logo: '/static/tc/4.jpg',
|
||||
creditLimit: 150000.00,
|
||||
usedLimit: 145000.00,
|
||||
balance: 5000.00,
|
||||
status: 'warning',
|
||||
contactName: '赵六',
|
||||
contactPhone: '137****7777',
|
||||
joinTime: '2024-04-05'
|
||||
},
|
||||
{
|
||||
id: 'C1005',
|
||||
merchantId: 'M1005',
|
||||
merchantName: '孙七',
|
||||
logo: '/static/tc/1.jpg',
|
||||
creditLimit: 800000.00,
|
||||
usedLimit: 720000.00,
|
||||
balance: 80000.00,
|
||||
status: 'frozen',
|
||||
contactName: '孙七',
|
||||
contactPhone: '135****5555',
|
||||
joinTime: '2024-01-15'
|
||||
},
|
||||
{
|
||||
id: 'C1006',
|
||||
merchantId: 'M1006',
|
||||
merchantName: '周八',
|
||||
logo: '/static/tc/2.jpg',
|
||||
creditLimit: 250000.00,
|
||||
usedLimit: 50000.00,
|
||||
balance: 200000.00,
|
||||
status: 'normal',
|
||||
contactName: '周八',
|
||||
contactPhone: '134****4444',
|
||||
joinTime: '2024-07-20'
|
||||
},
|
||||
{
|
||||
id: 'C1007',
|
||||
merchantId: 'M1007',
|
||||
merchantName: '吴九',
|
||||
logo: '/static/tc/3.jpg',
|
||||
creditLimit: 400000.00,
|
||||
usedLimit: 380000.00,
|
||||
balance: 20000.00,
|
||||
status: 'warning',
|
||||
contactName: '吴九',
|
||||
contactPhone: '133****3333',
|
||||
joinTime: '2024-02-28'
|
||||
},
|
||||
{
|
||||
id: 'C1008',
|
||||
merchantId: 'M1008',
|
||||
merchantName: '郑十',
|
||||
logo: '/static/tc/4.jpg',
|
||||
creditLimit: 600000.00,
|
||||
usedLimit: 180000.00,
|
||||
balance: 420000.00,
|
||||
status: 'normal',
|
||||
contactName: '郑十',
|
||||
contactPhone: '132****2222',
|
||||
joinTime: '2024-05-12'
|
||||
},
|
||||
{
|
||||
id: 'C1009',
|
||||
merchantId: 'M1009',
|
||||
merchantName: '钱十一',
|
||||
logo: '/static/tc/1.jpg',
|
||||
creditLimit: 350000.00,
|
||||
usedLimit: 340000.00,
|
||||
balance: 10000.00,
|
||||
status: 'warning',
|
||||
contactName: '钱十一',
|
||||
contactPhone: '131****1111',
|
||||
joinTime: '2024-06-30'
|
||||
},
|
||||
{
|
||||
id: 'C1010',
|
||||
merchantId: 'M1010',
|
||||
merchantName: '陈十二',
|
||||
logo: '/static/tc/2.jpg',
|
||||
creditLimit: 1000000.00,
|
||||
usedLimit: 850000.00,
|
||||
balance: 150000.00,
|
||||
status: 'frozen',
|
||||
contactName: '陈十二',
|
||||
contactPhone: '130****0000',
|
||||
joinTime: '2024-01-08'
|
||||
},
|
||||
{
|
||||
id: 'C1011',
|
||||
merchantId: 'M1011',
|
||||
merchantName: '林十三',
|
||||
logo: '/static/tc/3.jpg',
|
||||
creditLimit: 280000.00,
|
||||
usedLimit: 56000.00,
|
||||
balance: 224000.00,
|
||||
status: 'normal',
|
||||
contactName: '林十三',
|
||||
contactPhone: '158****8888',
|
||||
joinTime: '2024-08-15'
|
||||
},
|
||||
{
|
||||
id: 'C1012',
|
||||
merchantId: 'M1012',
|
||||
merchantName: '黄十四',
|
||||
logo: '/static/tc/4.jpg',
|
||||
creditLimit: 450000.00,
|
||||
usedLimit: 400000.00,
|
||||
balance: 50000.00,
|
||||
status: 'warning',
|
||||
contactName: '黄十四',
|
||||
contactPhone: '159****9999',
|
||||
joinTime: '2024-03-22'
|
||||
},
|
||||
{
|
||||
id: 'C1013',
|
||||
merchantId: 'M1013',
|
||||
merchantName: '杨十五',
|
||||
logo: '/static/tc/1.jpg',
|
||||
creditLimit: 550000.00,
|
||||
usedLimit: 110000.00,
|
||||
balance: 440000.00,
|
||||
status: 'normal',
|
||||
contactName: '杨十五',
|
||||
contactPhone: '156****6666',
|
||||
joinTime: '2024-04-18'
|
||||
},
|
||||
{
|
||||
id: 'C1014',
|
||||
merchantId: 'M1014',
|
||||
merchantName: '朱十六',
|
||||
logo: '/static/tc/2.jpg',
|
||||
creditLimit: 180000.00,
|
||||
usedLimit: 162000.00,
|
||||
balance: 18000.00,
|
||||
status: 'warning',
|
||||
contactName: '朱十六',
|
||||
contactPhone: '157****7777',
|
||||
joinTime: '2024-07-05'
|
||||
}
|
||||
]
|
||||
|
||||
// 审核详情 Mock
|
||||
export function getMockWithdrawDetail(id: string): WithdrawAuditDetail {
|
||||
return {
|
||||
id,
|
||||
merchantId: 'M1001',
|
||||
merchantName: '广州酷玩玩具城',
|
||||
type: AuditType.WITHDRAW,
|
||||
amount: 5000.00,
|
||||
status: AuditStatus.PENDING,
|
||||
applyTime: '2024-12-19 10:30:00',
|
||||
bankName: '中国工商银行',
|
||||
bankAccount: '6222 **** **** 8888',
|
||||
memberLevel: 'V3',
|
||||
transactionCount: 156,
|
||||
remark: '年终结算提现'
|
||||
}
|
||||
}
|
||||
|
||||
// 交易流水 Mock
|
||||
export const mockTransactions = [
|
||||
{ id: 'T001', type: 'income', amount: 500.00, time: '2024-12-19 14:30', title: '商品销售收入-订单#1001' },
|
||||
{ id: 'T002', type: 'expend', amount: 200.00, time: '2024-12-19 12:00', title: '退款支出-订单#0998' },
|
||||
{ id: 'T003', type: 'income', amount: 1200.00, time: '2024-12-18 18:20', title: '商品销售收入-订单#0999' },
|
||||
{ id: 'T004', type: 'withdraw', amount: 5000.00, time: '2024-12-18 10:00', title: '提现申请' },
|
||||
{ id: 'T005', type: 'income', amount: 350.50, time: '2024-12-17 15:45', title: '商品销售收入-订单#0997' },
|
||||
]
|
||||
|
||||
// 提现记录 Mock (复用 AuditItem 结构部分字段或定义新结构，这里简化复用)
|
||||
export const mockWithdrawHistory = [
|
||||
{ id: 'W001', amount: 5000.00, status: AuditStatus.PENDING, time: '2024-12-19 10:30', bank: '工商银行(8888)' },
|
||||
{ id: 'W005', amount: 10000.00, status: AuditStatus.APPROVED, time: '2024-12-01 09:00', bank: '工商银行(8888)' },
|
||||
{ id: 'W008', amount: 2000.00, status: AuditStatus.REJECTED, time: '2024-11-20 16:20', bank: '工商银行(8888)', reason: '账户信息有误' },
|
||||
]
|
||||
|
||||
// 营销产品 Mock
|
||||
export const mockMarketingProducts: MarketingProduct[] = [
|
||||
{ id: 'P001', name: '公司理财', type: 'credit' },
|
||||
{ id: 'P002', name: '公司贷款', type: 'loan' },
|
||||
{ id: 'P003', name: '信用卡', type: 'credit' },
|
||||
{ id: 'P004', name: '结算服务', type: 'settlement' },
|
||||
{ id: 'P005', name: '企业网银', type: 'other' },
|
||||
]
|
||||
|
||||
// 拜访计划 Mock
|
||||
export const mockVisitPlans: VisitPlan[] = [
|
||||
{
|
||||
id: 'V001',
|
||||
customerId: 'C1001',
|
||||
customerName: '张三',
|
||||
date: '2025-12-26',
|
||||
location: '',
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
products: [
|
||||
{ id: 'P001', name: '公司理财', type: 'credit' },
|
||||
{ id: 'P002', name: '公司贷款', type: 'loan' }
|
||||
],
|
||||
topic: '推广公司理财和贷款产品',
|
||||
remark: '客户对理财产品感兴趣，需要详细介绍',
|
||||
photos: [],
|
||||
status: VisitStatus.PENDING,
|
||||
createdAt: '2025-12-25 10:00:00',
|
||||
updatedAt: '2025-12-25 10:00:00'
|
||||
},
|
||||
{
|
||||
id: 'V002',
|
||||
customerId: 'C1002',
|
||||
customerName: '李四',
|
||||
date: '2025-12-24',
|
||||
location: '广东省茂名市',
|
||||
latitude: 21.6630,
|
||||
longitude: 110.9250,
|
||||
products: [
|
||||
{ id: 'P003', name: '信用卡', type: 'credit' }
|
||||
],
|
||||
topic: '信用卡业务推广',
|
||||
remark: '客户已有信用卡，考虑升级',
|
||||
photos: ['/static/images/visit2.jpg', '/static/images/visit3.jpg'],
|
||||
status: VisitStatus.COMPLETED,
|
||||
createdAt: '2025-12-23 15:30:00',
|
||||
updatedAt: '2025-12-24 18:00:00'
|
||||
},
|
||||
{
|
||||
id: 'V003',
|
||||
customerId: 'C1001',
|
||||
customerName: '张三',
|
||||
date: '2025-12-20',
|
||||
location: '',
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
products: [],
|
||||
topic: '客户回访',
|
||||
remark: '因客户临时有事，拜访取消',
|
||||
photos: [],
|
||||
status: VisitStatus.CANCELLED,
|
||||
createdAt: '2025-12-19 09:00:00',
|
||||
updatedAt: '2025-12-20 10:00:00'
|
||||
}
|
||||
]
|
||||
119
src/pagesBank/mock/report.ts
Normal file
119
src/pagesBank/mock/report.ts
Normal file
@@ -0,0 +1,119 @@
|
||||
import type { ReportType } from '@/typings/bank'
|
||||
import { ReportCategory } from '@/typings/bank'
|
||||
|
||||
/** 报表列表 Mock 数据 */
|
||||
export const mockReportList: ReportType[] = [
|
||||
// 多维统计
|
||||
{
|
||||
id: 'R001',
|
||||
name: '按支行统计',
|
||||
category: ReportCategory.MULTI_DIMENSION
|
||||
},
|
||||
{
|
||||
id: 'R002',
|
||||
name: '按网点统计',
|
||||
category: ReportCategory.MULTI_DIMENSION
|
||||
},
|
||||
{
|
||||
id: 'R003',
|
||||
name: '按部门统计',
|
||||
category: ReportCategory.MULTI_DIMENSION
|
||||
},
|
||||
{
|
||||
id: 'R004',
|
||||
name: '按人员统计',
|
||||
category: ReportCategory.MULTI_DIMENSION
|
||||
},
|
||||
{
|
||||
id: 'R005',
|
||||
name: '按客户统计',
|
||||
category: ReportCategory.MULTI_DIMENSION
|
||||
},
|
||||
// 访客报表
|
||||
{
|
||||
id: 'R006',
|
||||
name: '支行访客报表',
|
||||
category: ReportCategory.VISITOR
|
||||
},
|
||||
{
|
||||
id: 'R007',
|
||||
name: '网点访客报表',
|
||||
category: ReportCategory.VISITOR
|
||||
},
|
||||
{
|
||||
id: 'R008',
|
||||
name: '人员访客报表',
|
||||
category: ReportCategory.VISITOR
|
||||
},
|
||||
// 营销报表
|
||||
{
|
||||
id: 'R009',
|
||||
name: '小额贷业绩报表',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
{
|
||||
id: 'R010',
|
||||
name: '小额贷营销汇总',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
{
|
||||
id: 'R011',
|
||||
name: '消费贷营销报表',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
{
|
||||
id: 'R012',
|
||||
name: '三农部支行汇总',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
{
|
||||
id: 'R013',
|
||||
name: '三农部营销报表',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
{
|
||||
id: 'R014',
|
||||
name: '公司部营销汇总表',
|
||||
category: ReportCategory.MARKETING
|
||||
},
|
||||
// 权益管理
|
||||
{
|
||||
id: 'R015',
|
||||
name: '我赠送的记录',
|
||||
category: ReportCategory.BENEFIT
|
||||
},
|
||||
{
|
||||
id: 'R016',
|
||||
name: '全员赠送记录',
|
||||
category: ReportCategory.BENEFIT
|
||||
},
|
||||
{
|
||||
id: 'R017',
|
||||
name: '权益二维码',
|
||||
category: ReportCategory.BENEFIT
|
||||
}
|
||||
]
|
||||
|
||||
/** 报表分类信息 */
|
||||
export const reportCategoryInfo = {
|
||||
[ReportCategory.MULTI_DIMENSION]: {
|
||||
name: '多维统计',
|
||||
icon: 'i-carbon-chart-cluster-bar',
|
||||
color: '#00c05a'
|
||||
},
|
||||
[ReportCategory.VISITOR]: {
|
||||
name: '访客报表',
|
||||
icon: 'i-carbon-user-multiple',
|
||||
color: '#4d80f0'
|
||||
},
|
||||
[ReportCategory.MARKETING]: {
|
||||
name: '营销报表',
|
||||
icon: 'i-carbon-ibm-watson-natural-language-understanding',
|
||||
color: '#ff8f0d'
|
||||
},
|
||||
[ReportCategory.BENEFIT]: {
|
||||
name: '权益管理',
|
||||
icon: 'i-carbon-gift',
|
||||
color: '#fa4350'
|
||||
}
|
||||
}
|
||||
461
src/pagesBank/report/download.vue
Normal file
461
src/pagesBank/report/download.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<script lang="ts" setup>
|
||||
import { downloadReport } from '@/pagesBank/api'
|
||||
import { DateDimension } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '报表下载',
|
||||
},
|
||||
})
|
||||
|
||||
// 从路由参数获取报表信息
|
||||
const reportId = ref('')
|
||||
const reportName = ref('')
|
||||
|
||||
// 日期维度选项
|
||||
const dimensionOptions = [
|
||||
{ label: '按日', value: DateDimension.DAY },
|
||||
{ label: '按月', value: DateDimension.MONTH },
|
||||
{ label: '按季', value: DateDimension.QUARTER },
|
||||
{ label: '自定义', value: DateDimension.CUSTOM },
|
||||
]
|
||||
|
||||
// 当前选中的日期维度
|
||||
const activeDimension = ref(DateDimension.DAY)
|
||||
|
||||
// 当前选中的日期
|
||||
const selectedDate = ref('2025-12-25')
|
||||
|
||||
// 日期选择器显示状态
|
||||
const showDatePicker = ref(false)
|
||||
|
||||
// 下载中状态
|
||||
const downloading = ref(false)
|
||||
|
||||
// 获取日期维度标签
|
||||
function getDimensionLabel(dimension: DateDimension) {
|
||||
const option = dimensionOptions.find(opt => opt.value === dimension)
|
||||
return option?.label || ''
|
||||
}
|
||||
|
||||
// 切换日期维度
|
||||
function handleDimensionChange(dimension: DateDimension) {
|
||||
activeDimension.value = dimension
|
||||
// 根据维度更新默认日期
|
||||
updateDefaultDate(dimension)
|
||||
}
|
||||
|
||||
// 根据维度更新默认日期
|
||||
function updateDefaultDate(dimension: DateDimension) {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(now.getDate()).padStart(2, '0')
|
||||
|
||||
switch (dimension) {
|
||||
case DateDimension.DAY:
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
break
|
||||
case DateDimension.MONTH:
|
||||
selectedDate.value = `${year}-${month}`
|
||||
break
|
||||
case DateDimension.QUARTER:
|
||||
const quarter = Math.floor(now.getMonth() / 3) + 1
|
||||
selectedDate.value = `${year}-Q${quarter}`
|
||||
break
|
||||
case DateDimension.CUSTOM:
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// 显示日期选择器
|
||||
function showDateSelector() {
|
||||
showDatePicker.value = true
|
||||
}
|
||||
|
||||
// 日期选择确认
|
||||
function handleDateConfirm(e: any) {
|
||||
const { value } = e
|
||||
const date = new Date(value)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
if (activeDimension.value === DateDimension.MONTH) {
|
||||
selectedDate.value = `${year}-${month}`
|
||||
} else {
|
||||
selectedDate.value = `${year}-${month}-${day}`
|
||||
}
|
||||
|
||||
showDatePicker.value = false
|
||||
}
|
||||
|
||||
// 下载报表
|
||||
async function handleDownload() {
|
||||
if (downloading.value) return
|
||||
|
||||
downloading.value = true
|
||||
try {
|
||||
await downloadReport({
|
||||
reportId: reportId.value,
|
||||
dimension: activeDimension.value,
|
||||
date: selectedDate.value
|
||||
})
|
||||
|
||||
uni.showToast({
|
||||
title: '下载成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
downloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (options.reportId) {
|
||||
reportId.value = options.reportId
|
||||
}
|
||||
if (options.reportName) {
|
||||
reportName.value = decodeURIComponent(options.reportName)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="download-page">
|
||||
<!-- 报表信息卡片 -->
|
||||
<view class="report-info-card">
|
||||
<view class="report-icon">
|
||||
<text class="i-carbon-document"></text>
|
||||
</view>
|
||||
<view class="report-details">
|
||||
<text class="report-name">{{ reportName }}</text>
|
||||
<text class="report-id">报表编号: {{ reportId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期维度筛选 -->
|
||||
<view class="dimension-section">
|
||||
<view class="section-title">选择日期维度</view>
|
||||
<view class="dimension-tabs">
|
||||
<view
|
||||
v-for="option in dimensionOptions"
|
||||
:key="option.value"
|
||||
class="dimension-tab"
|
||||
:class="{ active: activeDimension === option.value }"
|
||||
@click="handleDimensionChange(option.value)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择 -->
|
||||
<view class="date-section">
|
||||
<view class="section-title">选择日期</view>
|
||||
<view class="date-picker" @click="showDateSelector">
|
||||
<view class="date-display">
|
||||
<text class="i-carbon-calendar"></text>
|
||||
<text class="date-value">{{ selectedDate }}</text>
|
||||
</view>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 下载区域 -->
|
||||
<view class="download-section">
|
||||
<view class="format-tag">EXCEL</view>
|
||||
<button
|
||||
class="download-btn"
|
||||
:class="{ loading: downloading }"
|
||||
:disabled="downloading"
|
||||
@click="handleDownload"
|
||||
>
|
||||
<text v-if="downloading" class="i-carbon-circle-dash loading-icon"></text>
|
||||
<text>{{ downloading ? '下载中...' : '点击下载' }}</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 使用帮助 -->
|
||||
<view class="help-section">
|
||||
<view class="help-title">
|
||||
<text class="i-carbon-help"></text>
|
||||
<text>Excel格式: 使用帮助</text>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<view class="help-item">
|
||||
<text class="help-number">1</text>
|
||||
<text class="help-text">选择要下载报表的日期</text>
|
||||
</view>
|
||||
<view class="help-item">
|
||||
<text class="help-number">2</text>
|
||||
<text class="help-text">点击下载按钮进行下载</text>
|
||||
</view>
|
||||
<view class="help-item">
|
||||
<text class="help-number">3</text>
|
||||
<text class="help-text">下载后自动打开文件，可以点击手机右上角的【...】进行转发或保存文件</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器弹窗 -->
|
||||
<wd-datetime-picker
|
||||
v-model="selectedDate"
|
||||
v-model:show="showDatePicker"
|
||||
type="date"
|
||||
@confirm="handleDateConfirm"
|
||||
@cancel="showDatePicker = false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.download-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.report-info-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.report-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 48rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.report-details {
|
||||
flex: 1;
|
||||
|
||||
.report-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.report-id {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dimension-section,
|
||||
.date-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.dimension-tabs {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.dimension-tab {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.date-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 36rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
|
||||
.download-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30rpx;
|
||||
|
||||
.format-tag {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active:not(:disabled) {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
font-size: 32rpx;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.help-section {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.help-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 32rpx;
|
||||
color: #4d80f0;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.help-content {
|
||||
.help-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.help-number {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #4d80f0;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
217
src/pagesBank/report/list.vue
Normal file
217
src/pagesBank/report/list.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<script lang="ts" setup>
|
||||
import { getReportList } from '@/pagesBank/api'
|
||||
import type { ReportType } from '@/typings/bank'
|
||||
import { ReportCategory } from '@/typings/bank'
|
||||
import { reportCategoryInfo } from '@/pagesBank/mock'
|
||||
// i-carbon-chart-cluster-bar
|
||||
// i-carbon-user-multiple
|
||||
// i-carbon-ibm-watson-natural-language-understanding
|
||||
// i-carbon-gift
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '报表下载',
|
||||
},
|
||||
})
|
||||
|
||||
const reports = ref<ReportType[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 按分类分组报表
|
||||
const groupedReports = computed(() => {
|
||||
const groups: Record<string, ReportType[]> = {}
|
||||
reports.value.forEach(report => {
|
||||
if (!groups[report.category]) {
|
||||
groups[report.category] = []
|
||||
}
|
||||
groups[report.category].push(report)
|
||||
})
|
||||
return groups
|
||||
})
|
||||
|
||||
// 获取分类信息
|
||||
function getCategoryInfo(category: ReportCategory) {
|
||||
return reportCategoryInfo[category] || { name: '未知', icon: '', color: '#999' }
|
||||
}
|
||||
|
||||
// 点击报表跳转到下载页
|
||||
function handleReportClick(report: ReportType) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesBank/report/download?reportId=${report.id}&reportName=${encodeURIComponent(report.name)}`
|
||||
})
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getReportList()
|
||||
reports.value = res
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="report-list-page">
|
||||
<view v-if="loading && reports.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="report-container">
|
||||
<view
|
||||
v-for="(groupReports, category) in groupedReports"
|
||||
:key="category"
|
||||
class="report-category"
|
||||
>
|
||||
<view class="category-header">
|
||||
<view class="category-info">
|
||||
<text :class="['category-icon', getCategoryInfo(category as ReportCategory).icon]"></text>
|
||||
<text class="category-name">{{ getCategoryInfo(category as ReportCategory).name }}</text>
|
||||
</view>
|
||||
<view class="category-count">{{ groupReports.length }} 个报表</view>
|
||||
</view>
|
||||
|
||||
<view class="report-grid">
|
||||
<view
|
||||
v-for="report in groupReports"
|
||||
:key="report.id"
|
||||
class="report-item"
|
||||
@click="handleReportClick(report)"
|
||||
>
|
||||
<view class="report-icon">
|
||||
<text :class="getCategoryInfo(report.category).icon"></text>
|
||||
</view>
|
||||
<text class="report-name">{{ report.name }}</text>
|
||||
<view class="report-arrow">
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.report-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.report-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.report-category {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.category-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.category-icon {
|
||||
font-size: 36rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.category-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.report-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.report-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
position: relative;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
background: #e9ecef;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.report-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
.report-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.report-arrow {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
507
src/pagesBank/visit/create.vue
Normal file
507
src/pagesBank/visit/create.vue
Normal file
@@ -0,0 +1,507 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCustomerList, getMarketingProducts, createVisitPlan } from '@/pagesBank/api'
|
||||
import type { BankCustomer, MarketingProduct } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '创建拜访计划',
|
||||
},
|
||||
})
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
date: '',
|
||||
customerId: '',
|
||||
customerName: '',
|
||||
productIds: [] as string[],
|
||||
topic: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// 客户列表
|
||||
const customers = ref<BankCustomer[]>([])
|
||||
const showCustomerPicker = ref(false)
|
||||
|
||||
// 营销产品列表
|
||||
const products = ref<MarketingProduct[]>([])
|
||||
const showProductPicker = ref(false)
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
const submitting = ref(false)
|
||||
|
||||
// 加载客户列表
|
||||
async function loadCustomers() {
|
||||
try {
|
||||
const res = await getCustomerList({
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
})
|
||||
customers.value = res.list
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '加载客户列表失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
// 加载营销产品列表
|
||||
async function loadProducts() {
|
||||
try {
|
||||
products.value = await getMarketingProducts()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '加载产品列表失败', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
// 选择客户
|
||||
function handleSelectCustomer(customer: BankCustomer) {
|
||||
formData.value.customerId = customer.id
|
||||
formData.value.customerName = customer.merchantName
|
||||
showCustomerPicker.value = false
|
||||
}
|
||||
|
||||
// 选择营销产品
|
||||
function toggleProduct(productId: string) {
|
||||
const index = formData.value.productIds.indexOf(productId)
|
||||
if (index > -1) {
|
||||
formData.value.productIds.splice(index, 1)
|
||||
} else {
|
||||
formData.value.productIds.push(productId)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取产品名称
|
||||
function getProductName(productId: string): string {
|
||||
const product = products.value.find(p => p.id === productId)
|
||||
return product?.name || ''
|
||||
}
|
||||
|
||||
// 移除产品
|
||||
function removeProduct(productId: string) {
|
||||
const index = formData.value.productIds.indexOf(productId)
|
||||
if (index > -1) {
|
||||
formData.value.productIds.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
// 表单验证
|
||||
function validateForm(): boolean {
|
||||
if (!formData.value.date) {
|
||||
uni.showToast({ title: '请选择拜访日期', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (!formData.value.customerId) {
|
||||
uni.showToast({ title: '请选择客户', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
if (!formData.value.topic) {
|
||||
uni.showToast({ title: '请输入拜访主题', icon: 'none' })
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
async function handleSubmit() {
|
||||
if (!validateForm()) return
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await createVisitPlan({
|
||||
customerId: formData.value.customerId,
|
||||
date: formData.value.date,
|
||||
productIds: formData.value.productIds,
|
||||
topic: formData.value.topic,
|
||||
remark: formData.value.remark || undefined
|
||||
})
|
||||
uni.showToast({ title: '创建成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '创建失败，请重试', icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 获取选中的产品名称
|
||||
function getSelectedProductNames(): string {
|
||||
const selected = products.value.filter(p => formData.value.productIds.includes(p.id))
|
||||
return selected.map(p => p.name).join('、')
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.customerId) {
|
||||
formData.value.customerId = options.customerId
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
loadCustomers()
|
||||
loadProducts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="visit-create-page">
|
||||
<view class="form-container">
|
||||
<!-- 日期选择 -->
|
||||
<view class="form-item">
|
||||
<view class="label required">日期</view>
|
||||
<wd-datetime-picker
|
||||
v-model="formData.date"
|
||||
type="date"
|
||||
:min-date="Date.now()"
|
||||
placeholder="请选择拜访日期"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 客户选择 -->
|
||||
<view class="form-item" @click="showCustomerPicker = true">
|
||||
<view class="label required">选择客户</view>
|
||||
<view class="value-input">
|
||||
<text :class="{ placeholder: !formData.customerName }">
|
||||
{{ formData.customerName || '请选择' }}
|
||||
</text>
|
||||
<text class="i-carbon-chevron-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 营销产品 -->
|
||||
<view class="form-item">
|
||||
<view class="label">营销产品</view>
|
||||
<view class="product-tags-container" @click="showProductPicker = true">
|
||||
<view v-if="formData.productIds.length === 0" class="placeholder">请选择</view>
|
||||
<view v-else class="product-tags">
|
||||
<view
|
||||
v-for="productId in formData.productIds"
|
||||
:key="productId"
|
||||
class="product-tag"
|
||||
@click.stop="removeProduct(productId)"
|
||||
>
|
||||
<text class="tag-name">{{ getProductName(productId) }}</text>
|
||||
<text class="tag-close i-carbon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="i-carbon-chevron-right picker-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拜访主题 -->
|
||||
<view class="form-item">
|
||||
<view class="label required">拜访主题</view>
|
||||
<input
|
||||
v-model="formData.topic"
|
||||
placeholder="主题、议题或活动等"
|
||||
class="input"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 备注 -->
|
||||
<view class="form-item">
|
||||
<view class="label">备注</view>
|
||||
<textarea
|
||||
v-model="formData.remark"
|
||||
placeholder="本次拜访的备注内容"
|
||||
class="textarea"
|
||||
:maxlength="500"
|
||||
/>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-section">
|
||||
<button class="submit-btn" :disabled="submitting" @click="handleSubmit">
|
||||
{{ submitting ? '提交中...' : '保存拜访计划' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 客户选择弹窗 -->
|
||||
<wd-popup v-model="showCustomerPicker" position="bottom" :close-on-click-modal="false">
|
||||
<view class="customer-picker">
|
||||
<view class="picker-header">
|
||||
<text class="cancel" @click="showCustomerPicker = false">取消</text>
|
||||
<text class="title">选择客户</text>
|
||||
<text class="confirm" @click="showCustomerPicker = false">确定</text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="customer-list">
|
||||
<view
|
||||
v-for="customer in customers"
|
||||
:key="customer.id"
|
||||
class="customer-item"
|
||||
:class="{ active: formData.customerId === customer.id }"
|
||||
@click="handleSelectCustomer(customer)"
|
||||
>
|
||||
<view class="customer-info">
|
||||
<text class="name">{{ customer.merchantName }}</text>
|
||||
<text class="contact">{{ customer.contactName }} {{ customer.contactPhone }}</text>
|
||||
</view>
|
||||
<text v-if="formData.customerId === customer.id" class="i-carbon-checkmark-filled"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 产品选择弹窗 -->
|
||||
<wd-popup v-model="showProductPicker" position="bottom" :close-on-click-modal="false">
|
||||
<view class="product-picker">
|
||||
<view class="picker-header">
|
||||
<text class="cancel" @click="showProductPicker = false">取消</text>
|
||||
<text class="title">选择营销产品</text>
|
||||
<text class="confirm" @click="showProductPicker = false">确定</text>
|
||||
</view>
|
||||
<scroll-view scroll-y class="product-list">
|
||||
<view
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
class="product-item"
|
||||
:class="{ active: formData.productIds.includes(product.id) }"
|
||||
@click="toggleProduct(product.id)"
|
||||
>
|
||||
<text class="name">{{ product.name }}</text>
|
||||
<text v-if="formData.productIds.includes(product.id)" class="i-carbon-checkmark-filled"></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit-create-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.form-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
|
||||
&.required::before {
|
||||
content: '*';
|
||||
color: #fa4350;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.value-input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
|
||||
.placeholder {
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
color: #adb5bd;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.product-tags-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 40rpx;
|
||||
|
||||
.placeholder {
|
||||
color: #adb5bd;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.product-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%);
|
||||
border: 1rpx solid #bae7ff;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
color: #0050b3;
|
||||
|
||||
.tag-name {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.tag-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 80, 179, 0.1);
|
||||
color: #0050b3;
|
||||
font-size: 20rpx;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:active {
|
||||
background: rgba(0, 80, 179, 0.2);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker-icon {
|
||||
color: #adb5bd;
|
||||
font-size: 32rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 24rpx 30rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 44rpx;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customer-picker,
|
||||
.product-picker {
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
max-height: 70vh;
|
||||
|
||||
.picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.cancel,
|
||||
.confirm {
|
||||
font-size: 28rpx;
|
||||
color: #4d80f0;
|
||||
padding: 8rpx 16rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-list,
|
||||
.product-list {
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
.customer-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 192, 90, 0.05);
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
flex: 1;
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.contact {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 40rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
|
||||
&.active {
|
||||
background: rgba(0, 192, 90, 0.05);
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 40rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
996
src/pagesBank/visit/detail.vue
Normal file
996
src/pagesBank/visit/detail.vue
Normal file
@@ -0,0 +1,996 @@
|
||||
<script lang="ts" setup>
|
||||
import { getVisitPlanDetail, updateVisitPlan, updateVisitStatus, deleteVisitPlan } from '@/pagesBank/api'
|
||||
import type { VisitPlan } from '@/typings/bank'
|
||||
import { VisitStatus } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '拜访计划详情',
|
||||
},
|
||||
})
|
||||
|
||||
const id = ref('')
|
||||
const detail = ref<VisitPlan | null>(null)
|
||||
const loading = ref(false)
|
||||
const editing = ref(false)
|
||||
const completing = ref(false)
|
||||
|
||||
// 编辑表单数据
|
||||
const editForm = ref({
|
||||
date: '',
|
||||
topic: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
// 完成表单数据
|
||||
const completeForm = ref({
|
||||
location: '广东省茂名市',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
photos: [] as string[]
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getVisitPlanDetail(id.value)
|
||||
detail.value = res
|
||||
if (res) {
|
||||
editForm.value = {
|
||||
date: res.date,
|
||||
topic: res.topic,
|
||||
remark: res.remark || ''
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleEdit() {
|
||||
editing.value = true
|
||||
}
|
||||
|
||||
function handleCancelEdit() {
|
||||
editing.value = false
|
||||
if (detail.value) {
|
||||
editForm.value = {
|
||||
date: detail.value.date,
|
||||
topic: detail.value.topic,
|
||||
remark: detail.value.remark || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveEdit() {
|
||||
if (!editForm.value.topic) {
|
||||
uni.showToast({ title: '请输入拜访主题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '保存中...' })
|
||||
try {
|
||||
await updateVisitPlan(id.value, {
|
||||
date: editForm.value.date,
|
||||
topic: editForm.value.topic,
|
||||
remark: editForm.value.remark
|
||||
})
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
editing.value = false
|
||||
loadDetail()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
function handleUpdateStatus(status: VisitStatus) {
|
||||
const statusText = {
|
||||
[VisitStatus.PENDING]: '待拜访',
|
||||
[VisitStatus.COMPLETED]: '已完成',
|
||||
[VisitStatus.CANCELLED]: '已取消'
|
||||
}
|
||||
|
||||
// 标记完成时需要填写位置和上传照片
|
||||
if (status === VisitStatus.COMPLETED) {
|
||||
completing.value = true
|
||||
return
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '状态确认',
|
||||
content: `确定将拜访计划状态更新为"${statusText[status]}"吗？`,
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '更新中...' })
|
||||
try {
|
||||
await updateVisitStatus(id.value, status)
|
||||
uni.showToast({ title: '更新成功', icon: 'success' })
|
||||
loadDetail()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '更新失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取位置
|
||||
function handleGetLocation() {
|
||||
uni.getLocation({
|
||||
type: 'gcj02',
|
||||
success: (res) => {
|
||||
completeForm.value.latitude = res.latitude
|
||||
completeForm.value.longitude = res.longitude
|
||||
// 这里可以调用逆地理编码获取地址，简化处理直接显示坐标
|
||||
completeForm.value.location = `${res.latitude.toFixed(6)}, ${res.longitude.toFixed(6)}`
|
||||
uni.showToast({ title: '定位成功', icon: 'success' })
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '定位失败，请手动输入', icon: 'none' })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 上传图片
|
||||
function handleUploadImage() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['拍照', '从相册选择'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
chooseImage('camera')
|
||||
} else if (res.tapIndex === 1) {
|
||||
chooseImage('album')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function chooseImage(sourceType: 'camera' | 'album') {
|
||||
uni.chooseImage({
|
||||
count: 9 - completeForm.value.photos.length,
|
||||
sourceType: [sourceType],
|
||||
success: (res) => {
|
||||
const paths = Array.isArray(res.tempFilePaths) ? res.tempFilePaths : [res.tempFilePaths]
|
||||
completeForm.value.photos.push(...paths)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 删除图片
|
||||
function handleRemoveImage(index: number) {
|
||||
completeForm.value.photos.splice(index, 1)
|
||||
}
|
||||
|
||||
// 预览完成表单图片
|
||||
function handlePreviewCompleteImage(index: number) {
|
||||
uni.previewImage({
|
||||
urls: completeForm.value.photos,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
|
||||
// 取消完成
|
||||
function handleCancelComplete() {
|
||||
completing.value = false
|
||||
completeForm.value = {
|
||||
location: '广东省茂名市',
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
photos: []
|
||||
}
|
||||
}
|
||||
|
||||
// 提交完成
|
||||
async function handleSubmitComplete() {
|
||||
if (!completeForm.value.location) {
|
||||
uni.showToast({ title: '请输入或定位位置', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (completeForm.value.photos.length === 0) {
|
||||
uni.showToast({ title: '请上传拜访场景图', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '更新中...' })
|
||||
try {
|
||||
await updateVisitStatus(id.value, VisitStatus.COMPLETED, completeForm.value.location, completeForm.value.latitude || undefined, completeForm.value.longitude || undefined, completeForm.value.photos)
|
||||
uni.showToast({ title: '更新成功', icon: 'success' })
|
||||
completing.value = false
|
||||
loadDetail()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '更新失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content: '确定要删除这条拜访计划吗？删除后无法恢复。',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '删除中...' })
|
||||
try {
|
||||
await deleteVisitPlan(id.value)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 预览详情图片
|
||||
function handlePreviewImage(index: number) {
|
||||
if (detail.value?.photos) {
|
||||
uni.previewImage({
|
||||
urls: detail.value.photos,
|
||||
current: index
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
pending: { text: '待拜访', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
completed: { text: '已完成', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
cancelled: { text: '已取消', color: '#adb5bd', bgColor: 'rgba(173, 181, 189, 0.1)' },
|
||||
}
|
||||
return map[status] || { text: '未知', color: '#999', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const weekday = weekdays[date.getDay()]
|
||||
return `${year}年${month}月${day}日 周${weekday}`
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
id.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="visit-detail-page">
|
||||
<view v-if="loading" class="loading-box">加载中...</view>
|
||||
|
||||
<template v-else-if="detail">
|
||||
<!-- 头部状态卡片 -->
|
||||
<view class="header-card">
|
||||
<view class="date-badge">
|
||||
<text class="month">{{ new Date(detail.date).getMonth() + 1 }}月</text>
|
||||
<text class="day">{{ new Date(detail.date).getDate() }}</text>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="customer-name">{{ detail.customerName }}</text>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: getStatusInfo(detail.status).color, backgroundColor: getStatusInfo(detail.status).bgColor }"
|
||||
>
|
||||
{{ getStatusInfo(detail.status).text }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拜访信息 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="title">拜访信息</view>
|
||||
<view v-if="!editing" class="action-btn" @click="handleEdit">编辑</view>
|
||||
</view>
|
||||
|
||||
<view v-if="editing" class="edit-form">
|
||||
<view class="form-item">
|
||||
<view class="label">拜访日期</view>
|
||||
<wd-datetime-picker
|
||||
v-model="editForm.date"
|
||||
type="date"
|
||||
:min-date="Date.now()"
|
||||
placeholder="请选择拜访日期"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">拜访主题</view>
|
||||
<input
|
||||
v-model="editForm.topic"
|
||||
placeholder="请输入拜访主题"
|
||||
class="input"
|
||||
/>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="label">备注</view>
|
||||
<textarea
|
||||
v-model="editForm.remark"
|
||||
placeholder="请输入备注"
|
||||
class="textarea"
|
||||
:maxlength="500"
|
||||
/>
|
||||
</view>
|
||||
<view class="edit-actions">
|
||||
<button class="btn cancel" @click="handleCancelEdit">取消</button>
|
||||
<button class="btn save" @click="handleSaveEdit">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="info-content">
|
||||
<view class="info-row">
|
||||
<text class="label">拜访日期</text>
|
||||
<text class="value">{{ formatDate(detail.date) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="label">拜访主题</text>
|
||||
<text class="value">{{ detail.topic }}</text>
|
||||
</view>
|
||||
<view v-if="detail.remark" class="info-row">
|
||||
<text class="label">备注</text>
|
||||
<text class="value">{{ detail.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 位置信息 -->
|
||||
<view class="section">
|
||||
<view class="section-title">位置信息</view>
|
||||
<view class="info-row">
|
||||
<text class="i-carbon-location-filled"></text>
|
||||
<text class="value">{{ detail.location }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 营销产品 -->
|
||||
<view v-if="detail.products.length > 0" class="section">
|
||||
<view class="section-title">营销产品</view>
|
||||
<view class="products-list">
|
||||
<view
|
||||
v-for="product in detail.products"
|
||||
:key="product.id"
|
||||
class="product-tag"
|
||||
>
|
||||
{{ product.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拜访照片 -->
|
||||
<view v-if="detail.photos.length > 0" class="section">
|
||||
<view class="section-title">拜访照片</view>
|
||||
<view class="photos-grid">
|
||||
<image
|
||||
v-for="(photo, index) in detail.photos"
|
||||
:key="index"
|
||||
:src="photo"
|
||||
mode="aspectFill"
|
||||
class="photo"
|
||||
@click="handlePreviewImage(index)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="bottom-actions">
|
||||
<view
|
||||
v-if="detail.status === 'pending'"
|
||||
class="action-item success"
|
||||
@click="handleUpdateStatus(VisitStatus.COMPLETED)"
|
||||
>
|
||||
<text class="i-carbon-checkmark-filled"></text>
|
||||
标记完成
|
||||
</view>
|
||||
<view
|
||||
v-if="detail.status === 'pending'"
|
||||
class="action-item warning"
|
||||
@click="handleUpdateStatus(VisitStatus.CANCELLED)"
|
||||
>
|
||||
<text class="i-carbon-close"></text>
|
||||
取消拜访
|
||||
</view>
|
||||
<view class="action-item danger" @click="handleDelete">
|
||||
<text class="i-carbon-trash-can"></text>
|
||||
删除计划
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 完成表单弹窗 -->
|
||||
<wd-popup v-model="completing" position="bottom" :close-on-click-modal="false">
|
||||
<view class="complete-form">
|
||||
<view class="form-header">
|
||||
<text class="cancel" @click="handleCancelComplete">取消</text>
|
||||
<text class="title">标记拜访完成</text>
|
||||
<text class="confirm" @click="handleSubmitComplete">确定</text>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="form-content">
|
||||
<!-- 位置 -->
|
||||
<view class="form-item">
|
||||
<view class="label required">位置</view>
|
||||
<view class="location-input" style="display: flex; align-items: center; width: 100%; max-width: 100%; overflow: hidden;">
|
||||
<input
|
||||
v-model="completeForm.location"
|
||||
placeholder="请输入地址或点击定位"
|
||||
class="input"
|
||||
style="flex: 1; min-width: 0; box-sizing: border-box; overflow: hidden; max-width: 100%; width: 0;"
|
||||
/>
|
||||
<view class="location-btn" @click="handleGetLocation" style="flex-shrink: 0; width: 50rpx; height: 50rpx; margin-left: 10rpx; box-sizing: border-box;">
|
||||
<text class="i-carbon-location-filled"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<view class="form-item">
|
||||
<view class="label required">上传拜访场景图</view>
|
||||
<view class="upload-section">
|
||||
<view
|
||||
v-for="(photo, index) in completeForm.photos"
|
||||
:key="index"
|
||||
class="photo-item"
|
||||
>
|
||||
<image :src="photo" mode="aspectFill" @click="handlePreviewCompleteImage(index)" />
|
||||
<view class="delete-btn" @click="handleRemoveImage(index)">
|
||||
<text class="i-carbon-close"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="completeForm.photos.length < 9"
|
||||
class="upload-btn"
|
||||
@click="handleUploadImage"
|
||||
>
|
||||
<text class="i-carbon-camera"></text>
|
||||
<text>上传图片</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
.date-badge {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
.month {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.customer-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 600;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: #fff;
|
||||
margin: 24rpx 30rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 24rpx;
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
padding: 8rpx 20rpx;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
.form-item {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 160rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
|
||||
&.cancel {
|
||||
background: #f1f3f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.save {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-content {
|
||||
.info-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f8f9fa;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
text:first-child {
|
||||
font-size: 28rpx;
|
||||
color: #adb5bd;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.product-tag {
|
||||
padding: 12rpx 24rpx;
|
||||
background: rgba(0, 192, 90, 0.1);
|
||||
color: #00c05a;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16rpx;
|
||||
|
||||
.photo {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-actions {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 24rpx 30rpx;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-item {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background: linear-gradient(135deg, #fa4350 0%, #ff6b6b 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-box {
|
||||
padding: 100rpx;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.complete-form {
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
max-height: 80vh;
|
||||
width: 100%;
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.cancel,
|
||||
.confirm {
|
||||
font-size: 28rpx;
|
||||
color: #4d80f0;
|
||||
padding: 8rpx 16rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content {
|
||||
max-height: 70vh;
|
||||
padding: 24rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 32rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
|
||||
&.required::before {
|
||||
content: '*';
|
||||
color: #fa4350;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.location-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 550rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 80rpx;
|
||||
background: #f8f9fa;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.location-btn {
|
||||
flex-shrink: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.photo-item {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-btn {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx dashed #d0d7de;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
color: #adb5bd;
|
||||
|
||||
text:first-child {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
:deep(.wd-popup) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.wd-popup__content) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.wd-popup__wrapper) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.visit-complete-popup) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin: 0 auto !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.complete-form) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.form-content) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.location-input) {
|
||||
max-width: 750rpx !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:deep(.location-input .input) {
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
471
src/pagesBank/visit/list.vue
Normal file
471
src/pagesBank/visit/list.vue
Normal file
@@ -0,0 +1,471 @@
|
||||
<script lang="ts" setup>
|
||||
import { getVisitPlanList, deleteVisitPlan } from '@/pagesBank/api'
|
||||
import type { VisitPlan } from '@/typings/bank'
|
||||
import { VisitStatus } from '@/typings/bank'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '拜访计划',
|
||||
enablePullDownRefresh: true
|
||||
},
|
||||
})
|
||||
|
||||
const visitPlans = ref<VisitPlan[]>([])
|
||||
const loading = ref(false)
|
||||
const keyword = ref('')
|
||||
const activeStatus = ref('')
|
||||
const customerId = ref('')
|
||||
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '待拜访', value: 'pending' },
|
||||
{ label: '已完成', value: 'completed' },
|
||||
{ label: '已取消', value: 'cancelled' },
|
||||
]
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getVisitPlanList({
|
||||
status: activeStatus.value || undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
keyword: keyword.value
|
||||
})
|
||||
// 如果有客户ID筛选，过滤结果
|
||||
let list = res.list
|
||||
if (customerId.value) {
|
||||
list = list.filter(item => item.customerId === customerId.value)
|
||||
}
|
||||
visitPlans.value = list
|
||||
} finally {
|
||||
loading.value = false
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeStatus.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesBank/visit/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function handleDelete(id: string) {
|
||||
uni.showModal({
|
||||
title: '删除确认',
|
||||
content: '确定要删除这条拜访计划吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showLoading({ title: '删除中...' })
|
||||
try {
|
||||
await deleteVisitPlan(id)
|
||||
uni.showToast({ title: '删除成功', icon: 'success' })
|
||||
loadData()
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function getStatusInfo(status: string) {
|
||||
const map: Record<string, { text: string; color: string; bgColor: string }> = {
|
||||
pending: { text: '待拜访', color: '#ff8f0d', bgColor: 'rgba(255, 143, 13, 0.1)' },
|
||||
completed: { text: '已完成', color: '#00c05a', bgColor: 'rgba(0, 192, 90, 0.1)' },
|
||||
cancelled: { text: '已取消', color: '#adb5bd', bgColor: 'rgba(173, 181, 189, 0.1)' },
|
||||
}
|
||||
return map[status] || { text: '未知', color: '#999', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const date = new Date(dateStr)
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const weekday = weekdays[date.getDay()]
|
||||
return `${month}月${day}日 周${weekday}`
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="visit-list-page">
|
||||
<view class="sticky-header">
|
||||
<view class="search-bar">
|
||||
<view class="search-input">
|
||||
<text class="i-carbon-search"></text>
|
||||
<input
|
||||
v-model="keyword"
|
||||
placeholder="搜索客户/主题"
|
||||
confirm-type="search"
|
||||
@confirm="handleSearch"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeStatus === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view v-if="loading && visitPlans.length === 0" class="loading-state">
|
||||
<text>加载中...</text>
|
||||
</view>
|
||||
|
||||
<view v-else-if="visitPlans.length === 0" class="empty-state">
|
||||
<text class="i-carbon-calendar"></text>
|
||||
<text>暂无拜访计划</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-for="item in visitPlans"
|
||||
:key="item.id"
|
||||
class="visit-card"
|
||||
@click="handleDetail(item.id)"
|
||||
>
|
||||
<view class="card-header">
|
||||
<view class="date-badge">
|
||||
<text class="month">{{ new Date(item.date).getMonth() + 1 }}月</text>
|
||||
<text class="day">{{ new Date(item.date).getDate() }}</text>
|
||||
</view>
|
||||
<view class="header-info">
|
||||
<text class="customer-name">{{ item.customerName }}</text>
|
||||
<text class="topic">{{ item.topic }}</text>
|
||||
</view>
|
||||
<text
|
||||
class="status-tag"
|
||||
:style="{ color: getStatusInfo(item.status).color, backgroundColor: getStatusInfo(item.status).bgColor }"
|
||||
>
|
||||
{{ getStatusInfo(item.status).text }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="card-body">
|
||||
<view class="info-row">
|
||||
<text class="i-carbon-location-filled"></text>
|
||||
<text class="location">{{ item.location }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="item.products.length > 0" class="info-row">
|
||||
<text class="i-carbon-tag"></text>
|
||||
<text class="products">{{ item.products.map(p => p.name).join('、') }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="item.photos.length > 0" class="photos-row">
|
||||
<image
|
||||
v-for="(photo, index) in item.photos.slice(0, 3)"
|
||||
:key="index"
|
||||
:src="photo"
|
||||
mode="aspectFill"
|
||||
class="photo"
|
||||
/>
|
||||
<view v-if="item.photos.length > 3" class="photo-more">
|
||||
+{{ item.photos.length - 3 }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-footer">
|
||||
<text class="time">{{ formatDate(item.date) }}</text>
|
||||
<view class="actions" @click.stop>
|
||||
<view class="action-btn delete" @click="handleDelete(item.id)">
|
||||
<text class="i-carbon-trash-can"></text>
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.visit-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f8f9fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: #fff;
|
||||
padding: 20rpx 0 0;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
padding: 0 30rpx 20rpx;
|
||||
|
||||
.search-input {
|
||||
height: 72rpx;
|
||||
background: #f1f3f5;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
gap: 16rpx;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1rpx solid #f1f3f5;
|
||||
|
||||
.tab-item {
|
||||
padding: 20rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #495057;
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 700;
|
||||
|
||||
.line {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 6rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 30rpx;
|
||||
}
|
||||
|
||||
.visit-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.date-badge {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
|
||||
.month {
|
||||
font-size: 20rpx;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.day {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.customer-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.topic {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
text:first-child {
|
||||
font-size: 28rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.location,
|
||||
.products {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.photos-row {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.photo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.photo-more {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid #f1f3f5;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&.delete {
|
||||
color: #fa4350;
|
||||
background: rgba(250, 67, 80, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
gap: 20rpx;
|
||||
|
||||
text:first-child {
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #adb5bd;
|
||||
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1023
src/pagesGovernment/bank/detail.vue
Normal file
1023
src/pagesGovernment/bank/detail.vue
Normal file
File diff suppressed because it is too large
Load Diff
161
src/pagesGovernment/bank/list.vue
Normal file
161
src/pagesGovernment/bank/list.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '银行监管',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="bank-list-page">
|
||||
<view class="search-wrap">
|
||||
<wd-search v-model="keyword" placeholder="请输入机构名称或编码" hide-cancel />
|
||||
</view>
|
||||
|
||||
<view class="list-container">
|
||||
<view
|
||||
v-for="item in filteredList"
|
||||
:key="item.id"
|
||||
class="bank-card"
|
||||
@click="goDetail(item.id)"
|
||||
>
|
||||
<view class="card-head">
|
||||
<view class="name-box">
|
||||
<text class="i-carbon-building text-xl mr-2 text-primary" />
|
||||
<text class="name">{{ item.name }}</text>
|
||||
</view>
|
||||
<wd-tag type="success" plain v-if="item.status === 'normal'">正常</wd-tag>
|
||||
<wd-tag type="warning" plain v-else>关注</wd-tag>
|
||||
</view>
|
||||
|
||||
<view class="card-data">
|
||||
<view class="data-item">
|
||||
<text class="val">{{ item.loanAmount }}</text>
|
||||
<text class="label">监管贷款余额(万)</text>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<text class="val">{{ item.customerCount }}</text>
|
||||
<text class="label">在贷户数</text>
|
||||
</view>
|
||||
<view class="data-item">
|
||||
<text class="val text-red">{{ item.overdueRate }}%</text>
|
||||
<text class="label">不良贷款率</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-bar">
|
||||
<text class="time">更新时间：{{ item.updateTime }}</text>
|
||||
<text class="action">查看详情 ></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const keyword = ref('')
|
||||
|
||||
const bankList = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '某某商业银行',
|
||||
code: 'BANK001',
|
||||
status: 'normal',
|
||||
loanAmount: 5680,
|
||||
customerCount: 1234,
|
||||
overdueRate: 1.2,
|
||||
updateTime: '2026-01-05 14:30',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '某某农村信用社',
|
||||
code: 'BANK002',
|
||||
status: 'warning',
|
||||
loanAmount: 3420,
|
||||
customerCount: 856,
|
||||
overdueRate: 3.5,
|
||||
updateTime: '2026-01-05 13:20',
|
||||
},
|
||||
])
|
||||
|
||||
const filteredList = computed(() => {
|
||||
if (!keyword.value) return bankList.value
|
||||
return bankList.value.filter(item => item.name.includes(keyword.value))
|
||||
})
|
||||
|
||||
function goDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesGovernment/bank/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bank-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
padding: 20rpx 32rpx;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.bank-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.name { font-size: 30rpx; font-weight: 600; color: #333; }
|
||||
.text-primary { color: #0957DE; }
|
||||
}
|
||||
}
|
||||
|
||||
.card-data {
|
||||
display: flex;
|
||||
padding: 24rpx 0;
|
||||
|
||||
.data-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.val { display: block; font-size: 32rpx; font-weight: 600; color: #333; margin-bottom: 8rpx; }
|
||||
.label { font-size: 24rpx; color: #999; }
|
||||
.text-red { color: #d32f2f; }
|
||||
}
|
||||
}
|
||||
|
||||
.card-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
font-size: 24rpx;
|
||||
|
||||
.time { color: #999; }
|
||||
.action { color: #0957DE; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
334
src/pagesGovernment/dashboard/index.vue
Normal file
334
src/pagesGovernment/dashboard/index.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '政务工作台',
|
||||
navigationBarBackgroundColor: '#0957DE',
|
||||
navigationBarTextStyle: 'white',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="gov-dashboard">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="header-bg">
|
||||
<view class="user-welcome">
|
||||
<view class="text-info">
|
||||
<text class="greeting">欢迎回来，监管员</text>
|
||||
<text class="date">{{ currentDate }}</text>
|
||||
</view>
|
||||
<view class="avatar-box">
|
||||
<text class="i-carbon-user-avatar" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 核心指标卡片 -->
|
||||
<view class="stats-overview">
|
||||
<view class="stat-row">
|
||||
<view class="stat-col">
|
||||
<text class="num">{{ stats.bankCount }}</text>
|
||||
<text class="label">监管机构</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-col">
|
||||
<text class="num primary">{{ stats.loanBalance }}</text>
|
||||
<text class="label">监管贷款余额</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-col">
|
||||
<text class="num warning">{{ stats.nplRatio }}</text>
|
||||
<text class="label">不良贷款率</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能导航 -->
|
||||
<view class="grid-menu">
|
||||
<view class="menu-item" @click="navigateTo('/pagesGovernment/bank/list')">
|
||||
<view class="icon-wrap primary">
|
||||
<text class="i-carbon-building-government" />
|
||||
</view>
|
||||
<text class="label">机构监管</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesGovernment/supervise/list')">
|
||||
<view class="icon-wrap success">
|
||||
<text class="i-carbon-task-approved" />
|
||||
</view>
|
||||
<text class="label">贷款抽查</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesGovernment/risk/list')">
|
||||
<view class="icon-wrap warning">
|
||||
<text class="i-carbon-warning-alt" />
|
||||
</view>
|
||||
<text class="label">风险监测</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesGovernment/report/list')">
|
||||
<view class="icon-wrap info">
|
||||
<text class="i-carbon-chart-line-data" />
|
||||
</view>
|
||||
<text class="label">数据报送</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待办事项 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">待办事项</text>
|
||||
<text class="more">查看全部</text>
|
||||
</view>
|
||||
<view class="todo-list">
|
||||
<view v-for="item in todoList" :key="item.id" class="todo-item">
|
||||
<view class="todo-icon">
|
||||
<text class="i-carbon-notification-new" />
|
||||
</view>
|
||||
<view class="todo-content">
|
||||
<text class="todo-title">{{ item.title }}</text>
|
||||
<text class="todo-time">{{ item.time }}</text>
|
||||
</view>
|
||||
<wd-button size="small" type="primary" plain>处理</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 风险动态 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">风险动态</text>
|
||||
</view>
|
||||
<view class="risk-list">
|
||||
<view v-for="alert in riskAlerts" :key="alert.id" class="risk-item">
|
||||
<view class="risk-tag" :class="alert.level">{{ alert.levelText }}</view>
|
||||
<text class="risk-msg">{{ alert.message }}</text>
|
||||
<text class="risk-bank">{{ alert.bankName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const currentDate = computed(() => dayjs().format('YYYY年MM月DD日'))
|
||||
|
||||
const stats = ref({
|
||||
bankCount: 24,
|
||||
loanBalance: '128.5亿',
|
||||
nplRatio: '1.8%',
|
||||
})
|
||||
|
||||
const todoList = ref([
|
||||
{ id: 1, title: '某某银行第二季度合规报告审核', time: '截止：今日 18:00' },
|
||||
{ id: 2, title: '关于落实信贷风险排查的通知', time: '待发布' },
|
||||
])
|
||||
|
||||
const riskAlerts = ref([
|
||||
{ id: 1, level: 'high', levelText: '高', message: '信贷逾期率超过警戒线 2%', bankName: '某某农村信用社' },
|
||||
{ id: 2, level: 'medium', levelText: '中', message: '大额交易集中度异常', bankName: '某某商业银行' },
|
||||
])
|
||||
|
||||
function navigateTo(url: string) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gov-dashboard {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background: #0957DE;
|
||||
padding: 40rpx 32rpx 100rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.user-welcome {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.greeting { font-size: 36rpx; font-weight: 600; display: block; }
|
||||
.date { font-size: 24rpx; opacity: 0.8; margin-top: 8rpx; display: block; }
|
||||
|
||||
.avatar-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 0;
|
||||
box-shadow: 0 8rpx 24rpx rgba(9, 87, 222, 0.08);
|
||||
position: relative;
|
||||
margin-top: -60rpx; /* 上移效果 */
|
||||
margin-left: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.stat-col {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
|
||||
&.warning { color: #f57c00; }
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.grid-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 32rpx 0;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&.primary { background: #e3f2fd; color: #0957DE; }
|
||||
&.success { background: #e8f5e9; color: #38a169; }
|
||||
&.warning { background: #fff3e0; color: #f57c00; }
|
||||
&.info { background: #f3e5f5; color: #9c27b0; }
|
||||
}
|
||||
|
||||
.label { font-size: 26rpx; color: #333; }
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
margin: 24rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title { font-size: 32rpx; font-weight: 600; color: #333; display: flex; align-items: center; }
|
||||
.title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
background: #0957DE;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.more { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
.todo-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.todo-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: #f0f7ff;
|
||||
border-radius: 50%;
|
||||
color: #0957DE;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
flex: 1;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.todo-title { font-size: 28rpx; color: #333; display: block; margin-bottom: 4rpx; }
|
||||
.todo-time { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.risk-list {
|
||||
.risk-item {
|
||||
background: #fdfdfd;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.risk-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
|
||||
&.high { background: #ffebee; color: #d32f2f; border: 1rpx solid #ef9a9a; }
|
||||
&.medium { background: #fff3e0; color: #ef6c00; border: 1rpx solid #ffcc80; }
|
||||
}
|
||||
|
||||
.risk-msg { flex: 1; font-size: 26rpx; color: #333; }
|
||||
.risk-bank { font-size: 22rpx; color: #999; margin-left: 12rpx; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/pagesGovernment/me/index.vue
Normal file
98
src/pagesGovernment/me/index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '个人中心',
|
||||
navigationBarBackgroundColor: '#0957DE',
|
||||
navigationBarTextStyle: 'white',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<view class="user-info-box">
|
||||
<view class="flex items-center">
|
||||
<view class="avatar">
|
||||
<text class="i-carbon-user-avatar-filled-alt text-4xl" />
|
||||
</view>
|
||||
<view class="ml-4">
|
||||
<text class="name">监管员001</text>
|
||||
<text class="dept">市金融监管局 · 银行监管处</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<wd-cell-group border>
|
||||
<wd-cell title="消息通知" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-notification text-lg mr-2 text-blue-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="工作日志" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-catalog text-lg mr-2 text-green-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="系统设置" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-settings text-lg mr-2 text-gray-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="p-4 mt-4">
|
||||
<wd-button type="error" plain block @click="handleLogout">退出登录</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.me-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
background: #0957DE;
|
||||
padding: 60rpx 40rpx 80rpx;
|
||||
color: #fff;
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.name { font-size: 36rpx; font-weight: 600; display: block; }
|
||||
.dept { font-size: 26rpx; opacity: 0.8; margin-top: 8rpx; display: block; }
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
margin-top: -20rpx;
|
||||
background: #fff;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
128
src/pagesGovernment/risk/list.vue
Normal file
128
src/pagesGovernment/risk/list.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '风险预警',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="risk-page">
|
||||
<view class="list-wrap">
|
||||
<view v-for="item in riskList" :key="item.id" class="risk-card">
|
||||
<view class="left-line" :class="item.level"></view>
|
||||
<view class="content">
|
||||
<view class="head">
|
||||
<text class="title">{{ item.title }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
<view class="desc">{{ item.desc }}</view>
|
||||
<view class="foot">
|
||||
<view class="tag-box">
|
||||
<text class="bank">{{ item.bankName }}</text>
|
||||
<text class="level-tag" :class="item.level">{{ item.levelText }}</text>
|
||||
</view>
|
||||
<wd-button size="small" type="primary" plain>处置</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const riskList = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '信贷逾期率超标',
|
||||
desc: '当前逾期率达2.5%，超过监管红线',
|
||||
bankName: '某某农村信用社',
|
||||
time: '10:30',
|
||||
level: 'high',
|
||||
levelText: '高风险'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '大额交易异常',
|
||||
desc: '检测到单笔超大额资金流向敏感行业',
|
||||
bankName: '某某商业银行',
|
||||
time: '昨日',
|
||||
level: 'medium',
|
||||
levelText: '中风险'
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.risk-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.risk-card {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
||||
|
||||
.left-line {
|
||||
width: 8rpx;
|
||||
background: #ccc;
|
||||
|
||||
&.high { background: #d32f2f; }
|
||||
&.medium { background: #f57c00; }
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.title { font-size: 30rpx; font-weight: 600; color: #333; }
|
||||
.time { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.tag-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bank { font-size: 24rpx; color: #666; margin-right: 16rpx; }
|
||||
.level-tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 4rpx;
|
||||
|
||||
&.high { background: #fce4ec; color: #d32f2f; }
|
||||
&.medium { background: #FFF3E0; color: #f57c00; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
134
src/pagesGovernment/supervise/list.vue
Normal file
134
src/pagesGovernment/supervise/list.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '贷款抽查',
|
||||
navigationBarBackgroundColor: '#fff',
|
||||
navigationBarTextStyle: 'black',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="check-page">
|
||||
<wd-tabs v-model="currentTab" sticky>
|
||||
<wd-tab title="待执行" name="pending">
|
||||
<view class="list-wrap">
|
||||
<view v-for="item in pendingList" :key="item.id" class="task-card">
|
||||
<view class="task-head">
|
||||
<view class="title-box">
|
||||
<text class="i-carbon-task text-lg mr-1 text-gray-500" />
|
||||
<text class="title">{{ item.title }}</text>
|
||||
</view>
|
||||
<wd-tag type="warning" plain>待执行</wd-tag>
|
||||
</view>
|
||||
<view class="task-body">
|
||||
<view class="row">
|
||||
<text class="label">被检机构：</text>
|
||||
<text>{{ item.bankName }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">计划日期：</text>
|
||||
<text>{{ item.date }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="task-foot">
|
||||
<wd-button size="small" type="primary" @click="handleStart(item)">开始检查</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-tab>
|
||||
<wd-tab title="已完成" name="completed">
|
||||
<view class="list-wrap">
|
||||
<view class="empty-tip">暂无已完成任务</view>
|
||||
</view>
|
||||
</wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const currentTab = ref('pending')
|
||||
|
||||
const pendingList = ref([
|
||||
{ id: 1, title: '2026年第一季度信贷合规检查', bankName: '某某商业银行', date: '2026-01-20' },
|
||||
{ id: 2, title: '反洗钱专项排查', bankName: '某某农村信用社', date: '2026-01-22' },
|
||||
])
|
||||
|
||||
function handleStart(item: any) {
|
||||
uni.showToast({ title: '开始任务', icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.check-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
background: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6rpx;
|
||||
background: #ff9800;
|
||||
}
|
||||
|
||||
.task-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.title { font-size: 30rpx; font-weight: 600; color: #333; line-height: 1.4; }
|
||||
}
|
||||
}
|
||||
|
||||
.task-body {
|
||||
.row {
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: #333;
|
||||
|
||||
.label { color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
.task-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding-top: 100rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
126
src/pagesInsurance/bank/list.vue
Normal file
126
src/pagesInsurance/bank/list.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '合作银行',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="bank-list-page">
|
||||
<wd-search v-model="keyword" placeholder="搜索银行名称" hide-cancel />
|
||||
|
||||
<view class="list-container">
|
||||
<view class="section-title">签约银行</view>
|
||||
<view class="bank-grid">
|
||||
<view
|
||||
v-for="item in bankList"
|
||||
:key="item.id"
|
||||
class="bank-item"
|
||||
>
|
||||
<view class="bank-icon">
|
||||
<text class="i-carbon-building" />
|
||||
</view>
|
||||
<text class="name">{{ item.name }}</text>
|
||||
<view class="tags">
|
||||
<text class="tag">合作{{ item.years }}年</text>
|
||||
<text class="tag primary">保单{{ item.policyCount }}</text>
|
||||
</view>
|
||||
<view class="contact">
|
||||
<text class="label">对接人：</text>
|
||||
<text class="val">{{ item.contact }}</text>
|
||||
</view>
|
||||
<wd-button size="small" plain class="mt-2">联系</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const keyword = ref('')
|
||||
|
||||
const bankList = ref([
|
||||
{ id: 1, name: '某某商业银行', years: 3, policyCount: 560, contact: '张经理' },
|
||||
{ id: 2, name: '某某农村信用社', years: 5, policyCount: 1200, contact: '李经理' },
|
||||
{ id: 3, name: '某某村镇银行', years: 2, policyCount: 320, contact: '王经理' },
|
||||
{ id: 4, name: '某某城市银行', years: 1, policyCount: 150, contact: '赵经理' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bank-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 24rpx 0 16rpx;
|
||||
}
|
||||
|
||||
.bank-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.bank-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
|
||||
|
||||
.bank-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.tag {
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
|
||||
&.primary { background: #e8f5e9; color: #38a169; }
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
.val { color: #666; }
|
||||
}
|
||||
}
|
||||
</style>
|
||||
491
src/pagesInsurance/claim-review/detail.vue
Normal file
491
src/pagesInsurance/claim-review/detail.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ClaimApplication } from '@/api/types/insurance'
|
||||
import { getClaimApplicationDetail, reviewClaimApplication } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '理赔审核详情',
|
||||
},
|
||||
})
|
||||
|
||||
const claimId = ref('')
|
||||
const claim = ref<ClaimApplication | null>(null)
|
||||
const loading = ref(false)
|
||||
const reviewing = ref(false)
|
||||
const rejectionReason = ref('')
|
||||
const payoutAmount = ref('')
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
if (!claim.value)
|
||||
return null
|
||||
return statusMap[claim.value.status] || { text: claim.value.status, color: '#666' }
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getClaimApplicationDetail(claimId.value)
|
||||
claim.value = res
|
||||
if (res.payoutAmount) {
|
||||
payoutAmount.value = res.payoutAmount.toString()
|
||||
}
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
function handlePreviewImage(url: string) {
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
})
|
||||
}
|
||||
|
||||
// 理赔审核通过
|
||||
async function handleApprove() {
|
||||
if (!payoutAmount.value || Number(payoutAmount.value) <= 0) {
|
||||
uni.showToast({ title: '请输入赔付金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
reviewing.value = true
|
||||
try {
|
||||
await reviewClaimApplication(claimId.value, {
|
||||
approved: true,
|
||||
payoutAmount: Number(payoutAmount.value),
|
||||
})
|
||||
uni.showToast({ title: '审核通过', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
reviewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 理赔审核拒绝
|
||||
async function handleReject() {
|
||||
if (!rejectionReason.value) {
|
||||
uni.showToast({ title: '请填写拒绝原因', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
reviewing.value = true
|
||||
try {
|
||||
await reviewClaimApplication(claimId.value, {
|
||||
approved: false,
|
||||
rejectionReason: rejectionReason.value,
|
||||
})
|
||||
uni.showToast({ title: '已拒绝', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
reviewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
claimId.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="claim-review-detail-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else-if="claim">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card" :style="{ background: statusInfo?.color }">
|
||||
<text class="status-text">{{ statusInfo?.text }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 银行信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
银行信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">银行名称</text>
|
||||
<text class="value">{{ claim.bankName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ claim.policyNumber }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险公司信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险公司信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ claim.companyName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 理赔信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
理赔信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">理赔金额</text>
|
||||
<text class="value amount">{{ claim.claimAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">理赔原因</text>
|
||||
<text class="value reason">{{ claim.claimReason }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">提交时间</text>
|
||||
<text class="value">{{ claim.submittedAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 理赔材料 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
理赔材料
|
||||
</view>
|
||||
<view class="materials-list">
|
||||
<view
|
||||
v-for="material in claim.materials"
|
||||
:key="material.id"
|
||||
class="material-item"
|
||||
@click="handlePreviewImage(material.url)"
|
||||
>
|
||||
<image :src="material.url" mode="aspectFill" />
|
||||
<view class="material-info">
|
||||
<text class="material-name">{{ material.name }}</text>
|
||||
<text class="upload-time">{{ material.uploadTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 审核操作 -->
|
||||
<view v-if="claim.status === 'pending'" class="action-card">
|
||||
<view class="card-header">
|
||||
理赔审核
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
<button
|
||||
class="btn approve"
|
||||
:disabled="reviewing"
|
||||
@click="handleApprove"
|
||||
>
|
||||
<text v-if="reviewing">处理中...</text>
|
||||
<text v-else>通过</text>
|
||||
</button>
|
||||
<button
|
||||
class="btn reject"
|
||||
:disabled="reviewing"
|
||||
@click="handleReject"
|
||||
>
|
||||
<text v-if="reviewing">处理中...</text>
|
||||
<text v-else>拒绝</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="payout-input">
|
||||
<text class="label">赔付金额（元）</text>
|
||||
<input
|
||||
v-model="payoutAmount"
|
||||
type="digit"
|
||||
class="input"
|
||||
placeholder="请输入赔付金额"
|
||||
>
|
||||
</view>
|
||||
<view v-if="!reviewing" class="reject-reason">
|
||||
<textarea
|
||||
v-model="rejectionReason"
|
||||
class="textarea"
|
||||
placeholder="请输入拒绝原因..."
|
||||
:maxlength="500"
|
||||
/>
|
||||
<text class="char-count">{{ rejectionReason.length }}/500</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已审核信息 -->
|
||||
<view v-if="claim.status !== 'pending'" class="section-card">
|
||||
<view class="card-header">
|
||||
审核信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">审核时间</text>
|
||||
<text class="value">{{ claim.reviewedAt }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">审核人员</text>
|
||||
<text class="value">{{ claim.reviewedBy }}</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutAmount" class="info-item">
|
||||
<text class="label">赔付金额</text>
|
||||
<text class="value payout">{{ claim.payoutAmount }}元</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutDate" class="info-item">
|
||||
<text class="label">赔付日期</text>
|
||||
<text class="value">{{ claim.payoutDate }}</text>
|
||||
</view>
|
||||
<view v-if="claim.rejectionReason" class="info-item full">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value reason">{{ claim.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-review-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reason {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.payout {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.value {
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.materials-list {
|
||||
padding: 20rpx 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
|
||||
.material-item {
|
||||
position: relative;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
background: #f8f9fa;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-info {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
|
||||
.material-name {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-time {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.approve {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.reject {
|
||||
background: #fa4350;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.payout-input {
|
||||
padding: 0 0 20rpx 0;
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.reject-reason {
|
||||
padding: 0 0 20rpx 0;
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 150rpx;
|
||||
padding: 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
339
src/pagesInsurance/claim-review/list.vue
Normal file
339
src/pagesInsurance/claim-review/list.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ClaimApplication } from '@/api/types/insurance'
|
||||
import { getClaimReviewApplications } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '理赔审核',
|
||||
},
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const claims = ref<ClaimApplication[]>([])
|
||||
const currentTab = ref('pending')
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'pending', label: '待审核' },
|
||||
{ key: 'approved', label: '已通过' },
|
||||
{ key: 'rejected', label: '已拒绝' },
|
||||
]
|
||||
|
||||
// 筛选后的列表
|
||||
const filteredClaims = computed(() => {
|
||||
if (currentTab.value === 'pending') {
|
||||
return claims.value.filter(c => c.status === 'pending')
|
||||
}
|
||||
return claims.value.filter(c => c.status === currentTab.value)
|
||||
})
|
||||
|
||||
// 切换标签
|
||||
function handleTabChange(tab: string) {
|
||||
currentTab.value = tab
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleViewDetail(id: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInsurance/claim-review/detail?id=${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 加载列表
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getClaimReviewApplications()
|
||||
claims.value = res.list
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="claim-review-list-page">
|
||||
<!-- 标签页 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.key }"
|
||||
@click="handleTabChange(tab.key)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<view v-if="currentTab === tab.key" class="tab-indicator" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredClaims.length > 0" class="claim-list">
|
||||
<view
|
||||
v-for="claim in filteredClaims"
|
||||
:key="claim.id"
|
||||
class="claim-item"
|
||||
@click="handleViewDetail(claim.id)"
|
||||
>
|
||||
<view class="claim-header">
|
||||
<view class="claim-info">
|
||||
<text class="claim-id">理赔申请号: {{ claim.id }}</text>
|
||||
<text class="bank-name">{{ claim.bankName }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: statusMap[claim.status]?.color }"
|
||||
>
|
||||
{{ statusMap[claim.status]?.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="claim-body">
|
||||
<view class="claim-row">
|
||||
<text class="label">保险单号</text>
|
||||
<text class="value">{{ claim.policyNumber }}</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ claim.companyName }}</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">理赔金额</text>
|
||||
<text class="value amount">{{ claim.claimAmount }}元</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">理赔原因</text>
|
||||
<text class="value reason">{{ claim.claimReason }}</text>
|
||||
</view>
|
||||
<view class="claim-row">
|
||||
<text class="label">提交时间</text>
|
||||
<text class="value">{{ claim.submittedAt }}</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutAmount" class="claim-row">
|
||||
<text class="label">赔付金额</text>
|
||||
<text class="value payout">{{ claim.payoutAmount }}元</text>
|
||||
</view>
|
||||
<view v-if="claim.payoutDate" class="claim-row">
|
||||
<text class="label">赔付日期</text>
|
||||
<text class="value">{{ claim.payoutDate }}</text>
|
||||
</view>
|
||||
<view v-if="claim.rejectionReason" class="claim-row">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value reject">{{ claim.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="claim-footer">
|
||||
<text class="material-count">已上传 {{ claim.materials.length }} 份材料</text>
|
||||
<text class="arrow-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon i-carbon-document" />
|
||||
<text class="empty-text">暂无理赔申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-review-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.claim-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.claim-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.claim-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.claim-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.claim-id {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.claim-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.claim-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reason {
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&.payout {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reject {
|
||||
color: #fa4350;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.claim-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 12rpx;
|
||||
|
||||
.material-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
200
src/pagesInsurance/claim/detail.vue
Normal file
200
src/pagesInsurance/claim/detail.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '理赔详情',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="claim-detail">
|
||||
<!-- 顶部状态 -->
|
||||
<view class="status-header">
|
||||
<view class="status-content">
|
||||
<text class="label">当前状态</text>
|
||||
<text class="status">{{ claim.statusText }}</text>
|
||||
</view>
|
||||
<text class="amount">¥{{ claim.amount.toLocaleString() }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 申请信息 -->
|
||||
<view class="card">
|
||||
<view class="card-title">申请信息</view>
|
||||
<view class="info-list">
|
||||
<view class="item">
|
||||
<text class="label">理赔单号</text>
|
||||
<text class="val">{{ claim.claimNo }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="label">申请时间</text>
|
||||
<text class="val">{{ claim.createTime }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="label">理赔原因</text>
|
||||
<text class="val">{{ claim.reason }}</text>
|
||||
</view>
|
||||
<view class="item">
|
||||
<text class="label">附件材料</text>
|
||||
<text class="link">查看附件 (3)</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 关联保单 -->
|
||||
<view class="card">
|
||||
<view class="card-title">关联保单</view>
|
||||
<view class="policy-preview">
|
||||
<view class="row">
|
||||
<text class="label">保单号</text>
|
||||
<text class="val">{{ claim.policyNo }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">被保险人</text>
|
||||
<text class="val">{{ claim.customerName }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">承保金额</text>
|
||||
<text class="val">¥{{ (500000).toLocaleString() }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<wd-button size="small" plain block class="mt-2">查看保单详情</wd-button>
|
||||
</view>
|
||||
|
||||
<!-- 审核记录 -->
|
||||
<view class="card">
|
||||
<view class="card-title">审核流程</view>
|
||||
<wd-steps :active="activeStep" vertical>
|
||||
<wd-step title="提交申请" :description="claim.createTime" />
|
||||
<wd-step title="初审" description="等待保险专员初审" />
|
||||
<wd-step title="复核" description="等待理赔经理复核" />
|
||||
<wd-step title="结案打款" />
|
||||
</wd-steps>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="action-bar" v-if="claim.status === 'pending'">
|
||||
<wd-button type="error" plain class="flex-1 mr-2" @click="handleReject">驳回</wd-button>
|
||||
<wd-button type="primary" class="flex-1" @click="handleApprove">通过初审</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const claim = ref({
|
||||
id: '1',
|
||||
claimNo: 'C20260105001',
|
||||
amount: 50000,
|
||||
status: 'pending',
|
||||
statusText: '待初审',
|
||||
createTime: '2026-01-05 10:00:00',
|
||||
reason: '借款人长期失联，确认贷款逾期超过90天',
|
||||
policyNo: 'P202511010023',
|
||||
customerName: '张某某',
|
||||
bankName: '某某商业银行'
|
||||
})
|
||||
|
||||
const activeStep = ref(1)
|
||||
|
||||
function handleReject() {
|
||||
uni.showModal({
|
||||
title: '驳回申请',
|
||||
editable: true,
|
||||
placeholderText: '请输入驳回原因',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '已驳回', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function handleApprove() {
|
||||
uni.showModal({
|
||||
title: '确认通过',
|
||||
content: '确认通过初审并提交复核？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '已通过', icon: 'success' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-detail {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.status-header {
|
||||
background: #0957DE;
|
||||
color: #fff;
|
||||
padding: 40rpx 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.label { font-size: 24rpx; opacity: 0.8; margin-right: 12rpx; }
|
||||
.status { font-size: 36rpx; font-weight: 600; }
|
||||
.amount { font-size: 48rpx; font-weight: 700; }
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin: 24rpx 32rpx;
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24rpx;
|
||||
padding-left: 16rpx;
|
||||
border-left: 6rpx solid #0957DE;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
.item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
.label { color: #718096; }
|
||||
.val { color: #2d3748; text-align: right; max-width: 60%; }
|
||||
.link { color: #2b6cb0; }
|
||||
}
|
||||
}
|
||||
|
||||
.policy-preview {
|
||||
background: #f7fafc;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
.label { color: #718096; }
|
||||
.val { color: #2d3748; font-weight: 500; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 24rpx 32rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
</style>
|
||||
320
src/pagesInsurance/claim/list.vue
Normal file
320
src/pagesInsurance/claim/list.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '理赔处理',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="claim-list-page">
|
||||
<view class="tab-header">
|
||||
<view
|
||||
v-for="item in tabs"
|
||||
:key="item.value"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === item.value }"
|
||||
@click="currentTab = item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
<view class="badge" v-if="item.count">{{ item.count }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-content">
|
||||
<view
|
||||
v-for="item in filteredList"
|
||||
:key="item.id"
|
||||
class="claim-card"
|
||||
:class="item.status"
|
||||
@click="goDetail(item.id)"
|
||||
>
|
||||
<view class="card-top">
|
||||
<text class="claim-no">CASE NO.{{ item.claimNo }}</text>
|
||||
<text class="time">{{ item.time }}</text>
|
||||
</view>
|
||||
|
||||
<view class="card-main">
|
||||
<view class="amount-box">
|
||||
<text class="label">申请金额</text>
|
||||
<text class="amount">¥{{ item.amount.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<view class="row">
|
||||
<text class="label">申请银行：</text>
|
||||
<text class="val">{{ item.bankName }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="label">关联客户：</text>
|
||||
<text class="val">{{ item.customerName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-reason">
|
||||
<text class="label">理赔原因：</text>
|
||||
<text class="text">{{ item.reason }}</text>
|
||||
</view>
|
||||
|
||||
<view class="card-status-bar">
|
||||
<text class="status-btn" :class="item.status">{{ item.statusText }}</text>
|
||||
<view class="actions">
|
||||
<view class="view-policy-btn" @click="goPolicyDetail">查看保单</view>
|
||||
<text class="i-carbon-chevron-right text-gray-400" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const currentTab = ref('pending')
|
||||
|
||||
const tabs = [
|
||||
{ value: 'pending', label: '待处理', count: 5 },
|
||||
{ value: 'processing', label: '审核中', count: 2 },
|
||||
{ value: 'completed', label: '已结案', count: 0 },
|
||||
]
|
||||
|
||||
const claimList = ref([
|
||||
{
|
||||
id: '1',
|
||||
claimNo: 'C20260105001',
|
||||
time: '2026-01-05 10:00',
|
||||
amount: 50000,
|
||||
bankName: '某某商业银行',
|
||||
customerName: '张某某',
|
||||
reason: '贷款逾期超过90天',
|
||||
status: 'pending',
|
||||
statusText: '待审核'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
claimNo: 'C20260104008',
|
||||
time: '2026-01-04 15:30',
|
||||
amount: 120000,
|
||||
bankName: '某某农村信用社',
|
||||
customerName: '李某某',
|
||||
reason: '借款人经营困难，无力还款',
|
||||
status: 'pending',
|
||||
statusText: '待审核'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
claimNo: 'C20260103012',
|
||||
time: '2026-01-03 09:20',
|
||||
amount: 35000,
|
||||
bankName: '某某村镇银行',
|
||||
customerName: '王某某',
|
||||
reason: '意外事故导致还款能力丧失',
|
||||
status: 'processing',
|
||||
statusText: '复核中'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
claimNo: 'C20251228005',
|
||||
time: '2025-12-28 11:00',
|
||||
amount: 80000,
|
||||
bankName: '某某商业银行',
|
||||
customerName: '赵某某',
|
||||
reason: '企业破产清算',
|
||||
status: 'processing',
|
||||
statusText: '审核中'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
claimNo: 'C20251215001',
|
||||
time: '2025-12-15 14:00',
|
||||
amount: 200000,
|
||||
bankName: '某某商业银行',
|
||||
customerName: '钱某某',
|
||||
reason: '贷款逾期超过180天',
|
||||
status: 'completed',
|
||||
statusText: '已赔付'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
claimNo: 'C20251120003',
|
||||
time: '2025-11-20 09:30',
|
||||
amount: 60000,
|
||||
bankName: '某某村镇银行',
|
||||
customerName: '孙某某',
|
||||
reason: '资料不全，无法证明损失',
|
||||
status: 'rejected',
|
||||
statusText: '已拒绝'
|
||||
}
|
||||
])
|
||||
|
||||
const filteredList = computed(() => {
|
||||
if (currentTab.value === 'completed') {
|
||||
return claimList.value.filter(item => ['completed', 'rejected'].includes(item.status))
|
||||
}
|
||||
return claimList.value.filter(item => item.status === currentTab.value)
|
||||
})
|
||||
|
||||
function goDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesInsurance/claim/detail?id=${id}` })
|
||||
}
|
||||
|
||||
function goPolicyDetail(e: Event) {
|
||||
e.stopPropagation()
|
||||
uni.showToast({ title: '查看保单详情', icon: 'none' })
|
||||
// uni.navigateTo({ url: `/pagesInsurance/policy/detail?id=1` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.claim-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 32rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 28rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
|
||||
&.active {
|
||||
color: #0957DE;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 6rpx;
|
||||
background: #0957DE;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
background: #e53e3e;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-content {
|
||||
padding: 24rpx 32rpx;
|
||||
}
|
||||
|
||||
.claim-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.pending { border-left: 8rpx solid #ff9800; }
|
||||
&.processing { border-left: 8rpx solid #2196f3; }
|
||||
&.completed { border-left: 8rpx solid #4caf50; }
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.claim-no { font-family: monospace; }
|
||||
}
|
||||
|
||||
.card-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.amount-box {
|
||||
.label { display: block; font-size: 22rpx; color: #666; }
|
||||
.amount { font-size: 40rpx; font-weight: 700; color: #333; }
|
||||
}
|
||||
|
||||
.info-box {
|
||||
text-align: right;
|
||||
.row {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 4rpx;
|
||||
.label { color: #999; }
|
||||
.val { color: #333; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-reason {
|
||||
background: #f9f9f9;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #555;
|
||||
|
||||
.label { color: #999; }
|
||||
}
|
||||
|
||||
.card-status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1rpx solid #eee;
|
||||
padding-top: 16rpx;
|
||||
|
||||
.status-btn {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&.pending { color: #f57c00; }
|
||||
&.processing { color: #0957DE; }
|
||||
&.completed { color: #38a169; }
|
||||
&.rejected { color: #fa4350; }
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.view-policy-btn {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
padding: 8rpx 20rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 24rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/pagesInsurance/dashboard/index.vue
Normal file
355
src/pagesInsurance/dashboard/index.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '保险工作台',
|
||||
navigationBarBackgroundColor: '#0957DE',
|
||||
navigationBarTextStyle: 'white',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="dashboard">
|
||||
<!-- 顶部欢迎区 -->
|
||||
<view class="header-bg">
|
||||
<view class="welcome-info">
|
||||
<view class="text-info">
|
||||
<text class="greeting">信贷保险平台</text>
|
||||
<text class="date">{{ currentDate }}</text>
|
||||
</view>
|
||||
<view class="avatar-box">
|
||||
<text class="i-carbon-user-avatar" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<view class="stats-overview">
|
||||
<view class="stat-row">
|
||||
<view class="stat-col">
|
||||
<text class="num">{{ stats.policyCount }}</text>
|
||||
<text class="label">有效保单</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-col">
|
||||
<text class="num primary">{{ stats.totalPremium }}<text class="unit">万</text></text>
|
||||
<text class="label">保费总额</text>
|
||||
</view>
|
||||
<view class="divider" />
|
||||
<view class="stat-col">
|
||||
<text class="num warning">{{ stats.pendingClaim }}</text>
|
||||
<text class="label">待理赔</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快捷功能 -->
|
||||
<view class="grid-menu">
|
||||
<view class="menu-item" @click="navigateTo('/pagesInsurance/policy/list')">
|
||||
<view class="icon-wrap primary">
|
||||
<text class="i-carbon-document-protected" />
|
||||
</view>
|
||||
<text class="label">保单管理</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesInsurance/claim/list')">
|
||||
<view class="icon-wrap warning">
|
||||
<text class="i-carbon-request-quote" />
|
||||
</view>
|
||||
<text class="label">理赔处理</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesInsurance/bank/list')">
|
||||
<view class="icon-wrap info">
|
||||
<text class="i-carbon-building" />
|
||||
</view>
|
||||
<text class="label">合作银行</text>
|
||||
</view>
|
||||
<view class="menu-item" @click="navigateTo('/pagesInsurance/report/index')">
|
||||
<view class="icon-wrap success">
|
||||
<text class="i-carbon-chart-line" />
|
||||
</view>
|
||||
<text class="label">业务报表</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 待处理理赔 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">待处理理赔</text>
|
||||
<text class="more" @click="navigateTo('/pagesInsurance/claim/list')">查看全部</text>
|
||||
</view>
|
||||
<view class="claim-list">
|
||||
<view v-for="item in pendingClaims" :key="item.id" class="claim-item" @click="goClaimDetail(item.id)">
|
||||
<view class="claim-icon">
|
||||
<text class="i-carbon-warning-hex" />
|
||||
</view>
|
||||
<view class="claim-content">
|
||||
<text class="claim-title">{{ item.bankName }} - {{ item.customerName }}</text>
|
||||
<text class="claim-desc">理赔金额：¥{{ item.amount.toLocaleString() }}</text>
|
||||
</view>
|
||||
<view class="claim-time">{{ item.time }}</view>
|
||||
<text class="i-carbon-chevron-right text-gray-300 ml-2" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 业务趋势 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
<text class="title">本月概览</text>
|
||||
</view>
|
||||
<view class="overview-grid">
|
||||
<view class="overview-item">
|
||||
<text class="label">新增保单</text>
|
||||
<view class="val-box">
|
||||
<text class="val">86</text>
|
||||
<text class="trend up">+12%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<text class="label">保费收入</text>
|
||||
<view class="val-box">
|
||||
<text class="val">¥128万</text>
|
||||
<text class="trend up">+8%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<text class="label">理赔案件</text>
|
||||
<view class="val-box">
|
||||
<text class="val">12</text>
|
||||
<text class="trend down">-5%</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="overview-item">
|
||||
<text class="label">赔付率</text>
|
||||
<view class="val-box">
|
||||
<text class="val">2.3%</text>
|
||||
<text class="trend">-</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const currentDate = computed(() => dayjs().format('YYYY年MM月DD日'))
|
||||
|
||||
const stats = ref({
|
||||
policyCount: 1256,
|
||||
totalPremium: 3680,
|
||||
pendingClaim: 8,
|
||||
claimAmount: 45.6,
|
||||
})
|
||||
|
||||
const pendingClaims = ref([
|
||||
{ id: '1', bankName: '某某商业银行', customerName: '张某某', amount: 50000, time: '30分钟前' },
|
||||
{ id: '2', bankName: '某某农村信用社', customerName: '李某某', amount: 120000, time: '2小时前' },
|
||||
])
|
||||
|
||||
function navigateTo(url: string) {
|
||||
uni.navigateTo({ url })
|
||||
}
|
||||
|
||||
function goClaimDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pagesInsurance/claim/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background: #0957DE;
|
||||
padding: 40rpx 32rpx 100rpx;
|
||||
border-bottom-left-radius: 40rpx;
|
||||
border-bottom-right-radius: 40rpx;
|
||||
position: relative;
|
||||
|
||||
.welcome-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.greeting { font-size: 36rpx; font-weight: 600; display: block; }
|
||||
.date { font-size: 24rpx; opacity: 0.8; margin-top: 8rpx; display: block; }
|
||||
|
||||
.avatar-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stats-overview {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 0;
|
||||
box-shadow: 0 8rpx 24rpx rgba(9, 87, 222, 0.08);
|
||||
position: relative;
|
||||
margin-top: -60rpx;
|
||||
margin-left: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.stat-col {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
.num {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
display: block;
|
||||
|
||||
&.primary { color: #0957DE; }
|
||||
&.warning { color: #f57c00; }
|
||||
|
||||
.unit { font-size: 24rpx; font-weight: 400; margin-left: 4rpx; color: #666; }
|
||||
}
|
||||
|
||||
.label { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; }
|
||||
}
|
||||
|
||||
.divider { width: 1rpx; height: 40rpx; background: #eee; }
|
||||
}
|
||||
}
|
||||
|
||||
.grid-menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20rpx;
|
||||
background: #fff;
|
||||
margin: 24rpx 32rpx;
|
||||
padding: 32rpx 0;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
&.primary { background: #e3f2fd; color: #0957DE; }
|
||||
&.success { background: #e8f5e9; color: #38a169; }
|
||||
&.warning { background: #fff3e0; color: #f57c00; }
|
||||
&.info { background: #f3e5f5; color: #9c27b0; }
|
||||
}
|
||||
|
||||
.label { font-size: 26rpx; color: #333; }
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
margin: 24rpx 32rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.title { font-size: 32rpx; font-weight: 600; color: #333; display: flex; align-items: center; }
|
||||
.title::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8rpx;
|
||||
height: 32rpx;
|
||||
background: #0957DE;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.more { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
.claim-list {
|
||||
.claim-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.claim-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: #fff3e0;
|
||||
border-radius: 50%;
|
||||
color: #f57c00;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.claim-content {
|
||||
flex: 1;
|
||||
.claim-title { font-size: 28rpx; color: #333; display: block; margin-bottom: 4rpx; }
|
||||
.claim-desc { font-size: 24rpx; color: #d32f2f; }
|
||||
}
|
||||
|
||||
.claim-time { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20rpx;
|
||||
|
||||
.overview-item {
|
||||
background: #f9f9f9;
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
.label { font-size: 24rpx; color: #666; display: block; margin-bottom: 8rpx; }
|
||||
|
||||
.val-box {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
.val { font-size: 32rpx; font-weight: 600; color: #333; margin-right: 8rpx; }
|
||||
|
||||
.trend {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
&.up { color: #38a169; }
|
||||
&.down { color: #d32f2f; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/pagesInsurance/me/index.vue
Normal file
103
src/pagesInsurance/me/index.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '个人中心',
|
||||
navigationBarBackgroundColor: '#0957DE',
|
||||
navigationBarTextStyle: 'white',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="me-page">
|
||||
<view class="user-info-box">
|
||||
<view class="flex items-center">
|
||||
<view class="avatar">
|
||||
<text class="i-carbon-user-avatar text-4xl" />
|
||||
</view>
|
||||
<view class="ml-4">
|
||||
<text class="name">保险专员007</text>
|
||||
<text class="dept">核保部 / 高级专员</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-group">
|
||||
<wd-cell-group border>
|
||||
<wd-cell title="我的保单" is-link to="/pagesInsurance/policy/list">
|
||||
<template #icon>
|
||||
<text class="i-carbon-document-protected text-lg mr-2 text-blue-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="业绩统计" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-chart-line text-lg mr-2 text-orange-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="联系客服" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-customer-service text-lg mr-2 text-green-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
<wd-cell title="账户设置" is-link>
|
||||
<template #icon>
|
||||
<text class="i-carbon-settings text-lg mr-2 text-gray-500" />
|
||||
</template>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
</view>
|
||||
|
||||
<view class="p-4 mt-4">
|
||||
<wd-button type="error" plain block @click="handleLogout">退出登录</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
function handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.me-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.user-info-box {
|
||||
background: #0957DE;
|
||||
padding: 60rpx 40rpx 80rpx;
|
||||
color: #fff;
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.name { font-size: 36rpx; font-weight: 600; display: block; }
|
||||
.dept { font-size: 26rpx; opacity: 0.8; margin-top: 8rpx; display: block; }
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
margin-top: -20rpx;
|
||||
background: #fff;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
231
src/pagesInsurance/policy/detail.vue
Normal file
231
src/pagesInsurance/policy/detail.vue
Normal 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>
|
||||
337
src/pagesInsurance/policy/list.vue
Normal file
337
src/pagesInsurance/policy/list.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: {
|
||||
navigationBarTitleText: '保单管理',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="policy-list">
|
||||
<!-- 搜索和筛选 -->
|
||||
<view class="header-search">
|
||||
<view class="action-buttons">
|
||||
<view class="action-btn" @click="goToUnderwriting">
|
||||
<text class="i-carbon-task icon"></text>
|
||||
<text>待核保</text>
|
||||
<view class="badge">3</view>
|
||||
</view>
|
||||
<view class="action-btn" @click="goToClaimReview">
|
||||
<text class="i-carbon-review icon"></text>
|
||||
<text>理赔审核</text>
|
||||
<view class="badge warning">2</view>
|
||||
</view>
|
||||
</view>
|
||||
<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' })
|
||||
}
|
||||
|
||||
function goToUnderwriting() {
|
||||
uni.navigateTo({ url: '/pagesInsurance/underwriting/list' })
|
||||
}
|
||||
|
||||
function goToClaimReview() {
|
||||
uni.navigateTo({ url: '/pagesInsurance/claim-review/list' })
|
||||
}
|
||||
</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;
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
position: relative;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
|
||||
.icon {
|
||||
font-size: 32rpx;
|
||||
color: #0957DE;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
background: #fa4350;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
transform: scale(0.9);
|
||||
|
||||
&.warning {
|
||||
background: #ff8f0d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
405
src/pagesInsurance/underwriting/detail.vue
Normal file
405
src/pagesInsurance/underwriting/detail.vue
Normal file
@@ -0,0 +1,405 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceApplication } from '@/api/types/insurance'
|
||||
import { getInsuranceApplicationDetail, reviewUnderwritingApplication } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '核保申请详情',
|
||||
},
|
||||
})
|
||||
|
||||
const applicationId = ref('')
|
||||
const application = ref<InsuranceApplication | null>(null)
|
||||
const loading = ref(false)
|
||||
const reviewing = ref(false)
|
||||
const rejectionReason = ref('')
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const statusInfo = computed(() => {
|
||||
if (!application.value)
|
||||
return null
|
||||
return statusMap[application.value.status] || { text: application.value.status, color: '#666' }
|
||||
})
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getInsuranceApplicationDetail(applicationId.value)
|
||||
application.value = res
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 核保通过
|
||||
async function handleApprove() {
|
||||
reviewing.value = true
|
||||
try {
|
||||
await reviewUnderwritingApplication(applicationId.value, {
|
||||
approved: true,
|
||||
})
|
||||
uni.showToast({ title: '核保通过', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
reviewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 核保拒绝
|
||||
async function handleReject() {
|
||||
if (!rejectionReason.value) {
|
||||
uni.showToast({ title: '请填写拒绝原因', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
reviewing.value = true
|
||||
try {
|
||||
await reviewUnderwritingApplication(applicationId.value, {
|
||||
approved: false,
|
||||
rejectionReason: rejectionReason.value,
|
||||
})
|
||||
uni.showToast({ title: '已拒绝', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
finally {
|
||||
reviewing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options?.id) {
|
||||
applicationId.value = options.id
|
||||
loadDetail()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="underwriting-detail-page">
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<template v-else-if="application">
|
||||
<!-- 状态卡片 -->
|
||||
<view class="status-card" :style="{ background: statusInfo?.color }">
|
||||
<text class="status-text">{{ statusInfo?.text }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 银行信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
银行信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">银行名称</text>
|
||||
<text class="value">{{ application.bankName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款编号</text>
|
||||
<text class="value">{{ application.loanId }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险公司信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险公司信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ application.companyName }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ application.productName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客户信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
客户信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">客户姓名</text>
|
||||
<text class="value">{{ application.customerInfo.name }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">身份证号</text>
|
||||
<text class="value">{{ application.customerInfo.idNumber }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">信用评分</text>
|
||||
<text class="value score">{{ application.customerInfo.creditScore }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款金额</text>
|
||||
<text class="value">{{ application.customerInfo.loanAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">贷款期限</text>
|
||||
<text class="value">{{ application.customerInfo.loanTerm }}月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保险信息 -->
|
||||
<view class="section-card">
|
||||
<view class="card-header">
|
||||
保险信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ application.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ application.insuranceTerm }}月</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">申请时间</text>
|
||||
<text class="value">{{ application.createdAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 审核操作 -->
|
||||
<view v-if="application.status === 'pending'" class="action-card">
|
||||
<view class="card-header">
|
||||
核保审核
|
||||
</view>
|
||||
<view class="action-buttons">
|
||||
<button
|
||||
class="btn approve"
|
||||
:disabled="reviewing"
|
||||
@click="handleApprove"
|
||||
>
|
||||
<text v-if="reviewing">处理中...</text>
|
||||
<text v-else>通过</text>
|
||||
</button>
|
||||
<button
|
||||
class="btn reject"
|
||||
:disabled="reviewing"
|
||||
@click="handleReject"
|
||||
>
|
||||
<text v-if="reviewing">处理中...</text>
|
||||
<text v-else>拒绝</text>
|
||||
</button>
|
||||
</view>
|
||||
<view v-if="!reviewing" class="reject-reason">
|
||||
<textarea
|
||||
v-model="rejectionReason"
|
||||
class="textarea"
|
||||
placeholder="请输入拒绝原因..."
|
||||
:maxlength="500"
|
||||
/>
|
||||
<text class="char-count">{{ rejectionReason.length }}/500</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已审核信息 -->
|
||||
<view v-if="application.status !== 'pending'" class="section-card">
|
||||
<view class="card-header">
|
||||
审核信息
|
||||
</view>
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text class="label">审核时间</text>
|
||||
<text class="value">{{ application.reviewedAt }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">审核人员</text>
|
||||
<text class="value">{{ application.reviewedBy }}</text>
|
||||
</view>
|
||||
<view v-if="application.rejectionReason" class="info-item full">
|
||||
<text class="label">拒绝原因</text>
|
||||
<text class="value reason">{{ application.rejectionReason }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.underwriting-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%);
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.status-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&.approve {
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.reject {
|
||||
background: #fa4350;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reject-reason {
|
||||
padding: 0 0 20rpx 0;
|
||||
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 150rpx;
|
||||
padding: 16rpx;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
margin-top: 8rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding: 20rpx 0;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f9f9f9;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
|
||||
&.score {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.reason {
|
||||
color: #fa4350;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.full {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.value {
|
||||
margin-top: 8rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
321
src/pagesInsurance/underwriting/list.vue
Normal file
321
src/pagesInsurance/underwriting/list.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<script lang="ts" setup>
|
||||
import type { InsuranceApplication } from '@/api/types/insurance'
|
||||
import { getUnderwritingApplications } from '@/api/insurance'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '待核保申请',
|
||||
},
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const applications = ref<InsuranceApplication[]>([])
|
||||
const currentTab = ref('pending')
|
||||
|
||||
// 状态映射
|
||||
const statusMap: Record<string, { text: string, color: string }> = {
|
||||
pending: { text: '待审核', color: '#F59E0B' },
|
||||
approved: { text: '已通过', color: '#00c05a' },
|
||||
rejected: { text: '已拒绝', color: '#fa4350' },
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ key: 'pending', label: '待审核' },
|
||||
{ key: 'approved', label: '已通过' },
|
||||
{ key: 'rejected', label: '已拒绝' },
|
||||
]
|
||||
|
||||
// 筛选后的列表
|
||||
const filteredApplications = computed(() => {
|
||||
if (currentTab.value === 'pending') {
|
||||
return applications.value.filter(a => a.status === 'pending')
|
||||
}
|
||||
return applications.value.filter(a => a.status === currentTab.value)
|
||||
})
|
||||
|
||||
// 切换标签
|
||||
function handleTabChange(tab: string) {
|
||||
currentTab.value = tab
|
||||
}
|
||||
|
||||
// 查看详情
|
||||
function handleViewDetail(id: string) {
|
||||
uni.navigateTo({
|
||||
url: `/pagesInsurance/underwriting/detail?id=${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
// 加载列表
|
||||
async function loadList() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getUnderwritingApplications()
|
||||
applications.value = res.list
|
||||
}
|
||||
finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="underwriting-list-page">
|
||||
<!-- 标签页 -->
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key"
|
||||
class="tab-item"
|
||||
:class="{ active: currentTab === tab.key }"
|
||||
@click="handleTabChange(tab.key)"
|
||||
>
|
||||
<text class="tab-text">{{ tab.label }}</text>
|
||||
<view v-if="currentTab === tab.key" class="tab-indicator" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表 -->
|
||||
<view v-if="loading" class="loading-state">
|
||||
加载中...
|
||||
</view>
|
||||
|
||||
<view v-else-if="filteredApplications.length > 0" class="application-list">
|
||||
<view
|
||||
v-for="app in filteredApplications"
|
||||
:key="app.id"
|
||||
class="application-item"
|
||||
@click="handleViewDetail(app.id)"
|
||||
>
|
||||
<view class="app-header">
|
||||
<view class="app-info">
|
||||
<text class="app-id">投保申请号: {{ app.id }}</text>
|
||||
<text class="bank-name">{{ app.bankName }}</text>
|
||||
</view>
|
||||
<view
|
||||
class="status-tag"
|
||||
:style="{ background: statusMap[app.status]?.color }"
|
||||
>
|
||||
{{ statusMap[app.status]?.text }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="app-body">
|
||||
<view class="app-row">
|
||||
<text class="label">保险公司</text>
|
||||
<text class="value">{{ app.companyName }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">保险产品</text>
|
||||
<text class="value">{{ app.productName }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">保险金额</text>
|
||||
<text class="value amount">{{ app.insuranceAmount }}元</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">保险期限</text>
|
||||
<text class="value">{{ app.insuranceTerm }}月</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">客户姓名</text>
|
||||
<text class="value">{{ app.customerInfo.name }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">信用评分</text>
|
||||
<text class="value score">{{ app.customerInfo.creditScore }}</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">贷款金额</text>
|
||||
<text class="value">{{ app.customerInfo.loanAmount }}元</text>
|
||||
</view>
|
||||
<view class="app-row">
|
||||
<text class="label">申请时间</text>
|
||||
<text class="value">{{ app.createdAt }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="app-footer">
|
||||
<text class="arrow-icon i-carbon-chevron-right" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-else class="empty-state">
|
||||
<text class="empty-icon i-carbon-document" />
|
||||
<text class="empty-text">暂无投保申请</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.underwriting-list-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
background: #fff;
|
||||
display: flex;
|
||||
padding: 0 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 30rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60rpx;
|
||||
height: 4rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.application-list {
|
||||
padding: 20rpx;
|
||||
|
||||
.application-item {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.app-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.app-id {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.bank-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.app-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
font-size: 26rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
|
||||
&.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.score {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 12rpx;
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 28rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
color: #999;
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
margin-bottom: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,6 +18,8 @@ const todos = computed(() => {
|
||||
{ icon: 'i-carbon-shopping-bag', label: '待发货订单', count: merchantStore.stats.pendingOrders, path: '/pagesMerchant/order/list' },
|
||||
{ icon: 'i-carbon-warning', label: '库存预警', count: merchantStore.stats.lowStockGoods, path: '/pagesMerchant/goods/list' },
|
||||
{ icon: 'i-carbon-wallet', label: '待结算', count: `¥${(merchantStore.stats.pendingSettlement / 100).toFixed(0)}`, path: '/pagesMerchant/finance/index' },
|
||||
{ icon: 'i-carbon-document', label: '待提供材料', count: 1, path: '/pagesMerchant/loan/assist' }, // 模拟数据; 实际应从API获取
|
||||
// 实际项目中应增加获取该count的API，目前保持模拟
|
||||
].filter(item => item.count)
|
||||
})
|
||||
|
||||
@@ -27,6 +29,7 @@ const quickActions = [
|
||||
{ icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' },
|
||||
{ icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' },
|
||||
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/shop' },
|
||||
{ icon: 'i-carbon-document', label: '辅助贷款', path: '/pagesMerchant/loan/assist' },
|
||||
]
|
||||
|
||||
// 加载数据
|
||||
|
||||
582
src/pagesMerchant/loan/assist.vue
Normal file
582
src/pagesMerchant/loan/assist.vue
Normal file
@@ -0,0 +1,582 @@
|
||||
<script lang="ts" setup>
|
||||
import { getMerchantPendingAssistList, submitAssistMaterial } from '@/api/loan'
|
||||
|
||||
definePage({
|
||||
style: {
|
||||
navigationBarTitleText: '辅助贷款材料',
|
||||
},
|
||||
})
|
||||
|
||||
interface LoanItem {
|
||||
loanId: string
|
||||
userName: string
|
||||
amount: number
|
||||
applyTime: string
|
||||
isExpanded: boolean
|
||||
materials: { type: string, url: string, name: string }[]
|
||||
status?: string
|
||||
// 申请进度及负责人信息
|
||||
progress?: {
|
||||
step: string
|
||||
handlerName: string
|
||||
handlerPhone: string
|
||||
time: string
|
||||
completed: boolean
|
||||
}[]
|
||||
}
|
||||
|
||||
// 状态筛选 Tab
|
||||
const statusTabs = [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '已受理', value: 'accepted' },
|
||||
{ label: '调查中', value: 'investigating' },
|
||||
{ label: '待审批', value: 'reported' },
|
||||
{ label: '已通过', value: 'approved' },
|
||||
{ label: '已拒绝', value: 'rejected' },
|
||||
{ label: '驳回要求补充', value: 'pending_supplement' },
|
||||
]
|
||||
|
||||
const activeTab = ref('')
|
||||
const list = ref<LoanItem[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getMerchantPendingAssistList()
|
||||
list.value = res.list.map(item => ({
|
||||
...item,
|
||||
isExpanded: false,
|
||||
materials: []
|
||||
}))
|
||||
// 根据选中的状态筛选
|
||||
if (activeTab.value) {
|
||||
list.value = list.value.filter(item => item.status === activeTab.value)
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleTabChange(value: string) {
|
||||
activeTab.value = value
|
||||
loadData()
|
||||
}
|
||||
|
||||
function handleExpand(item: LoanItem) {
|
||||
item.isExpanded = !item.isExpanded
|
||||
}
|
||||
|
||||
function handleUpload(item: LoanItem, type: string, name: string) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
// 模拟上传
|
||||
item.materials.push({
|
||||
type,
|
||||
name,
|
||||
url: res.tempFilePaths[0]
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function removeMaterial(item: LoanItem, index: number) {
|
||||
item.materials.splice(index, 1)
|
||||
}
|
||||
|
||||
// 拨打负责人电话
|
||||
function handleCallPhone(phone: string) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: phone
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSubmit(item: LoanItem) {
|
||||
if (item.materials.length === 0) {
|
||||
uni.showToast({ title: '请至少上传一项材料', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
try {
|
||||
await submitAssistMaterial(item.loanId, item.materials)
|
||||
uni.showToast({ title: '提交成功', icon: 'success' })
|
||||
// 移除已处理项
|
||||
const idx = list.value.indexOf(item)
|
||||
if (idx > -1) list.value.splice(idx, 1)
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="assist-page">
|
||||
<!-- 状态筛选 Tab -->
|
||||
<view class="tabs-container">
|
||||
<scroll-view scroll-x class="tabs-scroll">
|
||||
<view class="tabs">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === tab.value }"
|
||||
@click="handleTabChange(tab.value)"
|
||||
>
|
||||
{{ tab.label }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading && list.length === 0" class="loading">加载中...</view>
|
||||
|
||||
<view v-else-if="list.length === 0" class="empty">
|
||||
<text class="i-carbon-document-blank icon"></text>
|
||||
<text>暂无需要提供材料的申请</text>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view v-for="item in list" :key="item.loanId" class="card">
|
||||
<view class="card-header">
|
||||
<view class="info">
|
||||
<text class="user">{{ item.userName }}的贷款申请</text>
|
||||
<text class="time">{{ item.applyTime }}</text>
|
||||
</view>
|
||||
<view class="amount">
|
||||
<text class="val">{{ item.amount }}</text>
|
||||
<text class="unit">万</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 申请进度及负责人信息 -->
|
||||
<view v-if="item.progress && item.progress.length" class="progress-section">
|
||||
<view class="progress-header">
|
||||
<text class="i-carbon-time progress-icon"></text>
|
||||
<text class="progress-title">申请进度</text>
|
||||
</view>
|
||||
<view class="progress-list">
|
||||
<view
|
||||
v-for="(p, idx) in item.progress"
|
||||
:key="idx"
|
||||
class="progress-item"
|
||||
:class="{ completed: p.completed, current: !p.completed && idx > 0 && item.progress[idx - 1].completed }"
|
||||
>
|
||||
<view class="progress-dot">
|
||||
<text v-if="p.completed" class="i-carbon-checkmark"></text>
|
||||
<text v-else class="dot"></text>
|
||||
</view>
|
||||
<view class="progress-content">
|
||||
<view class="progress-main">
|
||||
<text class="progress-step">{{ p.step }}</text>
|
||||
<text v-if="p.time" class="progress-time">{{ p.time }}</text>
|
||||
</view>
|
||||
<view class="progress-handler" v-if="p.completed">
|
||||
<text class="handler-label">负责人：</text>
|
||||
<text class="handler-name">{{ p.handlerName }}</text>
|
||||
<view class="handler-phone-wrapper" @click="handleCallPhone(p.handlerPhone)">
|
||||
<text class="i-carbon-phone phone-icon"></text>
|
||||
<text class="handler-phone">{{ p.handlerPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-area" v-if="!item.isExpanded">
|
||||
<button class="btn primary" @click="handleExpand(item)">提供材料</button>
|
||||
</view>
|
||||
|
||||
<!-- 上传区域 -->
|
||||
<view class="upload-area" v-else>
|
||||
<view class="upload-tip">请上传与该用户的真实交易凭证</view>
|
||||
|
||||
<view class="material-types">
|
||||
<view class="type-btn" @click="handleUpload(item, 'invoice', '发票')">
|
||||
<text class="i-carbon-receipt"></text> 上传发票
|
||||
</view>
|
||||
<view class="type-btn" @click="handleUpload(item, 'contract', '合同')">
|
||||
<text class="i-carbon-document-pdf"></text> 上传合同
|
||||
</view>
|
||||
<view class="type-btn" @click="handleUpload(item, 'attachment', '附件')">
|
||||
<text class="i-carbon-attachment"></text> 上传附件
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 已传列表 -->
|
||||
<view class="preview-list" v-if="item.materials.length">
|
||||
<view v-for="(mat, idx) in item.materials" :key="idx" class="preview-item">
|
||||
<image :src="mat.url" mode="aspectFill" />
|
||||
<view class="del-btn" @click="removeMaterial(item, idx)">
|
||||
<text class="i-carbon-close"></text>
|
||||
</view>
|
||||
<text class="name">{{ mat.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="submit-actions">
|
||||
<button class="btn" @click="handleExpand(item)">取消</button>
|
||||
<button class="btn primary" @click="handleSubmit(item)">确认提交</button>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.assist-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f7fa;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 200rpx;
|
||||
color: #999;
|
||||
|
||||
.icon { font-size: 80rpx; margin-bottom: 20rpx; }
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.user { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; }
|
||||
.time { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #ff8f0d;
|
||||
font-weight: bold;
|
||||
.val { font-size: 40rpx; }
|
||||
.unit { font-size: 24rpx; margin-left: 4rpx; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
background: #fff;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
|
||||
.tabs-scroll {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
padding: 0 20rpx;
|
||||
gap: 30rpx;
|
||||
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding: 10rpx 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.active {
|
||||
color: #00c05a;
|
||||
font-weight: 600;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 4rpx;
|
||||
background: #00c05a;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.progress-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.progress-icon {
|
||||
font-size: 28rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
.progress-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-list {
|
||||
.progress-item {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding-bottom: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11rpx;
|
||||
top: 32rpx;
|
||||
bottom: 0;
|
||||
width: 2rpx;
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.progress-dot {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
background: #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #fff;
|
||||
font-size: 16rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
|
||||
.progress-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.progress-step {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.progress-time {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-handler {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.handler-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.handler-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.handler-phone-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
background: #e6f7eb;
|
||||
border-radius: 12rpx;
|
||||
|
||||
.phone-icon {
|
||||
font-size: 20rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
.handler-phone {
|
||||
font-size: 22rpx;
|
||||
color: #00c05a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.completed {
|
||||
.progress-dot {
|
||||
background: #00c05a;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
color: #00c05a;
|
||||
}
|
||||
|
||||
&:not(:last-child)::after {
|
||||
background: #00c05a;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
.progress-dot {
|
||||
background: #3B82F6;
|
||||
}
|
||||
|
||||
.progress-step {
|
||||
color: #3B82F6;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-area {
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
font-size: 26rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
padding: 0 40rpx;
|
||||
border-radius: 32rpx;
|
||||
background: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.upload-tip { font-size: 24rpx; color: #666; margin-bottom: 20rpx; }
|
||||
|
||||
.material-types {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.type-btn {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #fff;
|
||||
border: 1rpx dashed #ccc;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
gap: 8rpx;
|
||||
|
||||
&:active { background: #e6f7eb; border-color: #00c05a; color: #00c05a; }
|
||||
}
|
||||
}
|
||||
|
||||
.preview-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.preview-item {
|
||||
position: relative;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
|
||||
image { width: 100%; height: 100%; border-radius: 8rpx; }
|
||||
|
||||
.del-btn {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 50%;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
text-align: center;
|
||||
border-bottom-left-radius: 8rpx;
|
||||
border-bottom-right-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
|
||||
.btn {
|
||||
font-size: 26rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #fff;
|
||||
border: 1rpx solid #ddd;
|
||||
color: #666;
|
||||
|
||||
&.primary {
|
||||
background: #00c05a;
|
||||
border-color: #00c05a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +1,26 @@
|
||||
/**
|
||||
* 商户端商品数据 Mock
|
||||
* 使用用户端商品信息（mockGoodsList）
|
||||
*/
|
||||
import type { MerchantGoods } from '@/typings/merchant'
|
||||
import { GoodsStatus } from '@/typings/merchant'
|
||||
import { mockGoodsList } from '@/mock/goods'
|
||||
|
||||
export const mockMerchantGoods: MerchantGoods[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: '苹果 iPhone 15 Pro',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'Apple',
|
||||
price: 8999.00,
|
||||
costPrice: 7500.00,
|
||||
stock: 50,
|
||||
sales: 128,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/iphone15.jpg'],
|
||||
description: '全新 iPhone 15 Pro，搭载 A17 Pro 芯片',
|
||||
specs: [
|
||||
{ name: '颜色', values: ['黑色', '白色', '蓝色'] },
|
||||
{ name: '存储', values: ['128GB', '256GB', '512GB'] },
|
||||
],
|
||||
skuList: [
|
||||
{ id: 'sku1', specs: { '颜色': '黑色', '存储': '128GB' }, price: 7999, stock: 20, image: '' },
|
||||
{ id: 'sku2', specs: { '颜色': '黑色', '存储': '256GB' }, price: 8999, stock: 15, image: '' },
|
||||
{ id: 'sku3', specs: { '颜色': '白色', '存储': '128GB' }, price: 7999, stock: 10, image: '' },
|
||||
{ id: 'sku4', specs: { '颜色': '白色', '存储': '256GB' }, price: 8999, stock: 5, image: '' },
|
||||
],
|
||||
createTime: '2024-12-01 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '华为 Mate 60 Pro',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'HUAWEI',
|
||||
price: 6999.00,
|
||||
costPrice: 5800.00,
|
||||
stock: 30,
|
||||
sales: 86,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/mate60.jpg'],
|
||||
description: '华为 Mate 60 Pro，搭载麒麟 9000S 芯片',
|
||||
createTime: '2024-12-02 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '小米 14 Ultra',
|
||||
categoryId: '1',
|
||||
categoryName: '手机',
|
||||
brand: 'Xiaomi',
|
||||
price: 5999.00,
|
||||
costPrice: 4800.00,
|
||||
stock: 0,
|
||||
sales: 56,
|
||||
status: GoodsStatus.SOLD_OUT,
|
||||
images: ['/static/goods/mi14.jpg'],
|
||||
description: '小米 14 Ultra，徕卡影像旗舰',
|
||||
createTime: '2024-12-03 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'AirPods Pro 2',
|
||||
categoryId: '2',
|
||||
categoryName: '耳机',
|
||||
brand: 'Apple',
|
||||
price: 1899.00,
|
||||
costPrice: 1500.00,
|
||||
stock: 100,
|
||||
sales: 256,
|
||||
status: GoodsStatus.ON,
|
||||
images: ['/static/goods/airpods.jpg'],
|
||||
description: 'AirPods Pro 第二代，主动降噪',
|
||||
createTime: '2024-12-04 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
},
|
||||
]
|
||||
export const mockMerchantGoods: MerchantGoods[] = mockGoodsList.map(goods => ({
|
||||
id: goods.id,
|
||||
name: goods.name,
|
||||
categoryId: goods.categoryId,
|
||||
categoryName: goods.categoryName,
|
||||
brand: '',
|
||||
price: goods.price,
|
||||
costPrice: Math.round(goods.price * 0.7), // 成本价为售价的70%
|
||||
stock: goods.stock,
|
||||
sales: goods.sales,
|
||||
status: goods.stock > 0 ? GoodsStatus.ON : GoodsStatus.OFF,
|
||||
images: goods.images,
|
||||
description: goods.description,
|
||||
specs: goods.specs,
|
||||
skuList: [], // 简化处理，不使用多规格
|
||||
createTime: '2024-12-01 10:00:00',
|
||||
updateTime: '2024-12-17 10:00:00',
|
||||
}))
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
/**
|
||||
* 商户端订单数据 Mock
|
||||
* 使用用户端商品信息（mockGoodsList）
|
||||
*/
|
||||
import type { MerchantOrder } from '@/typings/merchant'
|
||||
import { OrderStatus } from '@/typings/merchant'
|
||||
import { mockGoodsList } from '@/mock/goods'
|
||||
|
||||
export const mockMerchantOrders: MerchantOrder[] = [
|
||||
{
|
||||
@@ -11,20 +13,20 @@ export const mockMerchantOrders: MerchantOrder[] = [
|
||||
customerName: '张三',
|
||||
customerPhone: '138****8000',
|
||||
status: OrderStatus.PENDING,
|
||||
amount: 2999.00,
|
||||
amount: 20.00,
|
||||
freight: 0,
|
||||
payAmount: 2999.00,
|
||||
payAmount: 20.00,
|
||||
remark: '请尽快发货',
|
||||
goods: [
|
||||
{
|
||||
id: 'g1',
|
||||
goodsId: '101',
|
||||
name: '苹果 iPhone 15 Pro 256GB',
|
||||
image: '/static/goods/iphone15.jpg',
|
||||
skuName: '黑色 256GB',
|
||||
price: 2999.00,
|
||||
goodsId: 'goods_001',
|
||||
name: '桂味新鲜荔枝现摘现发当季水果自家果园荔枝',
|
||||
image: '/static/product/1/1.jpg',
|
||||
skuName: '5斤装 特级',
|
||||
price: 20.00,
|
||||
quantity: 1,
|
||||
amount: 2999.00,
|
||||
amount: 20.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
@@ -44,19 +46,19 @@ export const mockMerchantOrders: MerchantOrder[] = [
|
||||
customerName: '李四',
|
||||
customerPhone: '139****9000',
|
||||
status: OrderStatus.SHIPPING,
|
||||
amount: 1580.00,
|
||||
amount: 100.00,
|
||||
freight: 10,
|
||||
payAmount: 1590.00,
|
||||
payAmount: 110.00,
|
||||
goods: [
|
||||
{
|
||||
id: 'g2',
|
||||
goodsId: '102',
|
||||
name: '华为 Mate 60 Pro',
|
||||
image: '/static/goods/mate60.jpg',
|
||||
skuName: '白色 512GB',
|
||||
price: 1580.00,
|
||||
quantity: 1,
|
||||
amount: 1580.00,
|
||||
goodsId: 'goods_002',
|
||||
name: '老农田桂圆肉干无核新货8a龙眼肉干500g厚元肉干',
|
||||
image: '/static/product/2/1.jpg',
|
||||
skuName: '500g',
|
||||
price: 50.00,
|
||||
quantity: 2,
|
||||
amount: 100.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
@@ -76,19 +78,19 @@ export const mockMerchantOrders: MerchantOrder[] = [
|
||||
customerName: '王五',
|
||||
customerPhone: '137****7000',
|
||||
status: OrderStatus.SHIPPED,
|
||||
amount: 456.50,
|
||||
amount: 150.00,
|
||||
freight: 0,
|
||||
payAmount: 456.50,
|
||||
payAmount: 150.00,
|
||||
goods: [
|
||||
{
|
||||
id: 'g3',
|
||||
goodsId: '103',
|
||||
name: '小米 14 Ultra',
|
||||
image: '/static/goods/mi14.jpg',
|
||||
skuName: '黑色 256GB',
|
||||
price: 456.50,
|
||||
quantity: 1,
|
||||
amount: 456.50,
|
||||
goodsId: 'goods_003',
|
||||
name: '自然禾方化橘红陈皮无糖植物饮料350ml*9瓶整箱装',
|
||||
image: '/static/product/3/1.jpg',
|
||||
skuName: '9瓶装',
|
||||
price: 50.00,
|
||||
quantity: 3,
|
||||
amount: 150.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
@@ -119,19 +121,19 @@ export const mockMerchantOrders: MerchantOrder[] = [
|
||||
customerName: '赵六',
|
||||
customerPhone: '136****6000',
|
||||
status: OrderStatus.COMPLETED,
|
||||
amount: 888.00,
|
||||
amount: 30.00,
|
||||
freight: 0,
|
||||
payAmount: 888.00,
|
||||
payAmount: 30.00,
|
||||
goods: [
|
||||
{
|
||||
id: 'g4',
|
||||
goodsId: '104',
|
||||
name: 'AirPods Pro 2',
|
||||
image: '/static/goods/airpods.jpg',
|
||||
skuName: '默认',
|
||||
price: 888.00,
|
||||
goodsId: 'goods_005',
|
||||
name: '罗非鱼新鲜冷冻食材烧烤红烧净膛烤鱼酒店食堂快',
|
||||
image: '/static/product/5/1.jpg',
|
||||
skuName: '500g',
|
||||
price: 30.00,
|
||||
quantity: 1,
|
||||
amount: 888.00,
|
||||
amount: 30.00,
|
||||
},
|
||||
],
|
||||
address: {
|
||||
|
||||
BIN
src/static/fb/1.jpg
Normal file
BIN
src/static/fb/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
BIN
src/static/fb/2.jpg
Normal file
BIN
src/static/fb/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
src/static/tc/1.jpg
Normal file
BIN
src/static/tc/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/static/tc/2.jpg
Normal file
BIN
src/static/tc/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
src/static/tc/3.jpg
Normal file
BIN
src/static/tc/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
src/static/tc/4.jpg
Normal file
BIN
src/static/tc/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
33
src/store/bank.ts
Normal file
33
src/store/bank.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { getBankStats } from '@/pagesBank/api'
|
||||
import type { BankStats } from '@/typings/bank'
|
||||
|
||||
export const useBankStore = defineStore('bank', () => {
|
||||
const stats = ref<BankStats | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
/** 获取银行统计数据 */
|
||||
async function fetchStats() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getBankStats()
|
||||
stats.value = res
|
||||
} catch (error) {
|
||||
console.error('Fetch bank stats failed:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置状态 */
|
||||
function reset() {
|
||||
stats.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
stats,
|
||||
loading,
|
||||
fetchStats,
|
||||
reset
|
||||
}
|
||||
})
|
||||
@@ -1,7 +1,8 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { User } from '@/typings/mall'
|
||||
import { defineStore } from 'pinia'
|
||||
import { mockMember } from '@/mock/member'
|
||||
|
||||
// i-carbon-building
|
||||
// i-carbon-logo-angular
|
||||
/**
|
||||
* 客户端类型枚举
|
||||
* - user: 用户端（消费者）
|
||||
@@ -12,6 +13,8 @@ export enum ClientType {
|
||||
USER = 'user',
|
||||
MERCHANT = 'merchant',
|
||||
BANK = 'bank',
|
||||
GOVERNMENT = 'government',
|
||||
INSURANCE = 'insurance',
|
||||
}
|
||||
|
||||
/** 客户端类型配置 */
|
||||
@@ -32,11 +35,25 @@ export const CLIENT_TYPE_CONFIG = {
|
||||
},
|
||||
[ClientType.BANK]: {
|
||||
label: '银行端',
|
||||
icon: 'i-carbon-bank',
|
||||
icon: 'i-carbon-home',
|
||||
color: '#00c05a',
|
||||
description: '账款审核、金融服务',
|
||||
homePage: '/pagesBank/dashboard/index',
|
||||
},
|
||||
[ClientType.GOVERNMENT]: {
|
||||
label: '政务端',
|
||||
icon: 'i-carbon-building',
|
||||
color: '#d53f8c',
|
||||
description: '合规监管、风险预警',
|
||||
homePage: '/pagesGovernment/dashboard/index',
|
||||
},
|
||||
[ClientType.INSURANCE]: {
|
||||
label: '保险端',
|
||||
icon: 'i-carbon-logo-angular',
|
||||
color: '#3182ce',
|
||||
description: '保单管理、理赔服务',
|
||||
homePage: '/pagesInsurance/dashboard/index',
|
||||
},
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
@@ -91,7 +108,7 @@ export const useUserStore = defineStore('user', {
|
||||
this.clientType = ClientType.USER
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
persist: {
|
||||
key: 'shop-toy-user',
|
||||
storage: {
|
||||
@@ -100,4 +117,3 @@ export const useUserStore = defineStore('user', {
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -38,9 +38,8 @@ export const userTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '首页',
|
||||
pagePath: 'pages/index/index',
|
||||
iconType: 'image',
|
||||
icon: '/static/logo2.png',
|
||||
iconActive: '/static/logo1.png',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-home',
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/sort/index',
|
||||
@@ -124,13 +123,71 @@ export const bankTabbarList: CustomTabBarItem[] = [
|
||||
},
|
||||
]
|
||||
|
||||
// ==================== 政务端 Tabbar 配置 ====================
|
||||
export const governmentTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesGovernment/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-dashboard',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesGovernment/supervise/list',
|
||||
text: '检查',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-task',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesGovernment/report/list',
|
||||
text: '报表',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-document',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesGovernment/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// ==================== 保险端 Tabbar 配置 ====================
|
||||
export const insuranceTabbarList: CustomTabBarItem[] = [
|
||||
{
|
||||
text: '工作台',
|
||||
pagePath: 'pagesInsurance/dashboard/index',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-dashboard',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesInsurance/policy/list',
|
||||
text: '保单',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-document-protected',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesInsurance/claim/list',
|
||||
text: '理赔',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-request-quote',
|
||||
},
|
||||
{
|
||||
pagePath: 'pagesInsurance/me/index',
|
||||
text: '我的',
|
||||
iconType: 'unocss',
|
||||
icon: 'i-carbon-user',
|
||||
},
|
||||
]
|
||||
|
||||
// 根据客户端类型获取对应的 tabbar 配置
|
||||
export type ClientTypeKey = 'user' | 'merchant' | 'bank'
|
||||
export type ClientTypeKey = 'user' | 'merchant' | 'bank' | 'government' | 'insurance'
|
||||
export function getTabbarListByClientType(clientType: ClientTypeKey): CustomTabBarItem[] {
|
||||
const tabbarMap: Record<ClientTypeKey, CustomTabBarItem[]> = {
|
||||
user: userTabbarList,
|
||||
merchant: merchantTabbarList,
|
||||
bank: bankTabbarList,
|
||||
government: governmentTabbarList,
|
||||
insurance: insuranceTabbarList,
|
||||
}
|
||||
return tabbarMap[clientType] || userTabbarList
|
||||
}
|
||||
|
||||
140
src/typings/bank.ts
Normal file
140
src/typings/bank.ts
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* 银行端类型定义
|
||||
*/
|
||||
|
||||
/** 审核状态 */
|
||||
export enum AuditStatus {
|
||||
PENDING = 'pending', // 待审核
|
||||
APPROVED = 'approved', // 已通过
|
||||
REJECTED = 'rejected', // 已拒绝
|
||||
}
|
||||
|
||||
/** 审核类型 */
|
||||
export enum AuditType {
|
||||
WITHDRAW = 'withdraw', // 提现审核
|
||||
CREDIT = 'credit', // 授信额度申请
|
||||
MERCHANT = 'merchant', // 商户入驻审核
|
||||
}
|
||||
|
||||
/** 审核申请列表项 */
|
||||
export interface AuditItem {
|
||||
id: string
|
||||
merchantId: string
|
||||
merchantName: string
|
||||
type: AuditType
|
||||
amount: number
|
||||
status: AuditStatus
|
||||
applyTime: string
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/** 提现审核详情 */
|
||||
export interface WithdrawAuditDetail extends AuditItem {
|
||||
bankName: string
|
||||
bankAccount: string
|
||||
memberLevel?: string // 会员等级
|
||||
transactionCount?: number // 近期交易频次
|
||||
}
|
||||
|
||||
/** 银行客户信息 */
|
||||
export interface BankCustomer {
|
||||
id: string
|
||||
merchantId: string
|
||||
merchantName: string
|
||||
logo?: string
|
||||
creditLimit: number // 总授信额度
|
||||
usedLimit: number // 已使用额度
|
||||
balance: number // 当前余额
|
||||
status: 'normal' | 'warning' | 'frozen'
|
||||
contactName: string
|
||||
contactPhone: string
|
||||
joinTime: string
|
||||
}
|
||||
|
||||
/** 拜访计划状态 */
|
||||
export enum VisitStatus {
|
||||
PENDING = 'pending', // 待拜访
|
||||
COMPLETED = 'completed', // 已完成
|
||||
CANCELLED = 'cancelled', // 已取消
|
||||
}
|
||||
|
||||
/** 营销产品 */
|
||||
export interface MarketingProduct {
|
||||
id: string
|
||||
name: string
|
||||
type: 'loan' | 'credit' | 'settlement' | 'other'
|
||||
}
|
||||
|
||||
/** 拜访计划 */
|
||||
export interface VisitPlan {
|
||||
id: string
|
||||
customerId: string
|
||||
customerName: string
|
||||
date: string
|
||||
location: string
|
||||
latitude?: number
|
||||
longitude?: number
|
||||
products: MarketingProduct[]
|
||||
topic: string
|
||||
remark?: string
|
||||
photos: string[]
|
||||
status: VisitStatus
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
/** 拜访计划创建参数 */
|
||||
export interface CreateVisitPlanParams {
|
||||
customerId: string
|
||||
date: string
|
||||
productIds: string[]
|
||||
topic: string
|
||||
remark?: string
|
||||
}
|
||||
|
||||
/** 拜访计划完成参数 */
|
||||
export interface CompleteVisitPlanParams {
|
||||
location: string
|
||||
latitude?: number
|
||||
longitude?: number
|
||||
photos: string[]
|
||||
}
|
||||
|
||||
/** 报表分类 */
|
||||
export enum ReportCategory {
|
||||
MULTI_DIMENSION = 'multi_dimension', // 多维统计
|
||||
VISITOR = 'visitor', // 访客报表
|
||||
MARKETING = 'marketing', // 营销报表
|
||||
BENEFIT = 'benefit', // 权益管理
|
||||
}
|
||||
|
||||
/** 日期维度 */
|
||||
export enum DateDimension {
|
||||
DAY = 'day', // 按日
|
||||
MONTH = 'month', // 按月
|
||||
QUARTER = 'quarter', // 按季
|
||||
CUSTOM = 'custom', // 自定义
|
||||
}
|
||||
|
||||
/** 报表类型 */
|
||||
export interface ReportType {
|
||||
id: string
|
||||
name: string
|
||||
category: ReportCategory
|
||||
}
|
||||
|
||||
/** 报表下载参数 */
|
||||
export interface ReportDownloadParams {
|
||||
reportId: string
|
||||
dimension: DateDimension
|
||||
date: string
|
||||
}
|
||||
|
||||
/** 银行统计指标 */
|
||||
export interface BankStats {
|
||||
pendingAuditStore: number // 待审核商户
|
||||
pendingAuditWithdraw: number // 待审核提现
|
||||
todayApprovedCount: number // 今日审批通过数
|
||||
totalLoanAmount: number // 累计发放金额 (元)
|
||||
activeCustomerCount: number // 活跃客户数
|
||||
}
|
||||
154
src/typings/loan.ts
Normal file
154
src/typings/loan.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* 贷款相关类型定义
|
||||
*/
|
||||
|
||||
/** 征信信息 */
|
||||
export interface CreditInfo {
|
||||
creditScore: number // 征信分数
|
||||
creditLevel: string // 信用等级
|
||||
loanRecords: { // 贷款记录
|
||||
bank: string
|
||||
amount: number
|
||||
status: 'normal' | 'overdue' | 'paid'
|
||||
date: string
|
||||
}[]
|
||||
overdueRecords?: { // 逾期记录
|
||||
amount: number
|
||||
overdueDays: number
|
||||
date: string
|
||||
}[]
|
||||
queryTime: string // 查询时间
|
||||
}
|
||||
|
||||
/** 信用评估分数 */
|
||||
export interface CreditAssessment {
|
||||
score: number // 评估分数 (0-100)
|
||||
level: string // 评估等级 (优秀/良好/一般/较差)
|
||||
factors: { // 评估因素
|
||||
name: string
|
||||
score: number
|
||||
description: string
|
||||
}[]
|
||||
updateTime: string // 更新时间
|
||||
}
|
||||
|
||||
/** 贷款申请状态 */
|
||||
export enum LoanStatus {
|
||||
DRAFT = 'draft', // 草稿
|
||||
SUBMITTED = 'submitted', // 已提交
|
||||
ACCEPTED = 'accepted', // 已受理
|
||||
INVESTIGATING = 'investigating', // 上门调查中
|
||||
REPORTED = 'reported', // 已上报
|
||||
APPROVING = 'approving', // 审批中
|
||||
APPROVED = 'approved', // 审批通过
|
||||
REJECTED = 'rejected', // 已拒绝
|
||||
PENDING_SUPPLEMENT = 'pending_supplement', // 待完善（补充资料）
|
||||
SIGNING = 'signing', // 待签约
|
||||
SIGNED = 'signed', // 已签约
|
||||
DISBURSED = 'disbursed', // 已放款
|
||||
}
|
||||
|
||||
/** 辅助材料类型 */
|
||||
export type MaterialType = 'order' | 'flow' | 'invoice' | 'contract' | 'attachment' | 'other'
|
||||
|
||||
/** 商家辅助材料 */
|
||||
export interface AssistMaterial {
|
||||
merchantId: string
|
||||
merchantName: string
|
||||
loanApplicationId: string
|
||||
materials: {
|
||||
type: MaterialType // 订单/流水/发票/其他
|
||||
url: string
|
||||
name?: string
|
||||
uploadTime: string
|
||||
}[]
|
||||
submitTime: string
|
||||
status: 'pending' | 'submitted' | 'refused' // 待提交/已提交/拒绝提供
|
||||
}
|
||||
|
||||
/** 贷款申请关联的商家 */
|
||||
export interface RelatedMerchant {
|
||||
merchantId: string
|
||||
merchantName: string
|
||||
logo?: string
|
||||
lastTradeTime: string
|
||||
selected: boolean
|
||||
assistStatus: 'pending' | 'submitted' | 'refused' // 辅助材料状态
|
||||
materials?: AssistMaterial
|
||||
}
|
||||
|
||||
/** 银行流程节点记录 */
|
||||
export interface BankProcessRecord {
|
||||
step: 'accept' | 'investigate' | 'report' | 'approve' | 'sign' | 'disburse'
|
||||
operator: string
|
||||
operateTime: string
|
||||
result?: 'pass' | 'reject'
|
||||
opinion?: string
|
||||
attachments?: string[] // 附件，如调查报告
|
||||
}
|
||||
|
||||
/** 用户订单信息 */
|
||||
export interface UserOrder {
|
||||
orderNo: string // 订单号
|
||||
goodsName: string // 商品名称
|
||||
goodsImage: string // 商品图片
|
||||
quantity: number // 购买数量
|
||||
amount: number // 订单金额
|
||||
orderTime: string // 下单时间
|
||||
status: string // 订单状态
|
||||
}
|
||||
|
||||
/** 贷款申请详情 */
|
||||
export interface LoanApplication {
|
||||
id: string
|
||||
userId: string
|
||||
userName: string
|
||||
userPhone: string
|
||||
|
||||
// 关联的商家列表
|
||||
relatedMerchants: RelatedMerchant[]
|
||||
|
||||
// 用户商城消费订单
|
||||
userOrders?: UserOrder[] // 用户在商城的消费订单
|
||||
|
||||
// 申请信息
|
||||
amount: number // 申请金额(万)
|
||||
term: number // 期限(月/年)
|
||||
status: LoanStatus
|
||||
|
||||
// 银行受理人信息
|
||||
handlerName?: string // 受理人姓名
|
||||
handlerPhone?: string // 受理人手机号
|
||||
|
||||
// 个人信息
|
||||
personalInfo: {
|
||||
name: string
|
||||
phone: string
|
||||
idCard: string
|
||||
region: string[]
|
||||
detailAddress: string
|
||||
}
|
||||
|
||||
// 经营信息
|
||||
businessInfo: {
|
||||
businessProject: string
|
||||
businessTime: string
|
||||
annualIncome: number
|
||||
hasDebt: 'yes' | 'no'
|
||||
debtAmount?: number
|
||||
loanDemand: number
|
||||
assets: string[]
|
||||
}
|
||||
|
||||
// 证件信息
|
||||
documentInfo: {
|
||||
businessLicense: string
|
||||
otherMaterials: string[]
|
||||
}
|
||||
|
||||
// 银行流程记录
|
||||
processRecords: BankProcessRecord[]
|
||||
|
||||
createTime: string
|
||||
updateTime: string
|
||||
}
|
||||
@@ -251,4 +251,7 @@ export interface LoanApplicationRecord {
|
||||
progress?: LoanApplicationProgress // 进度条数据 (仅Processing和Pending状态需要)
|
||||
alertInfo?: LoanApplicationAlertInfo // 提示信息框 (可空)
|
||||
actions: LoanApplicationAction[] // 底部按钮配置
|
||||
// 银行受理人信息
|
||||
handlerName?: string // 受理人姓名
|
||||
handlerPhone?: string // 受理人手机号
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user