|
|
@@ -0,0 +1,1177 @@
|
|
|
+# 家庭挑战自定义管理 Implementation Plan
|
|
|
+
|
|
|
+> **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:** 后端新增 CRUD 接口到 `FamilyChallengeController`,`FamilyChallengeService` 新增对应方法;前端在 `pages/health/challenge-manage.vue` 新建管理页,`parent-index.vue` 添加入口按钮。DB schema 已完备,无需额外迁移。
|
|
|
+
|
|
|
+**Tech Stack:** Spring Boot 2.7.18 + MyBatis-Plus + uni-app Vue 2
|
|
|
+
|
|
|
+## Global Constraints
|
|
|
+
|
|
|
+- 后端接口统一 `@PostMapping`,禁用 `@GetMapping/@PutMapping/@DeleteMapping`
|
|
|
+- 后端响应统一 `Result<T>`(code/message/data)
|
|
|
+- 后端 DI 用 `@Resource`,字段名匹配 Bean Name
|
|
|
+- 后端角色校验:Controller 内手动检查 `@RequestAttribute("role")`,仅 `parent`/`admin` 可操作挑战
|
|
|
+- 前端 Vue 2 Options API
|
|
|
+- 前端禁止可选链 `?.`,用 `&&` 替代
|
|
|
+- 前端禁止 CSS Grid,用 flexbox
|
|
|
+- 前端禁止 `:key` 表达式,用方法调用
|
|
|
+- 前端禁止 `new Date(string)`,用 `utils/format.js` 的 `parseDate()`
|
|
|
+- 前端禁止 `uni.getSystemInfoSync()`,用 `uni.getWindowInfo()`
|
|
|
+- API 统一走 `config.baseUrl`
|
|
|
+- 新页面必须在 `pages.json` 注册
|
|
|
+- 后端验证:`mvn clean compile`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## File Map
|
|
|
+
|
|
|
+| File | Action | Status |
|
|
|
+|------|--------|--------|
|
|
|
+| `cfc-backend/.../controller/FamilyChallengeController.java` | Modify | ✅ DONE |
|
|
|
+| `cfc-backend/.../service/FamilyChallengeService.java` | Modify | ✅ DONE |
|
|
|
+| `cfc-backend/.../entity/FamilyChallenge.java` | Modify (creator_id) | ✅ DONE |
|
|
|
+| `cfc-backend/src/main/resources/schema.sql` | Modify (creator_id) | ✅ DONE |
|
|
|
+| `cfc-backend/.../config/DatabaseInitializer.java` | Modify (migration 158) | ✅ DONE |
|
|
|
+| `cfc-frontend/utils/api.js` | Modify (new APIs) | ✅ DONE |
|
|
|
+| `cfc-frontend/pages/health/challenge-manage.vue` | Create | ✅ DONE |
|
|
|
+| `cfc-frontend/pages/home-pages/parent-index.vue` | Modify (入口) | ✅ DONE |
|
|
|
+| `cfc-frontend/pages.json` | Modify (register page) | ✅ DONE |
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Execution Log
|
|
|
+
|
|
|
+### Task 1: 后端 creator_id 字段 + 迁移 ✅
|
|
|
+
|
|
|
+- [x] Entity 添加 `creatorId` 字段
|
|
|
+- [x] schema.sql 同步 `creator_id` 列
|
|
|
+- [x] DatabaseInitializer 添加迁移158
|
|
|
+
|
|
|
+### Task 2: 后端 CRUD 接口 ✅
|
|
|
+
|
|
|
+- [x] Service: `getTemplates()` — 返回7个预设模板
|
|
|
+- [x] Service: `createChallenge()` — 创建自定义挑战
|
|
|
+- [x] Service: `updateChallenge()` — 编辑挑战
|
|
|
+- [x] Service: `deleteChallenge()` — 软删除(status=cancelled)
|
|
|
+- [x] Controller: `/templates`, `/create`, `/update/{id}`, `/delete/{id}`
|
|
|
+- [x] `getActiveChallenges()` 不再自动创建模板
|
|
|
+
|
|
|
+### Task 3: 前端 API ✅
|
|
|
+
|
|
|
+- [x] `createChallenge`, `updateChallenge`, `deleteChallenge`, `getChallengeTemplates`
|
|
|
+
|
|
|
+### Task 4: 前端页面 + 入口 ✅
|
|
|
+
|
|
|
+- [x] `pages/health/challenge-manage.vue` — 模板推荐 + 挑战列表 + 创建/编辑弹窗
|
|
|
+- [x] `parent-index.vue` — 挑战区域添加"管理 →"入口
|
|
|
+- [x] `pages.json` — 注册 challenge-manage 页面
|
|
|
+
|
|
|
+### Task 5: 验证
|
|
|
+
|
|
|
+- [x] 前端 `npm run build:mp-weixin` — **BUILD PASSED** (pre-existing warnings only)
|
|
|
+- [ ] 后端 `mvn clean compile` — 需要 JDK 环境(当前机器只有 JRE)
|
|
|
+
|
|
|
+### Task 6: 自审查 ✅
|
|
|
+
|
|
|
+- [x] 所有接口均为 `@PostMapping`
|
|
|
+- [x] `getActiveChallenges` 不再自动创建模板
|
|
|
+- [x] 前端 Vue 2 Options API,无可选链
|
|
|
+- [x] 无 CSS Grid
|
|
|
+- [x] 无 `:key` 表达式
|
|
|
+- [x] import 路径正确
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 1: 后端 — 添加 creator_id 字段 + 数据库迁移
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-backend/src/main/java/com/etotem/cfc/entity/FamilyChallenge.java`
|
|
|
+- Modify: `cfc-backend/src/main/resources/schema.sql`
|
|
|
+- Modify: `cfc-backend/src/main/java/com/etotem/cfc/config/DatabaseInitializer.java`
|
|
|
+
|
|
|
+**Step 1: 在 FamilyChallenge 实体添加 creatorId 字段**
|
|
|
+
|
|
|
+在 `FamilyChallenge.java` 末尾(`memberProgress` 字段之后)添加:
|
|
|
+
|
|
|
+```java
|
|
|
+ /** 创建者ID(系统创建为NULL,用户创建为userId) */
|
|
|
+ @TableField(exist = false)
|
|
|
+ private Long creatorId;
|
|
|
+```
|
|
|
+
|
|
|
+**Step 2: 同步 schema.sql**
|
|
|
+
|
|
|
+找到 `CREATE TABLE IF NOT EXISTS family_challenge (` 那一段(约 3158 行),在 `created_at` 列之前添加:
|
|
|
+
|
|
|
+```sql
|
|
|
+ creator_id BIGINT COMMENT '创建者ID(NULL=系统创建)',
|
|
|
+```
|
|
|
+
|
|
|
+**Step 3: 在 DatabaseInitializer 添加迁移**
|
|
|
+
|
|
|
+搜索 `// 迁移` 找到最新编号,在其后追加:
|
|
|
+
|
|
|
+```java
|
|
|
+ // 迁移XX: family_challenge 添加 creator_id 列(用户自定义挑战)
|
|
|
+ ensureColumn("family_challenge", "creator_id", "BIGINT COMMENT '创建者ID(NULL=系统创建)'");
|
|
|
+```
|
|
|
+
|
|
|
+**Step 4: 验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd cfc-backend && mvn clean compile
|
|
|
+```
|
|
|
+
|
|
|
+Expected: 编译通过
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 2: 后端 — 新增 CRUD 接口 + 模板接口
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-backend/src/main/java/com/etotem/cfc/controller/FamilyChallengeController.java`
|
|
|
+- Modify: `cfc-backend/src/main/java/com/etotem/cfc/service/FamilyChallengeService.java`
|
|
|
+
|
|
|
+**Step 1: 在 FamilyChallengeService 添加方法**
|
|
|
+
|
|
|
+新增以下方法:
|
|
|
+
|
|
|
+```java
|
|
|
+ /** 获取挑战模板列表(供前端参考创建) */
|
|
|
+ public List<Map<String, Object>> getTemplates() {
|
|
|
+ List<Map<String, Object>> templates = new ArrayList<>();
|
|
|
+ String[][] templateData = {
|
|
|
+ {"full_checkin", "全员打卡挑战", "全家连续打卡N天,一起养成好习惯!", "3", "50", "all_members", "3"},
|
|
|
+ {"sports", "运动PK挑战", "全周家庭总运动时长超过N分钟!", "7", "100", "aggregate", "300"},
|
|
|
+ {"health_week", "健康周挑战", "全员每日完成微行动,连续N天健康生活!", "7", "50", "all_members", "7"},
|
|
|
+ {"reading", "阅读挑战", "全家每周阅读总计N分钟!", "7", "80", "aggregate", "200"},
|
|
|
+ {"no_screen", "无屏幕挑战", "全家约定每天屏幕时间不超过N分钟", "7", "60", "all_members", "60"},
|
|
|
+ {"gratitude", "感恩日记挑战", "每人每天写一条感恩记录,坚持N天", "7", "40", "all_members", "7"},
|
|
|
+ {"custom", "自定义挑战", "自定义你的家庭挑战", "7", "50", "all_members", "7"}
|
|
|
+ };
|
|
|
+ for (String[] t : templateData) {
|
|
|
+ Map<String, Object> item = new HashMap<>();
|
|
|
+ item.put("type", t[0]);
|
|
|
+ item.put("title", t[1]);
|
|
|
+ item.put("description", t[2]);
|
|
|
+ item.put("durationDays", t[3]);
|
|
|
+ item.put("rewardPoints", t[4]);
|
|
|
+ item.put("targetMode", t[5]);
|
|
|
+ item.put("targetValue", t[6]);
|
|
|
+ templates.add(item);
|
|
|
+ }
|
|
|
+ return templates;
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 创建自定义挑战 */
|
|
|
+ @Transactional
|
|
|
+ public Result<Long> createChallenge(Long familyId, Long creatorId, Map<String, Object> params) {
|
|
|
+ String title = params.get("title") != null ? params.get("title").toString() : "";
|
|
|
+ if (title.isEmpty() || title.length() > 200) {
|
|
|
+ return Result.error("挑战标题不能为空且不超过200字符");
|
|
|
+ }
|
|
|
+ String description = params.get("description") != null ? params.get("description").toString() : "";
|
|
|
+ String challengeType = params.get("challengeType") != null ? params.get("challengeType").toString() : "custom";
|
|
|
+ String targetMode = params.get("targetMode") != null ? params.get("targetMode").toString() : "all_members";
|
|
|
+ if (!"aggregate".equals(targetMode) && !"all_members".equals(targetMode)) {
|
|
|
+ return Result.error("目标模式错误,可选 aggregate 或 all_members");
|
|
|
+ }
|
|
|
+ Integer durationDays = params.get("durationDays") != null ? Integer.parseInt(params.get("durationDays").toString()) : 7;
|
|
|
+ Integer targetValue = params.get("targetValue") != null ? Integer.parseInt(params.get("targetValue").toString()) : 0;
|
|
|
+ if (targetValue <= 0) {
|
|
|
+ return Result.error("目标值必须大于0");
|
|
|
+ }
|
|
|
+ Integer rewardPoints = params.get("rewardPoints") != null ? Integer.parseInt(params.get("rewardPoints").toString()) : 0;
|
|
|
+ if (rewardPoints < 0) {
|
|
|
+ return Result.error("奖励积分不能为负数");
|
|
|
+ }
|
|
|
+
|
|
|
+ FamilyChallenge challenge = new FamilyChallenge();
|
|
|
+ challenge.setFamilyId(familyId);
|
|
|
+ challenge.setCreatorId(creatorId);
|
|
|
+ challenge.setChallengeType(challengeType);
|
|
|
+ challenge.setTitle(title);
|
|
|
+ challenge.setDescription(description.isEmpty() ? null : description);
|
|
|
+ challenge.setDurationDays(durationDays);
|
|
|
+ challenge.setRewardPoints(rewardPoints);
|
|
|
+ challenge.setTargetMode(targetMode);
|
|
|
+ challenge.setTargetValue(targetValue);
|
|
|
+ challenge.setStatus("active");
|
|
|
+ challenge.setStartDate(new Date());
|
|
|
+ Calendar cal = Calendar.getInstance();
|
|
|
+ cal.add(Calendar.DAY_OF_MONTH, durationDays);
|
|
|
+ challenge.setEndDate(cal.getTime());
|
|
|
+ challenge.setCreatedAt(new Date());
|
|
|
+ familyChallengeMapper.insert(challenge);
|
|
|
+ log.info("已创建自定义挑战: familyId={}, creatorId={}, title={}, type={}", familyId, creatorId, title, challengeType);
|
|
|
+ return Result.success(challenge.getId());
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 更新挑战 */
|
|
|
+ @Transactional
|
|
|
+ public Result<Void> updateChallenge(Long challengeId, Long userId, Long familyId, Map<String, Object> params) {
|
|
|
+ FamilyChallenge challenge = familyChallengeMapper.selectById(challengeId);
|
|
|
+ if (challenge == null) {
|
|
|
+ return Result.error("挑战不存在");
|
|
|
+ }
|
|
|
+ if (!challenge.getFamilyId().equals(familyId)) {
|
|
|
+ return Result.error("无权操作此挑战");
|
|
|
+ }
|
|
|
+ if (!"active".equals(challenge.getStatus())) {
|
|
|
+ return Result.error("仅可进行中的挑战可编辑");
|
|
|
+ }
|
|
|
+ if (params.get("title") != null) {
|
|
|
+ String title = params.get("title").toString();
|
|
|
+ if (title.isEmpty() || title.length() > 200) {
|
|
|
+ return Result.error("挑战标题不能为空且不超过200字符");
|
|
|
+ }
|
|
|
+ challenge.setTitle(title);
|
|
|
+ }
|
|
|
+ if (params.get("description") != null) {
|
|
|
+ challenge.setDescription(params.get("description").toString());
|
|
|
+ }
|
|
|
+ if (params.get("targetMode") != null) {
|
|
|
+ String tm = params.get("targetMode").toString();
|
|
|
+ if ("aggregate".equals(tm) || "all_members".equals(tm)) {
|
|
|
+ challenge.setTargetMode(tm);
|
|
|
+ } else {
|
|
|
+ return Result.error("目标模式错误");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (params.get("targetValue") != null) {
|
|
|
+ int tv = Integer.parseInt(params.get("targetValue").toString());
|
|
|
+ if (tv > 0) {
|
|
|
+ challenge.setTargetValue(tv);
|
|
|
+ } else {
|
|
|
+ return Result.error("目标值必须大于0");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (params.get("rewardPoints") != null) {
|
|
|
+ int rp = Integer.parseInt(params.get("rewardPoints").toString());
|
|
|
+ if (rp >= 0) {
|
|
|
+ challenge.setRewardPoints(rp);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ challenge.setUpdatedAt(new Date());
|
|
|
+ familyChallengeMapper.updateById(challenge);
|
|
|
+ return Result.success();
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 删除/取消挑战 */
|
|
|
+ @Transactional
|
|
|
+ public Result<Void> deleteChallenge(Long challengeId, Long userId, Long familyId) {
|
|
|
+ FamilyChallenge challenge = familyChallengeMapper.selectById(challengeId);
|
|
|
+ if (challenge == null) {
|
|
|
+ return Result.error("挑战不存在");
|
|
|
+ }
|
|
|
+ if (!challenge.getFamilyId().equals(familyId)) {
|
|
|
+ return Result.error("无权操作此挑战");
|
|
|
+ }
|
|
|
+ challenge.setStatus("cancelled");
|
|
|
+ challenge.setUpdatedAt(new Date());
|
|
|
+ familyChallengeMapper.updateById(challenge);
|
|
|
+ return Result.success();
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+需要在 Service 类顶部添加 import:
|
|
|
+
|
|
|
+```java
|
|
|
+import java.util.ArrayList;
|
|
|
+import java.util.HashMap;
|
|
|
+import java.util.List;
|
|
|
+import java.util.Map;
|
|
|
+```
|
|
|
+
|
|
|
+**Step 2: 在 FamilyChallengeController 添加接口**
|
|
|
+
|
|
|
+```java
|
|
|
+ @PostMapping("/templates")
|
|
|
+ public Result<List<Map<String, Object>>> getTemplates() {
|
|
|
+ return Result.success(familyChallengeService.getTemplates());
|
|
|
+ }
|
|
|
+
|
|
|
+ @PostMapping("/create")
|
|
|
+ public Result<Long> createChallenge(@RequestAttribute("userId") Long userId,
|
|
|
+ @RequestAttribute("familyId") Long familyId,
|
|
|
+ @RequestBody Map<String, Object> params) {
|
|
|
+ return familyChallengeService.createChallenge(familyId, userId, params);
|
|
|
+ }
|
|
|
+
|
|
|
+ @PostMapping("/update/{id}")
|
|
|
+ public Result<Void> updateChallenge(@RequestAttribute("userId") Long userId,
|
|
|
+ @RequestAttribute("familyId") Long familyId,
|
|
|
+ @PathVariable Long id,
|
|
|
+ @RequestBody Map<String, Object> params) {
|
|
|
+ return familyChallengeService.updateChallenge(id, userId, familyId, params);
|
|
|
+ }
|
|
|
+
|
|
|
+ @PostMapping("/delete/{id}")
|
|
|
+ public Result<Void> deleteChallenge(@RequestAttribute("userId") Long userId,
|
|
|
+ @RequestAttribute("familyId") Long familyId,
|
|
|
+ @PathVariable Long id) {
|
|
|
+ return familyChallengeService.deleteChallenge(id, userId, familyId);
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+注意:`@RequestAttribute("familyId")` 需要从 JWT interceptor 中确认是否已注入。如果 interceptor 只注入了 `userId`,则改为从 `userService` 获取 familyId。
|
|
|
+
|
|
|
+**Step 3: 确认 JwtInterceptor 是否注入 familyId**
|
|
|
+
|
|
|
+搜索 JwtInterceptor 确认是否有 `familyId` attribute。如果没有,在 Controller 方法中改为:
|
|
|
+
|
|
|
+```java
|
|
|
+ @PostMapping("/create")
|
|
|
+ public Result<Long> createChallenge(@RequestAttribute("userId") Long userId,
|
|
|
+ @RequestBody Map<String, Object> params) {
|
|
|
+ // 获取 familyId 逻辑
|
|
|
+ User user = userService.getUserInfo(userId);
|
|
|
+ if (user == null || user.getFamilyId() == null) {
|
|
|
+ return Result.error("用户无家庭信息");
|
|
|
+ }
|
|
|
+ return familyChallengeService.createChallenge(user.getFamilyId(), userId, params);
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+同样的模式用于 update/delete。需要在 controller 中添加:
|
|
|
+
|
|
|
+```java
|
|
|
+import com.etotem.cfc.entity.User;
|
|
|
+import com.etotem.cfc.service.UserService;
|
|
|
+@Resource
|
|
|
+private UserService userService;
|
|
|
+```
|
|
|
+
|
|
|
+**Step 4: 移除非兜底的 auto-create 调用**
|
|
|
+
|
|
|
+在 `getActiveChallenges()` 方法中,当前逻辑是"无活跃挑战时自动创建模板"。改为:无活跃挑战时返回空列表,不再自动创建。
|
|
|
+
|
|
|
+将 `getActiveChallenges` 改为:
|
|
|
+
|
|
|
+```java
|
|
|
+ public List<FamilyChallenge> getActiveChallenges(Long familyId) {
|
|
|
+ if (familyId == null) return new ArrayList<>();
|
|
|
+
|
|
|
+ LambdaQueryWrapper<FamilyChallenge> wrapper = new LambdaQueryWrapper<FamilyChallenge>()
|
|
|
+ .eq(FamilyChallenge::getFamilyId, familyId)
|
|
|
+ .eq(FamilyChallenge::getStatus, "active")
|
|
|
+ .orderByDesc(FamilyChallenge::getCreatedAt);
|
|
|
+ List<FamilyChallenge> active = familyChallengeMapper.selectList(wrapper);
|
|
|
+
|
|
|
+ fillProgress(active);
|
|
|
+ return active;
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+**Step 5: 验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd cfc-backend && mvn clean compile
|
|
|
+```
|
|
|
+
|
|
|
+Expected: 编译通过
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 3: 前端 API 封装
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Modify: `cfc-frontend/utils/api.js`
|
|
|
+
|
|
|
+**Step 1: 在 `getChallengeList` 附近添加新 API**
|
|
|
+
|
|
|
+```javascript
|
|
|
+export const createChallenge = (data) => request('/api/health/challenge/create', 'POST', data)
|
|
|
+export const updateChallenge = (id, data) => request('/api/health/challenge/update/' + id, 'POST', data)
|
|
|
+export const deleteChallenge = (id) => request('/api/health/challenge/delete/' + id, 'POST', data)
|
|
|
+export const getChallengeTemplates = () => request('/api/health/challenge/templates', 'POST', {})
|
|
|
+```
|
|
|
+
|
|
|
+**Step 2: 验证** — 无编译错误(小程序不直接编译,确认语法正确即可)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 4: 前端 — 创建挑战管理页
|
|
|
+
|
|
|
+**Files:**
|
|
|
+- Create: `cfc-frontend/pages/health/challenge-manage/index.vue`
|
|
|
+- Modify: `cfc-frontend/pages/home-pages/parent-index.vue`
|
|
|
+
|
|
|
+**Step 1: 创建 `challenge-manage/index.vue`**
|
|
|
+
|
|
|
+完整页面代码如下:
|
|
|
+
|
|
|
+```vue
|
|
|
+<template>
|
|
|
+ <view class="challenge-manage-page">
|
|
|
+ <BaseLoading :loading="loading" text="加载中..." />
|
|
|
+
|
|
|
+ <view v-if="!loading" class="page-content">
|
|
|
+ <!-- 模板推荐区 -->
|
|
|
+ <view class="template-section">
|
|
|
+ <view class="section-title-row">
|
|
|
+ <text class="section-title">快速创建</text>
|
|
|
+ <text class="section-hint">选择模板,自定义参数</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="template-scroll" scroll-x>
|
|
|
+ <view class="template-scroll-inner">
|
|
|
+ <view class="template-card" v-for="tpl in templates" :key="tpl.type" @click="createFromTemplate(tpl)">
|
|
|
+ <view class="template-icon">{{ getTemplateEmoji(tpl.type) }}</view>
|
|
|
+ <text class="template-name">{{ tpl.title }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="template-card template-card-custom" @click="createFromTemplate(null)">
|
|
|
+ <view class="template-icon">✏️</view>
|
|
|
+ <text class="template-name">自定义</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 挑战列表 -->
|
|
|
+ <view class="list-section">
|
|
|
+ <view class="section-title-row">
|
|
|
+ <text class="section-title">我的挑战</text>
|
|
|
+ <text class="list-add-btn" @click="openCreateModal(null)">+ 新建</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 进行中 -->
|
|
|
+ <view class="group" v-if="activeChallenges.length > 0">
|
|
|
+ <text class="group-label">进行中</text>
|
|
|
+ <view class="challenge-item" v-for="ch in activeChallenges" :key="ch.id" @click="viewChallenge(ch)">
|
|
|
+ <view class="challenge-item-header">
|
|
|
+ <text class="challenge-item-title">{{ ch.title }}</text>
|
|
|
+ <view class="challenge-item-actions">
|
|
|
+ <text class="action-btn action-edit" @click.stop="openEditModal(ch)">编辑</text>
|
|
|
+ <text class="action-btn action-delete" @click.stop="deleteChallenge(ch.id)">删除</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <text class="challenge-item-desc" v-if="ch.description">{{ ch.description }}</text>
|
|
|
+ <view class="challenge-item-footer">
|
|
|
+ <text class="tag">{{ ch.targetMode === 'aggregate' ? '全家目标' : '每人目标' }}</text>
|
|
|
+ <text class="tag tag-days">{{ ch.durationDays }}天</text>
|
|
|
+ <text class="tag tag-points" v-if="ch.rewardPoints">🏆 +{{ ch.rewardPoints }}分</text>
|
|
|
+ </view>
|
|
|
+ <FamilyChallengeCard :challenge="ch" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已完成 -->
|
|
|
+ <view class="group" v-if="historyChallenges.length > 0">
|
|
|
+ <text class="group-label">已完成</text>
|
|
|
+ <view class="challenge-item" v-for="ch in historyChallenges" :key="ch.id" @click="viewChallenge(ch)">
|
|
|
+ <view class="challenge-item-header">
|
|
|
+ <text class="challenge-item-title">{{ ch.title }}</text>
|
|
|
+ <text class="status-badge status-completed">已完成</text>
|
|
|
+ </view>
|
|
|
+ <text class="challenge-item-desc" v-if="ch.description">{{ ch.description }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty-state" v-if="activeChallenges.length === 0 && historyChallenges.length === 0">
|
|
|
+ <text class="empty-icon">🎯</text>
|
|
|
+ <text class="empty-title">还没有挑战</text>
|
|
|
+ <text class="empty-desc">创建第一个家庭挑战,让全家一起成长!</text>
|
|
|
+ <view class="empty-btn" @click="openCreateModal(null)">立即创建</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 创建/编辑弹窗 -->
|
|
|
+ <view class="modal-overlay" v-if="showModal" @click="closeModal">
|
|
|
+ <view class="modal-content" @click.stop>
|
|
|
+ <view class="modal-header">
|
|
|
+ <text class="modal-title">{{ editMode ? '编辑挑战' : '创建挑战' }}</text>
|
|
|
+ <text class="modal-close" @click="closeModal">×</text>
|
|
|
+ </view>
|
|
|
+ <view class="modal-body">
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">挑战标题 *</text>
|
|
|
+ <input class="form-input" v-model="form.title" placeholder="输入挑战标题" maxlength="50" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">挑战描述</text>
|
|
|
+ <textarea class="form-textarea" v-model="form.description" placeholder="描述挑战内容" maxlength="200" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="form-label">挑战类型</text>
|
|
|
+ <view class="type-picker">
|
|
|
+ <text class="type-item" :class="{ active: form.challengeType === t.type }"
|
|
|
+ v-for="t in templates" :key="t.type"
|
|
|
+ @click="form.challengeType = t.type">{{ t.title }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-row">
|
|
|
+ <view class="form-item" style="flex:1">
|
|
|
+ <text class="form-label">目标模式 *</text>
|
|
|
+ <view class="mode-picker">
|
|
|
+ <text class="mode-item" :class="{ active: form.targetMode === 'aggregate' }"
|
|
|
+ @click="form.targetMode = 'aggregate'">全家合计</text>
|
|
|
+ <text class="mode-item" :class="{ active: form.targetMode === 'all_members' }"
|
|
|
+ @click="form.targetMode = 'all_members'">每人目标</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-item" style="flex:1">
|
|
|
+ <text class="form-label">目标值 *</text>
|
|
|
+ <input class="form-input" type="digit" v-model="form.targetValue" placeholder="如: 300" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-row">
|
|
|
+ <view class="form-item" style="flex:1">
|
|
|
+ <text class="form-label">持续天数</text>
|
|
|
+ <input class="form-input" type="number" v-model="form.durationDays" placeholder="7" />
|
|
|
+ </view>
|
|
|
+ <view class="form-item" style="flex:1">
|
|
|
+ <text class="form-label">奖励积分</text>
|
|
|
+ <input class="form-input" type="number" v-model="form.rewardPoints" placeholder="50" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modal-footer">
|
|
|
+ <view class="modal-btn modal-btn-cancel" @click="closeModal">取消</view>
|
|
|
+ <view class="modal-btn modal-btn-submit" @click="submitForm">{{ editMode ? '保存' : '创建' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getChallengeList, getChallengeHistory, createChallenge, updateChallenge, deleteChallenge, getChallengeTemplates, getParentDashboard } from '../../../utils/api.js'
|
|
|
+import FamilyChallengeCard from '../../../components/FamilyChallengeCard.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { FamilyChallengeCard },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ familyId: null,
|
|
|
+ templates: [],
|
|
|
+ activeChallenges: [],
|
|
|
+ historyChallenges: [],
|
|
|
+ showModal: false,
|
|
|
+ editMode: false,
|
|
|
+ editingId: null,
|
|
|
+ form: {
|
|
|
+ title: '',
|
|
|
+ description: '',
|
|
|
+ challengeType: 'custom',
|
|
|
+ targetMode: 'all_members',
|
|
|
+ targetValue: '7',
|
|
|
+ durationDays: '7',
|
|
|
+ rewardPoints: '50'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.loadFamilyId()
|
|
|
+ this.loadData()
|
|
|
+ this.loadTemplates()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.familyId) {
|
|
|
+ this.loadData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadFamilyId: function() {
|
|
|
+ var self = this
|
|
|
+ try {
|
|
|
+ var dashPromise = getParentDashboard()
|
|
|
+ dashPromise.then(function(res) {
|
|
|
+ var data = res.data || {}
|
|
|
+ if (data.familyId) {
|
|
|
+ self.familyId = data.familyId
|
|
|
+ }
|
|
|
+ }).catch(function() {})
|
|
|
+ } catch (e) {
|
|
|
+ console.log('获取familyId失败', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loadData: function() {
|
|
|
+ var self = this
|
|
|
+ if (!self.familyId) return
|
|
|
+ self.loading = true
|
|
|
+ Promise.all([
|
|
|
+ getChallengeList({ familyId: self.familyId }),
|
|
|
+ getChallengeHistory({ familyId: self.familyId })
|
|
|
+ ]).then(function(results) {
|
|
|
+ self.activeChallenges = Array.isArray(results[0].data) ? results[0].data : []
|
|
|
+ self.historyChallenges = Array.isArray(results[1].data) ? results[1].data : []
|
|
|
+ }).catch(function() {
|
|
|
+ self.activeChallenges = []
|
|
|
+ self.historyChallenges = []
|
|
|
+ }).finally(function() {
|
|
|
+ self.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loadTemplates: function() {
|
|
|
+ var self = this
|
|
|
+ getChallengeTemplates().then(function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ self.templates = res.data || []
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ // 降级:使用硬编码模板
|
|
|
+ self.templates = [
|
|
|
+ { type: 'full_checkin', title: '全员打卡', targetMode: 'all_members', targetValue: '3', durationDays: '3', rewardPoints: '50', description: '全家连续打卡' },
|
|
|
+ { type: 'sports', title: '运动PK', targetMode: 'aggregate', targetValue: '300', durationDays: '7', rewardPoints: '100', description: '全家运动时长' },
|
|
|
+ { type: 'reading', title: '阅读挑战', targetMode: 'aggregate', targetValue: '200', durationDays: '7', rewardPoints: '80', description: '全家阅读时长' },
|
|
|
+ { type: 'gratitude', title: '感恩日记', targetMode: 'all_members', targetValue: '7', durationDays: '7', rewardPoints: '40', description: '每天感恩记录' }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTemplateEmoji: function(type) {
|
|
|
+ var map = {
|
|
|
+ full_checkin: '✅',
|
|
|
+ sports: '🏃',
|
|
|
+ health_week: '💚',
|
|
|
+ reading: '📚',
|
|
|
+ no_screen: '📵',
|
|
|
+ gratitude: '🙏',
|
|
|
+ custom: '✏️'
|
|
|
+ }
|
|
|
+ return map[type] || '🎯'
|
|
|
+ },
|
|
|
+ createFromTemplate: function(template) {
|
|
|
+ this.editMode = false
|
|
|
+ this.editingId = null
|
|
|
+ this.form = {
|
|
|
+ title: template ? template.title : '',
|
|
|
+ description: template ? template.description : '',
|
|
|
+ challengeType: template ? template.type : 'custom',
|
|
|
+ targetMode: template ? template.targetMode : 'all_members',
|
|
|
+ targetValue: template ? String(template.targetValue) : '7',
|
|
|
+ durationDays: template ? String(template.durationDays) : '7',
|
|
|
+ rewardPoints: template ? String(template.rewardPoints) : '50'
|
|
|
+ }
|
|
|
+ this.showModal = true
|
|
|
+ },
|
|
|
+ openCreateModal: function(template) {
|
|
|
+ this.createFromTemplate(template)
|
|
|
+ },
|
|
|
+ openEditModal: function(challenge) {
|
|
|
+ this.editMode = true
|
|
|
+ this.editingId = challenge.id
|
|
|
+ this.form = {
|
|
|
+ title: challenge.title || '',
|
|
|
+ description: challenge.description || '',
|
|
|
+ challengeType: challenge.challengeType || 'custom',
|
|
|
+ targetMode: challenge.targetMode || 'all_members',
|
|
|
+ targetValue: String(challenge.targetValue || '7'),
|
|
|
+ durationDays: String(challenge.durationDays || '7'),
|
|
|
+ rewardPoints: String(challenge.rewardPoints || '50')
|
|
|
+ }
|
|
|
+ this.showModal = true
|
|
|
+ },
|
|
|
+ closeModal: function() {
|
|
|
+ this.showModal = false
|
|
|
+ },
|
|
|
+ submitForm: function() {
|
|
|
+ var self = this
|
|
|
+ var title = self.form.title && self.form.title.trim()
|
|
|
+ if (!title) {
|
|
|
+ uni.showToast({ title: '请填写挑战标题', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var targetValue = parseInt(self.form.targetValue || '0', 10)
|
|
|
+ if (targetValue <= 0) {
|
|
|
+ uni.showToast({ title: '目标值必须大于0', icon: 'none' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var data = {
|
|
|
+ title: title,
|
|
|
+ description: self.form.description && self.form.description.trim(),
|
|
|
+ challengeType: self.form.challengeType,
|
|
|
+ targetMode: self.form.targetMode,
|
|
|
+ targetValue: targetValue,
|
|
|
+ durationDays: parseInt(self.form.durationDays || '7', 10),
|
|
|
+ rewardPoints: parseInt(self.form.rewardPoints || '0', 10)
|
|
|
+ }
|
|
|
+ self.loading = true
|
|
|
+ var promise
|
|
|
+ if (self.editMode && self.editingId) {
|
|
|
+ promise = updateChallenge(self.editingId, data)
|
|
|
+ } else {
|
|
|
+ promise = createChallenge(data)
|
|
|
+ }
|
|
|
+ promise.then(function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ var msg = self.editMode ? '更新成功' : '创建成功'
|
|
|
+ uni.showToast({ title: msg, icon: 'success' })
|
|
|
+ self.closeModal()
|
|
|
+ self.loadData()
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: res.message || '操作失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ }).catch(function(e) {
|
|
|
+ uni.showToast({ title: '操作失败', icon: 'none' })
|
|
|
+ console.log('挑战操作失败', e)
|
|
|
+ }).finally(function() {
|
|
|
+ self.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteChallenge: function(id) {
|
|
|
+ var self = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '确认删除',
|
|
|
+ content: '确定要取消这个挑战吗?',
|
|
|
+ success: function(r) {
|
|
|
+ if (r.confirm) {
|
|
|
+ deleteChallenge(id).then(function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.showToast({ title: '已删除', icon: 'success' })
|
|
|
+ self.loadData()
|
|
|
+ } else {
|
|
|
+ uni.showToast({ title: res.message || '删除失败', icon: 'none' })
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ uni.showToast({ title: '删除失败', icon: 'none' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ viewChallenge: function(challenge) {
|
|
|
+ // 跳转到挑战详情页(后续扩展)
|
|
|
+ uni.showToast({ title: challenge.title, icon: 'none' })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.challenge-manage-page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F5F9FC;
|
|
|
+ padding: 20rpx 24rpx 40rpx;
|
|
|
+}
|
|
|
+.page-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 模板推荐区 */
|
|
|
+.template-section {
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+.section-title-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+}
|
|
|
+.section-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.section-hint {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+}
|
|
|
+.template-scroll {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.template-scroll-inner {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+.template-card {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 130rpx;
|
|
|
+ padding: 16rpx 12rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6rpx;
|
|
|
+}
|
|
|
+.template-card:active { opacity: 0.8; }
|
|
|
+.template-card-custom {
|
|
|
+ background: linear-gradient(135deg, #10B981, #34D399);
|
|
|
+}
|
|
|
+.template-icon {
|
|
|
+ font-size: 40rpx;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.template-name {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #475569;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.template-card-custom .template-name {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 列表区 */
|
|
|
+.list-section {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.list-add-btn {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #10B981;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.list-add-btn:active { opacity: 0.7; }
|
|
|
+
|
|
|
+.group {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.group-label {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #64748B;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+.challenge-item {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
|
|
|
+}
|
|
|
+.challenge-item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+.challenge-item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.challenge-item-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+.action-btn {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 4rpx 12rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+.action-edit {
|
|
|
+ color: #5B9BD5;
|
|
|
+ background: rgba(91,155,213,0.1);
|
|
|
+}
|
|
|
+.action-delete {
|
|
|
+ color: #EF4444;
|
|
|
+ background: rgba(239,68,68,0.1);
|
|
|
+}
|
|
|
+.challenge-item-desc {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #64748B;
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+}
|
|
|
+.challenge-item-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 8rpx;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+.tag {
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ background: #E2E8F0;
|
|
|
+ color: #475569;
|
|
|
+}
|
|
|
+.tag-days { background: #DBEAFE; color: #2563EB; }
|
|
|
+.tag-points { background: #FEF3C7; color: #D97706; }
|
|
|
+.status-badge {
|
|
|
+ font-size: 20rpx;
|
|
|
+ padding: 2rpx 10rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+}
|
|
|
+.status-completed {
|
|
|
+ background: #F1F5F9;
|
|
|
+ color: #64748B;
|
|
|
+}
|
|
|
+
|
|
|
+/* 空状态 */
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 60rpx 0 20rpx;
|
|
|
+}
|
|
|
+.empty-icon { font-size: 80rpx; margin-bottom: 16rpx; }
|
|
|
+.empty-title { font-size: 32rpx; font-weight: 700; color: #1E293B; }
|
|
|
+.empty-desc { font-size: 24rpx; color: #94A3B8; margin: 8rpx 0 24rpx; }
|
|
|
+.empty-btn {
|
|
|
+ background: #10B981;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 16rpx 40rpx;
|
|
|
+ border-radius: 44rpx;
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹窗 */
|
|
|
+.modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+.modal-content {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 32rpx 32rpx 0 0;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.modal-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.modal-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.modal-close {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #94A3B8;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+.modal-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ max-height: 70vh;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.form-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 6rpx;
|
|
|
+}
|
|
|
+.form-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #475569;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.form-input {
|
|
|
+ background: #F8FAFC;
|
|
|
+ border: 1rpx solid #E2E8F0;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 14rpx 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.form-textarea {
|
|
|
+ background: #F8FAFC;
|
|
|
+ border: 1rpx solid #E2E8F0;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 14rpx 16rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #1E293B;
|
|
|
+ height: 80rpx;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.form-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+.type-picker {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8rpx;
|
|
|
+}
|
|
|
+.type-item {
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 6rpx 14rpx;
|
|
|
+ border-radius: 999rpx;
|
|
|
+ background: #F1F5F9;
|
|
|
+ color: #475569;
|
|
|
+}
|
|
|
+.type-item.active {
|
|
|
+ background: #10B981;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.mode-picker {
|
|
|
+ display: flex;
|
|
|
+ gap: 8rpx;
|
|
|
+}
|
|
|
+.mode-item {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #F1F5F9;
|
|
|
+ color: #475569;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.mode-item.active {
|
|
|
+ background: #10B981;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+.modal-btn {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.modal-btn-cancel {
|
|
|
+ background: #F1F5F9;
|
|
|
+ color: #64748B;
|
|
|
+}
|
|
|
+.modal-btn-submit {
|
|
|
+ background: #10B981;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
|
|
+```
|
|
|
+
|
|
|
+**Step 2: 修改 parent-index.vue 添加挑战管理入口**
|
|
|
+
|
|
|
+在 `parent-index.vue` 的挑战区域(约第 40-44 行),将:
|
|
|
+
|
|
|
+```vue
|
|
|
+<!-- ===== 家庭挑战卡片(P2-2,仅展示,任务在各人任务列表中完成) ===== -->
|
|
|
+<FamilyChallengeCard
|
|
|
+ v-for="ch in activeChallenges"
|
|
|
+ :key="ch.id"
|
|
|
+ :challenge="ch" />
|
|
|
+```
|
|
|
+
|
|
|
+替换为:
|
|
|
+
|
|
|
+```vue
|
|
|
+<!-- ===== 家庭挑战区域 ===== -->
|
|
|
+<view class="challenge-section">
|
|
|
+ <view class="challenge-section-header" @click="goToChallengeManage">
|
|
|
+ <text class="challenge-section-title">家庭挑战</text>
|
|
|
+ <text class="challenge-section-action">管理 →</text>
|
|
|
+ </view>
|
|
|
+ <FamilyChallengeCard
|
|
|
+ v-for="ch in activeChallenges"
|
|
|
+ :key="ch.id"
|
|
|
+ :challenge="ch" />
|
|
|
+</view>
|
|
|
+```
|
|
|
+
|
|
|
+在 `methods` 中添加:
|
|
|
+
|
|
|
+```javascript
|
|
|
+ goToChallengeManage: function() {
|
|
|
+ uni.navigateTo({ url: '/pages/health/challenge-manage' })
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+添加样式(在 `<style scoped>` 内):
|
|
|
+
|
|
|
+```css
|
|
|
+.challenge-section {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+.challenge-section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 20rpx 12rpx;
|
|
|
+}
|
|
|
+.challenge-section-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1E293B;
|
|
|
+}
|
|
|
+.challenge-section-action {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #10B981;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.challenge-section-action:active { opacity: 0.7; }
|
|
|
+```
|
|
|
+
|
|
|
+**Step 3: 在 pages.json 注册新页面**
|
|
|
+
|
|
|
+在 `pages/health` 的 `pages` 数组末尾添加:
|
|
|
+
|
|
|
+```json
|
|
|
+{
|
|
|
+ "path": "challenge-manage",
|
|
|
+ "style": {
|
|
|
+ "navigationBarTitleText": "家庭挑战"
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**Step 4: 验证**
|
|
|
+
|
|
|
+确认 `parent-index.vue` 中 `goToChallengeManage` 方法已添加且无语法错误。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 5: 后端 + 前端联调
|
|
|
+
|
|
|
+**Step 1: 后端编译验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd cfc-backend && mvn clean compile
|
|
|
+```
|
|
|
+
|
|
|
+**Step 2: 前端构建验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd cfc-frontend && npm run build:mp-weixin
|
|
|
+```
|
|
|
+
|
|
|
+**Step 3: 功能验证清单**
|
|
|
+
|
|
|
+- [ ] 后端 `POST /api/health/challenge/templates` 返回模板列表
|
|
|
+- [ ] 后端 `POST /api/health/challenge/create` 创建成功
|
|
|
+- [ ] 后端 `POST /api/health/challenge/update/{id}` 更新成功
|
|
|
+- [ ] 后端 `POST /api/health/challenge/delete/{id}` 取消挑战
|
|
|
+- [ ] 后端 `POST /api/health/challenge/list` 返回自定义挑战列表
|
|
|
+- [ ] 前端管理页展示进行中/已完成分组
|
|
|
+- [ ] 前端模板快速创建功能正常
|
|
|
+- [ ] 前端编辑/删除功能正常
|
|
|
+- [ ] 前端 parent-index 挑战管理入口可点击跳转
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### Task 6: 自审查与清理
|
|
|
+
|
|
|
+**Step 1: 代码审查**
|
|
|
+
|
|
|
+- [ ] `FamilyChallengeController` 所有接口均为 `@PostMapping`
|
|
|
+- [ ] `FamilyChallengeController` 中所有需 familyId 的接口通过 userService 获取(或 interceptor 注入)
|
|
|
+- [ ] `getActiveChallenges` 不再自动创建模板
|
|
|
+- [ ] 前端页面使用 Vue 2 Options API,无可选链语法
|
|
|
+- [ ] 前端弹窗 `:key` 使用 `tpl.type` 而非表达式
|
|
|
+- [ ] 所有日期解析使用 `parseDate()` 而非 `new Date(string)`
|
|
|
+
|
|
|
+**Step 2: 确认无多余改动**
|
|
|
+
|
|
|
+- [ ] 仅修改了计划中的文件
|
|
|
+- [ ] 无未使用的 import
|
|
|
+
|
|
|
+**Step 3: 最终验证**
|
|
|
+
|
|
|
+```bash
|
|
|
+cd cfc-backend && mvn clean compile
|
|
|
+```
|