Jingde-town-wechat-uniapp/pages/index/center.vue

<template>
	<view class="page">

		<navbar title="个人中心" />

		<view class="head">
			<view class="headImage">
				<image :src="userInfo.headImage || '/static/image/center/default_avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="name">
					{{ userInfo.nickName || '未登录用户'}}
				</view>
				<view class="tips"
				v-if="userInfo.createTime">
					加入时间：{{ $dayjs(userInfo.createTime).format('YYYY-MM-DD') }}
				</view>
			</view>
			<view class="setting">
				<!-- <uv-icon name="setting" size="40rpx"></uv-icon> -->
			</view>
		</view>

		<!-- 未登录状态显示登录按钮 -->
		<view v-if="!isLogin" class="login-container">
			<button class="login-btn" @click="toLogin">立即登录</button>
			<view class="login-tips">登录后查看更多功能</view>
		</view>

		<!-- 已登录状态显示菜单 -->
		<view class="line" v-if="isLogin">
			<uv-cell-group>
				
				<!-- 我的收藏 -->
				<uv-cell icon="setting-fill" title="我的收藏"
				@click="$utils.navigateTo('/pages_order/mine/collect')"
				isLink>
					<template #icon>
						<image src="/static/image/center/1.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的预约 -->
				<uv-cell icon="setting-fill" title="我的预约"
				@click="$utils.navigateTo('/pages_order/mine/subscribe')"
				isLink>
					<template #icon>
						<image src="/static/image/center/2.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的订单 -->
				<uv-cell icon="setting-fill" title="我的订单"
				@click="$utils.navigateTo('/pages_order/order/order')"
				isLink>
					<template #icon>
						<image src="/static/image/center/3.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 我的地址 -->
				<uv-cell icon="setting-fill" title="我的地址"
				@click="$utils.navigateTo('/pages_order/mine/address')"
				isLink>
					<template #icon>
						<image src="/static/image/center/1.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 购物车 -->
				<uv-cell icon="setting-fill" title="我的购物车"
				@click="$utils.navigateTo('/pages_order/mine/cart')"
				isLink>
					<template #icon>
						<image src="/static/image/center/1.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 加入志愿者 -->
				<uv-cell icon="setting-fill" title="加入志愿者"
				isLink 	@click="$utils.navigateTo('/pages_order/mine/volunteer')">
					<template #icon>
						<image src="/static/image/center/4.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
				
				<!-- 退出登录 -->
				<uv-cell icon="setting-fill" title="退出登录"
				isLink 	@click="$store.commit('logout')">
					<template #icon>
						<image src="/static/image/center/4.png"
						 class="uv-cell-icon"></image>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>


		<tabber select="2" />
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo']),
			isLogin() {
				return this.userInfo && this.userInfo.id
			}
		},
		data() {
			return {
				show: false,
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
			}
		},
		methods: {
			toLogin() {
				this.$utils.navigateTo('/pages_order/auth/wxLogin')
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.line{
			margin: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			overflow: hidden;
			box-shadow: 0 0 10rpx 10rpx #00000007;
			.uv-cell-icon{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
			/deep/ .uv-cell__body{
				padding: 40rpx 30rpx;
			}
		}
	}

	image {
		width: 100%;
		height: 100%;
	}

	.head {
		display: flex;
		background-color: $uni-color;
		padding: 60rpx 40rpx;
		align-items: center;
		position: relative;
		color: #fff;
		.headImage {
			width: 120rpx;
			height: 120rpx;
			background-image: url(/static/image/center/3.png);
			background-size: 100% 100%;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 40rpx;
		}

		.info {
			font-size: 28rpx;

			.name {
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}

			.tips {
				font-size: 26rpx;
			}
		}

		.setting {
			position: absolute;
			right: 50rpx;
			top: 50rpx;
		}
	}

	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 60rpx 30rpx;
	}
	
	.login-btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: $uni-color;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}
	
	.login-tips {
		font-size: 26rpx;
		color: #999;
	}
	
</style>