Compare commits

..

11 Commits

Author SHA1 Message Date
d8785fe915 流程信息 2025-12-26 18:13:42 +08:00
e8e6778d08 优化 2025-12-26 15:13:33 +08:00
ee00783eb3 优化产品的选择 2025-12-26 09:40:57 +08:00
6ec846472d 添加报表 2025-12-25 17:18:12 +08:00
d46d50018e 修样式 2025-12-25 16:14:37 +08:00
5312cfcb2e 银行端口添加客户拜访功能 2025-12-25 14:26:07 +08:00
6bb0e00d69 添加OpenSpec 规范 2025-12-25 09:59:38 +08:00
79e7923b77 修改错误 2025-12-25 09:29:09 +08:00
FlowerWater
a5c7e9f6ca feat: 修复 2025-12-23 17:18:55 +08:00
FlowerWater
06df763ed4 feat: 银行端 2025-12-20 12:43:50 +08:00
FlowerWater
9591234e70 feat: 商家端代码 2025-12-19 12:04:22 +08:00
78 changed files with 15208 additions and 453 deletions

2
.gitignore vendored
View File

@@ -45,4 +45,4 @@ src/manifest.json
# 更新 uni-app 官方版本 # 更新 uni-app 官方版本
# npx @dcloudio/uvm@latest # npx @dcloudio/uvm@latest
src/pages.json # src/pages.json

View File

