index.vue
12.2 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<template>
<view class="relative w-full min-h-screen overflow-y-auto overflow-x-hidden bg-[#F9FAFB] pb-[200rpx]">
<!-- Header Section -->
<view class="absolute left-0 top-0 w-full h-[544rpx] z-0">
<image class="w-full h-full" src="https://picsum.photos/seed/header/750/544" mode="aspectFill" />
<view class="absolute inset-0 bg-gradient-to-b from-blue-600/80 to-transparent"></view>
</view>
<view class="relative z-10 px-[32rpx] pt-[180rpx]">
<text class="block text-white text-[44rpx] font-bold mb-[40rpx] text-center">臻奇智荟圈</text>
<!-- Search Bar -->
<view
class="flex items-center w-full h-[88rpx] bg-white/20 backdrop-blur-md rounded-full px-[32rpx] border border-white/30"
@tap="go('/pages/search/index')"
>
<IconFont name="search" class="text-white/80 mr-[16rpx]" size="18" />
<text class="text-white/80 text-[28rpx]">搜索培训资料、案例...</text>
</view>
</view>
<!-- Main Content -->
<view class="relative z-10 mt-[40rpx] px-[24rpx]">
<!-- Grid Icons -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[40rpx] mb-[24rpx]">
<view class="flex flex-wrap">
<view
class="flex flex-col items-center w-1/3 mb-[40rpx]"
v-for="(item, index) in loopData0"
:key="index"
@tap="handleGridNav(item)"
>
<view class="w-[88rpx] h-[88rpx] rounded-[24rpx] bg-blue-50 flex items-center justify-center mb-[16rpx]">
<IconFont :name="item.icon" class="text-blue-600" size="24" />
</view>
<text class="text-gray-800 text-[26rpx]">{{ item.lanhutext0 }}</text>
</view>
</view>
</view>
<!-- Hot Products -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[24rpx]">
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">热卖产品</text>
<view class="flex items-center text-blue-600" @tap="go('/pages/knowledge-base/index')">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<IconFont name="rectRight" size="12" />
</view>
</view>
<!-- Product Card 1 -->
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx] mb-[24rpx]">
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">家庭财富传承保障计划（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率3.5%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">5年超值</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">保证收益万能</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button
plain
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
@tap="goToProductDetail(1)"
>
产品详情
</nut-button>
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="openPlanPopup('A')"
>
计划书
</nut-button>
</view>
</view>
<!-- Product Card 2 -->
<view class="bg-gray-50 rounded-[24rpx] p-[28rpx]">
<text class="block text-gray-800 text-[28rpx] font-medium mb-[20rpx]">儿童教育金储备方案（分红）</text>
<view class="flex flex-wrap gap-[12rpx] mb-[24rpx]">
<view class="bg-red-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-red-600 text-[22rpx]">收益率4.2%</text>
</view>
<view class="bg-orange-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-orange-600 text-[22rpx]">10年期</text>
</view>
<view class="bg-green-50 rounded-[8rpx] px-[16rpx] py-[6rpx]">
<text class="text-green-600 text-[22rpx]">教育专属</text>
</view>
</view>
<view class="flex justify-between gap-[24rpx]">
<nut-button
plain
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0 !border-blue-600"
@tap="goToProductDetail(2)"
>
产品资料
</nut-button>
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="openPlanPopup('B')"
>
计划书
</nut-button>
</view>
</view>
</view>
<!-- Hot Materials -->
<view class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[48rpx]">
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
<view class="flex items-center text-blue-600" @tap="go('/pages/material-list/index')">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<IconFont name="rectRight" size="12" />
</view>
</view>
<!-- Material List -->
<view class="flex flex-col gap-[32rpx]">
<!-- Item 1 -->
<view class="flex gap-[24rpx]" @tap="handleMaterialClick(hotMaterials[0])">
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<IconFont name="order" size="32" color="#EF4444" />
</view>
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">{{ hotMaterials[0].title }}</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">{{ hotMaterials[0].learners }}</text>
<text class="text-blue-600 text-[26rpx]">{{ hotMaterials[0].progress }}</text>
</view>
</view>
</view>
<view class="h-[2rpx] bg-gray-100"></view>
<!-- Item 2 -->
<view class="flex gap-[24rpx]" @tap="handleMaterialClick(hotMaterials[1])">
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<IconFont name="order" size="32" color="#3B82F6" />
</view>
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">{{ hotMaterials[1].title }}</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">{{ hotMaterials[1].learners }}</text>
<text class="text-blue-600 text-[26rpx]">{{ hotMaterials[1].progress }}</text>
</view>
</view>
</view>
<view class="h-[2rpx] bg-gray-100"></view>
<!-- Item 3 -->
<view class="flex gap-[24rpx]" @tap="handleMaterialClick(hotMaterials[2])">
<view class="w-[80rpx] h-[88rpx] flex-shrink-0 flex items-center justify-center bg-blue-50 rounded-[12rpx]">
<IconFont name="order" size="32" color="#10B981" />
</view>
<view class="flex-1 flex flex-col justify-between py-[4rpx]">
<text class="text-gray-800 text-[28rpx] leading-[40rpx] line-clamp-2">{{ hotMaterials[2].title }}</text>
<view class="flex justify-between items-end">
<text class="text-gray-400 text-[24rpx]">{{ hotMaterials[2].learners }}</text>
<text class="text-blue-600 text-[26rpx]">{{ hotMaterials[2].progress }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- Bottom Tab Bar -->
<TabBar current="home" />
<!-- Plan Popup -->
<PlanPopup v-model:visible="showPlanPopup">
<SchemeA
v-if="currentScheme === 'A'"
@close="showPlanPopup = false"
@submit="handlePlanSubmit"
/>
<SchemeB
v-if="currentScheme === 'B'"
@close="showPlanPopup = false"
@submit="handlePlanSubmit"
/>
</PlanPopup>
</view>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
import Taro, { useShareAppMessage } from '@tarojs/taro';
import { useGo } from '@/hooks/useGo';
import { useListItemClick, ListType } from '@/composables/useListItemClick';
import TabBar from '@/components/TabBar.vue';
import IconFont from '@/components/IconFont.vue';
import PlanPopup from '@/components/PlanPopup/index.vue';
import SchemeA from '@/components/PlanSchemes/SchemeA.vue';
import SchemeB from '@/components/PlanSchemes/SchemeB.vue';
// Plan Popup State
const showPlanPopup = ref(false);
const currentScheme = ref('A');
const openPlanPopup = (scheme) => {
currentScheme.value = scheme;
showPlanPopup.value = true;
};
const handlePlanSubmit = (formData) => {
console.log(`方案${currentScheme.value}提交:`, formData);
showPlanPopup.value = false;
Taro.showToast({
title: '提交成功',
icon: 'success'
});
};
// Grid navigation data with routes
const loopData0 = shallowRef([
{ icon: 'order', lanhutext0: '计划书', route: '/pages/plan/index' },
{ icon: 'my', lanhutext0: '入职相关', route: '/pages/onboarding/index' },
{ icon: 'cart', lanhutext0: '签单相关', route: '/pages/signing/index' },
{ icon: 'home', lanhutext0: '家办相关', route: '/pages/family-office/index' },
{ icon: 'category', lanhutext0: '产品知识库', route: '/pages/knowledge-base/index' },
{ icon: 'star', lanhutext0: '工具箱', route: null }, // 待开发
]);
/**
* 热门资料数据
*
* @description 本周热门资料列表数据，包含文件信息和下载地址
*/
const hotMaterials = ref([
{
title: '2024年保险市场趋势分析报告',
learners: '256人学习',
progress: '78%',
// 文件信息（用于点击打开预览）
fileName: '2024年保险市场趋势分析报告.pdf',
downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
},
{
title: '高净值客户需求分析与产品匹配',
learners: '189人学习',
progress: '65%',
fileName: '高净值客户需求分析与产品匹配.pdf',
downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
},
{
title: '保险合同条款解读与风险提示',
learners: '142人学习',
progress: '52%',
fileName: '保险合同条款解读与风险提示.pdf',
downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
}
]);
// Navigation
const go = useGo();
/**
* 使用文件列表点击处理器
*
* @description 配置为文件类型列表，点击时打开文件预览
*/
const { handleClick: handleMaterialClick } = useListItemClick({
listType: ListType.FILE,
onAfterClick: (item) => {
console.log('用户打开了资料:', item.title);
}
});
// Handle grid navigation click
const handleGridNav = (item) => {
if (!item.route) {
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
});
return;
}
go(item.route);
};
// 跳转到产品详情页
const goToProductDetail = (productId) => {
go('/pages/product-detail/index', {
id: productId
});
};
// Open webview with URL
const openWebView = (url) => {
go('/pages/webview/index', {
url: encodeURIComponent(url)
});
};
useShareAppMessage(() => {
return {
title: '臻奇智荟圈',
path: '/pages/index/index'
};
});
</script>