ucenter.nvue

<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? (userInfo.avatar || avatarUrl) :avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? userInfo.username : '您未登录'}}</text>
				<text class="go-login-navigat-arrow navigat-arrow" v-if="!login">&#xe65e;</text>
			</view>
		</view>
		<uni-list class="center-list">
			<template v-for="(sublist , index) in ucenterList">
				<uni-list-item :title="item.title" :rightText="item.rightText" :to="item.to"
					v-for="(item, subIndex) in sublist" :key="(index + '_' + subIndex)" @click="ucenterListClick(item)" :clickable="true"></uni-list-item>
				<!-- #ifdef APP-NVUE -->
				<cell class="center-list-cell"></cell>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<view class="center-list-cell"></view>
				<!-- #endif -->
			</template>
		</uni-list>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';
	export default {
		data() {
			return {
				avatarUrl: '/static/logo.png',
				ucenterList: [
					[{
						title: '阅读过的文章'
					}, {
						title: '我的积分'
					}],
					[{
						title: '政策与协议',
						to:'/pages/agree-list/agree-list'
					}, {
						title: '关于',
						to: '/pages/about/about'
					},
					//#ifdef APP-PLUS
					{
						title: '检查更新',
						rightText: `V${getApp().appVersion.finall.version}_${getApp().appVersion.finall.versionCode}`,
						event:'checkVersion'
					}
					//#endif
					],
					[
						{
							title: '反馈',
							to:'/pages/uni-feedback/uni-feedback'
						},{
							title: '设置',
							to: '/pages/settings/settings'
						}
					]
				]
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				login: 'user/hasLogin'
			})
		},
		onReady() {
			
		},
		onShow(){
			console.log(this.userInfo);
		},
		methods: {
			...mapMutations({
				logout:'user/logout'
			}),
			/**
			 * 个人中心项目列表点击事件
			 */
			ucenterListClick(item){
				if(!item.to && item.event){
					this[item.event]();
				}
			},
			checkVersion(){
				checkUpdate();
			},
			goLogin() {
				if (!this.login) {
					console.log('点击前往登录');
					uni.navigateTo({
						url: '../login/login'
					});
				}
				else {
					console.log('点击编辑信息');
					uni.navigateTo({
						url:'./edit/edit'
					})
				}
			}
		}
	}
</script>

<style>
	/* #ifndef APP-PLUS-NVUE */
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/text-icon.ttf') format('truetype');
	}

	page {
		background-color: #f8f8f8;
	}

	/* #endif*/

	/* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */
	/* #ifdef MP-TOUTIAO */
	text :not(view) {
		font-family: texticons;
	}

	/* #endif */

	.center {
		flex: 1;
		flex-direction: column;
		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;
	}

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

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

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}

	.center-list {
		background-color: #f9f9f9;
	}

	.center-list-cell {
		width: 750rpx;
		height: 40rpx;
	}
</style>