@@ -0,0 +1,17 @@
<!-- OPENSPEC:START -->
**Guardrails**
- Favor straightforward, minimal implementations first and add complexity only when it is requested or clearly required.
- Keep changes tightly scoped to the requested outcome.
- Refer to `openspec/AGENTS.md` (located inside the `openspec/` directory—run `ls openspec` or `openspec update` if you don't see it) if you need additional OpenSpec conventions or clarifications.
**Steps**
Track these steps as TODOs and complete them one by one.
1. Read `changes/<id>/proposal.md`, `design.md` (if present), and `tasks.md` to confirm scope and acceptance criteria.
2. Work through tasks sequentially, keeping edits minimal and focused on the requested change.
3. Confirm completion before updating statuses—make sure every item in `tasks.md` is finished.
4. Update the checklist after all work is done so each task is marked `- [x]` and reflects reality.
5. Reference `openspec list` or `openspec show <item>` when additional context is required.
**Reference**
- Use `openspec show <id> --json --deltas-only` if you need additional context from the proposal while implementing.
<!-- OPENSPEC:END -->

View File

@@ -0,0 +1,21 @@
<!-- OPENSPEC:START -->
**Guardrails**
- Favor straightforward, minimal implementations first and add complexity only when it is requested or clearly required.
- Keep changes tightly scoped to the requested outcome.
- Refer to `openspec/AGENTS.md` (located inside the `openspec/` directory—run `ls openspec` or `openspec update` if you don't see it) if you need additional OpenSpec conventions or clarifications.
**Steps**
1. Determine the change ID to archive:
- If this prompt already includes a specific change ID (for example inside a `<ChangeId>` block populated by slash-command arguments), use that value after trimming whitespace.
- If the conversation references a change loosely (for example by title or summary), run `openspec list` to surface likely IDs, share the relevant candidates, and confirm which one the user intends.
- Otherwise, review the conversation, run `openspec list`, and ask the user which change to archive; wait for a confirmed change ID before proceeding.
- If you still cannot identify a single change ID, stop and tell the user you cannot archive anything yet.
2. Validate the change ID by running `openspec list` (or `openspec show <id>`) and stop if the change is missing, already archived, or otherwise not ready to archive.
3. Run `openspec archive <id> --yes` so the CLI moves the change and applies spec updates without prompts (use `--skip-specs` only for tooling-only work).
4. Review the command output to confirm the target specs were updated and the change landed in `changes/archive/`.
5. Validate with `openspec validate --strict` and inspect with `openspec show <id>` if anything looks off.
**Reference**
- Use `openspec list` to confirm change IDs before archiving.
- Inspect refreshed specs with `openspec list --specs` and address any validation issues before handing off.
<!-- OPENSPEC:END -->

View File

@@ -0,0 +1,22 @@
<!-- OPENSPEC:START -->
**Guardrails**
- Favor straightforward, minimal implementations first and add complexity only when it is requested or clearly required.
- Keep changes tightly scoped to the requested outcome.
- Refer to `openspec/AGENTS.md` (located inside the `openspec/` directory—run `ls openspec` or `openspec update` if you don't see it) if you need additional OpenSpec conventions or clarifications.
- Identify any vague or ambiguous details and ask the necessary follow-up questions before editing files.
- Do not write any code during the proposal stage. Only create design documents (proposal.md, tasks.md, design.md, and spec deltas). Implementation happens in the apply stage after approval.
**Steps**
1. Review `openspec/project.md`, run `openspec list` and `openspec list --specs`, and inspect related code or docs (e.g., via `rg`/`ls`) to ground the proposal in current behaviour; note any gaps that require clarification.
2. Choose a unique verb-led `change-id` and scaffold `proposal.md`, `tasks.md`, and `design.md` (when needed) under `openspec/changes/<id>/`.
3. Map the change into concrete capabilities or requirements, breaking multi-scope efforts into distinct spec deltas with clear relationships and sequencing.
4. Capture architectural reasoning in `design.md` when the solution spans multiple systems, introduces new patterns, or demands trade-off discussion before committing to specs.
5. Draft spec deltas in `changes/<id>/specs/<capability>/spec.md` (one folder per capability) using `## ADDED|MODIFIED|REMOVED Requirements` with at least one `#### Scenario:` per requirement and cross-reference related capabilities when relevant.
6. Draft `tasks.md` as an ordered list of small, verifiable work items that deliver user-visible progress, include validation (tests, tooling), and highlight dependencies or parallelizable work.
7. Validate with `openspec validate <id> --strict` and resolve every issue before sharing the proposal.
**Reference**
- Use `openspec show <id> --json --deltas-only` or `openspec show <spec> --type spec` to inspect details when validation fails.
- Search existing requirements with `rg -n "Requirement:|Scenario:" openspec/specs` before writing new ones.
- Explore the codebase with `rg <keyword>`, `ls`, or direct file reads so proposals align with current implementation realities.
<!-- OPENSPEC:END -->

18
AGENTS.md Normal file
View File

@@ -0,0 +1,18 @@
<!-- OPENSPEC:START -->
# OpenSpec Instructions
These instructions are for AI assistants working in this project.
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 -->

456
openspec/AGENTS.md Normal file
View File

@@ -0,0 +1,456 @@
# OpenSpec Instructions
Instructions for AI coding assistants using OpenSpec for spec-driven development.
## 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 12 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 arent 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.

View File

@@ -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` 添加报表入口

View File

@@ -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** 点击入口跳转至报表列表页面

View 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 验证仪表盘入口正常跳转

View File

@@ -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` - 新增拜访计划类型定义

View File

@@ -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 保存用户输入的地址信息

View File

@@ -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 测试表单验证

View File

@@ -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` - 更新需求规格说明

View File

@@ -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 要求至少上传一张拜访场景图

View File

@@ -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] 测试拜访计划详情页面
- 验证位置和照片信息正确显示
- 验证编辑功能正常工作

View File

@@ -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` - 商城类型定义(可能需要扩展)

View File

@@ -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 正确显示该状态

View File

@@ -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 验证商家端商品数据与用户端商品信息一致

216
openspec/project.md Normal file
View File

@@ -0,0 +1,216 @@
# Project Context
## Purpose
这是一个基于 unibest 模板开发的跨平台电商应用系统,包含三个主要端:
1. **用户端**C端提供商品浏览、购物车、订单管理、会员服务、金融服务等功能
2. **商家端**B端提供商品管理、订单处理、财务管理、贷款协助、店铺设置等功能
3. **银行端**B端提供客户管理、贷款审核、交易记录、提现管理等功能
项目支持多平台部署,包括 H5、iOS、Android 以及多个小程序平台微信、支付宝、百度、字节、快手、QQ、钉钉、小红书等
## 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 - 请求库(推荐)
- **简单封装的 http** - 轻量级请求方案
- **vue-query** - 查询状态管理(用于自动生成接口)
### 工具库
- **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
## 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 自动导入
- 组件自动导入(支持递归扫描子目录)
### Architecture Patterns
#### 目录结构
```
src/
├── api/ # API 接口定义
├── components/ # 公共组件
├── hooks/ # 组合式函数
├── http/ # HTTP 请求封装
├── layouts/ # 布局组件
├── mock/ # Mock 数据
├── pages/ # 用户端页面
├── pagesMerchant/# 商家端页面
├── pagesBank/ # 银行端页面
├── router/ # 路由配置
├── service/ # 自动生成的服务接口
├── static/ # 静态资源
└── typings/ # 类型定义
```
#### 路由策略
- **约定式路由**:基于文件系统自动生成路由
- **Layout 布局**:支持多布局系统
- **分包优化**:使用 `@uni-ku/bundle-optimizer` 进行分包优化
- **异步导入**:支持模块和组件的异步跨包引用
#### 登录策略
支持两种登录策略(通过 `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 进行组件测试
- 使用 Playwright 进行端到端测试
### 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端
- **仪表盘**:数据统计
- **客户管理**:客户列表、客户详情、交易记录、提现记录
- **审核管理**:贷款审核列表、审核详情
### 关键概念
- **多端适配**:同一套代码适配 H5、App、小程序
- **角色权限**:用户、商家、银行三种角色
- **金融服务**:信用额度、贷款申请、结算、核销
- **会员体系**:会员卡、会员权益
## Important Constraints
### 技术约束
- **Node.js 版本**:必须 >= 20
- **pnpm 版本**:必须 >= 9
- **包管理器**:强制使用 pnpm通过 `only-allow pnpm`
- **TypeScript**:必须使用 TypeScript 开发
- **平台限制**:不同 UI 框架支持的平台有所不同
### 业务约束
- **多端兼容性**:需要确保在所有目标平台上正常运行
- **性能要求**:分包优化、按需加载、减少包体积
- **安全性**:登录拦截、请求加密、数据验证
### 开发约束
- **代码规范**:必须通过 ESLint 检查
- **提交规范**:必须符合 Conventional Commits 规范
- **文件忽略**:自动生成的文件(如 `src/service/**`)不应提交
## 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** - 打包分析工具

View 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** 点击入口跳转至报表列表页面

View 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 要求至少上传一张拜访场景图

View File

@@ -28,9 +28,16 @@ export default defineUniPages({
pages: [ pages: [
{ path: 'dashboard/index', style: { navigationBarTitleText: '商家工作台' } }, { path: 'dashboard/index', style: { navigationBarTitleText: '商家工作台' } },
{ path: 'order/list', style: { navigationBarTitleText: '订单管理' } }, { path: 'order/list', style: { navigationBarTitleText: '订单管理' } },
{ path: 'order/detail', style: { navigationBarTitleText: '订单详情' } },
{ path: 'goods/list', style: { navigationBarTitleText: '商品管理' } }, { path: 'goods/list', style: { navigationBarTitleText: '商品管理' } },
{ path: 'goods/edit', style: { navigationBarTitleText: '编辑商品' } },
{ path: 'finance/index', style: { navigationBarTitleText: '财务中心' } }, { path: 'finance/index', style: { navigationBarTitleText: '财务中心' } },
{ path: 'finance/settlement', style: { navigationBarTitleText: '结算记录' } },
{ path: 'finance/withdraw', style: { navigationBarTitleText: '申请提现' } },
{ path: 'me/index', style: { navigationBarTitleText: '商家中心' } }, { path: 'me/index', style: { navigationBarTitleText: '商家中心' } },
{ path: 'me/shop', style: { navigationBarTitleText: '店铺设置' } },
{ path: 'me/account', style: { navigationBarTitleText: '账号安全' } },
{ path: 'loan/assist', style: { navigationBarTitleText: '贷款辅助材料' } },
], ],
}, },
{ {
@@ -38,7 +45,16 @@ export default defineUniPages({
pages: [ pages: [
{ path: 'dashboard/index', style: { navigationBarTitleText: '银行工作台' } }, { path: 'dashboard/index', style: { navigationBarTitleText: '银行工作台' } },
{ path: 'audit/list', style: { navigationBarTitleText: '审核列表' } }, { path: 'audit/list', style: { navigationBarTitleText: '审核列表' } },
{ path: 'audit/detail', style: { navigationBarTitleText: '审核详情' } },
{ path: 'customer/list', 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: '银行中心' } }, { path: 'me/index', style: { navigationBarTitleText: '银行中心' } },
], ],
}, },

1034
src/api/loan.ts Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -24,6 +24,8 @@ export const mockLoanApplicationRecords: LoanApplicationRecord[] = [
type: "info", type: "info",
content: "您的申请正在风控部门审核中预计还需要1-2个工作日完成评估" content: "您的申请正在风控部门审核中预计还需要1-2个工作日完成评估"
}, },
handlerName: "王经理",
handlerPhone: "13800138888",
actions: [ actions: [
{ {
code: "VIEW_DETAIL", code: "VIEW_DETAIL",
@@ -104,6 +106,8 @@ export const mockLoanApplicationRecords: LoanApplicationRecord[] = [
type: "info", type: "info",
content: "您的申请已进入资料审核阶段,请耐心等待" content: "您的申请已进入资料审核阶段,请耐心等待"
}, },
handlerName: "刘经理",
handlerPhone: "13800139999",
actions: [ actions: [
{ {
code: "CANCEL", code: "CANCEL",

336
src/pages.json Normal file
View File

@@ -0,0 +1,336 @@
{
"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"
]
}
},
"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": "me/index",
"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": "拜访详情"
}
}
]
}
],
"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"
}
]
}
}

View File

@@ -73,6 +73,13 @@ function handleActionClick(record: LoanApplicationRecord, action: any) {
} }
} }
// 拨打银行受理人电话
function handleCallPhone(phone: string) {
uni.makePhoneCall({
phoneNumber: phone
})
}
// 获取状态颜色 // 获取状态颜色
function getStatusColor(status: LoanApplicationStatus) { function getStatusColor(status: LoanApplicationStatus) {
switch (status) { switch (status) {
@@ -185,10 +192,25 @@ function getButtonStyle(style: string) {
</view> </view>
</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 class="actions-section">
<view <view
v-for="action in record.actions" v-for="action in record.actions"
:key="action.code" :key="action.code"
class="action-btn" class="action-btn"
:style="getButtonStyle(action.style)" :style="getButtonStyle(action.style)"
@@ -251,18 +273,33 @@ function getButtonStyle(style: string) {
</view> </view>
</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 v-if="selectedRecord.alertInfo && selectedRecord.alertInfo.show" class="alert-detail">
<view <view
class="alert-detail-box" class="alert-detail-box"
:class="selectedRecord.alertInfo.type" :class="selectedRecord.alertInfo.type"
> >
<text <text
v-if="selectedRecord.alertInfo.type === 'info'" v-if="selectedRecord.alertInfo.type === 'info'"
class="i-carbon-information alert-icon" class="i-carbon-information alert-icon"
></text> ></text>
<text <text
v-else-if="selectedRecord.alertInfo.type === 'warning'" v-else-if="selectedRecord.alertInfo.type === 'warning'"
class="i-carbon-warning-alt alert-icon" class="i-carbon-warning-alt alert-icon"
></text> ></text>
<text>{{ selectedRecord.alertInfo.content }}</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 { .actions-section {
display: flex; display: flex;
justify-content: flex-end; 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 { .alert-detail {
padding: 20rpx 0; padding: 20rpx 0;

View File

@@ -352,15 +352,25 @@ function validateForm() {
} }
// 提交表单 // 提交表单
function handleSubmit() { async function handleSubmit() {
// 取消表单校验,直接提交 if (!validateForm()) return
uni.showLoading({ uni.showLoading({
title: '提交中...' title: '提交中...'
}) })
// 模拟提交 try {
setTimeout(() => { // 收集选中的商家
const selectedMerchants = merchantList.value.filter(item => item.selected)
// 构建提交数据
const submitData = {
...formData.value,
relatedMerchants: selectedMerchants
}
await submitLoanApplication(submitData)
uni.hideLoading() uni.hideLoading()
uni.showToast({ uni.showToast({
title: '提交成功', title: '提交成功',
@@ -371,13 +381,73 @@ function handleSubmit() {
setTimeout(() => { setTimeout(() => {
uni.navigateBack() uni.navigateBack()
}, 1500) }, 1500)
}, 2000) } catch (error) {
uni.hideLoading()
uni.showToast({
title: '提交失败',
icon: 'none'
})
}
} }
// 返回上一页 // 返回上一页
function handleBack() { function handleBack() {
uni.navigateBack() 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> </script>
<template> <template>
@@ -451,6 +521,50 @@ function handleBack() {
</view> </view>
</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="form-card">
<view class="card-title"> <view class="card-title">
@@ -558,6 +672,8 @@ function handleBack() {
</view> </view>
</view> </view>
<!-- 证件信息模块 --> <!-- 证件信息模块 -->
<view class="form-card"> <view class="form-card">
<view class="card-title"> <view class="card-title">
@@ -911,6 +1027,8 @@ function handleBack() {
color: #FF4D4F; color: #FF4D4F;
margin-top: 8rpx; margin-top: 8rpx;
} }
} }
.submit-bar { .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> </style>

329
src/pagesBank/api/index.ts Normal file
View 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)
})
}

View 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)
})
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,49 +1,161 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getLoanApplicationList } from '@/api/loan'
import { LoanStatus } from '@/typings/loan'
import type { LoanApplication } from '@/typings/loan'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '审核列表', navigationBarTitleText: '审核列表',
enablePullDownRefresh: true
}, },
}) })
// 模拟审核数据 // 状态标签
const auditList = ref([ const tabs = [
{ id: '1', merchantName: '广州数字科技有限公司', amount: 50000.00, status: 'pending', time: '2小时前' }, { label: '全部', value: '' },
{ id: '2', merchantName: '深圳智慧商贸公司', amount: 128000.00, status: 'pending', time: '3小时前' }, { label: '新申请', value: LoanStatus.SUBMITTED },
{ id: '3', merchantName: '佛山电子商务公司', amount: 35000.00, status: 'approved', time: '昨天' }, { 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 }> = { const activeTab = ref('')
pending: { text: '待审核', color: '#ff8f0d' }, const keyword = ref('')
approved: { text: '已通过', color: '#00c05a' }, const list = ref<LoanApplication[]>([])
rejected: { text: '已拒绝', color: '#fa4350' }, 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}` }) uni.navigateTo({ url: `/pagesBank/audit/detail?id=${id}` })
} }
onMounted(() => {
loadData()
})
onPullDownRefresh(() => {
loadData()
})
</script> </script>
<template> <template>
<view class="audit-list-page"> <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 <view
v-for="item in auditList" v-for="item in list"
:key="item.id" :key="item.id"
class="audit-card" class="audit-card"
@click="handleAudit(item.id)" @click="handleDetail(item.id)"
> >
<view class="audit-header"> <view class="card-top">
<text class="merchant-name">{{ item.merchantName }}</text> <view class="merchant-info">
<text class="audit-status" :style="{ color: statusMap[item.status].color }"> <text class="merchant-name">{{ item.userName }}的贷款申请</text>
{{ statusMap[item.status].text }} <text class="time">{{ item.createTime }}</text>
</view>
<text
class="status-tag"
:style="{ color: statusMap[item.status]?.color, backgroundColor: statusMap[item.status]?.bgColor }"
>
{{ statusMap[item.status]?.text || item.status }}
</text> </text>
</view> </view>
<view class="audit-body">
<text class="amount">申请金额¥{{ item.amount.toFixed(2) }}</text> <view class="card-content">
</view> <view class="info-row">
<view class="audit-footer"> <text class="label">申请金额</text>
<text class="time">{{ item.time }}</text> <text class="amount">¥{{ item.amount }}<text class="unit"></text></text>
<text class="action" v-if="item.status === 'pending'">去审核 </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> </view>
</view> </view>
@@ -53,69 +165,168 @@ function handleAudit(id: string) {
<style lang="scss" scoped> <style lang="scss" scoped>
.audit-list-page { .audit-list-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f8f9fa;
padding: 20rpx; 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; display: flex;
flex-direction: column; overflow-x: auto;
gap: 20rpx; 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 { .audit-card {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 20rpx;
padding: 24rpx; padding: 24rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
.audit-header { .card-top {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
margin-bottom: 16rpx; margin-bottom: 24rpx;
.merchant-name { .merchant-info {
font-size: 28rpx;
font-weight: 600;
color: #333;
flex: 1; flex: 1;
overflow: hidden; display: flex;
text-overflow: ellipsis; flex-direction: column;
white-space: nowrap; gap: 8rpx;
.merchant-name {
font-size: 30rpx;
font-weight: 700;
color: #333;
}
.time {
font-size: 24rpx;
color: #999;
}
} }
.audit-status { .status-tag {
font-size: 24rpx; font-size: 22rpx;
font-weight: 500; padding: 6rpx 16rpx;
margin-left: 16rpx; border-radius: 8rpx;
}
}
.audit-body {
margin-bottom: 12rpx;
.amount {
font-size: 30rpx;
font-weight: 600; font-weight: 600;
color: #00c05a;
} }
} }
.audit-footer { .card-content {
background: #f8f9fa;
border-radius: 12rpx;
padding: 20rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
.time { .info-row {
font-size: 24rpx; display: flex;
color: #999; flex-direction: column;
}
.label { font-size: 24rpx; color: #999; margin-bottom: 4rpx; }
.action { .amount { font-size: 32rpx; font-weight: 700; color: #333; .unit { font-size: 24rpx; font-weight: normal; margin-left: 2rpx; } }
font-size: 24rpx; .val { font-size: 28rpx; color: #333; font-weight: 500; }
color: #00c05a;
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> </style>

View 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 { text { color: #fa4350; } color: #fa4350; }
&:active { background: #f8f9fa; }
}
}
.loading-box {
padding: 100rpx;
text-align: center;
color: #999;
font-size: 28rpx;
}
</style>

View File

@@ -1,55 +1,177 @@
<script lang="ts" setup> <script lang="ts" setup>
import { getCustomerList } from '@/pagesBank/api'
import type { BankCustomer } from '@/typings/bank'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '客户管理', navigationBarTitleText: '客户管理',
enablePullDownRefresh: true
}, },
}) })
// 模拟客户数据 const customers = ref<BankCustomer[]>([])
const customers = ref([ const loading = ref(false)
{ id: '1', name: '广州数字科技有限公司', creditLimit: 500000, usedLimit: 125000, status: 'normal' }, const keyword = ref('')
{ id: '2', name: '深圳智慧商贸公司', creditLimit: 300000, usedLimit: 280000, status: 'warning' }, const activeStatus = ref('')
{ id: '3', name: '佛山电子商务公司', creditLimit: 200000, usedLimit: 50000, status: 'normal' },
]) 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) { function handleDetail(id: string) {
uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` }) uni.navigateTo({ url: `/pagesBank/customer/detail?id=${id}` })
} }
function getUsageRate(used: number, total: number) { 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> </script>
<template> <template>
<view class="customer-list-page"> <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 <view
v-for="item in customers" v-for="item in customers"
:key="item.id" :key="item.id"
class="customer-card" class="customer-card"
@click="handleDetail(item.id)" @click="handleDetail(item.id)"
> >
<view class="customer-header"> <view class="card-header">
<text class="customer-name">{{ item.name }}</text> <view class="customer-base">
<text class="customer-status" :class="item.status"> <image :src="item.logo || '/static/images/avatar.jpg'" class="logo" mode="aspectFill" />
{{ item.status === 'normal' ? '正常' : '预警' }} <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> </text>
</view> </view>
<view class="customer-body">
<view class="limit-info"> <view class="card-body">
<text class="label">授信额度</text> <view class="limit-stats">
<text class="value">¥{{ (item.creditLimit / 10000).toFixed(0) }}</text> <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>
<view class="limit-info">
<text class="label">已使用</text> <view class="usage-progress">
<text class="value used">¥{{ (item.usedLimit / 10000).toFixed(1) }}</text> <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>
<view class="limit-info"> </view>
<text class="label">使用率</text>
<text class="value" :class="{ warning: item.status === 'warning' }"> <view class="card-footer">
{{ getUsageRate(item.usedLimit, item.creditLimit) }}% <text class="join-time">加入时间{{ item.joinTime }}</text>
</text> <view class="action">
管理客户 <text class="i-carbon-chevron-right"></text>
</view> </view>
</view> </view>
</view> </view>
@@ -60,82 +182,228 @@ function getUsageRate(used: number, total: number) {
<style lang="scss" scoped> <style lang="scss" scoped>
.customer-list-page { .customer-list-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f8f9fa;
padding: 20rpx; 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; display: flex;
flex-direction: column; justify-content: space-around;
gap: 20rpx; 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 { .customer-card {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 20rpx;
padding: 24rpx; 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; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20rpx; border-top: 1rpx solid #f1f3f5;
padding-top: 20rpx;
.customer-name { .join-time {
font-size: 28rpx; font-size: 24rpx;
color: #adb5bd;
}
.action {
font-size: 26rpx;
color: #4d80f0;
font-weight: 600; font-weight: 600;
color: #333; display: flex;
flex: 1; align-items: center;
overflow: hidden; gap: 4rpx;
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;
}
}
} }
} }
} }
.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> </style>

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

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

View File

@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useUserStore } from '@/store/user' import { useUserStore } from '@/store/user'
import { useBankStore } from '@/store/bank'
definePage({ definePage({
style: { style: {
@@ -8,60 +9,98 @@ definePage({
}) })
const userStore = useUserStore() const userStore = useUserStore()
const bankStore = useBankStore()
// 模拟数据 // 快捷操作
const stats = ref({
pendingAudit: 45,
todayApproved: 28,
totalAmount: 2568000.00,
customers: 156,
})
const quickActions = [ const quickActions = [
{ icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' }, { icon: 'i-carbon-task-approved', label: '待审核', path: '/pagesBank/audit/list' },
{ icon: 'i-carbon-group', label: '客户管理', path: '/pagesBank/customer/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-add', label: '创建拜访', path: '/pagesBank/visit/create' },
{ icon: 'i-carbon-document-download', label: '报表', path: '/pagesBank/report/list' },
{ icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' }, { icon: 'i-carbon-settings', label: '设置', path: '/pagesBank/me/index' },
] ]
function handleAction(path: string) { function handleAction(path: string) {
if (!path) {
uni.showToast({ title: '功能开发中', icon: 'none' })
return
}
uni.navigateTo({ url: path }) uni.navigateTo({ url: path })
} }
onMounted(() => {
bankStore.fetchStats()
})
</script> </script>
<template> <template>
<view class="dashboard-page"> <view class="dashboard-page">
<view class="header-bg"></view>
<!-- 头部欢迎 --> <!-- 头部欢迎 -->
<view class="header"> <view class="header-content">
<view class="welcome"> <view class="welcome">
<text class="greeting">您好{{ userStore.userInfo?.nickname || '银行用户' }}</text> <text class="greeting">您好{{ userStore.userInfo?.nickname || '银行管理员' }}</text>
<text class="sub-text">金融服务数据总览</text> <text class="sub-text">欢迎回到银行端管理系统</text>
</view> </view>
</view> </view>
<!-- 数据卡片 --> <!-- 关键指标卡片 -->
<view class="stats-grid"> <view class="stats-overview">
<view class="stat-card warning"> <view class="total-amount-card">
<text class="stat-value">{{ stats.pendingAudit }}</text> <text class="label">累计放款金额 ()</text>
<text class="stat-label">待审核</text> <view class="amount-box">
<text class="unit">¥</text>
<text class="value">{{ (bankStore.stats?.totalLoanAmount || 0).toLocaleString() }}</text>
</view>
</view> </view>
<view class="stat-card success">
<text class="stat-value">{{ stats.todayApproved }}</text> <view class="stats-grid">
<text class="stat-label">今日已审</text> <view class="stat-card" @click="handleAction('/pagesBank/audit/list')">
</view> <view class="stat-info">
<view class="stat-card"> <text class="stat-value warning">{{ bankStore.stats?.pendingAuditWithdraw || 0 }}</text>
<text class="stat-value">{{ (stats.totalAmount / 10000).toFixed(0) }}</text> <text class="stat-label">待审核</text>
<text class="stat-label">累计放款</text> </view>
</view> <view class="stat-icon warning">
<view class="stat-card"> <text class="i-carbon-wallet"></text>
<text class="stat-value">{{ stats.customers }}</text> </view>
<text class="stat-label">服务客户</text> </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> </view>
<!-- 快捷操作 --> <!-- 快捷操作 -->
<view class="section"> <view class="section">
<view class="section-title">快捷操作</view> <view class="section-header">
<text class="section-title">快捷操作</text>
</view>
<view class="quick-actions"> <view class="quick-actions">
<view <view
v-for="item in quickActions" v-for="item in quickActions"
@@ -76,27 +115,53 @@ function handleAction(path: string) {
</view> </view>
</view> </view>
</view> </view>
<!-- 最近动态 (Placeholder) -->
<view class="section">
<view class="section-header">
<text class="section-title">最近动态</text>
<text class="more">更多 ></text>
</view>
<view class="empty-dynamic">
<text class="i-carbon-reminder-attendance"></text>
<text>暂无新的审核动态</text>
</view>
</view>
</view> </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-page { .dashboard-page {
min-height: 100vh; 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%); 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 { .welcome {
color: #fff; color: #fff;
.greeting { .greeting {
font-size: 36rpx; font-size: 40rpx;
font-weight: 600; font-weight: 700;
display: block; display: block;
margin-bottom: 8rpx; margin-bottom: 12rpx;
} }
.sub-text { .sub-text {
@@ -106,54 +171,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 { .stats-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20rpx; gap: 20rpx;
padding: 0 20rpx;
margin-top: -40rpx;
.stat-card { .stat-card {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 20rpx;
padding: 30rpx; padding: 30rpx;
text-align: center; display: flex;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
.stat-value { .stat-info {
font-size: 40rpx; .stat-value {
font-weight: 700; font-size: 36rpx;
color: #333; font-weight: 700;
display: block; color: #333;
margin-bottom: 8rpx; display: block;
margin-bottom: 4rpx;
&.warning { color: #ff8f0d; }
&.success { color: #00c05a; }
}
.stat-label {
font-size: 24rpx;
color: #999;
}
} }
.stat-label { .stat-icon {
font-size: 24rpx; width: 72rpx;
color: #999; height: 72rpx;
} border-radius: 16rpx;
background: #f5f5f5;
&.warning .stat-value { display: flex;
color: #ff8f0d; align-items: center;
} justify-content: center;
&.success .stat-value { text {
color: #00c05a; 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 { .section {
margin: 30rpx 20rpx; margin: 30rpx;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 24rpx;
padding: 30rpx; padding: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
.section-title { .section-header {
font-size: 30rpx; display: flex;
font-weight: 600; justify-content: space-between;
color: #333; align-items: center;
margin-bottom: 24rpx; margin-bottom: 30rpx;
.section-title {
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.more {
font-size: 24rpx;
color: #999;
}
} }
} }
@@ -166,27 +304,51 @@ function handleAction(path: string) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 12rpx; gap: 16rpx;
.action-icon { .action-icon {
width: 80rpx; width: 96rpx;
height: 80rpx; height: 96rpx;
background: linear-gradient(135deg, #00c05a 0%, #34d19d 100%); background: #f8f9fa;
border-radius: 20rpx; border-radius: 24rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s;
text { text {
font-size: 40rpx; font-size: 44rpx;
color: #fff; color: #00c05a;
}
&:active {
background: #e9ecef;
transform: scale(0.95);
} }
} }
.action-label { .action-label {
font-size: 24rpx; font-size: 24rpx;
color: #666; color: #495057;
} }
} }
} }
.empty-dynamic {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40rpx 0;
color: #adb5bd;
gap: 16rpx;
text:first-child {
font-size: 64rpx;
}
text:last-child {
font-size: 26rpx;
}
}
</style> </style>

View File

@@ -12,12 +12,20 @@ const userStore = useUserStore()
const config = CLIENT_TYPE_CONFIG[ClientType.BANK] const config = CLIENT_TYPE_CONFIG[ClientType.BANK]
const menuList = [ const menuList = [
{ icon: 'i-carbon-report', label: '数据报表' }, { icon: 'i-carbon-report', label: '数据报表', path: '/pagesBank/report/list' },
{ icon: 'i-carbon-settings', label: '系统设置' }, { icon: 'i-carbon-settings', label: '系统设置' },
{ icon: 'i-carbon-help', label: '帮助中心' }, { icon: 'i-carbon-help', label: '帮助中心' },
{ icon: 'i-carbon-information', 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() { function handleLogout() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@@ -35,20 +43,20 @@ function handleLogout() {
<template> <template>
<view class="me-page"> <view class="me-page">
<!-- 用户信息 --> <!-- 用户信息 {{ config.label }}-->
<view class="user-card" :style="{ background: config.color }"> <view class="user-card" :style="{ background: config.color }">
<view class="avatar"> <view class="avatar">
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image> <image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image>
</view> </view>
<view class="info"> <view class="info">
<text class="nickname">{{ userStore.userInfo?.nickname || '银行用户' }}</text> <text class="nickname">{{ userStore.userInfo?.nickname || '银行用户' }}</text>
<text class="tag">{{ config.label }}</text> <text class="tag">业务经理</text>
</view> </view>
</view> </view>
<!-- 菜单列表 --> <!-- 菜单列表 -->
<view class="menu-list"> <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"> <view class="menu-left">
<text :class="item.icon" class="menu-icon"></text> <text :class="item.icon" class="menu-icon"></text>
<text class="menu-label">{{ item.label }}</text> <text class="menu-label">{{ item.label }}</text>

338
src/pagesBank/mock/index.ts Normal file
View 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'
}
]

View 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'
}
}

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

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

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

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

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

View File

@@ -0,0 +1,273 @@
/**
* 商户端 API 接口
*/
import type {
MerchantOrder,
MerchantGoods,
MerchantStats,
FinanceOverview,
Transaction,
Settlement,
WithdrawRecord,
ShopInfo,
GoodsFormData,
} from '@/typings/merchant'
import { OrderStatus, GoodsStatus } from '@/typings/merchant'
import {
mockMerchantStats,
mockMerchantOrders,
mockMerchantGoods,
mockFinanceOverview,
mockTransactions,
mockSettlements,
mockWithdrawRecords,
mockShopInfo,
} from '../mock'
// ==================== 统计 API ====================
/** 获取商户统计数据 */
export function getMerchantStats(): Promise<MerchantStats> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockMerchantStats)
}, 300)
})
}
// ==================== 订单 API ====================
/** 订单查询参数 */
interface OrderQueryParams {
status?: OrderStatus | 'all'
keyword?: string
page?: number
pageSize?: number
}
/** 获取订单列表 */
export function getMerchantOrders(params: OrderQueryParams = {}): Promise<{ list: MerchantOrder[]; total: number }> {
return new Promise((resolve) => {
setTimeout(() => {
let list = [...mockMerchantOrders]
// 状态筛选
if (params.status && params.status !== 'all') {
list = list.filter(item => item.status === params.status)
}
// 关键词搜索
if (params.keyword) {
const keyword = params.keyword.toLowerCase()
list = list.filter(item =>
item.orderNo.toLowerCase().includes(keyword) ||
item.customerName.toLowerCase().includes(keyword)
)
}
resolve({ list, total: list.length })
}, 300)
})
}
/** 获取订单详情 */
export function getMerchantOrderDetail(id: string): Promise<MerchantOrder | null> {
return new Promise((resolve) => {
setTimeout(() => {
const order = mockMerchantOrders.find(item => item.id === id)
resolve(order || null)
}, 300)
})
}
/** 确认订单 */
export function confirmOrder(id: string): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
const order = mockMerchantOrders.find(item => item.id === id)
if (order) {
order.status = OrderStatus.SHIPPING
}
resolve(true)
}, 500)
})
}
/** 发货 */
export function shipOrder(id: string, data: { company: string; trackingNo: string }): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
const order = mockMerchantOrders.find(item => item.id === id)
if (order) {
order.status = OrderStatus.SHIPPED
order.shipTime = new Date().toISOString()
order.logistics = {
company: data.company,
trackingNo: data.trackingNo,
status: '已发货',
traces: [{ time: new Date().toISOString(), content: '商家已发货' }],
}
}
resolve(true)
}, 500)
})
}
/** 添加商家备注 */
export function addMerchantRemark(id: string, remark: string): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
const order = mockMerchantOrders.find(item => item.id === id)
if (order) {
order.merchantRemark = remark
}
resolve(true)
}, 300)
})
}
// ==================== 商品 API ====================
/** 商品查询参数 */
interface GoodsQueryParams {
status?: GoodsStatus | 'all' | 'lowStock'
keyword?: string
page?: number
pageSize?: number
}
/** 获取商品列表 */
export function getMerchantGoodsList(params: GoodsQueryParams = {}): Promise<{ list: MerchantGoods[]; total: number }> {
return new Promise((resolve) => {
setTimeout(() => {
let list = [...mockMerchantGoods]
// 状态筛选
if (params.status) {
if (params.status === 'lowStock') {
list = list.filter(item => item.stock <= 10)
} else if (params.status !== 'all') {
list = list.filter(item => item.status === params.status)
}
}
// 关键词搜索
if (params.keyword) {
const keyword = params.keyword.toLowerCase()
list = list.filter(item => item.name.toLowerCase().includes(keyword))
}
resolve({ list, total: list.length })
}, 300)
})
}
/** 获取商品详情 */
export function getMerchantGoodsDetail(id: string): Promise<MerchantGoods | null> {
return new Promise((resolve) => {
setTimeout(() => {
const goods = mockMerchantGoods.find(item => item.id === id)
resolve(goods || null)
}, 300)
})
}
/** 保存商品 */
export function saveMerchantGoods(data: GoodsFormData): Promise<{ id: string }> {
return new Promise((resolve) => {
setTimeout(() => {
const id = data.id || `goods_${Date.now()}`
resolve({ id })
}, 500)
})
}
/** 更新商品状态 */
export function updateGoodsStatus(id: string, status: GoodsStatus): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
const goods = mockMerchantGoods.find(item => item.id === id)
if (goods) {
goods.status = status
}
resolve(true)
}, 300)
})
}
/** 删除商品 */
export function deleteMerchantGoods(id: string): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true)
}, 300)
})
}
// ==================== 财务 API ====================
/** 获取财务概览 */
export function getFinanceOverview(): Promise<FinanceOverview> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockFinanceOverview)
}, 300)
})
}
/** 获取交易记录 */
export function getTransactions(page = 1, pageSize = 20): Promise<{ list: Transaction[]; total: number }> {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ list: mockTransactions, total: mockTransactions.length })
}, 300)
})
}
/** 获取结算记录 */
export function getSettlements(page = 1, pageSize = 20): Promise<{ list: Settlement[]; total: number }> {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ list: mockSettlements, total: mockSettlements.length })
}, 300)
})
}
/** 获取提现记录 */
export function getWithdrawRecords(page = 1, pageSize = 20): Promise<{ list: WithdrawRecord[]; total: number }> {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ list: mockWithdrawRecords, total: mockWithdrawRecords.length })
}, 300)
})
}
/** 申请提现 */
export function applyWithdraw(data: { amount: number; bankAccount: string }): Promise<{ id: string }> {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ id: `withdraw_${Date.now()}` })
}, 500)
})
}
// ==================== 店铺 API ====================
/** 获取店铺信息 */
export function getShopInfo(): Promise<ShopInfo> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(mockShopInfo)
}, 300)
})
}
/** 更新店铺信息 */
export function updateShopInfo(data: Partial<ShopInfo>): Promise<boolean> {
return new Promise((resolve) => {
setTimeout(() => {
Object.assign(mockShopInfo, data)
resolve(true)
}, 500)
})
}

