index.vue
2.95 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
<!--
* @Date: 2025-08-27 17:47:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-08-28 11:16:24
* @FilePath: /lls_program/src/pages/Profile/index.vue
* @Description: 文件描述
-->
<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://placehold.co/400x400/e2f3ff/0369a1?text=LFX&font=roboto" 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>
<view @tap="goToEditProfile" class="text-white">
<span>编辑</span>
</view>
</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, shallowRef } from 'vue';
import Taro from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue';
import { Shop3, Cart, Message, Tips, Right } from '@nutui/icons-vue-taro';
const menuItems = shallowRef([
{
id: 'points',
icon: Shop3,
label: '积分明细',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PointsDetail/index' })
},
{
id: 'rewards',
icon: Cart,
label: '我的兑换',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/MyRewards/index' })
},
{
id: 'feedback',
icon: Message,
label: '意见反馈',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/Feedback/index' })
},
{
id: 'agreement',
icon: Tips,
label: '用户协议',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/UserAgreement/index' })
},
{
id: 'privacy',
icon: Tips,
label: '隐私政策',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PrivacyPolicy/index' })
}
]);
const goToEditProfile = () => {
Taro.navigateTo({ url: '/pages/EditProfile/index' });
};
</script>