feat: 新增计划书提交结果页并实现跳转功能
新增功能: - 创建计划书提交结果页面 (pages/plan-submit-result/) - 使用 NavHeader 组件作为页面头部 - 显示提交成功/失败状态(图标 + 文案) - 成功时显示固定提示文案 - 失败时显示接口返回的错误信息 - 底部"返回首页"按钮固定在页面底部 - 通过路由参数传递 success 和 message 参数 修改内容: - 首页实现计划书提交跳转 - SchemeA 和 SchemeB 提交后跳转到结果页面 - 暂时模拟成功状态(待后续接入真实API) - 注册新页面路由到 app.config.js - 更新 CHANGELOG 记录变更 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
6 changed files
with
165 additions
and
3 deletions
| 1 | +## [2026-01-31] - 实现计划书提交跳转功能 | ||
| 2 | + | ||
| 3 | +### 新增 | ||
| 4 | +- 创建计划书提交结果页面 (`pages/plan-submit-result/`) | ||
| 5 | + - 使用 NavHeader 组件作为页面头部 | ||
| 6 | + - 显示提交成功/失败状态(图标 + 文案) | ||
| 7 | + - 根据结果显示不同的提示信息 | ||
| 8 | + - 成功:固定文案"您的计划书申请已成功提交,为您制定专属保险方案正在规划中,请耐心等待!" | ||
| 9 | + - 失败:显示接口返回的错误信息 | ||
| 10 | + - 底部"返回首页"按钮,点击跳转到首页 | ||
| 11 | + - 通过路由参数传递 `success` 和 `message` 参数 | ||
| 12 | + | ||
| 13 | +### 修改 | ||
| 14 | +- 首页 (`pages/index/index.vue`) | ||
| 15 | + - 修改 `handlePlanSubmit` 函数,实现简单的带参跳转 | ||
| 16 | + - SchemeA 和 SchemeB 提交后跳转到结果页面 | ||
| 17 | + - 暂时模拟成功状态(待后续接入真实API) | ||
| 18 | + | ||
| 19 | +--- | ||
| 20 | + | ||
| 21 | +**详细信息**: | ||
| 22 | +- **影响文件**: src/pages/plan-submit-result/index.vue, src/pages/plan-submit-result/index.config.js, src/pages/index/index.vue, src/app.config.js | ||
| 23 | +- **技术栈**: Vue 3, Taro 4, Composition API | ||
| 24 | +- **测试状态**: 未测试 | ||
| 25 | +- **备注**: | ||
| 26 | + - 页面已注册到 app.config.js | ||
| 27 | + - 使用 TailwindCSS 进行样式设计 | ||
| 28 | + - 支持成功/失败两种状态展示 | ||
| 29 | + - 后续需要接入真实API替换模拟跳转 | ||
| 30 | + | ||
| 31 | +--- | ||
| 32 | + | ||
| 1 | ## [2026-01-31] - 提取分组列表页面 Composable | 33 | ## [2026-01-31] - 提取分组列表页面 Composable |
| 2 | 34 | ||
| 3 | ### 重构 | 35 | ### 重构 | ... | ... |
| ... | @@ -20,6 +20,7 @@ const pages = [ | ... | @@ -20,6 +20,7 @@ const pages = [ |
| 20 | 'pages/signing/index', | 20 | 'pages/signing/index', |
| 21 | 'pages/mine/index', | 21 | 'pages/mine/index', |
| 22 | 'pages/plan/index', | 22 | 'pages/plan/index', |
| 23 | + 'pages/plan-submit-result/index', | ||
| 23 | 'pages/favorites/index', | 24 | 'pages/favorites/index', |
| 24 | 'pages/avatar/index', | 25 | 'pages/avatar/index', |
| 25 | 'pages/feedback/index', | 26 | 'pages/feedback/index', | ... | ... |
| ... | @@ -207,12 +207,21 @@ const openPlanPopup = (scheme) => { | ... | @@ -207,12 +207,21 @@ const openPlanPopup = (scheme) => { |
| 207 | showPlanPopup.value = true; | 207 | showPlanPopup.value = true; |
| 208 | }; | 208 | }; |
| 209 | 209 | ||
| 210 | +/** | ||
| 211 | + * 处理计划书提交 | ||
| 212 | + * @description 模拟提交计划书,跳转到结果页面 | ||
| 213 | + * @param {Object} formData - 表单数据 | ||
| 214 | + */ | ||
| 210 | const handlePlanSubmit = (formData) => { | 215 | const handlePlanSubmit = (formData) => { |
| 211 | console.log(`方案${currentScheme.value}提交:`, formData); | 216 | console.log(`方案${currentScheme.value}提交:`, formData); |
| 217 | + | ||
| 218 | + // 关闭弹窗 | ||
| 212 | showPlanPopup.value = false; | 219 | showPlanPopup.value = false; |
| 213 | - Taro.showToast({ | 220 | + |
| 214 | - title: '提交成功', | 221 | + // 模拟提交成功,跳转到结果页面 |
| 215 | - icon: 'success' | 222 | + // TODO: 后续接入真实API |
| 223 | + go('/pages/plan-submit-result/index', { | ||
| 224 | + success: 'true' | ||
| 216 | }); | 225 | }); |
| 217 | }; | 226 | }; |
| 218 | 227 | ... | ... |
| 1 | +/* | ||
| 2 | + * @Date: 2026-01-30 15:21:50 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2026-01-31 16:37:22 | ||
| 5 | + * @FilePath: /manulife-weapp/src/pages/material-list/index.config.js | ||
| 6 | + * @Description: 资料列表页面配置 | ||
| 7 | + */ | ||
| 1 | export default { | 8 | export default { |
| 2 | navigationBarTitleText: '资料列表', | 9 | navigationBarTitleText: '资料列表', |
| 3 | enablePullDownRefresh: true, | 10 | enablePullDownRefresh: true, | ... | ... |
src/pages/plan-submit-result/index.config.js
0 → 100644
src/pages/plan-submit-result/index.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + * @Date: 2026-01-31 | ||
| 3 | + * @Description: 计划书提交结果页 | ||
| 4 | +--> | ||
| 5 | +<template> | ||
| 6 | + <div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]"> | ||
| 7 | + <!-- Navigation Header --> | ||
| 8 | + <NavHeader title="提交结果" /> | ||
| 9 | + | ||
| 10 | + <!-- 结果内容 --> | ||
| 11 | + <div class="flex flex-col items-center px-[32rpx] pt-[120rpx]"> | ||
| 12 | + <!-- 图标和状态 --> | ||
| 13 | + <div class="flex flex-col items-center mb-[60rpx]"> | ||
| 14 | + <!-- 成功图标 --> | ||
| 15 | + <div v-if="isSuccess" class="w-[160rpx] h-[160rpx] rounded-full bg-green-100 flex items-center justify-center mb-[32rpx]"> | ||
| 16 | + <div class="w-[100rpx] h-[100rpx] rounded-full bg-green-500 flex items-center justify-center"> | ||
| 17 | + <text class="text-white text-[60rpx] font-bold">✓</text> | ||
| 18 | + </div> | ||
| 19 | + </div> | ||
| 20 | + | ||
| 21 | + <!-- 失败图标 --> | ||
| 22 | + <div v-else class="w-[160rpx] h-[160rpx] rounded-full bg-red-100 flex items-center justify-center mb-[32rpx]"> | ||
| 23 | + <div class="w-[100rpx] h-[100rpx] rounded-full bg-red-500 flex items-center justify-center"> | ||
| 24 | + <text class="text-white text-[60rpx] font-bold">✕</text> | ||
| 25 | + </div> | ||
| 26 | + </div> | ||
| 27 | + | ||
| 28 | + <!-- 状态文案 --> | ||
| 29 | + <text class="text-[#1F2937] text-[40rpx] font-bold"> | ||
| 30 | + {{ isSuccess ? '提交成功' : '提交失败' }} | ||
| 31 | + </text> | ||
| 32 | + </div> | ||
| 33 | + | ||
| 34 | + <!-- 提示语 --> | ||
| 35 | + <div class="w-full bg-white rounded-[24rpx] p-[40rpx] shadow-sm text-center"> | ||
| 36 | + <text class="text-[#6B7280] text-[28rpx] leading-[1.6] whitespace-pre-wrap"> | ||
| 37 | + {{ message }} | ||
| 38 | + </text> | ||
| 39 | + </div> | ||
| 40 | + </div> | ||
| 41 | + | ||
| 42 | + <!-- 返回首页按钮 - 固定在底部 --> | ||
| 43 | + <div class="fixed bottom-0 left-0 right-0 bg-white px-[32rpx] py-[24rpx] pb-[calc(24rpx+env(safe-area-inset-bottom))]"> | ||
| 44 | + <nut-button | ||
| 45 | + type="primary" | ||
| 46 | + block | ||
| 47 | + class="!h-[88rpx]" | ||
| 48 | + @click="goHome" | ||
| 49 | + > | ||
| 50 | + 返回首页 | ||
| 51 | + </nut-button> | ||
| 52 | + </div> | ||
| 53 | + </div> | ||
| 54 | +</template> | ||
| 55 | + | ||
| 56 | +<script setup> | ||
| 57 | +import { ref, computed } from 'vue' | ||
| 58 | +import { useLoad } from '@tarojs/taro' | ||
| 59 | +import NavHeader from '@/components/NavHeader.vue' | ||
| 60 | +import { useGo } from '@/hooks/useGo' | ||
| 61 | + | ||
| 62 | +const go = useGo() | ||
| 63 | + | ||
| 64 | +// 接收页面参数 | ||
| 65 | +const success = ref(true) | ||
| 66 | +const errorMessage = ref('') | ||
| 67 | + | ||
| 68 | +// 是否成功 | ||
| 69 | +const isSuccess = computed(() => success.value) | ||
| 70 | + | ||
| 71 | +// 提示信息 | ||
| 72 | +const message = computed(() => { | ||
| 73 | + if (isSuccess.value) { | ||
| 74 | + return '您的计划书申请已成功提交,\n为您制定专属保险方案正在规划中,\n请耐心等待!' | ||
| 75 | + } else { | ||
| 76 | + return errorMessage.value || '提交失败,请稍后重试' | ||
| 77 | + } | ||
| 78 | +}) | ||
| 79 | + | ||
| 80 | +useLoad((options) => { | ||
| 81 | + console.log('页面参数:', options) | ||
| 82 | + | ||
| 83 | + // 从路由参数中获取成功/失败状态 | ||
| 84 | + if (options.success !== undefined) { | ||
| 85 | + success.value = options.success === 'true' | ||
| 86 | + } | ||
| 87 | + | ||
| 88 | + // 失败时获取错误信息 | ||
| 89 | + if (!success.value && options.message) { | ||
| 90 | + errorMessage.value = decodeURIComponent(options.message) | ||
| 91 | + } | ||
| 92 | +}) | ||
| 93 | + | ||
| 94 | +// 返回首页 | ||
| 95 | +const goHome = () => { | ||
| 96 | + go('/pages/index/index') | ||
| 97 | +} | ||
| 98 | +</script> | ||
| 99 | + | ||
| 100 | +<style lang="less" scoped> | ||
| 101 | +/* NutUI 按钮样式覆盖 */ | ||
| 102 | +:deep(.nut-button) { | ||
| 103 | + border-radius: 9999rpx; | ||
| 104 | + font-size: 32rpx; | ||
| 105 | + font-weight: 500; | ||
| 106 | +} | ||
| 107 | +</style> |
-
Please register or login to post a comment