View File

@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useUserStore } from '@/store/user' import { useUserStore } from '@/store/user'
import { useMerchantStore } from '@/store/merchant'
definePage({ definePage({
style: { style: {
@@ -8,25 +9,47 @@ definePage({
}) })
const userStore = useUserStore() const userStore = useUserStore()
const merchantStore = useMerchantStore()
// 模拟数据 // 待办事项
const stats = ref({ const todos = computed(() => {
todayOrders: 128, if (!merchantStore.stats) return []
pendingOrders: 23, return [
todaySales: 15680.50, { icon: 'i-carbon-shopping-bag', label: '待发货订单', count: merchantStore.stats.pendingOrders, path: '/pagesMerchant/order/list' },
totalGoods: 356, { 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)
}) })
// 快捷操作
const quickActions = [ const quickActions = [
{ icon: 'i-carbon-document-add', label: '新增订单', path: '/pagesMerchant/order/list' }, { icon: 'i-carbon-document-add', label: '新增订单', path: '/pagesMerchant/order/list' },
{ icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' }, { icon: 'i-carbon-add-alt', label: '新增商品', path: '/pagesMerchant/goods/edit' },
{ icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' }, { icon: 'i-carbon-wallet', label: '财务中心', path: '/pagesMerchant/finance/index' },
{ icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/index' }, { icon: 'i-carbon-settings', label: '店铺设置', path: '/pagesMerchant/me/shop' },
{ icon: 'i-carbon-document', label: '辅助贷款', path: '/pagesMerchant/loan/assist' },
] ]
// 加载数据
async function loadData() {
await merchantStore.fetchStats()
}
// 跳转
function handleAction(path: string) { function handleAction(path: string) {
uni.navigateTo({ url: path }) uni.navigateTo({ url: path })
} }
// 下拉刷新
async function onRefresh() {
await loadData()
}
onMounted(() => {
loadData()
})
</script> </script>
<template> <template>
@@ -40,24 +63,42 @@ function handleAction(path: string) {
</view> </view>
<!-- 数据卡片 --> <!-- 数据卡片 -->
<view class="stats-grid"> <view class="stats-grid" v-if="merchantStore.stats">
<view class="stat-card"> <view class="stat-card">
<text class="stat-value">{{ stats.todayOrders }}</text> <text class="stat-value">{{ merchantStore.stats.todayOrders }}</text>
<text class="stat-label">今日订单</text> <text class="stat-label">今日订单</text>
</view> </view>
<view class="stat-card warning"> <view class="stat-card warning">
<text class="stat-value">{{ stats.pendingOrders }}</text> <text class="stat-value">{{ merchantStore.stats.pendingOrders }}</text>
<text class="stat-label">待处理</text> <text class="stat-label">待处理</text>
</view> </view>
<view class="stat-card success"> <view class="stat-card success">
<text class="stat-value">¥{{ stats.todaySales.toFixed(0) }}</text> <text class="stat-value">¥{{ merchantStore.stats.todaySales.toFixed(0) }}</text>
<text class="stat-label">今日销售额</text> <text class="stat-label">今日销售额</text>
</view> </view>
<view class="stat-card"> <view class="stat-card">
<text class="stat-value">{{ stats.totalGoods }}</text> <text class="stat-value">{{ merchantStore.stats.totalGoods }}</text>
<text class="stat-label">商品总数</text> <text class="stat-label">商品总数</text>
</view> </view>
</view> </view>
<!-- 待办事项 -->
<view class="section" v-if="todos.length > 0">
<view class="section-title">待办事项</view>
<view class="todo-list">
<view
v-for="item in todos"
:key="item.label"
class="todo-item"
@click="handleAction(item.path)"
>
<text :class="item.icon" class="todo-icon"></text>
<text class="todo-label">{{ item.label }}</text>
<text class="todo-count">{{ item.count }}</text>
<text class="i-carbon-chevron-right"></text>
</view>
</view>
</view>
<!-- 快捷操作 --> <!-- 快捷操作 -->
<view class="section"> <view class="section">
@@ -83,6 +124,9 @@ function handleAction(path: string) {
.dashboard-page { .dashboard-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
width: 100%;
max-width: 540px;
margin: 0 auto;
} }
.header { .header {
@@ -157,6 +201,43 @@ function handleAction(path: string) {
} }
} }
.todo-list {
.todo-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.todo-icon {
font-size: 36rpx;
color: #ff8f0d;
margin-right: 16rpx;
}
.todo-label {
flex: 1;
font-size: 28rpx;
color: #333;
}
.todo-count {
font-size: 28rpx;
font-weight: 600;
color: #ff8f0d;
margin-right: 12rpx;
}
text:last-child {
font-size: 28rpx;
color: #ccc;
}
}
}
.quick-actions { .quick-actions {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);

View File

@@ -1,38 +1,126 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { getTransactions } from '@/pagesMerchant/api'
import { TransactionType } from '@/typings/merchant'
import type { Transaction } from '@/typings/merchant'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '财务中心', navigationBarTitleText: '财务中心',
}, },
}) })
// 模拟数据 const merchantStore = useMerchantStore()
const finance = ref({
balance: 125680.50, // 交易记录
pendingSettlement: 23500.00, const transactions = ref<Transaction[]>([])
monthIncome: 89600.00,
// 快捷操作
const quickActions = [
{ icon: 'i-carbon-wallet', label: '申请提现', path: '/pagesMerchant/finance/withdraw' },
{ icon: 'i-carbon-document', label: '结算记录', path: '/pagesMerchant/finance/settlement' },
]
// 获取交易类型样式
function getTypeStyle(type: TransactionType) {
const styles = {
[TransactionType.INCOME]: { color: '#00c05a', prefix: '+' },
[TransactionType.WITHDRAW]: { color: '#fa4350', prefix: '' },
[TransactionType.REFUND]: { color: '#fa4350', prefix: '-' },
}
return styles[type]
}
// 获取交易类型文本
function getTypeText(type: TransactionType) {
const texts = {
[TransactionType.INCOME]: '订单收入',
[TransactionType.WITHDRAW]: '提现',
[TransactionType.REFUND]: '退款',
}
return texts[type]
}
// 跳转
function handleAction(path: string) {
uni.navigateTo({ url: path })
}
// 加载数据
async function loadData() {
await merchantStore.fetchFinanceOverview()
const res = await getTransactions()
transactions.value = res.list
}
onMounted(() => {
loadData()
}) })
</script> </script>
<template> <template>
<view class="finance-page"> <view class="finance-page">
<!-- 余额卡片 --> <!-- 余额卡片 -->
<view class="balance-card"> <view class="balance-card" v-if="merchantStore.financeOverview">
<text class="label">可用余额</text> <text class="label">可用余额</text>
<text class="amount">¥{{ finance.balance.toFixed(2) }}</text> <text class="amount">{{ merchantStore.financeOverview.balance.toFixed(2) }}</text>
<view class="actions"> <view class="stats">
<view class="action-btn">提现</view> <view class="stat-item">
<text class="value">{{ merchantStore.financeOverview.pendingSettlement.toFixed(2) }}</text>
<text class="label">待结算</text>
</view>
<view class="divider"></view>
<view class="stat-item">
<text class="value">{{ merchantStore.financeOverview.monthIncome.toFixed(2) }}</text>
<text class="label">本月收入</text>
</view>
<view class="divider"></view>
<view class="stat-item">
<text class="value">{{ (merchantStore.financeOverview.totalIncome / 10000).toFixed(1) }}</text>
<text class="label">累计收入</text>
</view>
</view> </view>
</view> </view>
<!-- 财务统计 --> <!-- 快捷操作 -->
<view class="stats"> <view class="section">
<view class="stat-item"> <view class="section-title">快捷操作</view>
<text class="value">¥{{ finance.pendingSettlement.toFixed(2) }}</text> <view class="quick-actions">
<text class="label">待结算</text> <view
v-for="item in quickActions"
:key="item.label"
class="action-item"
@click="handleAction(item.path)"
>
<view class="action-icon">
<text :class="item.icon"></text>
</view>
<text class="action-label">{{ item.label }}</text>
</view>
</view> </view>
<view class="stat-item"> </view>
<text class="value">¥{{ finance.monthIncome.toFixed(2) }}</text>
<text class="label">本月收入</text> <!-- 交易记录 -->
<view class="section">
<view class="section-header">
<text class="section-title">交易记录</text>
<text class="more">查看全部 ></text>
</view>
<view class="transaction-list">
<view v-if="transactions.length === 0" class="empty">
<text>暂无交易记录</text>
</view>
<view v-for="item in transactions" :key="item.id" class="transaction-item">
<view class="info">
<text class="type">{{ getTypeText(item.type) }}</text>
<text class="time">{{ item.createTime }}</text>
</view>
<view class="amount" :style="{ color: getTypeStyle(item.type).color }">
{{ getTypeStyle(item.type).prefix }}{{ Math.abs(item.amount).toFixed(2) }}
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -42,7 +130,9 @@ const finance = ref({
.finance-page { .finance-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
padding: 20rpx; width: 100%;
max-width: 540px;
margin: 0 auto;
} }
.balance-card { .balance-card {
@@ -50,56 +140,149 @@ const finance = ref({
border-radius: 24rpx; border-radius: 24rpx;
padding: 40rpx; padding: 40rpx;
color: #fff; color: #fff;
margin: 20rpx;
.label { > .label {
font-size: 26rpx; font-size: 26rpx;
opacity: 0.9; opacity: 0.9;
display: block; display: block;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.amount { > .amount {
font-size: 56rpx; font-size: 64rpx;
font-weight: 700; font-weight: 700;
display: block; display: block;
margin-bottom: 30rpx; margin-bottom: 40rpx;
} }
.actions { .stats {
.action-btn { display: flex;
display: inline-block; justify-content: space-around;
padding: 16rpx 48rpx; align-items: center;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.15);
border-radius: 40rpx; border-radius: 16rpx;
font-size: 28rpx; padding: 24rpx 0;
.stat-item {
text-align: center;
.value {
font-size: 32rpx;
font-weight: 600;
display: block;
margin-bottom: 4rpx;
}
.label {
font-size: 22rpx;
opacity: 0.8;
}
}
.divider {
width: 1rpx;
height: 60rpx;
background: rgba(255, 255, 255, 0.3);
} }
} }
} }
.stats { .section {
display: grid; background: #fff;
grid-template-columns: 1fr 1fr; border-radius: 16rpx;
gap: 20rpx; padding: 24rpx;
margin-top: 20rpx; margin: 20rpx;
.stat-item { .section-header {
background: #fff; display: flex;
border-radius: 16rpx; justify-content: space-between;
padding: 30rpx; align-items: center;
text-align: center; margin-bottom: 20rpx;
.value { .more {
font-size: 36rpx;
font-weight: 700;
color: #333;
display: block;
margin-bottom: 8rpx;
}
.label {
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #999;
} }
} }
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
}
.quick-actions {
display: flex;
justify-content: space-around;
.action-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12rpx;
.action-icon {
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
text {
font-size: 48rpx;
color: #fff;
}
}
.action-label {
font-size: 26rpx;
color: #333;
}
}
}
.transaction-list {
.empty {
text-align: center;
padding: 40rpx 0;
color: #999;
font-size: 26rpx;
}
.transaction-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.info {
.type {
font-size: 28rpx;
color: #333;
display: block;
margin-bottom: 4rpx;
}
.time {
font-size: 22rpx;
color: #999;
}
}
.amount {
font-size: 32rpx;
font-weight: 600;
}
}
} }
</style> </style>

View File

@@ -0,0 +1,168 @@
<script lang="ts" setup>
import { getSettlements } from '@/pagesMerchant/api'
import { SettlementStatus } from '@/typings/merchant'
import type { Settlement } from '@/typings/merchant'
definePage({
style: {
navigationBarTitleText: '结算记录',
},
})
const settlements = ref<Settlement[]>([])
const loading = ref(false)
// 状态配置
const statusConfig = {
[SettlementStatus.PENDING]: { label: '待结算', color: '#ff8f0d' },
[SettlementStatus.SETTLED]: { label: '已结算', color: '#00c05a' },
}
// 加载数据
async function loadData() {
loading.value = true
try {
const res = await getSettlements()
settlements.value = res.list
} finally {
loading.value = false
}
}
onMounted(() => {
loadData()
})
</script>
<template>
<view class="settlement-page">
<view v-if="settlements.length === 0" class="empty">
<text class="i-carbon-document"></text>
<text>暂无结算记录</text>
</view>
<view v-for="item in settlements" :key="item.id" class="settlement-card">
<view class="card-header">
<text class="settlement-no">{{ item.settlementNo }}</text>
<text class="status" :style="{ color: statusConfig[item.status].color }">
{{ statusConfig[item.status].label }}
</text>
</view>
<view class="card-body">
<view class="amount-row">
<text class="label">结算金额</text>
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
</view>
<view class="info-row">
<text>订单数{{ item.orderCount }}</text>
<text>周期{{ item.period }}</text>
</view>
</view>
<view class="card-footer">
<text class="time">创建时间{{ item.createTime }}</text>
<text class="time" v-if="item.settledTime">结算时间{{ item.settledTime }}</text>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.settlement-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
width: 100%;
max-width: 540px;
margin: 0 auto;
box-sizing: border-box;
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #999;
text:first-child {
font-size: 80rpx;
margin-bottom: 20rpx;
}
}
.settlement-card {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f5f5f5;
.settlement-no {
font-size: 26rpx;
color: #333;
font-weight: 500;
}
.status {
font-size: 24rpx;
font-weight: 500;
}
}
.card-body {
padding: 20rpx 0;
.amount-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12rpx;
.label {
font-size: 26rpx;
color: #666;
}
.amount {
font-size: 36rpx;
font-weight: 700;
color: #ff8f0d;
}
}
.info-row {
display: flex;
justify-content: space-between;
text {
font-size: 24rpx;
color: #999;
}
}
}
.card-footer {
padding-top: 16rpx;
border-top: 1rpx solid #f5f5f5;
.time {
font-size: 22rpx;
color: #999;
display: block;
& + .time {
margin-top: 4rpx;
}
}
}
}
</style>

View File

@@ -0,0 +1,376 @@
<script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { getWithdrawRecords, applyWithdraw } from '@/pagesMerchant/api'
import { WithdrawStatus, WITHDRAW_STATUS_CONFIG } from '@/typings/merchant'
import type { WithdrawRecord } from '@/typings/merchant'
definePage({
style: {
navigationBarTitleText: '申请提现',
},
})
const merchantStore = useMerchantStore()
// 提现金额
const withdrawAmount = ref('')
// 银行卡列表
const bankCards = [
{ id: '1', name: '中国工商银行', account: '**** **** **** 1234' },
{ id: '2', name: '中国建设银行', account: '**** **** **** 5678' },
]
const selectedCardIndex = ref(0)
// 提现记录
const withdrawRecords = ref<WithdrawRecord[]>([])
// 快捷金额
const quickAmounts = [1000, 5000, 10000]
// 选择快捷金额
function selectQuickAmount(amount: number) {
withdrawAmount.value = amount.toString()
}
// 全部提现
function withdrawAll() {
if (merchantStore.financeOverview) {
withdrawAmount.value = merchantStore.financeOverview.balance.toString()
}
}
// 选择银行卡
function handleCardChange(e: any) {
selectedCardIndex.value = e.detail.value
}
// 申请提现
async function handleWithdraw() {
if (!withdrawAmount.value || parseFloat(withdrawAmount.value) <= 0) {
uni.showToast({ title: '请输入提现金额', icon: 'none' })
return
}
const amount = parseFloat(withdrawAmount.value)
if (merchantStore.financeOverview && amount > merchantStore.financeOverview.balance) {
uni.showToast({ title: '提现金额不能超过可用余额', icon: 'none' })
return
}
uni.showModal({
title: '确认提现',
content: `确定要提现 ¥${amount.toFixed(2)}${bankCards[selectedCardIndex.value].name} 吗?`,
success: async (res) => {
if (res.confirm) {
uni.showLoading({ title: '提交中...' })
try {
await applyWithdraw({
amount,
bankAccount: bankCards[selectedCardIndex.value].account,
})
uni.hideLoading()
uni.showToast({ title: '申请已提交', icon: 'success' })
withdrawAmount.value = ''
loadData()
} catch (error) {
uni.hideLoading()
uni.showToast({ title: '申请失败', icon: 'none' })
}
}
},
})
}
// 加载数据
async function loadData() {
await merchantStore.fetchFinanceOverview()
const res = await getWithdrawRecords()
withdrawRecords.value = res.list
}
onMounted(() => {
loadData()
})
</script>
<template>
<view class="withdraw-page">
<!-- 可用余额 -->
<view class="balance-info" v-if="merchantStore.financeOverview">
<text class="label">可用余额</text>
<text class="amount">{{ merchantStore.financeOverview.balance.toFixed(2) }}</text>
</view>
<!-- 提现表单 -->
<view class="withdraw-form">
<view class="form-item">
<text class="label">提现金额</text>
<view class="amount-input">
<text class="unit">¥</text>
<input
v-model="withdrawAmount"
type="digit"
placeholder="请输入提现金额"
class="input"
/>
<text class="all-btn" @click="withdrawAll">全部提现</text>
</view>
</view>
<view class="quick-amounts">
<view
v-for="amount in quickAmounts"
:key="amount"
class="quick-item"
:class="{ active: withdrawAmount === amount.toString() }"
@click="selectQuickAmount(amount)"
>
¥{{ amount }}
</view>
</view>
<view class="form-item">
<text class="label">到账银行卡</text>
<picker :range="bankCards" range-key="name" @change="handleCardChange">
<view class="bank-card">
<text class="bank-name">{{ bankCards[selectedCardIndex].name }}</text>
<text class="bank-account">{{ bankCards[selectedCardIndex].account }}</text>
<text class="i-carbon-chevron-right"></text>
</view>
</picker>
</view>
<view class="tips">
<text class="i-carbon-information"></text>
<text>提现申请提交后预计1-3个工作日内到账请耐心等待审核</text>
</view>
<view class="submit-btn" @click="handleWithdraw">立即提现</view>
</view>
<!-- 提现记录 -->
<view class="section">
<view class="section-title">提现记录</view>
<view v-if="withdrawRecords.length === 0" class="empty">
<text>暂无提现记录</text>
</view>
<view v-for="item in withdrawRecords" :key="item.id" class="record-item">
<view class="info">
<text class="amount">¥{{ item.amount.toFixed(2) }}</text>
<text class="bank">{{ item.bankName }} {{ item.bankAccount }}</text>
<text class="time">{{ item.applyTime }}</text>
</view>
<view class="status" :style="{ color: WITHDRAW_STATUS_CONFIG[item.status].color }">
{{ WITHDRAW_STATUS_CONFIG[item.status].label }}
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.withdraw-page {
min-height: 100vh;
background: #f5f5f5;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.balance-info {
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
padding: 40rpx;
color: #fff;
.label {
font-size: 26rpx;
opacity: 0.9;
display: block;
margin-bottom: 12rpx;
}
.amount {
font-size: 56rpx;
font-weight: 700;
}
}
.withdraw-form {
background: #fff;
margin: 20rpx;
border-radius: 16rpx;
padding: 24rpx;
.form-item {
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
.label {
font-size: 26rpx;
color: #999;
display: block;
margin-bottom: 16rpx;
}
.amount-input {
display: flex;
align-items: center;
.unit {
font-size: 40rpx;
font-weight: 600;
color: #333;
margin-right: 8rpx;
}
.input {
flex: 1;
font-size: 48rpx;
font-weight: 600;
color: #333;
}
.all-btn {
font-size: 26rpx;
color: #ff8f0d;
}
}
.bank-card {
display: flex;
align-items: center;
gap: 16rpx;
.bank-name {
font-size: 30rpx;
font-weight: 500;
color: #333;
}
.bank-account {
flex: 1;
font-size: 26rpx;
color: #666;
}
}
}
.quick-amounts {
display: flex;
gap: 20rpx;
padding: 24rpx 0;
.quick-item {
flex: 1;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid #ddd;
border-radius: 8rpx;
font-size: 26rpx;
color: #666;
&.active {
border-color: #ff8f0d;
background: rgba(255, 143, 13, 0.1);
color: #ff8f0d;
}
}
}
.tips {
display: flex;
align-items: flex-start;
gap: 8rpx;
padding: 24rpx 0;
text {
font-size: 24rpx;
color: #999;
line-height: 1.5;
&:first-child {
color: #ff8f0d;
flex-shrink: 0;
}
}
}
.submit-btn {
height: 88rpx;
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 600;
color: #fff;
margin-top: 20rpx;
}
}
.section {
background: #fff;
margin: 20rpx;
border-radius: 16rpx;
padding: 24rpx;
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 20rpx;
}
.empty {
text-align: center;
padding: 40rpx 0;
color: #999;
font-size: 26rpx;
}
.record-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.info {
.amount {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 4rpx;
}
.bank {
font-size: 24rpx;
color: #666;
display: block;
margin-bottom: 4rpx;
}
.time {
font-size: 22rpx;
color: #999;
}
}
.status {
font-size: 26rpx;
font-weight: 500;
}
}
}
</style>

