guangan-mp/pages/user/index.vue

<template>
	<view class="flex flex-column">
		<view class="logo" @click="goLogin" :hover-class="!isLogin ? 'logo-hover' : ''">
			<image class="logo-img" :src="isLogin ? userInfo.extra.avatarUrl : avatarUrl"></image>
			<view class="logo-title">
				<text class="user-name">Hi，{{userInfo.nickname || userInfo.extra.nickName}}</text>
			</view>
		</view>
		<view class="center-list" @click="goUserInfo">
			<view class="center-list-item">
				<text class="list-text">账号管理</text>
			</view>
		</view>
		<view class="center-list" @click="goUserUserShare">
			<view class="center-list-item">
				<text class="list-text">我的随手拍</text>
			</view>
		</view>
		<view class="center-list" @click="goUserPoint">
			<view class="center-list-item">
				<text class="list-text">用户积分</text>
			</view>
		</view>
		<view class="center-list" @click="goUserOrder">
			<view class="center-list-item">
				<text class="list-text">我的订单</text>
			</view>
		</view>
		<view class="center-list" @click="goMessage">
			<view class="center-list-item">
				<text class="list-text">我的消息</text>
			</view>
		</view>
		<view class="center-list" @click="goMorePage">
			<view class="center-list-item">
				<text class="list-text">更多设置</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { TaCache } from '@/common/cache'
	export default {
		data() {
			return {
				avatarUrl: '/static/images/user-no-avatar.png',
				isLogin: false,
				userInfo: {
					extra: {
						avatarUrl: '/static/images/user-no-avatar.png',
						nickname: '未登录',
					},
				},
			}
		},
		onShow() {
			const userInfo = TaCache.get('auth.user');
			if (userInfo && userInfo.id) {
				this.userInfo = userInfo;
				this.isLogin = true;
			} else {
				this.goLogin()
			}
		},
		methods: {
			goLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/user/login"
					})
				}
			},
			goUserInfo() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/user/login"
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/info",
					})
				}
			},
			goUserPoint() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/user/login"
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/point"
					})
				}
			},
			goUserUserShare() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: "/pages/user/login"
					})
				} else {
					uni.navigateTo({
						url: "/pages/user/user_share"
					})
				}
			},
			goMessage() {
				uni.navigateTo({
					url: "/pages/message/message",
				})
			},
			goUserOrder() {
				uni.navigateTo({
					url: "/pages/user/order",
				})
			},
			goMorePage() {
				uni.navigateTo({
					url: "/pages/const/more"
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f8f8f8;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		background-color: #2F85FC;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.user-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login-navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20upx;
	}

	.center-list {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 690upx;
		margin-left: 30upx;
		margin-right: 30upx;
	}

	.center-list-item {
		height: 90upx;
		width: 690upx;
		flex-direction: row;
		padding: 0upx 20upx;
		border-radius: 10upx;
		box-shadow: #55555555 1rpx 0rpx 2rpx 0rpx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
	}

</style>