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

<template>
	<view class="page">

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

		<view class="head">
			<view class="headImage">
				<image :src="userInfo.headImage" 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 class="line">
			<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']),
		},
		data() {
			return {
				show: false,
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
		},
		methods: {

		}
	}
</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;
		}
	}

	
</style>