View File

@@ -0,0 +1,844 @@
<script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { saveMerchantGoods } from '@/pagesMerchant/api'
import type { GoodsFormData } from '@/typings/merchant'
import { onLoad, onBackPress } from '@dcloudio/uni-app'
definePage({
style: {
navigationBarTitleText: '编辑商品',
navigationStyle: 'custom',
},
})
const merchantStore = useMerchantStore()
// 页面参数
const goodsId = ref('')
// 表单数据
const formData = ref<GoodsFormData>({
name: '',
categoryId: '',
brand: '',
price: 0,
costPrice: 0,
stock: 0,
images: [],
description: '',
enableSpec: false,
specs: [],
skuList: [],
})
// 分类选项
const categories = [
{ id: '1', name: '手机' },
{ id: '2', name: '耳机' },
{ id: '3', name: '平板' },
{ id: '4', name: '电脑' },
]
// 是否编辑模式
const isEdit = computed(() => !!goodsId.value)
// 加载商品详情
async function loadGoodsDetail() {
if (goodsId.value) {
await merchantStore.fetchGoodsDetail(goodsId.value)
if (merchantStore.currentGoods) {
const goods = merchantStore.currentGoods
formData.value = {
id: goods.id,
name: goods.name,
categoryId: goods.categoryId,
brand: goods.brand || '',
price: goods.price,
costPrice: goods.costPrice,
stock: goods.stock,
images: [...goods.images],
description: goods.description,
enableSpec: !!(goods.specs && goods.specs.length > 0),
specs: goods.specs || [],
skuList: goods.skuList || [],
}
}
}
}
// 选择分类
function handleCategoryChange(e: any) {
formData.value.categoryId = categories[e.detail.value].id
}
// 获取分类名称
const categoryName = computed(() => {
const cat = categories.find(c => c.id === formData.value.categoryId)
return cat?.name || '请选择分类'
})
// 添加图片
function handleAddImage() {
uni.chooseImage({
count: 9 - formData.value.images.length,
success: (res) => {
formData.value.images.push(...res.tempFilePaths)
},
})
}
// 删除图片
function handleRemoveImage(index: number) {
formData.value.images.splice(index, 1)
}
// 切换多规格
function handleToggleSpec() {
if (!formData.value.enableSpec) {
// 开启多规格,初始化一个规格
formData.value.specs = [{ name: '', values: [''] }]
formData.value.skuList = []
} else {
// 关闭多规格
formData.value.specs = []
formData.value.skuList = []
}
formData.value.enableSpec = !formData.value.enableSpec
}
// 添加规格
function addSpec() {
formData.value.specs?.push({ name: '', values: [''] })
}
// 删除规格
function removeSpec(index: number) {
formData.value.specs?.splice(index, 1)
generateSkuList()
}
// 添加规格值
function addSpecValue(specIndex: number) {
formData.value.specs?.[specIndex].values.push('')
}
// 删除规格值
function removeSpecValue(specIndex: number, valueIndex: number) {
formData.value.specs?.[specIndex].values.splice(valueIndex, 1)
generateSkuList()
}
// 生成 SKU 列表
function generateSkuList() {
const allSpecs = formData.value.specs || []
// 过滤出有效的规格:只要有至少一个非空值的规格项,就视为有效(为了预览体验,允许名称暂时为空)
const validSpecs = allSpecs.filter(s =>
s.values && s.values.some(v => v && v.trim() !== '')
)
if (validSpecs.length === 0) {
if (allSpecs.length === 0) {
formData.value.skuList = []
}
// 如果没有有效规格,则尝试清空 SKU 列表,但考虑到可能是刚清空值,保留空数组
formData.value.skuList = []
return
}
// 笛卡尔积
const combine = (arr: string[][]): string[][] => {
if (arr.length === 0) return [[]]
const [first, ...rest] = arr
const restCombinations = combine(rest)
return first.flatMap(v => restCombinations.map(c => [v, ...c]))
}
// 使用有效规格生成组合
const specValues = validSpecs.map(s => s.values.filter(v => v && v.trim() !== ''))
// 再次检查防止全空组合
if (specValues.some(vals => vals.length === 0)) return
const combinations = combine(specValues)
formData.value.skuList = combinations.map((combo, index) => {
const specsObj: Record<string, string> = {}
validSpecs.forEach((spec, i) => {
// 如果规格名称为空,使用临时占位符,确保预览可见
// 但注意:这样生成的 sku.specs 可能会包含空键,保存时需由 validateForm 拦截
const key = (spec.name && spec.name.trim() !== '') ? spec.name : `(未命名规格${i+1})`
specsObj[key] = combo[i]
})
// 保留已有的价格和库存
// 匹配逻辑:尝试匹配值的组合,因为 key 可能会变
const existing = formData.value.skuList?.find(sku => {
const skuValues = Object.values(sku.specs).join(',')
const currentValues = Object.values(specsObj).join(',')
return skuValues === currentValues
})
return {
id: existing?.id || `sku_${Date.now()}_${index}`,
specs: specsObj,
price: existing?.price || formData.value.price,
stock: existing?.stock || 0,
}
})
}
// 监听规格变化
watch(() => formData.value.specs, () => {
generateSkuList()
}, { deep: true })
// 删除 SKU
function removeSku(index: number) {
formData.value.skuList?.splice(index, 1)
}
// 获取规格键名 (需保持与 generateSkuList 逻辑一致)
function getSpecKey(spec: SkuSpec, index: number) {
return (spec.name && spec.name.trim() !== '') ? spec.name : `(未命名规格${index + 1})`
}
// 获取 SKU 中有效规格数量,用于显示分隔符
function getValidSpecCount(sku: any) {
if (!formData.value.specs) return 0
return formData.value.specs.filter((s, i) => sku.specs[getSpecKey(s, i)] !== undefined).length
}
// 验证表单
function validateForm(): boolean {
if (!formData.value.name.trim()) {
uni.showToast({ title: '请输入商品名称', icon: 'none' })
return false
}
// 检查是否有未命名的规格
if (formData.value.enableSpec && formData.value.specs?.some(s => !s.name || !s.name.trim())) {
uni.showToast({ title: '请输入规格名称', icon: 'none' })
return false
}
if (!formData.value.categoryId) {
uni.showToast({ title: '请选择商品分类', icon: 'none' })
return false
}
if (formData.value.price <= 0) {
uni.showToast({ title: '请输入正确的售价', icon: 'none' })
return false
}
if (formData.value.images.length === 0) {
uni.showToast({ title: '请上传商品图片', icon: 'none' })
return false
}
return true
}
// 返回上一页或列表页
function goBack() {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack()
} else {
uni.redirectTo({
url: '/pagesMerchant/goods/list'
})
}
}
// 拦截返回行为 (H5/App)
onBackPress((options) => {
const pages = getCurrentPages()
if (pages.length <= 1) {
uni.redirectTo({
url: '/pagesMerchant/goods/list'
})
return true // 阻止默认返回
}
})
// 保存商品
async function handleSave() {
if (!validateForm()) return
uni.showLoading({ title: '保存中...' })
try {
await saveMerchantGoods(formData.value)
uni.hideLoading()
uni.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => {
goBack()
}, 1500)
} catch (error) {
uni.hideLoading()
uni.showToast({ title: '保存失败', icon: 'none' })
}
}
// 页面加载时获取参数
onLoad((options) => {
if (options?.id) {
goodsId.value = options.id as string
loadGoodsDetail()
}
})
</script>
<template>
<view class="goods-edit-page">
<!-- 自定义导航栏 -->
<view class="custom-navbar">
<view class="navbar-back" @click="goBack">
<text class="i-carbon-chevron-left"></text>
</view>
<text class="navbar-title">编辑商品</text>
<view class="navbar-placeholder"></view>
</view>
<view class="form-wrapper">
<!-- 基本信息 -->
<view class="section">
<view class="section-title">基本信息</view>
<view class="form-item">
<text class="label required">商品名称</text>
<input v-model="formData.name" placeholder="请输入商品名称" class="input" />
</view>
<view class="form-item">
<text class="label required">商品分类</text>
<picker class="form-picker" :range="categories" range-key="name" @change="handleCategoryChange">
<view class="picker-value">
{{ categoryName }}
<text class="i-carbon-chevron-right"></text>
</view>
</picker>
</view>
<view class="form-item">
<text class="label">品牌</text>
<input v-model="formData.brand" placeholder="请输入品牌(选填)" class="input" />
</view>
</view>
<!-- 价格库存 -->
<view class="section" v-if="!formData.enableSpec">
<view class="section-title">价格库存</view>
<view class="form-item">
<text class="label required">售价(¥)</text>
<view class="input-with-unit">
<input v-model.number="formData.price" type="digit" placeholder="0.00" class="input" />
</view>
</view>
<view class="form-item">
<text class="label">成本价(¥)</text>
<view class="input-with-unit">
<input v-model.number="formData.costPrice" type="digit" placeholder="0.00" class="input" />
</view>
</view>
<view class="form-item">
<text class="label required">库存</text>
<input v-model.number="formData.stock" type="number" placeholder="0" class="input" />
</view>
</view>
<!-- 商品图片 -->
<view class="section">
<view class="section-title">商品图片</view>
<view class="images-grid">
<view v-for="(img, index) in formData.images" :key="index" class="image-item">
<image :src="img" mode="aspectFill" />
<view class="remove-btn" @click="handleRemoveImage(index)">
<text class="i-carbon-close"></text>
</view>
</view>
<view class="add-image" @click="handleAddImage" v-if="formData.images.length < 9">
<text class="i-carbon-add"></text>
<text class="tip">添加图片</text>
</view>
</view>
</view>
<!-- 商品规格 -->
<view class="section">
<view class="section-header">
<text class="section-title">商品规格</text>
<switch :checked="formData.enableSpec" @change="handleToggleSpec" color="#ff8f0d" />
</view>
<view v-if="formData.enableSpec" class="specs-container">
<view v-for="(spec, specIndex) in formData.specs" :key="specIndex" class="spec-group">
<view class="spec-header">
<input v-model="spec.name" placeholder="规格名称(如颜色)" class="spec-name-input" />
<text class="remove-btn" @click="removeSpec(specIndex)">删除</text>
</view>
<view class="spec-values">
<view v-for="(value, valueIndex) in spec.values" :key="valueIndex" class="spec-value-item">
<input v-model="spec.values[valueIndex]" placeholder="规格值" class="spec-value-input" />
<text class="i-carbon-close" @click="removeSpecValue(specIndex, valueIndex)" v-if="spec.values.length > 1"></text>
</view>
<view class="add-value-btn" @click="addSpecValue(specIndex)">
<text class="i-carbon-add"></text>
<text>添加规格值</text>
</view>
</view>
</view>
<view class="add-spec-btn" @click="addSpec">
<text class="i-carbon-add"></text>
<text>添加规格</text>
</view>
<!-- SKU 列表 -->
<view v-if="formData.skuList && formData.skuList.length > 0" class="sku-list">
<view class="sku-header">
<view>规格</view>
<view>价格</view>
<view>库存</view>
<view>操作</view>
</view>
<view v-for="(sku, index) in formData.skuList" :key="sku.id" class="sku-item">
<view class="sku-specs-inputs">
<template v-for="(spec, i) in formData.specs" :key="i">
<view v-if="sku.specs[getSpecKey(spec, i)] !== undefined" class="spec-input-wrapper">
<input
v-model="sku.specs[getSpecKey(spec, i)]"
class="mini-input"
/>
<text v-if="i < getValidSpecCount(sku) - 1" class="separator">/</text>
</view>
</template>
</view>
<input v-model.number="sku.price" type="digit" class="sku-input" placeholder="价格" />
<input v-model.number="sku.stock" type="number" class="sku-input" placeholder="库存" />
<view class="action-col" @click="removeSku(index)">
<text class="delete-text">删除</text>
</view>
</view>
</view>
</view>
</view>
<!-- 商品描述 -->
<view class="section">
<view class="section-title">商品描述</view>
<textarea
v-model="formData.description"
placeholder="请输入商品描述"
class="textarea"
/>
</view>
</view>
<!-- 底部按钮 -->
<view class="footer-bar">
<view class="save-btn" @click="handleSave">
{{ isEdit ? '保存修改' : '发布商品' }}
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.goods-edit-page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 140rpx;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.custom-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 88rpx;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
z-index: 999;
max-width: 540px;
margin: 0 auto;
.navbar-back {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.i-carbon-chevron-left {
font-size: 40rpx;
color: #333;
}
}
.navbar-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.navbar-placeholder {
width: 60rpx;
}
}
.form-wrapper {
padding: 20rpx;
}
.section {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
margin-bottom: 24rpx;
}
}
.form-item {
display: flex;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
&.required::before {
content: '*';
color: #fa4350;
margin-right: 4rpx;
}
}
.input {
flex: 1;
font-size: 28rpx;
text-align: right;
}
.form-picker {
flex: 1;
}
.picker-value {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8rpx;
font-size: 28rpx;
color: #666;
}
.input-with-unit {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4rpx;
.unit {
font-size: 28rpx;
color: #333;
}
.input {
text-align: right;
flex: unset;
width: auto;
min-width: 160rpx;
color: #333;
}
}
}
.images-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16rpx;
.image-item {
aspect-ratio: 1;
border-radius: 12rpx;
overflow: hidden;
position: relative;
image {
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: 8rpx;
right: 8rpx;
width: 40rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text {
font-size: 24rpx;
color: #fff;
}
}
}
.add-image {
aspect-ratio: 1;
background: #f5f5f5;
border: 2rpx dashed #ddd;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8rpx;
text {
color: #999;
font-size: 24rpx;
&:first-child {
font-size: 48rpx;
}
}
}
}
.specs-container {
margin-top: 20rpx;
.spec-group {
background: #f9f9f9;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 16rpx;
.spec-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.spec-name-input {
flex: 1;
font-size: 28rpx;
font-weight: 500;
}
.remove-btn {
font-size: 24rpx;
color: #fa4350;
}
}
.spec-values {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
.spec-value-item {
display: flex;
align-items: center;
background: #fff;
border-radius: 8rpx;
padding: 12rpx 16rpx;
gap: 8rpx;
.spec-value-input {
width: 120rpx;
font-size: 26rpx;
}
text {
font-size: 24rpx;
color: #999;
}
}
.add-value-btn {
display: flex;
align-items: center;
gap: 4rpx;
padding: 12rpx 16rpx;
border: 1rpx dashed #ff8f0d;
border-radius: 8rpx;
text {
font-size: 24rpx;
color: #ff8f0d;
}
}
}
}
.add-spec-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 24rpx;
border: 1rpx dashed #ddd;
border-radius: 12rpx;
text {
font-size: 26rpx;
color: #666;
}
}
}
.sku-list {
margin-top: 24rpx;
background: #f9f9f9;
border-radius: 12rpx;
overflow: hidden;
.sku-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
padding: 16rpx 20rpx;
background: #f0f0f0;
view {
font-size: 24rpx;
color: #666;
text-align: center;
&:first-child {
text-align: left;
}
}
}
.sku-item {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
padding: 20rpx;
border-bottom: 1rpx solid #eee;
align-items: center;
&:last-child {
border-bottom: none;
}
.sku-specs-inputs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
/* gap: 4rpx; removed to tighten space */
.spec-input-wrapper {
display: flex;
align-items: center;
}
.mini-input {
width: 80rpx; /* narrow input */
text-align: center;
font-size: 24rpx;
color: #333;
padding: 4rpx 0;
border-bottom: 1rpx dashed #ccc; /* hint it's editable */
}
.separator {
margin: 0 4rpx;
color: #999;
font-size: 20rpx;
}
}
.sku-input {
text-align: center;
font-size: 26rpx;
background: #fff;
border-radius: 8rpx;
padding: 8rpx;
margin: 0 8rpx;
}
.action-col {
display: flex;
justify-content: center;
.delete-text {
font-size: 24rpx;
color: #fa4350;
padding: 8rpx 16rpx;
}
}
}
}
.textarea {
width: 100%;
height: 200rpx;
padding: 20rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 28rpx;
box-sizing: border-box;
}
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
.save-btn {
height: 88rpx;
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 600;
color: #fff;
}
}
</style>

