index.vue
3.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!--
* @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="handleComplete"
>
完成
</nut-button>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useLoad } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import NavHeader from '@/components/navigation/NavHeader.vue'
// 接收页面参数
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)
}
})
/**
* 完成 - 返回上一页
* @description 因为入口可能来自多个页面（产品详情、计划书等），
* 所以统一返回上一页而不是跳转到首页
*/
const handleComplete = () => {
Taro.navigateBack({
delta: 1
})
}
</script>
<style lang="less" scoped>
/* NutUI 按钮样式覆盖 */
:deep(.nut-button) {
border-radius: 9999rpx;
font-size: 32rpx;
font-weight: 500;
}
</style>