mp_exhibitor_miniprog/pages/user/index.vue

<template>
	<view class="user-index">
		<nav-bar title="个人中心" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true">
			<view class="main-container">
				<view class="user-info" @click="onClickUserInfo">
					<view class="user-avator">
						<image v-if="isLoginState && avatar" :src="avatar" />
						<van-icon v-else class="icon" name="user" />
					</view>
					<view class="user-title">
						<view class="user-name">
							<template v-if="isLoginState">{{ nickName || phone }}</template>
							<template v-else>请登录/注册</template>
						</view>
						<view v-if="isLoginState && nickName" class="user-phone">手机号：{{ phone }}</view>
					</view>
				</view>
				<view class="user-grid-menu">
					<view hover-class="active" @click="navigateTo('/pages/user/like')">
						<view class="iconfont icon-heart1"></view>
						<view>点赞</view>
					</view>
					<view hover-class="active" @click="navigateTo('/pages/user/favorites')">
						<view class="iconfont icon-Favourites-Add-Large"></view>
						<view>收藏</view>
					</view>
					<view hover-class="active" @click="navigateTo('/pages/user/vote')">
						<view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
						<view>投票</view>
					</view>
					<view hover-class="active" @click="showAlertDialog('功能未开通')">
						<view class="iconfont icon-xiaochengxu-guanzhongyudengjiicon"></view>
						<view>预登记</view>
					</view>
				</view>
				<view class="user-list-item">
					<van-cell-group>
						<van-cell title="设置" is-link @click="onClickSetting">
							<view slot="icon" class="iconfont icon-setting" />
						</van-cell>	
					</van-cell-group>
				</view>
				<view class="ad-space">
					<image src="https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70adbdbe.png?x-oss-process=image/resize,w_200" mode="aspectFill" />
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import VanCell from '@/wxcomponents/vant/cell/index'
	import VanCellGroup from '@/wxcomponents/vant/cell-group/index'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			VanCell,
			VanCellGroup
		},
		computed: {
			isLoginState() {
				return this.$store.getters.user !== null
			},
			avatar() {
				const user = this.$store.getters.user
				if (user) {
					return user.avatar
				} else {
					return ''
				}
			},
			nickName() {
				const user = this.$store.getters.user
				if (user) {
					return user.nick_name
				} else {
					return ''
				}
			},
			phone() {
				const user = this.$store.getters.user
				if (user) {
					return user.phone
				} else {
					return ''
				}
			}
		},
		data() {
			return {
			}
		},
		created() {},
		onShow() {
		}, 
		methods: {
			onClickSetting() {
				if (!this.isLoginState) {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/setting'
					})
				}
			},
			onClickUserInfo(){
				if (!this.isLoginState) {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.user-index{
		.user-info{
			display: flex;
			align-items: center;
			.user-avator{
				@include display-flex-center;
				width: 111rpx;
				height: 111rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 23rpx;
				background-color: $buttonPrimaryColor;
				.icon{
					color: #ffffff;
					opacity: 0.67;
					font-size: 70rpx;
				}
			}
			.user-name{
				font-size: 30rpx;
				color: #333333;
			}
			.user-phone{
				font-size: $fontSize3;
				color: #7d7d7d;
			}
		}
		.user-grid-menu{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			height: 192rpx;
			margin-top: 60rpx;
			background-color: #FFFFFF;
			&>view{
				@include display-flex-center;
				flex-direction: column;
				font-size: $fontSize3;
				color: #333333;
				&.active{
					background-color: rgba(0, 0, 0, 0.05)
				}
			}
			.iconfont{
				margin-bottom: 19rpx;
				font-size: 44rpx;
			}
			.icon-Heart,.icon-xiaochengxu-toupiaoicon{
				font-size: 48rpx;
			}
		}
		.user-list-item{
			margin-top: 23rpx;
			.van-cell{
				--cell-horizontal-padding: 58rpx;
			}
		}
		.ad-space{
			height: 180rpx;
			margin-top: 23rpx;
		}
	}
</style>