property-resident-side/property-uniapp-project/pages/myIndex/myIndex.vue

<template>
	<view class="contentStyle">
		<scroll-view class="page" scroll-y>
			<view class="topBox">
				<view class="name">
					<image src="https://wuyeadmin.bugtc.com/images/logo-app.png" class="img" />
					<span style="padding: 5rpx 5rpx;display: flex;flex-direction: column;line-height: 60rpx;">
						<span style="font-size: 36rpx;font-weight: 600;">
							{{loginName}}
						</span>
						<span style="font-size: 26rpx;color:#666666;">
							{{phoneNum}}
						</span>
					</span>
				</view>
			</view>
			<view class="contentBox">
				<div class="page-container">
					<view class="list-container">
						<view class="list-item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
							<image :src="item.icon" class="item-icon" />
							<view class="item-content">
								<text class="item-title">{{ item.title }}</text>
								<span class="item-desc" v-if="item.desc"><span
										style="align-self: flex-end;font-size: 24rpx;vertical-align: baseline;">{{ item.desc }}</span></span>
							</view>
							<view class="item-arrow"></view>
							<!-- <image src="https://wuyeadmin.bugtc.com/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
						</view>
					</view>

				</div>


			</view>
		</scroll-view>
		<view class="icp-footer">
			<text class="icp-text">ICP备案号：鲁ICP备2024131497号-4A</text>
		</view>
	</view>



</template>
<script setup>
	import {
		ref
	} from 'vue';
	import { getUserProfile } from '../../pageSubPack/api/apiSub';
	import {onShow} from '@dcloudio/uni-app'
	import { requireLogin } from '@/common/checkLogin.js'


	const list = ref([{
			icon:'https://wuyeadmin.bugtc.com/images/propertyImgs/house.png',
			title: "我的房屋"
		},
		// {
		// 	icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/user.png",
		// 	title: "住户管理",
		// 	// desc: "您可以在这里添加家人、朋友、租客~"
		// },
		{
			icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/parking.png",
			title: "我的车位"
		},
		{
			icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/car.png",
			title: "我的车辆"
		},
		{
			icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/setting.png",
			title: "设置"
		}
	])
	const loginName = ref("")
	const phoneNum = ref('')
	const avatar = ref('')

	// --方法----
	const goToDetail = () => {
		uni.navigateTo({
			url: '/pageSubPack/notice-list/noticeListDetails'
		})
	}
	// 获取用户账号信息
	function getUserInfoData(){
		getUserProfile().then(res => {
			if (res.code === 200 && res.data) {
				avatar.value = res.data.avatar
				loginName.value = res.data.username
				phoneNum.value = res.data.phone || ''		
			}
		})
	}
	
	
	
	// 返回
	const onItemClick = (item) => {
		if (!requireLogin()) return
		const cachedVillageId = uni.getStorageSync('currentVillageId')
		// 设置不需要绑定小区
		if (item.title !== '设置') {
			if (!cachedVillageId || cachedVillageId === '0' || cachedVillageId === 0) {
				uni.showToast({ title: '未绑定小区，没有权限', icon: 'none', duration: 2000 })
				return
			}
		}
		if (item.title == '我的房屋') {
			uni.navigateTo({
				url: '/pageSubPack/my/myHouseIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '住户管理') {
			// uni.navigateTo({
			// 	url: '/pageSubPack/my/changePwd',
			// 	success: res => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
		} else if (item.title == '我的车位') {
			uni.navigateTo({
				url: '/pageSubPack/my/myParkingSpaceIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '我的车辆') {
			uni.navigateTo({
				url: '/pageSubPack/my/myCarIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '设置') {
			goSetting()
		}
	}
	const goSetting = () => {
		if (!requireLogin()) return
		uni.navigateTo({
			url: '/pageSubPack/my/settingIndex',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
	let lastUserIdMy = ''
	onShow(() =>{
		const token = uni.getStorageSync('token')
		if (!token) return
		const currentUserId = uni.getStorageSync('userId') || ''
		// 仅登录状态变化时刷新，切后台回来直接用缓存
		if (currentUserId !== lastUserIdMy) {
			lastUserIdMy = currentUserId
			getUserInfoData()
		}
	})
</script>




<style lang="scss">
	page {
		// background: #fff;
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
	}
</style>
<style lang="scss" scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100%;

		.topBox {
			width: 100%;
			padding: 20rpx 0px;
			position: relative;
			// background-color: #1A75FF;

			.titleBox {
				width: 100%;

				position: relative;

				.title {
					font-size: 36rpx;
					line-height: 80rpx;
					text-align: center;
					font-weight: 500;
				}

				.settingImg {
					width: 48rpx;
					height: 48rpx;
					top: 16rpx;
					right: 0px;

				}
			}

			.img {
				width: 60px;
				height: 60px;
				margin-right: 10rpx;
				border-radius: 50%;
			}

			.name {

				bottom: 30rpx;
				left: 30rpx;
				display: flex;
				align-items: center;


			}
		}

		.contentBox {

			position: relative;
		}


	}

	.contentStyle {}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}
</style>
<style scoped>
	.list-container {}

	.icp-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}

	.icp-text {
		font-size: 22rpx;
		color: #999999;
	}


	.list-item {
		display: flex;
		align-items: center;
		/* background: #fff; */
		padding: 20rpx 6rpx;
		border-radius: 8rpx;
		/* border-bottom:2rpx solid #f2f2f2; */
		/* margin-bottom: 10rpx; */
	}

	.item-icon {
		width: 84rpx;
		height: 84rpx;
		/* margin-right: 20rpx; */
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-title {
		font-size: 32rpx;
		/* color: #333; */
		font-weight: 400;
		margin: 10rpx 20rpx;
		/* margin-bottom: 6rpx; */
	}

	.item-desc {
		font-size: 24rpx;
		color: #b5b5b5;
		white-space: nowrap;
		/* 强制不换行 */
		overflow: hidden;
		/* 超出隐藏 */
		text-overflow: ellipsis;


	}

	.item-arrow {
		width: 16rpx;
		height: 16rpx;
		border-right: 3rpx solid #999999;
		border-bottom: 3rpx solid #999999;
		transform: rotate(-45deg);
		margin-right: 10rpx;
	}
</style>