# tsq_app_custom

**Repository Path**: zybdip2023/tsq_app_custom

## Basic Information

- **Project Name**: tsq_app_custom
- **Description**: 押金管理，# 设备租赁小程序 - 项目功能描述

## 一、项目概述

这是一个基于 **uni-app** 框架开发的**微信小程序**，主要用于**设备租赁管理**。系统采用**角色权限管理（RBAC）**，支持三种用户角色：**游客（租户）**、**代理商（设备提供方）**、**超级管理员（系统管理员）**。

### 技术栈
- **框架**：uni-app (Vue 3 + TypeSc
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-08
- **Last Updated**: 2026-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 设备租赁小程序

这是一个基于 uniapp 开发的微信小程序，用于设备租赁和归还管理。

## 项目结构

```
tsq_app_custom/
├── package.json            # 依赖配置
├── vite.config.ts          # Vite 配置
├── src/                    # 源代码目录
│   ├── pages.json          # 页面配置
│   ├── manifest.json        # 应用配置
│   ├── App.vue             # 应用入口
│   ├── main.js             # 入口文件
│   ├── custom-tab-bar/     # 自定义 TabBar
│   │   └── index.vue
│   ├── pages/
│   │   ├── device/         # 设备相关页面
│   │   │   ├── index.vue    # 设备首页（租赁/归还按钮）
│   │   │   ├── payment.vue # 支付页面
│   │   │   └── payment-success.vue  # 支付成功页面
│   │   ├── order/          # 订单相关页面
│   │   │   ├── index.vue   # 订单列表页
│   │   │   ├── detail.vue  # 订单详情页
│   │   │   └── return-success.vue  # 归还成功页面
│   │   └── user/           # 用户相关页面
│   │       └── index.vue   # 我的页面
│   └── static/             # 静态资源
│       └── tabBar/         # TabBar 图标
│           ├── device.png
│           ├── activeDevice.png
│           ├── my.png
│           └── activeMy.png
└── dist/                   # 构建输出目录
    └── build/mp-weixin/    # 微信小程序构建产物
```

## 功能说明

### 1. TabBar
- **设备**：设备租赁和归还入口
- **我的**：用户信息和订单管理

### 2. 设备页面
- **租赁按钮**：进入支付页面
- **归还按钮**：进入订单列表页

### 3. 支付流程
1. 点击"租赁"按钮进入支付页面
2. 选择数量、填写备注
3. 点击"支付"按钮
4. 支付成功后跳转到支付成功页面
5. 可以返回首页

### 4. 归还流程
1. 点击"归还"按钮进入订单列表页
2. 订单列表包含：全部订单、已归还、待归还
3. 点击待归还的订单卡片进入订单详情页
4. 点击"归还"按钮
5. 跳转到归还成功页面
6. 可以返回首页

## 安装和运行

### 方法一：使用安装脚本（推荐）

**Windows PowerShell:**
```powershell
.\快速安装.ps1
```

**Windows CMD:**
```cmd
快速安装.bat
```

脚本会自动从参考项目复制 `node_modules`，或尝试使用 npm 安装。

### 方法二：手动安装

1. **从参考项目复制依赖（最简单）**：
   ```bash
   # 复制 node_modules
   xcopy /E /I /Y "D:\my\gitee\tsq_app\tsq_app_vx\node_modules" "node_modules"
   
   # 复制 package-lock.json
   copy "D:\my\gitee\tsq_app\tsq_app_vx\package-lock.json" "package-lock.json"
   
   # 然后运行
   npm install
   ```

2. **使用 HBuilderX（推荐）**：
   - 下载并安装 [HBuilderX](https://www.dcloud.io/hbuilderx.html)
   - 在 HBuilderX 中打开项目
   - HBuilderX 会自动处理依赖安装

3. **使用 npm 安装**（可能需要特定源）：
   ```bash
   # 使用淘宝镜像
   npm config set registry https://registry.npmmirror.com
   npm install
   ```

### 运行项目

1. **使用 HBuilderX**：
   - 在 HBuilderX 中点击"运行" -> "运行到小程序模拟器" -> "微信开发者工具"

2. **使用命令行**：
   ```bash
   # 开发模式
   npm run dev:mp-weixin
   # 构建输出在 dist/dev/mp-weixin
   
   # 生产构建
   npm run build:mp-weixin
   # 构建输出在 dist/build/mp-weixin
   ```
   然后在微信开发者工具中打开对应的输出目录

3. **在微信开发者工具中打开项目**

## 注意事项

1. **TabBar 图标**：需要在 `src/static/tabBar/` 目录下添加以下图标文件：
   - `device.png` - 设备图标（未选中）
   - `activeDevice.png` - 设备图标（选中）
   - `my.png` - 我的图标（未选中）
   - `activeMy.png` - 我的图标（选中）

2. **微信支付**：当前支付功能为模拟实现，实际使用时需要：
   - 配置微信支付参数
   - 调用 `uni.requestPayment` API
   - 接入后端支付接口

3. **页头样式**：参考了 `D:\my\gitee\tsq_app\tsq_app_vx` 项目的页头样式

4. **TabBar 样式**：参考了参考项目的 TabBar 样式

## 页面说明

### 设备页面 (`pages/device/index.vue`)
- 显示"租赁"和"归还"两个按钮
- 使用自定义 TabBar

### 支付页面 (`pages/device/payment.vue`)
- 显示设备信息、价格、数量选择
- 显示租赁详情（领取地点、联系人等）
- 支持备注输入
- 显示合计金额
- 支付按钮

### 支付成功页面 (`pages/device/payment-success.vue`)
- 显示支付成功提示
- 显示支付金额和数量
- 返回首页按钮

### 订单列表页 (`pages/order/index.vue`)
- 三个标签：全部订单、已归还、待归还
- 订单卡片列表
- 点击卡片进入订单详情

### 订单详情页 (`pages/order/detail.vue`)
- 显示订单详细信息
- 待归还订单显示"归还"按钮
- 点击归还按钮跳转到归还成功页面

### 归还成功页面 (`pages/order/return-success.vue`)
- 显示归还成功提示
- 显示订单号和退还押金
- 返回首页按钮

### 我的页面 (`pages/user/index.vue`)
- 用户信息展示
- 菜单列表（我的订单、关于我们）
- 使用自定义 TabBar

## 开发说明

- 使用 Vue 3 Composition API
- 使用 TypeScript
- 使用 SCSS 样式
- 支持微信小程序平台