View File

@@ -1,52 +1,214 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { GoodsStatus, GOODS_STATUS_CONFIG } from '@/typings/merchant'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '商品管理', navigationBarTitleText: '商品管理',
}, },
}) })
// 模拟商品数据 const merchantStore = useMerchantStore()
const goods = ref([
{ id: '1', name: '苹果 iPhone 15 Pro', price: 8999.00, stock: 50, status: 'on' },
{ id: '2', name: '华为 Mate 60 Pro', price: 6999.00, stock: 30, status: 'on' },
{ id: '3', name: '小米 14 Ultra', price: 5999.00, stock: 0, status: 'off' },
])
function handleEdit(id: string) { // Tab 状态
uni.navigateTo({ url: `/pagesMerchant/goods/edit?id=${id}` }) const tabs = [
{ value: 'all', label: '全部' },
{ value: GoodsStatus.ON, label: '上架中' },
{ value: GoodsStatus.OFF, label: '已下架' },
{ value: 'lowStock', label: '库存预警' },
]
const currentTab = ref<GoodsStatus | 'all' | 'lowStock'>('all')
// 搜索
const keyword = ref('')
// 批量选择
const selectMode = ref(false)
const selectedIds = ref<string[]>([])
// 加载商品
async function loadGoods() {
await merchantStore.fetchGoods({
status: currentTab.value,
keyword: keyword.value,
})
} }
function handleAdd() { // 切换 Tab
uni.navigateTo({ url: '/pagesMerchant/goods/edit' }) function handleTabChange(value: typeof currentTab.value) {
currentTab.value = value
loadGoods()
} }
// 搜索
function handleSearch() {
loadGoods()
}
// 编辑商品
function handleEdit(id?: string) {
const url = id ? `/pagesMerchant/goods/edit?id=${id}` : '/pagesMerchant/goods/edit'
uni.navigateTo({ url })
}
// 切换上下架
async function handleToggleStatus(goods: any) {
const newStatus = goods.status === GoodsStatus.ON ? GoodsStatus.OFF : GoodsStatus.ON
const action = newStatus === GoodsStatus.ON ? '上架' : '下架'
uni.showModal({
title: `确认${action}`,
content: `确定要${action}该商品吗?`,
success: async (res) => {
if (res.confirm) {
await merchantStore.updateGoodsStatus(goods.id, newStatus)
uni.showToast({ title: `${action}成功`, icon: 'success' })
}
},
})
}
// 切换选择模式
function toggleSelectMode() {
selectMode.value = !selectMode.value
selectedIds.value = []
}
// 选择商品
function toggleSelect(id: string) {
const index = selectedIds.value.indexOf(id)
if (index > -1) {
selectedIds.value.splice(index, 1)
} else {
selectedIds.value.push(id)
}
}
// 批量上下架
async function handleBatchAction(status: GoodsStatus) {
if (selectedIds.value.length === 0) {
uni.showToast({ title: '请选择商品', icon: 'none' })
return
}
for (const id of selectedIds.value) {
await merchantStore.updateGoodsStatus(id, status)
}
uni.showToast({ title: '操作成功', icon: 'success' })
selectedIds.value = []
selectMode.value = false
}
// 下拉刷新
async function onRefresh() {
await loadGoods()
}
onMounted(() => {
loadGoods()
})
</script> </script>
<template> <template>
<view class="goods-list-page"> <view class="goods-list-page">
<view class="goods-list"> <!-- 搜索栏 -->
<view class="search-bar">
<wd-search
v-model="keyword"
placeholder="搜索商品名称"
@search="handleSearch"
@clear="handleSearch"
/>
<view class="batch-btn" @click="toggleSelectMode">
{{ selectMode ? '取消' : '批量' }}
</view>
</view>
<!-- Tab 切换 -->
<view class="tabs">
<view <view
v-for="item in goods" v-for="tab in tabs"
:key="item.id" :key="tab.value"
class="goods-card" class="tab-item"
@click="handleEdit(item.id)" :class="{ active: currentTab === tab.value }"
@click="handleTabChange(tab.value)"
> >
{{ tab.label }}
</view>
</view>
<!-- 商品列表 -->
<scroll-view
class="goods-list"
scroll-y
refresher-enabled
:refresher-triggered="merchantStore.loading"
@refresherrefresh="onRefresh"
>
<view v-if="merchantStore.goods.length === 0" class="empty">
<text class="i-carbon-shopping-bag"></text>
<text>暂无商品</text>
</view>
<view
v-for="goods in merchantStore.goods"
:key="goods.id"
class="goods-card"
@click="!selectMode && handleEdit(goods.id)"
>
<!-- 选择框 -->
<view
v-if="selectMode"
class="checkbox"
:class="{ checked: selectedIds.includes(goods.id) }"
@click.stop="toggleSelect(goods.id)"
>
<text class="i-carbon-checkmark" v-if="selectedIds.includes(goods.id)"></text>
</view>
<image :src="goods.images[0] || '/static/goods/default.jpg'" class="goods-image" mode="aspectFill" />
<view class="goods-info"> <view class="goods-info">
<text class="goods-name">{{ item.name }}</text> <text class="goods-name">{{ goods.name }}</text>
<text class="goods-category">{{ goods.categoryName }}</text>
<view class="goods-meta"> <view class="goods-meta">
<text class="price">¥{{ item.price.toFixed(2) }}</text> <view class="price-stock">
<text class="stock" :class="{ warning: item.stock === 0 }"> <text class="price">¥{{ goods.price.toFixed(2) }}</text>
库存{{ item.stock }} <text class="stock" :class="{ warning: goods.stock <= 10 }">
</text> 库存 {{ goods.stock }}
</text>
</view>
<text class="sales">销量 {{ goods.sales }}</text>
</view> </view>
</view> </view>
<view class="goods-status" :class="item.status">
{{ item.status === 'on' ? '上架' : '下架' }} <view class="goods-actions" v-if="!selectMode">
<view
class="status-tag"
:style="{ background: GOODS_STATUS_CONFIG[goods.status].color + '20', color: GOODS_STATUS_CONFIG[goods.status].color }"
>
{{ GOODS_STATUS_CONFIG[goods.status].label }}
</view>
<view class="action-btn" @click.stop="handleToggleStatus(goods)">
{{ goods.status === GoodsStatus.ON ? '下架' : '上架' }}
</view>
</view> </view>
</view> </view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="footer-bar" v-if="selectMode">
<view class="selected-count">已选 {{ selectedIds.length }} </view>
<view class="actions">
<view class="action-btn" @click="handleBatchAction(GoodsStatus.ON)">批量上架</view>
<view class="action-btn" @click="handleBatchAction(GoodsStatus.OFF)">批量下架</view>
</view>
</view> </view>
<!-- 添加按钮 --> <!-- 添加按钮 -->
<view class="add-btn" @click="handleAdd"> <view class="add-btn" @click="handleEdit()" v-if="!selectMode">
<text class="i-carbon-add"></text> <text class="i-carbon-add"></text>
</view> </view>
</view> </view>
@@ -56,69 +218,224 @@ function handleAdd() {
.goods-list-page { .goods-list-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
display: flex;
flex-direction: column;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.search-bar {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx; padding: 20rpx;
padding-bottom: 120rpx; background: #fff;
:deep(.wd-search) {
flex: 1;
}
.batch-btn {
font-size: 26rpx;
color: #ff8f0d;
flex-shrink: 0;
}
}
.tabs {
display: flex;
background: #fff;
padding: 0 10rpx;
border-bottom: 1rpx solid #f0f0f0;
.tab-item {
flex: 1;
text-align: center;
padding: 24rpx 0;
font-size: 26rpx;
color: #666;
position: relative;
&.active {
color: #ff8f0d;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40rpx;
height: 4rpx;
background: #ff8f0d;
border-radius: 2rpx;
}
}
}
} }
.goods-list { .goods-list {
flex: 1;
padding-bottom: 160rpx;
}
.empty {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx; align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #999;
text:first-child {
font-size: 80rpx;
margin-bottom: 20rpx;
}
} }
.goods-card { .goods-card {
display: flex;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 20rpx;
display: flex; margin: 20rpx;
justify-content: space-between;
align-items: center;
.goods-info { .checkbox {
flex: 1; width: 40rpx;
height: 40rpx;
border: 2rpx solid #ddd;
border-radius: 50%;
margin-right: 16rpx;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: center;
.goods-name { &.checked {
font-size: 28rpx; background: #ff8f0d;
font-weight: 600; border-color: #ff8f0d;
color: #333;
display: block;
margin-bottom: 12rpx;
}
.goods-meta {
display: flex;
gap: 24rpx;
.price { text {
font-size: 30rpx; color: #fff;
font-weight: 700;
color: #ff8f0d;
}
.stock {
font-size: 24rpx; font-size: 24rpx;
color: #666;
&.warning {
color: #fa4350;
}
} }
} }
} }
.goods-status { .goods-image {
padding: 8rpx 16rpx; width: 180rpx;
border-radius: 8rpx; height: 180rpx;
font-size: 22rpx; border-radius: 12rpx;
background: #f5f5f5;
flex-shrink: 0;
}
.goods-info {
flex: 1;
margin-left: 20rpx;
display: flex;
flex-direction: column;
&.on { .goods-name {
background: rgba(0, 192, 90, 0.1); font-size: 28rpx;
color: #00c05a; color: #333;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 8rpx;
} }
&.off { .goods-category {
background: rgba(153, 153, 153, 0.1); font-size: 22rpx;
color: #999; color: #999;
margin-bottom: auto;
}
.goods-meta {
.price-stock {
display: flex;
align-items: center;
gap: 16rpx;
margin-bottom: 4rpx;
.price {
font-size: 32rpx;
color: #ff8f0d;
font-weight: 600;
}
.stock {
font-size: 22rpx;
color: #666;
&.warning {
color: #fa4350;
}
}
}
.sales {
font-size: 22rpx;
color: #999;
}
}
}
.goods-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
margin-left: 16rpx;
.status-tag {
padding: 4rpx 12rpx;
border-radius: 6rpx;
font-size: 22rpx;
}
.action-btn {
padding: 12rpx 24rpx;
border: 1rpx solid #ddd;
border-radius: 24rpx;
font-size: 24rpx;
color: #666;
}
}
}
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
background: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
.selected-count {
font-size: 26rpx;
color: #666;
}
.actions {
display: flex;
gap: 16rpx;
.action-btn {
padding: 16rpx 32rpx;
background: #ff8f0d;
border-radius: 32rpx;
font-size: 26rpx;
color: #fff;
} }
} }
} }

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

View File

@@ -0,0 +1,185 @@
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
definePage({
style: {
navigationBarTitleText: '账号安全',
},
})
const userStore = useUserStore()
// 菜单列表
const menuList = [
{
icon: 'i-carbon-locked',
label: '修改密码',
value: '',
action: 'changePassword',
},
{
icon: 'i-carbon-phone',
label: '绑定手机',
value: userStore.userInfo?.phone ? `已绑定 ${userStore.userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}` : '未绑定',
action: 'bindPhone',
},
{
icon: 'i-carbon-email',
label: '绑定邮箱',
value: '未绑定',
action: 'bindEmail',
},
]
// 处理菜单点击
function handleMenu(action: string) {
switch (action) {
case 'changePassword':
uni.showToast({ title: '功能开发中', icon: 'none' })
break
case 'bindPhone':
uni.showToast({ title: '功能开发中', icon: 'none' })
break
case 'bindEmail':
uni.showToast({ title: '功能开发中', icon: 'none' })
break
}
}
// 注销账号
function handleDeleteAccount() {
uni.showModal({
title: '警告',
content: '注销账号后,所有数据将被清除且无法恢复,确定要注销吗?',
confirmColor: '#fa4350',
success: (res) => {
if (res.confirm) {
uni.showToast({ title: '功能开发中', icon: 'none' })
}
},
})
}
</script>
<template>
<view class="account-page">
<view class="menu-list">
<view
v-for="item in menuList"
:key="item.label"
class="menu-item"
@click="handleMenu(item.action)"
>
<view class="menu-left">
<text :class="item.icon" class="menu-icon"></text>
<text class="menu-label">{{ item.label }}</text>
</view>
<view class="menu-right">
<text class="menu-value">{{ item.value }}</text>
<text class="i-carbon-chevron-right"></text>
</view>
</view>
</view>
<view class="delete-btn" @click="handleDeleteAccount">
注销账号
</view>
<view class="tips">
<text class="i-carbon-warning"></text>
<text>注销账号后您的所有数据将被永久删除且无法恢复请谨慎操作</text>
</view>
</view>
</template>
<style lang="scss" scoped>
.account-page {
min-height: 100vh;
background: #f5f5f5;
padding: 20rpx;
width: 100%;
max-width: 540px;
margin: 0 auto;
box-sizing: border-box;
}
.menu-list {
background: #fff;
border-radius: 16rpx;
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 32rpx 24rpx;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.menu-left {
display: flex;
align-items: center;
gap: 20rpx;
.menu-icon {
font-size: 40rpx;
color: #ff8f0d;
}
.menu-label {
font-size: 28rpx;
color: #333;
}
}
.menu-right {
display: flex;
align-items: center;
gap: 12rpx;
.menu-value {
font-size: 26rpx;
color: #999;
}
text:last-child {
font-size: 28rpx;
color: #ccc;
}
}
}
}
.delete-btn {
margin-top: 60rpx;
background: #fff;
border-radius: 16rpx;
padding: 32rpx;
text-align: center;
font-size: 28rpx;
color: #fa4350;
}
.tips {
display: flex;
align-items: flex-start;
gap: 12rpx;
margin-top: 20rpx;
padding: 0 16rpx;
text {
font-size: 24rpx;
color: #999;
line-height: 1.5;
flex: 1;
&:first-child {
color: #ff8f0d;
flex: none;
margin-top: 2rpx;
}
}
}
</style>

