mp_exhibitor_miniprog/pages/user/index.vue

<template>
	<page-layout 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" @tap="navigateToAdLink(adInfo.ad_link)">
					<image :src="adInfo.ad_file" />
				</view>
			</view>
		</u-scroll-view>
	</page-layout></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'
	import PageLayout from "@/components/layout/page-layout";
	import {
			getAdInfo
		} from '@/api'	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      		PageLayout,
			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 {
				adInfo: {
					ad_file: 'https://oss.starify.cn/prod/starify/up/0001018678/20241108/672da70a6c76a.png?x-oss-process=image/resize,w_200'
				}
			}
		},
		created() {
			this.getAdData()},
		}, 		methods: {
			onClickSetting() {
				this.navigateTo('/pages/user/setting')
			},
			onClickUserInfo() {
				this.navigateTo('/pages/user/info')
			},
			getAdData() {
				getAdInfo({
					number: "UserCenter001"
				}).then(res => {
					this.adInfo = res.data[0]
				})
			},
			navigateToAdLink(href) {
				this.navigateTo(href)
			}
		}
	}
</script>

<style lang="scss">
		.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;
				cursor: pointer;

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