congming_huose-apk/subpackage/user/index.vue

<template>
	<view class="user-page">
		<!-- 自定义导航栏 -->
		<view class="tabback">
			<view class="rtjt" @click="btnback">←</view>
			<view class="name">{{$i18n.t('setuptitle')}}</view>
			<view style="width: 36rpx;"></view>
		</view>
		
		<!-- 用户头像和账户信息 -->
		<view class="profile-section">
			<view class="avatar-wrapper">
				<view class="avatar-placeholder">
					<image v-if="info.avatar" class="avatar-icon" :src="info.avatar" mode="aspectFill"></image>
					<image v-else class="avatar-icon" src="https://api.ccttiot.com/smartmeter/img/static/ugALV02cU3TX6aSoprJ8" mode="aspectFill"></image>
				</view>
			</view>
			<view class="account-info">
				<text class="account-name">{{$i18n.t('setupname')}}</text>
				<text class="account-email">{{info.nickName == undefined ? '--' : info.nickName}}</text>
			</view>
		</view>
		
		<!-- 设置选项列表 -->
		<view class="menu-list">
			<view class="menu-item" @click="editAccount">
				<view class="item-icon-wrapper">
					<image class="item-icon" src="https://api.ccttiot.com/smartmeter/img/static/uXw7Upf4d5LqOKE0lJ9r" mode="aspectFill"></image>
				</view>
				<text class="item-text">{{$i18n.t('setupedit')}}</text>
				<text class="item-arrow">〉</text>
			</view>
			
			<!-- <view class="menu-item" @click="session">
				<view class="item-icon-wrapper">
					<image class="item-icon" src="https://api.ccttiot.com/smartmeter/img/static/u7Da1unCDE9cplLxh0oE" mode="aspectFill"></image>
				</view>
				<text class="item-text">{{$i18n.t('setuphuihua')}}</text>
				<text class="item-arrow">〉</text>
			</view>
			
			<view class="menu-item" @click="accountProtection">
				<view class="item-icon-wrapper">
					<image class="item-icon" src="https://api.ccttiot.com/smartmeter/img/static/uwzBo5j6NOpSDYW4QQpG" mode="aspectFill"></image>
				</view>
				<text class="item-text">{{$i18n.t('setupbaohu')}}</text>
				<text class="item-arrow">〉</text>
			</view>
			
			<view class="menu-item" @click="systemSettings">
				<view class="item-icon-wrapper">
					<image class="item-icon" src="https://api.ccttiot.com/smartmeter/img/static/uj2fSNBKj3hQNYS2cFli" mode="aspectFill"></image>
				</view>
				<text class="item-text">{{$i18n.t('setupxitong')}}</text>
				<text class="item-arrow">〉</text>
			</view> -->
			
			<view class="menu-item logout-item" @click="logout">
				<view class="item-icon-wrapper">
					<image class="item-icon" src="https://api.ccttiot.com/smartmeter/img/static/uCNho5GORPrKCizqcbYM" mode="aspectFill"></image>
				</view>
				<text class="item-text">{{$i18n.t('tuichulogo')}}</text>
				<text class="item-arrow">〉</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                info:{},
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getinfo()
		},
		methods: {
			// 获取个人信息
			getinfo() {
				this.$http.get('/getInfo').then(res => {
					if(res.code == 200){
						this.info = res.user
						uni.setStorageSync('user',res.user)
					}else if(res.code == 401){
						uni.reLaunch({
							url:'/pages/login/index'
						})
					}
				})
			},
            // 点击返回上一级
			btnback(){
				uni.navigateBack()
			},
			// 编辑账户
			editAccount() {
				uni.navigateTo({
					url:'/subpackage/user/editzh'
				})
			},
			// 会话
			session() {
				uni.showToast({
					title: this.$i18n.t('sessionToast'),
					icon: 'none'
				})
			},
			// 账户保护
			accountProtection() {
				uni.showToast({
					title: this.$i18n.t('accountProtectionToast'),
					icon: 'none'
				})
			},
			// 系统设置
			systemSettings() {
				uni.showToast({
					title: this.$i18n.t('systemSettingsToast'),
					icon: 'none'
				})
			},
			// 退出登录
			logout() {
				uni.showModal({
					title: this.$i18n.t('logoutConfirmTitle'),
					content: this.$i18n.t('logoutConfirmContent'),
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.showToast({
								title: this.$i18n.t('logoutSuccess'),
								icon: 'success'
							})
							uni.reLaunch({
								url:'/pages/login/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.user-page {
		background-color: #F3F5F6;
		min-height: 100vh;
		padding-top: 180rpx;
		box-sizing: border-box;
	}
	
	.tabback {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 160rpx;
		padding: 0 20rpx;
		padding-top: 70rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999 !important;
		background-color: #fff;
		.rtjt {
			font-size: 40rpx;
			color: #333;
		}
		.name {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	// 用户头像和账户信息区域
	.profile-section {
		background-color: #F3F5F6;
		border-radius: 12rpx;
		text-align: center;
		height: 560rpx;
		padding-top: 80rpx;
		box-sizing: border-box;
		.avatar-wrapper {
			margin-bottom: 25rpx;
			
			.avatar-placeholder {
				width: 250rpx;
				height: 250rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				background-color: #F3F5F6;
				
				.avatar-icon {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;
				}
			}
		}
		
		.account-info {
			.account-name {
				display: block;
				font-size: 30rpx;
				color: #333;
				margin-bottom: 12rpx;
				font-weight: 500;
				margin-top: 40rpx;
			}
			
			.account-email {
				display: block;
				font-size: 26rpx;
				color: #888;
			}
		}
	}
	
	// 菜单列表
	.menu-list {
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
		
		.menu-item {
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 32rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			transition: background-color 0.2s;
			cursor: pointer;
			position: relative;
			z-index: 1;
			
			&:active {
				background-color: #f8f8f8;
			}
			
			&:last-child {
				border-bottom: none;
			}
			
			.item-icon-wrapper {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 46rpx;
				background-color: #fafafa;
				font-size: 30rpx;
				color: #3D3D3D;
				.item-icon {
					width: 80rpx;
					height: 80rpx;
				}
			}
			
			.item-text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.item-arrow {
				font-size: 26rpx;
				color: #ccc;
			}
			
			&.logout-item {
				margin-top: 32rpx;
				.item-text {
					color: #ff4757;
				}
			}
		}
	}
</style>