shuhi-app/pages/my/my.vue

<template>
	<view class="settings-page">
		<!-- 顶部用户信息 -->
		<view class="user-header">
			<view class="user-info">
				<u-avatar :size="50"
					src="https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png"></u-avatar>

				<view class="greeting">
					<text class="time">下午好！</text>
					<text class="name">涨涨涨</text>
				</view>
			</view>
		</view>

		<!-- 设置列表 -->
		<view class="settings-list">
			<u-cell-group :border="false">
				<u-cell v-for="(item, index) in settingsList" :key="index" :title="item.title" :isLink="true"
					@click="handleClick(item)" :border="index==settingsList.length-1?false:true">
					<template #icon>
						<view class="cell-icon">
							<u-icon :name="item.icon||'setting'" size="20" color="#333"></u-icon>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const settingsList = ref([{
			title: '用户信息',
			path: '/pages/my/page/user-info',
		},
		{
			title: '默认仓库',
			path: '/pages/my/page/warehouse',
		},
		{
			title: '学校设置',
			path: '/pages/my/page/school'
		},
		{
			title: '审核未完成',
			path: '/pages/my/page/audit-unfinished',
		},
		{
			title: '版本设置',
			path: '/pages/my/page/version',
			icon: 'tags'
		},
		{
			title: '音频设置',
			path: '/pages/my/page/volume',
		},
		{
			title: '图书显示设置',
			path: '/pages/my/page/book-display',
		},
		{
			title: '修改密码',
			icon: 'lock',
			path: '/pages/my/page/password'
		},
		{
			title: '退出账号',
			path: '/pages/my/page/logout',
		}
	])

	const handleClick = (item) => {
		if (item.type === 'logout') {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 执行退出登录逻辑
						uni.clearStorageSync()
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}
				}
			})
			return
		}
		uni.navigateTo({
			url: item.path
		})
	}
</script>

<style lang="scss" scoped>
	.settings-page {

		.user-header {
			background: #4CD964;
			padding: 40rpx 32rpx;

			.user-info {
				display: flex;
				align-items: center;

				.greeting {
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;

					.time {
						font-size: 32rpx;
						color: #FFFFFF;
						margin-bottom: 8rpx;
					}

					.name {
						font-size: 36rpx;
						color: #FFFFFF;
						font-weight: 500;
					}
				}
			}
		}

		:deep(.u-cell) {
			.u-cell__body {
				padding: 15px;
			}
		}

		.settings-list {
			padding: 20rpx;

			:deep(.u-cell-group) {
				border-radius: 16rpx;
				overflow: hidden;
				background: #FFFFFF;
			}
		}
	}
</style>