index.vue
3.05 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
<template>
<view class="relative w-full min-h-screen bg-[#F9FAFB] pb-[200rpx]">
<NavHeader title="帮助中心" />
<!-- Content Section -->
<view class="px-[32rpx] mt-[32rpx]">
<!-- Search Bar -->
<view class="flex items-center w-full h-[88rpx] bg-white rounded-full px-[32rpx] mb-[32rpx] shadow-sm">
<IconFont name="Search" class="text-gray-400 mr-[16rpx]" size="18" />
<input
type="text"
placeholder="搜索问题或关键词"
placeholder-class="text-gray-400 text-[28rpx]"
class="flex-1 text-[28rpx] text-gray-800 h-full"
/>
</view>
<!-- Contact Service -->
<view class="flex items-center justify-between w-full bg-white rounded-[24rpx] p-[32rpx] mb-[40rpx] shadow-sm relative overflow-hidden">
<!-- Background decoration if needed, or just white card -->
<view class="flex items-center z-10">
<image src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPng0bb42ee0fac4d686bb6281afd8462142feb6a7fa9de1286674e2c2010583a3d1" class="w-[80rpx] h-[80rpx] mr-[24rpx]" />
<text class="text-[32rpx] text-gray-900 font-medium">联系客服</text>
</view>
<view class="z-10">
<IconFont name="RectRight" class="text-gray-400" size="16" />
</view>
</view>
<!-- Important Questions -->
<view>
<text class="block text-[32rpx] text-gray-900 font-bold mb-[24rpx]">重点问题</text>
<view class="bg-white rounded-[24rpx] shadow-sm overflow-hidden">
<view
v-for="(item, index) in questions"
:key="index"
class="flex items-center justify-between p-[32rpx] border-b border-gray-100 last:border-b-0 active:bg-gray-50 transition-colors"
@tap="handleQuestionClick(item)"
>
<view class="flex items-center">
<view class="w-[12rpx] h-[12rpx] rounded-full bg-blue-600 mr-[24rpx]"></view>
<text class="text-[28rpx] text-gray-800">{{ item.title }}</text>
</view>
<IconFont name="RectRight" class="text-gray-400" size="16" />
</view>
</view>
</view>
</view>
<TabBar current="me" />
</view>
</template>
<script setup>
import { ref } from 'vue'
import NavHeader from '@/components/NavHeader.vue'
import TabBar from '@/components/TabBar.vue'
import IconFont from '@/components/IconFont.vue'
import { useGo } from '@/hooks/useGo'
const go = useGo()
const questions = ref([
{ title: '如何创建新的计划书？', id: 1 },
{ title: 'AI答疑如何使用？', id: 2 },
{ title: '如何修改个人信息？', id: 3 },
{ title: '数据如何同步到云端？', id: 4 },
{ title: '忘记密码怎么办？', id: 5 }
])
const handleQuestionClick = (item) => {
// Navigate to detail or show answer
console.log('Clicked question:', item.title)
// Example navigation (adjust path as needed)
// go('/pages/help-detail/index', { id: item.id })
}
</script>