Compare commits
32 Commits
0ca93ec97e
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
14d7c03b05 | ||
|
|
bd3d519b4f | ||
|
|
9575210b06 | ||
|
|
b02f38dcc7 | ||
|
|
4dacd908a6 | ||
|
|
6ab16f508a | ||
|
|
7ce7cef77c | ||
|
|
52cc3a2985 | ||
|
|
497837c1d8 | ||
|
|
d45a5b2c14 | ||
|
|
f78cdcc9d1 | ||
|
|
1f45c3dc3f | ||
|
|
6cee28bf66 | ||
|
|
c60821c5ff | ||
|
|
9639f44698 | ||
|
|
0810f71250 | ||
|
|
54e30da003 | ||
|
|
57e3227af0 | ||
|
|
54104c16d2 | ||
|
|
a40b4e47e5 | ||
|
|
74551085e3 | ||
|
|
23bdd05811 | ||
|
|
91abedcb86 | ||
|
|
0a20aef678 | ||
|
|
e6056bcab1 | ||
|
|
f14da2c538 | ||
|
|
b281990808 | ||
|
|
cea78aa8d0 | ||
|
|
0776bd8630 | ||
|
|
867461f892 | ||
|
|
13b75c3bed | ||
|
|
f7f18f5178 |
252
.claude/skills/wechat-devtools-http-preview/SKILL.md
Normal file
252
.claude/skills/wechat-devtools-http-preview/SKILL.md
Normal file
@@ -0,0 +1,252 @@
|
||||
---
|
||||
name: wechat-devtools-http-preview
|
||||
description: '通过微信开发者工具 HTTP V2 接口完成小程序登录检查、自动预览、上传体验版等操作。适用于用户提到微信开发者工具 HTTP、自动预览、体验版上传、命令行发布体验版、流水线触发开发者工具发布时。'
|
||||
license: MIT
|
||||
allowed-tools: Bash
|
||||
---
|
||||
|
||||
# 微信开发者工具 HTTP V2 体验版发布
|
||||
|
||||
## 适用场景
|
||||
|
||||
当用户出现以下意图时使用本 skill:
|
||||
|
||||
- 希望通过命令行或脚本调用微信开发者工具。
|
||||
- 希望上传小程序体验版。
|
||||
- 希望生成或刷新预览二维码。
|
||||
- 希望把开发者工具 HTTP 能力接入本地自动化流程。
|
||||
- 提到 `HTTP V2`、`/v2/upload`、`/v2/preview`、`/v2/autopreview`、`微信开发者工具端口` 等关键词。
|
||||
|
||||
## 核心结论
|
||||
|
||||
微信开发者工具在启动后会自动开启本地 HTTP 服务。对于“通过命令行发布体验版”这个目标,最直接的路径是:
|
||||
|
||||
1. 确认开发者工具已启动并拿到本地端口。
|
||||
2. 确认工具已登录。
|
||||
3. 如有需要先执行 `/v2/open` 打开项目。
|
||||
4. 如项目依赖 npm,必要时先执行 `/v2/buildnpm`。
|
||||
5. 调用 `/v2/upload` 上传体验版代码。
|
||||
6. 如需同时给测试同学扫码,调用 `/v2/preview` 或 `/v2/autopreview`。
|
||||
|
||||
文档同时明确说明:如果场景是完全不依赖开发者工具的 CI/CD,官方更推荐 `miniprogram-ci`。因此本 skill 的定位是“基于本机已安装且已运行的微信开发者工具做自动化”,不是替代纯 CI 方案。
|
||||
|
||||
## 文档沉淀
|
||||
|
||||
根据微信开发者工具 HTTP 文档,需要记住这些约束:
|
||||
|
||||
- 接口路径统一使用 `/v2` 前缀。
|
||||
- HTTP 服务会在开发者工具启动后自动开启。
|
||||
- 端口号记录在用户目录下的 `.ide` 文件。
|
||||
- `project` 参数一般都要求传项目绝对路径,且必须 URL encode。
|
||||
- 项目目录必须存在合法的 `project.config.json`,并至少包含 `appid` 与 `projectname`。
|
||||
- `upload` 用于上传代码,也就是生成体验版。
|
||||
- `preview` 返回预览二维码。
|
||||
- `autopreview` 会自动刷新并预览项目,适合频繁本地联调。
|
||||
- `islogin` 可用于判断当前开发者工具是否已登录。
|
||||
- `login` 可输出二维码,支持 `image`、`base64`、`terminal` 三种格式。
|
||||
- `info-output` 可把预览或上传附加信息输出到 JSON 文件,适合自动化流程记录产物。
|
||||
|
||||
## 端口定位
|
||||
|
||||
开发者工具端口号文件:
|
||||
|
||||
- macOS: `~/Library/Application Support/微信开发者工具/<MD5>/Default/.ide`
|
||||
- Windows: `~/AppData/Local/微信开发者工具/User Data/<MD5>/Default/.ide`
|
||||
|
||||
文档给出的 MD5 规则:`MD5(${installPath}${nwVersion})`
|
||||
|
||||
已知默认值:
|
||||
|
||||
- macOS: `installPath = /Applications/wechatwebdevtools.app/Contents/MacOS`
|
||||
- macOS: `nwVersion = ''`
|
||||
- Windows: `installPath = 微信开发者工具.exe 所在目录`
|
||||
- Windows: `nwVersion = installPath/version` 文件中 `latestNw` 的值
|
||||
|
||||
## 标准工作流
|
||||
|
||||
### 1. 检查工具是否启动
|
||||
|
||||
先读取 `.ide` 文件中的端口号;如果没有端口文件,说明工具大概率未启动,先提示用户启动微信开发者工具。
|
||||
|
||||
### 2. 检查是否已登录
|
||||
|
||||
调用:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/islogin"
|
||||
```
|
||||
|
||||
如果未登录,调用 `/v2/login`,按需要输出二维码:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/login?qr-format=terminal"
|
||||
curl "http://127.0.0.1:${PORT}/v2/login?qr-format=base64&qr-output=%2Ftmp%2Fwechat-login.txt"
|
||||
curl "http://127.0.0.1:${PORT}/v2/login?result-output=%2Ftmp%2Fwechat-login-result.json"
|
||||
```
|
||||
|
||||
### 3. 打开或刷新项目
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/open?project=${ENCODED_PROJECT}"
|
||||
```
|
||||
|
||||
当用户只要求上传或预览时,这一步不是必选,但执行后通常更稳定。
|
||||
|
||||
### 4. 构建 npm
|
||||
|
||||
当项目启用了小程序 npm 并且近期依赖有变更时执行:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/buildnpm?project=${ENCODED_PROJECT}&compile-type=miniprogram"
|
||||
```
|
||||
|
||||
### 5. 上传体验版
|
||||
|
||||
体验版发布的核心接口就是:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${DESC}"
|
||||
```
|
||||
|
||||
推荐同时加 `info-output`:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${DESC}&info-output=${ENCODED_INFO_OUTPUT}"
|
||||
```
|
||||
|
||||
参数要求:
|
||||
|
||||
- `project`:必填,项目绝对路径。
|
||||
- `version`:必填,版本号。
|
||||
- `desc`:可选,版本备注。
|
||||
- `info-output`:可选,输出上传附加信息 JSON。
|
||||
|
||||
### 6. 生成预览二维码
|
||||
|
||||
如果用户还需要扫码体验,可继续调用:
|
||||
|
||||
```bash
|
||||
curl "http://127.0.0.1:${PORT}/v2/preview?project=${ENCODED_PROJECT}&qr-format=terminal"
|
||||
curl "http://127.0.0.1:${PORT}/v2/preview?project=${ENCODED_PROJECT}&qr-format=base64&qr-output=${ENCODED_QR_PATH}"
|
||||
curl "http://127.0.0.1:${PORT}/v2/autopreview?project=${ENCODED_PROJECT}&info-output=${ENCODED_INFO_OUTPUT}"
|
||||
```
|
||||
|
||||
区别:
|
||||
|
||||
- `/v2/preview`:单次预览,拿二维码最直接。
|
||||
- `/v2/autopreview`:更适合联调时自动刷新预览。
|
||||
|
||||
## 推荐命令模板
|
||||
|
||||
### macOS 读取端口
|
||||
|
||||
如果已知是默认安装路径,可用下面的方式快速算出 `.ide` 路径:
|
||||
|
||||
```bash
|
||||
MD5=$(printf '/Applications/wechatwebdevtools.app/Contents/MacOS' | md5)
|
||||
PORT_FILE="$HOME/Library/Application Support/微信开发者工具/${MD5}/Default/.ide"
|
||||
PORT=$(cat "$PORT_FILE")
|
||||
```
|
||||
|
||||
### URL encode 项目路径
|
||||
|
||||
```bash
|
||||
PROJECT="/absolute/path/to/miniprogram"
|
||||
ENCODED_PROJECT=$(python3 - <<'PY'
|
||||
import os, urllib.parse
|
||||
print(urllib.parse.quote(os.environ['PROJECT'], safe=''))
|
||||
PY
|
||||
)
|
||||
```
|
||||
|
||||
### 上传体验版完整示例
|
||||
|
||||
```bash
|
||||
PROJECT="/absolute/path/to/miniprogram"
|
||||
VERSION="1.2.3"
|
||||
DESC="体验版发布:修复预约课表"
|
||||
INFO_OUTPUT="/tmp/wechat-upload-info.json"
|
||||
|
||||
ENCODED_PROJECT=$(python3 - <<'PY'
|
||||
import os, urllib.parse
|
||||
print(urllib.parse.quote(os.environ['PROJECT'], safe=''))
|
||||
PY
|
||||
)
|
||||
|
||||
ENCODED_DESC=$(python3 - <<'PY'
|
||||
import os, urllib.parse
|
||||
print(urllib.parse.quote(os.environ['DESC'], safe=''))
|
||||
PY
|
||||
)
|
||||
|
||||
ENCODED_INFO_OUTPUT=$(python3 - <<'PY'
|
||||
import os, urllib.parse
|
||||
print(urllib.parse.quote(os.environ['INFO_OUTPUT'], safe=''))
|
||||
PY
|
||||
)
|
||||
|
||||
curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${ENCODED_DESC}&info-output=${ENCODED_INFO_OUTPUT}"
|
||||
```
|
||||
|
||||
## 执行规则
|
||||
|
||||
当你代表用户执行这个流程时,按下面顺序做:
|
||||
|
||||
1. 先确认当前系统是否安装并启动了微信开发者工具。
|
||||
2. 优先读取 `.ide` 端口文件,而不是盲猜端口。
|
||||
3. 上传前先验证 `project.config.json` 是否存在且含 `appid`、`projectname`。
|
||||
4. 涉及路径、备注、输出文件参数时,一律 URL encode。
|
||||
5. 如果 `islogin` 未登录,先引导用户扫码登录,不要直接继续上传。
|
||||
6. 如果用户目标是“发布体验版”,优先使用 `/v2/upload`;不要误用 `/preview` 代替。
|
||||
7. 如果用户目标是“出二维码给别人扫”,优先使用 `/v2/preview`。
|
||||
8. 如果用户目标是“边改边自动刷新”,优先使用 `/v2/autopreview`。
|
||||
|
||||
## 故障排查
|
||||
|
||||
### 端口文件不存在
|
||||
|
||||
说明通常是开发者工具没启动,或者安装路径/MD5 推导错了。
|
||||
|
||||
排查顺序:
|
||||
|
||||
1. 让用户先手动打开微信开发者工具。
|
||||
2. 检查是否使用了正确安装路径。
|
||||
3. 重新计算 MD5。
|
||||
|
||||
### 调用 HTTP 接口失败
|
||||
|
||||
优先检查:
|
||||
|
||||
1. 是否能访问 `http://127.0.0.1:${PORT}/v2/islogin`
|
||||
2. `PORT` 是否来自正确的 `.ide` 文件。
|
||||
3. 开发者工具版本是否支持 `HTTP V2`。
|
||||
|
||||
### 上传失败
|
||||
|
||||
优先检查:
|
||||
|
||||
1. `project` 是否为绝对路径。
|
||||
2. 是否已 URL encode。
|
||||
3. `project.config.json` 是否存在。
|
||||
4. `project.config.json` 里是否包含 `appid` 和 `projectname`。
|
||||
5. 是否已登录工具。
|
||||
6. npm 依赖是否需要先执行 `/v2/buildnpm`。
|
||||
|
||||
## 输出要求
|
||||
|
||||
当用户让你“帮我发布体验版”时,最终回复必须明确交代:
|
||||
|
||||
- 是否成功调用了 `/v2/upload`
|
||||
- 使用的版本号与备注
|
||||
- 是否生成了 `info-output` 文件
|
||||
- 如果还做了预览,二维码输出到哪里或以什么格式返回
|
||||
|
||||
如果没有成功执行,必须明确停在哪一步,不要模糊地说“可能发布了”。
|
||||
|
||||
## 引用来源
|
||||
|
||||
本 skill 基于微信开放文档:
|
||||
|
||||
- 页面:微信开发者工具 HTTP V2
|
||||
- 关键接口:`/v2/login`、`/v2/islogin`、`/v2/open`、`/v2/buildnpm`、`/v2/upload`、`/v2/preview`、`/v2/autopreview`
|
||||
|
||||
37
AGENTS.md
Normal file
37
AGENTS.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# Repository Guidelines
|
||||
|
||||
## Project Structure & Module Organization
|
||||
This repository is a `pnpm` workspace with three packages under `packages/`:
|
||||
|
||||
- `packages/app`: Vue 3 + `uni-app` WeChat mini-program. Pages live in `src/pages`, shared UI in `src/components`, state in `src/stores`, and utilities in `src/utils`.
|
||||
- `packages/server`: NestJS API with Prisma. Feature modules live in `src/<domain>`, unit tests are colocated in `__tests__`, and the database schema and seed script are in `prisma/`.
|
||||
- `packages/shared`: shared TypeScript enums, constants, and types used by both app and server.
|
||||
|
||||
Reference docs and implementation notes are under `docs/`.
|
||||
|
||||
## Build, Test, and Development Commands
|
||||
- `pnpm dev:server`: start the NestJS API with watch mode.
|
||||
- `pnpm dev:app`: build and serve the `uni-app` target for WeChat mini-program development.
|
||||
- `pnpm build:shared`: compile shared types before consuming package changes.
|
||||
- `pnpm build:server`: build the backend into `packages/server/dist`.
|
||||
- `pnpm build:app`: produce the WeChat mini-program build.
|
||||
- `pnpm test`: run workspace tests; today this mainly executes server Jest tests.
|
||||
- `pnpm lint`: run workspace linting; currently defined for the server.
|
||||
|
||||
For Prisma tasks, work in `packages/server`: `pnpm prisma:generate`, `pnpm prisma:migrate`, `pnpm prisma:seed`.
|
||||
|
||||
## Coding Style & Naming Conventions
|
||||
Use TypeScript throughout. Follow the existing style: 2-space indentation in JSON/Markdown, `camelCase` for variables/functions, `PascalCase` for Vue components and NestJS classes, and `kebab-case` for page/component filenames such as `flash-sales.vue`. Keep modules feature-oriented and prefer colocating DTOs and tests with their domain module.
|
||||
|
||||
Linting is configured in the server via ESLint. The app relies on `vue-tsc` for type checks: run `pnpm --filter @mp-pilates/app type-check` before shipping UI changes.
|
||||
|
||||
## Testing Guidelines
|
||||
Server tests use Jest with `*.spec.ts` naming. Place tests in `packages/server/src/**/__tests__/` and focus on service-level behavior and edge cases around booking, membership, payment, and scheduling logic. Run `pnpm test` for the full suite or `pnpm --filter @mp-pilates/server test:cov` when touching business-critical paths.
|
||||
|
||||
## Commit & Pull Request Guidelines
|
||||
Recent history uses Conventional Commit prefixes such as `feat:`, `fix:`, `fix(app):`, and `perf:`. Keep subjects short and specific, preferably describing the user-visible effect.
|
||||
|
||||
Pull requests should include a concise summary, linked issue or task reference, test notes, and screenshots or recordings for mini-program UI changes. Call out Prisma schema changes, new environment variables, or deployment steps explicitly.
|
||||
|
||||
## Security & Configuration Tips
|
||||
Do not commit real secrets. Review `packages/server/certs/` and environment-specific payment or WeChat credentials carefully before pushing. When changing shared types or enums, update both consumers and rebuild `@mp-pilates/shared` to avoid runtime drift.
|
||||
338
docs/STUDIO_COS_SETUP.md
Normal file
338
docs/STUDIO_COS_SETUP.md
Normal file
@@ -0,0 +1,338 @@
|
||||
# 工作室画廊 COS 接入配置说明
|
||||
|
||||
本文档对应当前仓库当前实现。
|
||||
|
||||
现在已经不再使用 STS `AssumeRole`。
|
||||
当前方案改为:
|
||||
|
||||
- 服务端使用长期密钥直接签发 COS POST Policy
|
||||
- 管理中心小程序拿到表单签名后直传 COS
|
||||
- 工作室配置中的 `logo`、`bannerUrl`、`photos` 保存最终可访问 URL
|
||||
|
||||
当前实现代码入口:
|
||||
|
||||
- `packages/server/src/studio/studio-upload.service.ts`
|
||||
- `packages/server/src/studio/studio.controller.ts`
|
||||
- `packages/app/src/utils/studio-upload.ts`
|
||||
- `packages/app/src/pages/admin/studio.vue`
|
||||
|
||||
## 一、整体链路
|
||||
|
||||
1. 管理中心点击上传图片。
|
||||
2. 小程序请求服务端 `POST /api/admin/studio/upload-credentials`。
|
||||
3. 服务端用 `COS_SECRET_ID`、`COS_SECRET_KEY` 直接生成一组 POST Policy 表单字段。
|
||||
4. 服务端把 `uploadUrl`、`key`、`formData`、`fileUrl`、`expiresAt` 返回给小程序。
|
||||
5. 小程序使用 `uni.uploadFile` 直接上传到 COS。
|
||||
6. 上传成功后,把 URL 保存到工作室配置,再调用 `PUT /api/admin/studio/info` 落库。
|
||||
|
||||
这个方案没有临时密钥,也没有角色扮演。
|
||||
安全边界来自两层:
|
||||
|
||||
- 服务端只为单个对象 key 签发一次表单策略
|
||||
- 表单策略有明确过期时间,过期后自动失效
|
||||
|
||||
## 二、这个方案的本质
|
||||
|
||||
你现在选的是“服务端代签名”的直传方案。
|
||||
它和 STS 的差别是:
|
||||
|
||||
- STS:给前端一段时间内可用的短期密钥
|
||||
- 当前方案:不给前端密钥,只给前端一个短时有效的上传表单签名
|
||||
|
||||
所以结论很直接:
|
||||
|
||||
- 仍然有有效期
|
||||
- 但有效期作用在 POST Policy 上,不是作用在临时密钥上
|
||||
|
||||
当前代码里默认有效期是 `1800` 秒。
|
||||
环境变量:
|
||||
|
||||
- `COS_UPLOAD_DURATION_SECONDS`
|
||||
|
||||
当前实现限制范围:
|
||||
|
||||
- 最短 `300` 秒
|
||||
- 最长 `7200` 秒
|
||||
|
||||
## 三、你现在真正需要准备的东西
|
||||
|
||||
先确认下面几个信息:
|
||||
|
||||
- COS Bucket 名称,例如 `plates-1251306435`
|
||||
- COS 所在地域,例如 `ap-guangzhou`
|
||||
- 服务端使用的 COS 长期密钥 `SecretId` / `SecretKey`
|
||||
- 图片上传前缀,例如 `mp/studio`
|
||||
- 图片访问域名
|
||||
|
||||
建议约定:
|
||||
|
||||
- Bucket:`plates-1251306435`
|
||||
- Region:`ap-guangzhou`
|
||||
- Prefix:`mp/studio`
|
||||
|
||||
## 四、COS 控制台配置
|
||||
|
||||
### 1. 创建或确认 Bucket
|
||||
|
||||
控制台路径:`对象存储 COS`
|
||||
|
||||
建议:
|
||||
|
||||
- 地域选 `广州` 或你当前实际地域
|
||||
- 存储类型标准存储即可
|
||||
- Bucket 名称和环境变量保持完全一致
|
||||
|
||||
### 2. 图片访问方式
|
||||
|
||||
当前实现保存的是直接图片 URL。
|
||||
所以图片必须能被小程序和前台直接访问。
|
||||
|
||||
你有两种方式:
|
||||
|
||||
1. 直接使用 COS 源站并允许读
|
||||
2. 配 CDN / 自定义域名并让这个域名可直接访问图片
|
||||
|
||||
如果你什么都不配,上传成功后图片可能打不开。
|
||||
|
||||
最直接做法:
|
||||
|
||||
- 让这个图片 Bucket 对外可读
|
||||
|
||||
更稳妥做法:
|
||||
|
||||
- 单独图片 Bucket
|
||||
- 用 CDN 域名做 `COS_PUBLIC_BASE_URL`
|
||||
|
||||
### 3. 微信小程序合法域名
|
||||
|
||||
微信公众平台需要补白名单:
|
||||
|
||||
- `request 合法域名`:你的后端 API 域名
|
||||
- `uploadFile 合法域名`:`https://<bucket>.cos.<region>.myqcloud.com`
|
||||
- `downloadFile 合法域名`:图片访问域名
|
||||
|
||||
如果图片访问也走 COS 源站,那么 `downloadFile 合法域名` 同样加:
|
||||
|
||||
- `https://<bucket>.cos.<region>.myqcloud.com`
|
||||
|
||||
例如:
|
||||
|
||||
- `https://focus.richarjiang.com`
|
||||
- `https://plates-1251306435.cos.ap-guangzhou.myqcloud.com`
|
||||
|
||||
## 五、服务端账号需要什么权限
|
||||
|
||||
现在已经不需要:
|
||||
|
||||
- STS
|
||||
- CAM 角色
|
||||
- `AssumeRole`
|
||||
- 角色信任策略
|
||||
- `COS_UPLOAD_ROLE_ARN`
|
||||
|
||||
现在服务端只需要一对可以给目标 Bucket 生成上传签名的长期密钥。
|
||||
|
||||
最简单的做法是:
|
||||
|
||||
- 用你的主账号密钥
|
||||
|
||||
但生产上更合理的是:
|
||||
|
||||
- 建一个专用 CAM 用户,只给这个 Bucket 上传相关权限
|
||||
|
||||
### 推荐 CAM 用户权限策略
|
||||
|
||||
如果你要建专用 CAM 用户,给它绑定下面这类策略即可。
|
||||
|
||||
把下面真实值替换成你的实际资源:
|
||||
|
||||
- 地域:`ap-guangzhou`
|
||||
- AppId:`1251306435`
|
||||
- Bucket:`plates-1251306435`
|
||||
- Prefix:`mp/studio`
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "2.0",
|
||||
"statement": [
|
||||
{
|
||||
"effect": "allow",
|
||||
"action": [
|
||||
"name/cos:PutObject",
|
||||
"name/cos:PostObject"
|
||||
],
|
||||
"resource": [
|
||||
"qcs::cos:ap-guangzhou:uid/1251306435:plates-1251306435/mp/studio/*"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
如果你后续还要服务端删除对象,再补:
|
||||
|
||||
- `name/cos:DeleteObject`
|
||||
|
||||
当前仓库实现不需要删除对象,所以先不要额外放大权限。
|
||||
|
||||
## 六、服务端环境变量
|
||||
|
||||
把下面变量配置到 `packages/server/.env` 或线上环境:
|
||||
|
||||
```env
|
||||
COS_SECRET_ID=your-cos-secret-id
|
||||
COS_SECRET_KEY=your-cos-secret-key
|
||||
COS_BUCKET=plates-1251306435
|
||||
COS_REGION=ap-guangzhou
|
||||
COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
|
||||
COS_UPLOAD_PREFIX=mp/studio
|
||||
COS_UPLOAD_DURATION_SECONDS=1800
|
||||
```
|
||||
|
||||
各字段含义:
|
||||
|
||||
- `COS_SECRET_ID`:用于签发 POST Policy 的长期密钥 ID
|
||||
- `COS_SECRET_KEY`:用于签发 POST Policy 的长期密钥 Key
|
||||
- `COS_BUCKET`:上传目标 Bucket
|
||||
- `COS_REGION`:Bucket 地域
|
||||
- `COS_PUBLIC_BASE_URL`:最终展示图片的访问域名
|
||||
- `COS_UPLOAD_PREFIX`:统一对象前缀
|
||||
- `COS_UPLOAD_DURATION_SECONDS`:Policy 有效期秒数
|
||||
|
||||
现在可以删除或忽略这些旧配置:
|
||||
|
||||
- `COS_UPLOAD_ROLE_ARN`
|
||||
- `COS_APP_ID`
|
||||
- `COS_UPLOAD_ROLE_SESSION_NAME`
|
||||
|
||||
它们对当前实现已经没用。
|
||||
|
||||
## 七、控制台操作清单
|
||||
|
||||
按这个顺序做:
|
||||
|
||||
1. 确认 COS Bucket 已存在。
|
||||
2. 确认图片访问域名对外可读。
|
||||
3. 在微信公众平台加好 `request` / `uploadFile` / `downloadFile` 合法域名。
|
||||
4. 准备一对 COS 长期密钥。
|
||||
5. 把 `COS_SECRET_ID`、`COS_SECRET_KEY`、`COS_BUCKET`、`COS_REGION`、`COS_PUBLIC_BASE_URL`、`COS_UPLOAD_PREFIX` 配到服务端。
|
||||
6. 重启服务端。
|
||||
7. 在管理中心上传一张图片测试。
|
||||
|
||||
## 八、接口返回内容说明
|
||||
|
||||
请求:
|
||||
|
||||
```http
|
||||
POST /api/admin/studio/upload-credentials
|
||||
Content-Type: application/json
|
||||
Authorization: Bearer <admin-token>
|
||||
|
||||
{
|
||||
"fileName": "demo.jpg",
|
||||
"contentType": "image/jpeg",
|
||||
"assetType": "gallery"
|
||||
}
|
||||
```
|
||||
|
||||
正常返回会包含:
|
||||
|
||||
- `uploadUrl`
|
||||
- `fileUrl`
|
||||
- `key`
|
||||
- `assetType`
|
||||
- `expiresAt`
|
||||
- `formData`
|
||||
|
||||
`formData` 里会有这些字段:
|
||||
|
||||
- `key`
|
||||
- `policy`
|
||||
- `success_action_status`
|
||||
- `Content-Type`
|
||||
- `q-sign-algorithm`
|
||||
- `q-ak`
|
||||
- `q-key-time`
|
||||
- `q-sign-time`
|
||||
- `q-signature`
|
||||
|
||||
这就是小程序直传需要的全部内容。
|
||||
|
||||
## 九、怎么验证是否配置正确
|
||||
|
||||
### 1. 接口层验证
|
||||
|
||||
调用 `POST /api/admin/studio/upload-credentials`。
|
||||
|
||||
如果成功,说明:
|
||||
|
||||
- 服务端长期密钥有效
|
||||
- 服务端已经能正确签发 policy
|
||||
|
||||
### 2. 上传层验证
|
||||
|
||||
在管理中心上传一张图,检查:
|
||||
|
||||
1. COS Bucket 下是否出现对象
|
||||
2. 返回的 `fileUrl` 浏览器是否能直接访问
|
||||
3. 保存工作室设置后首页是否显示该图
|
||||
|
||||
### 3. 失败时怎么定位
|
||||
|
||||
如果 `upload-credentials` 接口失败,优先检查:
|
||||
|
||||
- `COS_SECRET_ID` / `COS_SECRET_KEY` 是否正确
|
||||
- `COS_BUCKET` / `COS_REGION` 是否正确
|
||||
- 服务端是否已经加载最新环境变量
|
||||
|
||||
如果接口成功但上传失败,优先检查:
|
||||
|
||||
- 小程序 `uploadFile 合法域名` 是否正确
|
||||
- Bucket 权限策略是否允许当前长期密钥上传到该前缀
|
||||
- `Content-Type` 是否被策略条件限制住
|
||||
|
||||
如果上传成功但图片打不开,优先检查:
|
||||
|
||||
- Bucket 或图片域名是否可公网访问
|
||||
- `COS_PUBLIC_BASE_URL` 是否正确
|
||||
- 小程序 `downloadFile 合法域名` 是否正确
|
||||
|
||||
## 十、当前实现的边界
|
||||
|
||||
当前仓库实现边界如下:
|
||||
|
||||
- 只支持 `jpg`、`jpeg`、`png`、`webp`、`heic`、`heif`
|
||||
- 单次上传大小上限 `10MB`
|
||||
- 只支持普通表单直传,不支持分片上传
|
||||
- 删除工作室图片时,只会从数据库配置里移除 URL,不会删除 COS 历史对象
|
||||
|
||||
最后一条是故意保守设计。
|
||||
原因很简单:
|
||||
|
||||
- 先保证配置删除安全
|
||||
- 避免误删真实文件
|
||||
|
||||
如果以后要做“删配置时同步删对象”,那时再单独加 `DeleteObject` 权限。
|
||||
|
||||
## 十一、初始化工作室画廊
|
||||
|
||||
如果你要把现在手工写死的图片 URL 一次性写入数据库,执行:
|
||||
|
||||
```bash
|
||||
pnpm --filter @mp-pilates/server studio:seed-gallery
|
||||
```
|
||||
|
||||
脚本文件:
|
||||
|
||||
- `packages/server/prisma/update-studio-gallery.ts`
|
||||
|
||||
## 十二、建议的生产做法
|
||||
|
||||
如果你后面要长期维护,建议:
|
||||
|
||||
1. 图片单独放一个 Bucket。
|
||||
2. 长期密钥不要直接用主账号,换成专用 CAM 用户。
|
||||
3. 对专用 CAM 用户只给 `mp/studio/*` 前缀上传权限。
|
||||
4. 用 CDN 域名作为 `COS_PUBLIC_BASE_URL`。
|
||||
|
||||
这样后面扩展、迁移、审计都会更稳。
|
||||
946
docs/superpowers/plans/2026-04-07-member-card-edit.md
Normal file
946
docs/superpowers/plans/2026-04-07-member-card-edit.md
Normal file
@@ -0,0 +1,946 @@
|
||||
# 会员卡编辑功能实现计划
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 在管理后台会员列表中,点击会员弹出详情/编辑弹窗,支持编辑卡种、有效期、次数,以及清空会员卡
|
||||
|
||||
**Architecture:** 后端在 `UserController` 新增三个 admin 接口(GET/PUT/DELETE `/admin/members/:userId/membership`),前端将现有详情弹窗改造为 Tab 模式,store 新增三个 action
|
||||
|
||||
**Tech Stack:** NestJS (后端) + Vue 3 + uni-app + Pinia (前端)
|
||||
|
||||
---
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
Backend:
|
||||
- packages/server/src/user/user.controller.ts (新增3个接口)
|
||||
- packages/server/src/user/user.service.ts (新增3个 service 方法)
|
||||
- packages/server/src/user/dto/update-user-membership.dto.ts (新建)
|
||||
|
||||
Frontend:
|
||||
- packages/app/src/stores/admin.ts (新增3个 action)
|
||||
- packages/app/src/pages/admin/members.vue (改造详情弹窗为 Tab 模式)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: 后端接口
|
||||
|
||||
### Task 1: 创建 UpdateUserMembershipDto
|
||||
|
||||
**Files:**
|
||||
- Create: `packages/server/src/user/dto/update-user-membership.dto.ts`
|
||||
|
||||
```typescript
|
||||
import { IsDateString, IsInt, IsOptional, IsUUID, Min } from 'class-validator'
|
||||
|
||||
export class UpdateUserMembershipDto {
|
||||
@IsUUID()
|
||||
cardTypeId: string
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
@Min(0)
|
||||
remainingTimes?: number | null
|
||||
|
||||
@IsDateString()
|
||||
startDate: string
|
||||
|
||||
@IsDateString()
|
||||
expireDate: string
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 1: 创建目录并写入文件**
|
||||
|
||||
```bash
|
||||
mkdir -p /Users/richard/Documents/code/pilates/mp-pilates/packages/server/src/user/dto
|
||||
```
|
||||
|
||||
写入 `packages/server/src/user/dto/update-user-membership.dto.ts`
|
||||
|
||||
---
|
||||
|
||||
### Task 2: UserService 新增会员卡管理方法
|
||||
|
||||
**Files:**
|
||||
- Modify: `packages/server/src/user/user.service.ts` — 在文件末尾添加 3 个新方法
|
||||
|
||||
需要添加的方法:
|
||||
1. `getUserMembership(userId: string)` — 返回 `Membership & { cardType: CardType } | null`
|
||||
2. `updateUserMembership(userId: string, dto: UpdateUserMembershipDto)` — 创建或更新 membership,status 自动计算
|
||||
3. `deleteUserMembership(userId: string)` — 软删除(status → EXPIRED)
|
||||
|
||||
关键业务逻辑:
|
||||
- `updateUserMembership` 中 status 计算规则:
|
||||
- `expireDate < now` → `EXPIRED`
|
||||
- `remainingTimes === 0` → `USED_UP`
|
||||
- 否则 → `ACTIVE`
|
||||
- 如果用户已有 membership → 更新;无 → 创建新的
|
||||
- 需要同时 import `CardTypeCategory` 和 `MembershipStatus`
|
||||
|
||||
```typescript
|
||||
// 在 user.service.ts 顶部已有 import,追加方法
|
||||
import { CardTypeCategory, MembershipStatus } from '@mp-pilates/shared'
|
||||
import { UpdateUserMembershipDto } from './dto/update-user-membership.dto'
|
||||
import { Membership, CardType, Prisma } from '@prisma/client'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
|
||||
// 在 class 末尾添加:
|
||||
|
||||
async getUserMembership(userId: string): Promise<(Membership & { cardType: CardType }) | null> {
|
||||
// userId 无唯一约束,取第一条
|
||||
const membership = await this.prisma.membership.findFirst({
|
||||
where: { userId },
|
||||
include: { cardType: true },
|
||||
})
|
||||
return membership ? { ...membership, cardType: { ...membership.cardType } } : null
|
||||
}
|
||||
|
||||
async updateUserMembership(
|
||||
userId: string,
|
||||
dto: UpdateUserMembershipDto,
|
||||
): Promise<Membership & { cardType: CardType }> {
|
||||
// 计算 status
|
||||
const now = new Date()
|
||||
const expireDate = new Date(dto.expireDate)
|
||||
const remainingTimes = dto.remainingTimes ?? null
|
||||
const isTimeBased = remainingTimes !== null
|
||||
|
||||
let status: MembershipStatus = MembershipStatus.ACTIVE
|
||||
if (expireDate < now) {
|
||||
status = MembershipStatus.EXPIRED
|
||||
} else if (isTimeBased && remainingTimes <= 0) {
|
||||
status = MembershipStatus.USED_UP
|
||||
}
|
||||
|
||||
// 由于 userId 无唯一约束,先查是否存在,取第一条
|
||||
const existing = await this.prisma.membership.findFirst({ where: { userId } })
|
||||
|
||||
let membership: Membership & { cardType: CardType }
|
||||
if (existing) {
|
||||
// 已有 membership → 更新
|
||||
const updated = await this.prisma.membership.update({
|
||||
where: { id: existing.id },
|
||||
data: {
|
||||
cardTypeId: dto.cardTypeId,
|
||||
remainingTimes: dto.remainingTimes ?? null,
|
||||
startDate: new Date(dto.startDate),
|
||||
expireDate: new Date(dto.expireDate),
|
||||
status,
|
||||
},
|
||||
include: { cardType: true },
|
||||
})
|
||||
membership = { ...updated, cardType: { ...updated.cardType } }
|
||||
} else {
|
||||
// 无 membership → 创建新的
|
||||
const created = await this.prisma.membership.create({
|
||||
data: {
|
||||
userId,
|
||||
cardTypeId: dto.cardTypeId,
|
||||
remainingTimes: dto.remainingTimes ?? null,
|
||||
startDate: new Date(dto.startDate),
|
||||
expireDate: new Date(dto.expireDate),
|
||||
status,
|
||||
},
|
||||
include: { cardType: true },
|
||||
})
|
||||
membership = { ...created, cardType: { ...created.cardType } }
|
||||
}
|
||||
|
||||
return membership
|
||||
}
|
||||
|
||||
async deleteUserMembership(userId: string): Promise<void> {
|
||||
await this.prisma.membership.updateMany({
|
||||
where: { userId },
|
||||
data: { status: MembershipStatus.EXPIRED },
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
注意:`Membership` 表的 `userId` 暂无唯一约束,实现阶段如有需要可加。`findFirst` + `update` 的方案在只有一张卡时工作正常。
|
||||
|
||||
---
|
||||
|
||||
### Task 3: UserController 新增 3 个 admin 接口
|
||||
|
||||
**Files:**
|
||||
- Modify: `packages/server/src/user/user.controller.ts`
|
||||
|
||||
在文件顶部添加 `@Param` import,然后在 `Admin: Member Management` 区块后添加新接口:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
Controller,
|
||||
Get,
|
||||
Put,
|
||||
Delete,
|
||||
Body,
|
||||
Param,
|
||||
Query,
|
||||
UseGuards,
|
||||
} from '@nestjs/common'
|
||||
// ... existing imports ...
|
||||
import { UpdateUserMembershipDto } from './dto/update-user-membership.dto'
|
||||
|
||||
// 在 getMembers 之后添加:
|
||||
|
||||
@Get('admin/members/:userId/membership')
|
||||
@UseGuards(RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
getUserMembership(@Param('userId') userId: string) {
|
||||
return this.userService.getUserMembership(userId)
|
||||
}
|
||||
|
||||
@Put('admin/members/:userId/membership')
|
||||
@UseGuards(RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
updateUserMembership(
|
||||
@Param('userId') userId: string,
|
||||
@Body() dto: UpdateUserMembershipDto,
|
||||
) {
|
||||
return this.userService.updateUserMembership(userId, dto)
|
||||
}
|
||||
|
||||
@Delete('admin/members/:userId/membership')
|
||||
@UseGuards(RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
deleteUserMembership(@Param('userId') userId: string) {
|
||||
return this.userService.deleteUserMembership(userId)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: 前端 Store
|
||||
|
||||
### Task 4: Admin Store 新增 3 个 action
|
||||
|
||||
**Files:**
|
||||
- Modify: `packages/app/src/stores/admin.ts`
|
||||
|
||||
在 `MemberSummary` 类型后添加 `UserMembership` 类型(放在 fetchMembers 附近):
|
||||
|
||||
```typescript
|
||||
export interface UserMembership {
|
||||
userId: string
|
||||
membership: {
|
||||
id: string
|
||||
cardTypeId: string
|
||||
remainingTimes: number | null
|
||||
startDate: string
|
||||
expireDate: string
|
||||
status: string
|
||||
cardType: {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
totalTimes: number | null
|
||||
durationDays: number
|
||||
}
|
||||
} | null
|
||||
}
|
||||
```
|
||||
|
||||
在 `fetchMembers` action 后添加:
|
||||
|
||||
```typescript
|
||||
async function getUserMembership(userId: string): Promise<UserMembership> {
|
||||
return get<UserMembership>(`/admin/members/${userId}/membership`)
|
||||
}
|
||||
|
||||
async function updateUserMembership(
|
||||
userId: string,
|
||||
dto: {
|
||||
cardTypeId: string
|
||||
remainingTimes?: number | null
|
||||
startDate: string
|
||||
expireDate: string
|
||||
},
|
||||
): Promise<any> {
|
||||
return put<any>(`/admin/members/${userId}/membership`, dto)
|
||||
}
|
||||
|
||||
async function deleteUserMembership(userId: string): Promise<void> {
|
||||
return del<void>(`/admin/members/${userId}/membership`)
|
||||
}
|
||||
```
|
||||
|
||||
在 `return` 对象中导出这三个函数。
|
||||
|
||||
---
|
||||
|
||||
## Phase 3: 前端 UI(详情弹窗改造)
|
||||
|
||||
### Task 5: members.vue 弹窗改造 — 结构变更
|
||||
|
||||
**Files:**
|
||||
- Modify: `packages/app/src/pages/admin/members.vue`
|
||||
|
||||
将现有的详情弹窗(`detail-modal`)从单一视图改造为 Tab 模式。
|
||||
|
||||
#### 5.1 模板改动
|
||||
|
||||
**原有弹窗代码:**
|
||||
```vue
|
||||
<!-- Detail modal -->
|
||||
<view v-if="showDetail && detailMember" class="modal-mask" @tap.self="showDetail = false">
|
||||
<view class="modal">
|
||||
<!-- 详情内容 -->
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
**替换为:**
|
||||
```vue
|
||||
<!-- Detail / Edit modal -->
|
||||
<view v-if="showDetail && detailMember" class="modal-mask" @tap.self="closeModal">
|
||||
<view class="modal">
|
||||
<!-- Header with close -->
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">会员详情</text>
|
||||
<text class="modal-close-btn" @tap="closeModal">×</text>
|
||||
</view>
|
||||
|
||||
<!-- Tab bar -->
|
||||
<view class="tab-bar">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': activeTab === 'detail' }"
|
||||
@tap="switchTab('detail')"
|
||||
>
|
||||
<text class="tab-text">详情</text>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': activeTab === 'edit' }"
|
||||
@tap="switchTab('edit')"
|
||||
>
|
||||
<text class="tab-text">编辑</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab: 详情 -->
|
||||
<view v-if="activeTab === 'detail'" class="tab-content">
|
||||
<!-- 头像区 -->
|
||||
<view class="detail-header">
|
||||
<view class="detail-avatar">
|
||||
<image v-if="detailMember.avatarUrl" class="avatar-img" :src="detailMember.avatarUrl" mode="aspectFill" />
|
||||
<view v-else class="avatar-placeholder avatar-placeholder--lg">
|
||||
<text class="avatar-text avatar-text--lg">{{ (detailMember.nickname || '?').slice(0, 1) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="detail-name">{{ detailMember.nickname || '未知用户' }}</text>
|
||||
<text class="detail-openid" @tap="copyOpenid(detailMember.openid)">{{ detailMember.openid }}</text>
|
||||
<text class="detail-phone">{{ detailMember.phone || '未绑定手机' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 会员卡信息(有卡时) -->
|
||||
<view v-if="detailMembership" class="membership-card">
|
||||
<view class="membership-card-header">
|
||||
<text class="membership-card-name">{{ detailMembership.cardType.name }}</text>
|
||||
<text class="membership-card-badge" :class="'badge--' + detailMembership.status">
|
||||
{{ statusLabel(detailMembership.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="membership-card-info">
|
||||
<text class="membership-info-item">有效期:{{ formatDate(detailMembership.startDate) }} - {{ formatDate(detailMembership.expireDate) }}</text>
|
||||
<text v-if="detailMembership.remainingTimes != null" class="membership-info-item">
|
||||
剩余:{{ detailMembership.remainingTimes }} 次
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无卡时 -->
|
||||
<view v-else class="no-membership">
|
||||
<text class="no-membership-text">暂无会员卡</text>
|
||||
<view class="no-membership-btn" @tap="goEdit">
|
||||
<text class="no-membership-btn-text">去开卡</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预约统计 -->
|
||||
<view class="detail-stats">
|
||||
<view class="detail-stat">
|
||||
<text class="detail-stat-value">{{ detailMember.totalBookings }}</text>
|
||||
<text class="detail-stat-label">总预约</text>
|
||||
</view>
|
||||
<view class="detail-stat">
|
||||
<text class="detail-stat-value">{{ detailMember.completedBookings }}</text>
|
||||
<text class="detail-stat-label">已完成</text>
|
||||
</view>
|
||||
<view class="detail-stat">
|
||||
<text class="detail-stat-value">{{ detailMember.cancelledBookings }}</text>
|
||||
<text class="detail-stat-label">已取消</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 清空卡按钮(有卡时) -->
|
||||
<view v-if="detailMembership" class="danger-zone">
|
||||
<view class="danger-btn" @tap="onClearMembership">
|
||||
<text class="danger-btn-text">解除会员卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab: 编辑 -->
|
||||
<view v-if="activeTab === 'edit'" class="tab-content">
|
||||
<!-- 加载中 -->
|
||||
<view v-if="editLoading" class="edit-loading">
|
||||
<text class="edit-loading-text">加载中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑表单 -->
|
||||
<view v-else class="edit-form">
|
||||
<!-- 卡种选择 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">卡种</text>
|
||||
<picker
|
||||
class="form-picker"
|
||||
mode="selector"
|
||||
:value="editForm.cardTypeIndex"
|
||||
:range="editCardTypes"
|
||||
range-key="name"
|
||||
@change="onCardTypeChange"
|
||||
>
|
||||
<view class="form-picker-inner">
|
||||
<text class="form-picker-text">{{ editCardTypes[editForm.cardTypeIndex]?.name || '请选择' }}</text>
|
||||
<text class="form-picker-arrow">▾</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 剩余次数(TIMES/TRIAL) -->
|
||||
<view v-if="isTimeBasedCard" class="form-item">
|
||||
<text class="form-label">剩余次数</text>
|
||||
<input
|
||||
class="form-input"
|
||||
type="number"
|
||||
v-model="editForm.remainingTimes"
|
||||
placeholder="请输入剩余次数"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 生效日期 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">生效日期</text>
|
||||
<picker
|
||||
class="form-picker"
|
||||
mode="date"
|
||||
:value="editForm.startDate"
|
||||
@change="(e) => onStartDateChange(e)"
|
||||
>
|
||||
<view class="form-picker-inner">
|
||||
<text class="form-picker-text">{{ editForm.startDate }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 有效期至 -->
|
||||
<view class="form-item">
|
||||
<text class="form-label">有效期至</text>
|
||||
<picker
|
||||
class="form-picker"
|
||||
mode="date"
|
||||
:value="editForm.expireDate"
|
||||
@change="(e) => onExpireDateChange(e)"
|
||||
>
|
||||
<view class="form-picker-inner">
|
||||
<text class="form-picker-text">{{ editForm.expireDate }}</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="edit-submit">
|
||||
<view
|
||||
class="submit-btn"
|
||||
:class="{ 'submit-btn--disabled': editSubmitting }"
|
||||
@tap="onSaveMembership"
|
||||
>
|
||||
<text class="submit-btn-text">{{ editSubmitting ? '保存中...' : '保存' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
```
|
||||
|
||||
#### 5.2 Script 改动
|
||||
|
||||
新增以下状态:
|
||||
|
||||
> 注意:在 `import { ref, onMounted, onUnmounted }` 后添加 `computed`:
|
||||
> `import { ref, computed, onMounted, onUnmounted } from 'vue'`
|
||||
|
||||
```typescript
|
||||
const activeTab = ref<'detail' | 'edit'>('detail')
|
||||
const detailMembership = ref<any>(null) // 当前会员卡数据
|
||||
const editLoading = ref(false)
|
||||
const editSubmitting = ref(false)
|
||||
const editCardTypes = ref<any[]>([]) // 卡种列表(去获取)
|
||||
|
||||
const editForm = ref({
|
||||
cardTypeIndex: 0,
|
||||
cardTypeId: '',
|
||||
remainingTimes: null as number | null,
|
||||
startDate: '',
|
||||
expireDate: '',
|
||||
manuallyEditedExpire: false, // 用户手动修改过 expireDate 时为 true
|
||||
})
|
||||
|
||||
// 是否为次数卡(TIMES / TRIAL),依赖 cardTypeIndex
|
||||
const isTimeBasedCard = computed(() => {
|
||||
const card = editCardTypes.value[editForm.value.cardTypeIndex]
|
||||
return card && (card.type === 'TIMES' || card.type === 'TRIAL')
|
||||
})
|
||||
|
||||
// 工具函数
|
||||
function formatDate(dateStr: string): string {
|
||||
if (!dateStr) return '-'
|
||||
return dateStr.slice(0, 10)
|
||||
}
|
||||
|
||||
function statusLabel(status: string): string {
|
||||
const map: Record<string, string> = {
|
||||
ACTIVE: '有效',
|
||||
EXPIRED: '已过期',
|
||||
USED_UP: '已用完',
|
||||
}
|
||||
return map[status] || status
|
||||
}
|
||||
|
||||
// 懒加载会员卡数据
|
||||
async function loadDetailMembership(userId: string) {
|
||||
detailMembership.value = null
|
||||
try {
|
||||
const result = await adminStore.getUserMembership(userId)
|
||||
detailMembership.value = result.membership
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function switchTab(tab: 'detail' | 'edit') {
|
||||
activeTab.value = tab
|
||||
if (tab === 'edit') {
|
||||
// 切换到编辑 Tab 时加载会员卡数据和卡种列表
|
||||
if (!editCardTypes.value.length) {
|
||||
adminStore.fetchCardTypes().then((types) => {
|
||||
editCardTypes.value = types
|
||||
})
|
||||
}
|
||||
// 如果还没加载 membership,先加载
|
||||
if (!detailMembership.value) {
|
||||
loadDetailMembership(detailMember.value!.userId).then(() => {
|
||||
initEditForm()
|
||||
})
|
||||
} else {
|
||||
initEditForm()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function initEditForm() {
|
||||
const m = detailMembership.value
|
||||
const types = editCardTypes.value
|
||||
if (m) {
|
||||
// 有卡:预填充
|
||||
const idx = types.findIndex((t) => t.id === m.cardTypeId)
|
||||
editForm.value = {
|
||||
cardTypeIndex: idx >= 0 ? idx : 0,
|
||||
cardTypeId: m.cardTypeId,
|
||||
remainingTimes: m.remainingTimes,
|
||||
startDate: m.startDate.slice(0, 10),
|
||||
expireDate: m.expireDate.slice(0, 10),
|
||||
manuallyEditedExpire: false,
|
||||
}
|
||||
} else {
|
||||
// 无卡:默认选中第一个卡种
|
||||
editForm.value = {
|
||||
cardTypeIndex: 0,
|
||||
cardTypeId: types[0]?.id || '',
|
||||
remainingTimes: types[0]?.totalTimes ?? null,
|
||||
startDate: formatDate2(new Date()),
|
||||
expireDate: calculateExpireDate(formatDate2(new Date()), types[0]?.durationDays ?? 30),
|
||||
manuallyEditedExpire: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate2(date: Date): string {
|
||||
const y = date.getFullYear()
|
||||
const m = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const d = String(date.getDate()).padStart(2, '0')
|
||||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function calculateExpireDate(startDate: string, durationDays: number): string {
|
||||
const d = new Date(startDate)
|
||||
d.setDate(d.getDate() + durationDays)
|
||||
return formatDate2(d)
|
||||
}
|
||||
|
||||
function onCardTypeChange(e: { detail: { value: number } }) {
|
||||
const idx = e.detail.value
|
||||
const cardType = editCardTypes.value[idx]
|
||||
editForm.value.cardTypeIndex = idx
|
||||
editForm.value.cardTypeId = cardType.id
|
||||
// 自动填充次数和有效期(仅当用户未手动修改过有效期时)
|
||||
if (cardType.totalTimes != null) {
|
||||
editForm.value.remainingTimes = cardType.totalTimes
|
||||
}
|
||||
if (!editForm.value.manuallyEditedExpire) {
|
||||
editForm.value.startDate = formatDate2(new Date())
|
||||
editForm.value.expireDate = calculateExpireDate(
|
||||
formatDate2(new Date()),
|
||||
cardType.durationDays,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function onStartDateChange(e: { detail: { value: string } }) {
|
||||
editForm.value.startDate = e.detail.value
|
||||
if (!editForm.value.manuallyEditedExpire) {
|
||||
const cardType = editCardTypes.value[editForm.value.cardTypeIndex]
|
||||
if (cardType) {
|
||||
editForm.value.expireDate = calculateExpireDate(e.detail.value, cardType.durationDays)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onExpireDateChange(e: { detail: { value: string } }) {
|
||||
editForm.value.expireDate = e.detail.value
|
||||
editForm.value.manuallyEditedExpire = true
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
switchTab('edit')
|
||||
}
|
||||
|
||||
async function onSaveMembership() {
|
||||
if (editSubmitting.value) return
|
||||
const userId = detailMember.value?.userId
|
||||
if (!userId) return
|
||||
editSubmitting.value = true
|
||||
try {
|
||||
await adminStore.updateUserMembership(userId, {
|
||||
cardTypeId: editForm.value.cardTypeId,
|
||||
remainingTimes: editForm.value.remainingTimes,
|
||||
startDate: editForm.value.startDate,
|
||||
expireDate: editForm.value.expireDate,
|
||||
})
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
activeTab.value = 'detail'
|
||||
await loadDetailMembership(userId)
|
||||
// 刷新列表
|
||||
loadMembers(false)
|
||||
} catch {
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
} finally {
|
||||
editSubmitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function onClearMembership() {
|
||||
const userId = detailMember.value?.userId
|
||||
if (!userId) return
|
||||
uni.showModal({
|
||||
title: '确认解除',
|
||||
content: '确定要解除该用户的会员卡吗?',
|
||||
confirmColor: '#e64329',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
try {
|
||||
await adminStore.deleteUserMembership(userId)
|
||||
uni.showToast({ title: '已解除', icon: 'success' })
|
||||
showDetail.value = false
|
||||
loadMembers(false)
|
||||
} catch {
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showDetail.value = false
|
||||
activeTab.value = 'detail'
|
||||
detailMembership.value = null
|
||||
}
|
||||
|
||||
// 修改 openDetail
|
||||
function openDetail(m: MemberSummary) {
|
||||
detailMember.value = m
|
||||
showDetail.value = true
|
||||
detailMembership.value = null // 重置,懒加载
|
||||
activeTab.value = 'detail'
|
||||
// 预加载 membership(详情 Tab 需要显示)
|
||||
loadDetailMembership(m.userId)
|
||||
}
|
||||
```
|
||||
|
||||
#### 5.3 样式改动
|
||||
|
||||
在 `<style>` 末尾添加以下样式:
|
||||
|
||||
```scss
|
||||
/* ── Modal header ─────────────────────────── */
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 32rpx 0;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.modal-close-btn {
|
||||
font-size: 48rpx;
|
||||
color: $text-hint;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ── Tab bar ───────────────────────────────── */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
border-bottom: 1rpx solid $border-color;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item--active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 48rpx;
|
||||
height: 4rpx;
|
||||
background: $accent-color;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
.tab-item--active .tab-text {
|
||||
color: $accent-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
min-height: 400rpx;
|
||||
}
|
||||
|
||||
/* ── Membership card ────────────────────────── */
|
||||
.membership-card {
|
||||
background: linear-gradient(135deg, rgba($brand-color, 0.08), rgba($accent-color, 0.08));
|
||||
border: 1rpx solid rgba($brand-color, 0.15);
|
||||
border-radius: $radius-md;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.membership-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.membership-card-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.membership-card-badge {
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.badge--ACTIVE { background: rgba(#52c41a, 0.12); color: #52c41a; }
|
||||
.badge--EXPIRED { background: rgba($text-hint, 0.12); color: $text-hint; }
|
||||
.badge--USED_UP { background: rgba(#faad14, 0.12); color: #faad14; }
|
||||
|
||||
.membership-card-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.membership-info-item {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
/* ── No membership ──────────────────────────── */
|
||||
.no-membership {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48rpx 0;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.no-membership-text {
|
||||
font-size: 28rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
.no-membership-btn {
|
||||
background: $brand-color;
|
||||
border-radius: 36rpx;
|
||||
padding: 16rpx 48rpx;
|
||||
}
|
||||
|
||||
.no-membership-btn-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
/* ── Danger zone ───────────────────────────── */
|
||||
.danger-zone {
|
||||
margin-top: 24rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid $border-color;
|
||||
}
|
||||
|
||||
.danger-btn {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: rgba(230, 67, 41, 0.08);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.danger-btn-text {
|
||||
font-size: 26rpx;
|
||||
color: #e64329;
|
||||
}
|
||||
|
||||
/* ── Edit form ─────────────────────────────── */
|
||||
.edit-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80rpx 0;
|
||||
}
|
||||
|
||||
.edit-loading-text {
|
||||
font-size: 26rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
color: $text-secondary;
|
||||
width: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: $bg-page;
|
||||
border-radius: $radius-sm;
|
||||
padding: 0 20rpx;
|
||||
font-size: 26rpx;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: $bg-page;
|
||||
border-radius: $radius-sm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-picker-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.form-picker-text {
|
||||
font-size: 26rpx;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
.form-picker-arrow {
|
||||
font-size: 20rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
.edit-submit {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: $brand-color;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-btn--disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.submit-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: $accent-color;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 自检清单
|
||||
|
||||
- [ ] 后端接口路径正确:`/admin/members/:userId/membership`(不是 `/admin/membership/...`)
|
||||
- [ ] `UpdateUserMembershipDto` 字段与前端 `editForm` 一致
|
||||
- [ ] `isTimeBasedCard` 计算逻辑:`cardType.type === 'TIMES' || cardType.type === 'TRIAL'`
|
||||
- [ ] `detailMembership` 在 `openDetail` 时懒加载,不阻塞弹窗打开
|
||||
- [ ] `deleteUserMembership` 是软删除(status → EXPIRED),不是物理删除
|
||||
- [ ] `switchTab('edit')` 时 initEditForm 使用 `detailMembership.value`(可能为 null)
|
||||
- [ ] 卡种 picker 变化时,`remainingTimes` 只对 TIMES/TRIAL 类型生效
|
||||
186
docs/superpowers/specs/2026-04-07-member-card-edit-design.md
Normal file
186
docs/superpowers/specs/2026-04-07-member-card-edit-design.md
Normal file
@@ -0,0 +1,186 @@
|
||||
# 会员卡编辑功能设计
|
||||
|
||||
**日期:** 2026-04-07
|
||||
**状态:** 已批准
|
||||
|
||||
---
|
||||
|
||||
## 1. 概述
|
||||
|
||||
在管理后台会员列表中,点击会员 item 时弹出的详情弹窗增加"编辑"能力。管理员可编辑指定用户的卡种、卡有效期、剩余次数,也可清空/解除会员卡。
|
||||
|
||||
**前置约束:**
|
||||
- 一个用户只能拥有一张会员卡
|
||||
- 支持清空卡(解除会员资格)
|
||||
|
||||
---
|
||||
|
||||
## 2. 交互设计
|
||||
|
||||
### 2.1 弹窗结构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 会员详情 [×] │
|
||||
├──────────┬──────────────────────┤
|
||||
│ 详情 │ 编辑 │ ← Tab 切换
|
||||
├──────────┴──────────────────────┤
|
||||
│ 头像 / 昵称 / OpenID / 手机号 │
|
||||
│ ───────────────────────────── │
|
||||
│ 会员卡信息区(根据 Tab 显示) │
|
||||
│ 预约统计(总/完成/取消) │
|
||||
│ ───────────────────────────── │
|
||||
│ [关闭] │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 2.2 无卡用户交互
|
||||
|
||||
- 详情 Tab 显示"暂无会员卡"提示
|
||||
- 显示"去开卡"按钮,点击切换到编辑 Tab
|
||||
- 编辑 Tab 中卡种 picker 默认选中列表第一项,有效期自动计算
|
||||
|
||||
### 2.3 状态说明
|
||||
|
||||
| 场景 | Tab 初始显示 | 编辑表单状态 |
|
||||
|------|-------------|-------------|
|
||||
| 有卡用户 | 详情 Tab | 预填充当前数据 |
|
||||
| 无卡用户 | 详情 Tab(提示无卡) | 空白表单,卡种默认选中第一项 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 表单字段
|
||||
|
||||
| 字段 | 组件 | 条件 | 说明 |
|
||||
|------|------|------|------|
|
||||
| 卡种 | picker | 必填 | 从 `CardType` 表读取,按 sortOrder 排序 |
|
||||
| 剩余次数 | input (number) | TIMES / TRIAL 类型 | 默认填充卡种的 totalTimes |
|
||||
| 生效日期 | date picker | 必填 | 默认当天 |
|
||||
| 有效期至 | date picker | 必填 | 自动计算,支持手动调整 |
|
||||
|
||||
### 3.1 卡种切换逻辑
|
||||
|
||||
切换卡种时:
|
||||
1. `remainingTimes` 自动填充新卡种的 `totalTimes`(TIMES/TRIAL 类型)
|
||||
2. `expireDate` 按新卡种 `durationDays` 重新计算起始日期
|
||||
3. 编辑器内手动修改过 `expireDate` 时,不再自动覆盖
|
||||
|
||||
---
|
||||
|
||||
## 4. API 设计
|
||||
|
||||
### 4.1 获取用户会员卡
|
||||
|
||||
```
|
||||
GET /admin/members/:userId/membership
|
||||
```
|
||||
|
||||
**响应:**
|
||||
```json
|
||||
{
|
||||
"userId": "uuid",
|
||||
"membership": {
|
||||
"id": "uuid",
|
||||
"cardTypeId": "uuid",
|
||||
"remainingTimes": 10,
|
||||
"startDate": "2026-01-01",
|
||||
"expireDate": "2026-04-01",
|
||||
"status": "ACTIVE",
|
||||
"cardType": { ... }
|
||||
} | null
|
||||
}
|
||||
```
|
||||
|
||||
### 4.2 创建或更新会员卡
|
||||
|
||||
```
|
||||
PUT /admin/members/:userId/membership
|
||||
```
|
||||
|
||||
**请求体:**
|
||||
```json
|
||||
{
|
||||
"cardTypeId": "uuid",
|
||||
"remainingTimes": 10,
|
||||
"startDate": "2026-04-07",
|
||||
"expireDate": "2026-07-07"
|
||||
}
|
||||
```
|
||||
|
||||
**业务逻辑:**
|
||||
- 若该用户已有 membership → 更新
|
||||
- 若该用户无 membership → 创建新的
|
||||
- `status` 由后端根据 expireDate 和 remainingTimes 自动计算
|
||||
|
||||
### 4.3 解除会员卡
|
||||
|
||||
```
|
||||
DELETE /admin/members/:userId/membership
|
||||
```
|
||||
|
||||
**业务逻辑:**
|
||||
- 将 membership 的 `status` 标记为 `EXPIRED`(软删除,便于审计)
|
||||
- 不物理删除记录
|
||||
|
||||
---
|
||||
|
||||
## 5. 数据模型
|
||||
|
||||
### 5.1 会员卡状态自动计算规则
|
||||
|
||||
```
|
||||
if (expireDate < now) → EXPIRED
|
||||
else if (remainingTimes === 0) → USED_UP
|
||||
else → ACTIVE
|
||||
```
|
||||
|
||||
### 5.2 变更日志
|
||||
|
||||
通过现有的 `BookingStatusHistory` 表记录操作(tbd: 是否需要独立 `MembershipChangeLog` 表,待实现时确认)。
|
||||
|
||||
---
|
||||
|
||||
## 6. 错误处理
|
||||
|
||||
| 场景 | 处理 |
|
||||
|------|------|
|
||||
| 卡种不存在 | 后端返回 404,前端提示"卡种不存在" |
|
||||
| 有效期早于生效日期 | 前端表单校验失败,提示"有效期不能早于生效日期" |
|
||||
| 次数为负数 | 前端表单校验失败,提示"次数不能为负数" |
|
||||
| 网络错误 | Toast 提示"网络错误,请重试" |
|
||||
| 清空卡确认 | 弹出确认对话框,提示"确定要解除该用户的会员卡吗?" |
|
||||
|
||||
---
|
||||
|
||||
## 7. 涉及改动
|
||||
|
||||
### 后端
|
||||
|
||||
- `packages/server/src/membership/membership.controller.ts` — 新增三个 admin 接口
|
||||
- `packages/server/src/membership/membership.service.ts` — 新增 `getUserMembership` / `updateUserMembership` / `deleteUserMembership`
|
||||
- `packages/server/src/user/user.controller.ts` — 无改动(列表接口保持不变)
|
||||
|
||||
### 前端
|
||||
|
||||
- `packages/app/src/stores/admin.ts` — 新增三个 store action
|
||||
- `packages/app/src/pages/admin/members.vue` — 将详情弹窗改造为 Tab 模式,新增编辑表单
|
||||
|
||||
---
|
||||
|
||||
## 8. UI 细节
|
||||
|
||||
### 8.1 Tab 切换
|
||||
|
||||
- 详情/编辑 Tab 横向排列,激活态有下划线指示
|
||||
- 无卡用户点击"去开卡"后,自动切到编辑 Tab
|
||||
|
||||
### 8.2 编辑表单提交
|
||||
|
||||
- 保存成功后 Toast 提示"保存成功"
|
||||
- 自动切回详情 Tab 并刷新数据
|
||||
- 保存按钮点击后置灰,防止重复提交
|
||||
|
||||
### 8.3 清空卡
|
||||
|
||||
- 需二次确认
|
||||
- 成功后弹窗关闭,列表自动刷新
|
||||
298
packages/app/src/components/AboutSection.vue
Normal file
298
packages/app/src/components/AboutSection.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<view class="about-section">
|
||||
<view class="section-header">
|
||||
<view>
|
||||
<text class="section-eyebrow">Teacher Spotlight</text>
|
||||
<text class="section-title">老师介绍</text>
|
||||
</view>
|
||||
<text class="section-more" @tap="goToDetail">查看详情</text>
|
||||
</view>
|
||||
|
||||
<view class="teacher-card" @tap="goToDetail">
|
||||
<view class="teacher-main">
|
||||
<view class="cover-wrap">
|
||||
<image class="teacher-cover" :src="teacher.avatar" mode="aspectFill" />
|
||||
<view class="cover-badge">
|
||||
<text class="cover-badge-text">{{ teacher.badges[0] }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="teacher-content">
|
||||
<view class="teacher-heading">
|
||||
<view>
|
||||
<view class="name-row">
|
||||
<text class="teacher-name">{{ teacher.name }}</text>
|
||||
<text class="teacher-tag">{{ teacher.badges[1] }}</text>
|
||||
</view>
|
||||
<text class="teacher-title">{{ teacher.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="specialty-row">
|
||||
<text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
|
||||
</view>
|
||||
|
||||
<text class="teacher-intro">{{ teacher.intro }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="credential-box">
|
||||
<text class="credential-label">认证背景</text>
|
||||
<view v-for="item in teacher.certifications" :key="item" class="credential-row">
|
||||
<view class="credential-dot" />
|
||||
<text class="credential-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-row">
|
||||
<view class="secondary-btn" @tap.stop="goToDetail">
|
||||
<text class="secondary-btn-text">查看详情</text>
|
||||
</view>
|
||||
<view class="primary-btn" @tap.stop="goToBooking">
|
||||
<text class="primary-btn-text">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { irisProfile } from '../utils/teacher'
|
||||
|
||||
const teacher = irisProfile
|
||||
|
||||
function goToDetail() {
|
||||
uni.navigateTo({ url: `/pages/teacher/detail?id=${teacher.id}` })
|
||||
}
|
||||
|
||||
function goToBooking() {
|
||||
uni.switchTab({ url: '/pages/booking/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.about-section {
|
||||
padding: 20rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.section-eyebrow {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 3rpx;
|
||||
text-transform: uppercase;
|
||||
color: #b99b8c;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #2f2723;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 24rpx;
|
||||
color: #c36d52;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.teacher-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(226, 198, 179, 0.42), transparent 32%),
|
||||
linear-gradient(135deg, #fffdfb 0%, #f8f2ee 46%, #f2e8e2 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 22rpx;
|
||||
box-shadow: 0 18rpx 38rpx rgba(126, 98, 84, 0.09);
|
||||
}
|
||||
|
||||
.teacher-main {
|
||||
display: flex;
|
||||
gap: 22rpx;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.cover-wrap {
|
||||
position: relative;
|
||||
width: 188rpx;
|
||||
height: 248rpx;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: #eadfd7;
|
||||
}
|
||||
|
||||
.teacher-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-badge {
|
||||
position: absolute;
|
||||
left: 14rpx;
|
||||
bottom: 14rpx;
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
background: rgba(41, 34, 30, 0.74);
|
||||
backdrop-filter: blur(12rpx);
|
||||
}
|
||||
|
||||
.cover-badge-text {
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #fff7f3;
|
||||
}
|
||||
|
||||
.teacher-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.teacher-heading {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.teacher-name {
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: #2e2521;
|
||||
}
|
||||
|
||||
.teacher-tag {
|
||||
font-size: 18rpx;
|
||||
line-height: 1;
|
||||
color: #a85d44;
|
||||
background: rgba(221, 150, 118, 0.18);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 12rpx;
|
||||
}
|
||||
|
||||
.teacher-title {
|
||||
font-size: 24rpx;
|
||||
color: #7f6659;
|
||||
}
|
||||
|
||||
.specialty-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.specialty-pill {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(92, 126, 151, 0.12);
|
||||
color: #5a7a8b;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.teacher-intro {
|
||||
font-size: 22rpx;
|
||||
line-height: 1.7;
|
||||
color: #5e5048;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.credential-box {
|
||||
padding: 16rpx 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1rpx solid rgba(190, 161, 145, 0.22);
|
||||
}
|
||||
|
||||
.credential-label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
letter-spacing: 2rpx;
|
||||
color: #b19486;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.credential-text {
|
||||
font-size: 20rpx;
|
||||
line-height: 1.7;
|
||||
color: #6a5a51;
|
||||
}
|
||||
|
||||
.credential-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.credential-row + .credential-row {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.credential-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 12rpx;
|
||||
flex-shrink: 0;
|
||||
background: #6d4037;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.secondary-btn,
|
||||
.primary-btn {
|
||||
height: 72rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
width: 148rpx;
|
||||
border: 1rpx solid rgba(139, 113, 99, 0.24);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #ff7654 0%, #ff4d38 100%);
|
||||
box-shadow: 0 14rpx 24rpx rgba(255, 92, 69, 0.24);
|
||||
}
|
||||
|
||||
.secondary-btn-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #684d40;
|
||||
}
|
||||
|
||||
.primary-btn-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -105,13 +105,13 @@
|
||||
<view class="btn-outline" @tap="handleCancel">
|
||||
<text class="btn-outline-text">取消</text>
|
||||
</view>
|
||||
<view
|
||||
<button
|
||||
class="btn-confirm"
|
||||
:class="{ disabled: !selectedMembershipId }"
|
||||
@tap="handleConfirm"
|
||||
>
|
||||
<text class="btn-confirm-text">确认预约</text>
|
||||
</view>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -120,6 +120,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { requestBookingCreatedSubscriptionMessage } from '../utils/wechat-subscription'
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean
|
||||
@@ -134,6 +135,7 @@ const emit = defineEmits<{
|
||||
}>()
|
||||
|
||||
const selectedMembershipId = ref<string>('')
|
||||
const requestingSubscribe = ref(false)
|
||||
|
||||
// Auto-select the first membership when popup opens or memberships list changes
|
||||
watch(
|
||||
@@ -150,8 +152,22 @@ const selectedMembership = computed(() =>
|
||||
props.memberships.find((m) => m.id === selectedMembershipId.value) ?? null,
|
||||
)
|
||||
|
||||
function handleConfirm() {
|
||||
async function handleConfirm() {
|
||||
if (!props.timeSlot || !selectedMembershipId.value) return
|
||||
|
||||
if (requestingSubscribe.value) return
|
||||
requestingSubscribe.value = true
|
||||
|
||||
try {
|
||||
await requestBookingCreatedSubscriptionMessage()
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : '订阅消息授权失败'
|
||||
uni.showToast({ title: message, icon: 'none' })
|
||||
return
|
||||
} finally {
|
||||
requestingSubscribe.value = false
|
||||
}
|
||||
|
||||
emit('confirm', {
|
||||
timeSlotId: props.timeSlot.id,
|
||||
membershipId: selectedMembershipId.value,
|
||||
|
||||
@@ -14,28 +14,36 @@
|
||||
<!-- Circular logo -->
|
||||
<view class="logo-circle">
|
||||
<image
|
||||
v-if="studioInfo?.logo"
|
||||
v-if="logoImage"
|
||||
class="logo-img"
|
||||
:src="studioInfo.logo"
|
||||
mode="aspectFit"
|
||||
:src="logoImage"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<text v-else class="logo-placeholder">FC</text>
|
||||
<view v-else class="logo-placeholder">
|
||||
<text>{{ studioName.slice(0, 1) || 'F' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Studio name -->
|
||||
<text class="studio-name">{{ studioInfo?.name || 'Focus Core' }}</text>
|
||||
<text class="studio-name">{{ studioName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { StudioConfig } from '@mp-pilates/shared'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
studioInfo: StudioConfig | null
|
||||
}>()
|
||||
|
||||
const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
|
||||
const fallbackBannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
|
||||
const fallbackLogoImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/logo.jpg'
|
||||
|
||||
const bannerImage = computed(() => props.studioInfo?.bannerUrl || fallbackBannerImage)
|
||||
const logoImage = computed(() => props.studioInfo?.logo || fallbackLogoImage)
|
||||
const studioName = computed(() => props.studioInfo?.name || 'Focus Core')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -89,15 +97,22 @@ const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.logo-placeholder {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 64rpx;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
letter-spacing: 4rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.studio-name {
|
||||
|
||||
@@ -30,35 +30,18 @@
|
||||
class="card-row"
|
||||
@tap="goToDetail(card.id)"
|
||||
>
|
||||
<!-- Card Cover — horizontal premium design -->
|
||||
<view class="card-cover" :class="getCardCoverClass(card.type)">
|
||||
<!-- Left accent bar -->
|
||||
<view class="cover-accent-bar" />
|
||||
|
||||
<!-- Decorative circles -->
|
||||
<view class="cover-deco cover-deco--tl" />
|
||||
<view class="cover-deco cover-deco--br" />
|
||||
|
||||
<!-- CSS Icon -->
|
||||
<view class="cover-icon" :class="`cover-icon--${card.type}`" />
|
||||
|
||||
<!-- Right side: text content -->
|
||||
<view class="cover-content">
|
||||
<view class="cover-badge">
|
||||
<text class="cover-badge-text">{{ getCardTypeLabel(card.type) }}</text>
|
||||
</view>
|
||||
<text class="cover-name">{{ card.name }}</text>
|
||||
<view class="cover-price-row">
|
||||
<text class="cover-currency">¥</text>
|
||||
<text class="cover-price">{{ formatPrice(card.price) }}</text>
|
||||
</view>
|
||||
<text
|
||||
v-if="card.originalPrice && card.originalPrice > card.price"
|
||||
class="cover-original"
|
||||
>
|
||||
¥{{ formatPrice(card.originalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
<!-- Card Cover — image if available, gradient fallback -->
|
||||
<view class="card-cover" :class="card.coverUrl ? '' : getCardCoverClass(card.type)">
|
||||
<image
|
||||
v-if="card.coverUrl"
|
||||
class="card-cover-img"
|
||||
:src="card.coverUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<template v-else>
|
||||
<view class="cover-deco cover-deco--1" />
|
||||
<view class="cover-deco cover-deco--2" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- Card info — aligns with card-cover height -->
|
||||
@@ -100,20 +83,29 @@
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { CardType } from '@mp-pilates/shared'
|
||||
import { get } from '../utils/request'
|
||||
import { formatPrice, getCardTypeLabel, getCardCoverClass } from '../utils/format'
|
||||
import { formatPrice, getCardCoverClass } from '../utils/format'
|
||||
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
const loading = ref(false)
|
||||
const hasLoaded = ref(false)
|
||||
|
||||
async function fetchCardTypes() {
|
||||
// Stale-While-Revalidate: only show skeleton on first load
|
||||
// Subsequent refreshes silently update data in background
|
||||
if (!hasLoaded.value) {
|
||||
loading.value = true
|
||||
}
|
||||
try {
|
||||
const result = await get<CardType[]>('/membership/card-types')
|
||||
cardTypes.value = result
|
||||
.filter((c) => c.isActive)
|
||||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||||
hasLoaded.value = true
|
||||
} catch {
|
||||
// Only show error toast on first load; silent fail on background refresh
|
||||
if (!hasLoaded.value) {
|
||||
uni.showToast({ title: '加载会员卡失败', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -136,8 +128,11 @@ function goToAllCards() {
|
||||
<style lang="scss" scoped>
|
||||
.card-shop {
|
||||
background: #ffffff;
|
||||
margin-top: 16rpx;
|
||||
margin: 16rpx 24rpx 0;
|
||||
padding-bottom: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── Section header ── */
|
||||
@@ -180,249 +175,56 @@ function goToAllCards() {
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
CARD COVER — Horizontal premium card design
|
||||
CARD COVER — Clean minimal design
|
||||
══════════════════════════════════════════════════════════ */
|
||||
.card-cover {
|
||||
width: 240rpx;
|
||||
width: 200rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
|
||||
/* Glow effect behind */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: -20rpx;
|
||||
right: -20rpx;
|
||||
bottom: -20rpx;
|
||||
background: inherit;
|
||||
filter: blur(24rpx) brightness(0.8);
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Left accent stripe */
|
||||
.cover-accent-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
z-index: 1;
|
||||
.card-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Decorative circles */
|
||||
.cover-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&--tl {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
top: -16rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
&--1 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: -30rpx;
|
||||
right: -20rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
&--br {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
bottom: -24rpx;
|
||||
left: -16rpx;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
/* CSS-drawn icons */
|
||||
.cover-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 次卡 — stacked cards */
|
||||
.cover-icon--TIMES {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.85);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 1);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 月卡 — calendar */
|
||||
.cover-icon--DURATION {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36rpx;
|
||||
height: 30rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 0;
|
||||
border-top: 2rpx solid rgba(255, 255, 255, 1);
|
||||
box-shadow:
|
||||
-6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9),
|
||||
6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/* 体验卡 — star */
|
||||
.cover-icon--TRIAL {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 1);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
&--2 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
bottom: -20rpx;
|
||||
left: -10rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2rpx;
|
||||
height: 42rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow:
|
||||
0 -12rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
0 12rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
-12rpx 0 0 0 rgba(255, 255, 255, 0.8),
|
||||
12rpx 0 0 0 rgba(255, 255, 255, 0.8),
|
||||
-8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
-8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Card cover backgrounds */
|
||||
.cover--times {
|
||||
background: linear-gradient(135deg, #1e2340 0%, #2d2d5e 50%, #3a3a7a 100%);
|
||||
background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
|
||||
}
|
||||
|
||||
.cover--duration {
|
||||
background: linear-gradient(135deg, #4a1a6b 0%, #6c3483 50%, #8e4aaf 100%);
|
||||
background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
|
||||
}
|
||||
|
||||
.cover--trial {
|
||||
background: linear-gradient(135deg, #14527a 0%, #1a6fa0 50%, #48a9a6 100%);
|
||||
}
|
||||
|
||||
/* Right side text content */
|
||||
.cover-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 16rpx 0 12rpx;
|
||||
gap: 4rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cover-badge {
|
||||
padding: 3rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.cover-badge-text {
|
||||
font-size: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cover-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.5rpx;
|
||||
line-height: 1.2;
|
||||
max-width: 130rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cover-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.cover-currency {
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.cover-price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cover-original {
|
||||
font-size: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-decoration: line-through;
|
||||
background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
|
||||
}
|
||||
|
||||
/* ── Card info — matches card-cover height ── */
|
||||
|
||||
@@ -39,7 +39,14 @@ onMounted(() => {
|
||||
})
|
||||
|
||||
function handleBack() {
|
||||
const pages = getCurrentPages()
|
||||
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack({ delta: 1 })
|
||||
return
|
||||
}
|
||||
|
||||
uni.switchTab({ url: '/pages/home/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
<template>
|
||||
<view class="date-selector">
|
||||
<view class="date-selector" :class="`date-selector--${variant}`">
|
||||
<scroll-view class="scroll" scroll-x enhanced :show-scrollbar="false">
|
||||
<view class="track">
|
||||
<view
|
||||
v-for="item in dateRange"
|
||||
:key="item.date"
|
||||
class="date-item"
|
||||
:class="{ active: item.date === modelValue, today: item.isToday }"
|
||||
:class="[
|
||||
`date-item--${variant}`,
|
||||
{ active: item.date === modelValue, today: item.isToday },
|
||||
]"
|
||||
@tap="handleSelect(item.date)"
|
||||
>
|
||||
<text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
|
||||
@@ -25,6 +28,7 @@ import { getDateRange } from '../utils/format'
|
||||
|
||||
interface Props {
|
||||
modelValue: string
|
||||
variant?: 'default' | 'booking'
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
@@ -47,6 +51,8 @@ function handleSelect(date: string) {
|
||||
emit('update:modelValue', date)
|
||||
emit('select', date)
|
||||
}
|
||||
|
||||
const variant = computed(() => props.variant ?? 'default')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -55,6 +61,11 @@ function handleSelect(date: string) {
|
||||
padding: 16rpx 0 20rpx;
|
||||
border-bottom: 1rpx solid $primary-border;
|
||||
|
||||
&.date-selector--booking {
|
||||
background: rgba(252, 250, 248, 0.96);
|
||||
border-bottom-color: rgba(192, 154, 137, 0.12);
|
||||
}
|
||||
|
||||
.scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
@@ -121,6 +132,40 @@ function handleSelect(date: string) {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&.date-item--booking {
|
||||
background: rgba(247, 242, 238, 0.88);
|
||||
border: 1rpx solid rgba(192, 154, 137, 0.08);
|
||||
|
||||
.weekday {
|
||||
color: #9d8b83;
|
||||
}
|
||||
|
||||
.day {
|
||||
color: #3a2e2a;
|
||||
}
|
||||
|
||||
.month {
|
||||
color: #b7a79f;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(135deg, #d7beb1, #b98f7d);
|
||||
box-shadow: 0 12rpx 28rpx rgba(143, 103, 89, 0.16);
|
||||
|
||||
.weekday,
|
||||
.day,
|
||||
.month {
|
||||
color: #fffaf7;
|
||||
}
|
||||
}
|
||||
|
||||
&.today:not(.active) {
|
||||
.weekday {
|
||||
color: #8f6759;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
438
packages/app/src/components/FlashSaleSection.vue
Normal file
438
packages/app/src/components/FlashSaleSection.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<view v-if="flashSales.length" class="flash-sale-section">
|
||||
<!-- Section header -->
|
||||
<view class="section-header">
|
||||
<view class="header-left">
|
||||
<view class="flash-icon-wrap">
|
||||
<view class="flash-icon-clock" />
|
||||
</view>
|
||||
<text class="section-title">限时秒杀</text>
|
||||
<view v-if="hasOngoing" class="live-dot" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Horizontal scroll cards -->
|
||||
<scroll-view
|
||||
scroll-x
|
||||
:show-scrollbar="false"
|
||||
class="flash-scroll"
|
||||
>
|
||||
<view class="flash-card-list">
|
||||
<view
|
||||
v-for="sale in flashSales"
|
||||
:key="sale.id"
|
||||
class="flash-card"
|
||||
:class="cardPhaseClass(sale.phase)"
|
||||
@tap="goToDetail(sale.id)"
|
||||
>
|
||||
<!-- Top gradient band -->
|
||||
<view class="card-top">
|
||||
<!-- Phase badge -->
|
||||
<view class="phase-badge" :class="badgeClass(sale.phase)">
|
||||
<text class="phase-badge-text">{{ phaseLabel(sale.phase) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Countdown / status text -->
|
||||
<view class="countdown-row">
|
||||
<text v-if="sale.phase === FlashSalePhase.UPCOMING" class="countdown-label">距开始</text>
|
||||
<text v-else-if="sale.phase === FlashSalePhase.ONGOING" class="countdown-label">剩余</text>
|
||||
<view v-if="sale.phase === FlashSalePhase.UPCOMING || sale.phase === FlashSalePhase.ONGOING" class="countdown-blocks">
|
||||
<text class="cd-block">{{ getSaleCountdown(sale).h }}</text>
|
||||
<text class="cd-sep">:</text>
|
||||
<text class="cd-block">{{ getSaleCountdown(sale).m }}</text>
|
||||
<text class="cd-sep">:</text>
|
||||
<text class="cd-block">{{ getSaleCountdown(sale).s }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Card body -->
|
||||
<view class="card-body">
|
||||
<text class="card-title">{{ sale.title }}</text>
|
||||
<text class="card-type-name">{{ sale.cardType.name }}</text>
|
||||
|
||||
<!-- Price area -->
|
||||
<view class="price-area">
|
||||
<view class="flash-price-row">
|
||||
<text class="flash-currency">¥</text>
|
||||
<text class="flash-price">{{ formatPrice(sale.flashPrice) }}</text>
|
||||
</view>
|
||||
<text class="original-price">¥{{ formatPrice(sale.originalPrice) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Stock progress -->
|
||||
<view class="stock-area">
|
||||
<view class="stock-bar">
|
||||
<view
|
||||
class="stock-fill"
|
||||
:class="{ 'stock-fill--hot': getStockRatio(sale.soldCount, sale.totalStock) > 0.6 }"
|
||||
:style="{ width: stockPercent(sale) }"
|
||||
/>
|
||||
</view>
|
||||
<text class="stock-text">
|
||||
{{ sale.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `剩 ${sale.remainingStock}/${sale.totalStock}` }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { FlashSalePhase } from '@mp-pilates/shared'
|
||||
import type { FlashSaleListItem } from '@mp-pilates/shared'
|
||||
import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../utils/format'
|
||||
import { get } from '../utils/request'
|
||||
|
||||
const flashSales = ref<FlashSaleListItem[]>([])
|
||||
const tick = ref(0)
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
const hasOngoing = computed(() =>
|
||||
flashSales.value.some((s) => s.phase === FlashSalePhase.ONGOING),
|
||||
)
|
||||
|
||||
async function fetchFlashSales() {
|
||||
try {
|
||||
const data = await get<FlashSaleListItem[]>('/flash-sales')
|
||||
flashSales.value = [...data]
|
||||
} catch {
|
||||
flashSales.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// Expose for parent page refresh
|
||||
defineExpose({ fetchFlashSales })
|
||||
|
||||
function phaseLabel(phase: FlashSalePhase): string {
|
||||
return getFlashSalePhaseLabel(phase)
|
||||
}
|
||||
|
||||
function cardPhaseClass(phase: FlashSalePhase): string {
|
||||
if (phase === FlashSalePhase.ONGOING) return 'card--ongoing'
|
||||
if (phase === FlashSalePhase.UPCOMING) return 'card--upcoming'
|
||||
if (phase === FlashSalePhase.SOLD_OUT) return 'card--soldout'
|
||||
return 'card--ended'
|
||||
}
|
||||
|
||||
function badgeClass(phase: FlashSalePhase): string {
|
||||
if (phase === FlashSalePhase.ONGOING) return 'badge--ongoing'
|
||||
if (phase === FlashSalePhase.UPCOMING) return 'badge--upcoming'
|
||||
return 'badge--inactive'
|
||||
}
|
||||
|
||||
function stockPercent(sale: FlashSaleListItem): string {
|
||||
return getStockPercent(sale.soldCount, sale.totalStock)
|
||||
}
|
||||
|
||||
function getSaleCountdown(sale: FlashSaleListItem) {
|
||||
void tick.value
|
||||
const target = sale.phase === FlashSalePhase.UPCOMING ? sale.startTime : sale.endTime
|
||||
return getCountdownParts(target)
|
||||
}
|
||||
|
||||
function goToDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pages/flash-sale/detail?id=${id}` })
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchFlashSales()
|
||||
timer = setInterval(() => {
|
||||
tick.value++
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flash-sale-section {
|
||||
background: #fff;
|
||||
margin: 16rpx 24rpx 0;
|
||||
padding-bottom: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── Section header ── */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx 16rpx;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.flash-icon-wrap {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(135deg, #D4A59A, #C08B7E);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* CSS-drawn clock icon */
|
||||
.flash-icon-clock {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border: 3rpx solid #fff;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2rpx;
|
||||
height: 9rpx;
|
||||
background: #fff;
|
||||
transform-origin: bottom center;
|
||||
transform: translate(-50%, -100%) rotate(0deg);
|
||||
border-radius: 1rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2rpx;
|
||||
height: 7rpx;
|
||||
background: #fff;
|
||||
transform-origin: bottom center;
|
||||
transform: translate(-50%, -100%) rotate(90deg);
|
||||
border-radius: 1rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.live-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
background: #C08B7E;
|
||||
animation: pulse 1.5s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.8); }
|
||||
}
|
||||
|
||||
/* ── Horizontal scroll ── */
|
||||
.flash-scroll {
|
||||
padding-left: 32rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.flash-card-list {
|
||||
display: inline-flex;
|
||||
gap: 20rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
|
||||
/* ── Flash card ── */
|
||||
.flash-card {
|
||||
width: 340rpx;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4rpx 20rpx rgba(192, 139, 126, 0.18);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.card--ongoing { box-shadow: 0 6rpx 28rpx rgba(192, 139, 126, 0.28); }
|
||||
.card--upcoming { opacity: 0.95; }
|
||||
.card--soldout { opacity: 0.7; }
|
||||
.card--ended { opacity: 0.5; }
|
||||
|
||||
/* Card top gradient — warm blush tones */
|
||||
.card-top {
|
||||
padding: 20rpx 20rpx 16rpx;
|
||||
background: linear-gradient(135deg, #D4A59A 0%, #C9948A 40%, #B5836E 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.card--upcoming .card-top {
|
||||
background: linear-gradient(135deg, #8FA89A 0%, #7BA5A0 100%);
|
||||
}
|
||||
|
||||
.card--soldout .card-top,
|
||||
.card--ended .card-top {
|
||||
background: linear-gradient(135deg, #C4BAB0, #AEA49A);
|
||||
}
|
||||
|
||||
/* Phase badge */
|
||||
.phase-badge {
|
||||
align-self: flex-start;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.badge--ongoing { background: rgba(255, 255, 255, 0.3); }
|
||||
.badge--upcoming { background: rgba(255, 255, 255, 0.25); }
|
||||
.badge--inactive { background: rgba(0, 0, 0, 0.1); }
|
||||
|
||||
.phase-badge-text {
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Countdown */
|
||||
.countdown-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.countdown-blocks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.cd-block {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
padding: 4rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
font-family: 'DIN Alternate', monospace;
|
||||
min-width: 36rpx;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.cd-sep {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Card body */
|
||||
.card-body {
|
||||
padding: 20rpx;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $text-primary;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-type-name {
|
||||
font-size: 22rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
/* Price area */
|
||||
.price-area {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12rpx;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.flash-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.flash-currency {
|
||||
font-size: 22rpx;
|
||||
font-weight: 700;
|
||||
color: #B5725E;
|
||||
}
|
||||
|
||||
.flash-price {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #B5725E;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 22rpx;
|
||||
color: #ccc;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* Stock area */
|
||||
.stock-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.stock-bar {
|
||||
height: 10rpx;
|
||||
background: #f5f0ed;
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stock-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #D4A59A, #C08B7E);
|
||||
border-radius: 5rpx;
|
||||
transition: width 0.3s;
|
||||
|
||||
&--hot {
|
||||
animation: stockPulse 2s ease infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stockPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.stock-text {
|
||||
font-size: 20rpx;
|
||||
color: $text-hint;
|
||||
}
|
||||
</style>
|
||||
@@ -40,28 +40,38 @@ interface MenuItem {
|
||||
path?: string
|
||||
isAdmin?: boolean
|
||||
badge?: string
|
||||
action?: 'clear' | 'about'
|
||||
action?: 'clear'
|
||||
requireAuth?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
isAdmin: boolean
|
||||
requireAuth?: boolean
|
||||
activeMembershipCount?: number
|
||||
upcomingBookingCount?: number
|
||||
inviteShareEligible?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'clear-cache'): void
|
||||
(e: 'about'): void
|
||||
(e: 'require-login'): void
|
||||
}>()
|
||||
|
||||
const menuItems = computed<MenuItem[]>(() => {
|
||||
const membershipBadge = props.activeMembershipCount && props.activeMembershipCount > 0
|
||||
? `${props.activeMembershipCount}张`
|
||||
: undefined
|
||||
const bookingBadge = props.upcomingBookingCount && props.upcomingBookingCount > 0
|
||||
? `${props.upcomingBookingCount}`
|
||||
: undefined
|
||||
|
||||
const items: MenuItem[] = [
|
||||
{
|
||||
key: 'membership',
|
||||
type: 'item',
|
||||
title: '我的会员卡',
|
||||
path: '/pages/profile/membership',
|
||||
badge: membershipBadge,
|
||||
requireAuth: true,
|
||||
},
|
||||
{
|
||||
@@ -69,8 +79,28 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
type: 'item',
|
||||
title: '我的预约',
|
||||
path: '/pages/profile/bookings',
|
||||
badge: bookingBadge,
|
||||
requireAuth: true,
|
||||
},
|
||||
...(props.isAdmin
|
||||
? [{
|
||||
key: 'teaching-schedule',
|
||||
type: 'item' as const,
|
||||
title: '我的课表',
|
||||
path: '/pages/profile/teaching-schedule',
|
||||
requireAuth: true,
|
||||
}]
|
||||
: []),
|
||||
// 临时隐藏邀请好友入口,后续恢复时直接取消这段注释即可。
|
||||
// ...(props.inviteShareEligible
|
||||
// ? [{
|
||||
// key: 'invite',
|
||||
// type: 'item' as const,
|
||||
// title: '邀请好友',
|
||||
// path: '/pages/profile/invite',
|
||||
// requireAuth: true,
|
||||
// }]
|
||||
// : []),
|
||||
{
|
||||
key: 'info',
|
||||
type: 'item',
|
||||
@@ -88,12 +118,6 @@ const menuItems = computed<MenuItem[]>(() => {
|
||||
title: '清除缓存',
|
||||
action: 'clear',
|
||||
},
|
||||
{
|
||||
key: 'about',
|
||||
type: 'item',
|
||||
title: '关于我们',
|
||||
action: 'about',
|
||||
},
|
||||
]
|
||||
|
||||
if (props.isAdmin) {
|
||||
@@ -118,8 +142,6 @@ function handleTap(item: MenuItem) {
|
||||
}
|
||||
if (item.action === 'clear') {
|
||||
emit('clear-cache')
|
||||
} else if (item.action === 'about') {
|
||||
emit('about')
|
||||
} else if (item.path) {
|
||||
uni.navigateTo({ url: item.path })
|
||||
}
|
||||
@@ -224,6 +246,57 @@ function handleTap(item: MenuItem) {
|
||||
}
|
||||
}
|
||||
|
||||
&--teaching-schedule {
|
||||
background: rgba(93, 140, 138, 0.12);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 24rpx;
|
||||
height: 22rpx;
|
||||
border: 2.5rpx solid #476d72;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
transform: translate(-30%, -18%) rotate(45deg);
|
||||
border-top: 2.5rpx solid #476d72;
|
||||
border-left: 2.5rpx solid #476d72;
|
||||
}
|
||||
}
|
||||
|
||||
&--invite {
|
||||
background: rgba(255, 122, 69, 0.12);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border: 2.5rpx solid #ff7a45;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 12rpx;
|
||||
left: 14rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 16rpx 8rpx 0 -2rpx rgba(255, 122, 69, 0.95);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 22rpx;
|
||||
height: 12rpx;
|
||||
border: 2.5rpx solid #ff7a45;
|
||||
border-top: none;
|
||||
border-radius: 0 0 14rpx 14rpx;
|
||||
left: 17rpx;
|
||||
bottom: 13rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// 个人信息 — 人形(圆 + 肩弧)
|
||||
&--info {
|
||||
background: rgba($brand-color, 0.06);
|
||||
@@ -279,31 +352,6 @@ function handleTap(item: MenuItem) {
|
||||
}
|
||||
}
|
||||
|
||||
// 关于我们 — 圆形中心一个点 + 竖线(info 标记)
|
||||
&--about {
|
||||
background: rgba($text-hint, 0.08);
|
||||
&::before {
|
||||
content: '';
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
border: 2.5rpx solid $text-secondary;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2.5rpx;
|
||||
height: 8rpx;
|
||||
background: $text-secondary;
|
||||
border-radius: 1rpx;
|
||||
box-shadow: 0 -6rpx 0 0 $text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// 管理中心 — 齿轮(圆 + 四个刻度)
|
||||
&--admin {
|
||||
background: rgba($accent-color, 0.12);
|
||||
@@ -346,11 +394,17 @@ function handleTap(item: MenuItem) {
|
||||
|
||||
&__badge {
|
||||
font-size: 22rpx;
|
||||
color: #ffffff;
|
||||
background: $error-color;
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
color: #8f6759;
|
||||
background: linear-gradient(135deg, rgba(255, 248, 244, 0.98), rgba(241, 228, 220, 0.96));
|
||||
border-radius: 999rpx;
|
||||
padding: 9rpx 18rpx;
|
||||
margin-right: $spacing-sm;
|
||||
border: 1rpx solid rgba(192, 154, 137, 0.16);
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
|
||||
0 6rpx 16rpx rgba(143, 103, 89, 0.12);
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
|
||||
@@ -1,98 +1,54 @@
|
||||
<template>
|
||||
<view class="quick-entry">
|
||||
<!-- ① Not logged in -->
|
||||
<view v-if="!userStore.loggedIn" class="entry-card login-card" @tap="handleLogin">
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<view class="entry-icon-wrap login-icon">
|
||||
<view class="icon-user" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">欢迎来到工作室</text>
|
||||
<text class="entry-subtitle">登录后即可预约课程</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="entry-btn login-btn">
|
||||
<text class="entry-btn-text">微信登录</text>
|
||||
</view>
|
||||
<view v-if="!userStore.loggedIn" class="entry-pill pill-login" @tap="handleLogin">
|
||||
<view class="pill-dot dot-login" />
|
||||
<text class="pill-label">欢迎来到工作室</text>
|
||||
<view class="pill-action action-login">
|
||||
<text class="pill-action-text">微信登录</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ② Logged in, no memberships at all → new user -->
|
||||
<!-- ② Logged in, no memberships → new user -->
|
||||
<view
|
||||
v-else-if="userStore.loggedIn && userStore.memberships.length === 0"
|
||||
class="entry-card trial-card"
|
||||
class="entry-pill pill-trial"
|
||||
@tap="handleTrialEntry"
|
||||
>
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<view class="entry-icon-wrap trial-icon">
|
||||
<view class="icon-star" />
|
||||
<view class="pill-tag tag-trial">体验</view>
|
||||
<text class="pill-label">首次体验专属课程</text>
|
||||
<view class="pill-action action-trial">
|
||||
<text class="pill-action-text">预约体验课</text>
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">初次体验</text>
|
||||
<text class="entry-subtitle">专属体验课,了解普拉提</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="entry-btn trial-btn">
|
||||
<text class="entry-btn-text">预约体验课</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-badge trial-badge">新会员专享</view>
|
||||
</view>
|
||||
|
||||
<!-- ③ Has valid active card + running low warning -->
|
||||
<!-- ③ Has valid active card -->
|
||||
<template v-else-if="userStore.hasValidMembership">
|
||||
<view class="entry-card active-card" @tap="handleBooking">
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<view class="entry-icon-wrap active-icon">
|
||||
<view class="icon-clock" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">一键约课</text>
|
||||
<text class="entry-subtitle">{{ activeMembershipLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="entry-btn book-btn">
|
||||
<text class="entry-btn-text">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- Running low badge -->
|
||||
<view v-if="isRunningLow" class="card-badge low-badge">
|
||||
仅剩 {{ lowestRemainingTimes }} 次
|
||||
<view class="entry-pill pill-active" @tap="handleBooking">
|
||||
<view class="pill-dot dot-active" />
|
||||
<text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
|
||||
<view class="pill-action action-book">
|
||||
<text class="pill-action-text">约课</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Renew reminder if running low -->
|
||||
<view v-if="isRunningLow" class="renew-tip" @tap="scrollToCardShop">
|
||||
<view class="renew-tip-icon">
|
||||
<view class="icon-warning" />
|
||||
</view>
|
||||
<text class="renew-tip-text">课次即将用完,点击续卡保持练习节奏</text>
|
||||
<text class="renew-tip-action">续卡 ›</text>
|
||||
<!-- Running low: thin accent strip -->
|
||||
<view v-if="isRunningLow" class="renew-strip" @tap="scrollToCardShop">
|
||||
<text class="renew-strip-text">仅剩 {{ lowestRemainingTimes }} 次 · 续卡保持节奏</text>
|
||||
<text class="renew-strip-arrow">›</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- ④ Has memberships but none active → buy card -->
|
||||
<view
|
||||
v-else
|
||||
class="entry-card expired-card"
|
||||
class="entry-pill pill-expired"
|
||||
@tap="scrollToCardShop"
|
||||
>
|
||||
<view class="entry-content">
|
||||
<view class="entry-left">
|
||||
<view class="entry-icon-wrap expired-icon">
|
||||
<view class="icon-card" />
|
||||
</view>
|
||||
<view class="entry-text">
|
||||
<text class="entry-title">续费会员卡</text>
|
||||
<text class="entry-subtitle">您的卡已到期,续卡继续练习</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="entry-btn renew-btn">
|
||||
<text class="entry-btn-text">购买会员卡</text>
|
||||
</view>
|
||||
<view class="pill-dot dot-expired" />
|
||||
<text class="pill-label">会员卡已到期</text>
|
||||
<view class="pill-action action-renew">
|
||||
<text class="pill-action-text">续卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -102,6 +58,7 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { useUserStore } from '../stores/user'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { getErrorMessage } from '../utils/auth'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'scroll-to-card-shop'): void
|
||||
@@ -115,15 +72,14 @@ async function handleLogin() {
|
||||
loading.value = true
|
||||
try {
|
||||
await userStore.loginWithSetup()
|
||||
} catch {
|
||||
uni.showToast({ title: '登录失败,请重试', icon: 'none' })
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '登录失败,请重试'), icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleTrialEntry() {
|
||||
// Navigate to the first TRIAL card detail page
|
||||
uni.navigateTo({ url: '/pages/card/detail?trial=1' })
|
||||
}
|
||||
|
||||
@@ -135,7 +91,6 @@ function scrollToCardShop() {
|
||||
emit('scroll-to-card-shop')
|
||||
}
|
||||
|
||||
// Computed: label for the active membership
|
||||
const activeMembershipLabel = computed(() => {
|
||||
const active = userStore.activeMemberships
|
||||
if (!active.length) return ''
|
||||
@@ -150,7 +105,6 @@ const activeMembershipLabel = computed(() => {
|
||||
return `${cardName} · 剩余 ${daysLeft} 天`
|
||||
})
|
||||
|
||||
// Check if any TIMES card has ≤ 2 remaining
|
||||
const isRunningLow = computed(() => {
|
||||
return userStore.activeMemberships.some(
|
||||
(m) =>
|
||||
@@ -174,358 +128,159 @@ const lowestRemainingTimes = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.quick-entry {
|
||||
margin: 24rpx 24rpx 0;
|
||||
padding: 20rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.entry-card {
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
/* ── Pill base ── */
|
||||
.entry-pill {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
padding: 0 8rpx 0 24rpx;
|
||||
gap: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
|
||||
/* ── Pill variants ── */
|
||||
.pill-login {
|
||||
background: #1a1a2e;
|
||||
}
|
||||
|
||||
.trial-card {
|
||||
.pill-trial {
|
||||
background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
|
||||
}
|
||||
|
||||
.active-card {
|
||||
background: linear-gradient(135deg, #2a3a4a 0%, #1a2a3a 100%);
|
||||
.pill-active {
|
||||
background: #ffffff;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.expired-card {
|
||||
background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
|
||||
.pill-expired {
|
||||
background: #f5f5f5;
|
||||
border: 1rpx solid rgba(0, 0, 0, 0.04);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.entry-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.entry-icon-wrap {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-icon {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.trial-icon {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.active-icon {
|
||||
background: rgba(168, 196, 206, 0.25);
|
||||
}
|
||||
|
||||
.expired-icon {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
/* ── Icon shapes (pure CSS) ── */
|
||||
|
||||
/* User icon: head + shoulders */
|
||||
.icon-user {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 28rpx;
|
||||
/* ── Status dot ── */
|
||||
.pill-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 14rpx 14rpx 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Star icon - diamond shape */
|
||||
.icon-star {
|
||||
position: relative;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffd700;
|
||||
}
|
||||
}
|
||||
|
||||
/* Clock icon - circle with dot */
|
||||
.icon-clock {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
border: 3rpx solid #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Card icon */
|
||||
.icon-card {
|
||||
position: relative;
|
||||
width: 36rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 3rpx solid #fff;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 2rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.dot-login {
|
||||
background: $primary-color;
|
||||
box-shadow: 0 0 8rpx rgba($primary-color, 0.6);
|
||||
}
|
||||
|
||||
/* 闪电 icon — 更有能量感 */
|
||||
.icon-warning {
|
||||
position: relative;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(-15deg);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8rpx solid transparent;
|
||||
border-right: 8rpx solid transparent;
|
||||
border-bottom: 18rpx solid #ffffff;
|
||||
.dot-active {
|
||||
background: #34c759;
|
||||
box-shadow: 0 0 8rpx rgba(52, 199, 89, 0.5);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 2rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10rpx;
|
||||
height: 3rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
.dot-expired {
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.entry-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
display: block;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
margin-bottom: 8rpx;
|
||||
/* ── Tag (trial only) ── */
|
||||
.pill-tag {
|
||||
font-size: 20rpx;
|
||||
font-weight: 700;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.entry-subtitle {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
line-height: 1.4;
|
||||
.tag-trial {
|
||||
background: rgba(255, 215, 0, 0.25);
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.entry-btn {
|
||||
/* ── Label text ── */
|
||||
.pill-label {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.pill-label-active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.pill-expired .pill-label {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ── Action button ── */
|
||||
.pill-action {
|
||||
flex-shrink: 0;
|
||||
padding: 18rpx 36rpx;
|
||||
border-radius: 40rpx;
|
||||
height: 60rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-btn-text {
|
||||
font-size: 28rpx;
|
||||
.pill-action-text {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.login-btn,
|
||||
.trial-btn,
|
||||
.book-btn {
|
||||
.action-login {
|
||||
background: $primary-color;
|
||||
.pill-action-text { color: #1a1a2e; }
|
||||
}
|
||||
|
||||
.renew-btn {
|
||||
background: #666;
|
||||
.action-trial {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
.pill-action-text { color: #ffd700; }
|
||||
}
|
||||
|
||||
.login-btn .entry-btn-text,
|
||||
.trial-btn .entry-btn-text,
|
||||
.book-btn .entry-btn-text,
|
||||
.renew-btn .entry-btn-text {
|
||||
color: #1a1a2e;
|
||||
.action-book {
|
||||
background: #1a1a2e;
|
||||
.pill-action-text { color: #fff; }
|
||||
}
|
||||
|
||||
/* Corner badge */
|
||||
.card-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 8rpx 20rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 0 16rpx 0 16rpx;
|
||||
.action-renew {
|
||||
background: #e0e0e0;
|
||||
.pill-action-text { color: #555; }
|
||||
}
|
||||
|
||||
.trial-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a2e;
|
||||
}
|
||||
|
||||
.low-badge {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
|
||||
}
|
||||
|
||||
/* Renew tip bar — 充满能量的激励配色 */
|
||||
.renew-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
padding: 22rpx 28rpx;
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 60%, #FFAA5C 100%);
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
/* 右上角光晕装饰 */
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: -20rpx;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 底部微光 */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.renew-tip-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
/* ── Renew strip (running low) ── */
|
||||
.renew-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
backdrop-filter: blur(4rpx);
|
||||
gap: 8rpx;
|
||||
margin-top: 12rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B35, #FF8E53);
|
||||
border-radius: 24rpx;
|
||||
}
|
||||
|
||||
.renew-tip-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
line-height: 1.5;
|
||||
.renew-strip-text {
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
|
||||
color: #fff;
|
||||
letter-spacing: 0.5rpx;
|
||||
}
|
||||
|
||||
.renew-tip-action {
|
||||
font-size: 26rpx;
|
||||
color: #ffffff;
|
||||
.renew-strip-arrow {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
letter-spacing: 1rpx;
|
||||
/* 箭头增强感 */
|
||||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
<!-- OPEN + booked by me -->
|
||||
<template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
|
||||
<view class="action-badge badge-booked">
|
||||
<text>已预约</text>
|
||||
<text>{{ myBookingLabel }}</text>
|
||||
</view>
|
||||
<view class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
|
||||
<text>取消</text>
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { TimeSlotWithBookingStatus } from '@mp-pilates/shared'
|
||||
import { TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import { BookingStatus, TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import { computed } from 'vue'
|
||||
import { isSlotPast } from '../utils/format'
|
||||
|
||||
@@ -120,6 +120,12 @@ const durationMin = computed(() => {
|
||||
return (eh * 60 + em) - (sh * 60 + sm)
|
||||
})
|
||||
|
||||
const myBookingLabel = computed(() => (
|
||||
props.timeSlot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
|
||||
? '已预约待确认'
|
||||
: '已预约'
|
||||
))
|
||||
|
||||
const capacityLabel = computed(() => {
|
||||
const { bookedCount, capacity, status } = props.timeSlot
|
||||
if (status === TimeSlotStatus.CLOSED) return '已关闭'
|
||||
@@ -154,6 +160,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
margin: 0 24rpx 20rpx;
|
||||
min-height: 220rpx;
|
||||
transition: all 0.2s ease;
|
||||
filter: drop-shadow(0 16rpx 28rpx rgba(120, 91, 79, 0.08));
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
@@ -210,7 +217,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
.time-main {
|
||||
font-size: 40rpx;
|
||||
font-weight: 800;
|
||||
color: #1a1a2e;
|
||||
color: #3a2e2a;
|
||||
line-height: 1;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
@@ -218,7 +225,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
.time-label {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
color: #a18a82;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -242,7 +249,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
background: #ccb7ae;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -251,8 +258,8 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
height: 2rpx;
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
#d0d0d0 0,
|
||||
#d0d0d0 8rpx,
|
||||
#dccbc2 0,
|
||||
#dccbc2 8rpx,
|
||||
transparent 8rpx,
|
||||
transparent 16rpx
|
||||
);
|
||||
@@ -263,7 +270,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($primary-color, 0.1);
|
||||
background: rgba(185, 143, 125, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -277,7 +284,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
.duration-text {
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
color: #a18a82;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -289,34 +296,34 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
font-size: 20rpx;
|
||||
|
||||
&.cap-open {
|
||||
background: rgba(76, 175, 80, 0.08);
|
||||
background: rgba(101, 163, 126, 0.12);
|
||||
|
||||
.capacity-text {
|
||||
color: #4caf50;
|
||||
color: #5d9472;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-almost {
|
||||
background: rgba(245, 158, 11, 0.08);
|
||||
background: rgba(214, 161, 92, 0.14);
|
||||
|
||||
.capacity-text {
|
||||
color: #f59e0b;
|
||||
color: #b98543;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-full {
|
||||
background: rgba(239, 68, 68, 0.08);
|
||||
background: rgba(216, 91, 87, 0.12);
|
||||
|
||||
.capacity-text {
|
||||
color: #ef4444;
|
||||
color: #c96763;
|
||||
}
|
||||
}
|
||||
|
||||
&.cap-closed {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
|
||||
.capacity-text {
|
||||
color: #999;
|
||||
color: #9d8f89;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -354,7 +361,7 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
.course-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
color: #3a2e2a;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
@@ -379,9 +386,9 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
}
|
||||
|
||||
.btn-book {
|
||||
background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
|
||||
background: linear-gradient(135deg, #d5b9ab 0%, #b98f7d 100%);
|
||||
color: #fffaf7;
|
||||
box-shadow: 0 8rpx 18rpx rgba(143, 103, 89, 0.24);
|
||||
min-width: 120rpx;
|
||||
height: 60rpx;
|
||||
transition: all 0.15s;
|
||||
@@ -393,30 +400,30 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
|
||||
}
|
||||
|
||||
.badge-booked {
|
||||
background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
|
||||
color: $primary-dark;
|
||||
background: linear-gradient(135deg, rgba(247, 240, 235, 0.96), rgba(236, 225, 217, 0.98));
|
||||
color: #8f6759;
|
||||
}
|
||||
|
||||
.badge-expired {
|
||||
background: #f0f0f0;
|
||||
color: #999;
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
color: #9d8f89;
|
||||
}
|
||||
|
||||
.badge-full {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #ef4444;
|
||||
background: rgba(216, 91, 87, 0.12);
|
||||
color: #c96763;
|
||||
}
|
||||
|
||||
.badge-closed {
|
||||
background: #f0f0f0;
|
||||
color: #bbb;
|
||||
background: rgba(111, 96, 91, 0.08);
|
||||
color: #b5a8a1;
|
||||
}
|
||||
|
||||
.cancel-link {
|
||||
font-size: 22rpx;
|
||||
color: #ef4444;
|
||||
color: #c96763;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(239, 68, 68, 0.3);
|
||||
text-decoration-color: rgba(201, 103, 99, 0.28);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,60 @@
|
||||
<template>
|
||||
<view class="studio-info">
|
||||
<!-- Horizontal photo strip -->
|
||||
<scroll-view v-if="studioInfo?.photos?.length" scroll-x class="photo-strip" :show-scrollbar="false">
|
||||
<view class="photo-strip-inner">
|
||||
<image v-for="(photo, idx) in studioInfo.photos" :key="idx" class="strip-photo" :src="photo" mode="aspectFill"
|
||||
@tap="previewPhoto(idx)" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- Address + Chat row -->
|
||||
<view class="location-row">
|
||||
<view class="location-left" @tap="handleAddressTap">
|
||||
<view class="location-icon" />
|
||||
<view class="location-content">
|
||||
<text class="location-label">场馆地址</text>
|
||||
<text class="location-text">
|
||||
{{ studioInfo?.address || '深圳市宝安区西乡街道财富港 D 座 1203D' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="chat-btn" open-type="contact">
|
||||
<view class="chat-icon" />
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- Horizontal gallery -->
|
||||
<view class="gallery-block">
|
||||
<scroll-view scroll-x class="gallery-scroll" :show-scrollbar="false" enhanced>
|
||||
<view class="gallery-track">
|
||||
<view
|
||||
v-for="(photo, idx) in galleryPhotos"
|
||||
:key="photo"
|
||||
class="gallery-item"
|
||||
@tap="previewPhoto(idx)"
|
||||
>
|
||||
<image class="gallery-image" :src="photo" mode="aspectFill" />
|
||||
<view class="gallery-overlay" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { StudioConfig } from '@mp-pilates/shared'
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
DEFAULT_STUDIO_GALLERY_PHOTOS,
|
||||
type StudioConfig,
|
||||
} from '@mp-pilates/shared'
|
||||
|
||||
const props = defineProps<{
|
||||
studioInfo: StudioConfig | null
|
||||
}>()
|
||||
|
||||
const galleryPhotos = computed(() => {
|
||||
const photos = props.studioInfo?.photos?.filter(Boolean) ?? []
|
||||
return photos.length ? photos : [...DEFAULT_STUDIO_GALLERY_PHOTOS]
|
||||
})
|
||||
|
||||
function previewPhoto(index: number) {
|
||||
if (!props.studioInfo?.photos?.length) return
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: props.studioInfo.photos,
|
||||
urls: galleryPhotos.value,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -69,28 +89,11 @@ function copyAddress() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.studio-info {
|
||||
margin: 16rpx 24rpx 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* ── Photo strip ── */
|
||||
.photo-strip {
|
||||
width: 100%;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.photo-strip-inner {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.strip-photo {
|
||||
width: 240rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
flex-shrink: 0;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── Location row ── */
|
||||
@@ -98,7 +101,7 @@ function copyAddress() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 32rpx 28rpx;
|
||||
padding: 28rpx 32rpx 24rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
@@ -110,11 +113,64 @@ function copyAddress() {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.location-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.location-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #b39a92;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
color: #5f5955;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Gallery ── */
|
||||
.gallery-block {
|
||||
padding: 6rpx 0 28rpx;
|
||||
}
|
||||
|
||||
.gallery-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-track {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
padding: 0 32rpx;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
width: 192rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #eadfd8 0%, #d5c0b4 100%);
|
||||
box-shadow: 0 8rpx 18rpx rgba(124, 95, 82, 0.1);
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(38, 28, 24, 0.2) 100%),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);
|
||||
}
|
||||
|
||||
/* ── Icons ── */
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<view class="time-period-filter">
|
||||
<view class="time-period-filter" :class="`time-period-filter--${variant}`">
|
||||
<view
|
||||
v-for="tab in tabs"
|
||||
:key="tab.key ?? 'all'"
|
||||
class="tab-item"
|
||||
:class="{ active: modelValue === tab.key }"
|
||||
:class="[`tab-item--${variant}`, { active: modelValue === tab.key }]"
|
||||
@tap="handleChange(tab.key)"
|
||||
>
|
||||
<text class="tab-label">{{ tab.label }}</text>
|
||||
@@ -25,14 +25,17 @@ interface Tab {
|
||||
|
||||
interface Props {
|
||||
modelValue: PeriodKey
|
||||
variant?: 'default' | 'booking'
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
change: [period: PeriodKey]
|
||||
'update:modelValue': [period: PeriodKey]
|
||||
}>()
|
||||
|
||||
const variant = computed(() => props.variant ?? 'default')
|
||||
|
||||
const tabs = computed<Tab[]>(() => [
|
||||
{ key: null, label: '全部' },
|
||||
...Object.entries(TIME_PERIODS).map(([key, val]) => ({
|
||||
@@ -55,6 +58,11 @@ function handleChange(key: PeriodKey) {
|
||||
padding: 0 24rpx;
|
||||
border-bottom: 1rpx solid $primary-border;
|
||||
|
||||
&.time-period-filter--booking {
|
||||
background: rgba(252, 250, 248, 0.96);
|
||||
border-bottom-color: rgba(192, 154, 137, 0.12);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -87,6 +95,26 @@ function handleChange(key: PeriodKey) {
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.tab-item--booking {
|
||||
.tab-label {
|
||||
color: #9d8b83;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-label {
|
||||
color: #8f6759;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 48rpx;
|
||||
height: 5rpx;
|
||||
background: linear-gradient(90deg, #c8a899, #a87d6c);
|
||||
border-radius: 999rpx;
|
||||
box-shadow: 0 4rpx 10rpx rgba(168, 125, 108, 0.18);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
v-for="booking in displayedBookings"
|
||||
:key="booking.id"
|
||||
class="booking-card"
|
||||
@tap="goToBookingDetail(booking.id)"
|
||||
>
|
||||
<!-- Date column -->
|
||||
<view class="date-col">
|
||||
@@ -72,6 +73,7 @@ function formatTime(timeStr: string): string {
|
||||
|
||||
function statusLabel(status: BookingStatus): string {
|
||||
const map: Record<BookingStatus, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: '待确认',
|
||||
[BookingStatus.CONFIRMED]: '已确认',
|
||||
[BookingStatus.CANCELLED]: '已取消',
|
||||
[BookingStatus.COMPLETED]: '已完成',
|
||||
@@ -81,6 +83,7 @@ function statusLabel(status: BookingStatus): string {
|
||||
}
|
||||
|
||||
function statusDotClass(status: BookingStatus): string {
|
||||
if (status === BookingStatus.PENDING_CONFIRMATION) return 'dot--pending'
|
||||
if (status === BookingStatus.CONFIRMED) return 'dot--confirmed'
|
||||
if (status === BookingStatus.COMPLETED) return 'dot--completed'
|
||||
if (status === BookingStatus.CANCELLED) return 'dot--cancelled'
|
||||
@@ -88,6 +91,7 @@ function statusDotClass(status: BookingStatus): string {
|
||||
}
|
||||
|
||||
function statusTextClass(status: BookingStatus): string {
|
||||
if (status === BookingStatus.PENDING_CONFIRMATION) return 'text--pending'
|
||||
if (status === BookingStatus.CONFIRMED) return 'text--confirmed'
|
||||
if (status === BookingStatus.COMPLETED) return 'text--completed'
|
||||
if (status === BookingStatus.CANCELLED) return 'text--cancelled'
|
||||
@@ -97,6 +101,10 @@ function statusTextClass(status: BookingStatus): string {
|
||||
function goToBookings() {
|
||||
uni.navigateTo({ url: '/pages/profile/bookings' })
|
||||
}
|
||||
|
||||
function goToBookingDetail(id: string) {
|
||||
uni.navigateTo({ url: `/pages/booking/detail?id=${id}` })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -207,6 +215,7 @@ function goToBookings() {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot--pending { background: #f39c12; }
|
||||
.dot--confirmed { background: #27ae60; }
|
||||
.dot--completed { background: #3498db; }
|
||||
.dot--cancelled { background: #e74c3c; }
|
||||
@@ -217,6 +226,7 @@ function goToBookings() {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.text--pending { color: #f39c12; }
|
||||
.text--confirmed { color: #27ae60; }
|
||||
.text--completed { color: #3498db; }
|
||||
.text--cancelled { color: #e74c3c; }
|
||||
|
||||
@@ -25,14 +25,16 @@
|
||||
mode="aspectFill"
|
||||
@error="onAvatarError"
|
||||
/>
|
||||
<!-- VIP badge hidden for now -->
|
||||
<!-- <view class="user-card__vip-badge" v-if="vipLevel">
|
||||
<text class="user-card__vip-text">{{ vipLevel }}</text>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="user-card__info">
|
||||
<view class="user-card__name-row">
|
||||
<text class="user-card__nickname">{{ user!.nickname }}</text>
|
||||
<view v-if="hasMembership" class="user-card__member-badge">
|
||||
<view class="user-card__member-icon">
|
||||
<text class="user-card__member-letter">C</text>
|
||||
</view>
|
||||
<text class="user-card__member-label">CLUB</text>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="maskedPhone" class="user-card__phone">{{ maskedPhone }}</text>
|
||||
</view>
|
||||
@@ -75,7 +77,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { UserProfileResponse, UserStatsResponse, MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { MembershipStatus } from '@mp-pilates/shared'
|
||||
import { CardTypeCategory, MembershipStatus } from '@mp-pilates/shared'
|
||||
|
||||
const props = defineProps<{
|
||||
loggedIn: boolean
|
||||
@@ -117,24 +119,25 @@ const maskedPhone = computed(() => {
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
})
|
||||
|
||||
// Derive VIP level from active memberships count
|
||||
const activeMemberships = computed(() =>
|
||||
props.memberships?.filter((m) => m.status === MembershipStatus.ACTIVE) ?? [],
|
||||
)
|
||||
|
||||
const vipLevel = computed(() => {
|
||||
const count = activeMemberships.value.length
|
||||
if (count >= 3) return 'VIP3'
|
||||
if (count >= 2) return 'VIP2'
|
||||
if (count >= 1) return 'VIP1'
|
||||
return null
|
||||
})
|
||||
const activeMembershipCount = computed(
|
||||
() => props.user?.activeMembershipCount ?? activeMemberships.value.length,
|
||||
)
|
||||
|
||||
const hasMembership = computed(() => activeMembershipCount.value > 0)
|
||||
|
||||
function toSafeCount(value: number | null | undefined): number {
|
||||
return typeof value === 'number' && Number.isFinite(value) ? value : 0
|
||||
}
|
||||
|
||||
// Sum remaining sessions from all active time-based memberships
|
||||
const remainingSessions = computed(() =>
|
||||
activeMemberships.value
|
||||
.filter((m) => m.cardType.type === 'TIMES')
|
||||
.reduce((sum, m) => sum + m.remainingCount, 0),
|
||||
.filter((m) => m.cardType.type === CardTypeCategory.TIMES)
|
||||
.reduce((sum, m) => sum + toSafeCount(m.remainingTimes), 0),
|
||||
)
|
||||
|
||||
function onAvatarError() {
|
||||
@@ -220,24 +223,6 @@ function handleLogin() {
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
&__vip-badge {
|
||||
position: absolute;
|
||||
bottom: -6rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 12rpx;
|
||||
border: 2rpx solid #ffffff;
|
||||
}
|
||||
|
||||
&__vip-text {
|
||||
font-size: 18rpx;
|
||||
font-weight: 700;
|
||||
color: #7c2d12;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
@@ -257,6 +242,59 @@ function handleLogin() {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&__member-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
padding: 6rpx 14rpx 6rpx 8rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(135deg, rgba(255, 249, 245, 0.98), rgba(242, 229, 221, 0.96));
|
||||
border: 1rpx solid rgba(192, 154, 137, 0.18);
|
||||
box-shadow:
|
||||
inset 0 1rpx 0 rgba(255, 255, 255, 0.9),
|
||||
0 8rpx 20rpx rgba(143, 103, 89, 0.14);
|
||||
}
|
||||
|
||||
&__member-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: radial-gradient(circle at 30% 30%, #fffdfb 0%, #f2e2d8 40%, #c79d89 100%);
|
||||
box-shadow:
|
||||
inset 0 2rpx 4rpx rgba(255, 255, 255, 0.76),
|
||||
0 3rpx 8rpx rgba(143, 103, 89, 0.16);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3rpx;
|
||||
border-radius: 50%;
|
||||
border: 1.5rpx solid rgba(143, 103, 89, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
&__member-letter {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
color: #8f6759;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
&__member-label {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: #8f6759;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
&__phone {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "普拉提约课",
|
||||
"appid": "",
|
||||
"appid": "wx3e7a133d2305fa2c",
|
||||
"description": "普拉提工作室约课小程序",
|
||||
"versionName": "0.1.0",
|
||||
"versionCode": "100",
|
||||
"transformPx": false,
|
||||
"mp-weixin": {
|
||||
"appid": "",
|
||||
"appid": "wx3e7a133d2305fa2c",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
|
||||
@@ -45,12 +45,30 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/teaching-schedule",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/info",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/profile/invite",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/teacher/detail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/index",
|
||||
"style": {
|
||||
@@ -69,12 +87,6 @@
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/week-template",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/slot-adjust",
|
||||
"style": {
|
||||
@@ -104,6 +116,18 @@
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/admin/flash-sales",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/flash-sale/detail",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
@@ -188,6 +188,32 @@
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- Cover image upload -->
|
||||
<view class="modal-field modal-field--cover">
|
||||
<text class="modal-label">封面图</text>
|
||||
<view class="cover-upload-area">
|
||||
<view v-if="form.coverUrl" class="cover-preview-wrap">
|
||||
<image class="cover-preview-img" :src="form.coverUrl" mode="aspectFill" />
|
||||
<view class="cover-remove-btn" @tap="clearCover">
|
||||
<text class="cover-remove-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-else
|
||||
class="cover-upload-btn"
|
||||
:class="{ 'cover-upload-btn--loading': uploadingCover }"
|
||||
@tap="uploadCover"
|
||||
>
|
||||
<text v-if="uploadingCover" class="cover-upload-hint">上传中...</text>
|
||||
<template v-else>
|
||||
<text class="cover-upload-plus">+</text>
|
||||
<text class="cover-upload-hint">上传封面</text>
|
||||
</template>
|
||||
</view>
|
||||
<text class="cover-upload-tip">可选,建议 3:2 比例</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action buttons -->
|
||||
@@ -215,6 +241,7 @@ import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatPrice } from '../../utils/format'
|
||||
import { uploadStudioAsset } from '../../utils/studio-upload'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import type { CardType } from '@mp-pilates/shared'
|
||||
|
||||
@@ -229,6 +256,7 @@ const cardTypes = ref<CardType[]>([])
|
||||
const loading = ref(false)
|
||||
const showModal = ref(false)
|
||||
const submitting = ref(false)
|
||||
const uploadingCover = ref(false)
|
||||
const editTarget = ref<CardType | null>(null)
|
||||
|
||||
const typeOptions = [
|
||||
@@ -246,6 +274,7 @@ const defaultForm = () => ({
|
||||
durationDaysStr: '90',
|
||||
sortOrderStr: '0',
|
||||
description: '',
|
||||
coverUrl: '',
|
||||
})
|
||||
|
||||
const form = ref(defaultForm())
|
||||
@@ -282,6 +311,7 @@ function openEdit(ct: CardType) {
|
||||
durationDaysStr: String(ct.durationDays),
|
||||
sortOrderStr: String(ct.sortOrder),
|
||||
description: ct.description ?? '',
|
||||
coverUrl: ct.coverUrl ?? '',
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
@@ -349,6 +379,9 @@ async function submitForm() {
|
||||
if (form.value.description.trim()) {
|
||||
payload.description = form.value.description.trim()
|
||||
}
|
||||
if (form.value.coverUrl) {
|
||||
payload.coverUrl = form.value.coverUrl
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
@@ -431,6 +464,85 @@ function confirmDelete(ct: CardType) {
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Cover image upload ─────────────────────────────
|
||||
|
||||
async function uploadCover() {
|
||||
if (uploadingCover.value) return
|
||||
|
||||
try {
|
||||
const file = await chooseSingleImage()
|
||||
if (!file) return
|
||||
|
||||
uploadingCover.value = true
|
||||
const url = await uploadStudioAsset({
|
||||
adminStore,
|
||||
filePath: file.path,
|
||||
fileName: file.name,
|
||||
assetType: 'card-cover',
|
||||
})
|
||||
form.value.coverUrl = url
|
||||
uni.showToast({ title: '上传成功', icon: 'success' })
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : '上传失败'
|
||||
uni.showToast({ title: message, icon: 'none' })
|
||||
} finally {
|
||||
uploadingCover.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function clearCover() {
|
||||
form.value.coverUrl = ''
|
||||
}
|
||||
|
||||
interface PickedImage {
|
||||
readonly path: string
|
||||
readonly name: string
|
||||
}
|
||||
|
||||
function extractFileName(filePath: string): string {
|
||||
return filePath.split('/').pop() || `image_${Date.now()}.jpg`
|
||||
}
|
||||
|
||||
function chooseSingleImage(): Promise<PickedImage | null> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (result) => {
|
||||
const tempFilePaths = Array.isArray(result.tempFilePaths)
|
||||
? result.tempFilePaths
|
||||
: typeof result.tempFilePaths === 'string'
|
||||
? [result.tempFilePaths]
|
||||
: []
|
||||
const path = tempFilePaths[0]
|
||||
if (!path) {
|
||||
resolve(null)
|
||||
return
|
||||
}
|
||||
|
||||
const tempFiles = Array.isArray(result.tempFiles)
|
||||
? result.tempFiles
|
||||
: result.tempFiles
|
||||
? [result.tempFiles]
|
||||
: []
|
||||
const file = tempFiles[0] as { path?: string; tempFilePath?: string; name?: string } | undefined
|
||||
resolve({
|
||||
path,
|
||||
name: file?.name || extractFileName(file?.path || file?.tempFilePath || path),
|
||||
})
|
||||
},
|
||||
fail: (error) => {
|
||||
if ((error.errMsg || '').includes('cancel')) {
|
||||
resolve(null)
|
||||
return
|
||||
}
|
||||
reject(new Error(error.errMsg || '选择图片失败'))
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Helpers ─────────────────────────────────────────
|
||||
|
||||
function typeLabel(ct: CardType): string {
|
||||
@@ -522,16 +634,16 @@ onMounted(fetchCardTypes)
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
.header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
.header--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
.header--times { background: linear-gradient(90deg, #E8D5C4, #D4BFA8); }
|
||||
.header--duration { background: linear-gradient(90deg, #D8C8DC, #C4AECB); }
|
||||
.header--trial { background: linear-gradient(90deg, #C8D8D2, #A9C4BC); }
|
||||
|
||||
.ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }
|
||||
.ct-type-label { font-size: 22rpx; font-weight: 600; color: $brand-color; letter-spacing: 2rpx; }
|
||||
|
||||
.ct-status-tag { border-radius: 20rpx; padding: 4rpx 16rpx; }
|
||||
.tag--on { background: rgba(255,255,255,0.2); }
|
||||
.tag--off { background: rgba(0,0,0,0.2); }
|
||||
.ct-status-text { font-size: 20rpx; color: #ffffff; }
|
||||
.tag--on { background: rgba(74, 64, 53, 0.1); }
|
||||
.tag--off { background: rgba(74, 64, 53, 0.08); }
|
||||
.ct-status-text { font-size: 20rpx; color: $brand-color; }
|
||||
|
||||
.ct-body { padding: 24rpx; }
|
||||
|
||||
@@ -721,4 +833,82 @@ onMounted(fetchCardTypes)
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
|
||||
|
||||
/* ── Cover upload ───────────────────────── */
|
||||
.modal-field--cover {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cover-upload-area {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.cover-preview-wrap {
|
||||
position: relative;
|
||||
width: 300rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-preview-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-remove-btn {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cover-remove-icon {
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cover-upload-btn {
|
||||
width: 300rpx;
|
||||
height: 200rpx;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
background: #fafafa;
|
||||
|
||||
&:active { background: #f0f0f0; }
|
||||
&--loading { opacity: 0.6; pointer-events: none; }
|
||||
}
|
||||
|
||||
.cover-upload-plus {
|
||||
font-size: 48rpx;
|
||||
color: #bbb;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cover-upload-hint {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.cover-upload-tip {
|
||||
font-size: 20rpx;
|
||||
color: #bbb;
|
||||
}
|
||||
</style>
|
||||
|
||||
863
packages/app/src/pages/admin/flash-sales.vue
Normal file
863
packages/app/src/pages/admin/flash-sales.vue
Normal file
@@ -0,0 +1,863 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="秒杀管理" show-back />
|
||||
|
||||
<!-- Toolbar -->
|
||||
<view class="toolbar">
|
||||
<text class="toolbar-hint">共 {{ total }} 个秒杀活动</text>
|
||||
<view class="add-btn" @tap="openAdd">
|
||||
<text class="add-btn-text">+ 新建秒杀</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="pageLoading" class="skeleton-list">
|
||||
<view v-for="i in 3" :key="i" class="skeleton-item" />
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="!items.length" class="empty-state">
|
||||
<text class="empty-icon">◈</text>
|
||||
<text class="empty-text">暂无秒杀活动,点击右上角新建</text>
|
||||
</view>
|
||||
|
||||
<!-- Flash sale list -->
|
||||
<view v-else class="fs-list">
|
||||
<view
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="fs-card"
|
||||
>
|
||||
<!-- Header band -->
|
||||
<view class="fs-header" :class="headerStatusClass(item)">
|
||||
<view class="fs-header-left">
|
||||
<text class="fs-title">{{ item.title }}</text>
|
||||
</view>
|
||||
<view class="fs-status-tag" :class="phaseTagClass(item.phase)">
|
||||
<text class="fs-status-text">{{ phaseLabel(item.phase) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Body -->
|
||||
<view class="fs-body">
|
||||
<view class="fs-info-row">
|
||||
<text class="fs-card-type">关联卡种: {{ item.cardType.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="fs-price-row">
|
||||
<view class="fs-price-block">
|
||||
<text class="fs-price-label">秒杀价</text>
|
||||
<text class="fs-price-value flash">¥{{ formatPrice(item.flashPrice) }}</text>
|
||||
</view>
|
||||
<view class="fs-price-block">
|
||||
<text class="fs-price-label">原价</text>
|
||||
<text class="fs-price-value original">¥{{ formatPrice(item.originalPrice) }}</text>
|
||||
</view>
|
||||
<view class="fs-price-block">
|
||||
<text class="fs-price-label">库存</text>
|
||||
<text class="fs-price-value">{{ item.soldCount }}/{{ item.totalStock }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Stock progress bar -->
|
||||
<view class="fs-stock-bar">
|
||||
<view
|
||||
class="fs-stock-fill"
|
||||
:style="{ width: stockPercent(item) }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="fs-time-row">
|
||||
<text class="fs-time">{{ formatDateTime(item.startTime) }} — {{ formatDateTime(item.endTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Actions -->
|
||||
<view class="fs-actions">
|
||||
<view class="fs-action-btn edit-btn" @tap.stop="openEdit(item)">
|
||||
<text class="fs-action-text">编辑</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="item.status === 'DRAFT'"
|
||||
class="fs-action-btn activate-btn"
|
||||
@tap.stop="confirmActivate(item)"
|
||||
>
|
||||
<text class="fs-action-text">上线</text>
|
||||
</view>
|
||||
<view
|
||||
v-else-if="item.status === 'ACTIVE'"
|
||||
class="fs-action-btn end-btn"
|
||||
@tap.stop="confirmEnd(item)"
|
||||
>
|
||||
<text class="fs-action-text">结束</text>
|
||||
</view>
|
||||
<view
|
||||
v-if="item.soldCount === 0"
|
||||
class="fs-action-btn delete-btn"
|
||||
@tap.stop="confirmDelete(item)"
|
||||
>
|
||||
<text class="fs-action-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ──────── Add / Edit modal ──────── -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.stop="closeModal">
|
||||
<view class="modal-container" @tap.stop>
|
||||
<scroll-view scroll-y class="modal-scroll">
|
||||
<!-- Header -->
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">{{ editTarget ? '编辑秒杀' : '新建秒杀' }}</text>
|
||||
<view class="modal-close" @tap="closeModal">
|
||||
<text class="modal-close-icon">✕</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Form fields -->
|
||||
<view class="modal-body">
|
||||
<!-- Card type picker -->
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">关联卡种</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="cardTypeOptions"
|
||||
range-key="label"
|
||||
:value="form.cardTypeIdx"
|
||||
@change="onCardTypeChange"
|
||||
:disabled="!!editTarget"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ cardTypeOptions[form.cardTypeIdx]?.label || '请选择' }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">活动标题</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
v-model="form.title"
|
||||
placeholder="如:新春限时秒杀"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">原价(元)</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="digit"
|
||||
v-model="form.originalPriceStr"
|
||||
placeholder="展示划线价"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">秒杀价(元)</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="digit"
|
||||
v-model="form.flashPriceStr"
|
||||
placeholder="实际支付价格"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">库存数量</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="number"
|
||||
v-model="form.totalStockStr"
|
||||
placeholder="秒杀总量"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">开始时间</text>
|
||||
<view class="datetime-picker-group">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="form.startDate"
|
||||
@change="onStartDateChange"
|
||||
>
|
||||
<text class="datetime-text">{{ form.startDate || '选择日期' }}</text>
|
||||
</picker>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.startTimeStr"
|
||||
@change="onStartTimeChange"
|
||||
>
|
||||
<text class="datetime-text">{{ form.startTimeStr || '选择时间' }}</text>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">结束时间</text>
|
||||
<view class="datetime-picker-group">
|
||||
<picker
|
||||
mode="date"
|
||||
:value="form.endDate"
|
||||
@change="onEndDateChange"
|
||||
>
|
||||
<text class="datetime-text">{{ form.endDate || '选择日期' }}</text>
|
||||
</picker>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.endTimeStr"
|
||||
@change="onEndTimeChange"
|
||||
>
|
||||
<text class="datetime-text">{{ form.endTimeStr || '选择时间' }}</text>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">排序值</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="number"
|
||||
v-model="form.sortOrderStr"
|
||||
placeholder="越小越靠前"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-field modal-field--last">
|
||||
<text class="modal-label">活动说明</text>
|
||||
<textarea
|
||||
class="modal-textarea"
|
||||
v-model="form.description"
|
||||
placeholder="可选,向用户展示"
|
||||
placeholder-style="color:#bbb"
|
||||
:maxlength="500"
|
||||
auto-height
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<view class="modal-actions">
|
||||
<view class="modal-cancel" @tap="closeModal">
|
||||
<text class="modal-cancel-text">取消</text>
|
||||
</view>
|
||||
<view
|
||||
class="modal-confirm"
|
||||
:class="{ 'modal-confirm--loading': submitting }"
|
||||
@tap="submitForm"
|
||||
>
|
||||
<text class="modal-confirm-text">{{ submitting ? '保存中...' : '确认保存' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatPrice, formatDateTime, getFlashSalePhaseLabel, getStockPercent, formatDateLocal, formatTimeLocal } from '../../utils/format'
|
||||
import { FlashSaleStatus, FlashSalePhase } from '@mp-pilates/shared'
|
||||
import type { FlashSaleAdminItem, CardType } from '@mp-pilates/shared'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
// ─── Data ────────────────────────────────────────────
|
||||
const items = ref<FlashSaleAdminItem[]>([])
|
||||
const total = ref(0)
|
||||
const pageLoading = ref(false)
|
||||
const showModal = ref(false)
|
||||
const submitting = ref(false)
|
||||
const editTarget = ref<FlashSaleAdminItem | null>(null)
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
|
||||
const cardTypeOptions = computed(() =>
|
||||
cardTypes.value.map((ct) => ({
|
||||
label: `${ct.name}(¥${formatPrice(ct.price)})`,
|
||||
value: ct.id,
|
||||
})),
|
||||
)
|
||||
|
||||
const defaultForm = () => ({
|
||||
cardTypeIdx: 0,
|
||||
title: '',
|
||||
originalPriceStr: '',
|
||||
flashPriceStr: '',
|
||||
totalStockStr: '',
|
||||
startDate: '',
|
||||
startTimeStr: '',
|
||||
endDate: '',
|
||||
endTimeStr: '',
|
||||
sortOrderStr: '0',
|
||||
description: '',
|
||||
})
|
||||
|
||||
const form = ref(defaultForm())
|
||||
|
||||
// ─── Data loading ─────────────────────────────────────
|
||||
async function loadData() {
|
||||
pageLoading.value = true
|
||||
try {
|
||||
const [salesResult, cardTypesResult] = await Promise.all([
|
||||
adminStore.fetchFlashSales(),
|
||||
adminStore.fetchCardTypes(),
|
||||
])
|
||||
items.value = [...salesResult.items]
|
||||
total.value = salesResult.total
|
||||
cardTypes.value = [...cardTypesResult]
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
pageLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadSales() {
|
||||
try {
|
||||
const result = await adminStore.fetchFlashSales()
|
||||
items.value = [...result.items]
|
||||
total.value = result.total
|
||||
} catch {
|
||||
// silent
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────
|
||||
function phaseLabel(phase: FlashSalePhase): string {
|
||||
return getFlashSalePhaseLabel(phase)
|
||||
}
|
||||
|
||||
function phaseTagClass(phase: FlashSalePhase): string {
|
||||
if (phase === FlashSalePhase.ONGOING) return 'tag--ongoing'
|
||||
if (phase === FlashSalePhase.UPCOMING) return 'tag--upcoming'
|
||||
if (phase === FlashSalePhase.SOLD_OUT) return 'tag--soldout'
|
||||
return 'tag--ended'
|
||||
}
|
||||
|
||||
function headerStatusClass(item: FlashSaleAdminItem): string {
|
||||
if (item.status === FlashSaleStatus.DRAFT) return 'header--draft'
|
||||
if (item.status === FlashSaleStatus.ENDED) return 'header--ended'
|
||||
return 'header--active'
|
||||
}
|
||||
|
||||
function stockPercent(item: FlashSaleAdminItem): string {
|
||||
return getStockPercent(item.soldCount, item.totalStock)
|
||||
}
|
||||
|
||||
// ─── Modal ────────────────────────────────────────────
|
||||
function openAdd() {
|
||||
editTarget.value = null
|
||||
form.value = defaultForm()
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(item: FlashSaleAdminItem) {
|
||||
editTarget.value = item
|
||||
const startDt = new Date(item.startTime)
|
||||
const endDt = new Date(item.endTime)
|
||||
const ctIdx = cardTypes.value.findIndex((ct) => ct.id === item.cardTypeId)
|
||||
|
||||
form.value = {
|
||||
cardTypeIdx: ctIdx >= 0 ? ctIdx : 0,
|
||||
title: item.title,
|
||||
originalPriceStr: String(item.originalPrice / 100),
|
||||
flashPriceStr: String(item.flashPrice / 100),
|
||||
totalStockStr: String(item.totalStock),
|
||||
startDate: formatDateLocal(startDt),
|
||||
startTimeStr: formatTimeLocal(startDt),
|
||||
endDate: formatDateLocal(endDt),
|
||||
endTimeStr: formatTimeLocal(endDt),
|
||||
sortOrderStr: String(item.sortOrder),
|
||||
description: item.description ?? '',
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editTarget.value = null
|
||||
}
|
||||
|
||||
function onCardTypeChange(e: { detail: { value: number } }) {
|
||||
const idx = Number(e.detail.value)
|
||||
form.value.cardTypeIdx = idx
|
||||
// Auto-fill original price from card type
|
||||
const ct = cardTypes.value[idx]
|
||||
if (ct && !form.value.originalPriceStr) {
|
||||
form.value.originalPriceStr = String(Number(ct.price) / 100)
|
||||
}
|
||||
}
|
||||
|
||||
function onStartDateChange(e: { detail: { value: string } }) {
|
||||
form.value.startDate = e.detail.value
|
||||
}
|
||||
function onStartTimeChange(e: { detail: { value: string } }) {
|
||||
form.value.startTimeStr = e.detail.value
|
||||
}
|
||||
function onEndDateChange(e: { detail: { value: string } }) {
|
||||
form.value.endDate = e.detail.value
|
||||
}
|
||||
function onEndTimeChange(e: { detail: { value: string } }) {
|
||||
form.value.endTimeStr = e.detail.value
|
||||
}
|
||||
|
||||
// ─── Form submit ──────────────────────────────────────
|
||||
async function submitForm() {
|
||||
if (submitting.value) return
|
||||
|
||||
if (!form.value.title.trim()) {
|
||||
uni.showToast({ title: '请填写活动标题', icon: 'none' }); return
|
||||
}
|
||||
const originalPrice = parseFloat(form.value.originalPriceStr)
|
||||
if (isNaN(originalPrice) || originalPrice <= 0) {
|
||||
uni.showToast({ title: '请填写有效原价', icon: 'none' }); return
|
||||
}
|
||||
const flashPrice = parseFloat(form.value.flashPriceStr)
|
||||
if (isNaN(flashPrice) || flashPrice <= 0) {
|
||||
uni.showToast({ title: '请填写有效秒杀价', icon: 'none' }); return
|
||||
}
|
||||
const totalStock = parseInt(form.value.totalStockStr, 10)
|
||||
if (isNaN(totalStock) || totalStock < 1) {
|
||||
uni.showToast({ title: '请填写有效库存', icon: 'none' }); return
|
||||
}
|
||||
if (!form.value.startDate || !form.value.startTimeStr) {
|
||||
uni.showToast({ title: '请选择开始时间', icon: 'none' }); return
|
||||
}
|
||||
if (!form.value.endDate || !form.value.endTimeStr) {
|
||||
uni.showToast({ title: '请选择结束时间', icon: 'none' }); return
|
||||
}
|
||||
|
||||
const startTime = `${form.value.startDate}T${form.value.startTimeStr}:00`
|
||||
const endTime = `${form.value.endDate}T${form.value.endTimeStr}:00`
|
||||
|
||||
if (new Date(endTime) <= new Date(startTime)) {
|
||||
uni.showToast({ title: '结束时间须晚于开始时间', icon: 'none' }); return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
if (editTarget.value) {
|
||||
await adminStore.updateFlashSale(editTarget.value.id, {
|
||||
title: form.value.title.trim(),
|
||||
originalPrice: Math.round(originalPrice * 100),
|
||||
flashPrice: Math.round(flashPrice * 100),
|
||||
totalStock,
|
||||
startTime,
|
||||
endTime,
|
||||
description: form.value.description.trim() || undefined,
|
||||
sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
|
||||
})
|
||||
} else {
|
||||
const selectedCardType = cardTypes.value[form.value.cardTypeIdx]
|
||||
if (!selectedCardType) {
|
||||
uni.showToast({ title: '请选择卡种', icon: 'none' }); return
|
||||
}
|
||||
await adminStore.createFlashSale({
|
||||
cardTypeId: selectedCardType.id,
|
||||
title: form.value.title.trim(),
|
||||
originalPrice: Math.round(originalPrice * 100),
|
||||
flashPrice: Math.round(flashPrice * 100),
|
||||
totalStock,
|
||||
startTime,
|
||||
endTime,
|
||||
description: form.value.description.trim() || undefined,
|
||||
sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
|
||||
})
|
||||
}
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
closeModal()
|
||||
await reloadSales()
|
||||
} catch (e: unknown) {
|
||||
const msg = e instanceof Error ? e.message : '保存失败'
|
||||
uni.showToast({ title: msg, icon: 'none' })
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Actions ──────────────────────────────────────────
|
||||
function confirmActivate(item: FlashSaleAdminItem) {
|
||||
uni.showModal({
|
||||
title: '确认上线',
|
||||
content: `上线后「${item.title}」将对用户可见,到达秒杀时间后用户可抢购。`,
|
||||
confirmText: '上线',
|
||||
confirmColor: '#27ae60',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '上线中...' })
|
||||
try {
|
||||
await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ACTIVE })
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已上线', icon: 'success' })
|
||||
await reloadSales()
|
||||
} catch {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '上线失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function confirmEnd(item: FlashSaleAdminItem) {
|
||||
uni.showModal({
|
||||
title: '确认结束',
|
||||
content: `结束后「${item.title}」将停止售卖,已购买的不受影响。`,
|
||||
confirmText: '结束',
|
||||
confirmColor: '#e67e22',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '结束中...' })
|
||||
try {
|
||||
await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ENDED })
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已结束', icon: 'success' })
|
||||
await reloadSales()
|
||||
} catch {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '操作失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function confirmDelete(item: FlashSaleAdminItem) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: `确定删除「${item.title}」?此操作不可恢复。`,
|
||||
confirmText: '删除',
|
||||
confirmColor: '#c0392b',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
uni.showLoading({ title: '删除中...' })
|
||||
try {
|
||||
await adminStore.deleteFlashSale(item.id)
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '已删除', icon: 'success' })
|
||||
await reloadSales()
|
||||
} catch {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
/* ── Toolbar ─────────────────────────────── */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 24rpx 16rpx;
|
||||
}
|
||||
|
||||
.toolbar-hint { font-size: 24rpx; color: #999; }
|
||||
|
||||
.add-btn {
|
||||
background: linear-gradient(135deg, #D4A59A, #C08B7E);
|
||||
border-radius: 32rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 0 24rpx; }
|
||||
|
||||
.skeleton-item {
|
||||
height: 300rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { font-size: 28rpx; color: #bbb; }
|
||||
|
||||
/* ── Flash sale list ─────────────────────── */
|
||||
.fs-list { padding: 0 24rpx; }
|
||||
|
||||
.fs-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.fs-header {
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header--active { background: linear-gradient(90deg, #D4A59A, #C08B7E); }
|
||||
.header--draft { background: linear-gradient(90deg, #AEA49A, #9E948A); }
|
||||
.header--ended { background: linear-gradient(90deg, #B0A898, #9A928A); }
|
||||
|
||||
.fs-header-left { flex: 1; min-width: 0; }
|
||||
|
||||
.fs-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fs-status-tag {
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.tag--ongoing { background: rgba(255, 255, 255, 0.3); }
|
||||
.tag--upcoming { background: rgba(255, 255, 255, 0.2); }
|
||||
.tag--soldout { background: rgba(0, 0, 0, 0.2); }
|
||||
.tag--ended { background: rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.fs-status-text { font-size: 20rpx; color: #fff; font-weight: 600; }
|
||||
|
||||
.fs-body { padding: 24rpx; }
|
||||
|
||||
.fs-info-row { margin-bottom: 16rpx; }
|
||||
|
||||
.fs-card-type { font-size: 24rpx; color: #888; }
|
||||
|
||||
.fs-price-row {
|
||||
display: flex;
|
||||
gap: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.fs-price-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.fs-price-label { font-size: 20rpx; color: #aaa; }
|
||||
|
||||
.fs-price-value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
|
||||
&.flash { color: #B5725E; }
|
||||
&.original { color: #aaa; text-decoration: line-through; font-weight: 400; }
|
||||
}
|
||||
|
||||
/* Stock progress bar */
|
||||
.fs-stock-bar {
|
||||
height: 8rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.fs-stock-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #D4A59A, #C08B7E);
|
||||
border-radius: 4rpx;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.fs-time-row { margin-top: 4rpx; }
|
||||
|
||||
.fs-time { font-size: 22rpx; color: #999; }
|
||||
|
||||
/* ── Actions ─────────────────────────────── */
|
||||
.fs-actions {
|
||||
display: flex;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.fs-action-btn {
|
||||
flex: 1;
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child { border-right: none; }
|
||||
&:active { background: #f9f9f9; }
|
||||
}
|
||||
|
||||
.fs-action-text { font-size: 26rpx; font-weight: 600; }
|
||||
|
||||
.edit-btn .fs-action-text { color: #1a1a2e; }
|
||||
.activate-btn .fs-action-text { color: #27ae60; }
|
||||
.end-btn .fs-action-text { color: #e67e22; }
|
||||
.delete-btn .fs-action-text { color: #c0392b; }
|
||||
|
||||
/* ── Modal ───────────────────────────────── */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 100%;
|
||||
max-height: 85vh;
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-scroll { flex: 1; max-height: 85vh; }
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 32rpx 16rpx;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a2e; }
|
||||
|
||||
.modal-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.modal-close-icon { font-size: 24rpx; color: #999; }
|
||||
|
||||
.modal-body { padding: 0 32rpx; }
|
||||
|
||||
.modal-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
gap: 16rpx;
|
||||
|
||||
&--last { border-bottom: none; align-items: flex-start; }
|
||||
}
|
||||
|
||||
.modal-label { font-size: 26rpx; color: #555; width: 160rpx; flex-shrink: 0; }
|
||||
|
||||
.modal-input { flex: 1; text-align: right; font-size: 26rpx; color: #222; }
|
||||
|
||||
.picker-display { display: flex; align-items: center; gap: 8rpx; }
|
||||
.picker-text { font-size: 26rpx; color: #222; }
|
||||
.picker-arrow { font-size: 26rpx; color: #bbb; }
|
||||
|
||||
.datetime-picker-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.datetime-text {
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
padding: 8rpx 16rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.modal-textarea {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #222;
|
||||
min-height: 80rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { background: #e8e8e8; }
|
||||
}
|
||||
|
||||
.modal-cancel-text { font-size: 28rpx; color: #555; }
|
||||
|
||||
.modal-confirm {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #D4A59A, #C08B7E);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:active { opacity: 0.85; }
|
||||
&--loading { opacity: 0.6; pointer-events: none; }
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #fff; }
|
||||
</style>
|
||||
@@ -63,21 +63,6 @@
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/week-template')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--template">
|
||||
<text class="item-icon-text">◈</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">排课模板</text>
|
||||
<text class="item-desc">设置每周课程模板</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 会员与订单 -->
|
||||
@@ -131,6 +116,21 @@
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="navigate('/pages/admin/flash-sales')">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--flash-sale">
|
||||
<text class="item-icon-text">◈</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">秒杀管理</text>
|
||||
<text class="item-desc">创建和管理限时秒杀活动</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Section header: 系统 -->
|
||||
@@ -154,6 +154,21 @@
|
||||
<text class="arrow-text">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="list-item" @tap="handleIncreaseSubscriptionCount">
|
||||
<view class="item-left">
|
||||
<view class="item-icon-wrap icon--subscribe">
|
||||
<text class="item-icon-text">✦</text>
|
||||
</view>
|
||||
<view class="item-text-group">
|
||||
<text class="item-title">增加订阅次数</text>
|
||||
<text class="item-desc">当前剩余 {{ user?.adminBookingSubscriptionCount ?? 0 }} 次</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-arrow">
|
||||
<text class="arrow-text">{{ adminSubscribeLoading ? '...' : '›' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 40rpx" />
|
||||
@@ -162,17 +177,24 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import type { AdminStats } from '../../stores/admin'
|
||||
import { requestAdminBookingSubscriptionCount } from '../../utils/wechat-subscription'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
const userStore = useUserStore()
|
||||
const { user } = storeToRefs(userStore)
|
||||
|
||||
const statsLoading = ref(false)
|
||||
const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
|
||||
const adminSubscribeLoading = ref(false)
|
||||
|
||||
function navigate(path: string) {
|
||||
uni.navigateTo({ url: path })
|
||||
@@ -189,9 +211,32 @@ async function loadStats() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleIncreaseSubscriptionCount() {
|
||||
if (adminSubscribeLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
adminSubscribeLoading.value = true
|
||||
try {
|
||||
const profile = await requestAdminBookingSubscriptionCount()
|
||||
if (!profile) {
|
||||
uni.showToast({ title: '已取消本次授权', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
userStore.setProfile(profile)
|
||||
uni.showToast({ title: `订阅次数 +1,剩余 ${profile.adminBookingSubscriptionCount}`, icon: 'none' })
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '订阅授权失败'), icon: 'none' })
|
||||
} finally {
|
||||
adminSubscribeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadStats()
|
||||
userStore.fetchProfile()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -330,7 +375,9 @@ onMounted(() => {
|
||||
.icon--members { background: linear-gradient(135deg, $primary-color, $primary-dark); }
|
||||
.icon--orders { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
|
||||
.icon--card { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
|
||||
.icon--flash-sale { background: linear-gradient(135deg, #D4A59A, #C08B7E); }
|
||||
.icon--studio { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
|
||||
.icon--subscribe { background: linear-gradient(135deg, #5D8C8A, #476D72); }
|
||||
|
||||
.item-text-group {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<view class="page" :style="{ '--status-bar': statusBarHeight + 'px' }">
|
||||
<CustomNavBar title="订单管理" show-back />
|
||||
|
||||
<!-- Summary stats bar -->
|
||||
@@ -44,7 +44,9 @@
|
||||
class="list-scroll"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="refreshing"
|
||||
:lower-threshold="120"
|
||||
@refresherrefresh="onRefresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="loading && !orders.length" class="order-list">
|
||||
@@ -106,21 +108,21 @@
|
||||
</view>
|
||||
<view class="info-right">
|
||||
<text class="info-label">下单时间</text>
|
||||
<text class="info-value">{{ formatDate(order.createdAt) }}</text>
|
||||
<text class="info-value">{{ formatDateTime(order.createdAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Paid time if available -->
|
||||
<view v-if="order.paidAt && order.status === OrderStatus.PAID" class="info-row">
|
||||
<text class="info-label">支付时间</text>
|
||||
<text class="info-value">{{ formatDate(order.paidAt) }}</text>
|
||||
<text class="info-value">{{ formatDateTime(order.paidAt) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Load more / no more -->
|
||||
<view v-if="hasMore" class="load-more" @tap="loadMore">
|
||||
<view v-if="hasMore" class="load-more">
|
||||
<text class="load-more-text">{{ loading ? '加载中...' : '加载更多' }}</text>
|
||||
</view>
|
||||
<view v-else-if="orders.length > 0" class="no-more">
|
||||
@@ -133,19 +135,21 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { formatPrice, formatDate } from '../../utils/format'
|
||||
import { formatPrice, formatDateTime } from '../../utils/format'
|
||||
import { OrderStatus } from '@mp-pilates/shared'
|
||||
import type { OrderWithDetails } from '@mp-pilates/shared'
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
// 动态计算顶部模块高度
|
||||
const statusBarHeight = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
const windowInfo = uni.getWindowInfo()
|
||||
statusBarHeight.value = windowInfo.statusBarHeight ?? 20
|
||||
})
|
||||
|
||||
const filters = [
|
||||
@@ -165,6 +169,21 @@ const totalCount = ref<number | null>(null)
|
||||
const paidCount = ref<number | null>(null)
|
||||
const pendingCount = ref<number | null>(null)
|
||||
|
||||
// 每个 tab 单独缓存数据
|
||||
const orderCache: Record<string, { items: OrderWithDetails[]; total: number; page: number; hasMore: boolean }> = {}
|
||||
|
||||
function getCacheKey(filter: string): string {
|
||||
return filter || 'all'
|
||||
}
|
||||
|
||||
function getCachedData(filter: string) {
|
||||
return orderCache[getCacheKey(filter)]
|
||||
}
|
||||
|
||||
function setCachedData(filter: string, data: { items: OrderWithDetails[]; total: number; page: number; hasMore: boolean }) {
|
||||
orderCache[getCacheKey(filter)] = data
|
||||
}
|
||||
|
||||
const LIMIT = 20
|
||||
|
||||
function statusLabel(s: string) {
|
||||
@@ -191,23 +210,45 @@ function statusAccentClass(s: string) {
|
||||
}
|
||||
|
||||
async function loadOrders(reset = false) {
|
||||
const filter = activeFilter.value
|
||||
|
||||
// 如果有缓存且是重置(切换tab),直接用缓存数据
|
||||
if (reset) {
|
||||
const cached = getCachedData(filter)
|
||||
if (cached) {
|
||||
orders.value = [...cached.items]
|
||||
hasMore.value = cached.hasMore
|
||||
page.value = cached.page
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// 初始加载或下拉刷新,需要请求接口
|
||||
if (loading.value) return
|
||||
if (reset) page.value = 1
|
||||
|
||||
loading.value = true
|
||||
try {
|
||||
const params: { page: number; limit: number; status?: string } = {
|
||||
page: page.value,
|
||||
limit: LIMIT,
|
||||
}
|
||||
if (activeFilter.value) params.status = activeFilter.value
|
||||
if (filter) params.status = filter
|
||||
const result = await adminStore.fetchAdminOrders(params)
|
||||
if (reset) {
|
||||
orders.value = [...result.items]
|
||||
} else {
|
||||
orders.value.push(...result.items)
|
||||
}
|
||||
hasMore.value = orders.value.length < result.total
|
||||
totalCount.value = result.total
|
||||
|
||||
const newItems = reset ? [...result.items] : [...orders.value, ...result.items]
|
||||
const newHasMore = newItems.length < result.total
|
||||
|
||||
// 缓存数据
|
||||
setCachedData(filter, {
|
||||
items: newItems,
|
||||
total: result.total,
|
||||
page: page.value,
|
||||
hasMore: newHasMore,
|
||||
})
|
||||
|
||||
orders.value = newItems
|
||||
hasMore.value = newHasMore
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
@@ -216,30 +257,79 @@ async function loadOrders(reset = false) {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSummaryCounts() {
|
||||
// 初始加载所有分类的数据
|
||||
async function loadAllFiltersData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [allResult, paidResult, pendingResult] = await Promise.all([
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1 }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PAID }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PENDING }),
|
||||
// 并行请求所有分类(第一页数据)
|
||||
const [allResult, paidResult, pendingResult, refundedResult] = await Promise.all([
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: LIMIT }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.PAID }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.PENDING }),
|
||||
adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.REFUNDED }),
|
||||
])
|
||||
|
||||
// 缓存全部
|
||||
setCachedData('', {
|
||||
items: [...allResult.items],
|
||||
total: allResult.total,
|
||||
page: 1,
|
||||
hasMore: allResult.items.length < allResult.total,
|
||||
})
|
||||
totalCount.value = allResult.total
|
||||
|
||||
// 缓存已支付
|
||||
setCachedData(OrderStatus.PAID, {
|
||||
items: [...paidResult.items],
|
||||
total: paidResult.total,
|
||||
page: 1,
|
||||
hasMore: paidResult.items.length < paidResult.total,
|
||||
})
|
||||
paidCount.value = paidResult.total
|
||||
|
||||
// 缓存待支付
|
||||
setCachedData(OrderStatus.PENDING, {
|
||||
items: [...pendingResult.items],
|
||||
total: pendingResult.total,
|
||||
page: 1,
|
||||
hasMore: pendingResult.items.length < pendingResult.total,
|
||||
})
|
||||
pendingCount.value = pendingResult.total
|
||||
|
||||
// 缓存已退款
|
||||
setCachedData(OrderStatus.REFUNDED, {
|
||||
items: [...refundedResult.items],
|
||||
total: refundedResult.total,
|
||||
page: 1,
|
||||
hasMore: refundedResult.items.length < refundedResult.total,
|
||||
})
|
||||
|
||||
// 设置当前 tab 的数据
|
||||
orders.value = [...allResult.items]
|
||||
hasMore.value = allResult.items.length < allResult.total
|
||||
} catch {
|
||||
// non-critical, ignore
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectFilter(value: string) {
|
||||
activeFilter.value = value
|
||||
totalCount.value = null
|
||||
loadOrders(true)
|
||||
// 切换 tab 直接从缓存读取
|
||||
const cached = getCachedData(value)
|
||||
if (cached) {
|
||||
orders.value = [...cached.items]
|
||||
hasMore.value = cached.hasMore
|
||||
page.value = cached.page
|
||||
}
|
||||
}
|
||||
|
||||
async function onRefresh() {
|
||||
refreshing.value = true
|
||||
await Promise.all([loadOrders(true), loadSummaryCounts()])
|
||||
// 下拉刷新重新请求所有分类的数据
|
||||
await loadAllFiltersData()
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
@@ -249,8 +339,7 @@ function loadMore() {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadOrders(true)
|
||||
loadSummaryCounts()
|
||||
loadAllFiltersData()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -266,13 +355,18 @@ onMounted(() => {
|
||||
|
||||
/* ── Stats bar ──────────────────────────────── */
|
||||
.stats-bar {
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar) + 44px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 96rpx;
|
||||
background: #FFFFFF;
|
||||
padding: 28rpx 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.2);
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
@@ -309,9 +403,13 @@ onMounted(() => {
|
||||
|
||||
/* ── Filter pills ───────────────────────────── */
|
||||
.filter-wrap {
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar) + 92px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FAF8F5;
|
||||
border-bottom: 1rpx solid rgba(180, 160, 130, 0.15);
|
||||
flex-shrink: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.filter-scroll { overflow: hidden; }
|
||||
@@ -364,7 +462,11 @@ onMounted(() => {
|
||||
|
||||
/* ── List ───────────────────────────────────── */
|
||||
.list-scroll {
|
||||
flex: 1;
|
||||
position: fixed;
|
||||
top: calc(var(--status-bar) + 144px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<view v-else-if="editableSlots.length === 0" class="empty-state">
|
||||
<text class="empty-icon">📭</text>
|
||||
<text class="empty-text">当日暂无排课</text>
|
||||
<text class="empty-sub">无模板匹配,请手动添加时段或先配置排课模板</text>
|
||||
<text class="empty-sub">当日暂无默认时段,请点击下方按钮手动添加</text>
|
||||
</view>
|
||||
|
||||
<!-- Slot list -->
|
||||
@@ -404,7 +404,7 @@ function slotBadgeClass(slot: EditableSlot): string {
|
||||
function slotBadgeText(slot: EditableSlot): string {
|
||||
if (slot.isNew) return '新增'
|
||||
if (slot.isPublished) return '已发布'
|
||||
return '来自模板'
|
||||
return '默认时段'
|
||||
}
|
||||
|
||||
// ── Lifecycle ─────────────────────────────────────────────
|
||||
|
||||
@@ -128,7 +128,7 @@
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<text class="gen-hint">将根据排课模板,自动生成所选日期范围内的时段</text>
|
||||
<text class="gen-hint">将按默认时间表(每天 8:00-22:00,每小时一节)自动生成所选日期范围内的时段</text>
|
||||
<view class="action-wrap">
|
||||
<view class="action-btn" :class="{ 'action-btn--loading': submitting }" @tap="submitGenerate">
|
||||
<text class="action-btn-text">{{ submitting ? '生成中...' : '批量生成' }}</text>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,528 +0,0 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="排课模板" show-back />
|
||||
<!-- Toolbar -->
|
||||
<view class="toolbar">
|
||||
<text class="toolbar-hint">共 {{ templates.length }} 条模板</text>
|
||||
<view class="add-btn" @tap="openAdd">
|
||||
<text class="add-btn-text">+ 新增时段</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Loading skeleton -->
|
||||
<view v-if="loading" class="skeleton-list">
|
||||
<view v-for="i in 5" :key="i" class="skeleton-item" />
|
||||
</view>
|
||||
|
||||
<!-- Empty -->
|
||||
<view v-else-if="!templates.length" class="empty-state">
|
||||
<text class="empty-icon">📅</text>
|
||||
<text class="empty-text">暂无模板,点击右上角新增</text>
|
||||
</view>
|
||||
|
||||
<!-- Template list grouped by weekday -->
|
||||
<view v-else>
|
||||
<view v-for="(group, day) in grouped" :key="day" class="day-group">
|
||||
<view class="day-header">
|
||||
<text class="day-label">{{ WEEKDAY_LABELS[Number(day)] }}</text>
|
||||
<text class="day-count">{{ group.length }} 个时段</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="tpl in group"
|
||||
:key="tpl.id ?? tpl._key"
|
||||
class="tpl-row"
|
||||
:class="{ 'tpl-row--inactive': !tpl.isActive }"
|
||||
>
|
||||
<view class="tpl-time">
|
||||
<text class="tpl-time-text">{{ tpl.startTime }} – {{ tpl.endTime }}</text>
|
||||
<text class="tpl-capacity">{{ tpl.capacity }} 人</text>
|
||||
</view>
|
||||
<view class="tpl-actions">
|
||||
<view
|
||||
class="tpl-toggle"
|
||||
:class="tpl.isActive ? 'toggle--on' : 'toggle--off'"
|
||||
@tap="toggleTemplate(tpl)"
|
||||
>
|
||||
<text class="tpl-toggle-text">{{ tpl.isActive ? '启用' : '停用' }}</text>
|
||||
</view>
|
||||
<view class="tpl-edit" @tap="openEdit(tpl)">
|
||||
<text class="tpl-edit-text">编辑</text>
|
||||
</view>
|
||||
<view class="tpl-delete" @tap="deleteTemplate(tpl)">
|
||||
<text class="tpl-delete-text">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Save bar -->
|
||||
<view v-if="isDirty" class="save-bar">
|
||||
<view class="save-btn" :class="{ 'save-btn--loading': saving }" @tap="handleSave">
|
||||
<text class="save-btn-text">{{ saving ? '保存中...' : '保存全部更改' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Add / Edit modal -->
|
||||
<view v-if="showModal" class="modal-mask" @tap.self="closeModal">
|
||||
<view class="modal">
|
||||
<text class="modal-title">{{ editTarget ? '编辑时段' : '新增时段' }}</text>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">星期</text>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="dayOptions"
|
||||
range-key="label"
|
||||
:value="form.dayIdx"
|
||||
@change="(e: any) => form.dayIdx = Number(e.detail.value)"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ dayOptions[form.dayIdx].label }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">开始时间</text>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.startTime"
|
||||
@change="(e: any) => form.startTime = e.detail.value"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ form.startTime || '请选择' }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="modal-field">
|
||||
<text class="modal-label">结束时间</text>
|
||||
<picker
|
||||
mode="time"
|
||||
:value="form.endTime"
|
||||
@change="(e: any) => form.endTime = e.detail.value"
|
||||
>
|
||||
<view class="picker-display">
|
||||
<text class="picker-text">{{ form.endTime || '请选择' }}</text>
|
||||
<text class="picker-arrow">›</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="modal-field modal-field--last">
|
||||
<text class="modal-label">容量</text>
|
||||
<input
|
||||
class="modal-input"
|
||||
type="number"
|
||||
v-model="form.capacityStr"
|
||||
placeholder="如:10"
|
||||
placeholder-style="color:#bbb"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="modal-cancel" @tap="closeModal">
|
||||
<text class="modal-cancel-text">取消</text>
|
||||
</view>
|
||||
<view class="modal-confirm" @tap="submitForm">
|
||||
<text class="modal-confirm-text">确认</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useAdminStore } from '../../stores/admin'
|
||||
import { WEEKDAY_LABELS } from '@mp-pilates/shared'
|
||||
import type { WeekTemplate } from '@mp-pilates/shared'
|
||||
|
||||
type LocalTemplate = Partial<WeekTemplate> & {
|
||||
_key?: string
|
||||
dayOfWeek: number
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity: number
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const adminStore = useAdminStore()
|
||||
const navBarHeight = ref('64px')
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const isDirty = ref(false)
|
||||
const showModal = ref(false)
|
||||
const editTarget = ref<LocalTemplate | null>(null)
|
||||
|
||||
const templates = ref<LocalTemplate[]>([])
|
||||
|
||||
const dayOptions = [1, 2, 3, 4, 5, 6, 7].map((d) => ({ label: WEEKDAY_LABELS[d], value: d }))
|
||||
|
||||
const form = ref({
|
||||
dayIdx: 0,
|
||||
startTime: '08:00',
|
||||
endTime: '09:00',
|
||||
capacityStr: '1',
|
||||
})
|
||||
|
||||
const grouped = computed(() => {
|
||||
const map: Record<number, LocalTemplate[]> = {}
|
||||
for (const tpl of templates.value) {
|
||||
if (!map[tpl.dayOfWeek]) map[tpl.dayOfWeek] = []
|
||||
map[tpl.dayOfWeek].push(tpl)
|
||||
}
|
||||
// Sort by day
|
||||
return Object.fromEntries(
|
||||
Object.entries(map).sort(([a], [b]) => Number(a) - Number(b)),
|
||||
)
|
||||
})
|
||||
|
||||
/** 生成默认模板:周一到周日,8:00-22:00 每小时一个时段 */
|
||||
function generateDefaultTemplates(): LocalTemplate[] {
|
||||
const defaults: LocalTemplate[] = []
|
||||
for (let day = 1; day <= 7; day++) {
|
||||
for (let hour = 8; hour < 22; hour++) {
|
||||
const start = String(hour).padStart(2, '0') + ':00'
|
||||
const end = String(hour + 1).padStart(2, '0') + ':00'
|
||||
defaults.push({
|
||||
_key: `default-${day}-${start}`,
|
||||
dayOfWeek: day,
|
||||
startTime: start,
|
||||
endTime: end,
|
||||
capacity: 1,
|
||||
isActive: true,
|
||||
})
|
||||
}
|
||||
}
|
||||
return defaults
|
||||
}
|
||||
|
||||
async function fetchTemplates() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await adminStore.fetchWeekTemplates()
|
||||
if (data.length === 0) {
|
||||
// No templates yet — pre-fill with defaults
|
||||
templates.value = generateDefaultTemplates()
|
||||
isDirty.value = true
|
||||
} else {
|
||||
templates.value = data
|
||||
isDirty.value = false
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openAdd() {
|
||||
editTarget.value = null
|
||||
form.value = { dayIdx: 0, startTime: '08:00', endTime: '09:00', capacityStr: '1' }
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function openEdit(tpl: LocalTemplate) {
|
||||
editTarget.value = tpl
|
||||
const dayIdx = dayOptions.findIndex((d) => d.value === tpl.dayOfWeek)
|
||||
form.value = {
|
||||
dayIdx: dayIdx >= 0 ? dayIdx : 0,
|
||||
startTime: tpl.startTime,
|
||||
endTime: tpl.endTime,
|
||||
capacityStr: String(tpl.capacity),
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
editTarget.value = null
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
const capacity = parseInt(form.value.capacityStr, 10)
|
||||
if (!form.value.startTime || !form.value.endTime) {
|
||||
uni.showToast({ title: '请填写时间', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (isNaN(capacity) || capacity < 1) {
|
||||
uni.showToast({ title: '请填写有效容量', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
const day = dayOptions[form.value.dayIdx].value
|
||||
|
||||
if (editTarget.value) {
|
||||
const tpl = editTarget.value
|
||||
tpl.dayOfWeek = day
|
||||
tpl.startTime = form.value.startTime
|
||||
tpl.endTime = form.value.endTime
|
||||
tpl.capacity = capacity
|
||||
} else {
|
||||
templates.value.push({
|
||||
_key: String(Date.now()),
|
||||
dayOfWeek: day,
|
||||
startTime: form.value.startTime,
|
||||
endTime: form.value.endTime,
|
||||
capacity,
|
||||
isActive: true,
|
||||
})
|
||||
}
|
||||
|
||||
isDirty.value = true
|
||||
closeModal()
|
||||
}
|
||||
|
||||
function toggleTemplate(tpl: LocalTemplate) {
|
||||
tpl.isActive = !tpl.isActive
|
||||
isDirty.value = true
|
||||
}
|
||||
|
||||
function deleteTemplate(tpl: LocalTemplate) {
|
||||
uni.showModal({
|
||||
title: '确认删除',
|
||||
content: '删除该时段模板?',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const idx = templates.value.indexOf(tpl)
|
||||
if (idx >= 0) templates.value.splice(idx, 1)
|
||||
isDirty.value = true
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (saving.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = templates.value.map((t) => ({
|
||||
id: t.id,
|
||||
dayOfWeek: t.dayOfWeek,
|
||||
startTime: t.startTime,
|
||||
endTime: t.endTime,
|
||||
capacity: t.capacity,
|
||||
isActive: t.isActive,
|
||||
}))
|
||||
await adminStore.saveWeekTemplates(payload as any)
|
||||
isDirty.value = false
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
await fetchTemplates()
|
||||
} catch (e: any) {
|
||||
uni.showToast({ title: e?.message ?? '保存失败', icon: 'none' })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
fetchTemplates()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
/* ── Toolbar ─────────────────────────────── */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 24rpx 16rpx;
|
||||
}
|
||||
|
||||
.toolbar-hint { font-size: 24rpx; color: #999; }
|
||||
|
||||
.add-btn {
|
||||
background: #1a1a2e;
|
||||
border-radius: 32rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
|
||||
.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
|
||||
|
||||
/* ── Skeleton ────────────────────────────── */
|
||||
.skeleton-list { padding: 0 24rpx; }
|
||||
|
||||
.skeleton-item {
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────── */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 100rpx 0;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 80rpx; }
|
||||
.empty-text { font-size: 28rpx; color: #bbb; }
|
||||
|
||||
/* ── Day group ───────────────────────────── */
|
||||
.day-group { margin: 0 24rpx 24rpx; }
|
||||
|
||||
.day-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16rpx 8rpx;
|
||||
}
|
||||
|
||||
.day-label { font-size: 28rpx; font-weight: 700; color: #1a1a2e; }
|
||||
.day-count { font-size: 22rpx; color: #999; }
|
||||
|
||||
/* ── Template row ────────────────────────── */
|
||||
.tpl-row {
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
|
||||
|
||||
&--inactive { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.tpl-time { display: flex; flex-direction: column; gap: 6rpx; }
|
||||
.tpl-time-text { font-size: 28rpx; font-weight: 600; color: #1a1a2e; }
|
||||
.tpl-capacity { font-size: 22rpx; color: #888; }
|
||||
|
||||
.tpl-actions { display: flex; gap: 12rpx; }
|
||||
|
||||
.tpl-toggle,
|
||||
.tpl-edit,
|
||||
.tpl-delete {
|
||||
border-radius: 20rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
}
|
||||
|
||||
.toggle--on { background: rgba(39,174,96,0.12); }
|
||||
.toggle--on .tpl-toggle-text { font-size: 24rpx; color: #27ae60; }
|
||||
.toggle--off { background: rgba(230,126,34,0.12); }
|
||||
.toggle--off .tpl-toggle-text { font-size: 24rpx; color: #e67e22; }
|
||||
|
||||
.tpl-edit { background: rgba(26,26,46,0.08); }
|
||||
.tpl-edit-text { font-size: 24rpx; color: #1a1a2e; }
|
||||
|
||||
.tpl-delete { background: rgba(192,57,43,0.08); }
|
||||
.tpl-delete-text { font-size: 24rpx; color: #c0392b; }
|
||||
|
||||
/* ── Save bar ────────────────────────────── */
|
||||
.save-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx 24rpx 48rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&--loading { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.save-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
|
||||
|
||||
/* ── Modal ───────────────────────────────── */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
background: #ffffff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
padding: 40rpx 32rpx 60rpx;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
display: block;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.modal-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&--last { border-bottom: none; }
|
||||
}
|
||||
|
||||
.modal-label { font-size: 26rpx; color: #555; width: 140rpx; flex-shrink: 0; }
|
||||
|
||||
.modal-input { flex: 1; text-align: right; font-size: 26rpx; color: #222; }
|
||||
|
||||
.picker-display { display: flex; align-items: center; gap: 8rpx; }
|
||||
.picker-text { font-size: 26rpx; color: #222; }
|
||||
.picker-arrow { font-size: 26rpx; color: #bbb; }
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.modal-cancel {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-cancel-text { font-size: 28rpx; color: #555; }
|
||||
|
||||
.modal-confirm {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -10,8 +10,8 @@
|
||||
|
||||
<!-- ──────────── Date & period filters ──────────── -->
|
||||
<view class="filter-header">
|
||||
<DateSelector v-model="selectedDate" @select="onDateSelect" />
|
||||
<TimePeriodFilter v-model="selectedPeriod" @change="onPeriodChange" />
|
||||
<DateSelector v-model="selectedDate" variant="booking" @select="onDateSelect" />
|
||||
<TimePeriodFilter v-model="selectedPeriod" variant="booking" @change="onPeriodChange" />
|
||||
</view>
|
||||
|
||||
<!-- ──────────── Slot list ──────────── -->
|
||||
@@ -84,9 +84,10 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { TIME_PERIODS } from '@mp-pilates/shared'
|
||||
import { BookingStatus, TIME_PERIODS } from '@mp-pilates/shared'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
import { formatDate } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import DateSelector from '../../components/DateSelector.vue'
|
||||
@@ -195,6 +196,19 @@ function onSlotCardTap(slot: TimeSlotWithBookingStatus) {
|
||||
|
||||
// ─── Book flow ────────────────────────────────────────────
|
||||
async function onBookTap(slot: TimeSlotWithBookingStatus) {
|
||||
if (slot.isBookedByMe) {
|
||||
if (slot.myBookingId) {
|
||||
uni.navigateTo({ url: `/pages/booking/detail?id=${slot.myBookingId}` })
|
||||
return
|
||||
}
|
||||
|
||||
const title = slot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
|
||||
? '该时段已预约,等待老师确认'
|
||||
: '该时段已预约'
|
||||
uni.showToast({ title, icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// 1. Ensure logged in
|
||||
if (!userStore.loggedIn) {
|
||||
uni.showModal({
|
||||
@@ -208,8 +222,8 @@ async function onBookTap(slot: TimeSlotWithBookingStatus) {
|
||||
if (!isNewUser) {
|
||||
onBookTap(slot)
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -298,7 +312,9 @@ onMounted(async () => {
|
||||
<style lang="scss" scoped>
|
||||
.booking-page {
|
||||
height: 100vh;
|
||||
background: $primary-bg;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(255, 232, 218, 0.36), transparent 34%),
|
||||
linear-gradient(180deg, #fbf7f3 0%, #f6efea 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@@ -307,7 +323,7 @@ onMounted(async () => {
|
||||
/* ── Status bar ───────────────────────────────────── */
|
||||
.status-bar {
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
background: #fcfaf8;
|
||||
}
|
||||
|
||||
/* ── Page header ──────────────────────────────────── */
|
||||
@@ -317,20 +333,21 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
background: #fcfaf8;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e;
|
||||
font-weight: 700;
|
||||
color: #3a2e2a;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ── Filter header ────────────────────────────────── */
|
||||
.filter-header {
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
|
||||
background: rgba(252, 250, 248, 0.96);
|
||||
box-shadow: 0 12rpx 30rpx rgba(120, 91, 79, 0.06);
|
||||
}
|
||||
|
||||
/* ── Scroll container ──────────────────────────────── */
|
||||
@@ -344,7 +361,7 @@ onMounted(async () => {
|
||||
.slot-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24rpx 0 0;
|
||||
padding: 28rpx 0 0;
|
||||
}
|
||||
|
||||
/* ── Date summary ──────────────────────────────────── */
|
||||
@@ -354,8 +371,8 @@ onMounted(async () => {
|
||||
|
||||
.date-summary-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
color: #9d8b83;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Loading skeleton ──────────────────────────────── */
|
||||
@@ -368,22 +385,22 @@ onMounted(async () => {
|
||||
|
||||
.skeleton-card {
|
||||
height: 220rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 28rpx 48rpx;
|
||||
gap: 20rpx;
|
||||
margin: 0 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
|
||||
}
|
||||
|
||||
.skeleton-time {
|
||||
width: 90rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
flex-shrink: 0;
|
||||
@@ -400,7 +417,7 @@ onMounted(async () => {
|
||||
width: 60%;
|
||||
height: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
@@ -409,7 +426,7 @@ onMounted(async () => {
|
||||
width: 40%;
|
||||
height: 20rpx;
|
||||
border-radius: 6rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
@@ -418,7 +435,7 @@ onMounted(async () => {
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
|
||||
background: linear-gradient(90deg, rgba(236, 225, 217, 0.9) 25%, rgba(248, 240, 233, 0.98) 50%, rgba(236, 225, 217, 0.9) 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
flex-shrink: 0;
|
||||
@@ -452,14 +469,14 @@ onMounted(async () => {
|
||||
&.outer {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border: 2rpx solid $primary-border;
|
||||
border: 2rpx solid rgba(192, 154, 137, 0.18);
|
||||
animation: breathe 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&.inner {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
background: linear-gradient(135deg, $primary-light 0%, $primary-color 50%, $primary-dark 100%);
|
||||
background: linear-gradient(135deg, #f6e9e1 0%, #ddc1b4 50%, #b98f7d 100%);
|
||||
opacity: 0.6;
|
||||
animation: breathe 3s ease-in-out infinite 0.5s;
|
||||
}
|
||||
@@ -470,7 +487,7 @@ onMounted(async () => {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: $primary-dark;
|
||||
background: #a87d6c;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -479,7 +496,7 @@ onMounted(async () => {
|
||||
|
||||
.empty-text {
|
||||
font-size: 32rpx;
|
||||
color: $primary-dark;
|
||||
color: #6f605b;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 16rpx;
|
||||
@@ -487,7 +504,7 @@ onMounted(async () => {
|
||||
|
||||
.empty-sub {
|
||||
font-size: 26rpx;
|
||||
color: $primary-color;
|
||||
color: #a18a82;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
|
||||
@@ -37,28 +37,18 @@
|
||||
class="card-row"
|
||||
@tap="goToDetail(c.id)"
|
||||
>
|
||||
<!-- Card Cover — horizontal -->
|
||||
<view class="card-cover" :class="getCardCoverClass(c.type)">
|
||||
<view class="cover-accent-bar" />
|
||||
<view class="cover-deco cover-deco--tl" />
|
||||
<view class="cover-deco cover-deco--br" />
|
||||
<view class="cover-icon" :class="`cover-icon--${c.type}`" />
|
||||
<view class="cover-content">
|
||||
<view class="cover-badge">
|
||||
<text class="cover-badge-text">{{ getCardTypeLabel(c.type) }}</text>
|
||||
</view>
|
||||
<text class="cover-name">{{ c.name }}</text>
|
||||
<view class="cover-price-row">
|
||||
<text class="cover-currency">¥</text>
|
||||
<text class="cover-price">{{ formatPrice(c.price) }}</text>
|
||||
</view>
|
||||
<text
|
||||
v-if="c.originalPrice && c.originalPrice > c.price"
|
||||
class="cover-original"
|
||||
>
|
||||
¥{{ formatPrice(c.originalPrice) }}
|
||||
</text>
|
||||
</view>
|
||||
<!-- Card Cover — image if available, gradient fallback -->
|
||||
<view class="card-cover" :class="c.coverUrl ? '' : getCardCoverClass(c.type)">
|
||||
<image
|
||||
v-if="c.coverUrl"
|
||||
class="card-cover-img"
|
||||
:src="c.coverUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<template v-else>
|
||||
<view class="cover-deco cover-deco--1" />
|
||||
<view class="cover-deco cover-deco--2" />
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- Card info — aligns with card-cover height -->
|
||||
@@ -95,10 +85,19 @@
|
||||
<!-- Card content (single card mode) -->
|
||||
<template v-else>
|
||||
<!-- Hero section -->
|
||||
<view class="card-hero" :class="heroClass">
|
||||
<!-- Decorative circles -->
|
||||
<view class="card-hero" :class="cardData.coverUrl ? 'hero--custom' : heroClass">
|
||||
<!-- Cover image background -->
|
||||
<image
|
||||
v-if="cardData.coverUrl"
|
||||
class="hero-cover-img"
|
||||
:src="cardData.coverUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- Decorative circles (only when no cover image) -->
|
||||
<template v-else>
|
||||
<view class="hero-deco hero-deco--1" />
|
||||
<view class="hero-deco hero-deco--2" />
|
||||
</template>
|
||||
|
||||
<view class="hero-badge">
|
||||
<text class="hero-badge-text">{{ typeLabel }}</text>
|
||||
@@ -200,10 +199,12 @@
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import type { CardType, CreateOrderResponse } from '@mp-pilates/shared'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
import { get, post } from '../../utils/request'
|
||||
import { formatPrice, getCardTypeLabel, getCardCoverClass } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { requestOrderPaidSubscriptionMessage } from '../../utils/wechat-subscription'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
@@ -305,8 +306,8 @@ async function handleBuy() {
|
||||
if (!isNewUser) {
|
||||
handleBuy()
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -331,8 +332,10 @@ async function doPurchase() {
|
||||
uni.showLoading({ title: '创建订单...' })
|
||||
|
||||
try {
|
||||
const inviterId = uni.getStorageSync('invite_inviter_id') as string
|
||||
const result = await post<CreateOrderResponse>('/payment/create-order', {
|
||||
cardTypeId: card.value.id,
|
||||
inviterId: isTrial.value && inviterId ? inviterId : undefined,
|
||||
})
|
||||
|
||||
uni.hideLoading()
|
||||
@@ -352,6 +355,7 @@ async function doPurchase() {
|
||||
})
|
||||
|
||||
// Payment succeeded — refresh memberships then navigate
|
||||
await requestOrderPaidSubscriptionMessage().catch(() => undefined)
|
||||
uni.showToast({ title: '购买成功!', icon: 'success' })
|
||||
await userStore.fetchMemberships()
|
||||
setTimeout(() => {
|
||||
@@ -461,23 +465,35 @@ onMounted(() => {
|
||||
overflow: hidden;
|
||||
|
||||
&.hero--times {
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
|
||||
background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
|
||||
}
|
||||
|
||||
&.hero--duration {
|
||||
background: linear-gradient(135deg, #6c3483 0%, #9b59b6 100%);
|
||||
background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
|
||||
}
|
||||
|
||||
&.hero--trial {
|
||||
background: linear-gradient(135deg, #5a7a8a 0%, $primary-dark 100%);
|
||||
background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
|
||||
}
|
||||
|
||||
&.hero--custom {
|
||||
background: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-cover-img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Decorative background circles */
|
||||
.hero-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
pointer-events: none;
|
||||
|
||||
&--1 {
|
||||
@@ -499,14 +515,14 @@ onMounted(() => {
|
||||
align-self: flex-start;
|
||||
padding: 8rpx 22rpx;
|
||||
border-radius: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||||
background: rgba(74, 64, 53, 0.1);
|
||||
border: 1rpx solid rgba(74, 64, 53, 0.15);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-badge-text {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
color: $brand-color;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
@@ -514,7 +530,7 @@ onMounted(() => {
|
||||
.hero-name {
|
||||
font-size: 48rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
color: $brand-color;
|
||||
letter-spacing: 1rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -529,20 +545,20 @@ onMounted(() => {
|
||||
.hero-currency {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(74, 64, 53, 0.7);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-price {
|
||||
font-size: 64rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
color: $brand-color;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.hero-original {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
color: rgba(74, 64, 53, 0.4);
|
||||
text-decoration: line-through;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
@@ -575,7 +591,7 @@ onMounted(() => {
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
color: $text-primary;
|
||||
}
|
||||
|
||||
/* ── Info grid card ──────────────────────────────────── */
|
||||
@@ -741,239 +757,54 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
CARD COVER — Horizontal premium card design
|
||||
CARD COVER — Clean minimal design
|
||||
══════════════════════════════════════════════════════════ */
|
||||
.card-cover {
|
||||
width: 240rpx;
|
||||
width: 200rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
left: -20rpx;
|
||||
right: -20rpx;
|
||||
bottom: -20rpx;
|
||||
background: inherit;
|
||||
filter: blur(24rpx) brightness(0.8);
|
||||
z-index: 0;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.cover-accent-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
z-index: 1;
|
||||
.card-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&--tl {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
top: -16rpx;
|
||||
right: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
&--1 {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
top: -30rpx;
|
||||
right: -20rpx;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
&--br {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
bottom: -24rpx;
|
||||
left: -16rpx;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
}
|
||||
|
||||
.cover-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.cover-icon--TIMES {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.85);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 36rpx;
|
||||
height: 24rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 1);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.cover-icon--DURATION {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36rpx;
|
||||
height: 30rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.9);
|
||||
border-radius: 5rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 9rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 24rpx;
|
||||
height: 0;
|
||||
border-top: 2rpx solid rgba(255, 255, 255, 1);
|
||||
box-shadow:
|
||||
-6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9),
|
||||
6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.cover-icon--TRIAL {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border: 2rpx solid rgba(255, 255, 255, 1);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
&--2 {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
bottom: -20rpx;
|
||||
left: -10rpx;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 2rpx;
|
||||
height: 42rpx;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow:
|
||||
0 -12rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
0 12rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
-12rpx 0 0 0 rgba(255, 255, 255, 0.8),
|
||||
12rpx 0 0 0 rgba(255, 255, 255, 0.8),
|
||||
-8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
-8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8),
|
||||
8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.cover--times {
|
||||
background: linear-gradient(135deg, #1e2340 0%, #2d2d5e 50%, #3a3a7a 100%);
|
||||
background: linear-gradient(135deg, #E8D5C4 0%, #D4BFA8 100%);
|
||||
}
|
||||
|
||||
.cover--duration {
|
||||
background: linear-gradient(135deg, #4a1a6b 0%, #6c3483 50%, #8e4aaf 100%);
|
||||
background: linear-gradient(135deg, #D8C8DC 0%, #C4AECB 100%);
|
||||
}
|
||||
|
||||
.cover--trial {
|
||||
background: linear-gradient(135deg, #14527a 0%, #1a6fa0 50%, #48a9a6 100%);
|
||||
}
|
||||
|
||||
.cover-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 0 16rpx 0 12rpx;
|
||||
gap: 4rpx;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.cover-badge {
|
||||
padding: 3rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.cover-badge-text {
|
||||
font-size: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cover-name {
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.5rpx;
|
||||
line-height: 1.2;
|
||||
max-width: 130rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cover-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.cover-currency {
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.cover-price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cover-original {
|
||||
font-size: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-decoration: line-through;
|
||||
background: linear-gradient(135deg, #C8D8D2 0%, #A9C4BC 100%);
|
||||
}
|
||||
|
||||
/* ── Card info — matches card-cover height ── */
|
||||
|
||||
840
packages/app/src/pages/flash-sale/detail.vue
Normal file
840
packages/app/src/pages/flash-sale/detail.vue
Normal file
@@ -0,0 +1,840 @@
|
||||
<template>
|
||||
<view class="page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="限时秒杀" show-back />
|
||||
|
||||
<!-- Loading -->
|
||||
<view v-if="loading" class="loading-wrap">
|
||||
<view class="skeleton-hero" />
|
||||
<view class="skeleton-body">
|
||||
<view class="skeleton-line w80" />
|
||||
<view class="skeleton-line w60" />
|
||||
<view class="skeleton-line w40" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Error -->
|
||||
<view v-else-if="!detail" class="error-wrap">
|
||||
<text class="error-icon">◈</text>
|
||||
<text class="error-text">活动信息加载失败</text>
|
||||
<view class="retry-btn" @tap="loadDetail">
|
||||
<text class="retry-text">点击重试</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- ═══ Hero Section ═══ -->
|
||||
<view class="hero" :class="heroPhaseClass">
|
||||
<!-- Decorative elements -->
|
||||
<view class="hero-deco hero-deco--1" />
|
||||
<view class="hero-deco hero-deco--2" />
|
||||
<view class="hero-deco hero-deco--3" />
|
||||
|
||||
<!-- Phase badge -->
|
||||
<view class="hero-phase-badge" :class="phaseBadgeClass">
|
||||
<text class="hero-phase-text">{{ phaseLabel }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Title -->
|
||||
<text class="hero-title">{{ detail.title }}</text>
|
||||
|
||||
<!-- Price row -->
|
||||
<view class="hero-price-row">
|
||||
<text class="hero-currency">¥</text>
|
||||
<text class="hero-price">{{ formatPrice(detail.flashPrice) }}</text>
|
||||
<view class="hero-original-wrap">
|
||||
<text class="hero-original-label">原价</text>
|
||||
<text class="hero-original">¥{{ formatPrice(detail.originalPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Discount badge -->
|
||||
<view class="hero-discount-badge">
|
||||
<text class="hero-discount-text">立省 ¥{{ formatPrice(detail.originalPrice - detail.flashPrice) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Countdown -->
|
||||
<view
|
||||
v-if="detail.phase === FlashSalePhase.UPCOMING || detail.phase === FlashSalePhase.ONGOING"
|
||||
class="hero-countdown"
|
||||
>
|
||||
<text class="cd-label">
|
||||
{{ detail.phase === FlashSalePhase.UPCOMING ? '距开始' : '距结束' }}
|
||||
</text>
|
||||
<view class="cd-blocks">
|
||||
<text class="cd-block">{{ countdown.h }}</text>
|
||||
<text class="cd-colon">:</text>
|
||||
<text class="cd-block">{{ countdown.m }}</text>
|
||||
<text class="cd-colon">:</text>
|
||||
<text class="cd-block">{{ countdown.s }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ═══ Stock Bar ═══ -->
|
||||
<view class="stock-section">
|
||||
<view class="stock-info">
|
||||
<text class="stock-label">抢购进度</text>
|
||||
<text class="stock-count">
|
||||
{{ detail.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `已抢 ${detail.soldCount}/${detail.totalStock}` }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="stock-bar">
|
||||
<view
|
||||
class="stock-fill"
|
||||
:class="{ 'stock-fill--hot': stockRatio > 0.6 }"
|
||||
:style="{ width: stockPercent }"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ═══ Phone Auth Prompt ═══ -->
|
||||
<view
|
||||
v-if="userStore.loggedIn && !userStore.user?.phone"
|
||||
class="phone-prompt-card"
|
||||
>
|
||||
<view class="phone-prompt-content">
|
||||
<view class="phone-prompt-icon">📱</view>
|
||||
<view class="phone-prompt-text">
|
||||
<text class="phone-prompt-title">提前授权手机号</text>
|
||||
<text class="phone-prompt-desc">授权后抢购更快,也方便馆主联系您</text>
|
||||
</view>
|
||||
</view>
|
||||
<button
|
||||
class="phone-auth-btn"
|
||||
open-type="getPhoneNumber"
|
||||
@getphonenumber="handleGetPhone"
|
||||
>
|
||||
<text class="phone-auth-text">立即授权</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- ═══ Card Info ═══ -->
|
||||
<view class="detail-section">
|
||||
<view class="info-card">
|
||||
<view class="section-header-row">
|
||||
<view class="section-dot" />
|
||||
<text class="section-label">会员卡信息</text>
|
||||
</view>
|
||||
<view class="info-grid">
|
||||
<view class="info-cell">
|
||||
<text class="cell-value">{{ detail.cardType.name }}</text>
|
||||
<text class="cell-label">卡种</text>
|
||||
</view>
|
||||
<view v-if="detail.cardType.totalTimes" class="info-cell">
|
||||
<text class="cell-value">{{ detail.cardType.totalTimes }}</text>
|
||||
<text class="cell-label">课时次数</text>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<text class="cell-value">{{ detail.cardType.durationDays }}</text>
|
||||
<text class="cell-label">有效天数</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Description -->
|
||||
<view v-if="detail.description" class="desc-card">
|
||||
<view class="section-header-row">
|
||||
<view class="section-dot" />
|
||||
<text class="section-label">活动说明</text>
|
||||
</view>
|
||||
<text class="desc-content">{{ detail.description }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Purchase Notes -->
|
||||
<view class="notes-card">
|
||||
<view class="section-header-row">
|
||||
<view class="section-dot" />
|
||||
<text class="section-label">参与须知</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">每位用户同一秒杀活动仅限参与一次</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">购买后立即生效,有效期 {{ detail.cardType.durationDays }} 天</text>
|
||||
</view>
|
||||
<view v-if="detail.cardType.totalTimes" class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">共 {{ detail.cardType.totalTimes }} 次课时,可灵活预约</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">需登录并授权手机号后方可参与秒杀</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">建议提前完善账号信息及手机号授权,方便馆主联系</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">秒杀卡不可退款,到期或课时用完后自动失效</text>
|
||||
</view>
|
||||
<view class="note-item">
|
||||
<text class="note-dot">•</text>
|
||||
<text class="note-text">支持微信支付,安全便捷</text>
|
||||
</view>
|
||||
<view class="note-item note-item--disclaimer">
|
||||
<text class="note-text disclaimer-text">* 本活动最终解释权归普拉提馆所有</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ═══ Bottom Action Bar ═══ -->
|
||||
<view class="bottom-bar">
|
||||
<view class="bar-price-area">
|
||||
<text class="bar-price-label">秒杀价</text>
|
||||
<view class="bar-price-row">
|
||||
<text class="bar-currency">¥</text>
|
||||
<text class="bar-price">{{ formatPrice(detail.flashPrice) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="action-btn"
|
||||
:class="actionBtnClass"
|
||||
@tap="handleAction"
|
||||
>
|
||||
<text class="action-btn-text">{{ actionBtnText }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
FlashSalePhase,
|
||||
FlashSaleOrderStatus,
|
||||
} from '@mp-pilates/shared'
|
||||
import type { FlashSaleDetail } from '@mp-pilates/shared'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { useFlashSaleStore } from '../../stores/flash-sale'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { post } from '../../utils/request'
|
||||
import { requestOrderPaidSubscriptionMessage } from '../../utils/wechat-subscription'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const flashSaleStore = useFlashSaleStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
const loading = ref(false)
|
||||
const buying = ref(false)
|
||||
const detail = ref<FlashSaleDetail | null>(null)
|
||||
const flashSaleId = ref('')
|
||||
const tick = ref(0)
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// ─── Computed ─────────────────────────────────────────
|
||||
const phaseLabel = computed(() => {
|
||||
if (!detail.value) return ''
|
||||
return getFlashSalePhaseLabel(detail.value.phase)
|
||||
})
|
||||
|
||||
const heroPhaseClass = computed(() => {
|
||||
if (!detail.value) return ''
|
||||
if (detail.value.phase === FlashSalePhase.ONGOING) return 'hero--ongoing'
|
||||
if (detail.value.phase === FlashSalePhase.UPCOMING) return 'hero--upcoming'
|
||||
return 'hero--inactive'
|
||||
})
|
||||
|
||||
const phaseBadgeClass = computed(() => {
|
||||
if (!detail.value) return ''
|
||||
if (detail.value.phase === FlashSalePhase.ONGOING) return 'pbadge--ongoing'
|
||||
if (detail.value.phase === FlashSalePhase.UPCOMING) return 'pbadge--upcoming'
|
||||
return 'pbadge--inactive'
|
||||
})
|
||||
|
||||
const stockRatio = computed(() => {
|
||||
if (!detail.value) return 0
|
||||
return getStockRatio(detail.value.soldCount, detail.value.totalStock)
|
||||
})
|
||||
|
||||
const stockPercent = computed(() => {
|
||||
if (!detail.value) return '0%'
|
||||
return getStockPercent(detail.value.soldCount, detail.value.totalStock)
|
||||
})
|
||||
|
||||
const countdown = computed(() => {
|
||||
void tick.value
|
||||
if (!detail.value) return { h: '00', m: '00', s: '00' }
|
||||
const target = detail.value.phase === FlashSalePhase.UPCOMING
|
||||
? detail.value.startTime
|
||||
: detail.value.endTime
|
||||
return getCountdownParts(target)
|
||||
})
|
||||
|
||||
const isDisabled = computed(() => {
|
||||
if (!detail.value) return true
|
||||
const d = detail.value
|
||||
if (d.hasParticipated) return true
|
||||
if (d.phase === FlashSalePhase.SOLD_OUT) return true
|
||||
if (d.phase === FlashSalePhase.ENDED) return true
|
||||
if (d.phase === FlashSalePhase.UPCOMING) return true
|
||||
if (buying.value) return true
|
||||
return false
|
||||
})
|
||||
|
||||
const actionBtnText = computed(() => {
|
||||
if (!detail.value) return ''
|
||||
const d = detail.value
|
||||
|
||||
if (d.hasParticipated) {
|
||||
if (d.userOrderStatus === FlashSaleOrderStatus.PAID) return '已成功抢购'
|
||||
if (d.userOrderStatus === FlashSaleOrderStatus.RESERVED) return '待支付'
|
||||
return '已参与'
|
||||
}
|
||||
if (d.phase === FlashSalePhase.SOLD_OUT) return '已售罄'
|
||||
if (d.phase === FlashSalePhase.ENDED) return '活动已结束'
|
||||
if (d.phase === FlashSalePhase.UPCOMING) return `距开始 ${countdown.value.h}:${countdown.value.m}:${countdown.value.s}`
|
||||
|
||||
if (!userStore.loggedIn) return '登录后参与'
|
||||
if (!userStore.user?.phone) return '授权手机号后参与'
|
||||
if (buying.value) return '抢购中...'
|
||||
return `¥${formatPrice(d.flashPrice)} 立即抢购`
|
||||
})
|
||||
|
||||
const actionBtnClass = computed(() => {
|
||||
if (isDisabled.value) return 'action-btn--disabled'
|
||||
return 'action-btn--active'
|
||||
})
|
||||
|
||||
// ─── Data loading ────────────────────────────────────
|
||||
async function loadDetail() {
|
||||
if (!flashSaleId.value) return
|
||||
loading.value = true
|
||||
try {
|
||||
detail.value = await flashSaleStore.fetchDetail(flashSaleId.value)
|
||||
} catch {
|
||||
detail.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Phone auth ──────────────────────────────────────
|
||||
async function handleGetPhone(e: { detail: { code?: string; errMsg?: string } }) {
|
||||
if (!e.detail.code) return
|
||||
try {
|
||||
await post('/auth/phone', { code: e.detail.code })
|
||||
await userStore.fetchProfile()
|
||||
uni.showToast({ title: '授权成功', icon: 'success' })
|
||||
} catch {
|
||||
uni.showToast({ title: '授权失败,请重试', icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Action handler ──────────────────────────────────
|
||||
async function handleAction() {
|
||||
if (!detail.value || isDisabled.value) return
|
||||
|
||||
// Check login
|
||||
if (!userStore.loggedIn) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请先登录后再参与秒杀',
|
||||
confirmText: '去登录',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
const { isNewUser } = await userStore.loginWithSetup()
|
||||
if (!isNewUser) {
|
||||
await loadDetail() // refresh participation status
|
||||
}
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// Check phone
|
||||
if (!userStore.user?.phone) {
|
||||
uni.showToast({ title: '请先授权手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
// Confirm purchase
|
||||
uni.showModal({
|
||||
title: '确认抢购',
|
||||
content: `确认以 ¥${formatPrice(detail.value.flashPrice)} 抢购「${detail.value.title}」?`,
|
||||
confirmText: '确认抢购',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await doPurchase()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function doPurchase() {
|
||||
if (!detail.value || buying.value) return
|
||||
buying.value = true
|
||||
uni.showLoading({ title: '抢购中...' })
|
||||
|
||||
try {
|
||||
const result = await flashSaleStore.purchase(detail.value.id)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
// Launch WeChat Pay
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: result.paymentParams.timeStamp,
|
||||
nonceStr: result.paymentParams.nonceStr,
|
||||
package: result.paymentParams.package,
|
||||
signType: result.paymentParams.signType as 'MD5' | 'HMAC-SHA256',
|
||||
paySign: result.paymentParams.paySign,
|
||||
success: () => resolve(),
|
||||
fail: (err: { errMsg?: string }) => reject(new Error(err.errMsg ?? '支付取消')),
|
||||
})
|
||||
})
|
||||
|
||||
await requestOrderPaidSubscriptionMessage().catch(() => undefined)
|
||||
uni.showToast({ title: '抢购成功!', icon: 'success' })
|
||||
await userStore.fetchMemberships()
|
||||
await loadDetail() // refresh status
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({ url: '/pages/profile/membership' })
|
||||
}, 1500)
|
||||
} catch (err: unknown) {
|
||||
uni.hideLoading()
|
||||
const msg = err instanceof Error ? err.message : '抢购失败'
|
||||
if (!msg.includes('取消') && !msg.includes('cancel')) {
|
||||
uni.showToast({ title: msg, icon: 'none', duration: 3000 })
|
||||
}
|
||||
// Refresh detail to show updated status
|
||||
await loadDetail()
|
||||
} finally {
|
||||
buying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Lifecycle ───────────────────────────────────────
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
|
||||
const pages = getCurrentPages()
|
||||
const current = pages[pages.length - 1]
|
||||
const options = (current as { options?: Record<string, string> }).options ?? {}
|
||||
flashSaleId.value = options.id ?? ''
|
||||
loadDetail()
|
||||
|
||||
timer = setInterval(() => { tick.value++ }, 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (timer) {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: $bg-page;
|
||||
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
/* ── Loading ────────────────────────────── */
|
||||
.loading-wrap { padding: 0; }
|
||||
|
||||
.skeleton-hero {
|
||||
height: 420rpx;
|
||||
background: linear-gradient(90deg, #ede8e3 25%, #e4dfd9 50%, #ede8e3 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
.skeleton-body { padding: 32rpx 24rpx; display: flex; flex-direction: column; gap: 20rpx; }
|
||||
|
||||
.skeleton-line {
|
||||
height: 28rpx;
|
||||
border-radius: 14rpx;
|
||||
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
&.w80 { width: 80%; }
|
||||
&.w60 { width: 60%; }
|
||||
&.w40 { width: 40%; }
|
||||
}
|
||||
|
||||
/* ── Error ───────────────────────────────── */
|
||||
.error-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 160rpx 40rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.error-icon { font-size: 80rpx; }
|
||||
.error-text { font-size: 30rpx; color: $text-hint; }
|
||||
|
||||
.retry-btn {
|
||||
padding: 20rpx 48rpx;
|
||||
border-radius: 40rpx;
|
||||
background: linear-gradient(135deg, #D4A59A, #C08B7E);
|
||||
}
|
||||
|
||||
.retry-text { font-size: 28rpx; color: #fff; font-weight: 600; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
HERO — warm blush tones
|
||||
═══════════════════════════════════════════ */
|
||||
.hero {
|
||||
padding: 56rpx 36rpx 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero--ongoing {
|
||||
background: linear-gradient(135deg, #D4A59A 0%, #C9948A 35%, #B5836E 100%);
|
||||
}
|
||||
|
||||
.hero--upcoming {
|
||||
background: linear-gradient(135deg, #8FA89A 0%, #7BA5A0 100%);
|
||||
}
|
||||
|
||||
.hero--inactive {
|
||||
background: linear-gradient(135deg, #C4BAB0 0%, #AEA49A 100%);
|
||||
}
|
||||
|
||||
.hero-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
pointer-events: none;
|
||||
|
||||
&--1 { width: 300rpx; height: 300rpx; top: -60rpx; right: -40rpx; }
|
||||
&--2 { width: 200rpx; height: 200rpx; bottom: -60rpx; left: 30rpx; }
|
||||
&--3 { width: 120rpx; height: 120rpx; top: 40rpx; left: -30rpx; background: rgba(255, 255, 255, 0.05); }
|
||||
}
|
||||
|
||||
.hero-phase-badge {
|
||||
align-self: flex-start;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 24rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pbadge--ongoing { background: rgba(255, 255, 255, 0.3); }
|
||||
.pbadge--upcoming { background: rgba(255, 255, 255, 0.25); }
|
||||
.pbadge--inactive { background: rgba(0, 0, 0, 0.12); }
|
||||
|
||||
.hero-phase-text { font-size: 24rpx; color: #fff; font-weight: 600; letter-spacing: 1rpx; }
|
||||
|
||||
.hero-title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-currency { font-size: 30rpx; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
|
||||
.hero-price { font-size: 72rpx; font-weight: 800; color: #fff; line-height: 1; }
|
||||
|
||||
.hero-original-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.hero-original-label { font-size: 18rpx; color: rgba(255, 255, 255, 0.65); }
|
||||
.hero-original { font-size: 26rpx; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
|
||||
|
||||
.hero-discount-badge {
|
||||
align-self: flex-start;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 16rpx;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-discount-text { font-size: 22rpx; color: #fff; font-weight: 600; }
|
||||
|
||||
/* Countdown */
|
||||
.hero-countdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cd-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.85); }
|
||||
|
||||
.cd-blocks { display: flex; align-items: center; gap: 6rpx; }
|
||||
|
||||
.cd-block {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 8rpx;
|
||||
font-family: 'DIN Alternate', monospace;
|
||||
min-width: 48rpx;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.cd-colon { color: #fff; font-size: 28rpx; font-weight: 700; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
STOCK
|
||||
═══════════════════════════════════════════ */
|
||||
.stock-section {
|
||||
margin: 0 24rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
margin-top: -20rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.1);
|
||||
}
|
||||
|
||||
.stock-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.stock-label { font-size: 26rpx; color: $text-secondary; font-weight: 600; }
|
||||
.stock-count { font-size: 24rpx; color: #B5725E; font-weight: 600; }
|
||||
|
||||
.stock-bar {
|
||||
height: 16rpx;
|
||||
background: #f5f0ed;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stock-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #D4A59A, #C08B7E);
|
||||
border-radius: 8rpx;
|
||||
transition: width 0.3s;
|
||||
|
||||
&--hot { animation: stockPulse 2s ease infinite; }
|
||||
}
|
||||
|
||||
@keyframes stockPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
PHONE PROMPT
|
||||
═══════════════════════════════════════════ */
|
||||
.phone-prompt-card {
|
||||
margin: 20rpx 24rpx 0;
|
||||
background: linear-gradient(135deg, #FBF5F3, #F5ECEA);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1rpx solid rgba(192, 139, 126, 0.2);
|
||||
}
|
||||
|
||||
.phone-prompt-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.phone-prompt-icon { font-size: 40rpx; }
|
||||
|
||||
.phone-prompt-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.phone-prompt-title { font-size: 26rpx; font-weight: 700; color: #B5725E; }
|
||||
.phone-prompt-desc { font-size: 22rpx; color: $text-hint; }
|
||||
|
||||
.phone-auth-btn {
|
||||
background: linear-gradient(135deg, #D4A59A, #C08B7E) !important;
|
||||
border-radius: 32rpx !important;
|
||||
padding: 12rpx 28rpx !important;
|
||||
border: none !important;
|
||||
line-height: 1.4 !important;
|
||||
font-size: 24rpx !important;
|
||||
margin: 0 !important;
|
||||
flex-shrink: 0;
|
||||
&::after { border: none; }
|
||||
}
|
||||
|
||||
.phone-auth-text { font-size: 24rpx; color: #fff; font-weight: 600; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
DETAIL SECTION
|
||||
═══════════════════════════════════════════ */
|
||||
.detail-section {
|
||||
padding: 20rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.section-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.section-dot {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 3rpx;
|
||||
background: #C08B7E;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.section-label { font-size: 30rpx; font-weight: 700; color: $text-primary; }
|
||||
|
||||
/* Info card */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
& + & { border-left: 1rpx solid #f0ece8; }
|
||||
}
|
||||
|
||||
.cell-value { font-size: 36rpx; font-weight: 800; color: $text-primary; line-height: 1.1; }
|
||||
.cell-label { font-size: 22rpx; color: $text-hint; }
|
||||
|
||||
/* Description */
|
||||
.desc-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
|
||||
}
|
||||
|
||||
.desc-content { font-size: 27rpx; color: $text-secondary; line-height: 1.75; }
|
||||
|
||||
/* Notes */
|
||||
.notes-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12rpx;
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
.note-dot { font-size: 26rpx; color: #C08B7E; line-height: 1.65; flex-shrink: 0; }
|
||||
.note-text { font-size: 26rpx; color: $text-secondary; line-height: 1.65; }
|
||||
|
||||
.note-item--disclaimer { margin-top: 12rpx; padding-top: 16rpx; border-top: 1rpx solid #f0ece8; }
|
||||
.disclaimer-text { color: #bbb; font-size: 22rpx; }
|
||||
|
||||
/* ═══════════════════════════════════════════
|
||||
BOTTOM BAR
|
||||
═══════════════════════════════════════════ */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #fff;
|
||||
border-top: 1rpx solid #f0ece8;
|
||||
padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
box-shadow: 0 -4rpx 20rpx rgba(180, 160, 130, 0.08);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.bar-price-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.bar-price-label { font-size: 20rpx; color: $text-hint; }
|
||||
|
||||
.bar-price-row { display: flex; align-items: baseline; }
|
||||
|
||||
.bar-currency { font-size: 24rpx; font-weight: 700; color: #B5725E; }
|
||||
.bar-price { font-size: 44rpx; font-weight: 800; color: #B5725E; line-height: 1; }
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.action-btn--active {
|
||||
background: linear-gradient(90deg, #D4A59A, #B5836E);
|
||||
box-shadow: 0 4rpx 16rpx rgba(192, 139, 126, 0.35);
|
||||
|
||||
&:active { opacity: 0.85; }
|
||||
}
|
||||
|
||||
.action-btn--disabled {
|
||||
background: #d0cac4;
|
||||
}
|
||||
|
||||
.action-btn-text {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -35,11 +35,17 @@
|
||||
<!-- ④ Upcoming Bookings -->
|
||||
<UpcomingBooking />
|
||||
|
||||
<!-- ④.5 Flash Sale Section -->
|
||||
<FlashSaleSection ref="flashSaleRef" />
|
||||
|
||||
<!-- ⑤ Card Shop (vertical list) -->
|
||||
<view :id="cardShopAnchorId">
|
||||
<CardShop ref="cardShopRef" />
|
||||
</view>
|
||||
|
||||
<!-- ⑥ About (teacher + studio gallery) -->
|
||||
<AboutSection />
|
||||
|
||||
<!-- Bottom padding for tab bar -->
|
||||
<view class="bottom-padding" />
|
||||
</view>
|
||||
@@ -55,7 +61,9 @@ import BrandBanner from '../../components/BrandBanner.vue'
|
||||
import StudioInfo from '../../components/StudioInfo.vue'
|
||||
import QuickEntry from '../../components/QuickEntry.vue'
|
||||
import UpcomingBooking from '../../components/UpcomingBooking.vue'
|
||||
import FlashSaleSection from '../../components/FlashSaleSection.vue'
|
||||
import CardShop from '../../components/CardShop.vue'
|
||||
import AboutSection from '../../components/AboutSection.vue'
|
||||
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { useStudioStore } from '../../stores/studio'
|
||||
@@ -84,6 +92,7 @@ onShareTimeline(() => {
|
||||
// ─── Layout ───────────────────────────────────────────────
|
||||
const refreshing = ref(false)
|
||||
const cardShopRef = ref<InstanceType<typeof CardShop> | null>(null)
|
||||
const flashSaleRef = ref<InstanceType<typeof FlashSaleSection> | null>(null)
|
||||
const cardShopAnchorId = 'card-shop-anchor'
|
||||
const scrollTop = ref(0)
|
||||
const pendingScrollToCardShop = ref(false)
|
||||
@@ -114,6 +123,7 @@ async function refreshData() {
|
||||
|
||||
if (userStore.loggedIn) {
|
||||
tasks.push(
|
||||
userStore.fetchProfile(),
|
||||
userStore.fetchMemberships(),
|
||||
bookingStore.fetchUpcomingBookings(),
|
||||
)
|
||||
@@ -121,8 +131,9 @@ async function refreshData() {
|
||||
|
||||
await Promise.allSettled(tasks)
|
||||
|
||||
// Also refresh card shop
|
||||
// Also refresh card shop and flash sales
|
||||
cardShopRef.value?.fetchCardTypes()
|
||||
flashSaleRef.value?.fetchFlashSales()
|
||||
}
|
||||
|
||||
async function handleRefresh() {
|
||||
|
||||
@@ -8,8 +8,15 @@
|
||||
:loading="loginLoading" :nav-bar-height="navBarHeight" @login="handleLogin" />
|
||||
|
||||
<!-- Menu section: always visible -->
|
||||
<ProfileMenu :is-admin="isAdmin" :require-auth="loggedIn" @clear-cache="handleClearCache" @about="handleAbout"
|
||||
@require-login="handleLogin" />
|
||||
<ProfileMenu
|
||||
:is-admin="isAdmin"
|
||||
:require-auth="loggedIn"
|
||||
:active-membership-count="activeMembershipCount"
|
||||
:upcoming-booking-count="upcomingBookingCount"
|
||||
:invite-share-eligible="!!user?.inviteShareEligible"
|
||||
@clear-cache="handleClearCache"
|
||||
@require-login="handleLogin"
|
||||
/>
|
||||
|
||||
<!-- Logout button: only when logged in -->
|
||||
<view v-if="loggedIn" class="profile-page__logout-wrap">
|
||||
@@ -19,21 +26,33 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
import UserCard from '../../components/UserCard.vue'
|
||||
import ProfileMenu from '../../components/ProfileMenu.vue'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const bookingStore = useBookingStore()
|
||||
const { loggedIn, hasProfile, user, stats, memberships, isAdmin } = storeToRefs(userStore)
|
||||
const { upcomingBookings } = storeToRefs(bookingStore)
|
||||
|
||||
const loginLoading = ref(false)
|
||||
const navBarHeight = ref(64)
|
||||
|
||||
const activeMembershipCount = computed(
|
||||
() => user.value?.activeMembershipCount ?? userStore.activeMemberships.length,
|
||||
)
|
||||
|
||||
const upcomingBookingCount = computed(
|
||||
() => (loggedIn.value ? upcomingBookings.value.length : 0),
|
||||
)
|
||||
|
||||
// ─── 微信分享 ───────────────────────────────────────────────
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
@@ -60,6 +79,7 @@ onShow(async () => {
|
||||
userStore.fetchProfile(),
|
||||
userStore.fetchStats(),
|
||||
userStore.fetchMemberships(),
|
||||
bookingStore.fetchUpcomingBookings(),
|
||||
])
|
||||
}
|
||||
})
|
||||
@@ -70,10 +90,13 @@ async function handleLogin() {
|
||||
try {
|
||||
const { isNewUser } = await userStore.loginWithSetup()
|
||||
if (!isNewUser) {
|
||||
await userStore.fetchStats()
|
||||
await Promise.all([
|
||||
userStore.fetchStats(),
|
||||
bookingStore.fetchUpcomingBookings(),
|
||||
])
|
||||
}
|
||||
} catch {
|
||||
uni.showToast({ title: '登录失败,请重试', icon: 'none' })
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '登录失败,请重试'), icon: 'none' })
|
||||
} finally {
|
||||
loginLoading.value = false
|
||||
}
|
||||
@@ -106,13 +129,6 @@ function handleClearCache() {
|
||||
})
|
||||
}
|
||||
|
||||
function handleAbout() {
|
||||
uni.showModal({
|
||||
title: '关于我们',
|
||||
content: 'Focus Core 普拉提工作室\n版本 1.0.0\n\n专注核心,遇见更好的自己',
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
504
packages/app/src/pages/profile/invite.vue
Normal file
504
packages/app/src/pages/profile/invite.vue
Normal file
@@ -0,0 +1,504 @@
|
||||
<template>
|
||||
<view class="invite-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="邀请好友" show-back />
|
||||
|
||||
<scroll-view class="invite-scroll" scroll-y>
|
||||
<view class="hero-card">
|
||||
<view class="hero-glow hero-glow--one" />
|
||||
<view class="hero-glow hero-glow--two" />
|
||||
<text class="hero-badge">会员专享裂变活动</text>
|
||||
<text class="hero-title">邀 3 位好友体验并核销</text>
|
||||
<text class="hero-subtitle">好友购买体验课并完成上课后,会员卡立即奖励 1 节正课次数。</text>
|
||||
|
||||
<view class="hero-stats">
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ summary?.qualifiedInviteCount ?? 0 }}</text>
|
||||
<text class="hero-stat-label">已完成邀请</text>
|
||||
</view>
|
||||
<view class="hero-stat hero-stat--accent">
|
||||
<text class="hero-stat-value">{{ summary?.rewardedTimes ?? 0 }}</text>
|
||||
<text class="hero-stat-label">已得奖励</text>
|
||||
</view>
|
||||
<view class="hero-stat">
|
||||
<text class="hero-stat-value">{{ summary?.nextRewardRemainingCount ?? 3 }}</text>
|
||||
<text class="hero-stat-label">距下次奖励</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="progress-shell">
|
||||
<view class="progress-track">
|
||||
<view class="progress-fill" :style="{ width: progressWidth }" />
|
||||
</view>
|
||||
<text class="progress-caption">本轮进度 {{ summary?.currentCycleQualifiedCount ?? 0 }}/{{ summary?.rewardRuleInvitesRequired ?? 3 }}</text>
|
||||
</view>
|
||||
|
||||
<button class="share-btn" open-type="share">
|
||||
立即邀请好友
|
||||
</button>
|
||||
<text class="share-hint">分享后,新用户登录并购买体验课即可自动绑定邀请关系。</text>
|
||||
</view>
|
||||
|
||||
<view class="steps-card">
|
||||
<text class="section-title">活动规则</text>
|
||||
<view v-for="item in ruleSteps" :key="item.title" class="step-item">
|
||||
<view class="step-index">{{ item.index }}</view>
|
||||
<view class="step-body">
|
||||
<text class="step-title">{{ item.title }}</text>
|
||||
<text class="step-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="referrals-card">
|
||||
<view class="section-head">
|
||||
<text class="section-title">邀请进度</text>
|
||||
<text class="section-meta">待完成 {{ summary?.pendingInviteCount ?? 0 }} 人</text>
|
||||
</view>
|
||||
|
||||
<view v-if="summary?.referrals?.length" class="referral-list">
|
||||
<view v-for="item in summary.referrals" :key="item.id" class="referral-item">
|
||||
<image v-if="item.inviteeAvatarUrl" class="referral-avatar" :src="item.inviteeAvatarUrl" mode="aspectFill" />
|
||||
<view v-else class="referral-avatar referral-avatar--placeholder">友</view>
|
||||
<view class="referral-main">
|
||||
<text class="referral-name">{{ item.inviteeNickname || '新好友' }}</text>
|
||||
<text class="referral-time">邀请于 {{ formatDateTime(item.invitedAt) }}</text>
|
||||
</view>
|
||||
<text class="referral-status" :class="statusClass(item.status)">{{ statusLabel(item.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-block">
|
||||
<text class="empty-title">还没有邀请记录</text>
|
||||
<text class="empty-desc">先分享给 3 位好友,完成一次体验闭环就会在这里点亮进度。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="reward-card">
|
||||
<view class="section-head">
|
||||
<text class="section-title">奖励记录</text>
|
||||
<text class="section-meta">累计 {{ summary?.rewardedTimes ?? 0 }} 节</text>
|
||||
</view>
|
||||
<view v-if="summary?.rewardGrants?.length" class="reward-list">
|
||||
<view v-for="item in summary.rewardGrants" :key="item.id" class="reward-item">
|
||||
<text class="reward-item-title">完成 {{ item.qualifiedReferralCount }} 位好友核销</text>
|
||||
<text class="reward-item-time">{{ formatDateTime(item.grantedAt) }}</text>
|
||||
<text class="reward-item-tag">+{{ item.rewardTimes }} 节</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-block empty-block--warm">
|
||||
<text class="empty-title">还未获得奖励</text>
|
||||
<text class="empty-desc">每 3 位好友完成体验核销,系统自动增加 1 节真实会员课次。</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-space" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import { InviteReferralStatus } from '@mp-pilates/shared'
|
||||
import { useInviteStore } from '../../stores/invite'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { formatDateTime } from '../../utils/format'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const inviteStore = useInviteStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
|
||||
const summary = computed(() => inviteStore.activity)
|
||||
const progressWidth = computed(() => {
|
||||
const current = summary.value?.currentCycleQualifiedCount ?? 0
|
||||
const total = summary.value?.rewardRuleInvitesRequired ?? 3
|
||||
return `${Math.min(100, (current / total) * 100)}%`
|
||||
})
|
||||
|
||||
const ruleSteps = [
|
||||
{ index: '01', title: '分享活动页', desc: '会员用户把活动页转发给微信好友或朋友圈。' },
|
||||
{ index: '02', title: '好友购买体验课', desc: '新好友通过你的分享进入,并成功购买体验课。' },
|
||||
{ index: '03', title: '体验课完成核销', desc: '好友到店体验并被老师核销后,这次邀请记为有效。' },
|
||||
{ index: '04', title: '满 3 人自动加课', desc: '每累计 3 位有效邀请,系统自动给你的会员卡增加 1 节。' },
|
||||
]
|
||||
|
||||
onLoad((query) => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
const inviterId = typeof query?.inviterId === 'string' ? query.inviterId : ''
|
||||
if (inviterId) {
|
||||
uni.setStorageSync('invite_inviter_id', inviterId)
|
||||
}
|
||||
})
|
||||
|
||||
onShow(async () => {
|
||||
if (!userStore.loggedIn) {
|
||||
return
|
||||
}
|
||||
await Promise.all([
|
||||
userStore.fetchProfile(),
|
||||
inviteStore.fetchActivity(),
|
||||
])
|
||||
})
|
||||
|
||||
onShareAppMessage(() => ({
|
||||
title: '邀 3 位好友体验核销,立得 1 节会员正课',
|
||||
path: summary.value?.sharePath || `/pages/profile/invite?inviterId=${userStore.user?.id || ''}`,
|
||||
imageUrl: '',
|
||||
}))
|
||||
|
||||
onShareTimeline(() => ({
|
||||
title: '邀 3 位好友体验核销,立得 1 节会员正课',
|
||||
query: `inviterId=${userStore.user?.id || ''}`,
|
||||
}))
|
||||
|
||||
function statusLabel(status: InviteReferralStatus): string {
|
||||
const map: Record<InviteReferralStatus, string> = {
|
||||
[InviteReferralStatus.REGISTERED]: '已注册',
|
||||
[InviteReferralStatus.TRIAL_PURCHASED]: '已购体验课',
|
||||
[InviteReferralStatus.QUALIFIED]: '已完成核销',
|
||||
}
|
||||
return map[status]
|
||||
}
|
||||
|
||||
function statusClass(status: InviteReferralStatus): string {
|
||||
if (status === InviteReferralStatus.QUALIFIED) return 'referral-status--done'
|
||||
if (status === InviteReferralStatus.TRIAL_PURCHASED) return 'referral-status--paid'
|
||||
return 'referral-status--registered'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.invite-page {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 142, 83, 0.28), transparent 34%),
|
||||
radial-gradient(circle at top right, rgba(255, 214, 102, 0.34), transparent 26%),
|
||||
linear-gradient(180deg, #fff5db 0%, #ffe7ea 30%, #fef7ff 100%);
|
||||
}
|
||||
|
||||
.invite-scroll {
|
||||
height: 100vh;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.steps-card,
|
||||
.referrals-card,
|
||||
.reward-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 36rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 18rpx 50rpx rgba(157, 70, 42, 0.08);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
background: linear-gradient(135deg, #ff7a45 0%, #ff4d6d 48%, #ffb347 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.28;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.hero-glow--one {
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
top: -90rpx;
|
||||
right: -40rpx;
|
||||
}
|
||||
|
||||
.hero-glow--two {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
bottom: -50rpx;
|
||||
left: -40rpx;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
padding: 10rpx 18rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
display: block;
|
||||
margin-top: 18rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.hero-stat {
|
||||
padding: 24rpx 18rpx;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.hero-stat--accent {
|
||||
background: rgba(75, 16, 16, 0.22);
|
||||
}
|
||||
|
||||
.hero-stat-value {
|
||||
display: block;
|
||||
font-size: 46rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.hero-stat-label {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.progress-shell {
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 20rpx;
|
||||
border-radius: 999rpx;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #fff7ad 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.progress-caption {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.88);
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
margin-top: 28rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #ff5a3c;
|
||||
background: linear-gradient(90deg, #fff7e4 0%, #ffffff 100%);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.share-hint {
|
||||
display: block;
|
||||
margin-top: 14rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.steps-card {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 247, 234, 0.92));
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #30201a;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22rpx;
|
||||
}
|
||||
|
||||
.section-meta {
|
||||
font-size: 22rpx;
|
||||
color: #9b6b55;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
align-items: flex-start;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid rgba(214, 171, 134, 0.2);
|
||||
}
|
||||
|
||||
.step-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.step-index {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 64rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #ff8f5a 0%, #ff4d6d 100%);
|
||||
}
|
||||
|
||||
.step-body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #36231d;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
color: #7b5d52;
|
||||
}
|
||||
|
||||
.referrals-card {
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fff7fb 100%);
|
||||
}
|
||||
|
||||
.reward-card {
|
||||
background: linear-gradient(180deg, #fffdf5 0%, #fff2dc 100%);
|
||||
}
|
||||
|
||||
.referral-item,
|
||||
.reward-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid rgba(221, 196, 177, 0.35);
|
||||
}
|
||||
|
||||
.referral-item:last-child,
|
||||
.reward-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.referral-avatar {
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 18rpx;
|
||||
background: #ffd9c8;
|
||||
}
|
||||
|
||||
.referral-avatar--placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ff6f3c;
|
||||
}
|
||||
|
||||
.referral-main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.referral-name,
|
||||
.reward-item-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #31211a;
|
||||
}
|
||||
|
||||
.referral-time,
|
||||
.reward-item-time {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #8b6d62;
|
||||
}
|
||||
|
||||
.referral-status,
|
||||
.reward-item-tag {
|
||||
padding: 12rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.referral-status--registered {
|
||||
color: #9c5e2f;
|
||||
background: #fff0de;
|
||||
}
|
||||
|
||||
.referral-status--paid {
|
||||
color: #c44f1f;
|
||||
background: #ffe0d1;
|
||||
}
|
||||
|
||||
.referral-status--done,
|
||||
.reward-item-tag {
|
||||
color: #0f7a53;
|
||||
background: #dff7ea;
|
||||
}
|
||||
|
||||
.empty-block {
|
||||
padding: 36rpx 0 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-block--warm {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #5f4337;
|
||||
}
|
||||
|
||||
.empty-desc {
|
||||
display: block;
|
||||
margin-top: 12rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.8;
|
||||
color: #9c7d70;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 48rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<view class="membership-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="我的会员卡" show-back />
|
||||
<!-- Pull-to-refresh scroll view -->
|
||||
<scroll-view
|
||||
class="scroll"
|
||||
scroll-y
|
||||
@@ -16,11 +15,14 @@
|
||||
|
||||
<!-- Empty state -->
|
||||
<view v-else-if="allMemberships.length === 0" class="empty-wrap">
|
||||
<text class="empty-icon">💳</text>
|
||||
<text class="empty-title">暂无会员卡</text>
|
||||
<view class="empty-card">
|
||||
<view class="empty-deco empty-deco--1" />
|
||||
<view class="empty-deco empty-deco--2" />
|
||||
<text class="empty-title">还没有会员卡</text>
|
||||
<text class="empty-sub">购买会员卡后即可预约课程</text>
|
||||
<view class="empty-btn" @tap="goStore">
|
||||
<text class="empty-btn-text">去购买</text>
|
||||
<text class="empty-btn-text">去选购</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -29,7 +31,6 @@
|
||||
<!-- Active cards -->
|
||||
<view v-if="activeMemberships.length > 0" class="group-section">
|
||||
<view class="group-header">
|
||||
<view class="group-dot group-dot--active" />
|
||||
<text class="group-title">有效会员卡</text>
|
||||
<text class="group-count">{{ activeMemberships.length }} 张</text>
|
||||
</view>
|
||||
@@ -37,56 +38,60 @@
|
||||
<view
|
||||
v-for="m in activeMemberships"
|
||||
:key="m.id"
|
||||
class="card-item"
|
||||
class="mc"
|
||||
:class="cardBgClass(m.cardType.type)"
|
||||
>
|
||||
<!-- Colored left border strip -->
|
||||
<view class="card-strip" :class="stripClass(m.cardType.type)" />
|
||||
<!-- Decorative circles -->
|
||||
<view class="mc-deco mc-deco--1" />
|
||||
<view class="mc-deco mc-deco--2" />
|
||||
|
||||
<!-- Card header (colored gradient) -->
|
||||
<view class="card-header" :class="headerClass(m.cardType.type)">
|
||||
<view class="card-header-left">
|
||||
<text class="card-name">{{ m.cardType.name }}</text>
|
||||
<view class="card-type-badge">
|
||||
<text class="card-type-badge-text">{{ typeLabel(m.cardType.type) }}</text>
|
||||
<!-- Top row: name + status -->
|
||||
<view class="mc-top">
|
||||
<view class="mc-name-area">
|
||||
<text class="mc-name">{{ m.cardType.name }}</text>
|
||||
<view class="mc-type-tag">
|
||||
<text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-badge status-badge--active">
|
||||
<text class="status-badge-text">有效</text>
|
||||
<view class="mc-status mc-status--active">
|
||||
<view class="mc-status-dot" />
|
||||
<text class="mc-status-text">有效</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Card body -->
|
||||
<view class="card-body">
|
||||
<!-- Times card: remaining times + progress -->
|
||||
<template v-if="m.remainingTimes !== null">
|
||||
<view class="highlight-row">
|
||||
<text class="highlight-label">剩余课时</text>
|
||||
<text class="highlight-value">
|
||||
<text class="highlight-number">{{ m.remainingTimes }}</text>
|
||||
<text class="highlight-unit"> 次</text>
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="m.cardType.totalTimes" class="progress-wrap">
|
||||
<view class="progress-bar">
|
||||
<!-- Center: highlight number (times card) -->
|
||||
<view v-if="m.remainingTimes !== null" class="mc-center">
|
||||
<text class="mc-big-num">{{ m.remainingTimes }}</text>
|
||||
<text class="mc-big-unit">次剩余</text>
|
||||
<view v-if="m.cardType.totalTimes" class="mc-progress">
|
||||
<view class="mc-progress-track">
|
||||
<view
|
||||
class="progress-fill"
|
||||
:style="{ width: progressWidth(m) }"
|
||||
class="mc-progress-fill"
|
||||
:style="{ width: getMembershipProgressWidth(m) }"
|
||||
/>
|
||||
</view>
|
||||
<text class="progress-label">
|
||||
已使用 {{ usedTimes(m) }} / {{ m.cardType.totalTimes }} 次
|
||||
<text class="mc-progress-label">
|
||||
已用 {{ getMembershipUsedTimes(m) }},共 {{ m.cardType.totalTimes }} 次
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- Duration card: expiry -->
|
||||
<view class="info-row">
|
||||
<text class="info-label">有效期至</text>
|
||||
<text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">开始日期</text>
|
||||
<text class="info-value">{{ m.startDate.slice(0, 10) }}</text>
|
||||
|
||||
<!-- Center: duration card (no times) -->
|
||||
<view v-else class="mc-center">
|
||||
<text class="mc-big-num">{{ daysRemaining(m) }}</text>
|
||||
<text class="mc-big-unit">天剩余</text>
|
||||
</view>
|
||||
|
||||
<!-- Bottom: dates -->
|
||||
<view class="mc-bottom">
|
||||
<view class="mc-date-item">
|
||||
<text class="mc-date-label">开始</text>
|
||||
<text class="mc-date-value">{{ m.startDate.slice(0, 10) }}</text>
|
||||
</view>
|
||||
<view class="mc-date-sep" />
|
||||
<view class="mc-date-item">
|
||||
<text class="mc-date-label">到期</text>
|
||||
<text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -95,7 +100,6 @@
|
||||
<!-- Expired / used up cards -->
|
||||
<view v-if="inactiveMemberships.length > 0" class="group-section">
|
||||
<view class="group-header">
|
||||
<view class="group-dot group-dot--inactive" />
|
||||
<text class="group-title">历史记录</text>
|
||||
<text class="group-count">{{ inactiveMemberships.length }} 张</text>
|
||||
</view>
|
||||
@@ -103,28 +107,30 @@
|
||||
<view
|
||||
v-for="m in inactiveMemberships"
|
||||
:key="m.id"
|
||||
class="card-item card-item--inactive"
|
||||
class="mc mc--inactive"
|
||||
>
|
||||
<view class="card-strip card-strip--inactive" />
|
||||
<view class="card-header card-header--inactive">
|
||||
<view class="card-header-left">
|
||||
<text class="card-name card-name--dim">{{ m.cardType.name }}</text>
|
||||
<view class="card-type-badge card-type-badge--dim">
|
||||
<text class="card-type-badge-text">{{ typeLabel(m.cardType.type) }}</text>
|
||||
<view class="mc-deco mc-deco--1" />
|
||||
|
||||
<view class="mc-top">
|
||||
<view class="mc-name-area">
|
||||
<text class="mc-name">{{ m.cardType.name }}</text>
|
||||
<view class="mc-type-tag">
|
||||
<text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-badge" :class="statusBadgeClass(m.status)">
|
||||
<text class="status-badge-text">{{ statusLabel(m.status) }}</text>
|
||||
<view class="mc-status" :class="inactiveStatusClass(m.status)">
|
||||
<text class="mc-status-text">{{ statusLabel(m.status) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view v-if="m.remainingTimes !== null" class="info-row">
|
||||
<text class="info-label">剩余课时</text>
|
||||
<text class="info-value">{{ m.remainingTimes }} 次</text>
|
||||
|
||||
<view class="mc-inactive-info">
|
||||
<view v-if="m.remainingTimes !== null" class="mc-date-item">
|
||||
<text class="mc-date-label">剩余</text>
|
||||
<text class="mc-date-value">{{ m.remainingTimes }} 次</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">有效期至</text>
|
||||
<text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
|
||||
<view class="mc-date-item">
|
||||
<text class="mc-date-label">有效期至</text>
|
||||
<text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -136,8 +142,7 @@
|
||||
|
||||
<!-- Buy more FAB -->
|
||||
<view class="fab" @tap="goStore">
|
||||
<text class="fab-icon">+</text>
|
||||
<text class="fab-text">购买会员卡</text>
|
||||
<text class="fab-text">+ 购买会员卡</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -148,17 +153,15 @@ import type { MembershipWithCardType } from '@mp-pilates/shared'
|
||||
import { MembershipStatus, CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { getCardTypeLabel, getMembershipProgressWidth, getMembershipUsedTimes } from '../../utils/format'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// ─── Nav bar height ──────────────────────────────────────
|
||||
const navBarHeight = ref('64px')
|
||||
// ─── State ────────────────────────────────────────────────
|
||||
const loading = ref(false)
|
||||
const refreshing = ref(false)
|
||||
|
||||
// ─── Computed from store ───────────────────────────────────
|
||||
const allMemberships = computed(() => userStore.memberships as MembershipWithCardType[])
|
||||
|
||||
const activeMemberships = computed(() =>
|
||||
@@ -169,16 +172,6 @@ const inactiveMemberships = computed(() =>
|
||||
allMemberships.value.filter((m) => m.status !== MembershipStatus.ACTIVE),
|
||||
)
|
||||
|
||||
// ─── Helpers ──────────────────────────────────────────────
|
||||
function typeLabel(type: CardTypeCategory): string {
|
||||
const map: Record<CardTypeCategory, string> = {
|
||||
[CardTypeCategory.TIMES]: '次卡',
|
||||
[CardTypeCategory.DURATION]: '月卡',
|
||||
[CardTypeCategory.TRIAL]: '体验卡',
|
||||
}
|
||||
return map[type] ?? '会员卡'
|
||||
}
|
||||
|
||||
function statusLabel(status: MembershipStatus): string {
|
||||
const map: Record<MembershipStatus, string> = {
|
||||
[MembershipStatus.ACTIVE]: '有效',
|
||||
@@ -188,36 +181,22 @@ function statusLabel(status: MembershipStatus): string {
|
||||
return map[status] ?? status
|
||||
}
|
||||
|
||||
function statusBadgeClass(status: MembershipStatus): string {
|
||||
if (status === MembershipStatus.EXPIRED) return 'status-badge--expired'
|
||||
if (status === MembershipStatus.USED_UP) return 'status-badge--used'
|
||||
return 'status-badge--expired'
|
||||
function inactiveStatusClass(status: MembershipStatus): string {
|
||||
if (status === MembershipStatus.USED_UP) return 'mc-status--used'
|
||||
return 'mc-status--expired'
|
||||
}
|
||||
|
||||
function stripClass(type: CardTypeCategory): string {
|
||||
if (type === CardTypeCategory.TRIAL) return 'card-strip--trial'
|
||||
if (type === CardTypeCategory.DURATION) return 'card-strip--duration'
|
||||
return 'card-strip--times'
|
||||
function cardBgClass(type: CardTypeCategory): string {
|
||||
if (type === CardTypeCategory.TRIAL) return 'mc--trial'
|
||||
if (type === CardTypeCategory.DURATION) return 'mc--duration'
|
||||
return 'mc--times'
|
||||
}
|
||||
|
||||
function headerClass(type: CardTypeCategory): string {
|
||||
if (type === CardTypeCategory.TRIAL) return 'card-header--trial'
|
||||
if (type === CardTypeCategory.DURATION) return 'card-header--duration'
|
||||
return 'card-header--times'
|
||||
function daysRemaining(m: MembershipWithCardType): number {
|
||||
const diff = new Date(m.expireDate).getTime() - Date.now()
|
||||
return Math.max(0, Math.ceil(diff / 86_400_000))
|
||||
}
|
||||
|
||||
function progressWidth(m: MembershipWithCardType): string {
|
||||
if (m.remainingTimes === null || !m.cardType.totalTimes) return '0%'
|
||||
const pct = (m.remainingTimes / m.cardType.totalTimes) * 100
|
||||
return `${Math.max(0, Math.min(100, pct))}%`
|
||||
}
|
||||
|
||||
function usedTimes(m: MembershipWithCardType): number {
|
||||
if (m.remainingTimes === null || !m.cardType.totalTimes) return 0
|
||||
return m.cardType.totalTimes - m.remainingTimes
|
||||
}
|
||||
|
||||
// ─── Data loading ─────────────────────────────────────────
|
||||
async function loadMemberships() {
|
||||
loading.value = true
|
||||
try {
|
||||
@@ -239,7 +218,6 @@ function goStore() {
|
||||
uni.switchTab({ url: '/pages/home/index' })
|
||||
}
|
||||
|
||||
// ─── Lifecycle ────────────────────────────────────────────
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
loadMemberships()
|
||||
@@ -249,313 +227,373 @@ onMounted(() => {
|
||||
<style lang="scss" scoped>
|
||||
.membership-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f3f0;
|
||||
background: $bg-page;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* ── Loading ─────────────────────────────────────────── */
|
||||
/* ── Loading ─────────────────────────────── */
|
||||
.loading-wrap {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
height: 220rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
|
||||
height: 320rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
|
||||
background-size: 400% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
/* ── Empty ───────────────────────────────────────────── */
|
||||
/* ── Empty ────────────────────────────────── */
|
||||
.empty-wrap {
|
||||
padding: 80rpx 24rpx;
|
||||
}
|
||||
|
||||
.empty-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, #E8D5C4, #D8C8DC);
|
||||
border-radius: 24rpx;
|
||||
padding: 64rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
gap: 20rpx;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
.empty-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
&--1 {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
top: -60rpx;
|
||||
right: -40rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
bottom: -40rpx;
|
||||
left: -20rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: $brand-color;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.empty-sub {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
color: $text-secondary;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
margin-top: 12rpx;
|
||||
padding: 22rpx 60rpx;
|
||||
border-radius: 44rpx;
|
||||
background: $primary-dark;
|
||||
box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
|
||||
margin-top: 16rpx;
|
||||
padding: 20rpx 56rpx;
|
||||
border-radius: 40rpx;
|
||||
background: rgba(74, 64, 53, 0.12);
|
||||
z-index: 1;
|
||||
|
||||
&:active { background: rgba(74, 64, 53, 0.18); }
|
||||
}
|
||||
|
||||
.empty-btn-text {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
color: $brand-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── List ────────────────────────────────────────────── */
|
||||
/* ── List ─────────────────────────────────── */
|
||||
.list {
|
||||
padding: 24rpx 24rpx 0;
|
||||
padding: 16rpx 24rpx 0;
|
||||
}
|
||||
|
||||
/* ── Group section ───────────────────────────────────── */
|
||||
/* ── Group ────────────────────────────────── */
|
||||
.group-section {
|
||||
margin-bottom: 8rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
padding: 8rpx 4rpx 14rpx;
|
||||
}
|
||||
|
||||
.group-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--active { background: #4caf50; }
|
||||
&--inactive { background: #bbb; }
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 8rpx 16rpx;
|
||||
}
|
||||
|
||||
.group-title {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
color: $text-hint;
|
||||
}
|
||||
|
||||
/* ── Card item ───────────────────────────────────────── */
|
||||
.card-item {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
/* ══════════════════════════════════════════════
|
||||
MEMBERSHIP CARD (mc)
|
||||
══════════════════════════════════════════════ */
|
||||
.mc {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
|
||||
border-radius: 24rpx;
|
||||
padding: 28rpx 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
&--inactive {
|
||||
opacity: 0.72;
|
||||
/* Card type backgrounds */
|
||||
.mc--times {
|
||||
background: linear-gradient(135deg, #EDE0D4 0%, #E2D2C2 100%);
|
||||
box-shadow: 0 4rpx 20rpx rgba(212, 191, 168, 0.3);
|
||||
}
|
||||
|
||||
.mc--duration {
|
||||
background: linear-gradient(135deg, #E0D4E4 0%, #D4C6DA 100%);
|
||||
box-shadow: 0 4rpx 20rpx rgba(196, 174, 203, 0.3);
|
||||
}
|
||||
|
||||
.mc--trial {
|
||||
background: linear-gradient(135deg, #D4E2DC 0%, #C6D8D0 100%);
|
||||
box-shadow: 0 4rpx 20rpx rgba(169, 196, 188, 0.3);
|
||||
}
|
||||
|
||||
.mc--inactive {
|
||||
background: linear-gradient(135deg, #E8E4E0, #DDD9D5);
|
||||
box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.12);
|
||||
opacity: 0.75;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
/* Decorative circles */
|
||||
.mc-deco {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
|
||||
&--1 {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
top: -50rpx;
|
||||
right: -30rpx;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
bottom: -30rpx;
|
||||
left: 40rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Colored left border strip */
|
||||
.card-strip {
|
||||
height: 6rpx;
|
||||
|
||||
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
&--inactive { background: #ccc; }
|
||||
}
|
||||
|
||||
/* Card header gradient area */
|
||||
.card-header {
|
||||
padding: 22rpx 28rpx;
|
||||
/* ── Top row ──────────────────────────────── */
|
||||
.mc-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
&--times { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
|
||||
&--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
|
||||
&--trial { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
|
||||
&--inactive { background: #888; }
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-header-left {
|
||||
.mc-name-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 32rpx;
|
||||
.mc-name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
|
||||
&--dim { color: #ddd; }
|
||||
color: #2C2420;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-type-badge {
|
||||
.mc-type-tag {
|
||||
align-self: flex-start;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.25);
|
||||
|
||||
&--dim {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
border-radius: 10rpx;
|
||||
background: rgba(44, 36, 32, 0.1);
|
||||
}
|
||||
|
||||
.card-type-badge-text {
|
||||
.mc-type-text {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
color: rgba(44, 36, 32, 0.6);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Status badge */
|
||||
.status-badge {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
/* Status */
|
||||
.mc-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--active { background: rgba(76, 175, 80, 0.3); }
|
||||
&--expired { background: rgba(0, 0, 0, 0.2); }
|
||||
&--used { background: rgba(0, 0, 0, 0.2); }
|
||||
}
|
||||
|
||||
.status-badge-text {
|
||||
.mc-status--active {
|
||||
background: rgba(122, 158, 126, 0.18);
|
||||
}
|
||||
|
||||
.mc-status--expired,
|
||||
.mc-status--used {
|
||||
background: rgba(74, 64, 53, 0.08);
|
||||
}
|
||||
|
||||
.mc-status-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
.mc-status-text {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
color: #2C2420;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Card body */
|
||||
.card-body {
|
||||
padding: 20rpx 28rpx 24rpx;
|
||||
/* ── Center: big number ───────────────────── */
|
||||
.mc-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.highlight-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.highlight-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.highlight-number {
|
||||
font-size: 44rpx;
|
||||
font-weight: 800;
|
||||
color: $primary-dark;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.highlight-unit {
|
||||
font-size: 22rpx;
|
||||
color: $primary-dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8rpx 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
.mc-big-num {
|
||||
font-size: 80rpx;
|
||||
font-weight: 800;
|
||||
color: #2C2420;
|
||||
line-height: 1;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
.mc-big-unit {
|
||||
font-size: 24rpx;
|
||||
color: rgba(44, 36, 32, 0.55);
|
||||
font-weight: 500;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
/* ── Progress bar ────────────────────────────────────── */
|
||||
.progress-wrap {
|
||||
/* Progress */
|
||||
.mc-progress {
|
||||
width: 100%;
|
||||
max-width: 400rpx;
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 8rpx;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4rpx;
|
||||
.mc-progress-track {
|
||||
height: 10rpx;
|
||||
background: rgba(44, 36, 32, 0.1);
|
||||
border-radius: 5rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
.mc-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, $primary-dark, $primary-color);
|
||||
border-radius: 4rpx;
|
||||
background: rgba(44, 36, 32, 0.35);
|
||||
border-radius: 5rpx;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
text-align: right;
|
||||
.mc-progress-label {
|
||||
font-size: 20rpx;
|
||||
color: rgba(44, 36, 32, 0.45);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── FAB ─────────────────────────────────────────────── */
|
||||
/* ── Bottom: dates ────────────────────────── */
|
||||
.mc-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
z-index: 1;
|
||||
padding-top: 4rpx;
|
||||
border-top: 1rpx solid rgba(44, 36, 32, 0.1);
|
||||
}
|
||||
|
||||
.mc-date-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.mc-date-sep {
|
||||
width: 1rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(44, 36, 32, 0.12);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mc-date-label {
|
||||
font-size: 20rpx;
|
||||
color: rgba(44, 36, 32, 0.4);
|
||||
}
|
||||
|
||||
.mc-date-value {
|
||||
font-size: 24rpx;
|
||||
color: #2C2420;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Inactive info ────────────────────────── */
|
||||
.mc-inactive-info {
|
||||
display: flex;
|
||||
gap: 40rpx;
|
||||
padding-left: 4rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ── FAB ──────────────────────────────────── */
|
||||
.fab {
|
||||
position: fixed;
|
||||
bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||
right: 32rpx;
|
||||
background: #1a1a2e;
|
||||
background: $brand-color;
|
||||
border-radius: 44rpx;
|
||||
padding: 22rpx 36rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 6rpx 24rpx rgba(74, 64, 53, 0.25);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
font-size: 36rpx;
|
||||
color: $primary-dark;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
&:active { opacity: 0.85; }
|
||||
}
|
||||
|
||||
.fab-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: $primary-dark;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* ── Spacer ──────────────────────────────────────────── */
|
||||
/* ── Spacer ───────────────────────────────── */
|
||||
.scroll-bottom-spacer {
|
||||
height: 120rpx;
|
||||
height: 140rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
582
packages/app/src/pages/profile/teaching-schedule.vue
Normal file
582
packages/app/src/pages/profile/teaching-schedule.vue
Normal file
@@ -0,0 +1,582 @@
|
||||
<template>
|
||||
<view class="schedule-page" :style="{ paddingTop: navBarHeight }">
|
||||
<CustomNavBar title="我的课表" show-back />
|
||||
|
||||
<view class="schedule-hero">
|
||||
<view class="schedule-hero__copy">
|
||||
<text class="schedule-hero__eyebrow">Teaching Day</text>
|
||||
<text class="schedule-hero__title">按日查看当天课程与学员</text>
|
||||
<text class="schedule-hero__desc">只显示你当天有学员的课程,按时间顺序一屏速览。</text>
|
||||
</view>
|
||||
<view class="schedule-hero__meta">
|
||||
<text class="schedule-hero__meta-num">{{ summary.slotCount }}</text>
|
||||
<text class="schedule-hero__meta-label">节课程</text>
|
||||
<text class="schedule-hero__meta-sub">{{ summary.studentCount }} 位学员</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="schedule-toolbar">
|
||||
<DateSelector v-model="selectedDate" variant="booking" @select="handleDateSelect" />
|
||||
<view class="schedule-toolbar__summary">
|
||||
<view class="schedule-toolbar__chip">
|
||||
<text class="schedule-toolbar__chip-label">{{ dateLabel }}</text>
|
||||
</view>
|
||||
<view class="schedule-toolbar__chip schedule-toolbar__chip--soft">
|
||||
<text class="schedule-toolbar__chip-label">{{ summaryRangeLabel }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
class="schedule-scroll"
|
||||
scroll-y
|
||||
refresher-enabled
|
||||
:refresher-triggered="refreshing"
|
||||
@refresherrefresh="handleRefresh"
|
||||
>
|
||||
<view v-if="loading && !refreshing" class="schedule-skeleton">
|
||||
<view v-for="i in 3" :key="i" class="schedule-skeleton__card">
|
||||
<view class="schedule-skeleton__time" />
|
||||
<view class="schedule-skeleton__line schedule-skeleton__line--long" />
|
||||
<view class="schedule-skeleton__line schedule-skeleton__line--short" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="slots.length === 0" class="schedule-empty">
|
||||
<view class="schedule-empty__badge">休</view>
|
||||
<text class="schedule-empty__title">这一天没有已预约课程</text>
|
||||
<text class="schedule-empty__desc">当前只展示有学员的课程安排,空白日期不会出现占位时段。</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="schedule-list">
|
||||
<view v-for="slot in slots" :key="slot.slotId" class="schedule-card">
|
||||
<view class="schedule-card__rail" />
|
||||
|
||||
<view class="schedule-card__header">
|
||||
<view>
|
||||
<text class="schedule-card__time">{{ slot.startTime.slice(0, 5) }}</text>
|
||||
<text class="schedule-card__range">{{ slot.startTime.slice(0, 5) }} - {{ slot.endTime.slice(0, 5) }}</text>
|
||||
</view>
|
||||
<view class="schedule-card__count">
|
||||
<text class="schedule-card__count-num">{{ slot.students.length }}</text>
|
||||
<text class="schedule-card__count-label">人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="schedule-card__body">
|
||||
<view v-for="student in slot.students" :key="student.bookingId" class="student-row">
|
||||
<view class="student-row__avatar">{{ getNameInitial(student.nickname) }}</view>
|
||||
<view class="student-row__main">
|
||||
<view class="student-row__headline">
|
||||
<text class="student-row__name">{{ student.nickname || '未命名学员' }}</text>
|
||||
<text class="student-row__status" :class="statusClass(student.status)">
|
||||
{{ statusLabel(student.status) }}
|
||||
</text>
|
||||
</view>
|
||||
<text v-if="student.phone" class="student-row__phone">{{ maskPhone(student.phone) }}</text>
|
||||
<text v-else class="student-row__phone student-row__phone--muted">未绑定手机号</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="schedule-bottom-space" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import type { TeachingScheduleSlot } from '@mp-pilates/shared'
|
||||
import { BookingStatus } from '@mp-pilates/shared'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import DateSelector from '../../components/DateSelector.vue'
|
||||
import { useBookingStore } from '../../stores/booking'
|
||||
import { useUserStore } from '../../stores/user'
|
||||
import { formatDate, getWeekdayLabel, isToday } from '../../utils/format'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
import { getErrorMessage } from '../../utils/auth'
|
||||
|
||||
const bookingStore = useBookingStore()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const { teachingSchedule, loadingTeachingSchedule } = storeToRefs(bookingStore)
|
||||
const { loggedIn, isAdmin } = storeToRefs(userStore)
|
||||
|
||||
const navBarHeight = ref('64px')
|
||||
const selectedDate = ref(formatDate(new Date()))
|
||||
const refreshing = ref(false)
|
||||
|
||||
const slots = computed<readonly TeachingScheduleSlot[]>(() => teachingSchedule.value)
|
||||
const loading = computed(() => loadingTeachingSchedule.value)
|
||||
|
||||
const summary = computed(() => ({
|
||||
slotCount: slots.value.length,
|
||||
studentCount: slots.value.reduce((sum, slot) => sum + slot.students.length, 0),
|
||||
}))
|
||||
|
||||
const dateLabel = computed(() => {
|
||||
const label = `${selectedDate.value.slice(5, 7)}月${selectedDate.value.slice(8, 10)}日 ${getWeekdayLabel(selectedDate.value)}`
|
||||
return isToday(selectedDate.value) ? `今天 · ${label}` : label
|
||||
})
|
||||
|
||||
const summaryRangeLabel = computed(() => {
|
||||
if (slots.value.length === 0) {
|
||||
return '暂无课程'
|
||||
}
|
||||
|
||||
const first = slots.value[0]
|
||||
const last = slots.value[slots.value.length - 1]
|
||||
return `${first.startTime.slice(0, 5)} - ${last.endTime.slice(0, 5)}`
|
||||
})
|
||||
|
||||
const STATUS_LABELS: Record<BookingStatus, string> = {
|
||||
[BookingStatus.PENDING_CONFIRMATION]: '待确认',
|
||||
[BookingStatus.CONFIRMED]: '已确认',
|
||||
[BookingStatus.CANCELLED]: '已取消',
|
||||
[BookingStatus.COMPLETED]: '已完成',
|
||||
[BookingStatus.NO_SHOW]: '未出席',
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
navBarHeight.value = `${getSystemLayout().navBarHeight}px`
|
||||
})
|
||||
|
||||
onShow(() => {
|
||||
if (!loggedIn.value) {
|
||||
uni.showToast({ title: '请先登录', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!isAdmin.value) {
|
||||
uni.showToast({ title: '仅管理员可查看', icon: 'none' })
|
||||
return
|
||||
}
|
||||
loadSchedule(selectedDate.value)
|
||||
})
|
||||
|
||||
function handleDateSelect(date: string) {
|
||||
selectedDate.value = date
|
||||
loadSchedule(date)
|
||||
}
|
||||
|
||||
async function handleRefresh() {
|
||||
refreshing.value = true
|
||||
try {
|
||||
await loadSchedule(selectedDate.value)
|
||||
} finally {
|
||||
refreshing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadSchedule(date: string) {
|
||||
try {
|
||||
await bookingStore.fetchTeachingSchedule(date)
|
||||
} catch (err: unknown) {
|
||||
uni.showToast({ title: getErrorMessage(err, '课表加载失败'), icon: 'none' })
|
||||
}
|
||||
}
|
||||
|
||||
function getNameInitial(name: string): string {
|
||||
const normalized = (name || '?').trim()
|
||||
return normalized.slice(0, 1).toUpperCase()
|
||||
}
|
||||
|
||||
function maskPhone(phone: string): string {
|
||||
return `${phone.slice(0, 3)} ${phone.slice(3, 7)} ${phone.slice(7, 11)}`
|
||||
}
|
||||
|
||||
function statusLabel(status: BookingStatus): string {
|
||||
return STATUS_LABELS[status] ?? status
|
||||
}
|
||||
|
||||
function statusClass(status: BookingStatus): string {
|
||||
return status === BookingStatus.PENDING_CONFIRMATION
|
||||
? 'student-row__status--pending'
|
||||
: 'student-row__status--confirmed'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.schedule-page {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(93, 140, 138, 0.18), transparent 34%),
|
||||
linear-gradient(180deg, #f3ede6 0%, #f7f4ef 30%, #fbfaf7 100%);
|
||||
}
|
||||
|
||||
.schedule-hero {
|
||||
margin: 24rpx 24rpx 20rpx;
|
||||
padding: 32rpx 30rpx;
|
||||
border-radius: 32rpx;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
linear-gradient(145deg, rgba(60, 86, 92, 0.96), rgba(108, 137, 127, 0.92)),
|
||||
#3e5b60;
|
||||
color: #f8f5ef;
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
box-shadow: 0 22rpx 60rpx rgba(55, 84, 82, 0.18);
|
||||
|
||||
&__copy {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
&__eyebrow {
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
color: rgba(248, 245, 239, 0.7);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 38rpx;
|
||||
line-height: 1.25;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 24rpx;
|
||||
line-height: 1.6;
|
||||
color: rgba(248, 245, 239, 0.78);
|
||||
}
|
||||
|
||||
&__meta {
|
||||
width: 164rpx;
|
||||
max-width: 100%;
|
||||
border-radius: 24rpx;
|
||||
padding: 22rpx 18rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.12);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
gap: 6rpx;
|
||||
}
|
||||
|
||||
&__meta-num {
|
||||
font-size: 52rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
&__meta-label,
|
||||
&__meta-sub {
|
||||
font-size: 22rpx;
|
||||
color: rgba(248, 245, 239, 0.78);
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
padding-bottom: 12rpx;
|
||||
background: linear-gradient(180deg, rgba(247, 244, 239, 0.94), rgba(247, 244, 239, 0.74));
|
||||
backdrop-filter: blur(14rpx);
|
||||
|
||||
&__summary {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
padding: 16rpx 24rpx 0;
|
||||
}
|
||||
|
||||
&__chip {
|
||||
padding: 14rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #ffffff;
|
||||
border: 1rpx solid rgba(93, 140, 138, 0.12);
|
||||
box-shadow: 0 10rpx 24rpx rgba(80, 92, 82, 0.08);
|
||||
|
||||
&--soft {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
}
|
||||
}
|
||||
|
||||
&__chip-label {
|
||||
font-size: 22rpx;
|
||||
color: #5b6058;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-scroll {
|
||||
height: calc(100vh - v-bind(navBarHeight));
|
||||
}
|
||||
|
||||
.schedule-skeleton {
|
||||
padding: 12rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
|
||||
&__card {
|
||||
border-radius: 28rpx;
|
||||
padding: 28rpx;
|
||||
background: rgba(255, 255, 255, 0.74);
|
||||
}
|
||||
|
||||
&__time,
|
||||
&__line {
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(90deg, rgba(220, 223, 218, 0.7), rgba(239, 241, 238, 0.95), rgba(220, 223, 218, 0.7));
|
||||
background-size: 300% 100%;
|
||||
animation: shimmer 1.4s linear infinite;
|
||||
}
|
||||
|
||||
&__time {
|
||||
width: 180rpx;
|
||||
height: 38rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
&__line {
|
||||
height: 24rpx;
|
||||
margin-top: 14rpx;
|
||||
|
||||
&--long {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--short {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-empty {
|
||||
margin: 40rpx 24rpx 0;
|
||||
border-radius: 32rpx;
|
||||
padding: 72rpx 40rpx;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 14rpx;
|
||||
box-shadow: 0 18rpx 44rpx rgba(108, 122, 112, 0.08);
|
||||
|
||||
&__badge {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(145deg, #e8ddd2, #f5efe8);
|
||||
color: #7e7467;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 34rpx;
|
||||
color: #3f403c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
font-size: 24rpx;
|
||||
color: #9b958b;
|
||||
line-height: 1.7;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-list {
|
||||
padding: 12rpx 24rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18rpx;
|
||||
}
|
||||
|
||||
.schedule-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 30rpx;
|
||||
padding: 28rpx 28rpx 18rpx 40rpx;
|
||||
background: rgba(255, 255, 255, 0.86);
|
||||
box-shadow: 0 20rpx 48rpx rgba(83, 95, 86, 0.1);
|
||||
|
||||
&__rail {
|
||||
position: absolute;
|
||||
top: 24rpx;
|
||||
left: 18rpx;
|
||||
bottom: 24rpx;
|
||||
width: 8rpx;
|
||||
border-radius: 999rpx;
|
||||
background: linear-gradient(180deg, #5d8c8a, #d7c4b1);
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
&__time {
|
||||
display: block;
|
||||
font-size: 46rpx;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: #304549;
|
||||
font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
&__range {
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #8a8e86;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
&__count {
|
||||
min-width: 116rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #f3efe8;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__count-num {
|
||||
font-size: 34rpx;
|
||||
color: #6e5b4f;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__count-label {
|
||||
margin-left: 4rpx;
|
||||
font-size: 22rpx;
|
||||
color: #907d6f;
|
||||
}
|
||||
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.student-row {
|
||||
display: flex;
|
||||
gap: 18rpx;
|
||||
padding: 20rpx 20rpx 20rpx 16rpx;
|
||||
border-radius: 22rpx;
|
||||
background: linear-gradient(135deg, rgba(246, 244, 239, 0.98), rgba(255, 255, 255, 0.9));
|
||||
|
||||
&__avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(145deg, #5d8c8a, #86a99d);
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #313630;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__status {
|
||||
flex-shrink: 0;
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 999rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&--pending {
|
||||
background: rgba(206, 164, 96, 0.14);
|
||||
color: #9b6e22;
|
||||
}
|
||||
|
||||
&--confirmed {
|
||||
background: rgba(93, 140, 138, 0.14);
|
||||
color: #376a69;
|
||||
}
|
||||
}
|
||||
|
||||
&__phone {
|
||||
display: block;
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #7b8179;
|
||||
|
||||
&--muted {
|
||||
color: #b0b3ad;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-bottom-space {
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.schedule-hero {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
&__meta {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-toolbar__summary {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.schedule-card__header,
|
||||
.student-row__headline {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -100% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
491
packages/app/src/pages/teacher/detail.vue
Normal file
491
packages/app/src/pages/teacher/detail.vue
Normal file
@@ -0,0 +1,491 @@
|
||||
<template>
|
||||
<view class="teacher-detail-page">
|
||||
<CustomNavBar title="教练详情" show-back />
|
||||
|
||||
<scroll-view class="detail-scroll" scroll-y :style="{ height: scrollHeight }">
|
||||
<view class="nav-spacer" :style="{ height: navBarHeight }" />
|
||||
|
||||
<view class="hero-section">
|
||||
<image class="hero-image" :src="teacher.cover" mode="widthFix" />
|
||||
<view class="hero-overlay" />
|
||||
|
||||
<view class="hero-content">
|
||||
<view class="hero-badges">
|
||||
<text v-for="item in teacher.badges" :key="item" class="hero-badge">{{ item }}</text>
|
||||
</view>
|
||||
<text class="hero-name">{{ teacher.name }}</text>
|
||||
<text class="hero-title">{{ teacher.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-wrap">
|
||||
<view class="summary-card">
|
||||
<view class="summary-head">
|
||||
<view>
|
||||
<text class="summary-eyebrow">Private Pilates Coach</text>
|
||||
<text class="summary-title">为你定制更细腻的训练节奏</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="specialty-row">
|
||||
<text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
|
||||
</view>
|
||||
|
||||
<text class="summary-intro">{{ teacher.intro }}</text>
|
||||
|
||||
<view class="stats-grid">
|
||||
<view v-for="item in teacher.stats" :key="item.label" class="stat-item">
|
||||
<text class="stat-value">{{ item.value }}</text>
|
||||
<text class="stat-label">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-card">
|
||||
<text class="card-title">教练介绍</text>
|
||||
<text class="card-text card-text--intro">
|
||||
我是 Iris,一名注重体态、控制与身体感受的普拉提教练。
|
||||
</text>
|
||||
<text class="card-text">
|
||||
我希望带你在稳定、安心的节奏里,找回核心力量、挺拔线条和更轻松的身体状态。
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class="detail-card">
|
||||
<text class="card-title">认证背景</text>
|
||||
<view v-for="item in teacher.certifications" :key="item" class="list-row">
|
||||
<view class="list-dot" />
|
||||
<text class="list-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-card">
|
||||
<text class="card-title">授课重点</text>
|
||||
<view class="focus-grid">
|
||||
<view v-for="item in teacher.teachingFocus" :key="item.title" class="focus-item">
|
||||
<text class="focus-title">{{ item.title }}</text>
|
||||
<text class="focus-desc">{{ item.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="detail-card cta-card">
|
||||
<text class="card-title">适合这样的你</text>
|
||||
<view class="fit-grid">
|
||||
<view class="fit-pill">久坐肩颈紧张</view>
|
||||
<view class="fit-pill">体态调整</view>
|
||||
<view class="fit-pill">产后恢复</view>
|
||||
<view class="fit-pill">塑形紧致</view>
|
||||
<view class="fit-pill">核心无力</view>
|
||||
<view class="fit-pill">运动入门</view>
|
||||
</view>
|
||||
<text class="card-text">
|
||||
如果你想改善体态、缓解肩颈腰背不适,提升核心稳定、线条感与身体控制力,这里会是一个很好的开始。
|
||||
</text>
|
||||
<view class="cta-inline" @tap="goToBooking">
|
||||
<text class="cta-inline-text">去约 Iris 的课程</text>
|
||||
<text class="cta-inline-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom-space" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-bar">
|
||||
<view class="bottom-note">
|
||||
<text class="bottom-note-title">1 对 1 私教课</text>
|
||||
<text class="bottom-note-sub">60 分钟 · 进入约课页选择时段</text>
|
||||
</view>
|
||||
<view class="booking-btn" @tap="goToBooking">
|
||||
<text class="booking-btn-text">立即预约</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
|
||||
import CustomNavBar from '../../components/CustomNavBar.vue'
|
||||
import { irisProfile } from '../../utils/teacher'
|
||||
import { getSystemLayout } from '../../utils/system'
|
||||
|
||||
const teacher = irisProfile
|
||||
const navBarHeight = ref('64px')
|
||||
const scrollHeight = ref('500px')
|
||||
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: `${teacher.name}|${teacher.title}`,
|
||||
path: `/pages/teacher/detail?id=${teacher.id}`,
|
||||
imageUrl: teacher.cover,
|
||||
}
|
||||
})
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: `${teacher.name}|${teacher.title}`,
|
||||
query: `id=${teacher.id}`,
|
||||
imageUrl: teacher.cover,
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
updateLayout()
|
||||
})
|
||||
|
||||
function updateLayout() {
|
||||
const { navBarHeight: navBarPx } = getSystemLayout()
|
||||
const { windowHeight } = uni.getWindowInfo()
|
||||
navBarHeight.value = `${navBarPx}px`
|
||||
scrollHeight.value = `${windowHeight}px`
|
||||
}
|
||||
|
||||
function goToBooking() {
|
||||
uni.switchTab({ url: '/pages/booking/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.teacher-detail-page {
|
||||
height: 100vh;
|
||||
background: #f7f2ee;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-spacer {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
height: 580rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(33, 24, 22, 0.08) 0%, rgba(33, 24, 22, 0.08) 34%, rgba(33, 24, 22, 0.64) 100%),
|
||||
radial-gradient(circle at top right, rgba(255, 228, 208, 0.26), transparent 28%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: absolute;
|
||||
left: 32rpx;
|
||||
right: 32rpx;
|
||||
bottom: 92rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-badges {
|
||||
display: flex;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
height: 42rpx;
|
||||
padding: 0 16rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.24);
|
||||
color: #fff8f3;
|
||||
font-size: 20rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
|
||||
.hero-name {
|
||||
display: block;
|
||||
font-size: 56rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1.05;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 247, 241, 0.88);
|
||||
}
|
||||
|
||||
.detail-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
position: relative;
|
||||
margin-top: -8rpx;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.summary-card,
|
||||
.detail-card {
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: 28rpx;
|
||||
box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
|
||||
backdrop-filter: blur(12rpx);
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
padding: 28rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.summary-head {
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.summary-eyebrow {
|
||||
display: block;
|
||||
font-size: 20rpx;
|
||||
color: #c09a89;
|
||||
letter-spacing: 3rpx;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 34rpx;
|
||||
line-height: 1.35;
|
||||
font-weight: 700;
|
||||
color: #2f2622;
|
||||
}
|
||||
|
||||
.specialty-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.specialty-pill {
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(92, 126, 151, 0.12);
|
||||
color: #56778a;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.summary-intro,
|
||||
.card-text,
|
||||
.list-text {
|
||||
font-size: 25rpx;
|
||||
line-height: 1.78;
|
||||
color: #5f534c;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 20rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(180deg, #fff8f4 0%, #f7f1ec 100%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.45;
|
||||
font-weight: 700;
|
||||
color: #3f3029;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 20rpx;
|
||||
color: #9c8579;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 28rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #342925;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.card-text + .card-text {
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.card-text--intro {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.7;
|
||||
font-weight: 600;
|
||||
color: #43352f;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.list-row + .list-row {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.list-dot {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: 14rpx;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #ff8b69 0%, #ff593f 100%);
|
||||
}
|
||||
|
||||
.focus-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
.focus-item {
|
||||
min-height: 164rpx;
|
||||
border-radius: 22rpx;
|
||||
padding: 22rpx 18rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
background: linear-gradient(135deg, #fff8f5 0%, #f6eee9 100%);
|
||||
}
|
||||
|
||||
.focus-title {
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
color: #5c4a42;
|
||||
}
|
||||
|
||||
.focus-desc {
|
||||
margin-top: 10rpx;
|
||||
font-size: 21rpx;
|
||||
line-height: 1.65;
|
||||
color: #8a7569;
|
||||
}
|
||||
|
||||
.cta-card {
|
||||
background: linear-gradient(135deg, #fff6f1 0%, #fffdfc 100%);
|
||||
}
|
||||
|
||||
.fit-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.fit-pill {
|
||||
padding: 10rpx 18rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 126, 92, 0.12);
|
||||
color: #b3573f;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cta-inline {
|
||||
margin-top: 22rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 999rpx;
|
||||
padding: 0 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(135deg, #ff7f5e 0%, #ff543c 100%);
|
||||
box-shadow: 0 16rpx 28rpx rgba(255, 95, 73, 0.22);
|
||||
}
|
||||
|
||||
.cta-inline-text,
|
||||
.cta-inline-arrow {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cta-inline-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.cta-inline-arrow {
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bottom-space {
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 24rpx;
|
||||
right: 24rpx;
|
||||
bottom: 24rpx;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18rpx;
|
||||
padding: 18rpx;
|
||||
border-radius: 28rpx;
|
||||
background: rgba(35, 29, 27, 0.9);
|
||||
backdrop-filter: blur(18rpx);
|
||||
box-shadow: 0 20rpx 48rpx rgba(36, 28, 26, 0.18);
|
||||
}
|
||||
|
||||
.bottom-note {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bottom-note-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
color: #fffaf6;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.bottom-note-sub {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 244, 236, 0.72);
|
||||
}
|
||||
|
||||
.booking-btn {
|
||||
width: 224rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #ff815e 0%, #ff5136 100%);
|
||||
}
|
||||
|
||||
.booking-btn-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -2,8 +2,6 @@ import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { get, post, put, del } from '../utils/request'
|
||||
import type {
|
||||
WeekTemplate,
|
||||
WeekTemplateInput,
|
||||
CardType,
|
||||
CreateCardTypeDto,
|
||||
UpdateCardTypeDto,
|
||||
@@ -15,8 +13,40 @@ import type {
|
||||
PaginatedData,
|
||||
ScheduleSlotPreview,
|
||||
PublishDaySlotsDto,
|
||||
FlashSaleAdminItem,
|
||||
CreateFlashSaleDto,
|
||||
UpdateFlashSaleDto,
|
||||
CreateStudioUploadCredentialDto,
|
||||
StudioUploadCredential,
|
||||
} from '@mp-pilates/shared'
|
||||
|
||||
interface LegacyPaginatedData<T> {
|
||||
readonly data: readonly T[]
|
||||
readonly total: number
|
||||
readonly page: number
|
||||
readonly limit: number
|
||||
}
|
||||
|
||||
function normalizePaginatedData<T>(
|
||||
result: PaginatedData<T> | LegacyPaginatedData<T>,
|
||||
): PaginatedData<T> {
|
||||
if ('items' in result) {
|
||||
return {
|
||||
items: [...result.items],
|
||||
total: result.total,
|
||||
page: result.page,
|
||||
limit: result.limit,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
items: [...result.data],
|
||||
total: result.total,
|
||||
page: result.page,
|
||||
limit: result.limit,
|
||||
}
|
||||
}
|
||||
|
||||
export interface AdminStats {
|
||||
todayBookings: number
|
||||
totalOrders: number
|
||||
@@ -34,22 +64,26 @@ export interface MemberSummary {
|
||||
cancelledBookings: number
|
||||
}
|
||||
|
||||
export interface UserMembership {
|
||||
userId: string
|
||||
membership: {
|
||||
id: string
|
||||
cardTypeId: string
|
||||
remainingTimes: number | null
|
||||
startDate: string
|
||||
expireDate: string
|
||||
status: string
|
||||
cardType: {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
totalTimes: number | null
|
||||
durationDays: number
|
||||
}
|
||||
} | null
|
||||
}
|
||||
|
||||
export const useAdminStore = defineStore('admin', () => {
|
||||
// ── Week templates ───────────────────────────────────────────────
|
||||
const weekTemplates = ref<WeekTemplate[]>([])
|
||||
|
||||
async function fetchWeekTemplates(): Promise<WeekTemplate[]> {
|
||||
const data = await get<WeekTemplate[]>('/admin/week-template')
|
||||
weekTemplates.value = data
|
||||
return data
|
||||
}
|
||||
|
||||
async function saveWeekTemplates(templates: WeekTemplateInput[]): Promise<WeekTemplate[]> {
|
||||
const data = await put<WeekTemplate[]>('/admin/week-template', { templates })
|
||||
weekTemplates.value = data
|
||||
return data
|
||||
}
|
||||
|
||||
// ── Card types ───────────────────────────────────────────────────
|
||||
const cardTypes = ref<CardType[]>([])
|
||||
|
||||
@@ -60,13 +94,13 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
}
|
||||
|
||||
async function createCardType(dto: CreateCardTypeDto): Promise<CardType> {
|
||||
const data = await post<CardType>('/admin/card-types', dto)
|
||||
const data = await post<CardType>('/admin/card-types', dto as unknown as Record<string, unknown>)
|
||||
await fetchCardTypes()
|
||||
return data
|
||||
}
|
||||
|
||||
async function updateCardType(id: string, dto: UpdateCardTypeDto): Promise<CardType> {
|
||||
const data = await put<CardType>(`/admin/card-types/${id}`, dto)
|
||||
const data = await put<CardType>(`/admin/card-types/${id}`, dto as unknown as Record<string, unknown>)
|
||||
await fetchCardTypes()
|
||||
return data
|
||||
}
|
||||
@@ -87,18 +121,31 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
}
|
||||
|
||||
async function saveStudioConfig(dto: UpdateStudioConfigDto): Promise<StudioConfig> {
|
||||
const data = await put<StudioConfig>('/admin/studio/info', dto)
|
||||
const data = await put<StudioConfig>('/admin/studio/info', dto as unknown as Record<string, unknown>)
|
||||
studioConfig.value = data
|
||||
return data
|
||||
}
|
||||
|
||||
async function createStudioUploadCredential(
|
||||
dto: CreateStudioUploadCredentialDto,
|
||||
): Promise<StudioUploadCredential> {
|
||||
return post<StudioUploadCredential>(
|
||||
'/admin/studio/upload-credentials',
|
||||
dto as unknown as Record<string, unknown>,
|
||||
)
|
||||
}
|
||||
|
||||
// ── Orders ───────────────────────────────────────────────────────
|
||||
async function fetchAdminOrders(params: {
|
||||
page?: number
|
||||
limit?: number
|
||||
status?: string
|
||||
}): Promise<PaginatedData<OrderWithDetails>> {
|
||||
return get<PaginatedData<OrderWithDetails>>('/admin/orders', params)
|
||||
const result = await get<PaginatedData<OrderWithDetails> | LegacyPaginatedData<OrderWithDetails>>(
|
||||
'/admin/orders',
|
||||
params,
|
||||
)
|
||||
return normalizePaginatedData(result)
|
||||
}
|
||||
|
||||
// ── Bookings ─────────────────────────────────────────────────────
|
||||
@@ -125,13 +172,33 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
return get<PaginatedData<MemberSummary>>('/admin/members', cleanParams)
|
||||
}
|
||||
|
||||
async function getUserMembership(userId: string): Promise<UserMembership> {
|
||||
return get<UserMembership>(`/admin/members/${userId}/membership`)
|
||||
}
|
||||
|
||||
async function updateUserMembership(
|
||||
userId: string,
|
||||
dto: {
|
||||
cardTypeId: string
|
||||
remainingTimes?: number | null
|
||||
startDate: string
|
||||
expireDate: string
|
||||
},
|
||||
): Promise<any> {
|
||||
return put<any>(`/admin/members/${userId}/membership`, dto)
|
||||
}
|
||||
|
||||
async function deleteUserMembership(userId: string): Promise<void> {
|
||||
return del<void>(`/admin/members/${userId}/membership`)
|
||||
}
|
||||
|
||||
// ── Time slots ───────────────────────────────────────────────────
|
||||
async function fetchSlotsByDate(date: string): Promise<TimeSlot[]> {
|
||||
return get<TimeSlot[]>('/admin/time-slots', { date })
|
||||
}
|
||||
|
||||
async function createManualSlot(dto: CreateManualSlotDto): Promise<TimeSlot> {
|
||||
return post<TimeSlot>('/admin/time-slot/manual', dto)
|
||||
return post<TimeSlot>('/admin/time-slot/manual', dto as unknown as Record<string, unknown>)
|
||||
}
|
||||
|
||||
async function closeSlot(id: string): Promise<TimeSlot> {
|
||||
@@ -167,16 +234,32 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
return get<AdminStats>('/admin/stats')
|
||||
}
|
||||
|
||||
// ── Flash sales ─────────────────────────────────────────────────
|
||||
async function fetchFlashSales(params?: {
|
||||
page?: number
|
||||
limit?: number
|
||||
}): Promise<PaginatedData<FlashSaleAdminItem>> {
|
||||
return get<PaginatedData<FlashSaleAdminItem>>('/admin/flash-sales', params as Record<string, unknown>)
|
||||
}
|
||||
|
||||
async function createFlashSale(dto: CreateFlashSaleDto): Promise<FlashSaleAdminItem> {
|
||||
return post<FlashSaleAdminItem>('/admin/flash-sales', dto as unknown as Record<string, unknown>)
|
||||
}
|
||||
|
||||
async function updateFlashSale(id: string, dto: UpdateFlashSaleDto): Promise<FlashSaleAdminItem> {
|
||||
return put<FlashSaleAdminItem>(`/admin/flash-sales/${id}`, dto as unknown as Record<string, unknown>)
|
||||
}
|
||||
|
||||
async function deleteFlashSale(id: string): Promise<{ deleted: boolean }> {
|
||||
return del<{ deleted: boolean }>(`/admin/flash-sales/${id}`)
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
weekTemplates,
|
||||
cardTypes,
|
||||
studioConfig,
|
||||
schedulePreview,
|
||||
scheduleLoading,
|
||||
// Week templates
|
||||
fetchWeekTemplates,
|
||||
saveWeekTemplates,
|
||||
// Card types
|
||||
fetchCardTypes,
|
||||
createCardType,
|
||||
@@ -185,12 +268,16 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
// Studio
|
||||
fetchStudioConfig,
|
||||
saveStudioConfig,
|
||||
createStudioUploadCredential,
|
||||
// Orders
|
||||
fetchAdminOrders,
|
||||
// Bookings
|
||||
fetchAdminBookings,
|
||||
// Members
|
||||
fetchMembers,
|
||||
getUserMembership,
|
||||
updateUserMembership,
|
||||
deleteUserMembership,
|
||||
// Time slots
|
||||
fetchSlotsByDate,
|
||||
createManualSlot,
|
||||
@@ -201,5 +288,10 @@ export const useAdminStore = defineStore('admin', () => {
|
||||
publishDaySlots,
|
||||
// Stats
|
||||
fetchDashboardStats,
|
||||
// Flash sales
|
||||
fetchFlashSales,
|
||||
createFlashSale,
|
||||
updateFlashSale,
|
||||
deleteFlashSale,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -6,6 +6,7 @@ import type {
|
||||
BookingWithUser,
|
||||
BookingStatusHistory,
|
||||
CreateBookingDto,
|
||||
TeachingScheduleSlot,
|
||||
} from '@mp-pilates/shared'
|
||||
import { get, post, put } from '../utils/request'
|
||||
|
||||
@@ -21,8 +22,10 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
const slots = ref<readonly TimeSlotWithBookingStatus[]>([])
|
||||
const myBookings = ref<readonly BookingWithDetails[]>([])
|
||||
const upcomingBookings = ref<readonly BookingWithDetails[]>([])
|
||||
const teachingSchedule = ref<readonly TeachingScheduleSlot[]>([])
|
||||
const loadingSlots = ref(false)
|
||||
const loadingBookings = ref(false)
|
||||
const loadingTeachingSchedule = ref(false)
|
||||
|
||||
async function fetchSlots(date: string) {
|
||||
loadingSlots.value = true
|
||||
@@ -70,6 +73,21 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTeachingSchedule(date: string) {
|
||||
loadingTeachingSchedule.value = true
|
||||
try {
|
||||
const result = await get<TeachingScheduleSlot[]>('/admin/teaching-schedule', { date })
|
||||
teachingSchedule.value = Array.isArray(result) ? result : []
|
||||
return teachingSchedule.value
|
||||
} catch (err) {
|
||||
console.error('Fetch teaching schedule failed:', err)
|
||||
teachingSchedule.value = []
|
||||
throw err
|
||||
} finally {
|
||||
loadingTeachingSchedule.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Admin methods ──────────────────────────────────────────────────────
|
||||
|
||||
async function fetchAllAdminBookings(
|
||||
@@ -124,13 +142,16 @@ export const useBookingStore = defineStore('booking', () => {
|
||||
slots,
|
||||
myBookings,
|
||||
upcomingBookings,
|
||||
teachingSchedule,
|
||||
loadingSlots,
|
||||
loadingBookings,
|
||||
loadingTeachingSchedule,
|
||||
fetchSlots,
|
||||
createBooking,
|
||||
cancelBooking,
|
||||
fetchMyBookings,
|
||||
fetchUpcomingBookings,
|
||||
fetchTeachingSchedule,
|
||||
fetchAllAdminBookings,
|
||||
confirmBooking,
|
||||
completeBooking,
|
||||
|
||||
43
packages/app/src/stores/flash-sale.ts
Normal file
43
packages/app/src/stores/flash-sale.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import type {
|
||||
FlashSaleListItem,
|
||||
FlashSaleDetail,
|
||||
FlashSalePurchaseResponse,
|
||||
} from '@mp-pilates/shared'
|
||||
import { get, post } from '../utils/request'
|
||||
|
||||
export const useFlashSaleStore = defineStore('flash-sale', () => {
|
||||
const flashSales = ref<FlashSaleListItem[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
async function fetchFlashSales(): Promise<FlashSaleListItem[]> {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await get<FlashSaleListItem[]>('/flash-sales')
|
||||
flashSales.value = [...data]
|
||||
return data
|
||||
} catch {
|
||||
flashSales.value = []
|
||||
return []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDetail(id: string): Promise<FlashSaleDetail> {
|
||||
return get<FlashSaleDetail>(`/flash-sales/${id}`)
|
||||
}
|
||||
|
||||
async function purchase(id: string): Promise<FlashSalePurchaseResponse> {
|
||||
return post<FlashSalePurchaseResponse>(`/flash-sales/${id}/purchase`)
|
||||
}
|
||||
|
||||
return {
|
||||
flashSales,
|
||||
loading,
|
||||
fetchFlashSales,
|
||||
fetchDetail,
|
||||
purchase,
|
||||
}
|
||||
})
|
||||
26
packages/app/src/stores/invite.ts
Normal file
26
packages/app/src/stores/invite.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import type { InviteActivitySummary } from '@mp-pilates/shared'
|
||||
import { get } from '../utils/request'
|
||||
|
||||
export const useInviteStore = defineStore('invite', () => {
|
||||
const activity = ref<InviteActivitySummary | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
async function fetchActivity() {
|
||||
loading.value = true
|
||||
try {
|
||||
activity.value = await get<InviteActivitySummary>('/invite/activity')
|
||||
return activity.value
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
activity,
|
||||
loading,
|
||||
fetchActivity,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -9,6 +9,11 @@ import { UserRole, MembershipStatus } from '@mp-pilates/shared'
|
||||
import { wxLogin, isLoggedIn, logout as authLogout } from '../utils/auth'
|
||||
import { get, put } from '../utils/request'
|
||||
import { ROUTES } from '../utils/routes'
|
||||
import { cacheSubscriptionMessageTemplateConfig, resetSubscriptionMessageTemplateCache } from '../utils/wechat-subscription'
|
||||
|
||||
function syncSubscriptionTemplates(profile?: Pick<UserProfileResponse, 'subscriptionMessageTemplates'> | null) {
|
||||
cacheSubscriptionMessageTemplateConfig(profile?.subscriptionMessageTemplates)
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
// State
|
||||
@@ -27,6 +32,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
memberships.value.filter((m) => m.status === MembershipStatus.ACTIVE),
|
||||
)
|
||||
const hasValidMembership = computed(() => activeMemberships.value.length > 0)
|
||||
const inviteShareEligible = computed(() => !!user.value?.inviteShareEligible)
|
||||
|
||||
// Actions
|
||||
async function login() {
|
||||
@@ -34,6 +40,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
const result = await wxLogin()
|
||||
token.value = result.token
|
||||
user.value = result.user
|
||||
syncSubscriptionTemplates(result.user)
|
||||
return { user: result.user, isNewUser: result.isNewUser }
|
||||
} catch (err) {
|
||||
console.error('Login failed:', err)
|
||||
@@ -59,6 +66,8 @@ export const useUserStore = defineStore('user', () => {
|
||||
if (!isLoggedIn()) return
|
||||
try {
|
||||
user.value = await get<UserProfileResponse>('/user/profile')
|
||||
syncSubscriptionTemplates(user.value)
|
||||
return user.value
|
||||
} catch (err) {
|
||||
console.error('Fetch profile failed:', err)
|
||||
}
|
||||
@@ -85,9 +94,15 @@ export const useUserStore = defineStore('user', () => {
|
||||
async function updateProfile(data: { nickname?: string; avatarUrl?: string }) {
|
||||
const updated = await put<UserProfileResponse>('/user/profile', data)
|
||||
user.value = updated
|
||||
syncSubscriptionTemplates(updated)
|
||||
return updated
|
||||
}
|
||||
|
||||
function setProfile(profile: UserProfileResponse) {
|
||||
user.value = profile
|
||||
syncSubscriptionTemplates(profile)
|
||||
}
|
||||
|
||||
function checkAuth() {
|
||||
if (isLoggedIn()) {
|
||||
fetchProfile()
|
||||
@@ -97,6 +112,7 @@ export const useUserStore = defineStore('user', () => {
|
||||
|
||||
function logout() {
|
||||
authLogout()
|
||||
resetSubscriptionMessageTemplateCache()
|
||||
token.value = ''
|
||||
user.value = null
|
||||
stats.value = null
|
||||
@@ -113,12 +129,14 @@ export const useUserStore = defineStore('user', () => {
|
||||
isAdmin,
|
||||
activeMemberships,
|
||||
hasValidMembership,
|
||||
inviteShareEligible,
|
||||
login,
|
||||
loginWithSetup,
|
||||
fetchProfile,
|
||||
fetchStats,
|
||||
fetchMemberships,
|
||||
updateProfile,
|
||||
setProfile,
|
||||
checkAuth,
|
||||
logout,
|
||||
}
|
||||
|
||||
@@ -7,38 +7,79 @@ interface LoginResponse {
|
||||
readonly isNewUser: boolean
|
||||
}
|
||||
|
||||
interface UniErrorLike {
|
||||
readonly errMsg?: string
|
||||
}
|
||||
|
||||
interface WechatPrivacyApi {
|
||||
requirePrivacyAuthorize?: (options: {
|
||||
success: () => void
|
||||
fail: (err: UniErrorLike) => void
|
||||
}) => void
|
||||
}
|
||||
|
||||
function buildPrivacyError(err?: UniErrorLike): Error {
|
||||
const errMsg = err?.errMsg || ''
|
||||
|
||||
if (errMsg.includes('cancel') || errMsg.includes('deny') || errMsg.includes('disagree')) {
|
||||
return new Error('请先同意隐私保护指引')
|
||||
}
|
||||
|
||||
return new Error('隐私授权失败,请重试')
|
||||
}
|
||||
|
||||
async function ensurePrivacyAuthorization(): Promise<void> {
|
||||
// #ifdef MP-WEIXIN
|
||||
const wechat = (globalThis as typeof globalThis & { wx?: WechatPrivacyApi }).wx
|
||||
if (!wechat || typeof wechat.requirePrivacyAuthorize !== 'function') {
|
||||
return
|
||||
}
|
||||
|
||||
const requirePrivacyAuthorize = wechat.requirePrivacyAuthorize
|
||||
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
requirePrivacyAuthorize({
|
||||
success: () => resolve(),
|
||||
fail: (err: UniErrorLike) => reject(buildPrivacyError(err)),
|
||||
})
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
|
||||
export function getErrorMessage(err: unknown, fallback: string): string {
|
||||
if (err instanceof Error && err.message) {
|
||||
return err.message
|
||||
}
|
||||
return fallback
|
||||
}
|
||||
|
||||
export async function wxLogin(): Promise<LoginResponse> {
|
||||
const inviterId = uni.getStorageSync('invite_inviter_id') as string
|
||||
|
||||
await ensurePrivacyAuthorization()
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
// Step 1:静默登录,获取 code
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (loginRes) => {
|
||||
try {
|
||||
// Step 2: 获取用户微信头像和昵称
|
||||
let nickname: string | undefined
|
||||
let avatarUrl: string | undefined
|
||||
await new Promise<void>((res) => {
|
||||
uni.getUserProfile({
|
||||
desc: '用于完善个人资料',
|
||||
success: (profileRes) => {
|
||||
nickname = profileRes.userInfo.nickName
|
||||
avatarUrl = profileRes.userInfo.avatarUrl
|
||||
res()
|
||||
},
|
||||
fail: () => {
|
||||
// 用户拒绝授权,仍可继续登录
|
||||
res()
|
||||
},
|
||||
})
|
||||
})
|
||||
if (!loginRes.code) {
|
||||
reject(new Error('微信登录失败,请重试'))
|
||||
return
|
||||
}
|
||||
|
||||
// Step 3: 发送登录请求
|
||||
// Step 2: 发送登录请求
|
||||
// 注:uni.getUserProfile 已被微信废弃(基础库 2.27.1+),
|
||||
// 新用户的昵称/头像由后端生成默认值,用户可在个人资料页修改
|
||||
const result = await post<LoginResponse>('/auth/login', {
|
||||
code: loginRes.code,
|
||||
nickname,
|
||||
avatarUrl,
|
||||
inviterId: inviterId || undefined,
|
||||
})
|
||||
uni.setStorageSync('token', result.token)
|
||||
if (result.isNewUser && inviterId) {
|
||||
uni.removeStorageSync('invite_inviter_id')
|
||||
}
|
||||
resolve(result)
|
||||
} catch (err) {
|
||||
reject(err)
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
import type { CardType } from '@mp-pilates/shared'
|
||||
import { CardTypeCategory } from '@mp-pilates/shared'
|
||||
import { FlashSalePhase } from '@mp-pilates/shared'
|
||||
|
||||
/** Minimal membership shape needed by progress/usage helpers. */
|
||||
interface MembershipLike {
|
||||
readonly remainingTimes: number | null
|
||||
readonly cardType: { readonly totalTimes: number | null }
|
||||
}
|
||||
|
||||
/** 格式化金额:分 → 元 */
|
||||
export function formatPrice(cents: number): string {
|
||||
@@ -49,13 +55,13 @@ export function getDateRange(days: number): ReadonlyArray<{ readonly date: strin
|
||||
}
|
||||
|
||||
/** 会员卡类型标签 */
|
||||
export function getCardTypeLabel(type: CardTypeCategory): string {
|
||||
const map: Record<CardTypeCategory, string> = {
|
||||
export function getCardTypeLabel(type: CardTypeCategory | string): string {
|
||||
const map: Record<string, string> = {
|
||||
[CardTypeCategory.TIMES]: '次卡',
|
||||
[CardTypeCategory.DURATION]: '月卡',
|
||||
[CardTypeCategory.TRIAL]: '体验',
|
||||
[CardTypeCategory.TRIAL]: '体验卡',
|
||||
}
|
||||
return map[type] ?? '会员'
|
||||
return map[type] ?? '会员卡'
|
||||
}
|
||||
|
||||
/** 会员卡封面 CSS 类名 */
|
||||
@@ -70,3 +76,82 @@ export function isSlotPast(date: string, startTime: string): boolean {
|
||||
const slotDateTime = new Date(`${date}T${startTime}:00`)
|
||||
return new Date() > slotDateTime
|
||||
}
|
||||
|
||||
/** 会员卡渐变 CSS 类名前缀 */
|
||||
export function getCardGradientClass(type: CardTypeCategory | string): string {
|
||||
if (type === CardTypeCategory.DURATION) return 'gradient--duration'
|
||||
if (type === CardTypeCategory.TRIAL) return 'gradient--trial'
|
||||
return 'gradient--times'
|
||||
}
|
||||
|
||||
/** 会员卡进度百分比(剩余 / 总次数,clamp 到 0~100%) */
|
||||
export function getMembershipProgressWidth(membership: MembershipLike): string {
|
||||
if (membership.remainingTimes === null || !membership.cardType.totalTimes) return '0%'
|
||||
const pct = (membership.remainingTimes / membership.cardType.totalTimes) * 100
|
||||
return `${Math.max(0, Math.min(100, pct))}%`
|
||||
}
|
||||
|
||||
/** 已使用次数(不低于 0,防止管理员调高剩余次数导致负值) */
|
||||
export function getMembershipUsedTimes(membership: MembershipLike): number {
|
||||
if (membership.remainingTimes === null || !membership.cardType.totalTimes) return 0
|
||||
return Math.max(0, membership.cardType.totalTimes - membership.remainingTimes)
|
||||
}
|
||||
|
||||
/** 格式化倒计时:HH:MM:SS */
|
||||
export function formatCountdown(targetTime: string): string {
|
||||
const { h, m, s } = getCountdownParts(targetTime)
|
||||
return `${h}:${m}:${s}`
|
||||
}
|
||||
|
||||
/** 获取倒计时各部分(h/m/s 已补零) */
|
||||
export function getCountdownParts(targetTime: string): { readonly h: string; readonly m: string; readonly s: string } {
|
||||
const diff = Math.max(0, new Date(targetTime).getTime() - Date.now())
|
||||
return {
|
||||
h: String(Math.floor(diff / 3_600_000)).padStart(2, '0'),
|
||||
m: String(Math.floor((diff % 3_600_000) / 60_000)).padStart(2, '0'),
|
||||
s: String(Math.floor((diff % 60_000) / 1000)).padStart(2, '0'),
|
||||
}
|
||||
}
|
||||
|
||||
/** 秒杀阶段中文标签 */
|
||||
export function getFlashSalePhaseLabel(phase: FlashSalePhase): string {
|
||||
const map: Record<FlashSalePhase, string> = {
|
||||
[FlashSalePhase.UPCOMING]: '即将开始',
|
||||
[FlashSalePhase.ONGOING]: '抢购中',
|
||||
[FlashSalePhase.SOLD_OUT]: '已售罄',
|
||||
[FlashSalePhase.ENDED]: '已结束',
|
||||
}
|
||||
return map[phase]
|
||||
}
|
||||
|
||||
/** 库存已售比例 */
|
||||
export function getStockRatio(soldCount: number, totalStock: number): number {
|
||||
if (totalStock === 0) return 0
|
||||
return soldCount / totalStock
|
||||
}
|
||||
|
||||
/** 库存已售百分比字符串 */
|
||||
export function getStockPercent(soldCount: number, totalStock: number): string {
|
||||
return `${Math.min(100, getStockRatio(soldCount, totalStock) * 100)}%`
|
||||
}
|
||||
|
||||
/** 格式化日期时间为 MM-DD HH:mm:ss */
|
||||
export function formatDateTime(dateStr: string): string {
|
||||
const d = new Date(dateStr)
|
||||
const month = String(d.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(d.getDate()).padStart(2, '0')
|
||||
const hour = String(d.getHours()).padStart(2, '0')
|
||||
const min = String(d.getMinutes()).padStart(2, '0')
|
||||
const sec = String(d.getSeconds()).padStart(2, '0')
|
||||
return `${month}-${day} ${hour}:${min}:${sec}`
|
||||
}
|
||||
|
||||
/** 格式化 Date 为 YYYY-MM-DD(本地时间,用于 picker) */
|
||||
export function formatDateLocal(d: Date): string {
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
/** 格式化 Date 为 HH:MM(本地时间,用于 picker) */
|
||||
export function formatTimeLocal(d: Date): string {
|
||||
return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
@@ -1,16 +1,7 @@
|
||||
import type { ApiResponse, PaginatedData } from '@mp-pilates/shared'
|
||||
|
||||
const BASE_URL = (() => {
|
||||
try {
|
||||
const { miniProgram } = uni.getAccountInfoSync()
|
||||
if (miniProgram.envVersion !== 'develop') {
|
||||
return 'https://focus.richarjiang.com/api'
|
||||
}
|
||||
} catch {
|
||||
// 非小程序环境,使用开发地址
|
||||
}
|
||||
return 'http://localhost:3000/api'
|
||||
})()
|
||||
// 统一使用线上服务地址
|
||||
const BASE_URL = 'https://focus.richarjiang.com/api'
|
||||
|
||||
interface RequestOptions {
|
||||
readonly url: string
|
||||
|
||||
72
packages/app/src/utils/studio-upload.ts
Normal file
72
packages/app/src/utils/studio-upload.ts
Normal file
@@ -0,0 +1,72 @@
|
||||
import type {
|
||||
CreateStudioUploadCredentialDto,
|
||||
StudioAssetType,
|
||||
StudioUploadCredential,
|
||||
} from '@mp-pilates/shared'
|
||||
import type { useAdminStore } from '../stores/admin'
|
||||
|
||||
type AdminStore = ReturnType<typeof useAdminStore>
|
||||
|
||||
function inferContentType(fileName: string): string | undefined {
|
||||
const extension = fileName.split('.').pop()?.toLowerCase()
|
||||
|
||||
if (extension === 'jpg' || extension === 'jpeg') {
|
||||
return 'image/jpeg'
|
||||
}
|
||||
if (extension === 'png') {
|
||||
return 'image/png'
|
||||
}
|
||||
if (extension === 'webp') {
|
||||
return 'image/webp'
|
||||
}
|
||||
if (extension === 'heic') {
|
||||
return 'image/heic'
|
||||
}
|
||||
if (extension === 'heif') {
|
||||
return 'image/heif'
|
||||
}
|
||||
|
||||
return undefined
|
||||
}
|
||||
|
||||
function uploadToCos(filePath: string, credential: StudioUploadCredential): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: credential.uploadUrl,
|
||||
filePath,
|
||||
name: 'file',
|
||||
formData: credential.formData as unknown as Record<string, string>,
|
||||
success: (result) => {
|
||||
if (result.statusCode >= 200 && result.statusCode < 300) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
const body = typeof result.data === 'string' ? result.data : JSON.stringify(result.data)
|
||||
const code = body.match(/<Code>([^<]+)<\/Code>/)?.[1]
|
||||
const message = body.match(/<Message>([^<]+)<\/Message>/)?.[1]
|
||||
const detail = code || message ? `${code ?? 'COS'}: ${message ?? body}` : body
|
||||
reject(new Error(`COS 上传失败 (${result.statusCode}) ${detail}`))
|
||||
},
|
||||
fail: (error) => {
|
||||
reject(new Error(error.errMsg || 'COS 上传失败'))
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export async function uploadStudioAsset(params: {
|
||||
adminStore: AdminStore
|
||||
filePath: string
|
||||
fileName: string
|
||||
assetType: StudioAssetType
|
||||
}): Promise<string> {
|
||||
const payload: CreateStudioUploadCredentialDto = {
|
||||
fileName: params.fileName,
|
||||
contentType: inferContentType(params.fileName),
|
||||
assetType: params.assetType,
|
||||
}
|
||||
const credential = await params.adminStore.createStudioUploadCredential(payload)
|
||||
await uploadToCos(params.filePath, credential)
|
||||
return credential.fileUrl
|
||||
}
|
||||
62
packages/app/src/utils/teacher.ts
Normal file
62
packages/app/src/utils/teacher.ts
Normal file
@@ -0,0 +1,62 @@
|
||||
export interface TeacherProfile {
|
||||
id: string
|
||||
name: string
|
||||
title: string
|
||||
avatar: string
|
||||
cover: string
|
||||
badges: string[]
|
||||
specialties: string[]
|
||||
intro: string
|
||||
certifications: string[]
|
||||
teachingFocus: Array<{ title: string; desc: string }>
|
||||
stats: Array<{ label: string; value: string }>
|
||||
}
|
||||
|
||||
export const irisProfile: TeacherProfile = {
|
||||
id: 'iris',
|
||||
name: 'Iris',
|
||||
title: '高级普拉提教练',
|
||||
avatar: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
|
||||
cover: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
|
||||
badges: ['高级', 'STOTT PILATES'],
|
||||
specialties: ['塑性训练', '体态调整', '产后恢复'],
|
||||
intro: '我擅长把专业训练拆解成身体真正听得懂的节奏,让你在安全、稳定与被看见的陪伴里,一点点找回力量、线条与自信。',
|
||||
certifications: [
|
||||
'斯多特塑身机初&中级认证教练',
|
||||
'斯多特全场馆认证教练',
|
||||
'曼丽丘斯多特塑身机弹跳网芭杆工作坊',
|
||||
'塑身机上的高尔夫与旋转运动调理工作坊',
|
||||
'四维人体运动解剖认证',
|
||||
],
|
||||
teachingFocus: [
|
||||
{
|
||||
title: '核心激活',
|
||||
desc: '从骨盆与深层腹部控制入手,建立稳定发力基础。',
|
||||
},
|
||||
{
|
||||
title: '体态调整',
|
||||
desc: '针对圆肩、头前伸、骨盆前倾等常见问题做精细训练。',
|
||||
},
|
||||
{
|
||||
title: '产后恢复',
|
||||
desc: '循序渐进关注核心重建、呼吸配合与身体觉知恢复。',
|
||||
},
|
||||
{
|
||||
title: '塑形训练',
|
||||
desc: '兼顾力量与线条,让臀腿、背部和核心更有支撑感。',
|
||||
},
|
||||
{
|
||||
title: '呼吸控制',
|
||||
desc: '把呼吸节奏融入动作,提高训练效率与身体连接感。',
|
||||
},
|
||||
{
|
||||
title: '一对一进阶',
|
||||
desc: '根据训练基础与目标安排节奏,适合长期稳定提升。',
|
||||
},
|
||||
],
|
||||
stats: [
|
||||
{ label: '擅长方向', value: '塑形 / 体态' },
|
||||
{ label: '授课类型', value: '私教为主' },
|
||||
{ label: '课程时长', value: '60 分钟' },
|
||||
],
|
||||
}
|
||||
256
packages/app/src/utils/wechat-subscription.ts
Normal file
256
packages/app/src/utils/wechat-subscription.ts
Normal file
@@ -0,0 +1,256 @@
|
||||
import {
|
||||
SubscriptionMessageScene,
|
||||
} from '@mp-pilates/shared'
|
||||
import type {
|
||||
ReportSubscriptionMessageRequestDto,
|
||||
SubscriptionMessageRequestItem,
|
||||
SubscriptionMessageTemplate,
|
||||
SubscriptionMessageTemplateConfig,
|
||||
UserProfileResponse,
|
||||
} from '@mp-pilates/shared'
|
||||
import { post } from './request'
|
||||
|
||||
type TemplateResult = SubscriptionMessageRequestItem['result'] | 'tmplIds empty' | 'err' | 'undefined'
|
||||
|
||||
type RequestSubscribeMessageSuccess = Record<string, TemplateResult | undefined> & {
|
||||
errMsg?: string
|
||||
}
|
||||
|
||||
interface RequestSubscribeMessageFail {
|
||||
errMsg?: string
|
||||
errCode?: number | null
|
||||
}
|
||||
|
||||
function stringifyDebugPayload(payload: unknown): string {
|
||||
try {
|
||||
return JSON.stringify(payload)
|
||||
} catch {
|
||||
return String(payload)
|
||||
}
|
||||
}
|
||||
|
||||
function getSubscribeDebugContext() {
|
||||
try {
|
||||
const windowInfo = typeof uni.getWindowInfo === 'function' ? uni.getWindowInfo() : null
|
||||
const appBaseInfo = typeof uni.getAppBaseInfo === 'function' ? uni.getAppBaseInfo() : null
|
||||
const deviceInfo = typeof uni.getDeviceInfo === 'function' ? uni.getDeviceInfo() : null
|
||||
const host = appBaseInfo?.host as { env?: string } | string | undefined
|
||||
|
||||
return {
|
||||
platform: deviceInfo?.platform ?? 'unknown',
|
||||
hostEnv: typeof host === 'object' && host ? host.env : undefined,
|
||||
app: appBaseInfo?.appName,
|
||||
system: deviceInfo?.system,
|
||||
language: appBaseInfo?.language,
|
||||
version: appBaseInfo?.version,
|
||||
SDKVersion: appBaseInfo?.SDKVersion,
|
||||
windowWidth: windowInfo?.windowWidth,
|
||||
}
|
||||
} catch {
|
||||
return {
|
||||
platform: 'unknown',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function buildSubscribeError(err: RequestSubscribeMessageFail, scene: SubscriptionMessageScene, templateIds: string[]): Error {
|
||||
const debugContext = getSubscribeDebugContext()
|
||||
const rawMessage = (err.errMsg || '').trim()
|
||||
|
||||
if (!rawMessage && debugContext.platform === 'devtools') {
|
||||
return new Error(
|
||||
`开发者工具当前环境不支持订阅消息唤起。请退出游客模式,使用已登录的微信开发者工具并在真机中重试。调试信息: ${stringifyDebugPayload({ scene, templateIds, err, debugContext })}`,
|
||||
)
|
||||
}
|
||||
|
||||
return new Error(
|
||||
`订阅消息授权失败: ${stringifyDebugPayload({ scene, templateIds, err, debugContext })}`,
|
||||
)
|
||||
}
|
||||
|
||||
const TEMPLATE_CONFIG_STORAGE_KEY = 'subscriptionMessageTemplateConfig'
|
||||
|
||||
let cachedConfig: SubscriptionMessageTemplateConfig | null = null
|
||||
|
||||
function isMpWeixin(): boolean {
|
||||
// #ifdef MP-WEIXIN
|
||||
return true
|
||||
// #endif
|
||||
return false
|
||||
}
|
||||
|
||||
function normalizeResult(result?: TemplateResult): SubscriptionMessageRequestItem['result'] | null {
|
||||
if (result === 'accept' || result === 'reject' || result === 'ban' || result === 'filter') {
|
||||
return result
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
async function fetchTemplateConfig(): Promise<SubscriptionMessageTemplateConfig> {
|
||||
if (cachedConfig) {
|
||||
return cachedConfig
|
||||
}
|
||||
|
||||
const stored = uni.getStorageSync(TEMPLATE_CONFIG_STORAGE_KEY) as SubscriptionMessageTemplateConfig | ''
|
||||
if (!stored || !Array.isArray(stored.templates)) {
|
||||
throw new Error('订阅消息模板尚未初始化,请重新进入页面后重试')
|
||||
}
|
||||
|
||||
const config: SubscriptionMessageTemplateConfig = {
|
||||
templates: stored.templates.filter((item) => item.templateId),
|
||||
}
|
||||
cachedConfig = config
|
||||
return config
|
||||
}
|
||||
|
||||
function normalizeTemplateConfig(config?: Partial<SubscriptionMessageTemplateConfig> | null): SubscriptionMessageTemplateConfig {
|
||||
const templates = Array.isArray(config?.templates) ? config.templates : []
|
||||
|
||||
return {
|
||||
templates: templates.filter((item): item is SubscriptionMessageTemplate => !!item?.templateId),
|
||||
}
|
||||
}
|
||||
|
||||
export function cacheSubscriptionMessageTemplateConfig(
|
||||
config?: Partial<SubscriptionMessageTemplateConfig> | null,
|
||||
): SubscriptionMessageTemplateConfig {
|
||||
const normalized = normalizeTemplateConfig(config)
|
||||
cachedConfig = normalized
|
||||
uni.setStorageSync(TEMPLATE_CONFIG_STORAGE_KEY, normalized)
|
||||
return normalized
|
||||
}
|
||||
|
||||
function getTemplatesByScene(
|
||||
config: SubscriptionMessageTemplateConfig,
|
||||
scene: SubscriptionMessageScene,
|
||||
): SubscriptionMessageTemplate[] {
|
||||
return config.templates.filter((item) => item.scene === scene && item.templateId)
|
||||
}
|
||||
|
||||
async function reportResults(requests: SubscriptionMessageRequestItem[]): Promise<void> {
|
||||
if (requests.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const payload: ReportSubscriptionMessageRequestDto = { requests }
|
||||
await post('/user/subscription-messages/report', payload as unknown as Record<string, unknown>)
|
||||
}
|
||||
|
||||
export async function requestSubscriptionMessage(scene: SubscriptionMessageScene): Promise<SubscriptionMessageRequestItem[]> {
|
||||
if (!isMpWeixin()) {
|
||||
return []
|
||||
}
|
||||
|
||||
const config = await fetchTemplateConfig()
|
||||
const templates = getTemplatesByScene(config, scene)
|
||||
if (templates.length === 0) {
|
||||
console.error('[subscribe] no templates matched scene', stringifyDebugPayload({ scene, config, debugContext: getSubscribeDebugContext() }))
|
||||
return []
|
||||
}
|
||||
|
||||
const templateIds = templates.map((item) => item.templateId)
|
||||
const debugContext = getSubscribeDebugContext()
|
||||
console.log('[subscribe] requestSubscribeMessage:start', stringifyDebugPayload({ scene, templateIds, templates, debugContext }))
|
||||
|
||||
const result = await new Promise<RequestSubscribeMessageSuccess>((resolve, reject) => {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: templateIds,
|
||||
success: (res) => {
|
||||
console.log('[subscribe] requestSubscribeMessage:success', stringifyDebugPayload({ scene, response: res, templateIds, debugContext }))
|
||||
resolve(res as RequestSubscribeMessageSuccess)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[subscribe] requestSubscribeMessage:fail', stringifyDebugPayload({ scene, error: err, templateIds, debugContext }))
|
||||
reject(buildSubscribeError(err as RequestSubscribeMessageFail, scene, templateIds))
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const requests = templates
|
||||
.map<SubscriptionMessageRequestItem | null>((item) => {
|
||||
const normalized = normalizeResult(result[item.templateId])
|
||||
if (!normalized) {
|
||||
return null
|
||||
}
|
||||
|
||||
return {
|
||||
templateId: item.templateId,
|
||||
scene: item.scene,
|
||||
result: normalized,
|
||||
}
|
||||
})
|
||||
.filter((item): item is SubscriptionMessageRequestItem => item !== null)
|
||||
|
||||
console.log('[subscribe] requestSubscribeMessage:normalized', stringifyDebugPayload({ scene, result, requests, templateIds, debugContext }))
|
||||
|
||||
await reportResults(requests)
|
||||
return requests
|
||||
}
|
||||
|
||||
export async function requestOrderPaidSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
|
||||
return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
|
||||
}
|
||||
|
||||
export async function requestBookingCreatedSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
|
||||
return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
|
||||
}
|
||||
|
||||
export async function requestAdminBookingSubscriptionCount(): Promise<UserProfileResponse | null> {
|
||||
if (!isMpWeixin()) {
|
||||
return null
|
||||
}
|
||||
|
||||
const config = await fetchTemplateConfig()
|
||||
const templates = getTemplatesByScene(config, SubscriptionMessageScene.ADMIN_BOOKING_CREATED)
|
||||
.filter((item) => item.usageTarget === 'counter')
|
||||
|
||||
if (templates.length === 0) {
|
||||
console.error('[subscribe] no admin counter template configured', stringifyDebugPayload({
|
||||
scene: SubscriptionMessageScene.ADMIN_BOOKING_CREATED,
|
||||
config,
|
||||
debugContext: getSubscribeDebugContext(),
|
||||
}))
|
||||
return null
|
||||
}
|
||||
|
||||
const templateId = templates[0].templateId
|
||||
const debugContext = getSubscribeDebugContext()
|
||||
|
||||
console.log('[subscribe] requestSubscribeMessage:adminCounter:start', stringifyDebugPayload({
|
||||
templateId,
|
||||
debugContext,
|
||||
}))
|
||||
|
||||
const result = await new Promise<RequestSubscribeMessageSuccess>((resolve, reject) => {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds: [templateId],
|
||||
success: (res) => {
|
||||
console.log('[subscribe] requestSubscribeMessage:adminCounter:success', stringifyDebugPayload({ response: res, templateId, debugContext }))
|
||||
resolve(res as RequestSubscribeMessageSuccess)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('[subscribe] requestSubscribeMessage:adminCounter:fail', stringifyDebugPayload({ error: err, templateId, debugContext }))
|
||||
reject(buildSubscribeError(err as RequestSubscribeMessageFail, SubscriptionMessageScene.ADMIN_BOOKING_CREATED, [templateId]))
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
const normalized = normalizeResult(result[templateId])
|
||||
console.log('[subscribe] requestSubscribeMessage:adminCounter:normalized', stringifyDebugPayload({
|
||||
templateId,
|
||||
normalized,
|
||||
rawResult: result,
|
||||
debugContext,
|
||||
}))
|
||||
|
||||
if (normalized !== 'accept') {
|
||||
return null
|
||||
}
|
||||
|
||||
return post<UserProfileResponse>('/user/subscription-messages/admin-booking-count')
|
||||
}
|
||||
|
||||
export function resetSubscriptionMessageTemplateCache(): void {
|
||||
cachedConfig = null
|
||||
uni.removeStorageSync(TEMPLATE_CONFIG_STORAGE_KEY)
|
||||
}
|
||||
@@ -19,3 +19,17 @@ API_BASE_URL=https://focus.richarjiang.com/
|
||||
|
||||
# Server
|
||||
PORT=3000
|
||||
|
||||
WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED=antYfc85gvwImFZ9kM4UiqMOywJxbqFVgKHLH3NikII
|
||||
|
||||
# COS upload
|
||||
COS_SECRET_ID=AKIDwwulT3ub9f9bxFVdihcP4Z1S6qivMxmu
|
||||
COS_SECRET_KEY=S1rrw0CY1fRQj7X7fCpjryAMwgel6drG
|
||||
COS_BUCKET=plates-1251306435
|
||||
COS_REGION=ap-guangzhou
|
||||
COS_UPLOAD_ROLE_ARN=qcs::cam::uin/649581473:roleName/MpPilatesCosUploadRole
|
||||
COS_APP_ID=1251306435
|
||||
COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
|
||||
COS_UPLOAD_PREFIX=mp/studio
|
||||
COS_UPLOAD_DURATION_SECONDS=1800
|
||||
COS_UPLOAD_ROLE_SESSION_NAME=mp-pilates-studio-upload
|
||||
|
||||
13
packages/server/.env.example
Normal file
13
packages/server/.env.example
Normal file
@@ -0,0 +1,13 @@
|
||||
DATABASE_URL=mysql://user:password@127.0.0.1:3306/mp_pilates
|
||||
JWT_SECRET=change-me
|
||||
WX_APPID=your-wechat-appid
|
||||
WX_SECRET=your-wechat-secret
|
||||
|
||||
# COS upload
|
||||
COS_SECRET_ID=your-cos-secret-id
|
||||
COS_SECRET_KEY=your-cos-secret-key
|
||||
COS_BUCKET=plates-1251306435
|
||||
COS_REGION=ap-guangzhou
|
||||
COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
|
||||
COS_UPLOAD_PREFIX=mp/studio
|
||||
COS_UPLOAD_DURATION_SECONDS=1800
|
||||
@@ -13,6 +13,7 @@
|
||||
"prisma:generate": "prisma generate",
|
||||
"prisma:migrate": "prisma migrate dev",
|
||||
"prisma:seed": "ts-node prisma/seed.ts",
|
||||
"studio:seed-gallery": "ts-node prisma/update-studio-gallery.ts",
|
||||
"lint": "eslint \"{src,test}/**/*.ts\""
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -52,9 +53,9 @@
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"ts",
|
||||
"js",
|
||||
"json",
|
||||
"ts"
|
||||
"json"
|
||||
],
|
||||
"rootDir": "src",
|
||||
"testRegex": ".*\\.spec\\.ts$",
|
||||
@@ -69,6 +70,7 @@
|
||||
"coverageDirectory": "../coverage",
|
||||
"testEnvironment": "node",
|
||||
"moduleNameMapper": {
|
||||
"^@mp-pilates/shared$": "<rootDir>/../../shared/src/index.ts",
|
||||
"^@mp-pilates/shared(.*)$": "<rootDir>/../../shared/src$1"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -51,6 +51,24 @@ enum OrderStatus {
|
||||
REFUNDED
|
||||
}
|
||||
|
||||
enum FlashSaleStatus {
|
||||
DRAFT
|
||||
ACTIVE
|
||||
ENDED
|
||||
}
|
||||
|
||||
enum FlashSaleOrderStatus {
|
||||
RESERVED
|
||||
PAID
|
||||
EXPIRED
|
||||
}
|
||||
|
||||
enum InviteReferralStatus {
|
||||
REGISTERED
|
||||
TRIAL_PURCHASED
|
||||
QUALIFIED
|
||||
}
|
||||
|
||||
// ===== Models =====
|
||||
|
||||
model User {
|
||||
@@ -61,16 +79,47 @@ model User {
|
||||
nickname String @default("")
|
||||
avatarUrl String? @map("avatar_url")
|
||||
role UserRole @default(MEMBER)
|
||||
adminBookingSubscriptionCount Int @default(0) @map("admin_booking_subscription_count")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
memberships Membership[]
|
||||
bookings Booking[]
|
||||
orders Order[]
|
||||
flashSaleOrders FlashSaleOrder[]
|
||||
subscriptionMessageConsents SubscriptionMessageConsent[]
|
||||
sentInviteReferrals InviteReferral[] @relation("InviteReferralInviter")
|
||||
receivedInviteReferral InviteReferral[] @relation("InviteReferralInvitee")
|
||||
inviteRewardGrants InviteRewardGrant[] @relation("InviteRewardGrantInviter")
|
||||
|
||||
@@map("users")
|
||||
}
|
||||
|
||||
model SubscriptionMessageConsent {
|
||||
id String @id @default(uuid())
|
||||
userId String @map("user_id")
|
||||
templateId String @map("template_id")
|
||||
scene String
|
||||
totalRequestCount Int @default(0) @map("total_request_count")
|
||||
acceptCount Int @default(0) @map("accept_count")
|
||||
rejectCount Int @default(0) @map("reject_count")
|
||||
banCount Int @default(0) @map("ban_count")
|
||||
filterCount Int @default(0) @map("filter_count")
|
||||
sentCount Int @default(0) @map("sent_count")
|
||||
lastResult String @map("last_result")
|
||||
lastRequestedAt DateTime @default(now()) @map("last_requested_at")
|
||||
lastSentAt DateTime? @map("last_sent_at")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
|
||||
@@unique([userId, templateId, scene])
|
||||
@@index([userId])
|
||||
@@index([scene])
|
||||
@@map("subscription_message_consents")
|
||||
}
|
||||
|
||||
model CardType {
|
||||
id String @id @default(uuid())
|
||||
name String
|
||||
@@ -80,6 +129,7 @@ model CardType {
|
||||
price Decimal @db.Decimal(10, 0)
|
||||
originalPrice Decimal? @map("original_price") @db.Decimal(10, 0)
|
||||
description String?
|
||||
coverUrl String? @map("cover_url")
|
||||
isActive Boolean @default(true) @map("is_active")
|
||||
sortOrder Int @default(0) @map("sort_order")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
@@ -87,6 +137,7 @@ model CardType {
|
||||
|
||||
memberships Membership[]
|
||||
orders Order[]
|
||||
flashSales FlashSale[]
|
||||
|
||||
@@map("card_types")
|
||||
}
|
||||
@@ -105,6 +156,7 @@ model Membership {
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
cardType CardType @relation(fields: [cardTypeId], references: [id])
|
||||
bookings Booking[]
|
||||
inviteRewardGrants InviteRewardGrant[]
|
||||
|
||||
@@index([userId])
|
||||
@@index([status])
|
||||
@@ -164,6 +216,7 @@ model Booking {
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
timeSlot TimeSlot @relation(fields: [timeSlotId], references: [id])
|
||||
membership Membership @relation(fields: [membershipId], references: [id])
|
||||
qualifiedInviteReferrals InviteReferral[]
|
||||
|
||||
statusHistory BookingStatusHistory[]
|
||||
|
||||
@@ -197,17 +250,61 @@ model Order {
|
||||
status OrderStatus @default(PENDING)
|
||||
wxTransactionId String? @map("wx_transaction_id")
|
||||
paidAt DateTime? @map("paid_at")
|
||||
flashSaleId String? @map("flash_sale_id")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
cardType CardType @relation(fields: [cardTypeId], references: [id])
|
||||
flashSaleOrder FlashSaleOrder?
|
||||
inviteReferrals InviteReferral[]
|
||||
|
||||
@@index([userId])
|
||||
@@index([status])
|
||||
@@map("orders")
|
||||
}
|
||||
|
||||
model InviteReferral {
|
||||
id String @id @default(uuid())
|
||||
inviterId String @map("inviter_id")
|
||||
inviteeId String @unique @map("invitee_id")
|
||||
status InviteReferralStatus @default(REGISTERED)
|
||||
trialOrderId String? @unique @map("trial_order_id")
|
||||
qualifiedBookingId String? @unique @map("qualified_booking_id")
|
||||
invitedAt DateTime @default(now()) @map("invited_at")
|
||||
trialPurchasedAt DateTime? @map("trial_purchased_at")
|
||||
qualifiedAt DateTime? @map("qualified_at")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
inviter User @relation("InviteReferralInviter", fields: [inviterId], references: [id])
|
||||
invitee User @relation("InviteReferralInvitee", fields: [inviteeId], references: [id])
|
||||
trialOrder Order? @relation(fields: [trialOrderId], references: [id])
|
||||
qualifiedBooking Booking? @relation(fields: [qualifiedBookingId], references: [id])
|
||||
|
||||
@@unique([inviterId, inviteeId])
|
||||
@@index([inviterId, status])
|
||||
@@index([status])
|
||||
@@map("invite_referrals")
|
||||
}
|
||||
|
||||
model InviteRewardGrant {
|
||||
id String @id @default(uuid())
|
||||
inviterId String @map("inviter_id")
|
||||
membershipId String? @map("membership_id")
|
||||
qualifiedReferralCount Int @map("qualified_referral_count")
|
||||
rewardTimes Int @default(1) @map("reward_times")
|
||||
grantedAt DateTime @default(now()) @map("granted_at")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
inviter User @relation("InviteRewardGrantInviter", fields: [inviterId], references: [id])
|
||||
membership Membership? @relation(fields: [membershipId], references: [id])
|
||||
|
||||
@@index([inviterId, grantedAt])
|
||||
@@map("invite_reward_grants")
|
||||
}
|
||||
|
||||
model StudioConfig {
|
||||
id String @id @default(uuid())
|
||||
name String
|
||||
@@ -223,3 +320,48 @@ model StudioConfig {
|
||||
|
||||
@@map("studio_config")
|
||||
}
|
||||
|
||||
model FlashSale {
|
||||
id String @id @default(uuid())
|
||||
cardTypeId String @map("card_type_id")
|
||||
title String
|
||||
originalPrice Decimal @map("original_price") @db.Decimal(10, 0)
|
||||
flashPrice Decimal @map("flash_price") @db.Decimal(10, 0)
|
||||
totalStock Int @map("total_stock")
|
||||
soldCount Int @default(0) @map("sold_count")
|
||||
startTime DateTime @map("start_time")
|
||||
endTime DateTime @map("end_time")
|
||||
status FlashSaleStatus @default(DRAFT)
|
||||
description String? @db.Text
|
||||
sortOrder Int @default(0) @map("sort_order")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
cardType CardType @relation(fields: [cardTypeId], references: [id])
|
||||
orders FlashSaleOrder[]
|
||||
|
||||
@@index([status, startTime, endTime])
|
||||
@@map("flash_sales")
|
||||
}
|
||||
|
||||
model FlashSaleOrder {
|
||||
id String @id @default(uuid())
|
||||
flashSaleId String @map("flash_sale_id")
|
||||
userId String @map("user_id")
|
||||
orderId String? @unique @map("order_id")
|
||||
status FlashSaleOrderStatus @default(RESERVED)
|
||||
reservedAt DateTime @default(now()) @map("reserved_at")
|
||||
paidAt DateTime? @map("paid_at")
|
||||
expiredAt DateTime? @map("expired_at")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
flashSale FlashSale @relation(fields: [flashSaleId], references: [id])
|
||||
user User @relation(fields: [userId], references: [id])
|
||||
order Order? @relation(fields: [orderId], references: [id])
|
||||
|
||||
@@unique([flashSaleId, userId])
|
||||
@@index([userId])
|
||||
@@index([status])
|
||||
@@map("flash_sale_orders")
|
||||
}
|
||||
|
||||
@@ -98,6 +98,7 @@ async function main() {
|
||||
openid: 'admin_test_openid',
|
||||
nickname: '教练',
|
||||
role: UserRole.ADMIN,
|
||||
adminBookingSubscriptionCount: 0,
|
||||
},
|
||||
})
|
||||
console.log(' ✅ Admin user created')
|
||||
|
||||
39
packages/server/prisma/update-studio-gallery.ts
Normal file
39
packages/server/prisma/update-studio-gallery.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
import { DEFAULT_STUDIO_GALLERY_PHOTOS } from '@mp-pilates/shared'
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
async function main() {
|
||||
console.log('🖼️ Syncing studio gallery photos...')
|
||||
|
||||
const photos = [...DEFAULT_STUDIO_GALLERY_PHOTOS]
|
||||
const existing = await prisma.studioConfig.findFirst({ select: { id: true } })
|
||||
|
||||
if (existing) {
|
||||
await prisma.studioConfig.update({
|
||||
where: { id: existing.id },
|
||||
data: { photos },
|
||||
})
|
||||
console.log(` ✅ Updated existing studio config with ${photos.length} gallery images`)
|
||||
} else {
|
||||
await prisma.studioConfig.create({
|
||||
data: {
|
||||
name: '普拉提工作室',
|
||||
address: '请在管理后台设置地址',
|
||||
phone: '请在管理后台设置电话',
|
||||
cancelHoursLimit: 2,
|
||||
photos,
|
||||
},
|
||||
})
|
||||
console.log(` ✅ Created studio config with ${photos.length} gallery images`)
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
.catch((error) => {
|
||||
console.error('❌ Studio gallery sync failed:', error)
|
||||
process.exit(1)
|
||||
})
|
||||
.finally(async () => {
|
||||
await prisma.$disconnect()
|
||||
})
|
||||
@@ -11,6 +11,8 @@ import { BookingModule } from './booking/booking.module'
|
||||
import { SchedulerModule } from './scheduler/scheduler.module'
|
||||
import { PaymentModule } from './payment/payment.module'
|
||||
import { AdminModule } from './admin/admin.module'
|
||||
import { FlashSaleModule } from './flash-sale/flash-sale.module'
|
||||
import { InviteModule } from './invite/invite.module'
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
@@ -28,6 +30,8 @@ import { AdminModule } from './admin/admin.module'
|
||||
SchedulerModule,
|
||||
PaymentModule,
|
||||
AdminModule,
|
||||
FlashSaleModule,
|
||||
InviteModule,
|
||||
],
|
||||
controllers: [AppController],
|
||||
})
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { Test, TestingModule } from '@nestjs/testing'
|
||||
import { JwtService } from '@nestjs/jwt'
|
||||
import { UnauthorizedException } from '@nestjs/common'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import { MembershipStatus, UserRole } from '@mp-pilates/shared'
|
||||
import { ConfigService } from '@nestjs/config'
|
||||
import { AuthService, RANDOM_FN_TOKEN } from '../auth.service'
|
||||
import { WechatService } from '../wechat.service'
|
||||
import { PrismaService } from '../../prisma/prisma.service'
|
||||
import { InviteService } from '../../invite/invite.service'
|
||||
|
||||
// ─── Fixtures ────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -22,6 +24,7 @@ const mockUser = {
|
||||
nickname: TEST_NICKNAME,
|
||||
avatarUrl: null,
|
||||
role: UserRole.MEMBER,
|
||||
adminBookingSubscriptionCount: 0,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
}
|
||||
@@ -29,6 +32,9 @@ const mockUser = {
|
||||
// ─── Mocks ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const mockPrismaService = {
|
||||
membership: {
|
||||
count: jest.fn(),
|
||||
},
|
||||
user: {
|
||||
findUnique: jest.fn(),
|
||||
findUniqueOrThrow: jest.fn(),
|
||||
@@ -46,6 +52,14 @@ const mockJwtService = {
|
||||
sign: jest.fn(),
|
||||
}
|
||||
|
||||
const mockInviteService = {
|
||||
bindInviterToUser: jest.fn(),
|
||||
}
|
||||
|
||||
const mockConfigService = {
|
||||
get: jest.fn(),
|
||||
}
|
||||
|
||||
// ─── Tests ───────────────────────────────────────────────────────────────────
|
||||
|
||||
describe('AuthService', () => {
|
||||
@@ -58,6 +72,8 @@ describe('AuthService', () => {
|
||||
{ provide: PrismaService, useValue: mockPrismaService },
|
||||
{ provide: WechatService, useValue: mockWechatService },
|
||||
{ provide: JwtService, useValue: mockJwtService },
|
||||
{ provide: InviteService, useValue: mockInviteService },
|
||||
{ provide: ConfigService, useValue: mockConfigService },
|
||||
{ provide: RANDOM_FN_TOKEN, useValue: () => 0 }, // deterministic nickname
|
||||
],
|
||||
}).compile()
|
||||
@@ -66,6 +82,8 @@ describe('AuthService', () => {
|
||||
|
||||
jest.clearAllMocks()
|
||||
mockJwtService.sign.mockReturnValue(JWT_TOKEN)
|
||||
mockPrismaService.membership.count.mockResolvedValue(0)
|
||||
mockConfigService.get.mockReturnValue('tmpl-booking-confirmed')
|
||||
})
|
||||
|
||||
// ── login ──────────────────────────────────────────────────────────────────
|
||||
@@ -91,10 +109,30 @@ describe('AuthService', () => {
|
||||
where: { openid: OPENID },
|
||||
})
|
||||
expect(mockPrismaService.user.create).toHaveBeenCalledWith({
|
||||
data: { openid: OPENID, nickname: TEST_NICKNAME },
|
||||
data: { openid: OPENID, nickname: TEST_NICKNAME, adminBookingSubscriptionCount: 0 },
|
||||
})
|
||||
expect(result.user).toEqual(mockUser)
|
||||
expect(result.user).toEqual(expect.objectContaining({
|
||||
id: mockUser.id,
|
||||
phone: mockUser.phone,
|
||||
nickname: mockUser.nickname,
|
||||
avatarUrl: mockUser.avatarUrl,
|
||||
role: mockUser.role,
|
||||
activeMembershipCount: 0,
|
||||
inviteShareEligible: false,
|
||||
adminBookingSubscriptionCount: 0,
|
||||
}))
|
||||
expect(result.user.subscriptionMessageTemplates.templates).toHaveLength(2)
|
||||
expect(result.isNewUser).toBe(true)
|
||||
expect(mockInviteService.bindInviterToUser).toHaveBeenCalledWith(USER_ID, undefined)
|
||||
})
|
||||
|
||||
it('binds inviter for new users when inviterId is present', async () => {
|
||||
mockPrismaService.user.findUnique.mockResolvedValue(null)
|
||||
mockPrismaService.user.create.mockResolvedValue(mockUser)
|
||||
|
||||
await authService.login(loginCode, undefined, undefined, 'inviter-001')
|
||||
|
||||
expect(mockInviteService.bindInviterToUser).toHaveBeenCalledWith(USER_ID, 'inviter-001')
|
||||
})
|
||||
|
||||
it('creates user with unionid when present', async () => {
|
||||
@@ -110,7 +148,7 @@ describe('AuthService', () => {
|
||||
await authService.login(loginCode)
|
||||
|
||||
expect(mockPrismaService.user.create).toHaveBeenCalledWith({
|
||||
data: { openid: OPENID, unionid, nickname: TEST_NICKNAME },
|
||||
data: { openid: OPENID, unionid, nickname: TEST_NICKNAME, adminBookingSubscriptionCount: 0 },
|
||||
})
|
||||
})
|
||||
|
||||
@@ -123,7 +161,11 @@ describe('AuthService', () => {
|
||||
where: { openid: OPENID },
|
||||
})
|
||||
expect(mockPrismaService.user.create).not.toHaveBeenCalled()
|
||||
expect(result.user).toEqual(mockUser)
|
||||
expect(result.user).toEqual(expect.objectContaining({
|
||||
id: mockUser.id,
|
||||
nickname: mockUser.nickname,
|
||||
role: mockUser.role,
|
||||
}))
|
||||
expect(result.isNewUser).toBe(false)
|
||||
})
|
||||
|
||||
@@ -144,11 +186,35 @@ describe('AuthService', () => {
|
||||
|
||||
const result = await authService.login(loginCode)
|
||||
|
||||
expect(result).toEqual({
|
||||
expect(result).toEqual(expect.objectContaining({
|
||||
token: JWT_TOKEN,
|
||||
user: mockUser,
|
||||
isNewUser: false,
|
||||
}))
|
||||
expect(result.user).toEqual(expect.objectContaining({
|
||||
id: mockUser.id,
|
||||
subscriptionMessageTemplates: {
|
||||
templates: [
|
||||
expect.objectContaining({ scene: 'BOOKING_CREATED' }),
|
||||
expect.objectContaining({ scene: 'ADMIN_BOOKING_CREATED' }),
|
||||
],
|
||||
},
|
||||
}))
|
||||
})
|
||||
|
||||
it('includes active membership count and invite eligibility in login response', async () => {
|
||||
mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
|
||||
mockPrismaService.membership.count.mockResolvedValue(2)
|
||||
|
||||
const result = await authService.login(loginCode)
|
||||
|
||||
expect(mockPrismaService.membership.count).toHaveBeenCalledWith({
|
||||
where: {
|
||||
userId: USER_ID,
|
||||
status: MembershipStatus.ACTIVE,
|
||||
},
|
||||
})
|
||||
expect(result.user.activeMembershipCount).toBe(2)
|
||||
expect(result.user.inviteShareEligible).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import {
|
||||
Controller,
|
||||
Post,
|
||||
Body,
|
||||
UseGuards,
|
||||
Request,
|
||||
Controller,
|
||||
HttpCode,
|
||||
HttpStatus,
|
||||
Post,
|
||||
Request,
|
||||
UseGuards,
|
||||
} from '@nestjs/common'
|
||||
import type { UserProfileResponse } from '@mp-pilates/shared'
|
||||
import { AuthService } from './auth.service'
|
||||
import { LoginDto } from './dto/login.dto'
|
||||
import { BindPhoneDto } from './dto/bind-phone.dto'
|
||||
@@ -24,11 +25,12 @@ export class AuthController {
|
||||
|
||||
@Post('login')
|
||||
@HttpCode(HttpStatus.OK)
|
||||
async login(@Body() loginDto: LoginDto): Promise<{ token: string; user: User; isNewUser: boolean }> {
|
||||
async login(@Body() loginDto: LoginDto): Promise<{ token: string; user: UserProfileResponse; isNewUser: boolean }> {
|
||||
return this.authService.login(
|
||||
loginDto.code,
|
||||
loginDto.nickname,
|
||||
loginDto.avatarUrl,
|
||||
loginDto.inviterId,
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,16 +2,21 @@ import { Module } from '@nestjs/common'
|
||||
import { PassportModule } from '@nestjs/passport'
|
||||
import { JwtModule } from '@nestjs/jwt'
|
||||
import { ConfigModule, ConfigService } from '@nestjs/config'
|
||||
import { MembershipModule } from '../membership/membership.module'
|
||||
import { AuthService, RANDOM_FN_TOKEN } from './auth.service'
|
||||
import { AuthController } from './auth.controller'
|
||||
import { WechatService } from './wechat.service'
|
||||
import { JwtStrategy } from './jwt.strategy'
|
||||
import { JwtAuthGuard } from './jwt-auth.guard'
|
||||
import { RolesGuard } from './roles.guard'
|
||||
import { InviteModule } from '../invite/invite.module'
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
PassportModule,
|
||||
InviteModule,
|
||||
ConfigModule,
|
||||
MembershipModule,
|
||||
JwtModule.registerAsync({
|
||||
imports: [ConfigModule],
|
||||
inject: [ConfigService],
|
||||
|
||||
@@ -1,13 +1,22 @@
|
||||
import { Inject, Injectable, UnauthorizedException } from '@nestjs/common'
|
||||
import { JwtService } from '@nestjs/jwt'
|
||||
import { User } from '@prisma/client'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import {
|
||||
MembershipStatus,
|
||||
SubscriptionMessageScene,
|
||||
type SubscriptionMessageTemplate,
|
||||
type SubscriptionMessageTemplateConfig,
|
||||
type UserProfileResponse,
|
||||
UserRole,
|
||||
} from '@mp-pilates/shared'
|
||||
import { ConfigService } from '@nestjs/config'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { WechatService } from './wechat.service'
|
||||
import { InviteService } from '../invite/invite.service'
|
||||
|
||||
export interface LoginResult {
|
||||
token: string
|
||||
user: User
|
||||
user: UserProfileResponse
|
||||
isNewUser: boolean
|
||||
}
|
||||
|
||||
@@ -55,13 +64,59 @@ export class AuthService {
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly jwtService: JwtService,
|
||||
private readonly wechatService: WechatService,
|
||||
private readonly inviteService: InviteService,
|
||||
private readonly configService: ConfigService,
|
||||
@Inject(RANDOM_FN_TOKEN) private readonly randomFn: () => number = Math.random,
|
||||
) {}
|
||||
|
||||
private buildSubscriptionTemplateConfig(): SubscriptionMessageTemplateConfig {
|
||||
const templates = [
|
||||
{
|
||||
templateId: this.configService.get<string>('WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED', ''),
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
description: '购卡或预约时请求一次订阅,用于后续预约确认通知推送',
|
||||
usageTarget: 'consent' as const,
|
||||
},
|
||||
{
|
||||
templateId: this.configService.get<string>('WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED', ''),
|
||||
scene: SubscriptionMessageScene.ADMIN_BOOKING_CREATED,
|
||||
description: '管理员主动增加预约提醒次数,用于接收学员新预约通知',
|
||||
usageTarget: 'counter' as const,
|
||||
},
|
||||
] satisfies SubscriptionMessageTemplate[]
|
||||
|
||||
return {
|
||||
templates: templates.filter((item) => item.templateId),
|
||||
}
|
||||
}
|
||||
|
||||
private async mapLoginUser(user: User): Promise<UserProfileResponse> {
|
||||
const activeMembershipCount = await this.prisma.membership.count({
|
||||
where: {
|
||||
userId: user.id,
|
||||
status: MembershipStatus.ACTIVE,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
id: user.id,
|
||||
phone: user.phone,
|
||||
nickname: user.nickname,
|
||||
avatarUrl: user.avatarUrl,
|
||||
role: user.role as UserRole,
|
||||
activeMembershipCount,
|
||||
inviteShareEligible: activeMembershipCount > 0,
|
||||
adminBookingSubscriptionCount: user.adminBookingSubscriptionCount,
|
||||
subscriptionMessageTemplates: this.buildSubscriptionTemplateConfig(),
|
||||
createdAt: user.createdAt.toISOString(),
|
||||
}
|
||||
}
|
||||
|
||||
async login(
|
||||
code: string,
|
||||
nickname?: string,
|
||||
avatarUrl?: string,
|
||||
inviterId?: string,
|
||||
): Promise<LoginResult> {
|
||||
const { openid, unionid, sessionKey } =
|
||||
await this.wechatService.code2Session(code)
|
||||
@@ -80,6 +135,7 @@ export class AuthService {
|
||||
...(unionid !== undefined && { unionid }),
|
||||
nickname: nickname || generateDefaultNickname(this.randomFn),
|
||||
...(avatarUrl && { avatarUrl }),
|
||||
adminBookingSubscriptionCount: 0,
|
||||
},
|
||||
}))
|
||||
|
||||
@@ -92,15 +148,19 @@ export class AuthService {
|
||||
sessionKeyStore.set(updated.id, sessionKey)
|
||||
const payload: JwtPayload = { sub: updated.id, role: updated.role as UserRole }
|
||||
const token = this.jwtService.sign(payload)
|
||||
return { token, user: updated, isNewUser: false }
|
||||
return { token, user: await this.mapLoginUser(updated), isNewUser: false }
|
||||
}
|
||||
|
||||
sessionKeyStore.set(user.id, sessionKey)
|
||||
|
||||
if (isNewUser) {
|
||||
await this.inviteService.bindInviterToUser(user.id, inviterId)
|
||||
}
|
||||
|
||||
const payload: JwtPayload = { sub: user.id, role: user.role as UserRole }
|
||||
const token = this.jwtService.sign(payload)
|
||||
|
||||
return { token, user, isNewUser }
|
||||
return { token, user: await this.mapLoginUser(user), isNewUser }
|
||||
}
|
||||
|
||||
async bindPhone(
|
||||
|
||||
@@ -12,4 +12,8 @@ export class LoginDto {
|
||||
@IsString()
|
||||
@IsOptional()
|
||||
avatarUrl?: string
|
||||
|
||||
@IsString()
|
||||
@IsOptional()
|
||||
inviterId?: string
|
||||
}
|
||||
|
||||
@@ -5,11 +5,13 @@ import {
|
||||
ForbiddenException,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import { BookingStatus, CardTypeCategory, MembershipStatus, TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import { BookingStatus, CardTypeCategory, MembershipStatus, TimeSlotStatus, UserRole } from '@mp-pilates/shared'
|
||||
import { BookingService } from '../booking.service'
|
||||
import { PrismaService } from '../../prisma/prisma.service'
|
||||
import { MembershipService } from '../../membership/membership.service'
|
||||
import { StudioService } from '../../studio/studio.service'
|
||||
import { SubscriptionMessageService } from '../../user/subscription-message.service'
|
||||
import { InviteService } from '../../invite/invite.service'
|
||||
|
||||
// ─── Fixtures ──────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -138,6 +140,9 @@ function buildTxMock(overrides: Record<string, unknown> = {}) {
|
||||
findUnique: jest.fn(),
|
||||
update: jest.fn(),
|
||||
},
|
||||
bookingStatusHistory: {
|
||||
create: jest.fn(),
|
||||
},
|
||||
...overrides,
|
||||
}
|
||||
}
|
||||
@@ -148,6 +153,8 @@ describe('BookingService', () => {
|
||||
let service: BookingService
|
||||
let prisma: jest.Mocked<PrismaService>
|
||||
let studioService: jest.Mocked<StudioService>
|
||||
let subscriptionMessageService: { sendBookingConfirmedMessage: jest.Mock; sendAdminBookingCreatedMessage: jest.Mock }
|
||||
let inviteService: { recordQualifiedTrialBooking: jest.Mock }
|
||||
|
||||
beforeEach(async () => {
|
||||
const module: TestingModule = await Test.createTestingModule({
|
||||
@@ -166,12 +173,17 @@ describe('BookingService', () => {
|
||||
},
|
||||
timeSlot: {
|
||||
findUnique: jest.fn(),
|
||||
findMany: jest.fn(),
|
||||
update: jest.fn(),
|
||||
},
|
||||
membership: {
|
||||
findUnique: jest.fn(),
|
||||
update: jest.fn(),
|
||||
},
|
||||
user: {
|
||||
findUnique: jest.fn(),
|
||||
findMany: jest.fn(),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -188,38 +200,141 @@ describe('BookingService', () => {
|
||||
getInfo: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: SubscriptionMessageService,
|
||||
useValue: {
|
||||
sendBookingConfirmedMessage: jest.fn(),
|
||||
sendAdminBookingCreatedMessage: jest.fn(),
|
||||
},
|
||||
},
|
||||
{
|
||||
provide: InviteService,
|
||||
useValue: {
|
||||
recordQualifiedTrialBooking: jest.fn(),
|
||||
},
|
||||
},
|
||||
],
|
||||
}).compile()
|
||||
|
||||
service = module.get<BookingService>(BookingService)
|
||||
prisma = module.get(PrismaService) as jest.Mocked<PrismaService>
|
||||
studioService = module.get(StudioService) as jest.Mocked<StudioService>
|
||||
subscriptionMessageService = module.get(SubscriptionMessageService)
|
||||
inviteService = module.get(InviteService)
|
||||
})
|
||||
|
||||
afterEach(() => jest.clearAllMocks())
|
||||
|
||||
describe('confirmBooking', () => {
|
||||
it('sends booking confirmed subscription message after admin confirmation', async () => {
|
||||
const tx = buildTxMock({
|
||||
bookingStatusHistory: { create: jest.fn() },
|
||||
})
|
||||
tx.booking.findUnique.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
tx.booking.update.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
confirmedAt: new Date('2099-12-30T00:00:00Z'),
|
||||
})
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1, status: TimeSlotStatus.OPEN })
|
||||
tx.membership.update.mockResolvedValue({ ...mockActiveMembership, remainingTimes: 4 })
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
confirmedAt: new Date('2099-12-30T00:00:00Z'),
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
;(prisma.user.findUnique as jest.Mock).mockResolvedValue({ openid: 'openid-001' })
|
||||
studioService.getInfo.mockResolvedValue({
|
||||
...mockStudioConfig,
|
||||
name: 'FocusCore Pilates',
|
||||
})
|
||||
subscriptionMessageService.sendBookingConfirmedMessage.mockResolvedValue(true)
|
||||
|
||||
await service.confirmBooking(MOCK_BOOKING_ID, 'admin-001')
|
||||
|
||||
expect(subscriptionMessageService.sendBookingConfirmedMessage).toHaveBeenCalledWith({
|
||||
openid: 'openid-001',
|
||||
bookingId: MOCK_BOOKING_ID,
|
||||
bookingContent: '预约已确认',
|
||||
bookingTime: '2099-12-31 09:00',
|
||||
courseName: 'FocusCore Pilates',
|
||||
bookingEndTime: '2099-12-31 10:00',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('completeBooking', () => {
|
||||
it('records qualified trial booking after completion', async () => {
|
||||
const tx = buildTxMock({
|
||||
bookingStatusHistory: { create: jest.fn() },
|
||||
})
|
||||
|
||||
tx.booking.findUnique.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
timeSlot: mockOpenSlot,
|
||||
})
|
||||
tx.booking.update.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.COMPLETED,
|
||||
completedAt: new Date('2099-12-31T11:00:00Z'),
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.COMPLETED,
|
||||
completedAt: new Date('2099-12-31T11:00:00Z'),
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: {
|
||||
...mockActiveMembership,
|
||||
cardType: {
|
||||
...mockTimesCardType,
|
||||
type: CardTypeCategory.TRIAL,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
await service.completeBooking(MOCK_BOOKING_ID, 'admin-001')
|
||||
|
||||
expect(inviteService.recordQualifiedTrialBooking).toHaveBeenCalledWith(MOCK_BOOKING_ID)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── createBooking ────────────────────────────────────────────────────────
|
||||
|
||||
describe('createBooking', () => {
|
||||
const dto = { timeSlotId: MOCK_SLOT_ID, membershipId: MOCK_MEMBERSHIP_ID }
|
||||
|
||||
it('creates booking, increments bookedCount, and deducts membership (TIMES card)', async () => {
|
||||
it('creates booking in pending confirmation status', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null) // no duplicate
|
||||
tx.booking.findUnique.mockResolvedValue(null) // no duplicate
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
tx.membership.update.mockResolvedValue({ ...mockActiveMembership, remainingTimes: 4 })
|
||||
tx.booking.create.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
|
||||
// Mock the re-fetch after transaction
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([])
|
||||
|
||||
const result = await service.createBooking(MOCK_USER_ID, dto)
|
||||
|
||||
@@ -229,55 +344,46 @@ describe('BookingService', () => {
|
||||
userId: MOCK_USER_ID,
|
||||
timeSlotId: MOCK_SLOT_ID,
|
||||
membershipId: MOCK_MEMBERSHIP_ID,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
|
||||
// bookedCount incremented from 0 → 1, still OPEN (capacity 5)
|
||||
expect(tx.timeSlot.update).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
data: expect.objectContaining({ bookedCount: 1, status: TimeSlotStatus.OPEN }),
|
||||
}),
|
||||
)
|
||||
|
||||
// membership deducted from 5 → 4
|
||||
expect(tx.membership.update).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
data: expect.objectContaining({
|
||||
remainingTimes: 4,
|
||||
status: MembershipStatus.ACTIVE,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
expect(tx.timeSlot.update).not.toHaveBeenCalled()
|
||||
expect(tx.membership.update).not.toHaveBeenCalled()
|
||||
|
||||
expect(result).toBeDefined()
|
||||
})
|
||||
|
||||
it('sets slot to FULL when bookedCount reaches capacity', async () => {
|
||||
it('records booking status history when user creates a booking', async () => {
|
||||
const nearFullSlot = { ...mockOpenSlot, bookedCount: 4, capacity: 5 }
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(nearFullSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...nearFullSlot, bookedCount: 5, status: TimeSlotStatus.FULL })
|
||||
tx.membership.update.mockResolvedValue({ ...mockActiveMembership, remainingTimes: 4 })
|
||||
tx.booking.create.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
timeSlot: { ...nearFullSlot, status: TimeSlotStatus.FULL },
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: nearFullSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([])
|
||||
|
||||
await service.createBooking(MOCK_USER_ID, dto)
|
||||
|
||||
// bookedCount 4+1 = 5 = capacity → FULL
|
||||
expect(tx.timeSlot.update).toHaveBeenCalledWith(
|
||||
expect(tx.bookingStatusHistory.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
data: expect.objectContaining({ bookedCount: 5, status: TimeSlotStatus.FULL }),
|
||||
data: expect.objectContaining({
|
||||
toStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
operatorId: MOCK_USER_ID,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
})
|
||||
@@ -287,7 +393,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockDurationMembership)
|
||||
tx.booking.create.mockResolvedValue({ ...mockConfirmedBooking, membershipId: mockDurationMembership.id })
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
@@ -299,6 +405,7 @@ describe('BookingService', () => {
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockDurationMembership,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([])
|
||||
|
||||
await service.createBooking(MOCK_USER_ID, durationDto)
|
||||
|
||||
@@ -306,34 +413,78 @@ describe('BookingService', () => {
|
||||
expect(tx.membership.update).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('marks membership as USED_UP when remainingTimes hits 0', async () => {
|
||||
const lastTimeMembership = { ...mockActiveMembership, remainingTimes: 1 }
|
||||
|
||||
it('allows time-based membership with zero remaining times and leaves deduction to admin confirmation', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(lastTimeMembership)
|
||||
tx.booking.create.mockResolvedValue(mockConfirmedBooking)
|
||||
tx.timeSlot.update.mockResolvedValue({ ...mockOpenSlot, bookedCount: 1 })
|
||||
tx.membership.update.mockResolvedValue({ ...lastTimeMembership, remainingTimes: 0, status: MembershipStatus.USED_UP })
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockMembershipNoTimes)
|
||||
tx.booking.create.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
membershipId: mockMembershipNoTimes.id,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
membershipId: mockMembershipNoTimes.id,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: { ...lastTimeMembership, remainingTimes: 0, status: MembershipStatus.USED_UP },
|
||||
membership: mockMembershipNoTimes,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([])
|
||||
|
||||
await service.createBooking(MOCK_USER_ID, dto)
|
||||
|
||||
expect(tx.membership.update).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
data: expect.objectContaining({
|
||||
remainingTimes: 0,
|
||||
status: MembershipStatus.USED_UP,
|
||||
}),
|
||||
}),
|
||||
)
|
||||
expect(tx.membership.update).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('sends admin booking created subscription message to admins with remaining count', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.create.mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([
|
||||
{ openid: 'admin-openid-1' },
|
||||
])
|
||||
;(prisma.user.findUnique as jest.Mock).mockResolvedValue({ nickname: 'Alice', phone: '13800000000' })
|
||||
studioService.getInfo.mockResolvedValue({
|
||||
...mockStudioConfig,
|
||||
name: 'FocusCore Pilates',
|
||||
})
|
||||
subscriptionMessageService.sendAdminBookingCreatedMessage.mockResolvedValue(true)
|
||||
|
||||
await service.createBooking(MOCK_USER_ID, dto)
|
||||
|
||||
expect(prisma.user.findMany).toHaveBeenCalledWith({
|
||||
where: {
|
||||
role: UserRole.ADMIN,
|
||||
adminBookingSubscriptionCount: { gt: 0 },
|
||||
},
|
||||
select: {
|
||||
openid: true,
|
||||
},
|
||||
})
|
||||
expect(subscriptionMessageService.sendAdminBookingCreatedMessage).toHaveBeenCalledWith({
|
||||
openid: 'admin-openid-1',
|
||||
bookingId: MOCK_BOOKING_ID,
|
||||
bookingContent: 'Alice已预约',
|
||||
bookingTime: '2099-12-31 09:00',
|
||||
courseName: 'FocusCore Pilates',
|
||||
bookingEndTime: '2099-12-31 10:00',
|
||||
})
|
||||
})
|
||||
|
||||
it('throws BadRequestException when slot is FULL', async () => {
|
||||
@@ -352,7 +503,7 @@ describe('BookingService', () => {
|
||||
it('throws ConflictException on duplicate booking (same user + slot)', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(mockConfirmedBooking) // duplicate exists
|
||||
tx.booking.findUnique.mockResolvedValue(mockConfirmedBooking) // duplicate exists
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
|
||||
@@ -364,7 +515,7 @@ describe('BookingService', () => {
|
||||
it('throws BadRequestException when membership is not ACTIVE (expired status)', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockExpiredMembership)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
@@ -374,20 +525,6 @@ describe('BookingService', () => {
|
||||
)
|
||||
})
|
||||
|
||||
it('throws BadRequestException when TIMES membership has 0 remaining', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(mockMembershipNoTimes)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
|
||||
await expect(service.createBooking(MOCK_USER_ID, dto)).rejects.toThrow(
|
||||
BadRequestException,
|
||||
)
|
||||
expect(tx.booking.create).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('throws NotFoundException when timeSlot does not exist', async () => {
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(null)
|
||||
@@ -404,7 +541,7 @@ describe('BookingService', () => {
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findFirst.mockResolvedValue(null)
|
||||
tx.booking.findUnique.mockResolvedValue(null)
|
||||
tx.membership.findUnique.mockResolvedValue(otherUserMembership)
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
@@ -413,6 +550,65 @@ describe('BookingService', () => {
|
||||
ForbiddenException,
|
||||
)
|
||||
})
|
||||
|
||||
it('reuses a cancelled booking record when booking the same slot again', async () => {
|
||||
const cancelledBooking = {
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.CANCELLED,
|
||||
membershipId: 'mem-old-001',
|
||||
cancelledAt: new Date('2099-12-30T00:00:00Z'),
|
||||
confirmedAt: new Date('2099-12-29T00:00:00Z'),
|
||||
completedAt: null,
|
||||
operatorId: 'admin-001',
|
||||
}
|
||||
|
||||
const tx = buildTxMock()
|
||||
tx.timeSlot.findUnique.mockResolvedValue(mockOpenSlot)
|
||||
tx.booking.findUnique.mockResolvedValue(cancelledBooking)
|
||||
tx.membership.findUnique.mockResolvedValue(mockActiveMembership)
|
||||
tx.booking.update.mockResolvedValue({
|
||||
...cancelledBooking,
|
||||
membershipId: MOCK_MEMBERSHIP_ID,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
cancelledAt: null,
|
||||
confirmedAt: null,
|
||||
operatorId: null,
|
||||
})
|
||||
|
||||
;(prisma.$transaction as jest.Mock).mockImplementation((fn) => fn(tx))
|
||||
;(prisma.booking.findUnique as jest.Mock).mockResolvedValue({
|
||||
...mockConfirmedBooking,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
timeSlot: mockOpenSlot,
|
||||
membership: mockActiveMembership,
|
||||
})
|
||||
;(prisma.user.findMany as jest.Mock).mockResolvedValue([])
|
||||
|
||||
await service.createBooking(MOCK_USER_ID, dto)
|
||||
|
||||
expect(tx.booking.create).not.toHaveBeenCalled()
|
||||
expect(tx.booking.update).toHaveBeenCalledWith({
|
||||
where: { id: MOCK_BOOKING_ID },
|
||||
data: {
|
||||
membershipId: MOCK_MEMBERSHIP_ID,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
cancelledAt: null,
|
||||
confirmedAt: null,
|
||||
completedAt: null,
|
||||
operatorId: null,
|
||||
},
|
||||
})
|
||||
expect(tx.bookingStatusHistory.create).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
data: expect.objectContaining({
|
||||
bookingId: MOCK_BOOKING_ID,
|
||||
fromStatus: BookingStatus.CANCELLED,
|
||||
toStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
remark: '学员重新发起预约',
|
||||
}),
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
// ─── cancelBooking ────────────────────────────────────────────────────────
|
||||
@@ -662,7 +858,7 @@ describe('BookingService', () => {
|
||||
expect.objectContaining({
|
||||
where: expect.objectContaining({
|
||||
userId: MOCK_USER_ID,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
}),
|
||||
orderBy: [
|
||||
{ timeSlot: { date: 'asc' } },
|
||||
@@ -708,4 +904,101 @@ describe('BookingService', () => {
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
describe('getTeachingScheduleByDate', () => {
|
||||
it('returns sorted slots with active students only', async () => {
|
||||
;(prisma.timeSlot.findMany as jest.Mock).mockResolvedValue([
|
||||
{
|
||||
id: 'slot-02',
|
||||
startTime: '11:00',
|
||||
endTime: '12:00',
|
||||
bookedCount: 1,
|
||||
capacity: 1,
|
||||
bookings: [
|
||||
{
|
||||
id: 'booking-02',
|
||||
status: BookingStatus.CONFIRMED,
|
||||
createdAt: new Date('2026-04-19T01:00:00Z'),
|
||||
user: { id: 'user-02', nickname: '李四', phone: '13800000000' },
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'slot-01',
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
bookedCount: 2,
|
||||
capacity: 2,
|
||||
bookings: [
|
||||
{
|
||||
id: 'booking-01',
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
createdAt: new Date('2026-04-19T00:00:00Z'),
|
||||
user: { id: 'user-01', nickname: '张三', phone: null },
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
|
||||
const result = await service.getTeachingScheduleByDate('2026-04-19')
|
||||
|
||||
expect(prisma.timeSlot.findMany).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
where: expect.objectContaining({
|
||||
bookings: {
|
||||
some: {
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
},
|
||||
}),
|
||||
orderBy: [
|
||||
{ startTime: 'asc' },
|
||||
{ endTime: 'asc' },
|
||||
],
|
||||
}),
|
||||
)
|
||||
expect(result).toEqual([
|
||||
{
|
||||
slotId: 'slot-01',
|
||||
date: '2026-04-19',
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
bookedCount: 2,
|
||||
capacity: 2,
|
||||
students: [
|
||||
{
|
||||
bookingId: 'booking-01',
|
||||
userId: 'user-01',
|
||||
nickname: '张三',
|
||||
phone: null,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
slotId: 'slot-02',
|
||||
date: '2026-04-19',
|
||||
startTime: '11:00',
|
||||
endTime: '12:00',
|
||||
bookedCount: 1,
|
||||
capacity: 1,
|
||||
students: [
|
||||
{
|
||||
bookingId: 'booking-02',
|
||||
userId: 'user-02',
|
||||
nickname: '李四',
|
||||
phone: '13800000000',
|
||||
status: BookingStatus.CONFIRMED,
|
||||
},
|
||||
],
|
||||
},
|
||||
])
|
||||
})
|
||||
|
||||
it('rejects invalid date input', async () => {
|
||||
await expect(service.getTeachingScheduleByDate('invalid-date')).rejects.toThrow(
|
||||
BadRequestException,
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Body,
|
||||
Controller,
|
||||
Get,
|
||||
@@ -91,6 +92,16 @@ export class BookingController {
|
||||
)
|
||||
}
|
||||
|
||||
@Get('admin/teaching-schedule')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
async getTeachingSchedule(@Query('date') date?: string) {
|
||||
if (!date) {
|
||||
throw new BadRequestException('date is required')
|
||||
}
|
||||
return this.bookingService.getTeachingScheduleByDate(date)
|
||||
}
|
||||
|
||||
@Put('booking/:id/confirm')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
|
||||
@@ -3,9 +3,11 @@ import { BookingController } from './booking.controller'
|
||||
import { BookingService } from './booking.service'
|
||||
import { MembershipModule } from '../membership/membership.module'
|
||||
import { StudioModule } from '../studio/studio.module'
|
||||
import { UserModule } from '../user/user.module'
|
||||
import { InviteModule } from '../invite/invite.module'
|
||||
|
||||
@Module({
|
||||
imports: [MembershipModule, StudioModule],
|
||||
imports: [MembershipModule, StudioModule, UserModule, InviteModule],
|
||||
controllers: [BookingController],
|
||||
providers: [BookingService],
|
||||
exports: [BookingService],
|
||||
|
||||
@@ -6,11 +6,19 @@ import {
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import { Booking, Membership, TimeSlot, BookingStatusHistory } from '@prisma/client'
|
||||
import { BookingStatus, CardTypeCategory, MembershipStatus, TimeSlotStatus } from '@mp-pilates/shared'
|
||||
import {
|
||||
BookingStatus,
|
||||
CardTypeCategory,
|
||||
MembershipStatus,
|
||||
TimeSlotStatus,
|
||||
type TeachingScheduleSlot,
|
||||
} from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { MembershipService } from '../membership/membership.service'
|
||||
import { StudioService } from '../studio/studio.service'
|
||||
import { SubscriptionMessageService } from '../user/subscription-message.service'
|
||||
import { CreateBookingDto } from './dto/create-booking.dto'
|
||||
import { InviteService } from '../invite/invite.service'
|
||||
|
||||
// ─── Types ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -48,6 +56,8 @@ export class BookingService {
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly membershipService: MembershipService,
|
||||
private readonly studioService: StudioService,
|
||||
private readonly subscriptionMessageService: SubscriptionMessageService,
|
||||
private readonly inviteService: InviteService,
|
||||
) {}
|
||||
|
||||
// ─── Create Booking ──────────────────────────────────────────────────────
|
||||
@@ -70,15 +80,20 @@ export class BookingService {
|
||||
)
|
||||
}
|
||||
|
||||
// 2. Check for active (PENDING_CONFIRMATION or CONFIRMED) booking — cancelled bookings don't block re-booking
|
||||
const existing = await tx.booking.findFirst({
|
||||
// 2. Find existing booking record for this user + slot.
|
||||
// The DB keeps a unique key on this pair, so cancelled bookings must be revived instead of recreated.
|
||||
const existing = await tx.booking.findUnique({
|
||||
where: {
|
||||
userId_timeSlotId: {
|
||||
userId,
|
||||
timeSlotId: dto.timeSlotId,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
},
|
||||
})
|
||||
if (existing) {
|
||||
if (
|
||||
existing &&
|
||||
(existing.status === 'PENDING_CONFIRMATION' || existing.status === 'CONFIRMED')
|
||||
) {
|
||||
throw new ConflictException('You have already booked this time slot')
|
||||
}
|
||||
|
||||
@@ -113,8 +128,20 @@ export class BookingService {
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Create booking with PENDING_CONFIRMATION status
|
||||
const newBooking = await tx.booking.create({
|
||||
// 5. Create booking or revive a previously cancelled booking.
|
||||
const newBooking = existing?.status === BookingStatus.CANCELLED
|
||||
? await tx.booking.update({
|
||||
where: { id: existing.id },
|
||||
data: {
|
||||
membershipId: dto.membershipId,
|
||||
status: BookingStatus.PENDING_CONFIRMATION,
|
||||
cancelledAt: null,
|
||||
confirmedAt: null,
|
||||
completedAt: null,
|
||||
operatorId: null,
|
||||
},
|
||||
})
|
||||
: await tx.booking.create({
|
||||
data: {
|
||||
userId,
|
||||
timeSlotId: dto.timeSlotId,
|
||||
@@ -123,14 +150,18 @@ export class BookingService {
|
||||
},
|
||||
})
|
||||
|
||||
// 6. Record status history: created
|
||||
// 6. Record status history: created or re-created from cancelled state.
|
||||
await tx.bookingStatusHistory.create({
|
||||
data: {
|
||||
bookingId: newBooking.id,
|
||||
fromStatus: null,
|
||||
fromStatus: existing?.status === BookingStatus.CANCELLED
|
||||
? BookingStatus.CANCELLED
|
||||
: null,
|
||||
toStatus: BookingStatus.PENDING_CONFIRMATION,
|
||||
operatorId: userId,
|
||||
remark: '学员发起预约',
|
||||
remark: existing?.status === BookingStatus.CANCELLED
|
||||
? '学员重新发起预约'
|
||||
: '学员发起预约',
|
||||
},
|
||||
})
|
||||
|
||||
@@ -138,7 +169,9 @@ export class BookingService {
|
||||
})
|
||||
|
||||
// Re-fetch with relations after transaction
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
const bookingWithRelations = await this.fetchBookingWithRelations(booking.id)
|
||||
await this.trySendAdminBookingCreatedSubscriptionMessages(bookingWithRelations)
|
||||
return bookingWithRelations
|
||||
}
|
||||
|
||||
// ─── Confirm Booking (Admin) ─────────────────────────────────────────────
|
||||
@@ -235,7 +268,9 @@ export class BookingService {
|
||||
return updated
|
||||
})
|
||||
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
const confirmedBooking = await this.fetchBookingWithRelations(booking.id)
|
||||
await this.trySendBookingConfirmedSubscriptionMessage(confirmedBooking)
|
||||
return confirmedBooking
|
||||
}
|
||||
|
||||
// ─── Complete / NoShow Booking (Admin) ──────────────────────────────────
|
||||
@@ -303,7 +338,11 @@ export class BookingService {
|
||||
return updated
|
||||
})
|
||||
|
||||
return this.fetchBookingWithRelations(booking.id)
|
||||
const result = await this.fetchBookingWithRelations(booking.id)
|
||||
if (toStatus === BookingStatus.COMPLETED) {
|
||||
await this.inviteService.recordQualifiedTrialBooking(result.id)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// ─── Cancel Booking ──────────────────────────────────────────────────────
|
||||
@@ -549,6 +588,72 @@ export class BookingService {
|
||||
}
|
||||
}
|
||||
|
||||
async getTeachingScheduleByDate(date: string): Promise<TeachingScheduleSlot[]> {
|
||||
const dayStart = new Date(`${date}T00:00:00.000Z`)
|
||||
if (Number.isNaN(dayStart.getTime())) {
|
||||
throw new BadRequestException('Invalid date')
|
||||
}
|
||||
|
||||
const slots = await this.prisma.timeSlot.findMany({
|
||||
where: {
|
||||
date: dayStart,
|
||||
bookings: {
|
||||
some: {
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
},
|
||||
},
|
||||
include: {
|
||||
bookings: {
|
||||
where: {
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
include: {
|
||||
user: {
|
||||
select: {
|
||||
id: true,
|
||||
nickname: true,
|
||||
phone: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: [
|
||||
{ status: 'asc' },
|
||||
{ createdAt: 'asc' },
|
||||
],
|
||||
},
|
||||
},
|
||||
orderBy: [
|
||||
{ startTime: 'asc' },
|
||||
{ endTime: 'asc' },
|
||||
],
|
||||
})
|
||||
|
||||
return slots
|
||||
.map((slot) => ({
|
||||
slotId: slot.id,
|
||||
date,
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
bookedCount: slot.bookedCount,
|
||||
capacity: slot.capacity,
|
||||
students: slot.bookings.map((booking) => ({
|
||||
bookingId: booking.id,
|
||||
userId: booking.user.id,
|
||||
nickname: booking.user.nickname,
|
||||
phone: booking.user.phone,
|
||||
status: booking.status as BookingStatus,
|
||||
})),
|
||||
}))
|
||||
.sort((a, b) => {
|
||||
const byStart = a.startTime.localeCompare(b.startTime)
|
||||
if (byStart !== 0) {
|
||||
return byStart
|
||||
}
|
||||
return a.endTime.localeCompare(b.endTime)
|
||||
})
|
||||
}
|
||||
|
||||
// ─── Private Helpers ─────────────────────────────────────────────────────
|
||||
|
||||
private async fetchBookingWithRelations(bookingId: string): Promise<BookingWithRelations> {
|
||||
@@ -566,4 +671,90 @@ export class BookingService {
|
||||
|
||||
return { ...booking } as BookingWithRelations
|
||||
}
|
||||
|
||||
private async trySendBookingConfirmedSubscriptionMessage(
|
||||
booking: BookingWithRelations,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const user = await this.prisma.user.findUnique({
|
||||
where: { id: booking.userId },
|
||||
select: { openid: true },
|
||||
})
|
||||
if (!user?.openid) {
|
||||
return
|
||||
}
|
||||
|
||||
const studio = await this.studioService.getInfo()
|
||||
const bookingDate = booking.timeSlot.date
|
||||
const dateLabel = `${bookingDate.getFullYear()}-${String(bookingDate.getMonth() + 1).padStart(2, '0')}-${String(bookingDate.getDate()).padStart(2, '0')}`
|
||||
|
||||
await this.subscriptionMessageService.sendBookingConfirmedMessage({
|
||||
openid: user.openid,
|
||||
bookingId: booking.id,
|
||||
bookingContent: '预约已确认',
|
||||
bookingTime: `${dateLabel} ${booking.timeSlot.startTime.slice(0, 5)}`,
|
||||
courseName: studio.name || '普拉提课程',
|
||||
bookingEndTime: `${dateLabel} ${booking.timeSlot.endTime.slice(0, 5)}`,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Send booking confirmed subscription message failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
private async trySendAdminBookingCreatedSubscriptionMessages(
|
||||
booking: BookingWithRelations,
|
||||
): Promise<void> {
|
||||
try {
|
||||
const admins = await this.prisma.user.findMany({
|
||||
where: {
|
||||
role: 'ADMIN',
|
||||
adminBookingSubscriptionCount: { gt: 0 },
|
||||
},
|
||||
select: {
|
||||
openid: true,
|
||||
},
|
||||
})
|
||||
|
||||
if (admins.length === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const student = await this.prisma.user.findUnique({
|
||||
where: { id: booking.userId },
|
||||
select: { nickname: true, phone: true },
|
||||
})
|
||||
const studio = await this.studioService.getInfo()
|
||||
const bookingDate = booking.timeSlot.date
|
||||
const dateLabel = `${bookingDate.getFullYear()}-${String(bookingDate.getMonth() + 1).padStart(2, '0')}-${String(bookingDate.getDate()).padStart(2, '0')}`
|
||||
const studentLabel = this.buildAdminBookingStudentLabel(student)
|
||||
await Promise.allSettled(
|
||||
admins
|
||||
.filter((admin) => admin.openid)
|
||||
.map((admin) => this.subscriptionMessageService.sendAdminBookingCreatedMessage({
|
||||
openid: admin.openid,
|
||||
bookingId: booking.id,
|
||||
bookingContent: `${studentLabel}已预约`.slice(0, 20),
|
||||
bookingTime: `${dateLabel} ${booking.timeSlot.startTime.slice(0, 5)}`,
|
||||
courseName: studio.name || '普拉提课程',
|
||||
bookingEndTime: `${dateLabel} ${booking.timeSlot.endTime.slice(0, 5)}`,
|
||||
})),
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('Send admin booking created subscription message failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
private buildAdminBookingStudentLabel(student: { nickname: string; phone: string | null } | null): string {
|
||||
const nickname = (student?.nickname || '').trim()
|
||||
if (nickname) {
|
||||
return nickname.slice(0, 8)
|
||||
}
|
||||
|
||||
const phone = student?.phone || ''
|
||||
if (phone.length >= 4) {
|
||||
return `尾号${phone.slice(-4)}`
|
||||
}
|
||||
|
||||
return '学员'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
} from '@nestjs/common'
|
||||
import type { Request, Response } from 'express'
|
||||
import type { ApiResponse } from '@mp-pilates/shared'
|
||||
import { formatRequestExtras } from '../utils/request-log'
|
||||
|
||||
@Catch()
|
||||
export class ApiExceptionFilter implements ExceptionFilter {
|
||||
@@ -28,15 +29,16 @@ export class ApiExceptionFilter implements ExceptionFilter {
|
||||
? this.extractMessage(exception)
|
||||
: '服务器内部错误'
|
||||
|
||||
// Log all server errors (5xx) with full stack; log 4xx at warn level
|
||||
const extras = formatRequestExtras(request)
|
||||
|
||||
if (status >= 500) {
|
||||
this.logger.error(
|
||||
`${request.method} ${request.originalUrl} → ${String(status)} ${message}`,
|
||||
`${request.method} ${request.originalUrl} → ${String(status)} ${message}${extras}`,
|
||||
exception instanceof Error ? exception.stack : undefined,
|
||||
)
|
||||
} else if (status >= 400) {
|
||||
this.logger.warn(
|
||||
`${request.method} ${request.originalUrl} → ${String(status)} ${message}`,
|
||||
`${request.method} ${request.originalUrl} → ${String(status)} ${message}${extras}`,
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -7,28 +7,7 @@ import {
|
||||
} from '@nestjs/common'
|
||||
import { Observable, tap } from 'rxjs'
|
||||
import type { Request, Response } from 'express'
|
||||
|
||||
/** Fields stripped from logged request bodies to avoid leaking secrets. */
|
||||
const SENSITIVE_FIELDS: ReadonlySet<string> = new Set([
|
||||
'password',
|
||||
'token',
|
||||
'secret',
|
||||
'code',
|
||||
'sessionKey',
|
||||
'encryptedData',
|
||||
'iv',
|
||||
])
|
||||
|
||||
function sanitizeBody(
|
||||
body: Record<string, unknown> | undefined,
|
||||
): Record<string, unknown> | undefined {
|
||||
if (!body || typeof body !== 'object') return undefined
|
||||
return Object.fromEntries(
|
||||
Object.entries(body).map(([key, value]) =>
|
||||
SENSITIVE_FIELDS.has(key) ? [key, '***'] : [key, value],
|
||||
),
|
||||
)
|
||||
}
|
||||
import { formatRequestExtras } from '../utils/request-log'
|
||||
|
||||
@Injectable()
|
||||
export class LoggingInterceptor implements NestInterceptor {
|
||||
@@ -44,9 +23,9 @@ export class LoggingInterceptor implements NestInterceptor {
|
||||
next: () => {
|
||||
const res = context.switchToHttp().getResponse<Response>()
|
||||
const duration = Date.now() - start
|
||||
const bodyLog = this.formatBody(method, req.body as Record<string, unknown>)
|
||||
const extras = formatRequestExtras(req)
|
||||
this.logger.log(
|
||||
`${method} ${originalUrl} → ${String(res.statusCode)} (${String(duration)}ms)${bodyLog}`,
|
||||
`${method} ${originalUrl} → ${String(res.statusCode)} (${String(duration)}ms)${extras}`,
|
||||
)
|
||||
},
|
||||
error: (err: unknown) => {
|
||||
@@ -55,22 +34,12 @@ export class LoggingInterceptor implements NestInterceptor {
|
||||
err instanceof Object && 'getStatus' in err
|
||||
? String((err as { getStatus: () => number }).getStatus())
|
||||
: '500'
|
||||
const bodyLog = this.formatBody(method, req.body as Record<string, unknown>)
|
||||
const extras = formatRequestExtras(req)
|
||||
this.logger.error(
|
||||
`${method} ${originalUrl} → ${status} (${String(duration)}ms)${bodyLog}`,
|
||||
`${method} ${originalUrl} → ${status} (${String(duration)}ms)${extras}`,
|
||||
)
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
private formatBody(
|
||||
method: string,
|
||||
body: Record<string, unknown> | undefined,
|
||||
): string {
|
||||
if (!['POST', 'PUT', 'PATCH'].includes(method)) return ''
|
||||
const sanitized = sanitizeBody(body)
|
||||
if (!sanitized || Object.keys(sanitized).length === 0) return ''
|
||||
return ` body=${JSON.stringify(sanitized)}`
|
||||
}
|
||||
}
|
||||
|
||||
60
packages/server/src/common/utils/request-log.ts
Normal file
60
packages/server/src/common/utils/request-log.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import type { Request } from 'express'
|
||||
|
||||
/** Fields stripped from logged request bodies to avoid leaking secrets. */
|
||||
const SENSITIVE_FIELDS: ReadonlySet<string> = new Set([
|
||||
'password',
|
||||
'token',
|
||||
'secret',
|
||||
'code',
|
||||
'sessionKey',
|
||||
'encryptedData',
|
||||
'iv',
|
||||
])
|
||||
|
||||
const BODY_METHODS: ReadonlySet<string> = new Set(['POST', 'PUT', 'PATCH'])
|
||||
|
||||
/** Max characters of JSON-serialised body/query included in a log line. */
|
||||
const MAX_LOG_PAYLOAD = 2048
|
||||
|
||||
function truncate(value: string): string {
|
||||
return value.length > MAX_LOG_PAYLOAD
|
||||
? `${value.slice(0, MAX_LOG_PAYLOAD)}…(truncated)`
|
||||
: value
|
||||
}
|
||||
|
||||
export function sanitizeBody(
|
||||
body: Record<string, unknown> | undefined,
|
||||
): Record<string, unknown> | undefined {
|
||||
if (!body || typeof body !== 'object') return undefined
|
||||
const keys = Object.keys(body)
|
||||
if (keys.length === 0) return undefined
|
||||
|
||||
const result: Record<string, unknown> = {}
|
||||
for (const key of keys) {
|
||||
result[key] = SENSITIVE_FIELDS.has(key) ? '***' : body[key]
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a human-readable suffix for a log line:
|
||||
* ` | query={…} body={…}`
|
||||
* Returns an empty string when there is nothing to append.
|
||||
*/
|
||||
export function formatRequestExtras(request: Request): string {
|
||||
const parts: string[] = []
|
||||
|
||||
const query = request.query
|
||||
if (query && Object.keys(query).length > 0) {
|
||||
parts.push(`query=${truncate(JSON.stringify(query))}`)
|
||||
}
|
||||
|
||||
if (BODY_METHODS.has(request.method)) {
|
||||
const sanitized = sanitizeBody(request.body as Record<string, unknown>)
|
||||
if (sanitized) {
|
||||
parts.push(`body=${truncate(JSON.stringify(sanitized))}`)
|
||||
}
|
||||
}
|
||||
|
||||
return parts.length > 0 ? ` | ${parts.join(' ')}` : ''
|
||||
}
|
||||
35
packages/server/src/flash-sale/dto/create-flash-sale.dto.ts
Normal file
35
packages/server/src/flash-sale/dto/create-flash-sale.dto.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { IsUUID, IsString, IsInt, IsDateString, IsOptional, Min, IsNumber } from 'class-validator'
|
||||
|
||||
export class CreateFlashSaleDto {
|
||||
@IsUUID()
|
||||
cardTypeId!: string
|
||||
|
||||
@IsString()
|
||||
title!: string
|
||||
|
||||
@IsNumber()
|
||||
@Min(1)
|
||||
originalPrice!: number
|
||||
|
||||
@IsNumber()
|
||||
@Min(1)
|
||||
flashPrice!: number
|
||||
|
||||
@IsInt()
|
||||
@Min(1)
|
||||
totalStock!: number
|
||||
|
||||
@IsDateString()
|
||||
startTime!: string
|
||||
|
||||
@IsDateString()
|
||||
endTime!: string
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
description?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
sortOrder?: number
|
||||
}
|
||||
43
packages/server/src/flash-sale/dto/update-flash-sale.dto.ts
Normal file
43
packages/server/src/flash-sale/dto/update-flash-sale.dto.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { IsString, IsInt, IsDateString, IsOptional, Min, IsNumber, IsEnum } from 'class-validator'
|
||||
import { FlashSaleStatus } from '@mp-pilates/shared'
|
||||
|
||||
export class UpdateFlashSaleDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
title?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsNumber()
|
||||
@Min(1)
|
||||
originalPrice?: number
|
||||
|
||||
@IsOptional()
|
||||
@IsNumber()
|
||||
@Min(1)
|
||||
flashPrice?: number
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
@Min(1)
|
||||
totalStock?: number
|
||||
|
||||
@IsOptional()
|
||||
@IsDateString()
|
||||
startTime?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsDateString()
|
||||
endTime?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
description?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsEnum(FlashSaleStatus)
|
||||
status?: FlashSaleStatus
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
sortOrder?: number
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import {
|
||||
Body,
|
||||
Controller,
|
||||
Delete,
|
||||
Get,
|
||||
Param,
|
||||
Post,
|
||||
Put,
|
||||
Query,
|
||||
UseGuards,
|
||||
ValidationPipe,
|
||||
} from '@nestjs/common'
|
||||
import { UserRole } from '@mp-pilates/shared'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { RolesGuard } from '../auth/roles.guard'
|
||||
import { Roles } from '../auth/roles.decorator'
|
||||
import { FlashSaleService } from './flash-sale.service'
|
||||
import { CreateFlashSaleDto } from './dto/create-flash-sale.dto'
|
||||
import { UpdateFlashSaleDto } from './dto/update-flash-sale.dto'
|
||||
|
||||
@Controller('admin/flash-sales')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
export class FlashSaleAdminController {
|
||||
constructor(private readonly flashSaleService: FlashSaleService) {}
|
||||
|
||||
/** POST /admin/flash-sales — create */
|
||||
@Post()
|
||||
create(
|
||||
@Body(new ValidationPipe({ whitelist: true })) dto: CreateFlashSaleDto,
|
||||
) {
|
||||
return this.flashSaleService.createFlashSale(dto)
|
||||
}
|
||||
|
||||
/** GET /admin/flash-sales — list (paginated) */
|
||||
@Get()
|
||||
list(
|
||||
@Query('page') page?: string,
|
||||
@Query('limit') limit?: string,
|
||||
) {
|
||||
return this.flashSaleService.getAdminFlashSales(
|
||||
page ? parseInt(page, 10) : 1,
|
||||
limit ? parseInt(limit, 10) : 20,
|
||||
)
|
||||
}
|
||||
|
||||
/** GET /admin/flash-sales/:id — detail */
|
||||
@Get(':id')
|
||||
detail(@Param('id') id: string) {
|
||||
return this.flashSaleService.getFlashSaleDetail(id)
|
||||
}
|
||||
|
||||
/** PUT /admin/flash-sales/:id — update */
|
||||
@Put(':id')
|
||||
update(
|
||||
@Param('id') id: string,
|
||||
@Body(new ValidationPipe({ whitelist: true })) dto: UpdateFlashSaleDto,
|
||||
) {
|
||||
return this.flashSaleService.updateFlashSale(id, dto)
|
||||
}
|
||||
|
||||
/** DELETE /admin/flash-sales/:id — delete (DRAFT only) */
|
||||
@Delete(':id')
|
||||
remove(@Param('id') id: string) {
|
||||
return this.flashSaleService.deleteFlashSale(id)
|
||||
}
|
||||
}
|
||||
40
packages/server/src/flash-sale/flash-sale.controller.ts
Normal file
40
packages/server/src/flash-sale/flash-sale.controller.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import {
|
||||
Controller,
|
||||
Get,
|
||||
Param,
|
||||
Post,
|
||||
UseGuards,
|
||||
} from '@nestjs/common'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { CurrentUser } from '../common/decorators/current-user.decorator'
|
||||
import { FlashSaleService } from './flash-sale.service'
|
||||
|
||||
@Controller('flash-sales')
|
||||
export class FlashSaleController {
|
||||
constructor(private readonly flashSaleService: FlashSaleService) {}
|
||||
|
||||
/** GET /flash-sales — list active/upcoming (public) */
|
||||
@Get()
|
||||
getActiveFlashSales() {
|
||||
return this.flashSaleService.getActiveFlashSales()
|
||||
}
|
||||
|
||||
/** GET /flash-sales/:id — detail (optionally authenticated) */
|
||||
@Get(':id')
|
||||
getFlashSaleDetail(
|
||||
@Param('id') id: string,
|
||||
@CurrentUser('sub') userId?: string,
|
||||
) {
|
||||
return this.flashSaleService.getFlashSaleDetail(id, userId)
|
||||
}
|
||||
|
||||
/** POST /flash-sales/:id/purchase — requires auth */
|
||||
@Post(':id/purchase')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
purchase(
|
||||
@Param('id') flashSaleId: string,
|
||||
@CurrentUser('sub') userId: string,
|
||||
) {
|
||||
return this.flashSaleService.purchase(flashSaleId, userId)
|
||||
}
|
||||
}
|
||||
14
packages/server/src/flash-sale/flash-sale.module.ts
Normal file
14
packages/server/src/flash-sale/flash-sale.module.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { PrismaModule } from '../prisma/prisma.module'
|
||||
import { PaymentModule } from '../payment/payment.module'
|
||||
import { FlashSaleService } from './flash-sale.service'
|
||||
import { FlashSaleController } from './flash-sale.controller'
|
||||
import { FlashSaleAdminController } from './flash-sale-admin.controller'
|
||||
|
||||
@Module({
|
||||
imports: [PrismaModule, PaymentModule],
|
||||
controllers: [FlashSaleController, FlashSaleAdminController],
|
||||
providers: [FlashSaleService],
|
||||
exports: [FlashSaleService],
|
||||
})
|
||||
export class FlashSaleModule {}
|
||||
409
packages/server/src/flash-sale/flash-sale.service.ts
Normal file
409
packages/server/src/flash-sale/flash-sale.service.ts
Normal file
@@ -0,0 +1,409 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
ConflictException,
|
||||
Injectable,
|
||||
Logger,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import { Prisma } from '@prisma/client'
|
||||
import {
|
||||
FlashSaleStatus,
|
||||
FlashSaleOrderStatus,
|
||||
MembershipStatus,
|
||||
OrderStatus,
|
||||
} from '@mp-pilates/shared'
|
||||
import { FlashSalePhase } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { WechatPayService, WxPaymentParams } from '../payment/wechat-pay.service'
|
||||
import { CreateFlashSaleDto } from './dto/create-flash-sale.dto'
|
||||
import { UpdateFlashSaleDto } from './dto/update-flash-sale.dto'
|
||||
|
||||
// ── Helpers ─────────────────────────────────────────────────
|
||||
function computePhase(sale: {
|
||||
startTime: Date
|
||||
endTime: Date
|
||||
soldCount: number
|
||||
totalStock: number
|
||||
status: string
|
||||
}): FlashSalePhase {
|
||||
if (sale.status === FlashSaleStatus.ENDED) return FlashSalePhase.ENDED
|
||||
const now = new Date()
|
||||
if (now < sale.startTime) return FlashSalePhase.UPCOMING
|
||||
if (now > sale.endTime) return FlashSalePhase.ENDED
|
||||
if (sale.soldCount >= sale.totalStock) return FlashSalePhase.SOLD_OUT
|
||||
return FlashSalePhase.ONGOING
|
||||
}
|
||||
|
||||
function toNumber(val: Prisma.Decimal | number): number {
|
||||
return typeof val === 'number' ? val : Number(val)
|
||||
}
|
||||
|
||||
// ── Service ─────────────────────────────────────────────────
|
||||
|
||||
@Injectable()
|
||||
export class FlashSaleService {
|
||||
private readonly logger = new Logger(FlashSaleService.name)
|
||||
|
||||
constructor(
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly wechatPayService: WechatPayService,
|
||||
) {}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// USER: List active/upcoming flash sales
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async getActiveFlashSales() {
|
||||
const sales = await this.prisma.flashSale.findMany({
|
||||
where: {
|
||||
status: FlashSaleStatus.ACTIVE,
|
||||
endTime: { gt: new Date() },
|
||||
},
|
||||
include: {
|
||||
cardType: {
|
||||
select: { name: true, type: true, totalTimes: true, durationDays: true },
|
||||
},
|
||||
},
|
||||
orderBy: [{ sortOrder: 'asc' }, { startTime: 'asc' }],
|
||||
})
|
||||
|
||||
return sales.map((s) => ({
|
||||
...s,
|
||||
originalPrice: toNumber(s.originalPrice),
|
||||
flashPrice: toNumber(s.flashPrice),
|
||||
phase: computePhase(s),
|
||||
remainingStock: s.totalStock - s.soldCount,
|
||||
cardType: s.cardType,
|
||||
}))
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// USER: Get detail (with participation check)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async getFlashSaleDetail(id: string, userId?: string) {
|
||||
const sale = await this.prisma.flashSale.findUnique({
|
||||
where: { id },
|
||||
include: {
|
||||
cardType: {
|
||||
select: {
|
||||
name: true,
|
||||
type: true,
|
||||
totalTimes: true,
|
||||
durationDays: true,
|
||||
description: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
if (!sale) throw new NotFoundException('秒杀活动不存在')
|
||||
|
||||
let hasParticipated = false
|
||||
let userOrderStatus: FlashSaleOrderStatus | null = null
|
||||
|
||||
if (userId) {
|
||||
const existing = await this.prisma.flashSaleOrder.findUnique({
|
||||
where: { flashSaleId_userId: { flashSaleId: id, userId } },
|
||||
})
|
||||
if (existing && existing.status !== FlashSaleOrderStatus.EXPIRED) {
|
||||
hasParticipated = true
|
||||
userOrderStatus = existing.status as FlashSaleOrderStatus
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...sale,
|
||||
originalPrice: toNumber(sale.originalPrice),
|
||||
flashPrice: toNumber(sale.flashPrice),
|
||||
phase: computePhase(sale),
|
||||
remainingStock: sale.totalStock - sale.soldCount,
|
||||
cardType: { ...sale.cardType },
|
||||
hasParticipated,
|
||||
userOrderStatus,
|
||||
serverTime: new Date().toISOString(),
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// PURCHASE — Atomic stock deduction
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async purchase(flashSaleId: string, userId: string) {
|
||||
// ① Pre-validate (fast-fail before transaction)
|
||||
const user = await this.prisma.user.findUnique({ where: { id: userId } })
|
||||
if (!user) throw new NotFoundException('用户不存在')
|
||||
if (!user.phone) throw new BadRequestException('请先授权手机号后再参与秒杀')
|
||||
|
||||
const sale = await this.prisma.flashSale.findUnique({
|
||||
where: { id: flashSaleId },
|
||||
include: { cardType: true },
|
||||
})
|
||||
if (!sale) throw new NotFoundException('秒杀活动不存在')
|
||||
if (sale.status !== FlashSaleStatus.ACTIVE) {
|
||||
throw new BadRequestException('秒杀活动未上线')
|
||||
}
|
||||
|
||||
const now = new Date()
|
||||
if (now < sale.startTime) throw new BadRequestException('秒杀尚未开始')
|
||||
if (now > sale.endTime) throw new BadRequestException('秒杀已结束')
|
||||
|
||||
// ② Atomic transaction: reserve stock + create FlashSaleOrder + create Order
|
||||
let result: { order: { id: string; orderNo: string; amount: Prisma.Decimal }; flashSaleOrderId: string }
|
||||
|
||||
try {
|
||||
result = await this.prisma.$transaction(async (tx) => {
|
||||
// ②-a: CAS optimistic lock stock deduction
|
||||
const updated = await tx.flashSale.updateMany({
|
||||
where: {
|
||||
id: flashSaleId,
|
||||
soldCount: { lt: sale.totalStock },
|
||||
},
|
||||
data: {
|
||||
soldCount: { increment: 1 },
|
||||
},
|
||||
})
|
||||
|
||||
if (updated.count === 0) {
|
||||
throw new BadRequestException('手慢了,已售罄')
|
||||
}
|
||||
|
||||
// ②-b: Create Order with flash sale price
|
||||
const orderNo = `FS${Date.now()}${Math.random().toString(36).substring(2, 8)}`
|
||||
|
||||
const order = await tx.order.create({
|
||||
data: {
|
||||
userId,
|
||||
cardTypeId: sale.cardTypeId,
|
||||
orderNo,
|
||||
amount: sale.flashPrice,
|
||||
status: OrderStatus.PENDING,
|
||||
flashSaleId,
|
||||
},
|
||||
})
|
||||
|
||||
// ②-c: Create FlashSaleOrder (unique constraint prevents duplicate)
|
||||
const flashSaleOrder = await tx.flashSaleOrder.create({
|
||||
data: {
|
||||
flashSaleId,
|
||||
userId,
|
||||
orderId: order.id,
|
||||
status: FlashSaleOrderStatus.RESERVED,
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
order: { id: order.id, orderNo: order.orderNo, amount: order.amount },
|
||||
flashSaleOrderId: flashSaleOrder.id,
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
// Handle unique constraint violation (user already participated)
|
||||
if (err instanceof Prisma.PrismaClientKnownRequestError && err.code === 'P2002') {
|
||||
throw new ConflictException('您已参与过此秒杀活动')
|
||||
}
|
||||
throw err
|
||||
}
|
||||
|
||||
// ③ Create WeChat unified order (outside transaction — network call)
|
||||
const paymentParams = await this.wechatPayService.createUnifiedOrder({
|
||||
orderNo: result.order.orderNo,
|
||||
amount: toNumber(result.order.amount),
|
||||
openid: user.openid,
|
||||
description: `秒杀-${sale.title}`,
|
||||
})
|
||||
|
||||
return {
|
||||
flashSaleOrderId: result.flashSaleOrderId,
|
||||
order: {
|
||||
id: result.order.id,
|
||||
orderNo: result.order.orderNo,
|
||||
amount: toNumber(result.order.amount),
|
||||
},
|
||||
paymentParams,
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ADMIN: Create flash sale
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async createFlashSale(dto: CreateFlashSaleDto) {
|
||||
const cardType = await this.prisma.cardType.findUnique({
|
||||
where: { id: dto.cardTypeId },
|
||||
})
|
||||
if (!cardType) throw new NotFoundException('卡种不存在')
|
||||
|
||||
const startTime = new Date(dto.startTime)
|
||||
const endTime = new Date(dto.endTime)
|
||||
if (endTime <= startTime) {
|
||||
throw new BadRequestException('结束时间必须晚于开始时间')
|
||||
}
|
||||
|
||||
const sale = await this.prisma.flashSale.create({
|
||||
data: {
|
||||
cardTypeId: dto.cardTypeId,
|
||||
title: dto.title,
|
||||
originalPrice: dto.originalPrice,
|
||||
flashPrice: dto.flashPrice,
|
||||
totalStock: dto.totalStock,
|
||||
startTime,
|
||||
endTime,
|
||||
description: dto.description ?? null,
|
||||
sortOrder: dto.sortOrder ?? 0,
|
||||
status: FlashSaleStatus.DRAFT,
|
||||
},
|
||||
include: {
|
||||
cardType: { select: { name: true, type: true } },
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
...sale,
|
||||
originalPrice: toNumber(sale.originalPrice),
|
||||
flashPrice: toNumber(sale.flashPrice),
|
||||
phase: computePhase(sale),
|
||||
cardType: { ...sale.cardType },
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ADMIN: Update flash sale
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async updateFlashSale(id: string, dto: UpdateFlashSaleDto) {
|
||||
const existing = await this.prisma.flashSale.findUnique({ where: { id } })
|
||||
if (!existing) throw new NotFoundException('秒杀活动不存在')
|
||||
|
||||
const data: Record<string, unknown> = {}
|
||||
if (dto.title !== undefined) data.title = dto.title
|
||||
if (dto.originalPrice !== undefined) data.originalPrice = dto.originalPrice
|
||||
if (dto.flashPrice !== undefined) data.flashPrice = dto.flashPrice
|
||||
if (dto.totalStock !== undefined) {
|
||||
if (dto.totalStock < existing.soldCount) {
|
||||
throw new BadRequestException('库存不能小于已售数量')
|
||||
}
|
||||
data.totalStock = dto.totalStock
|
||||
}
|
||||
if (dto.startTime !== undefined) data.startTime = new Date(dto.startTime)
|
||||
if (dto.endTime !== undefined) data.endTime = new Date(dto.endTime)
|
||||
if (dto.description !== undefined) data.description = dto.description
|
||||
if (dto.status !== undefined) data.status = dto.status
|
||||
if (dto.sortOrder !== undefined) data.sortOrder = dto.sortOrder
|
||||
|
||||
const sale = await this.prisma.flashSale.update({
|
||||
where: { id },
|
||||
data,
|
||||
include: {
|
||||
cardType: { select: { name: true, type: true } },
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
...sale,
|
||||
originalPrice: toNumber(sale.originalPrice),
|
||||
flashPrice: toNumber(sale.flashPrice),
|
||||
phase: computePhase(sale),
|
||||
cardType: { ...sale.cardType },
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ADMIN: Delete flash sale (only DRAFT)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async deleteFlashSale(id: string) {
|
||||
const existing = await this.prisma.flashSale.findUnique({ where: { id } })
|
||||
if (!existing) throw new NotFoundException('秒杀活动不存在')
|
||||
|
||||
if (existing.soldCount > 0) {
|
||||
throw new BadRequestException('已有用户参与,无法删除,请结束活动')
|
||||
}
|
||||
|
||||
await this.prisma.flashSale.delete({ where: { id } })
|
||||
return { deleted: true }
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// ADMIN: List all flash sales (paginated)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async getAdminFlashSales(page = 1, limit = 20) {
|
||||
const skip = (page - 1) * limit
|
||||
|
||||
const [data, total] = await Promise.all([
|
||||
this.prisma.flashSale.findMany({
|
||||
include: {
|
||||
cardType: { select: { name: true, type: true } },
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
skip,
|
||||
take: limit,
|
||||
}),
|
||||
this.prisma.flashSale.count(),
|
||||
])
|
||||
|
||||
return {
|
||||
data: data.map((s) => ({
|
||||
...s,
|
||||
originalPrice: toNumber(s.originalPrice),
|
||||
flashPrice: toNumber(s.flashPrice),
|
||||
phase: computePhase(s),
|
||||
cardType: s.cardType,
|
||||
})),
|
||||
total,
|
||||
page,
|
||||
limit,
|
||||
}
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
// SCHEDULER: Expire unpaid reservations (release stock)
|
||||
// ═══════════════════════════════════════════════════════════
|
||||
async expireUnpaidReservations(expireMinutes = 15): Promise<number> {
|
||||
const cutoff = new Date(Date.now() - expireMinutes * 60_000)
|
||||
|
||||
const expiredOrders = await this.prisma.flashSaleOrder.findMany({
|
||||
where: {
|
||||
status: FlashSaleOrderStatus.RESERVED,
|
||||
reservedAt: { lt: cutoff },
|
||||
},
|
||||
})
|
||||
|
||||
if (expiredOrders.length === 0) return 0
|
||||
|
||||
// Group by flashSaleId to batch stock release
|
||||
const stockDecrements = new Map<string, number>()
|
||||
const orderIds: string[] = []
|
||||
const flashSaleOrderIds: string[] = []
|
||||
|
||||
for (const fo of expiredOrders) {
|
||||
flashSaleOrderIds.push(fo.id)
|
||||
stockDecrements.set(fo.flashSaleId, (stockDecrements.get(fo.flashSaleId) ?? 0) + 1)
|
||||
if (fo.orderId) orderIds.push(fo.orderId)
|
||||
}
|
||||
|
||||
try {
|
||||
await this.prisma.$transaction([
|
||||
// Batch mark all as expired
|
||||
this.prisma.flashSaleOrder.updateMany({
|
||||
where: { id: { in: flashSaleOrderIds } },
|
||||
data: { status: FlashSaleOrderStatus.EXPIRED, expiredAt: new Date() },
|
||||
}),
|
||||
// Release stock per flash sale
|
||||
...Array.from(stockDecrements.entries()).map(([flashSaleId, count]) =>
|
||||
this.prisma.flashSale.update({
|
||||
where: { id: flashSaleId },
|
||||
data: { soldCount: { decrement: count } },
|
||||
}),
|
||||
),
|
||||
// Cancel associated payment orders
|
||||
...(orderIds.length > 0
|
||||
? [
|
||||
this.prisma.order.updateMany({
|
||||
where: { id: { in: orderIds } },
|
||||
data: { status: OrderStatus.REFUNDED },
|
||||
}),
|
||||
]
|
||||
: []),
|
||||
])
|
||||
} catch (err) {
|
||||
this.logger.error('Failed to batch-expire flash sale orders', err)
|
||||
return 0
|
||||
}
|
||||
|
||||
return expiredOrders.length
|
||||
}
|
||||
}
|
||||
3
packages/server/src/invite/invite.constants.ts
Normal file
3
packages/server/src/invite/invite.constants.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export const INVITE_REWARD_REQUIRED_COUNT = 3
|
||||
export const INVITE_REWARD_TIMES = 1
|
||||
|
||||
16
packages/server/src/invite/invite.controller.ts
Normal file
16
packages/server/src/invite/invite.controller.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Controller, Get, UseGuards } from '@nestjs/common'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { CurrentUser } from '../common/decorators/current-user.decorator'
|
||||
import { InviteService } from './invite.service'
|
||||
|
||||
@Controller('invite')
|
||||
@UseGuards(JwtAuthGuard)
|
||||
export class InviteController {
|
||||
constructor(private readonly inviteService: InviteService) {}
|
||||
|
||||
@Get('activity')
|
||||
getActivity(@CurrentUser('sub') userId: string) {
|
||||
return this.inviteService.getInviteActivitySummary(userId)
|
||||
}
|
||||
}
|
||||
|
||||
11
packages/server/src/invite/invite.module.ts
Normal file
11
packages/server/src/invite/invite.module.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { InviteController } from './invite.controller'
|
||||
import { InviteService } from './invite.service'
|
||||
|
||||
@Module({
|
||||
controllers: [InviteController],
|
||||
providers: [InviteService],
|
||||
exports: [InviteService],
|
||||
})
|
||||
export class InviteModule {}
|
||||
|
||||
253
packages/server/src/invite/invite.service.ts
Normal file
253
packages/server/src/invite/invite.service.ts
Normal file
@@ -0,0 +1,253 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import type { InviteReferral, InviteRewardGrant, Membership } from '@prisma/client'
|
||||
import { InviteReferralStatus, MembershipStatus, OrderStatus } from '@mp-pilates/shared'
|
||||
import type { InviteActivitySummary } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import {
|
||||
INVITE_REWARD_REQUIRED_COUNT,
|
||||
INVITE_REWARD_TIMES,
|
||||
} from './invite.constants'
|
||||
|
||||
@Injectable()
|
||||
export class InviteService {
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
private isTrialCardType(type: string): boolean {
|
||||
return type === 'TRIAL'
|
||||
}
|
||||
|
||||
async bindInviterToUser(inviteeId: string, inviterId?: string | null): Promise<void> {
|
||||
if (!inviterId || inviterId === inviteeId) {
|
||||
return
|
||||
}
|
||||
|
||||
const [inviter, inviteeMembershipCount, existingReferral] = await Promise.all([
|
||||
this.prisma.user.findUnique({ where: { id: inviterId }, select: { id: true } }),
|
||||
this.prisma.membership.count({ where: { userId: inviteeId } }),
|
||||
this.prisma.inviteReferral.findUnique({ where: { inviteeId } }),
|
||||
])
|
||||
|
||||
if (!inviter || inviteeMembershipCount > 0 || existingReferral) {
|
||||
return
|
||||
}
|
||||
|
||||
await this.prisma.inviteReferral.create({
|
||||
data: {
|
||||
inviterId,
|
||||
inviteeId,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async recordTrialOrderPaid(orderId: string): Promise<void> {
|
||||
const order = await this.prisma.order.findUnique({
|
||||
where: { id: orderId },
|
||||
include: {
|
||||
cardType: true,
|
||||
user: { select: { id: true } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!order || order.status !== OrderStatus.PAID || !this.isTrialCardType(order.cardType.type)) {
|
||||
return
|
||||
}
|
||||
|
||||
await this.prisma.inviteReferral.updateMany({
|
||||
where: {
|
||||
inviteeId: order.user.id,
|
||||
status: InviteReferralStatus.REGISTERED,
|
||||
trialOrderId: null,
|
||||
},
|
||||
data: {
|
||||
status: InviteReferralStatus.TRIAL_PURCHASED,
|
||||
trialOrderId: order.id,
|
||||
trialPurchasedAt: order.paidAt ?? new Date(),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async recordQualifiedTrialBooking(bookingId: string): Promise<void> {
|
||||
const booking = await this.prisma.booking.findUnique({
|
||||
where: { id: bookingId },
|
||||
include: {
|
||||
membership: { include: { cardType: true } },
|
||||
},
|
||||
})
|
||||
|
||||
if (!booking || booking.status !== 'COMPLETED' || !this.isTrialCardType(booking.membership.cardType.type)) {
|
||||
return
|
||||
}
|
||||
|
||||
const referral = await this.prisma.inviteReferral.findFirst({
|
||||
where: {
|
||||
inviteeId: booking.userId,
|
||||
status: {
|
||||
in: [InviteReferralStatus.REGISTERED, InviteReferralStatus.TRIAL_PURCHASED],
|
||||
},
|
||||
qualifiedBookingId: null,
|
||||
},
|
||||
orderBy: { createdAt: 'asc' },
|
||||
})
|
||||
|
||||
if (!referral) {
|
||||
return
|
||||
}
|
||||
|
||||
await this.prisma.inviteReferral.update({
|
||||
where: { id: referral.id },
|
||||
data: {
|
||||
status: InviteReferralStatus.QUALIFIED,
|
||||
qualifiedBookingId: booking.id,
|
||||
qualifiedAt: booking.completedAt ?? new Date(),
|
||||
},
|
||||
})
|
||||
|
||||
await this.grantRewardsIfEligible(referral.inviterId)
|
||||
}
|
||||
|
||||
async getInviteActivitySummary(userId: string): Promise<InviteActivitySummary> {
|
||||
const memberships = await this.prisma.membership.findMany({
|
||||
where: { userId },
|
||||
orderBy: [{ status: 'asc' }, { expireDate: 'desc' }],
|
||||
})
|
||||
const referrals = await this.prisma.inviteReferral.findMany({
|
||||
where: { inviterId: userId },
|
||||
include: {
|
||||
invitee: {
|
||||
select: {
|
||||
id: true,
|
||||
nickname: true,
|
||||
avatarUrl: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: { createdAt: 'desc' },
|
||||
})
|
||||
const rewardGrants = await this.prisma.inviteRewardGrant.findMany({
|
||||
where: { inviterId: userId },
|
||||
orderBy: { grantedAt: 'desc' },
|
||||
})
|
||||
|
||||
const canInvite = memberships.some((membership: Membership) => membership.status === MembershipStatus.ACTIVE)
|
||||
const qualifiedInviteCount = referrals.filter((item: InviteReferral) => item.status === InviteReferralStatus.QUALIFIED).length
|
||||
const rewardedTimes = rewardGrants.reduce((sum: number, item: InviteRewardGrant) => sum + item.rewardTimes, 0)
|
||||
const pendingRewardGrantCount = Math.max(
|
||||
0,
|
||||
qualifiedInviteCount - rewardGrants.length * INVITE_REWARD_REQUIRED_COUNT,
|
||||
)
|
||||
const currentCycleQualifiedCount = qualifiedInviteCount % INVITE_REWARD_REQUIRED_COUNT
|
||||
|
||||
return {
|
||||
inviterId: userId,
|
||||
canInvite,
|
||||
sharePath: `/pages/profile/invite?inviterId=${userId}`,
|
||||
rewardRuleInvitesRequired: INVITE_REWARD_REQUIRED_COUNT,
|
||||
rewardRuleTimes: INVITE_REWARD_TIMES,
|
||||
qualifiedInviteCount,
|
||||
rewardedTimes,
|
||||
pendingRewardGrantCount,
|
||||
pendingInviteCount: referrals.filter((item: InviteReferral) => item.status !== InviteReferralStatus.QUALIFIED).length,
|
||||
currentCycleQualifiedCount,
|
||||
nextRewardRemainingCount: currentCycleQualifiedCount === 0
|
||||
? INVITE_REWARD_REQUIRED_COUNT
|
||||
: INVITE_REWARD_REQUIRED_COUNT - currentCycleQualifiedCount,
|
||||
referrals: referrals.map((item: InviteReferral & { invitee: { nickname: string; avatarUrl: string | null } }) => ({
|
||||
id: item.id,
|
||||
inviteeId: item.inviteeId,
|
||||
inviteeNickname: item.invitee.nickname,
|
||||
inviteeAvatarUrl: item.invitee.avatarUrl,
|
||||
status: item.status as InviteReferralStatus,
|
||||
invitedAt: item.invitedAt.toISOString(),
|
||||
trialPurchasedAt: item.trialPurchasedAt?.toISOString() ?? null,
|
||||
qualifiedAt: item.qualifiedAt?.toISOString() ?? null,
|
||||
})),
|
||||
rewardGrants: rewardGrants.map((item: InviteRewardGrant) => ({
|
||||
id: item.id,
|
||||
membershipId: item.membershipId,
|
||||
qualifiedReferralCount: item.qualifiedReferralCount,
|
||||
rewardTimes: item.rewardTimes,
|
||||
grantedAt: item.grantedAt.toISOString(),
|
||||
})),
|
||||
}
|
||||
}
|
||||
|
||||
async validateInviterForTrialOrder(userId: string, inviterId?: string): Promise<void> {
|
||||
if (!inviterId) {
|
||||
return
|
||||
}
|
||||
|
||||
if (inviterId === userId) {
|
||||
throw new BadRequestException('不能邀请自己购买体验课')
|
||||
}
|
||||
|
||||
const referral = await this.prisma.inviteReferral.findFirst({
|
||||
where: {
|
||||
inviterId,
|
||||
inviteeId: userId,
|
||||
},
|
||||
})
|
||||
|
||||
if (!referral) {
|
||||
throw new NotFoundException('邀请关系不存在或已失效')
|
||||
}
|
||||
}
|
||||
|
||||
private async grantRewardsIfEligible(inviterId: string): Promise<void> {
|
||||
const [qualifiedCount, rewardGrantCount] = await Promise.all([
|
||||
this.prisma.inviteReferral.count({
|
||||
where: {
|
||||
inviterId,
|
||||
status: InviteReferralStatus.QUALIFIED,
|
||||
},
|
||||
}),
|
||||
this.prisma.inviteRewardGrant.count({ where: { inviterId } }),
|
||||
])
|
||||
|
||||
const shouldGrantCount = Math.floor(qualifiedCount / INVITE_REWARD_REQUIRED_COUNT)
|
||||
const missingGrantCount = shouldGrantCount - rewardGrantCount
|
||||
|
||||
if (missingGrantCount <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
for (let index = 0; index < missingGrantCount; index += 1) {
|
||||
const targetQualifiedCount = (rewardGrantCount + index + 1) * INVITE_REWARD_REQUIRED_COUNT
|
||||
await this.prisma.$transaction(async (tx) => {
|
||||
const membership = await tx.membership.findFirst({
|
||||
where: {
|
||||
userId: inviterId,
|
||||
status: MembershipStatus.ACTIVE,
|
||||
},
|
||||
orderBy: [{ expireDate: 'desc' }, { createdAt: 'desc' }],
|
||||
})
|
||||
|
||||
if (!membership) {
|
||||
throw new BadRequestException('邀请人当前没有有效会员卡,无法发放奖励')
|
||||
}
|
||||
|
||||
await tx.membership.update({
|
||||
where: { id: membership.id },
|
||||
data: {
|
||||
remainingTimes: membership.remainingTimes === null
|
||||
? null
|
||||
: membership.remainingTimes + INVITE_REWARD_TIMES,
|
||||
status: MembershipStatus.ACTIVE,
|
||||
},
|
||||
})
|
||||
|
||||
await tx.inviteRewardGrant.create({
|
||||
data: {
|
||||
inviterId,
|
||||
membershipId: membership.id,
|
||||
qualifiedReferralCount: targetQualifiedCount,
|
||||
rewardTimes: INVITE_REWARD_TIMES,
|
||||
},
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -37,6 +37,10 @@ export class CreateCardTypeDto {
|
||||
@IsString()
|
||||
description?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
coverUrl?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsInt()
|
||||
@Min(0)
|
||||
|
||||
@@ -42,6 +42,10 @@ export class UpdateCardTypeDto {
|
||||
@IsString()
|
||||
description?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
coverUrl?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsBoolean()
|
||||
isActive?: boolean
|
||||
|
||||
@@ -5,6 +5,7 @@ import { MembershipStatus, OrderStatus } from '@mp-pilates/shared'
|
||||
import { PaymentService } from '../payment.service'
|
||||
import { WechatPayService } from '../wechat-pay.service'
|
||||
import { PrismaService } from '../../prisma/prisma.service'
|
||||
import { InviteService } from '../../invite/invite.service'
|
||||
|
||||
// ─── Fixtures ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -35,6 +36,11 @@ const mockUser = {
|
||||
updatedAt: new Date(),
|
||||
}
|
||||
|
||||
const mockInviteService = {
|
||||
validateInviterForTrialOrder: jest.fn(),
|
||||
recordTrialOrderPaid: jest.fn(),
|
||||
}
|
||||
|
||||
const buildMockOrder = (overrides: Partial<Record<string, unknown>> = {}) => ({
|
||||
id: 'order-uuid-1',
|
||||
userId: mockUser.id,
|
||||
@@ -105,6 +111,7 @@ describe('PaymentService', () => {
|
||||
PaymentService,
|
||||
{ provide: PrismaService, useValue: prisma },
|
||||
{ provide: WechatPayService, useValue: wechat },
|
||||
{ provide: InviteService, useValue: mockInviteService },
|
||||
],
|
||||
}).compile()
|
||||
|
||||
@@ -161,6 +168,16 @@ describe('PaymentService', () => {
|
||||
)
|
||||
})
|
||||
|
||||
it('validates inviter relationship for trial card orders', async () => {
|
||||
prisma.cardType.findUnique.mockResolvedValue({ ...mockCardType, type: 'TRIAL' })
|
||||
prisma.user.findUnique.mockResolvedValue(mockUser)
|
||||
prisma.order.create.mockResolvedValue(buildMockOrder())
|
||||
|
||||
await service.createOrder(mockUser.id, mockCardType.id, 'inviter-001')
|
||||
|
||||
expect(mockInviteService.validateInviterForTrialOrder).toHaveBeenCalledWith(mockUser.id, 'inviter-001')
|
||||
})
|
||||
|
||||
it('throws NotFoundException when cardType does not exist', async () => {
|
||||
prisma.cardType.findUnique.mockResolvedValue(null)
|
||||
|
||||
@@ -232,6 +249,7 @@ describe('PaymentService', () => {
|
||||
|
||||
// membership.create was called
|
||||
expect(prisma.membership.create).toHaveBeenCalledTimes(1)
|
||||
expect(mockInviteService.recordTrialOrderPaid).toHaveBeenCalledWith(pendingOrder.id)
|
||||
|
||||
expect(result).toContain('SUCCESS')
|
||||
})
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { IsUUID } from 'class-validator'
|
||||
import { IsOptional, IsUUID } from 'class-validator'
|
||||
|
||||
export class CreateOrderDto {
|
||||
@IsUUID()
|
||||
cardTypeId!: string
|
||||
|
||||
@IsUUID()
|
||||
@IsOptional()
|
||||
inviterId?: string
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ export class PaymentController {
|
||||
@CurrentUser('sub') userId: string,
|
||||
@Body(new ValidationPipe({ whitelist: true })) dto: CreateOrderDto,
|
||||
) {
|
||||
return this.paymentService.createOrder(userId, dto.cardTypeId)
|
||||
return this.paymentService.createOrder(userId, dto.cardTypeId, dto.inviterId)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -3,11 +3,12 @@ import { PrismaModule } from '../prisma/prisma.module'
|
||||
import { PaymentService } from './payment.service'
|
||||
import { PaymentController } from './payment.controller'
|
||||
import { WechatPayService } from './wechat-pay.service'
|
||||
import { InviteModule } from '../invite/invite.module'
|
||||
|
||||
@Module({
|
||||
imports: [PrismaModule],
|
||||
imports: [PrismaModule, InviteModule],
|
||||
controllers: [PaymentController],
|
||||
providers: [PaymentService, WechatPayService],
|
||||
exports: [PaymentService],
|
||||
exports: [PaymentService, WechatPayService],
|
||||
})
|
||||
export class PaymentModule {}
|
||||
|
||||
@@ -5,9 +5,10 @@ import {
|
||||
NotFoundException,
|
||||
} from '@nestjs/common'
|
||||
import { CardType, Order } from '@prisma/client'
|
||||
import { MembershipStatus, OrderStatus } from '@mp-pilates/shared'
|
||||
import { MembershipStatus, OrderStatus, FlashSaleOrderStatus } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { WechatPayService, WxPaymentParams } from './wechat-pay.service'
|
||||
import { InviteService } from '../invite/invite.service'
|
||||
|
||||
export interface CreateOrderResult {
|
||||
order: Order
|
||||
@@ -15,7 +16,7 @@ export interface CreateOrderResult {
|
||||
}
|
||||
|
||||
export interface PaginatedOrders<T> {
|
||||
data: T[]
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
limit: number
|
||||
@@ -28,11 +29,12 @@ export class PaymentService {
|
||||
constructor(
|
||||
private readonly prisma: PrismaService,
|
||||
private readonly wechatPayService: WechatPayService,
|
||||
private readonly inviteService: InviteService,
|
||||
) {}
|
||||
|
||||
// ─── User: create order ────────────────────────────────────────────────────
|
||||
|
||||
async createOrder(userId: string, cardTypeId: string): Promise<CreateOrderResult> {
|
||||
async createOrder(userId: string, cardTypeId: string, inviterId?: string): Promise<CreateOrderResult> {
|
||||
const cardType = await this.prisma.cardType.findUnique({ where: { id: cardTypeId } })
|
||||
|
||||
if (!cardType) {
|
||||
@@ -47,6 +49,10 @@ export class PaymentService {
|
||||
throw new NotFoundException(`User ${userId} not found`)
|
||||
}
|
||||
|
||||
if (cardType.type === 'TRIAL') {
|
||||
await this.inviteService.validateInviterForTrialOrder(userId, inviterId)
|
||||
}
|
||||
|
||||
const orderNo = `${Date.now()}${Math.random().toString(36).substring(2, 8)}`
|
||||
|
||||
const order = await this.prisma.order.create({
|
||||
@@ -135,7 +141,25 @@ export class PaymentService {
|
||||
}),
|
||||
])
|
||||
|
||||
await this.inviteService.recordTrialOrderPaid(existingOrder.id)
|
||||
|
||||
this.logger.log(`Order PAID and Membership created: orderNo=${notification.orderNo}`)
|
||||
|
||||
// ── Flash sale order: mark as PAID ──
|
||||
if (existingOrder.flashSaleId) {
|
||||
await this.prisma.flashSaleOrder.updateMany({
|
||||
where: {
|
||||
orderId: existingOrder.id,
|
||||
status: FlashSaleOrderStatus.RESERVED,
|
||||
},
|
||||
data: {
|
||||
status: FlashSaleOrderStatus.PAID,
|
||||
paidAt: now,
|
||||
},
|
||||
})
|
||||
this.logger.log(`Flash sale order marked PAID for orderNo=${notification.orderNo}`)
|
||||
}
|
||||
|
||||
return this.buildSuccessXml()
|
||||
}
|
||||
|
||||
@@ -160,7 +184,7 @@ export class PaymentService {
|
||||
])
|
||||
|
||||
return {
|
||||
data: data.map((o) => ({ ...o, cardType: { ...o.cardType } })),
|
||||
items: data.map((o) => ({ ...o, cardType: { ...o.cardType } })),
|
||||
total,
|
||||
page,
|
||||
limit,
|
||||
@@ -191,8 +215,9 @@ export class PaymentService {
|
||||
this.prisma.order.count({ where }),
|
||||
])
|
||||
|
||||
this.logger.log(`getAllOrders: page=${page}, limit=${limit}, status=${status}, count=${total}`)
|
||||
return {
|
||||
data: data.map((o) => ({
|
||||
items: data.map((o) => ({
|
||||
...o,
|
||||
cardType: { ...o.cardType },
|
||||
user: { ...o.user },
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { ScheduleModule } from '@nestjs/schedule'
|
||||
import { TimeSlotModule } from '../time-slot/time-slot.module'
|
||||
import { FlashSaleModule } from '../flash-sale/flash-sale.module'
|
||||
import { SchedulerService } from './scheduler.service'
|
||||
|
||||
@Module({
|
||||
imports: [
|
||||
ScheduleModule.forRoot(),
|
||||
TimeSlotModule,
|
||||
FlashSaleModule,
|
||||
],
|
||||
providers: [SchedulerService],
|
||||
})
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { Injectable, Logger } from '@nestjs/common'
|
||||
import { Cron } from '@nestjs/schedule'
|
||||
import { SlotGeneratorService } from '../time-slot/slot-generator.service'
|
||||
import { FlashSaleService } from '../flash-sale/flash-sale.service'
|
||||
|
||||
@Injectable()
|
||||
export class SchedulerService {
|
||||
private readonly logger = new Logger(SchedulerService.name)
|
||||
|
||||
constructor(private readonly slotGenerator: SlotGeneratorService) {}
|
||||
constructor(
|
||||
private readonly slotGenerator: SlotGeneratorService,
|
||||
private readonly flashSaleService: FlashSaleService,
|
||||
) {}
|
||||
|
||||
/** 02:00 daily — generate slots 14 days ahead from week templates */
|
||||
@Cron('0 2 * * *')
|
||||
@@ -51,4 +55,17 @@ export class SchedulerService {
|
||||
this.logger.error('[handleCompleteBookings] Failed to complete bookings', err)
|
||||
}
|
||||
}
|
||||
|
||||
/** Every 5 min — expire unpaid flash sale reservations older than 15min */
|
||||
@Cron('*/5 * * * *')
|
||||
async handleExpireFlashSaleReservations(): Promise<void> {
|
||||
try {
|
||||
const count = await this.flashSaleService.expireUnpaidReservations(15)
|
||||
if (count > 0) {
|
||||
this.logger.log(`[handleExpireFlashSaleReservations] Expired ${count} unpaid reservations`)
|
||||
}
|
||||
} catch (err) {
|
||||
this.logger.error('[handleExpireFlashSaleReservations] Failed', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { IsIn, IsOptional, IsString } from 'class-validator'
|
||||
import type { StudioAssetType } from '@mp-pilates/shared'
|
||||
|
||||
export class CreateStudioUploadCredentialDto {
|
||||
@IsString()
|
||||
fileName!: string
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
contentType?: string
|
||||
|
||||
@IsOptional()
|
||||
@IsIn(['gallery', 'logo', 'banner', 'card-cover'])
|
||||
assetType?: StudioAssetType
|
||||
}
|
||||
170
packages/server/src/studio/studio-upload.service.ts
Normal file
170
packages/server/src/studio/studio-upload.service.ts
Normal file
@@ -0,0 +1,170 @@
|
||||
import {
|
||||
BadRequestException,
|
||||
Injectable,
|
||||
InternalServerErrorException,
|
||||
} from '@nestjs/common'
|
||||
import { ConfigService } from '@nestjs/config'
|
||||
import type {
|
||||
StudioAssetType,
|
||||
StudioUploadCredential,
|
||||
} from '@mp-pilates/shared'
|
||||
import { createHash, createHmac, randomBytes } from 'crypto'
|
||||
import { CreateStudioUploadCredentialDto } from './dto/create-studio-upload-credential.dto'
|
||||
|
||||
const ALLOWED_IMAGE_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'webp', 'heic', 'heif'])
|
||||
const CONTENT_TYPE_BY_EXTENSION: Record<string, string> = {
|
||||
jpg: 'image/jpeg',
|
||||
jpeg: 'image/jpeg',
|
||||
png: 'image/png',
|
||||
webp: 'image/webp',
|
||||
heic: 'image/heic',
|
||||
heif: 'image/heif',
|
||||
}
|
||||
const EXTENSION_BY_CONTENT_TYPE = new Map(
|
||||
Object.entries(CONTENT_TYPE_BY_EXTENSION).map(([ext, type]) => [type, ext]),
|
||||
)
|
||||
|
||||
@Injectable()
|
||||
export class StudioUploadService {
|
||||
constructor(private readonly configService: ConfigService) {}
|
||||
|
||||
async createUploadCredential(
|
||||
dto: CreateStudioUploadCredentialDto,
|
||||
): Promise<StudioUploadCredential> {
|
||||
const bucket = this.getRequiredConfig('COS_BUCKET')
|
||||
const region = this.getRequiredConfig('COS_REGION')
|
||||
|
||||
const assetType = dto.assetType ?? 'gallery'
|
||||
const extension = this.resolveExtension(dto.fileName, dto.contentType)
|
||||
const key = this.buildObjectKey(assetType, extension)
|
||||
const uploadUrl = `https://${bucket}.cos.${region}.myqcloud.com`
|
||||
const fileUrl = this.buildFileUrl(key, uploadUrl)
|
||||
const expiresAt = Math.floor(Date.now() / 1000) + this.getDurationSeconds()
|
||||
const formData = this.buildPostPolicy({ bucket, key, expiresAt })
|
||||
|
||||
return {
|
||||
bucket,
|
||||
region,
|
||||
key,
|
||||
uploadUrl,
|
||||
fileUrl,
|
||||
assetType,
|
||||
expiresAt,
|
||||
formData,
|
||||
}
|
||||
}
|
||||
|
||||
private buildPostPolicy(params: {
|
||||
bucket: string
|
||||
key: string
|
||||
expiresAt: number
|
||||
}): Record<string, string> {
|
||||
const secretId = this.getRequiredConfig('COS_SECRET_ID')
|
||||
const secretKey = this.getRequiredConfig('COS_SECRET_KEY')
|
||||
const keyTime = this.buildKeyTime(params.expiresAt)
|
||||
const policy = {
|
||||
expiration: new Date(params.expiresAt * 1000).toISOString(),
|
||||
conditions: [
|
||||
{ bucket: params.bucket },
|
||||
['eq', '$key', params.key],
|
||||
{ success_action_status: '200' },
|
||||
{ 'q-sign-algorithm': 'sha1' },
|
||||
{ 'q-ak': secretId },
|
||||
{ 'q-key-time': keyTime },
|
||||
{ 'q-sign-time': keyTime },
|
||||
['content-length-range', 0, 10 * 1024 * 1024],
|
||||
],
|
||||
}
|
||||
const policyJson = JSON.stringify(policy)
|
||||
const policyBase64 = Buffer.from(policyJson).toString('base64')
|
||||
const signKey = createHmac('sha1', secretKey)
|
||||
.update(keyTime)
|
||||
.digest('hex')
|
||||
const stringToSign = createHash('sha1').update(policyJson).digest('hex')
|
||||
const signature = createHmac('sha1', signKey)
|
||||
.update(stringToSign)
|
||||
.digest('hex')
|
||||
|
||||
return {
|
||||
key: params.key,
|
||||
policy: policyBase64,
|
||||
success_action_status: '200',
|
||||
'q-sign-algorithm': 'sha1',
|
||||
'q-ak': secretId,
|
||||
'q-key-time': keyTime,
|
||||
'q-sign-time': keyTime,
|
||||
'q-signature': signature,
|
||||
}
|
||||
}
|
||||
|
||||
private buildObjectKey(assetType: StudioAssetType, extension: string): string {
|
||||
const prefix = this.getUploadPrefix()
|
||||
const now = new Date()
|
||||
const datePath = [
|
||||
now.getUTCFullYear(),
|
||||
String(now.getUTCMonth() + 1).padStart(2, '0'),
|
||||
String(now.getUTCDate()).padStart(2, '0'),
|
||||
].join('/')
|
||||
const randomSuffix = randomBytes(8).toString('hex')
|
||||
|
||||
return `${prefix}/${assetType}/${datePath}/${Date.now()}-${randomSuffix}.${extension}`
|
||||
}
|
||||
|
||||
private buildFileUrl(key: string, uploadUrl: string): string {
|
||||
const publicBaseUrl = this.configService.get<string>('COS_PUBLIC_BASE_URL')?.trim()
|
||||
const baseUrl = publicBaseUrl || uploadUrl
|
||||
return `${baseUrl.replace(/\/$/, '')}/${key}`
|
||||
}
|
||||
|
||||
private buildKeyTime(expiresAt: number): string {
|
||||
const startTime = Math.floor(Date.now() / 1000) - 5
|
||||
return `${startTime};${expiresAt}`
|
||||
}
|
||||
|
||||
private resolveExtension(fileName: string, contentType?: string): string {
|
||||
const cleanedName = fileName.trim().toLowerCase()
|
||||
const fileExtension = cleanedName.includes('.')
|
||||
? cleanedName.split('.').pop() ?? ''
|
||||
: ''
|
||||
|
||||
if (ALLOWED_IMAGE_EXTENSIONS.has(fileExtension)) {
|
||||
return fileExtension === 'jpeg' ? 'jpg' : fileExtension
|
||||
}
|
||||
|
||||
if (contentType) {
|
||||
const normalizedType = contentType.trim().toLowerCase()
|
||||
const matchedExtension = EXTENSION_BY_CONTENT_TYPE.get(normalizedType)
|
||||
|
||||
if (matchedExtension) {
|
||||
return matchedExtension
|
||||
}
|
||||
}
|
||||
|
||||
throw new BadRequestException('仅支持 jpg、png、webp、heic、heif 图片上传')
|
||||
}
|
||||
|
||||
private getDurationSeconds(): number {
|
||||
const configured = Number(this.configService.get<string>('COS_UPLOAD_DURATION_SECONDS') ?? 1800)
|
||||
|
||||
if (!Number.isFinite(configured) || configured < 300 || configured > 7200) {
|
||||
return 1800
|
||||
}
|
||||
|
||||
return Math.floor(configured)
|
||||
}
|
||||
|
||||
private getUploadPrefix(): string {
|
||||
return (this.configService.get<string>('COS_UPLOAD_PREFIX')?.trim() || 'mp/studio')
|
||||
.replace(/^\/+|\/+$/g, '')
|
||||
}
|
||||
|
||||
private getRequiredConfig(key: string): string {
|
||||
const value = this.configService.get<string>(key)?.trim()
|
||||
|
||||
if (!value) {
|
||||
throw new InternalServerErrorException(`${key} 未配置`)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
}
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
Body,
|
||||
Controller,
|
||||
Get,
|
||||
Post,
|
||||
Put,
|
||||
UseGuards,
|
||||
} from '@nestjs/common'
|
||||
@@ -9,12 +10,17 @@ import { UserRole } from '@mp-pilates/shared'
|
||||
import { JwtAuthGuard } from '../auth/jwt-auth.guard'
|
||||
import { Roles } from '../auth/roles.decorator'
|
||||
import { RolesGuard } from '../auth/roles.guard'
|
||||
import { CreateStudioUploadCredentialDto } from './dto/create-studio-upload-credential.dto'
|
||||
import { UpdateStudioDto } from './dto/update-studio.dto'
|
||||
import { StudioService } from './studio.service'
|
||||
import { StudioUploadService } from './studio-upload.service'
|
||||
|
||||
@Controller()
|
||||
export class StudioController {
|
||||
constructor(private readonly studioService: StudioService) {}
|
||||
constructor(
|
||||
private readonly studioService: StudioService,
|
||||
private readonly studioUploadService: StudioUploadService,
|
||||
) {}
|
||||
|
||||
@Get('studio/info')
|
||||
getInfo() {
|
||||
@@ -27,4 +33,11 @@ export class StudioController {
|
||||
updateInfo(@Body() dto: UpdateStudioDto) {
|
||||
return this.studioService.updateInfo(dto)
|
||||
}
|
||||
|
||||
@Post('admin/studio/upload-credentials')
|
||||
@UseGuards(JwtAuthGuard, RolesGuard)
|
||||
@Roles(UserRole.ADMIN)
|
||||
createUploadCredential(@Body() dto: CreateStudioUploadCredentialDto) {
|
||||
return this.studioUploadService.createUploadCredential(dto)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { Module } from '@nestjs/common'
|
||||
import { StudioController } from './studio.controller'
|
||||
import { StudioService } from './studio.service'
|
||||
import { StudioUploadService } from './studio-upload.service'
|
||||
|
||||
@Module({
|
||||
controllers: [StudioController],
|
||||
providers: [StudioService],
|
||||
providers: [StudioService, StudioUploadService],
|
||||
exports: [StudioService],
|
||||
})
|
||||
export class StudioModule {}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Injectable } from '@nestjs/common'
|
||||
import { StudioConfig } from '@prisma/client'
|
||||
import { StudioConfig as PrismaStudioConfig } from '@prisma/client'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import { UpdateStudioDto } from './dto/update-studio.dto'
|
||||
|
||||
@@ -7,28 +7,71 @@ import { UpdateStudioDto } from './dto/update-studio.dto'
|
||||
export class StudioService {
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
async getInfo(): Promise<StudioConfig> {
|
||||
async getInfo() {
|
||||
const existing = await this.prisma.studioConfig.findFirst()
|
||||
|
||||
if (existing) {
|
||||
return existing
|
||||
return this.normalizeStudioConfig(existing)
|
||||
}
|
||||
|
||||
return this.prisma.studioConfig.create({
|
||||
const created = await this.prisma.studioConfig.create({
|
||||
data: {
|
||||
name: '普拉提工作室',
|
||||
},
|
||||
})
|
||||
|
||||
return this.normalizeStudioConfig(created)
|
||||
}
|
||||
|
||||
async updateInfo(dto: UpdateStudioDto): Promise<StudioConfig> {
|
||||
const existing = await this.getInfo()
|
||||
|
||||
const updated = await this.prisma.studioConfig.update({
|
||||
where: { id: existing.id },
|
||||
data: { ...dto },
|
||||
async updateInfo(dto: UpdateStudioDto) {
|
||||
const existing = await this.prisma.studioConfig.findFirst({
|
||||
select: { id: true },
|
||||
})
|
||||
|
||||
return { ...updated }
|
||||
const data = {
|
||||
...dto,
|
||||
photos: dto.photos ? this.normalizePhotos(dto.photos) : undefined,
|
||||
}
|
||||
|
||||
const record = existing
|
||||
? await this.prisma.studioConfig.update({
|
||||
where: { id: existing.id },
|
||||
data,
|
||||
})
|
||||
: await this.prisma.studioConfig.create({
|
||||
data: { name: '普拉提工作室', ...data },
|
||||
})
|
||||
|
||||
return this.normalizeStudioConfig(record)
|
||||
}
|
||||
|
||||
private normalizeStudioConfig(config: PrismaStudioConfig) {
|
||||
return {
|
||||
...config,
|
||||
latitude: config.latitude == null ? null : Number(config.latitude),
|
||||
longitude: config.longitude == null ? null : Number(config.longitude),
|
||||
photos: this.normalizePhotos(config.photos),
|
||||
}
|
||||
}
|
||||
|
||||
private normalizePhotos(value: unknown): string[] {
|
||||
if (!Array.isArray(value)) {
|
||||
return []
|
||||
}
|
||||
|
||||
const deduped = new Set<string>()
|
||||
|
||||
value.forEach((item) => {
|
||||
if (typeof item !== 'string') {
|
||||
return
|
||||
}
|
||||
|
||||
const trimmed = item.trim()
|
||||
if (trimmed) {
|
||||
deduped.add(trimmed)
|
||||
}
|
||||
})
|
||||
|
||||
return [...deduped]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,40 +6,14 @@ import {
|
||||
TimeSlotSource,
|
||||
MembershipStatus,
|
||||
BookingStatus,
|
||||
getDefaultTimeSlots,
|
||||
} from '@mp-pilates/shared'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
/** Return a Date whose JS getDay() maps to the given ISO weekday (1=Mon…7=Sun) */
|
||||
function dateForIsoWeekday(isoWeekday: number): Date {
|
||||
const base = new Date('2026-04-06T00:00:00Z') // Monday
|
||||
const d = new Date(base)
|
||||
d.setDate(base.getDate() + (isoWeekday - 1))
|
||||
return d
|
||||
}
|
||||
|
||||
const makeTemplate = (overrides: Record<string, unknown> = {}) => ({
|
||||
id: 'tpl-1',
|
||||
dayOfWeek: 1,
|
||||
startTime: '09:00',
|
||||
endTime: '10:00',
|
||||
capacity: 1,
|
||||
isActive: true,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
...overrides,
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mock PrismaService
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const mockPrisma = {
|
||||
weekTemplate: {
|
||||
findMany: jest.fn(),
|
||||
},
|
||||
timeSlot: {
|
||||
createMany: jest.fn(),
|
||||
updateMany: jest.fn(),
|
||||
@@ -77,26 +51,12 @@ describe('SlotGeneratorService', () => {
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
describe('generateSlots', () => {
|
||||
it('returns 0 when there are no active templates', async () => {
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([])
|
||||
it('creates slots for every day using the default schedule (14 slots per day)', async () => {
|
||||
const defaultSlots = getDefaultTimeSlots()
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: defaultSlots.length * 7 })
|
||||
|
||||
const count = await service.generateSlots(7)
|
||||
|
||||
expect(count).toBe(0)
|
||||
expect(mockPrisma.timeSlot.createMany).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('creates correct number of slots from templates', async () => {
|
||||
// 2 templates, both for Monday (ISO 1)
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([
|
||||
makeTemplate({ id: 'tpl-1', dayOfWeek: 1, startTime: '09:00', endTime: '10:00' }),
|
||||
makeTemplate({ id: 'tpl-2', dayOfWeek: 1, startTime: '10:00', endTime: '11:00' }),
|
||||
])
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 2 })
|
||||
|
||||
// Use 7 days — will hit exactly one Monday
|
||||
const count = await service.generateSlots(7)
|
||||
|
||||
expect(mockPrisma.timeSlot.createMany).toHaveBeenCalledTimes(1)
|
||||
const { data, skipDuplicates } =
|
||||
mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
@@ -104,23 +64,30 @@ describe('SlotGeneratorService', () => {
|
||||
skipDuplicates: boolean
|
||||
}
|
||||
expect(skipDuplicates).toBe(true)
|
||||
// Both templates should appear in the batch (may include more days)
|
||||
const mondaySlots = (
|
||||
data as Array<{ startTime: string; source: TimeSlotSource }>
|
||||
).filter(
|
||||
(s) => s.startTime === '09:00' || s.startTime === '10:00',
|
||||
)
|
||||
expect(mondaySlots.length).toBeGreaterThanOrEqual(2)
|
||||
expect(count).toBe(2)
|
||||
// 7 days × 14 slots per day = 98
|
||||
expect(data).toHaveLength(defaultSlots.length * 7)
|
||||
expect(count).toBe(defaultSlots.length * 7)
|
||||
})
|
||||
|
||||
it('creates 14 slots per day (08:00-22:00 hourly)', async () => {
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 14 })
|
||||
|
||||
await service.generateSlots(1)
|
||||
|
||||
const { data } = mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
data: Array<{ startTime: string; endTime: string }>
|
||||
}
|
||||
expect(data).toHaveLength(14)
|
||||
expect(data[0].startTime).toBe('08:00')
|
||||
expect(data[0].endTime).toBe('09:00')
|
||||
expect(data[13].startTime).toBe('21:00')
|
||||
expect(data[13].endTime).toBe('22:00')
|
||||
})
|
||||
|
||||
it('passes skipDuplicates: true to handle existing date+time combinations', async () => {
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([
|
||||
makeTemplate({ dayOfWeek: 1 }),
|
||||
])
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 0 })
|
||||
|
||||
await service.generateSlots(7)
|
||||
await service.generateSlots(1)
|
||||
|
||||
const call = mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
skipDuplicates: boolean
|
||||
@@ -128,54 +95,17 @@ describe('SlotGeneratorService', () => {
|
||||
expect(call.skipDuplicates).toBe(true)
|
||||
})
|
||||
|
||||
it('maps Sunday (JS getDay()=0) to ISO weekday 7', async () => {
|
||||
// Template for Sunday (ISO 7)
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([
|
||||
makeTemplate({ id: 'tpl-sun', dayOfWeek: 7, startTime: '08:00', endTime: '09:00' }),
|
||||
])
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 1 })
|
||||
it('sets source to TEMPLATE for all generated slots', async () => {
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 14 })
|
||||
|
||||
// 7 days will cover exactly one Sunday
|
||||
const count = await service.generateSlots(7)
|
||||
|
||||
expect(mockPrisma.timeSlot.createMany).toHaveBeenCalledTimes(1)
|
||||
const { data } = mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
data: Array<{ startTime: string; source: TimeSlotSource }>
|
||||
}
|
||||
const sundaySlots = data.filter((s) => s.startTime === '08:00')
|
||||
expect(sundaySlots.length).toBeGreaterThanOrEqual(1)
|
||||
expect(sundaySlots[0].source).toBe(TimeSlotSource.TEMPLATE)
|
||||
expect(count).toBe(1)
|
||||
})
|
||||
|
||||
it('maps Monday (JS getDay()=1) to ISO weekday 1', async () => {
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([
|
||||
makeTemplate({ id: 'tpl-mon', dayOfWeek: 1, startTime: '07:00', endTime: '08:00' }),
|
||||
])
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 1 })
|
||||
|
||||
await service.generateSlots(7)
|
||||
await service.generateSlots(1)
|
||||
|
||||
const { data } = mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
data: Array<{ startTime: string }>
|
||||
data: Array<{ source: TimeSlotSource }>
|
||||
}
|
||||
const mondaySlots = data.filter((s) => s.startTime === '07:00')
|
||||
expect(mondaySlots.length).toBeGreaterThanOrEqual(1)
|
||||
})
|
||||
|
||||
it('attaches templateId from the matching template', async () => {
|
||||
mockPrisma.weekTemplate.findMany.mockResolvedValueOnce([
|
||||
makeTemplate({ id: 'tpl-xyz', dayOfWeek: 2 }),
|
||||
])
|
||||
mockPrisma.timeSlot.createMany.mockResolvedValueOnce({ count: 1 })
|
||||
|
||||
await service.generateSlots(7)
|
||||
|
||||
const { data } = mockPrisma.timeSlot.createMany.mock.calls[0][0] as {
|
||||
data: Array<{ templateId: string }>
|
||||
for (const slot of data) {
|
||||
expect(slot.source).toBe(TimeSlotSource.TEMPLATE)
|
||||
}
|
||||
const tuesdaySlots = data.filter((s) => s.templateId === 'tpl-xyz')
|
||||
expect(tuesdaySlots.length).toBeGreaterThanOrEqual(1)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -84,14 +84,26 @@ describe('TimeSlotService', () => {
|
||||
expect(result[0].myBookingId).toBeNull()
|
||||
})
|
||||
|
||||
it('marks isBookedByMe=true and sets myBookingId when user has a CONFIRMED booking', async () => {
|
||||
const slot = makeSlot({ bookings: [{ id: 'booking-42' }] })
|
||||
it('marks isBookedByMe=true and sets my booking info when user has a CONFIRMED booking', async () => {
|
||||
const slot = makeSlot({ bookings: [{ id: 'booking-42', status: BookingStatus.CONFIRMED }] })
|
||||
mockPrisma.timeSlot.findMany.mockResolvedValueOnce([slot])
|
||||
|
||||
const result = await service.getAvailableSlots('2026-04-07', 'user-1')
|
||||
|
||||
expect(result[0].isBookedByMe).toBe(true)
|
||||
expect(result[0].myBookingId).toBe('booking-42')
|
||||
expect(result[0].myBookingStatus).toBe(BookingStatus.CONFIRMED)
|
||||
})
|
||||
|
||||
it('marks pending confirmation booking as already booked by current user', async () => {
|
||||
const slot = makeSlot({ bookings: [{ id: 'booking-99', status: BookingStatus.PENDING_CONFIRMATION }] })
|
||||
mockPrisma.timeSlot.findMany.mockResolvedValueOnce([slot])
|
||||
|
||||
const result = await service.getAvailableSlots('2026-04-07', 'user-1')
|
||||
|
||||
expect(result[0].isBookedByMe).toBe(true)
|
||||
expect(result[0].myBookingId).toBe('booking-99')
|
||||
expect(result[0].myBookingStatus).toBe(BookingStatus.PENDING_CONFIRMATION)
|
||||
})
|
||||
|
||||
it('excludes CLOSED slots from query', async () => {
|
||||
@@ -134,11 +146,12 @@ describe('TimeSlotService', () => {
|
||||
|
||||
expect(result[0].isBookedByMe).toBe(false)
|
||||
expect(result[0].myBookingId).toBeNull()
|
||||
expect(result[0].myBookingStatus).toBeNull()
|
||||
})
|
||||
|
||||
it('maps multiple slots correctly', async () => {
|
||||
const slots = [
|
||||
makeSlot({ id: 'slot-1', startTime: '09:00', bookings: [{ id: 'bk-1' }] }),
|
||||
makeSlot({ id: 'slot-1', startTime: '09:00', bookings: [{ id: 'bk-1', status: BookingStatus.CONFIRMED }] }),
|
||||
makeSlot({ id: 'slot-2', startTime: '10:00', bookings: [] }),
|
||||
]
|
||||
mockPrisma.timeSlot.findMany.mockResolvedValueOnce(slots)
|
||||
@@ -148,8 +161,10 @@ describe('TimeSlotService', () => {
|
||||
expect(result).toHaveLength(2)
|
||||
expect(result[0].isBookedByMe).toBe(true)
|
||||
expect(result[0].myBookingId).toBe('bk-1')
|
||||
expect(result[0].myBookingStatus).toBe(BookingStatus.CONFIRMED)
|
||||
expect(result[1].isBookedByMe).toBe(false)
|
||||
expect(result[1].myBookingId).toBeNull()
|
||||
expect(result[1].myBookingStatus).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -164,7 +179,20 @@ describe('TimeSlotService', () => {
|
||||
|
||||
const result = await service.getSlotById('slot-1')
|
||||
|
||||
expect(result).toEqual(slot)
|
||||
expect(result).toMatchObject({
|
||||
id: slot.id,
|
||||
date: '2026-04-07',
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
capacity: slot.capacity,
|
||||
bookedCount: slot.bookedCount,
|
||||
status: slot.status,
|
||||
source: slot.source,
|
||||
templateId: slot.templateId,
|
||||
isBookedByMe: false,
|
||||
myBookingId: null,
|
||||
myBookingStatus: null,
|
||||
})
|
||||
expect(mockPrisma.timeSlot.findUnique).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ where: { id: 'slot-1' } }),
|
||||
)
|
||||
|
||||
@@ -6,14 +6,10 @@ import {
|
||||
BookingStatus,
|
||||
SLOT_GENERATION_DAYS,
|
||||
DEFAULT_SLOT_CAPACITY,
|
||||
getDefaultTimeSlots,
|
||||
} from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
|
||||
/** Convert JS getDay() (0=Sun … 6=Sat) to ISO weekday (1=Mon … 7=Sun) */
|
||||
function toIsoWeekday(jsDay: number): number {
|
||||
return jsDay === 0 ? 7 : jsDay
|
||||
}
|
||||
|
||||
/** Build a UTC Date for midnight of a local calendar date */
|
||||
function toUtcMidnight(date: Date): Date {
|
||||
const d = new Date(date)
|
||||
@@ -28,20 +24,14 @@ export class SlotGeneratorService {
|
||||
constructor(private readonly prisma: PrismaService) {}
|
||||
|
||||
/**
|
||||
* Generate time slots for the next `daysAhead` days based on active
|
||||
* WeekTemplates. Uses `createMany` with `skipDuplicates` so re-runs are safe.
|
||||
* Generate time slots for the next `daysAhead` days based on the fixed
|
||||
* default schedule (Mon-Sun, 08:00-22:00 hourly).
|
||||
* Uses `createMany` with `skipDuplicates` so re-runs are safe.
|
||||
*
|
||||
* @returns Number of newly created slots
|
||||
*/
|
||||
async generateSlots(daysAhead: number = SLOT_GENERATION_DAYS): Promise<number> {
|
||||
const templates = await this.prisma.weekTemplate.findMany({
|
||||
where: { isActive: true },
|
||||
})
|
||||
|
||||
if (templates.length === 0) {
|
||||
this.logger.log('No active week templates found – skipping slot generation')
|
||||
return 0
|
||||
}
|
||||
const defaultSlots = getDefaultTimeSlots()
|
||||
|
||||
const tomorrow = new Date()
|
||||
tomorrow.setDate(tomorrow.getDate() + 1)
|
||||
@@ -53,27 +43,19 @@ export class SlotGeneratorService {
|
||||
endTime: string
|
||||
capacity: number
|
||||
source: TimeSlotSource
|
||||
templateId: string
|
||||
}> = []
|
||||
|
||||
for (let offset = 0; offset < daysAhead; offset++) {
|
||||
const target = new Date(tomorrow)
|
||||
target.setDate(target.getDate() + offset)
|
||||
|
||||
const isoWeekday = toIsoWeekday(target.getDay())
|
||||
|
||||
const matchingTemplates = templates.filter(
|
||||
(t) => t.dayOfWeek === isoWeekday,
|
||||
)
|
||||
|
||||
for (const template of matchingTemplates) {
|
||||
for (const slot of defaultSlots) {
|
||||
slotsToCreate.push({
|
||||
date: toUtcMidnight(target),
|
||||
startTime: template.startTime,
|
||||
endTime: template.endTime,
|
||||
capacity: template.capacity ?? DEFAULT_SLOT_CAPACITY,
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
capacity: DEFAULT_SLOT_CAPACITY,
|
||||
source: TimeSlotSource.TEMPLATE,
|
||||
templateId: template.id,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,6 @@ import { TimeSlotService } from './time-slot.service'
|
||||
import { SlotGeneratorService } from './slot-generator.service'
|
||||
import { QuerySlotsDto } from './dto/query-slots.dto'
|
||||
import { CreateManualSlotDto } from './dto/create-manual-slot.dto'
|
||||
import { UpdateWeekTemplateDto } from './dto/week-template.dto'
|
||||
import { PublishDaySlotsDto } from './dto/publish-day-slots.dto'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -61,18 +60,6 @@ export class AdminTimeSlotController {
|
||||
private readonly slotGeneratorService: SlotGeneratorService,
|
||||
) {}
|
||||
|
||||
// Week template management
|
||||
|
||||
@Get('week-template')
|
||||
getWeekTemplates() {
|
||||
return this.timeSlotService.getWeekTemplates()
|
||||
}
|
||||
|
||||
@Put('week-template')
|
||||
replaceWeekTemplates(@Body() dto: UpdateWeekTemplateDto) {
|
||||
return this.timeSlotService.replaceWeekTemplates(dto.templates)
|
||||
}
|
||||
|
||||
// Manual slot management
|
||||
|
||||
@Post('time-slot/manual')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common'
|
||||
import { TimeSlotStatus, BookingStatus, DEFAULT_SLOT_CAPACITY } from '@mp-pilates/shared'
|
||||
import { TimeSlotStatus, BookingStatus, DEFAULT_SLOT_CAPACITY, getDefaultTimeSlots } from '@mp-pilates/shared'
|
||||
import { TimeSlotSource } from '@mp-pilates/shared'
|
||||
import { PrismaService } from '../prisma/prisma.service'
|
||||
import type { TimeSlotWithBookingStatus, ScheduleSlotPreview } from '@mp-pilates/shared'
|
||||
@@ -32,7 +32,7 @@ export class TimeSlotService {
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
},
|
||||
myBooking: { id: string } | null,
|
||||
myBooking: { id: string; status: string } | null,
|
||||
): TimeSlotWithBookingStatus {
|
||||
return {
|
||||
id: slot.id,
|
||||
@@ -48,6 +48,7 @@ export class TimeSlotService {
|
||||
updatedAt: slot.updatedAt.toISOString(),
|
||||
isBookedByMe: myBooking !== null,
|
||||
myBookingId: myBooking?.id ?? null,
|
||||
myBookingStatus: (myBooking?.status as BookingStatus | undefined) ?? null,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,9 +72,9 @@ export class TimeSlotService {
|
||||
? {
|
||||
where: {
|
||||
userId,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
select: { id: true },
|
||||
select: { id: true, status: true },
|
||||
}
|
||||
: false,
|
||||
},
|
||||
@@ -97,9 +98,9 @@ export class TimeSlotService {
|
||||
? {
|
||||
where: {
|
||||
userId,
|
||||
status: BookingStatus.CONFIRMED,
|
||||
status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
|
||||
},
|
||||
select: { id: true },
|
||||
select: { id: true, status: true },
|
||||
}
|
||||
: false,
|
||||
},
|
||||
@@ -143,51 +144,12 @@ export class TimeSlotService {
|
||||
})
|
||||
}
|
||||
|
||||
async getWeekTemplates() {
|
||||
return this.prisma.weekTemplate.findMany({
|
||||
orderBy: [{ dayOfWeek: 'asc' }, { startTime: 'asc' }],
|
||||
})
|
||||
}
|
||||
|
||||
async replaceWeekTemplates(
|
||||
items: Array<{
|
||||
dayOfWeek: number
|
||||
startTime: string
|
||||
endTime: string
|
||||
capacity?: number
|
||||
isActive?: boolean
|
||||
}>,
|
||||
) {
|
||||
return this.prisma.$transaction(async (tx) => {
|
||||
await tx.weekTemplate.deleteMany()
|
||||
|
||||
await tx.weekTemplate.createMany({
|
||||
data: items.map((item) => ({
|
||||
dayOfWeek: item.dayOfWeek,
|
||||
startTime: item.startTime,
|
||||
endTime: item.endTime,
|
||||
capacity: item.capacity ?? DEFAULT_SLOT_CAPACITY,
|
||||
isActive: item.isActive ?? true,
|
||||
})),
|
||||
})
|
||||
|
||||
return tx.weekTemplate.findMany({
|
||||
orderBy: [{ dayOfWeek: 'asc' }, { startTime: 'asc' }],
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// ── Schedule preview & publish ──────────────────────────────
|
||||
|
||||
/** Convert JS getDay() (0=Sun … 6=Sat) to ISO weekday (1=Mon … 7=Sun) */
|
||||
private toIsoWeekday(jsDay: number): number {
|
||||
return jsDay === 0 ? 7 : jsDay
|
||||
}
|
||||
|
||||
/**
|
||||
* Return a schedule preview for a given date.
|
||||
* If TimeSlot records already exist → return them (isPublished: true).
|
||||
* Otherwise → derive from active WeekTemplates (isPublished: false).
|
||||
* Otherwise → derive from the fixed default schedule (isPublished: false).
|
||||
*/
|
||||
async getSchedulePreview(date: string): Promise<ScheduleSlotPreview[]> {
|
||||
const parsedDate = new Date(date)
|
||||
@@ -215,23 +177,19 @@ export class TimeSlotService {
|
||||
}))
|
||||
}
|
||||
|
||||
// 2. No existing slots — derive from WeekTemplate
|
||||
const isoWeekday = this.toIsoWeekday(parsedDate.getUTCDay())
|
||||
const templates = await this.prisma.weekTemplate.findMany({
|
||||
where: { dayOfWeek: isoWeekday, isActive: true },
|
||||
orderBy: { startTime: 'asc' },
|
||||
})
|
||||
// 2. No existing slots — use fixed default schedule
|
||||
const defaultSlots = getDefaultTimeSlots()
|
||||
|
||||
return templates.map((tpl) => ({
|
||||
return defaultSlots.map((slot) => ({
|
||||
id: null,
|
||||
date: date,
|
||||
startTime: tpl.startTime,
|
||||
endTime: tpl.endTime,
|
||||
capacity: tpl.capacity,
|
||||
startTime: slot.startTime,
|
||||
endTime: slot.endTime,
|
||||
capacity: DEFAULT_SLOT_CAPACITY,
|
||||
bookedCount: 0,
|
||||
status: TimeSlotStatus.OPEN,
|
||||
source: TimeSlotSource.TEMPLATE,
|
||||
templateId: tpl.id,
|
||||
templateId: null,
|
||||
isPublished: false,
|
||||
}))
|
||||
}
|
||||
|
||||
@@ -2,7 +2,13 @@ import { Test, TestingModule } from '@nestjs/testing'
|
||||
import { NotFoundException } from '@nestjs/common'
|
||||
import { UserService } from '../user.service'
|
||||
import { PrismaService } from '../../prisma/prisma.service'
|
||||
import { MembershipStatus, BookingStatus, UserRole } from '@mp-pilates/shared'
|
||||
import {
|
||||
MembershipStatus,
|
||||
BookingStatus,
|
||||
UserRole,
|
||||
SubscriptionMessageScene,
|
||||
} from '@mp-pilates/shared'
|
||||
import { ConfigService } from '@nestjs/config'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
@@ -16,6 +22,7 @@ const makeUser = (overrides: Record<string, unknown> = {}) => ({
|
||||
nickname: 'Alice',
|
||||
avatarUrl: 'https://example.com/avatar.png',
|
||||
role: UserRole.MEMBER,
|
||||
adminBookingSubscriptionCount: 0,
|
||||
createdAt: new Date('2024-01-01T00:00:00Z'),
|
||||
updatedAt: new Date('2024-01-01T00:00:00Z'),
|
||||
_count: { memberships: 2 },
|
||||
@@ -48,11 +55,22 @@ const mockPrisma = {
|
||||
findUnique: jest.fn(),
|
||||
update: jest.fn(),
|
||||
},
|
||||
subscriptionMessageConsent: {
|
||||
upsert: jest.fn(),
|
||||
findMany: jest.fn(),
|
||||
},
|
||||
booking: {
|
||||
findMany: jest.fn(),
|
||||
},
|
||||
}
|
||||
|
||||
const mockConfigService = {
|
||||
get: jest.fn((key: string, defaultValue = '') => {
|
||||
if (key === 'WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED') return 'tmpl-booking-confirmed'
|
||||
return defaultValue
|
||||
}),
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Tests
|
||||
// ---------------------------------------------------------------------------
|
||||
@@ -65,6 +83,7 @@ describe('UserService', () => {
|
||||
providers: [
|
||||
UserService,
|
||||
{ provide: PrismaService, useValue: mockPrisma },
|
||||
{ provide: ConfigService, useValue: mockConfigService },
|
||||
],
|
||||
}).compile()
|
||||
|
||||
@@ -101,6 +120,23 @@ describe('UserService', () => {
|
||||
avatarUrl: 'https://example.com/avatar.png',
|
||||
role: UserRole.MEMBER,
|
||||
activeMembershipCount: 3,
|
||||
adminBookingSubscriptionCount: 0,
|
||||
subscriptionMessageTemplates: {
|
||||
templates: [
|
||||
{
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
description: '购卡或预约时请求一次订阅,用于后续预约确认通知推送',
|
||||
usageTarget: 'consent',
|
||||
},
|
||||
{
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.ADMIN_BOOKING_CREATED,
|
||||
description: '管理员主动增加预约提醒次数,用于接收学员新预约通知',
|
||||
usageTarget: 'counter',
|
||||
},
|
||||
],
|
||||
},
|
||||
createdAt: new Date('2024-01-01T00:00:00Z').toISOString(),
|
||||
})
|
||||
})
|
||||
@@ -112,6 +148,89 @@ describe('UserService', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('reportSubscriptionMessageRequests', () => {
|
||||
it('aggregates and returns subscription consent stats', async () => {
|
||||
mockPrisma.subscriptionMessageConsent.upsert.mockResolvedValue(undefined)
|
||||
mockPrisma.subscriptionMessageConsent.findMany.mockResolvedValue([
|
||||
{
|
||||
userId: 'user-1',
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
totalRequestCount: 2,
|
||||
acceptCount: 1,
|
||||
rejectCount: 1,
|
||||
banCount: 0,
|
||||
filterCount: 0,
|
||||
sentCount: 0,
|
||||
lastResult: 'reject',
|
||||
lastRequestedAt: new Date('2024-01-03T00:00:00Z'),
|
||||
lastSentAt: null,
|
||||
createdAt: new Date('2024-01-01T00:00:00Z'),
|
||||
updatedAt: new Date('2024-01-03T00:00:00Z'),
|
||||
},
|
||||
])
|
||||
|
||||
const result = await service.reportSubscriptionMessageRequests('user-1', [
|
||||
{
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
result: 'reject',
|
||||
},
|
||||
])
|
||||
|
||||
expect(mockPrisma.subscriptionMessageConsent.upsert).toHaveBeenCalledWith({
|
||||
where: {
|
||||
userId_templateId_scene: {
|
||||
userId: 'user-1',
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
},
|
||||
},
|
||||
create: {
|
||||
userId: 'user-1',
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
totalRequestCount: 1,
|
||||
acceptCount: 0,
|
||||
rejectCount: 1,
|
||||
banCount: 0,
|
||||
filterCount: 0,
|
||||
sentCount: 0,
|
||||
lastResult: 'reject',
|
||||
lastRequestedAt: expect.any(Date),
|
||||
},
|
||||
update: {
|
||||
totalRequestCount: { increment: 1 },
|
||||
acceptCount: { increment: 0 },
|
||||
rejectCount: { increment: 1 },
|
||||
banCount: { increment: 0 },
|
||||
filterCount: { increment: 0 },
|
||||
lastResult: 'reject',
|
||||
lastRequestedAt: expect.any(Date),
|
||||
},
|
||||
})
|
||||
|
||||
expect(result).toEqual([
|
||||
{
|
||||
userId: 'user-1',
|
||||
templateId: 'tmpl-booking-confirmed',
|
||||
scene: SubscriptionMessageScene.BOOKING_CREATED,
|
||||
totalRequestCount: 2,
|
||||
acceptCount: 1,
|
||||
rejectCount: 1,
|
||||
banCount: 0,
|
||||
filterCount: 0,
|
||||
sentCount: 0,
|
||||
lastResult: 'reject',
|
||||
lastRequestedAt: '2024-01-03T00:00:00.000Z',
|
||||
lastSentAt: null,
|
||||
createdAt: '2024-01-01T00:00:00.000Z',
|
||||
updatedAt: '2024-01-03T00:00:00.000Z',
|
||||
},
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// updateProfile
|
||||
// -------------------------------------------------------------------------
|
||||
@@ -145,6 +264,38 @@ describe('UserService', () => {
|
||||
expect(result.nickname).toBe('Bob')
|
||||
expect(result.avatarUrl).toBe('https://example.com/new.png')
|
||||
expect(result.activeMembershipCount).toBe(1)
|
||||
expect(result.adminBookingSubscriptionCount).toBe(0)
|
||||
expect(result.subscriptionMessageTemplates.templates).toHaveLength(2)
|
||||
})
|
||||
|
||||
it('increments admin booking subscription count for admin users', async () => {
|
||||
mockPrisma.user.findUnique.mockResolvedValue(makeUser({
|
||||
role: UserRole.ADMIN,
|
||||
adminBookingSubscriptionCount: 2,
|
||||
}))
|
||||
mockPrisma.user.update.mockResolvedValue(makeUser({
|
||||
role: UserRole.ADMIN,
|
||||
adminBookingSubscriptionCount: 3,
|
||||
}))
|
||||
|
||||
const result = await service.grantAdminBookingSubscriptionCount('user-1')
|
||||
|
||||
expect(mockPrisma.user.update).toHaveBeenCalledWith({
|
||||
where: { id: 'user-1' },
|
||||
data: {
|
||||
adminBookingSubscriptionCount: {
|
||||
increment: 1,
|
||||
},
|
||||
},
|
||||
include: {
|
||||
_count: {
|
||||
select: {
|
||||
memberships: { where: { status: MembershipStatus.ACTIVE } },
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
expect(result.adminBookingSubscriptionCount).toBe(3)
|
||||
})
|
||||
|
||||
it('only includes provided fields in the update payload', async () => {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user