copy.vue

<template>
	<view class="i-page">
    <image src="https://store.keliuyun.com/download/app/wechat/tabbar/my-bg.png" class="bg-img" mode=""></image>
		<view class="content">
			<StatusBarVue />
			<view class="tools">
<!-- 				<view class="box">
					<image src="@/static/tabbar/email.png" mode="widthFix" style="width: 48rpx;margin-top: 4rpx;"></image>
					<uv-badge numberType="overflow" type="error" max="99" class="box-badge" :value="100"></uv-badge>
				</view>
				<image src="/static/tabbar/setting.png" style="width: 48rpx;margin: 0 30rpx 0 24rpx;" mode="widthFix"></image> -->
			</view>
			<view class="user">
				<image src="http://113.44.155.182:13001/wp-content/uploads/2025/04/cat.png" class="user_avatar"></image>
				<view class="user_info">
					<view class="user_info_name">Hello, {{ user.realName }}~</view>
					<view class="user_info_contact">
						<view class="contact" v-if="user.email">{{ user.email }}</view>
						<view class="contact" v-if="user.tel">{{ user.tel }}</view>
					</view>
				</view>
				<!-- <view class="user_edit">
					<uv-icon size="20" name="edit-pen" class="user_edit_icon"></uv-icon>
					<text class="user_edit_text">编辑</text>
				</view> -->
			</view>
			<uv-list class="list">
				<uv-list-item link v-for="(item,index) in pageList" :key="item.text" @tap="handleTapPageItem(item)">
					<template #header>
						<image :src="item.icon" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<text class="l-i-text">{{ item.text }}</text>
					</template>
				</uv-list-item>
			</uv-list>

		</view>
	</view>
</template>
<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		getUserInfoApi
	} from '@/api'
	import {
		getStageObj
	} from '@/utils'
	import {
		computed,
		ref
	} from 'vue';
	import StatusBarVue from '../../components/StatusBar.vue';
	import version from '@/static/tabbar/version.png'
	import feedback from '@/static/tabbar/feedback.png'
	import accord from '@/static/tabbar/accord.png'
	import password from '@/static/tabbar/password.png'
	import setting from '@/static/tabbar/setting.png'
  import logOut from '@/static/tabbar/logout.png'
  import {
    t
  } from '@/plugins/index.js'

	onShow(() => {
		getUserInfo()
	})

	const getUserInfo = async () => {
		try {
			const users = await getStageObj('user')
			console.log(users);
			const res = await getUserInfoApi(users.id)
			user.value = res.data
		} catch (error) {
			console.log(error)
		}
	}
	/**
	 * 每次进入页面都更新下user的值
	 */
	const user = ref({})

	const pageList = [
 //    {
	// 	icon: version,
	// 	text: '版本说明',
	// 	path: ''
	// }, {
	// 	icon: feedback,
	// 	text: '问题反馈',
	// 	path: ''
	// },
  {
  	icon: feedback,
  	text: t('app.common.switchAccount'),
  	path: '/pages/account/index'
  },
  {
		icon: accord,
		text: '隐私协议',
		path: ''
	}, {
		icon: password,
		text: '修改密码',
		path: '/pages/login/resetPassword',
		callback: handleResetPwd
	}, {
		icon: logOut,
		text: '退出登录',
		path: '',
		callback: handleLoginOut
	}]

	// 执行每项点击
	const handleTapPageItem = (item) => {
		if (item.callback) {
			item.callback()
      return
		}

    uni.navigateTo({
      url: item.path
    })
	}

    // 修改密码
	function handleResetPwd() {
		uni.navigateTo({
			url: '/pages/login/resetPassword'
		})
	}
	// 退出登录
	function handleLoginOut() {
		uni.clearStorageSync()
		uni.reLaunch({
			url: '/pages/login/index'
		})
	}
</script>


<style lang="scss" scoped>
	.i-page {
		/* #ifdef H5 */
		height: calc(100vh - 120rpx); // 减去底部tabbar高度
		/* #endif */
		/* #ifdef APP || MP-WEIXIN */
		height: 100vh;
		/* #endif */
		position: relative;

		.bg-img {
			width: 750rpx;
			position: absolute;
			height: 472rpx;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.content {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;

			.tools {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin: 24rpx 0 68rpx;

				.box {
					position: relative;

					.box-badge {
						position: absolute;
						top: -5rpx;
						right: -30rpx;
					}
				}
			}

			.user {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding-left: 32rpx;
				margin-bottom: 82rpx;

				&_avatar {
					width: 126rpx;
					height: 126rpx;
					border-radius: 50%;
					border: 4rpx solid #fff;
				}

				&_info {
					margin-left: 24rpx;
					&_name {
						font-weight: 600;
						font-size: 36rpx;
						color: #202328;
						margin-bottom: 20rpx;
						line-height: 50rpx;
					}

					&_contact {
						display: flex;
						gap: 16rpx;

						.contact {
							background: linear-gradient(90deg, #6CB9FF 0%, #2999FF 100%);
							border-radius: 18rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #FFFFFF;
							line-height: 26rpx;
							padding: 4rpx 16rpx;
						}
					}
				}

				&_edit {
					margin-left: auto;
					width: 128rpx;
					height: 56rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(56, 124, 245, 0.1);
					border-radius: 200rpx 0rpx 0rpx 200rpx;
					opacity: 0.73;
					display: flex;
					align-items: center;
					padding-left: 20rpx;
					gap: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: $uni-text-color;
				}
			}

			.l-i-text {
				color: $uni-text-color;
				padding-left: 20rpx;
				font-size: 28rpx;
			}
		}
	}
</style>