View File

@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user' import { useUserStore, CLIENT_TYPE_CONFIG, ClientType } from '@/store/user'
import { useMerchantStore } from '@/store/merchant'
import { tabbarStore } from '@/tabbar/store' import { tabbarStore } from '@/tabbar/store'
definePage({ definePage({
@@ -9,15 +10,32 @@ definePage({
}) })
const userStore = useUserStore() const userStore = useUserStore()
const merchantStore = useMerchantStore()
const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT] const config = CLIENT_TYPE_CONFIG[ClientType.MERCHANT]
// 菜单列表
const menuList = [ const menuList = [
{ icon: 'i-carbon-settings', label: '店铺设置' }, { icon: 'i-carbon-store', label: '店铺设置', path: '/pagesMerchant/me/shop' },
{ icon: 'i-carbon-customer-service', label: '客服中心' }, { icon: 'i-carbon-locked', label: '账号安全', path: '/pagesMerchant/me/account' },
{ icon: 'i-carbon-notification', label: '消息中心', count: 3 },
{ icon: 'i-carbon-help', label: '帮助中心' }, { icon: 'i-carbon-help', label: '帮助中心' },
{ icon: 'i-carbon-information', label: '关于我们' }, { icon: 'i-carbon-information', label: '关于我们' },
] ]
// 加载数据
async function loadData() {
await merchantStore.fetchStats()
await merchantStore.fetchShopInfo()
}
// 菜单跳转
function handleMenu(item: any) {
if (item.path) {
uni.navigateTo({ url: item.path })
}
}
// 退出登录
function handleLogout() { function handleLogout() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@@ -31,29 +49,62 @@ function handleLogout() {
}, },
}) })
} }
onMounted(() => {
loadData()
})
</script> </script>
<template> <template>
<view class="me-page"> <view class="me-page">
<!-- 用户信息 --> <!-- 用户信息卡片 -->
<view class="user-card" :style="{ background: config.color }"> <view class="user-card" :style="{ background: config.color }">
<view class="avatar"> <view class="user-info">
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill"></image> <view class="avatar">
<image :src="userStore.userInfo?.avatar || '/static/images/avatar.jpg'" mode="aspectFill" />
</view>
<view class="info">
<text class="nickname">{{ merchantStore.shopInfo?.name || userStore.userInfo?.nickname || '商家用户' }}</text>
<view class="tags">
<text class="tag">{{ config.label }}</text>
<text class="tag" v-if="merchantStore.shopInfo">已认证</text>
</view>
</view>
</view> </view>
<view class="info">
<text class="nickname">{{ userStore.userInfo?.nickname || '商家用户' }}</text> <!-- 数据统计 -->
<text class="tag">{{ config.label }}</text> <view class="stats" v-if="merchantStore.stats">
<view class="stat-item">
<text class="value">{{ merchantStore.stats.todayOrders }}</text>
<text class="label">今日订单</text>
</view>
<view class="stat-item">
<text class="value">{{ merchantStore.stats.totalGoods }}</text>
<text class="label">商品数量</text>
</view>
<view class="stat-item">
<text class="value">¥{{ (merchantStore.stats.todaySales / 100).toFixed(0) }}</text>
<text class="label">今日销售</text>
</view>
</view> </view>
</view> </view>
<!-- 菜单列表 --> <!-- 菜单列表 -->
<view class="menu-list"> <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="handleMenu(item)"
>
<view class="menu-left"> <view class="menu-left">
<text :class="item.icon" class="menu-icon"></text> <text :class="item.icon" class="menu-icon"></text>
<text class="menu-label">{{ item.label }}</text> <text class="menu-label">{{ item.label }}</text>
</view> </view>
<text class="i-carbon-chevron-right"></text> <view class="menu-right">
<view v-if="item.count" class="badge">{{ item.count }}</view>
<text class="i-carbon-chevron-right"></text>
</view>
</view> </view>
</view> </view>
@@ -66,42 +117,81 @@ function handleLogout() {
.me-page { .me-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
width: 100%;
max-width: 540px;
margin: 0 auto;
} }
.user-card { .user-card {
padding: 60rpx 30rpx 40rpx; padding: 40rpx 30rpx 30rpx;
display: flex;
align-items: center;
gap: 24rpx;
.avatar { .user-info {
width: 120rpx; display: flex;
height: 120rpx; align-items: center;
border-radius: 50%; gap: 24rpx;
overflow: hidden; margin-bottom: 30rpx;
border: 4rpx solid rgba(255, 255, 255, 0.5);
image { .avatar {
width: 100%; width: 120rpx;
height: 100%; height: 120rpx;
border-radius: 50%;
overflow: hidden;
border: 4rpx solid rgba(255, 255, 255, 0.5);
image {
width: 100%;
height: 100%;
}
}
.info {
flex: 1;
.nickname {
font-size: 36rpx;
font-weight: 600;
color: #fff;
display: block;
margin-bottom: 12rpx;
}
.tags {
display: flex;
gap: 12rpx;
.tag {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.2);
padding: 4rpx 16rpx;
border-radius: 20rpx;
}
}
} }
} }
.info { .stats {
.nickname { display: flex;
font-size: 36rpx; justify-content: space-around;
font-weight: 600; background: rgba(255, 255, 255, 0.15);
color: #fff; border-radius: 16rpx;
display: block; padding: 24rpx 0;
margin-bottom: 8rpx;
}
.tag { .stat-item {
font-size: 24rpx; text-align: center;
color: rgba(255, 255, 255, 0.8); color: #fff;
background: rgba(255, 255, 255, 0.2);
padding: 4rpx 16rpx; .value {
border-radius: 20rpx; font-size: 36rpx;
font-weight: 700;
display: block;
margin-bottom: 4rpx;
}
.label {
font-size: 22rpx;
opacity: 0.8;
}
} }
} }
} }
@@ -115,7 +205,7 @@ function handleLogout() {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 30rpx; padding: 32rpx 24rpx;
border-bottom: 1rpx solid #f5f5f5; border-bottom: 1rpx solid #f5f5f5;
&:last-child { &:last-child {
@@ -125,11 +215,11 @@ function handleLogout() {
.menu-left { .menu-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16rpx; gap: 20rpx;
.menu-icon { .menu-icon {
font-size: 40rpx; font-size: 40rpx;
color: #666; color: #ff8f0d;
} }
.menu-label { .menu-label {
@@ -137,6 +227,30 @@ function handleLogout() {
color: #333; color: #333;
} }
} }
.menu-right {
display: flex;
align-items: center;
gap: 12rpx;
.badge {
min-width: 36rpx;
height: 36rpx;
background: #fa4350;
border-radius: 18rpx;
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: #fff;
}
text {
font-size: 28rpx;
color: #ccc;
}
}
} }
} }
@@ -144,7 +258,7 @@ function handleLogout() {
margin: 40rpx 20rpx; margin: 40rpx 20rpx;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 30rpx; padding: 32rpx;
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
color: #fa4350; color: #fa4350;

View File

@@ -0,0 +1,246 @@
<script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { updateShopInfo as apiUpdateShopInfo } from '@/pagesMerchant/api'
definePage({
style: {
navigationBarTitleText: '店铺设置',
},
})
const merchantStore = useMerchantStore()
// 表单数据
const formData = ref({
name: '',
phone: '',
address: '',
businessHours: '',
description: '',
})
// 加载店铺信息
async function loadShopInfo() {
await merchantStore.fetchShopInfo()
if (merchantStore.shopInfo) {
formData.value = {
name: merchantStore.shopInfo.name,
phone: merchantStore.shopInfo.phone,
address: merchantStore.shopInfo.address,
businessHours: merchantStore.shopInfo.businessHours,
description: merchantStore.shopInfo.description || '',
}
}
}
// 选择头像
function handleChooseAvatar() {
uni.chooseImage({
count: 1,
success: (res) => {
// 实际项目中这里需要上传图片
uni.showToast({ title: '头像已选择', icon: 'success' })
},
})
}
// 保存
async function handleSave() {
if (!formData.value.name.trim()) {
uni.showToast({ title: '请输入店铺名称', icon: 'none' })
return
}
uni.showLoading({ title: '保存中...' })
try {
await apiUpdateShopInfo(formData.value)
uni.hideLoading()
uni.showToast({ title: '保存成功', icon: 'success' })
} catch (error) {
uni.hideLoading()
uni.showToast({ title: '保存失败', icon: 'none' })
}
}
onMounted(() => {
loadShopInfo()
})
</script>
<template>
<view class="shop-page">
<view class="form-wrapper">
<!-- 店铺头像 -->
<view class="avatar-section" @click="handleChooseAvatar">
<text class="label">店铺头像</text>
<view class="avatar">
<image :src="merchantStore.shopInfo?.logo || '/static/images/shop-logo.jpg'" mode="aspectFill" />
<text class="i-carbon-camera"></text>
</view>
</view>
<!-- 表单 -->
<view class="form-section">
<view class="form-item">
<text class="label">店铺名称</text>
<input v-model="formData.name" placeholder="请输入店铺名称" class="input" />
</view>
<view class="form-item">
<text class="label">联系电话</text>
<input v-model="formData.phone" type="tel" placeholder="请输入联系电话" class="input" />
</view>
<view class="form-item">
<text class="label">店铺地址</text>
<input v-model="formData.address" placeholder="请输入店铺地址" class="input" />
</view>
<view class="form-item">
<text class="label">营业时间</text>
<input v-model="formData.businessHours" placeholder="如09:00 - 22:00" class="input" />
</view>
<view class="form-item textarea-item">
<text class="label">店铺简介</text>
<textarea v-model="formData.description" placeholder="请输入店铺简介" class="textarea" />
</view>
</view>
</view>
<!-- 保存按钮 -->
<view class="footer-bar">
<view class="save-btn" @click="handleSave">保存</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.shop-page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 140rpx;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.form-wrapper {
padding: 20rpx;
}
.avatar-section {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.label {
font-size: 28rpx;
color: #333;
}
.avatar {
position: relative;
width: 120rpx;
height: 120rpx;
border-radius: 16rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #fff;
}
}
}
.form-section {
background: #fff;
border-radius: 16rpx;
padding: 0 24rpx;
.form-item {
display: flex;
align-items: center;
padding: 28rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.label {
width: 160rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
}
.input {
flex: 1;
font-size: 28rpx;
text-align: right;
}
&.textarea-item {
flex-direction: column;
align-items: flex-start;
.label {
margin-bottom: 16rpx;
}
.textarea {
width: 100%;
height: 160rpx;
background: #f5f5f5;
border-radius: 12rpx;
padding: 20rpx;
font-size: 28rpx;
box-sizing: border-box;
}
}
}
}
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx;
background: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
.save-btn {
height: 88rpx;
background: linear-gradient(135deg, #ff8f0d 0%, #ffb347 100%);
border-radius: 44rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 600;
color: #fff;
}
}
</style>

View File

@@ -0,0 +1,92 @@
/**
* 商户端财务数据 Mock
*/
import type {
FinanceOverview,
Transaction,
Settlement,
WithdrawRecord,
} from '@/typings/merchant'
import {
TransactionType,
SettlementStatus,
WithdrawStatus,
} from '@/typings/merchant'
export const mockFinanceOverview: FinanceOverview = {
balance: 125680.50,
pendingSettlement: 23500.00,
monthIncome: 89600.00,
totalIncome: 568900.00,
}
export const mockTransactions: Transaction[] = [
{
id: '1',
type: TransactionType.INCOME,
amount: 2999.00,
balance: 125680.50,
orderNo: 'M202312170001',
remark: '订单收入',
createTime: '2024-12-17 10:31:00',
},
{
id: '2',
type: TransactionType.WITHDRAW,
amount: -5000.00,
balance: 122681.50,
remark: '提现到银行卡',
createTime: '2024-12-16 15:00:00',
},
{
id: '3',
type: TransactionType.INCOME,
amount: 1590.00,
balance: 127681.50,
orderNo: 'M202312170002',
remark: '订单收入',
createTime: '2024-12-17 09:46:00',
},
]
export const mockSettlements: Settlement[] = [
{
id: '1',
settlementNo: 'S202312150001',
amount: 35680.00,
orderCount: 128,
status: SettlementStatus.SETTLED,
period: '2024-12-01 ~ 2024-12-15',
settledTime: '2024-12-16 10:00:00',
createTime: '2024-12-15 23:59:59',
},
{
id: '2',
settlementNo: 'S202312310001',
amount: 23500.00,
orderCount: 86,
status: SettlementStatus.PENDING,
period: '2024-12-16 ~ 2024-12-31',
createTime: '2024-12-17 00:00:00',
},
]
export const mockWithdrawRecords: WithdrawRecord[] = [
{
id: '1',
amount: 5000.00,
bankName: '中国工商银行',
bankAccount: '**** **** **** 1234',
status: WithdrawStatus.COMPLETED,
applyTime: '2024-12-15 10:00:00',
completeTime: '2024-12-16 15:00:00',
},
{
id: '2',
amount: 10000.00,
bankName: '中国建设银行',
bankAccount: '**** **** **** 5678',
status: WithdrawStatus.PENDING,
applyTime: '2024-12-17 09:00:00',
},
]

View File

@@ -0,0 +1,26 @@
/**
* 商户端商品数据 Mock
* 使用用户端商品信息mockGoodsList
*/
import type { MerchantGoods } from '@/typings/merchant'
import { GoodsStatus } from '@/typings/merchant'
import { mockGoodsList } from '@/mock/goods'
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',
}))

View File

@@ -0,0 +1,8 @@
/**
* 商户端 Mock 数据统一导出
*/
export * from './stats'
export * from './order'
export * from './goods'
export * from './finance'
export * from './shop'

View File

@@ -0,0 +1,152 @@
/**
* 商户端订单数据 Mock
* 使用用户端商品信息mockGoodsList
*/
import type { MerchantOrder } from '@/typings/merchant'
import { OrderStatus } from '@/typings/merchant'
import { mockGoodsList } from '@/mock/goods'
export const mockMerchantOrders: MerchantOrder[] = [
{
id: '1',
orderNo: 'M202312170001',
customerName: '张三',
customerPhone: '138****8000',
status: OrderStatus.PENDING,
amount: 20.00,
freight: 0,
payAmount: 20.00,
remark: '请尽快发货',
goods: [
{
id: 'g1',
goodsId: 'goods_001',
name: '桂味新鲜荔枝现摘现发当季水果自家果园荔枝',
image: '/static/product/1/1.jpg',
skuName: '5斤装 特级',
price: 20.00,
quantity: 1,
amount: 20.00,
},
],
address: {
name: '张三',
phone: '13800138000',
province: '广东省',
city: '广州市',
district: '天河区',
detail: '体育西路123号',
},
createTime: '2024-12-17 10:30:00',
payTime: '2024-12-17 10:31:00',
},
{
id: '2',
orderNo: 'M202312170002',
customerName: '李四',
customerPhone: '139****9000',
status: OrderStatus.SHIPPING,
amount: 100.00,
freight: 10,
payAmount: 110.00,
goods: [
{
id: 'g2',
goodsId: 'goods_002',
name: '老农田桂圆肉干无核新货8a龙眼肉干500g厚元肉干',
image: '/static/product/2/1.jpg',
skuName: '500g',
price: 50.00,
quantity: 2,
amount: 100.00,
},
],
address: {
name: '李四',
phone: '13900139000',
province: '广东省',
city: '深圳市',
district: '南山区',
detail: '科技园南路456号',
},
createTime: '2024-12-17 09:45:00',
payTime: '2024-12-17 09:46:00',
},
{
id: '3',
orderNo: 'M202312170003',
customerName: '王五',
customerPhone: '137****7000',
status: OrderStatus.SHIPPED,
amount: 150.00,
freight: 0,
payAmount: 150.00,
goods: [
{
id: 'g3',
goodsId: 'goods_003',
name: '自然禾方化橘红陈皮无糖植物饮料350ml*9瓶整箱装',
image: '/static/product/3/1.jpg',
skuName: '9瓶装',
price: 50.00,
quantity: 3,
amount: 150.00,
},
],
address: {
name: '王五',
phone: '13700137000',
province: '广东省',
city: '佛山市',
district: '禅城区',
detail: '祖庙路789号',
},
logistics: {
company: '顺丰速运',
trackingNo: 'SF1234567890',
status: '运输中',
traces: [
{ time: '2024-12-17 14:00:00', content: '快件已到达【广州转运中心】' },
{ time: '2024-12-17 10:00:00', content: '快件已从【深圳宝安区】发出' },
{ time: '2024-12-17 08:20:00', content: '快件已揽收' },
],
},
createTime: '2024-12-17 08:20:00',
payTime: '2024-12-17 08:21:00',
shipTime: '2024-12-17 08:30:00',
},
{
id: '4',
orderNo: 'M202312170004',
customerName: '赵六',
customerPhone: '136****6000',
status: OrderStatus.COMPLETED,
amount: 30.00,
freight: 0,
payAmount: 30.00,
goods: [
{
id: 'g4',
goodsId: 'goods_005',
name: '罗非鱼新鲜冷冻食材烧烤红烧净膛烤鱼酒店食堂快',
image: '/static/product/5/1.jpg',
skuName: '500g',
price: 30.00,
quantity: 1,
amount: 30.00,
},
],
address: {
name: '赵六',
phone: '13600136000',
province: '广东省',
city: '东莞市',
district: '南城区',
detail: '宏图路100号',
},
createTime: '2024-12-16 15:00:00',
payTime: '2024-12-16 15:01:00',
shipTime: '2024-12-16 16:00:00',
completeTime: '2024-12-17 10:00:00',
},
]

View File

@@ -0,0 +1,14 @@
/**
* 商户端店铺数据 Mock
*/
import type { ShopInfo } from '@/typings/merchant'
export const mockShopInfo: ShopInfo = {
id: 'shop_001',
name: '数字广东旗舰店',
logo: '/static/images/shop-logo.jpg',
phone: '020-12345678',
address: '广东省广州市天河区体育西路123号',
businessHours: '09:00 - 22:00',
description: '专注数码产品销售,正品保障',
}

View File

@@ -0,0 +1,13 @@
/**
* 商户端统计数据 Mock
*/
import type { MerchantStats } from '@/typings/merchant'
export const mockMerchantStats: MerchantStats = {
todayOrders: 128,
pendingOrders: 23,
todaySales: 15680.50,
totalGoods: 356,
lowStockGoods: 12,
pendingSettlement: 8560.00,
}

