index.vue
2.62 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
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- Blue header background -->
<view class="bg-blue-500 h-40 absolute w-full top-0 left-0 z-0"></view>
<!-- Content -->
<view class="relative z-10 flex-1 pb-20">
<!-- User profile section -->
<view class="px-4 pt-8 pb-6 flex items-center justify-between">
<view class="flex items-center">
<image src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-16 h-16 rounded-full border-2 border-white" />
<view class="ml-4">
<h1 class="text-xl font-bold text-white">张爷爷</h1>
</view>
</view>
<button class="text-white">
<span>编辑</span>
</button>
</view>
<!-- Menu items -->
<view class="bg-white rounded-t-3xl px-4 py-5">
<view class="space-y-px">
<template v-for="(item, index) in menuItems" :key="item.id">
<view class="flex items-center py-4 cursor-pointer" @click="item.onClick">
<view :class="['w-10 h-10', item.color, 'rounded-full flex items-center justify-center mr-4']">
<component :is="item.icon" size="20" class="text-white" />
</view>
<span class="flex-1 text-lg">{{ item.label }}</span>
<Right size="20" class="text-gray-400" />
</view>
<view v-if="index < menuItems.length - 1" class="h-px bg-gray-100" />
</template>
</view>
</view>
</view>
<BottomNav />
</view>
</template>
<script setup>
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue';
import { Chart, Gift, Message, Document, Shield, Right } from '@nutui/icons-vue-taro';
const menuItems = ref([
{
id: 'points',
icon: Chart,
label: '积分明细',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PointsDetail/index' })
},
{
id: 'rewards',
icon: Gift,
label: '我的兑换',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/Rewards/index' })
},
{
id: 'feedback',
icon: Message,
label: '意见反馈',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/Feedback/index' })
},
{
id: 'agreement',
icon: Document,
label: '用户协议',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/UserAgreement/index' })
},
{
id: 'privacy',
icon: Shield,
label: '隐私政策',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PrivacyPolicy/index' })
}
]);
</script>