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

<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="我的" backgroundColor="transparent" :border="false">
		</uni-nav-bar>
		<scroll-view class="page" scroll-y>
			<view class="topBox">
				<view class="name">
					<image src="http://47.104.199.163:9090/images/propertyImgs/touxiang.jpg" 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="http://47.104.199.163:9090/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
						</view>
					</view>

				</div>


			</view>
		</scroll-view>
	</view>



</template>
<script setup>
	import {
		ref
	} from 'vue';


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

	// --方法----
	const goToDetail = () => {
		uni.navigateTo({
			url: '/pageSubPack/notice-list/noticeListDetails'
		})
	}
	// 返回
	const onItemClick = (item) => {
		if (item.title == '我的房屋') {
			uni.redirectTo({
				url: '/pageSubPack/my/myHouseIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '住户管理') {
			// uni.redirectTo({
			// 	url: '/pageSubPack/my/changePwd',
			// 	success: res => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });
		} else if (item.title == '我的车位') {
			uni.redirectTo({
				url: '/pageSubPack/my/myParkingSpaceIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '我的车辆') {
			uni.redirectTo({
				url: '/pageSubPack/my/myCarIndex',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (item.title == '设置') {
			goSetting()
		}
	}
	const goSetting = () => {
		uni.redirectTo({
			url: '/pageSubPack/my/settingIndex',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}
</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: calc(100vh - 100rpx);

		.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 {}

	.status-bar {
		width: 100vw;
		height: 46px;
	}

	.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>