View File

@@ -0,0 +1,742 @@
<script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
import { shipOrder, addMerchantRemark } from '@/pagesMerchant/api'
import { onLoad } from '@dcloudio/uni-app'
definePage({
style: {
navigationBarTitleText: '订单详情',
},
})
const merchantStore = useMerchantStore()
// 页面参数
const orderId = ref('')
// 发货弹窗
const showShipModal = ref(false)
const shipForm = ref({
company: '',
trackingNo: '',
})
// 备注弹窗
const showRemarkModal = ref(false)
const remarkInput = ref('')
// 物流公司列表
const logisticsCompanies = [
'顺丰速运',
'中通快递',
'圆通速递',
'韵达快递',
'申通快递',
'邮政EMS',
]
// 加载订单详情
async function loadOrderDetail() {
if (orderId.value) {
console.log('Loading order detail:', orderId.value)
await merchantStore.fetchOrderDetail(orderId.value)
console.log('Order loaded:', merchantStore.currentOrder)
}
}
// 确认订单
async function handleConfirm() {
if (!merchantStore.currentOrder) return
uni.showModal({
title: '确认订单',
content: '确认接受此订单?',
success: async (res) => {
if (res.confirm) {
await merchantStore.confirmOrder(merchantStore.currentOrder!.id)
uni.showToast({ title: '确认成功', icon: 'success' })
}
},
})
}
// 打开发货弹窗
function openShipModal() {
shipForm.value = { company: '', trackingNo: '' }
showShipModal.value = true
}
// 确认发货
async function handleShip() {
if (!shipForm.value.company) {
uni.showToast({ title: '请选择物流公司', icon: 'none' })
return
}
if (!shipForm.value.trackingNo) {
uni.showToast({ title: '请输入运单号', icon: 'none' })
return
}
await shipOrder(merchantStore.currentOrder!.id, shipForm.value)
showShipModal.value = false
uni.showToast({ title: '发货成功', icon: 'success' })
loadOrderDetail()
}
// 添加备注
async function handleAddRemark() {
if (!remarkInput.value.trim()) {
uni.showToast({ title: '请输入备注内容', icon: 'none' })
return
}
await addMerchantRemark(merchantStore.currentOrder!.id, remarkInput.value)
showRemarkModal.value = false
uni.showToast({ title: '备注添加成功', icon: 'success' })
loadOrderDetail()
}
// 复制订单号
function copyOrderNo() {
uni.setClipboardData({
data: merchantStore.currentOrder?.orderNo || '',
success: () => {
uni.showToast({ title: '已复制', icon: 'success' })
},
})
}
// 拨打电话
function callCustomer() {
const phone = merchantStore.currentOrder?.address.phone
if (phone) {
uni.makePhoneCall({ phoneNumber: phone })
}
}
// 页面加载时获取参数
onLoad((options) => {
console.log('Order detail page loaded with options:', options)
if (options?.id) {
orderId.value = options.id as string
loadOrderDetail()
} else {
console.error('No order id provided')
uni.showToast({ title: '订单ID缺失', icon: 'none' })
}
})
</script>
<template>
<view class="order-detail-page" v-if="merchantStore.currentOrder">
<view class="order-wrapper">
<!-- 订单状态 -->
<view class="status-card" :style="{ background: ORDER_STATUS_CONFIG[merchantStore.currentOrder.status].color }">
<text class="status-text">{{ ORDER_STATUS_CONFIG[merchantStore.currentOrder.status].label }}</text>
<text class="status-desc" v-if="merchantStore.currentOrder.status === OrderStatus.PENDING">
请尽快确认订单
</text>
<text class="status-desc" v-else-if="merchantStore.currentOrder.status === OrderStatus.SHIPPING">
请尽快发货
</text>
</view>
<!-- 收货地址 -->
<view class="section address-section">
<view class="address-header">
<text class="i-carbon-location"></text>
<text class="title">收货地址</text>
<text class="call-btn" @click="callCustomer">
<text class="i-carbon-phone"></text>
</text>
</view>
<view class="address-content">
<view class="contact">
<text class="name">{{ merchantStore.currentOrder.address.name }}</text>
<text class="phone">{{ merchantStore.currentOrder.address.phone }}</text>
</view>
<text class="detail">
{{ merchantStore.currentOrder.address.province }}
{{ merchantStore.currentOrder.address.city }}
{{ merchantStore.currentOrder.address.district }}
{{ merchantStore.currentOrder.address.detail }}
</text>
</view>
</view>
<!-- 物流信息 -->
<view class="section" v-if="merchantStore.currentOrder.logistics">
<view class="section-header">
<text class="i-carbon-delivery"></text>
<text class="title">物流信息</text>
</view>
<view class="logistics-info">
<view class="logistics-company">
<text>{{ merchantStore.currentOrder.logistics.company }}</text>
<text class="tracking-no">{{ merchantStore.currentOrder.logistics.trackingNo }}</text>
</view>
<view class="logistics-traces">
<view
v-for="(trace, index) in merchantStore.currentOrder.logistics.traces"
:key="index"
class="trace-item"
:class="{ active: index === 0 }"
>
<view class="trace-dot"></view>
<view class="trace-content">
<text class="trace-text">{{ trace.content }}</text>
<text class="trace-time">{{ trace.time }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 商品清单 -->
<view class="section">
<view class="section-header">
<text class="i-carbon-shopping-bag"></text>
<text class="title">商品清单</text>
</view>
<view class="goods-list">
<view v-for="goods in merchantStore.currentOrder.goods" :key="goods.id" class="goods-item">
<image :src="goods.image" class="goods-image" mode="aspectFill" />
<view class="goods-info">
<text class="goods-name">{{ goods.name }}</text>
<text class="goods-sku">{{ goods.skuName }}</text>
<view class="goods-bottom">
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
<text class="quantity">x{{ goods.quantity }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="section">
<view class="section-header">
<text class="i-carbon-document"></text>
<text class="title">订单信息</text>
</view>
<view class="info-list">
<view class="info-item">
<text class="label">订单编号</text>
<view class="value" @click="copyOrderNo">
<text>{{ merchantStore.currentOrder.orderNo }}</text>
<text class="i-carbon-copy"></text>
</view>
</view>
<view class="info-item">
<text class="label">下单时间</text>
<text class="value">{{ merchantStore.currentOrder.createTime }}</text>
</view>
<view class="info-item" v-if="merchantStore.currentOrder.payTime">
<text class="label">支付时间</text>
<text class="value">{{ merchantStore.currentOrder.payTime }}</text>
</view>
<view class="info-item" v-if="merchantStore.currentOrder.remark">
<text class="label">买家备注</text>
<text class="value remark">{{ merchantStore.currentOrder.remark }}</text>
</view>
<view class="info-item" v-if="merchantStore.currentOrder.merchantRemark">
<text class="label">商家备注</text>
<text class="value remark">{{ merchantStore.currentOrder.merchantRemark }}</text>
</view>
</view>
</view>
<!-- 金额信息 -->
<view class="section amount-section">
<view class="amount-item">
<text class="label">商品金额</text>
<text class="value">¥{{ merchantStore.currentOrder.amount.toFixed(2) }}</text>
</view>
<view class="amount-item">
<text class="label">运费</text>
<text class="value">¥{{ merchantStore.currentOrder.freight.toFixed(2) }}</text>
</view>
<view class="amount-item total">
<text class="label">实付金额</text>
<text class="value">¥{{ merchantStore.currentOrder.payAmount.toFixed(2) }}</text>
</view>
</view>
</view>
<!-- 底部操作栏 -->
<view class="footer-bar">
<view class="action-btn" @click="showRemarkModal = true">
添加备注
</view>
<view
v-if="merchantStore.currentOrder.status === OrderStatus.PENDING"
class="action-btn primary"
@click="handleConfirm"
>
确认订单
</view>
<view
v-if="merchantStore.currentOrder.status === OrderStatus.SHIPPING"
class="action-btn primary"
@click="openShipModal"
>
立即发货
</view>
</view>
<!-- 发货弹窗 -->
<wd-popup v-model="showShipModal" position="bottom" custom-style="border-radius: 24rpx 24rpx 0 0;">
<view class="ship-modal">
<view class="modal-header">
<text class="title">填写物流信息</text>
<text class="close" @click="showShipModal = false">×</text>
</view>
<view class="modal-content">
<view class="form-item">
<text class="label">物流公司</text>
<picker :range="logisticsCompanies" @change="(e: any) => shipForm.company = logisticsCompanies[e.detail.value]">
<view class="picker-value">
{{ shipForm.company || '请选择物流公司' }}
<text class="i-carbon-chevron-right"></text>
</view>
</picker>
</view>
<view class="form-item">
<text class="label">运单号</text>
<input v-model="shipForm.trackingNo" placeholder="请输入运单号" class="input" />
</view>
</view>
<view class="modal-footer">
<view class="btn primary" @click="handleShip">确认发货</view>
</view>
</view>
</wd-popup>
<!-- 备注弹窗 -->
<wd-popup v-model="showRemarkModal" position="bottom" custom-style="border-radius: 24rpx 24rpx 0 0;">
<view class="remark-modal">
<view class="modal-header">
<text class="title">添加商家备注</text>
<text class="close" @click="showRemarkModal = false">×</text>
</view>
<view class="modal-content">
<textarea v-model="remarkInput" placeholder="请输入备注内容" class="textarea" />
</view>
<view class="modal-footer">
<view class="btn primary" @click="handleAddRemark">确定</view>
</view>
</view>
</wd-popup>
</view>
</template>
<style lang="scss" scoped>
.order-detail-page {
min-height: 100vh;
background: #f5f5f5;
padding-bottom: 120rpx;
width: 100%;
max-width: 540px;
margin: 0 auto;
}
.order-wrapper {
padding: 20rpx;
}
.status-card {
padding: 40rpx 30rpx;
border-radius: 16rpx;
color: #fff;
margin-bottom: 20rpx;
.status-text {
font-size: 36rpx;
font-weight: 600;
display: block;
margin-bottom: 8rpx;
}
.status-desc {
font-size: 26rpx;
opacity: 0.9;
}
}
.section {
background: #fff;
border-radius: 16rpx;
padding: 24rpx;
margin-bottom: 20rpx;
.section-header {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 20rpx;
text:first-child {
font-size: 32rpx;
color: #ff8f0d;
}
.title {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
}
}
.address-section {
.address-header {
display: flex;
align-items: center;
gap: 12rpx;
margin-bottom: 16rpx;
.call-btn {
margin-left: auto;
width: 60rpx;
height: 60rpx;
background: #ff8f0d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text {
font-size: 28rpx;
color: #fff;
}
}
}
.address-content {
.contact {
display: flex;
gap: 20rpx;
margin-bottom: 8rpx;
.name {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.phone {
font-size: 28rpx;
color: #666;
}
}
.detail {
font-size: 26rpx;
color: #666;
line-height: 1.5;
}
}
}
.logistics-info {
.logistics-company {
display: flex;
justify-content: space-between;
padding-bottom: 16rpx;
border-bottom: 1rpx solid #f5f5f5;
margin-bottom: 16rpx;
text {
font-size: 26rpx;
color: #333;
}
.tracking-no {
color: #666;
}
}
.logistics-traces {
.trace-item {
display: flex;
gap: 16rpx;
padding-left: 8rpx;
.trace-dot {
width: 12rpx;
height: 12rpx;
background: #ddd;
border-radius: 50%;
margin-top: 8rpx;
position: relative;
&::after {
content: '';
position: absolute;
left: 5rpx;
top: 20rpx;
width: 2rpx;
height: 60rpx;
background: #eee;
}
}
&.active .trace-dot {
background: #ff8f0d;
}
&:last-child .trace-dot::after {
display: none;
}
.trace-content {
flex: 1;
padding-bottom: 24rpx;
.trace-text {
font-size: 26rpx;
color: #333;
display: block;
margin-bottom: 4rpx;
}
.trace-time {
font-size: 22rpx;
color: #999;
}
}
}
}
}
.goods-list {
.goods-item {
display: flex;
gap: 16rpx;
& + .goods-item {
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f5f5f5;
}
.goods-image {
width: 160rpx;
height: 160rpx;
border-radius: 12rpx;
background: #f5f5f5;
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
.goods-name {
font-size: 28rpx;
color: #333;
margin-bottom: 8rpx;
}
.goods-sku {
font-size: 24rpx;
color: #999;
margin-bottom: auto;
}
.goods-bottom {
display: flex;
justify-content: space-between;
.price {
font-size: 28rpx;
color: #ff8f0d;
font-weight: 600;
}
.quantity {
font-size: 24rpx;
color: #999;
}
}
}
}
}
.info-list {
.info-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16rpx 0;
& + .info-item {
border-top: 1rpx solid #f5f5f5;
}
.label {
font-size: 26rpx;
color: #999;
flex-shrink: 0;
}
.value {
font-size: 26rpx;
color: #333;
text-align: right;
display: flex;
align-items: center;
gap: 8rpx;
&.remark {
color: #ff8f0d;
}
}
}
}
.amount-section {
.amount-item {
display: flex;
justify-content: space-between;
padding: 12rpx 0;
.label {
font-size: 26rpx;
color: #666;
}
.value {
font-size: 26rpx;
color: #333;
}
&.total {
border-top: 1rpx solid #f5f5f5;
padding-top: 20rpx;
margin-top: 8rpx;
.label {
font-weight: 600;
color: #333;
}
.value {
font-size: 36rpx;
font-weight: 700;
color: #ff8f0d;
}
}
}
}
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: flex-end;
gap: 20rpx;
padding: 20rpx 30rpx;
background: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
.action-btn {
padding: 20rpx 40rpx;
border-radius: 40rpx;
font-size: 28rpx;
border: 1rpx solid #ddd;
color: #666;
&.primary {
background: #ff8f0d;
border-color: #ff8f0d;
color: #fff;
}
}
}
.ship-modal, .remark-modal {
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
border-bottom: 1rpx solid #f5f5f5;
.title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.close {
font-size: 48rpx;
color: #999;
}
}
.modal-content {
padding: 30rpx;
}
.modal-footer {
padding: 20rpx 30rpx 40rpx;
.btn {
width: 100%;
height: 88rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 44rpx;
font-size: 30rpx;
&.primary {
background: #ff8f0d;
color: #fff;
}
}
}
.form-item {
margin-bottom: 24rpx;
.label {
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
display: block;
}
.picker-value {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 28rpx;
color: #666;
}
.input {
padding: 24rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 28rpx;
}
}
.textarea {
width: 100%;
height: 200rpx;
padding: 24rpx;
background: #f5f5f5;
border-radius: 12rpx;
font-size: 28rpx;
}
}
</style>

View File

