hookehuyr

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>
## [2026-01-31] - 实现计划书提交跳转功能
### 新增
- 创建计划书提交结果页面 (`pages/plan-submit-result/`)
- 使用 NavHeader 组件作为页面头部
- 显示提交成功/失败状态(图标 + 文案)
- 根据结果显示不同的提示信息
- 成功:固定文案"您的计划书申请已成功提交,为您制定专属保险方案正在规划中,请耐心等待!"
- 失败:显示接口返回的错误信息
- 底部"返回首页"按钮,点击跳转到首页
- 通过路由参数传递 `success``message` 参数
### 修改
- 首页 (`pages/index/index.vue`)
- 修改 `handlePlanSubmit` 函数,实现简单的带参跳转
- SchemeA 和 SchemeB 提交后跳转到结果页面
- 暂时模拟成功状态(待后续接入真实API)
---
**详细信息**
- **影响文件**: src/pages/plan-submit-result/index.vue, src/pages/plan-submit-result/index.config.js, src/pages/index/index.vue, src/app.config.js
- **技术栈**: Vue 3, Taro 4, Composition API
- **测试状态**: 未测试
- **备注**:
- 页面已注册到 app.config.js
- 使用 TailwindCSS 进行样式设计
- 支持成功/失败两种状态展示
- 后续需要接入真实API替换模拟跳转
---
## [2026-01-31] - 提取分组列表页面 Composable
### 重构
......
......@@ -20,6 +20,7 @@ const pages = [
'pages/signing/index',
'pages/mine/index',
'pages/plan/index',
'pages/plan-submit-result/index',
'pages/favorites/index',
'pages/avatar/index',
'pages/feedback/index',
......
......@@ -207,12 +207,21 @@ const openPlanPopup = (scheme) => {
showPlanPopup.value = true;
};
/**
* 处理计划书提交
* @description 模拟提交计划书,跳转到结果页面
* @param {Object} formData - 表单数据
*/
const handlePlanSubmit = (formData) => {
console.log(`方案${currentScheme.value}提交:`, formData);
// 关闭弹窗
showPlanPopup.value = false;
Taro.showToast({
title: '提交成功',
icon: 'success'
// 模拟提交成功,跳转到结果页面
// TODO: 后续接入真实API
go('/pages/plan-submit-result/index', {
success: 'true'
});
};
......
/*
* @Date: 2026-01-30 15:21:50
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-31 16:37:22
* @FilePath: /manulife-weapp/src/pages/material-list/index.config.js
* @Description: 资料列表页面配置
*/
export default {
navigationBarTitleText: '资料列表',
enablePullDownRefresh: true,
......
export default {
navigationBarTitleText: '提交结果',
navigationBarBackgroundColor: '#1E3A8A',
navigationBarTextStyle: 'white',
navigationStyle: 'custom'
}
<!--
* @Date: 2026-01-31
* @Description: 计划书提交结果页
-->
<template>
<div class="min-h-screen bg-[#F9FAFB] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
<!-- Navigation Header -->
<NavHeader title="提交结果" />
<!-- 结果内容 -->
<div class="flex flex-col items-center px-[32rpx] pt-[120rpx]">
<!-- 图标和状态 -->
<div class="flex flex-col items-center mb-[60rpx]">
<!-- 成功图标 -->
<div v-if="isSuccess" class="w-[160rpx] h-[160rpx] rounded-full bg-green-100 flex items-center justify-center mb-[32rpx]">
<div class="w-[100rpx] h-[100rpx] rounded-full bg-green-500 flex items-center justify-center">
<text class="text-white text-[60rpx] font-bold">✓</text>
</div>
</div>
<!-- 失败图标 -->
<div v-else class="w-[160rpx] h-[160rpx] rounded-full bg-red-100 flex items-center justify-center mb-[32rpx]">
<div class="w-[100rpx] h-[100rpx] rounded-full bg-red-500 flex items-center justify-center">
<text class="text-white text-[60rpx] font-bold">✕</text>
</div>
</div>
<!-- 状态文案 -->
<text class="text-[#1F2937] text-[40rpx] font-bold">
{{ isSuccess ? '提交成功' : '提交失败' }}
</text>
</div>
<!-- 提示语 -->
<div class="w-full bg-white rounded-[24rpx] p-[40rpx] shadow-sm text-center">
<text class="text-[#6B7280] text-[28rpx] leading-[1.6] whitespace-pre-wrap">
{{ message }}
</text>
</div>
</div>
<!-- 返回首页按钮 - 固定在底部 -->
<div class="fixed bottom-0 left-0 right-0 bg-white px-[32rpx] py-[24rpx] pb-[calc(24rpx+env(safe-area-inset-bottom))]">
<nut-button
type="primary"
block
class="!h-[88rpx]"
@click="goHome"
>
返回首页
</nut-button>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/NavHeader.vue'
import { useGo } from '@/hooks/useGo'
const go = useGo()
// 接收页面参数
const success = ref(true)
const errorMessage = ref('')
// 是否成功
const isSuccess = computed(() => success.value)
// 提示信息
const message = computed(() => {
if (isSuccess.value) {
return '您的计划书申请已成功提交,\n为您制定专属保险方案正在规划中,\n请耐心等待!'
} else {
return errorMessage.value || '提交失败,请稍后重试'
}
})
useLoad((options) => {
console.log('页面参数:', options)
// 从路由参数中获取成功/失败状态
if (options.success !== undefined) {
success.value = options.success === 'true'
}
// 失败时获取错误信息
if (!success.value && options.message) {
errorMessage.value = decodeURIComponent(options.message)
}
})
// 返回首页
const goHome = () => {
go('/pages/index/index')
}
</script>
<style lang="less" scoped>
/* NutUI 按钮样式覆盖 */
:deep(.nut-button) {
border-radius: 9999rpx;
font-size: 32rpx;
font-weight: 500;
}
</style>