@@ -1,52 +1,171 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useMerchantStore } from '@/store/merchant'
import { OrderStatus, ORDER_STATUS_CONFIG } from '@/typings/merchant'
definePage({ definePage({
style: { style: {
navigationBarTitleText: '订单管理', navigationBarTitleText: '订单管理',
}, },
}) })
// 模拟订单数据 const merchantStore = useMerchantStore()
const orders = ref([
{ id: '1', orderNo: 'M202312170001', customer: '张三', amount: 299.00, status: 'pending', time: '10:30' },
{ id: '2', orderNo: 'M202312170002', customer: '李四', amount: 1580.00, status: 'processing', time: '09:45' },
{ id: '3', orderNo: 'M202312170003', customer: '王五', amount: 456.50, status: 'completed', time: '08:20' },
])
const statusMap: Record<string, { text: string; color: string }> = { // Tab 状态
pending: { text: '待处理', color: '#ff8f0d' }, const tabs = [
processing: { text: '处理中', color: '#4d80f0' }, { value: 'all', label: '全部' },
completed: { text: '已完成', color: '#00c05a' }, { value: OrderStatus.PENDING, label: '待确认' },
{ value: OrderStatus.SHIPPING, label: '待发货' },
{ value: OrderStatus.SHIPPED, label: '已发货' },
{ value: OrderStatus.COMPLETED, label: '已完成' },
]
const currentTab = ref<OrderStatus | 'all'>('all')
// 搜索
const keyword = ref('')
// 加载订单
async function loadOrders() {
await merchantStore.fetchOrders({
status: currentTab.value,
keyword: keyword.value,
})
} }
function handleOrder(id: string) { // 切换 Tab
function handleTabChange(value: OrderStatus | 'all') {
currentTab.value = value
loadOrders()
}
// 搜索
function handleSearch() {
loadOrders()
}
// 查看详情
function handleDetail(id: string) {
uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` }) uni.navigateTo({ url: `/pagesMerchant/order/detail?id=${id}` })
} }
// 快捷确认订单
async function handleConfirm(id: string) {
uni.showModal({
title: '确认订单',
content: '确认接受此订单?',
success: async (res) => {
if (res.confirm) {
await merchantStore.confirmOrder(id)
uni.showToast({ title: '确认成功', icon: 'success' })
}
},
})
}
// 下拉刷新
async function onRefresh() {
await loadOrders()
}
// 页面加载
onMounted(() => {
loadOrders()
})
</script> </script>
<template> <template>
<view class="order-list-page"> <view class="order-list-page">
<view class="order-list"> <!-- 搜索栏 -->
<view class="search-bar">
<wd-search
v-model="keyword"
placeholder="搜索订单号/客户名称"
@search="handleSearch"
@clear="handleSearch"
/>
</view>
<!-- Tab 切换 -->
<view class="tabs">
<view <view
v-for="order in orders" v-for="tab in tabs"
:key="tab.value"
class="tab-item"
:class="{ active: currentTab === tab.value }"
@click="handleTabChange(tab.value)"
>
{{ tab.label }}
</view>
</view>
<!-- 订单列表 -->
<scroll-view
class="order-list"
scroll-y
refresher-enabled
:refresher-triggered="merchantStore.loading"
@refresherrefresh="onRefresh"
>
<view v-if="merchantStore.orders.length === 0" class="empty">
<text class="i-carbon-document"></text>
<text>暂无订单</text>
</view>
<view
v-for="order in merchantStore.orders"
:key="order.id" :key="order.id"
class="order-card" class="order-card"
@click="handleOrder(order.id)" @click="handleDetail(order.id)"
> >
<view class="order-header"> <view class="order-header">
<text class="order-no">{{ order.orderNo }}</text> <text class="order-no">{{ order.orderNo }}</text>
<text class="order-status" :style="{ color: statusMap[order.status].color }"> <text class="order-status" :style="{ color: ORDER_STATUS_CONFIG[order.status].color }">
{{ statusMap[order.status].text }} {{ ORDER_STATUS_CONFIG[order.status].label }}
</text> </text>
</view> </view>
<view class="order-body">
<text class="customer">客户{{ order.customer }}</text> <view class="order-goods">
<text class="amount">¥{{ order.amount.toFixed(2) }}</text> <view v-for="goods in order.goods" :key="goods.id" class="goods-item">
<image :src="goods.image" class="goods-image" mode="aspectFill" />
<view class="goods-info">
<text class="goods-name">{{ goods.name }}</text>
<text class="goods-sku">{{ goods.skuName }}</text>
<view class="goods-price">
<text class="price">¥{{ goods.price.toFixed(2) }}</text>
<text class="quantity">x{{ goods.quantity }}</text>
</view>
</view>
</view>
</view> </view>
<view class="order-footer"> <view class="order-footer">
<text class="time">今天 {{ order.time }}</text> <view class="customer">
<text class="i-carbon-user"></text>
<text>{{ order.customerName }}</text>
</view>
<view class="amount">
{{ order.goods.length }} 实付 <text class="total">¥{{ order.payAmount.toFixed(2) }}</text>
</view>
</view>
<!-- 操作按钮 -->
<view class="order-actions" v-if="order.status === OrderStatus.PENDING || order.status === OrderStatus.SHIPPING">
<view
v-if="order.status === OrderStatus.PENDING"
class="action-btn primary"
@click.stop="handleConfirm(order.id)"
>
确认订单
</view>
<view
v-if="order.status === OrderStatus.SHIPPING"
class="action-btn primary"
@click.stop="handleDetail(order.id)"
>
去发货
</view>
</view> </view>
</view> </view>
</view> </scroll-view>
</view> </view>
</template> </template>
@@ -54,30 +173,81 @@ function handleOrder(id: string) {
.order-list-page { .order-list-page {
min-height: 100vh; min-height: 100vh;
background: #f5f5f5; background: #f5f5f5;
display: flex;
flex-direction: column;
}
.search-bar {
padding: 20rpx; padding: 20rpx;
background: #fff;
}
.tabs {
display: flex;
background: #fff;
padding: 0 10rpx;
border-bottom: 1rpx solid #f0f0f0;
.tab-item {
flex: 1;
text-align: center;
padding: 24rpx 0;
font-size: 26rpx;
color: #666;
position: relative;
&.active {
color: #ff8f0d;
font-weight: 600;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40rpx;
height: 4rpx;
background: #ff8f0d;
border-radius: 2rpx;
}
}
}
} }
.order-list { .order-list {
flex: 1;
}
.empty {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20rpx; align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #999;
text:first-child {
font-size: 80rpx;
margin-bottom: 20rpx;
}
} }
.order-card { .order-card {
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 24rpx;
margin: 20rpx;
.order-header { .order-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 16rpx; margin-bottom: 20rpx;
.order-no { .order-no {
font-size: 28rpx; font-size: 26rpx;
font-weight: 600;
color: #333; color: #333;
font-weight: 500;
} }
.order-status { .order-status {
@@ -86,29 +256,114 @@ function handleOrder(id: string) {
} }
} }
.order-body { .order-goods {
display: flex; border-top: 1rpx solid #f5f5f5;
justify-content: space-between; border-bottom: 1rpx solid #f5f5f5;
align-items: center; padding: 20rpx 0;
margin-bottom: 12rpx;
.customer { .goods-item {
font-size: 26rpx; display: flex;
color: #666; gap: 16rpx;
}
& + .goods-item {
.amount { margin-top: 16rpx;
font-size: 32rpx; }
font-weight: 700;
color: #ff8f0d; .goods-image {
width: 120rpx;
height: 120rpx;
border-radius: 8rpx;
background: #f5f5f5;
}
.goods-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.goods-name {
font-size: 26rpx;
color: #333;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.goods-sku {
font-size: 22rpx;
color: #999;
}
.goods-price {
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-size: 28rpx;
color: #ff8f0d;
font-weight: 600;
}
.quantity {
font-size: 24rpx;
color: #999;
}
}
}
} }
} }
.order-footer { .order-footer {
.time { display: flex;
justify-content: space-between;
align-items: center;
padding-top: 16rpx;
.customer {
display: flex;
align-items: center;
gap: 8rpx;
font-size: 24rpx; font-size: 24rpx;
color: #999; color: #666;
}
.amount {
font-size: 24rpx;
color: #666;
.total {
font-size: 30rpx;
color: #ff8f0d;
font-weight: 600;
}
}
}
.order-actions {
display: flex;
justify-content: flex-end;
gap: 16rpx;
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 1rpx solid #f5f5f5;
.action-btn {
padding: 12rpx 32rpx;
border-radius: 32rpx;
font-size: 24rpx;
border: 1rpx solid #ddd;
color: #666;
&.primary {
background: #ff8f0d;
border-color: #ff8f0d;
color: #fff;
}
} }
} }
} }
</style> </style>

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

33
src/store/bank.ts Normal file
View 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
}
})

164
src/store/merchant.ts Normal file
View File

@@ -0,0 +1,164 @@
/**
* 商户端状态管理
*/
import { defineStore } from 'pinia'
import type {
MerchantStats,
MerchantOrder,
MerchantGoods,
FinanceOverview,
ShopInfo,
} from '@/typings/merchant'
import { OrderStatus, GoodsStatus } from '@/typings/merchant'
import * as api from '@/pagesMerchant/api'
export const useMerchantStore = defineStore('merchant', {
state: () => ({
// 统计数据
stats: null as MerchantStats | null,
// 订单相关
orders: [] as MerchantOrder[],
orderTotal: 0,
currentOrder: null as MerchantOrder | null,
// 商品相关
goods: [] as MerchantGoods[],
goodsTotal: 0,
currentGoods: null as MerchantGoods | null,
// 财务相关
financeOverview: null as FinanceOverview | null,
// 店铺相关
shopInfo: null as ShopInfo | null,
// 加载状态
loading: false,
}),
getters: {
// 待处理订单数
pendingOrderCount(state): number {
return state.orders.filter(o =>
o.status === OrderStatus.PENDING || o.status === OrderStatus.SHIPPING
).length
},
// 上架商品数
onlineGoodsCount(state): number {
return state.goods.filter(g => g.status === GoodsStatus.ON).length
},
// 库存预警商品数
lowStockGoodsCount(state): number {
return state.goods.filter(g => g.stock <= 10).length
},
},
actions: {
// ==================== 统计 ====================
async fetchStats() {
this.loading = true
try {
this.stats = await api.getMerchantStats()
} finally {
this.loading = false
}
},
// ==================== 订单 ====================
async fetchOrders(params: { status?: OrderStatus | 'all'; keyword?: string } = {}) {
this.loading = true
try {
const res = await api.getMerchantOrders(params)
this.orders = res.list
this.orderTotal = res.total
} finally {
this.loading = false
}
},
async fetchOrderDetail(id: string) {
this.loading = true
try {
this.currentOrder = await api.getMerchantOrderDetail(id)
} finally {
this.loading = false
}
},
async confirmOrder(id: string) {
await api.confirmOrder(id)
// 更新本地状态
const order = this.orders.find(o => o.id === id)
if (order) order.status = OrderStatus.SHIPPING
if (this.currentOrder?.id === id) {
this.currentOrder.status = OrderStatus.SHIPPING
}
},
async shipOrder(id: string, data: { company: string; trackingNo: string }) {
await api.shipOrder(id, data)
const order = this.orders.find(o => o.id === id)
if (order) order.status = OrderStatus.SHIPPED
if (this.currentOrder?.id === id) {
this.currentOrder.status = OrderStatus.SHIPPED
}
},
// ==================== 商品 ====================
async fetchGoods(params: { status?: GoodsStatus | 'all' | 'lowStock'; keyword?: string } = {}) {
this.loading = true
try {
const res = await api.getMerchantGoodsList(params)
this.goods = res.list
this.goodsTotal = res.total
} finally {
this.loading = false
}
},
async fetchGoodsDetail(id: string) {
this.loading = true
try {
this.currentGoods = await api.getMerchantGoodsDetail(id)
} finally {
this.loading = false
}
},
async updateGoodsStatus(id: string, status: GoodsStatus) {
await api.updateGoodsStatus(id, status)
const goods = this.goods.find(g => g.id === id)
if (goods) goods.status = status
},
// ==================== 财务 ====================
async fetchFinanceOverview() {
this.loading = true
try {
this.financeOverview = await api.getFinanceOverview()
} finally {
this.loading = false
}
},
// ==================== 店铺 ====================
async fetchShopInfo() {
this.loading = true
try {
this.shopInfo = await api.getShopInfo()
} finally {
this.loading = false
}
},
async updateShopInfo(data: Partial<ShopInfo>) {
await api.updateShopInfo(data)
if (this.shopInfo) {
Object.assign(this.shopInfo, data)
}
},
},
})

View File

@@ -1,7 +1,7 @@
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import type { User } from '@/typings/mall' import type { User } from '@/typings/mall'
import { mockMember } from '@/mock/member' import { mockMember } from '@/mock/member'
// i-carbon-3rd-party-connected
/** /**
* 客户端类型枚举 * 客户端类型枚举
* - user: 用户端(消费者) * - user: 用户端(消费者)
@@ -32,7 +32,7 @@ export const CLIENT_TYPE_CONFIG = {
}, },
[ClientType.BANK]: { [ClientType.BANK]: {
label: '银行端', label: '银行端',
icon: 'i-carbon-bank', icon: 'i-carbon-home',
color: '#00c05a', color: '#00c05a',
description: '账款审核、金融服务', description: '账款审核、金融服务',
homePage: '/pagesBank/dashboard/index', homePage: '/pagesBank/dashboard/index',

View File

@@ -38,9 +38,8 @@ export const userTabbarList: CustomTabBarItem[] = [
{ {
text: '首页', text: '首页',
pagePath: 'pages/index/index', pagePath: 'pages/index/index',
iconType: 'image', iconType: 'unocss',
icon: '/static/logo2.png', icon: 'i-carbon-home',
iconActive: '/static/logo1.png',
}, },
{ {
pagePath: 'pages/sort/index', pagePath: 'pages/sort/index',

View File

@@ -32,10 +32,17 @@ function handleClick(index: number) {
} }
const url = tabbarList[index].pagePath const url = tabbarList[index].pagePath
tabbarStore.setCurIdx(index) tabbarStore.setCurIdx(index)
if (tabbarCacheEnable) {
// 判断是否为分包页面(分包页面路径以 /pages 开头的是主包,否则是分包)
const isSubPackagePage = !url.startsWith('/pages/')
if (isSubPackagePage) {
// 分包页面使用 reLaunch 跳转
uni.reLaunch({ url })
} else if (tabbarCacheEnable) {
// 主包 tabbar 页面使用 switchTab
uni.switchTab({ url }) uni.switchTab({ url })
} } else {
else {
uni.navigateTo({ url }) uni.navigateTo({ url })
} }
} }

140
src/typings/bank.ts Normal file
View 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
View 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
}

View File

@@ -251,4 +251,7 @@ export interface LoanApplicationRecord {
progress?: LoanApplicationProgress // 进度条数据 (仅Processing和Pending状态需要) progress?: LoanApplicationProgress // 进度条数据 (仅Processing和Pending状态需要)
alertInfo?: LoanApplicationAlertInfo // 提示信息框 (可空) alertInfo?: LoanApplicationAlertInfo // 提示信息框 (可空)
actions: LoanApplicationAction[] // 底部按钮配置 actions: LoanApplicationAction[] // 底部按钮配置
// 银行受理人信息
handlerName?: string // 受理人姓名
handlerPhone?: string // 受理人手机号
} }

249
src/typings/merchant.ts Normal file
View File

@@ -0,0 +1,249 @@
/**
* 商户端类型定义
*/
// ==================== 订单相关 ====================
/** 订单状态枚举 */
export enum OrderStatus {
PENDING = 'pending', // 待确认
CONFIRMED = 'confirmed', // 已确认
SHIPPING = 'shipping', // 待发货
SHIPPED = 'shipped', // 已发货
COMPLETED = 'completed', // 已完成
CANCELLED = 'cancelled', // 已取消
}
/** 订单状态配置 */
export const ORDER_STATUS_CONFIG = {
[OrderStatus.PENDING]: { label: '待确认', color: '#ff8f0d' },
[OrderStatus.CONFIRMED]: { label: '已确认', color: '#4d80f0' },
[OrderStatus.SHIPPING]: { label: '待发货', color: '#ff8f0d' },
[OrderStatus.SHIPPED]: { label: '已发货', color: '#4d80f0' },
[OrderStatus.COMPLETED]: { label: '已完成', color: '#00c05a' },
[OrderStatus.CANCELLED]: { label: '已取消', color: '#999' },
}
/** 订单商品 */
export interface OrderGoods {
id: string
goodsId: string
name: string
image: string
skuName: string // 规格名称
price: number
quantity: number
amount: number
}
/** 物流信息 */
export interface LogisticsInfo {
company: string // 物流公司
trackingNo: string // 运单号
status: string // 物流状态
traces: LogisticsTrace[]
}
/** 物流轨迹 */
export interface LogisticsTrace {
time: string
content: string
}
/** 收货地址 */
export interface OrderAddress {
name: string
phone: string
province: string
city: string
district: string
detail: string
}
/** 商户订单 */
export interface MerchantOrder {
id: string
orderNo: string
customerName: string
customerPhone: string
customerAvatar?: string
status: OrderStatus
amount: number // 订单总金额
freight: number // 运费
payAmount: number // 实付金额
remark?: string // 订单备注
merchantRemark?: string // 商家备注
goods: OrderGoods[]
address: OrderAddress
logistics?: LogisticsInfo
createTime: string
payTime?: string
shipTime?: string
completeTime?: string
}
// ==================== 商品相关 ====================
/** 商品状态枚举 */
export enum GoodsStatus {
ON = 'on', // 上架
OFF = 'off', // 下架
SOLD_OUT = 'sold_out', // 售罄
}
/** 商品状态配置 */
export const GOODS_STATUS_CONFIG = {
[GoodsStatus.ON]: { label: '上架', color: '#00c05a' },
[GoodsStatus.OFF]: { label: '下架', color: '#999' },
[GoodsStatus.SOLD_OUT]: { label: '售罄', color: '#fa4350' },
}
/** SKU 规格选项 */
export interface SkuSpec {
name: string // 规格名称,如 "颜色"
values: string[] // 规格值列表,如 ["红色", "蓝色"]
}
/** SKU 项 */
export interface SkuItem {
id: string
specs: Record<string, string> // 规格组合,如 { 颜色: "红色", 尺码: "M" }
price: number
stock: number
image?: string
}
/** 商户商品 */
export interface MerchantGoods {
id: string
name: string
categoryId: string
categoryName: string
brand?: string
price: number // 售价(单规格时使用)
costPrice: number // 成本价
stock: number // 库存(单规格时使用)
sales: number // 销量
status: GoodsStatus
images: string[] // 商品图片
description: string // 商品描述
specs?: SkuSpec[] // 规格定义
skuList?: SkuItem[] // SKU 列表
createTime: string
updateTime: string
}
/** 商品表单数据 */
export interface GoodsFormData {
id?: string
name: string
categoryId: string
brand?: string
price: number
costPrice: number
stock: number
images: string[]
description: string
enableSpec: boolean // 是否启用多规格
specs?: SkuSpec[]
skuList?: SkuItem[]
}
// ==================== 财务相关 ====================
/** 财务概览 */
export interface FinanceOverview {
balance: number // 可用余额
pendingSettlement: number // 待结算
monthIncome: number // 本月收入
totalIncome: number // 累计收入
}
/** 交易类型 */
export enum TransactionType {
INCOME = 'income', // 收入
WITHDRAW = 'withdraw', // 提现
REFUND = 'refund', // 退款
}
/** 交易记录 */
export interface Transaction {
id: string
type: TransactionType
amount: number
balance: number // 交易后余额
orderNo?: string // 关联订单号
remark: string
createTime: string
}
/** 结算状态 */
export enum SettlementStatus {
PENDING = 'pending', // 待结算
SETTLED = 'settled', // 已结算
}
/** 结算记录 */
export interface Settlement {
id: string
settlementNo: string
amount: number
orderCount: number // 订单数量
status: SettlementStatus
period: string // 结算周期,如 "2024-12-01 ~ 2024-12-15"
settledTime?: string // 结算时间
createTime: string
}
/** 提现状态 */
export enum WithdrawStatus {
PENDING = 'pending', // 审核中
APPROVED = 'approved', // 审核通过
REJECTED = 'rejected', // 审核拒绝
COMPLETED = 'completed', // 已到账
}
/** 提现状态配置 */
export const WITHDRAW_STATUS_CONFIG = {
[WithdrawStatus.PENDING]: { label: '审核中', color: '#ff8f0d' },
[WithdrawStatus.APPROVED]: { label: '审核通过', color: '#4d80f0' },
[WithdrawStatus.REJECTED]: { label: '审核拒绝', color: '#fa4350' },
[WithdrawStatus.COMPLETED]: { label: '已到账', color: '#00c05a' },
}
/** 提现记录 */
export interface WithdrawRecord {
id: string
amount: number
bankName: string
bankAccount: string
status: WithdrawStatus
rejectReason?: string // 拒绝原因
applyTime: string
completeTime?: string
}
// ==================== 店铺相关 ====================
/** 店铺信息 */
export interface ShopInfo {
id: string
name: string
logo: string
phone: string
address: string
businessHours: string // 营业时间
description?: string
}
// ==================== 统计相关 ====================
/** 商户统计数据 */
export interface MerchantStats {
todayOrders: number // 今日订单
pendingOrders: number // 待处理订单
todaySales: number // 今日销售额
totalGoods: number // 商品总数
lowStockGoods: number // 库存预警商品数
pendingSettlement: number // 待结算金额
}